/* Hextinction — Primordial visual edition. Presentation only. */
:root{--bg:#070f13;--panel-hi:#13252a;--panel-lo:#0b171c;--line:#284047;--line-hi:#477074;--amber:#e5c17b;--amber-hi:#ffe1a1;--bio:#71e3b6;--txt:#ecf3ef;--txt-dim:#a2b9b7;color-scheme:dark}
body{font-family:'Rajdhani','Segoe UI',sans-serif}
button,a,input,select{ -webkit-tap-highlight-color:transparent }
button,a{transition:background .2s,border-color .2s,color .2s,box-shadow .2s,filter .2s,transform .2s}
button:not(:disabled):hover{filter:brightness(1.12)}
button:disabled{cursor:not-allowed}
:where(button,a,input,select):focus-visible{outline:2px solid #9df7df!important;outline-offset:4px}
input::placeholder{color:#93aaa7!important}
input:not([type=radio]):not([type=checkbox]),select{border-color:#385257!important;background-color:#09191e!important;color:#edf6f2!important;border-radius:7px!important}
input:focus,select:focus{border-color:#71e3b6!important;box-shadow:0 0 0 3px #71e3b617!important}
::selection{background:#e5c17b55;color:white}
/* An illustrated, responsive entry into the world. */
body:has(>.box){background:linear-gradient(90deg,rgba(4,15,20,.28),rgba(4,15,20,.1) 45%,rgba(4,15,20,.75)),url('/static/art/primordial-world.webp') center/cover fixed!important;animation:none;isolation:isolate;gap:clamp(35px,7vw,120px);padding:48px;overflow-x:hidden}
body:has(>.box)::before{content:'';position:fixed;inset:0;background:linear-gradient(0deg,#041015b8,transparent 55%);z-index:-1;pointer-events:none}
body:has(>.box)>.box{flex-shrink:0;width:min(420px,100%);padding:32px;background:linear-gradient(145deg,#142b30e8,#08151ded);border:1px solid #aacac539;border-top-color:#d8bc7b91;border-radius:18px;clip-path:none;box-shadow:0 32px 100px #0008,inset 0 1px 0 #ffffff0c;backdrop-filter:blur(22px);animation:hx-reveal .7s ease both}
body:has(>.box)>.box::before{border-radius:inherit;background:radial-gradient(ellipse at 0 0,#e5c17b0d,transparent 60%)}
.box img[src$='hextinction.svg']{width:245px!important;max-width:100%;filter:none!important}
.box .btn,.box button[type=submit]{border-radius:7px;clip-path:none;background:linear-gradient(110deg,#dbb870,#f0d59b);border:1px solid #ffe1a188;color:#17272a;text-shadow:none;letter-spacing:.12em;min-height:46px;box-shadow:0 5px 22px #d6af5320}
.box .btn2{border-radius:7px;clip-path:none;background:#203c40;border-color:#4b706f;color:#d8eee8;min-height:44px}
.box .btn::before,.box .btn::after{display:none}
.box a.link{color:#9fe5cf;font-size:14px}
.box hr{background:linear-gradient(90deg,transparent,#728d8055,transparent);margin:20px 0}
.hx-intro{max-width:590px;flex:1;position:relative;align-self:center;animation:hx-reveal .9s ease both;color:#f3f1df;text-align:left;text-shadow:0 3px 25px #031218}
.hx-kicker{display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.24em;font-size:12px;font-weight:700;color:#ead7a8;margin-bottom:26px}
.hx-kicker::before{content:'';width:30px;height:1px;background:#e5c17b}
.hx-intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(44px,5.2vw,78px);font-weight:400;line-height:1.04;letter-spacing:-.04em;color:#f7f2df;text-shadow:0 3px 35px #071c21;margin:0 0 24px}
.hx-intro h1 em{font-weight:400;color:#e9c884}
.hx-intro p{font-family:'Segoe UI',sans-serif;font-size:15px;line-height:1.8;color:#d0ded8;max-width:400px}
.hx-traits{display:flex;flex-wrap:wrap;gap:24px;margin-top:36px;border-top:1px solid #dce7d82b;padding-top:22px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#d7e3d8}
.hx-traits span::before{content:'◇';color:#e7c77c;margin-right:8px}
.hx-motes{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.hx-motes i{position:absolute;width:3px;height:3px;background:#ffe5a1;border-radius:50%;box-shadow:0 0 14px 3px #edcf7266;animation:hx-float 14s ease-in-out infinite;opacity:0}
/* Game chrome: readable instrument panels around a brighter living board. */
body:has(#mapa){background:#08151b;gap:1px}
body:has(#mapa) .top{background:linear-gradient(180deg,#1b3036,#0d2027);border-bottom-color:#59727355;box-shadow:0 4px 24px #0003}
body:has(#mapa) .top>img{width:44px!important;height:44px!important;object-fit:contain}
body:has(#mapa) :is(.mid-left,.mid-right,.bot-left,.bot-center,.bot-center-draft,.bot-center-actions,.bot-summary,.bot-right){background:linear-gradient(145deg,#15282e,#0b1920);border-color:#35515a}
body:has(#mapa) .panel-label{color:#e8c98c;font-size:12px;letter-spacing:.16em;border-left:2px solid #6bd4b4;padding:3px 0 3px 10px;text-shadow:none}
body:has(#mapa) .right-panel{background:linear-gradient(160deg,#b2f5e405,transparent);border-color:#35515a}
body:has(#mapa) .stat-cards>div{background:linear-gradient(150deg,#224047,#12282e)!important;border:1px solid #51777777!important;border-radius:10px!important;box-shadow:0 5px 12px #0002}
body:has(#mapa) .stat-cards>div:nth-child(2){border-top-color:#e5c17b!important}
body:has(#mapa) .stat-cards>div:nth-child(3){border-top-color:#87bfdf!important}
body:has(#mapa) .btn{border-radius:6px;font-size:13px;letter-spacing:.1em}
body:has(#mapa) .btn::before,body:has(#mapa) .btn::after{display:none}
body:has(#mapa) .btn-move{background:linear-gradient(120deg,#214a40,#183831);border-color:#64bb9a;color:#a2f0cf;text-shadow:none}
body:has(#mapa) .btn-end{background:linear-gradient(120deg,#e0b970,#f0d798);color:#1b2d30;border-color:#ffe0a6;text-shadow:none;animation:hx-ready 3s ease-in-out infinite}
body:has(#mapa) .mid-center{background:radial-gradient(ellipse at 50% 45%,#29464b80,transparent 70%),#09191f}
body:has(#mapa) .mid-center::after{box-shadow:inset 0 0 90px 10px #020d1466}
.lens-bar{top:12px;left:12px;gap:5px;padding:6px;background:#0b1a22c9;border:1px solid #506b7066;border-radius:10px;backdrop-filter:blur(12px)}
.lens-btn{clip-path:none;border-radius:5px;background:#1b3037;color:#bfdbd6;border-color:transparent;font-size:11px;padding:7px 10px}
.lens-btn.active{background:#e4c17a;color:#14282e;border-color:#f5d798;text-shadow:none;box-shadow:0 2px 10px #e5c17b22}
#map-group text{paint-order:stroke;stroke:#081a2080;stroke-width:1.5px;stroke-linejoin:round}
#map-group>g>polygon:first-child{transition:filter .2s,stroke .2s,stroke-width .2s}
#map-group>g:hover>polygon:first-child{filter:brightness(1.23)}
.hx-water{stroke-dasharray:6 4;animation:hx-water 8s linear infinite}
.hx-lava{animation:hx-lava 4s ease-in-out infinite}
#map-group{filter:drop-shadow(0 8px 8px #0005)}
:is(#especie-popup,#especie-popup-hover,#hex-tooltip){background:linear-gradient(145deg,#1b343b,#0c1c23)!important;border-color:#73968b80!important;border-radius:12px!important;box-shadow:0 20px 60px #0009!important}
body:has(#mapa) .res-row{padding:4px 3px;border-bottom:1px solid #b8ead609}
body:has(#mapa) .placeholder{color:#8da8a7}
.card{background:linear-gradient(145deg,#172f35,#0b1d24);border-color:#46645f;border-radius:12px;clip-path:none}
body:has(>.card){background:linear-gradient(#06151ce8,#06151cf5),url('/static/art/primordial-world.webp') center/cover fixed}
@keyframes hx-reveal{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes hx-float{0%,100%{opacity:0;transform:translate(0,20px)}35%,65%{opacity:.65}80%{transform:translate(20px,-90px)}}
@keyframes hx-ready{50%{box-shadow:0 0 20px #e5c17b33}}
@keyframes hx-water{to{stroke-dashoffset:-40}}
@keyframes hx-lava{50%{opacity:.65}}
@media(min-width:1301px){body:has(#mapa){grid-template-columns:minmax(0,1fr) clamp(330px,34vw,900px) clamp(148px,11vw,300px);grid-template-rows:clamp(52px,3.4vw,76px) auto minmax(0,1fr) auto auto}}
@media(min-width:901px) and (max-width:1300px) and (min-height:521px){body:has(#mapa){grid-template-columns:minmax(0,1fr) clamp(330px,36vw,900px) clamp(140px,11vw,300px);grid-template-rows:clamp(50px,3.4vw,70px) auto minmax(0,1fr) auto auto}}
@media(max-width:1000px){body:has(>.box){gap:30px;padding:28px}.hx-intro h1{font-size:50px}.hx-intro p{font-size:14px}.hx-traits{gap:14px}}
@media(max-width:760px){body:has(>.box){flex-direction:column;justify-content:center;align-items:center;padding:32px 18px;gap:26px;background-position:35% center!important}.hx-intro{flex:none;width:min(420px,100%)}.hx-kicker{font-size:10px;margin-bottom:12px}.hx-intro h1{font-size:40px;margin-bottom:12px}.hx-intro p{font-size:13px;line-height:1.6}.hx-traits{display:none}body:has(>.box)>.box{padding:26px}.lens-bar{top:7px;left:7px;gap:3px;padding:4px}.lens-btn{font-size:10px;padding:6px}.hx-motes i:nth-child(n+9){display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hx-motes{display:none}}
/* Keep dense numbers and lobby/game controls inside their panels. */
body:has(#mapa) .stat-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
body:has(#mapa) .stat-cards>div{min-width:0;padding:10px 7px!important;overflow-wrap:anywhere}
body:has(#mapa) .stat-cards>div>div:nth-child(2){font-family:'Rajdhani','Segoe UI',sans-serif!important;font-size:27px!important;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
body:has(#mapa) .stat-cards>div>div:first-child{color:#b3c9c3!important}
body:has(#mapa) .draft-grid>div{border-radius:9px!important;background:linear-gradient(155deg,#233b31,#122620)!important}
.hx-map-controls{position:absolute;right:14px;bottom:14px;z-index:10;display:flex;gap:4px;padding:5px;background:#0c1c24e6;border:1px solid #647b7866;border-radius:9px;backdrop-filter:blur(8px)}
.hx-map-controls button{min-width:34px;height:32px;border:1px solid #45655f;border-radius:5px;background:#1b353b;color:#e7dcc0;font:600 14px 'Rajdhani','Segoe UI',sans-serif;padding:0 10px;cursor:pointer}
@media(min-width:901px) and (min-height:521px){body:has(#mapa) .top.top-right{flex-wrap:wrap;align-content:center;gap:4px!important;padding:4px 8px}body:has(#mapa) .top-sep{display:none}body:has(#mapa) .top.top-right button{white-space:nowrap;padding:3px 5px!important}body:has(#mapa) .top.top-right>span{margin-left:0!important}}
@media(max-width:900px),(max-height:520px){body:has(#mapa){width:100%;max-width:100vw;grid-template-columns:minmax(0,44%) minmax(0,1fr)}body:has(#mapa) :is(.mid-left,.mid-right,.bot-left,.bot-right){max-width:100vw}body:has(#mapa) .top>img{width:28px!important;height:28px!important}}