/* Terrain, tactical overlays, and event playback use separate visual layers. */
.board{isolation:isolate;overflow:visible;background:#101b24;box-shadow:0 8px 22px #0008}
.board .tile{border:1px solid #7396a31a;background:#1e2c34;overflow:visible;box-shadow:none}
.board .tile:nth-child(5n+2){background:#23313a}.board .tile:nth-child(7n){background:#24323b}
.board .tile:before,.board .tile:after{display:none}
.tile-surface{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 30%,#71859412,transparent 65%),repeating-linear-gradient(165deg,transparent 0 8px,#07101820 9px 10px,transparent 11px 22px);box-shadow:inset 0 1px 0 #bccbd012,inset 0 -1px 0 #060c1222}
.board .plateau{background:#54636a;border-color:#85969c24}
.board .plateau .tile-surface{background:linear-gradient(150deg,#c4d0c317,transparent 55%),repeating-linear-gradient(0deg,transparent 0 5px,#14272b15 6px 7px);box-shadow:inset 0 1px 0 #ced9c224}
.board .cliff-top{border-top:4px solid #bbc8b4}.board .cliff-left{border-left:4px solid #98aea1}
.board .cliff-right{border-right:6px solid #303f43;box-shadow:5px 2px 0 #091219aa,8px 5px 9px #0007}
.board .cliff-bottom{border-bottom:8px solid #334347;box-shadow:0 3px 0 #6b7d71,0 7px 0 #243139,0 10px 9px #0009;z-index:1}
.height-mark{position:absolute;top:3px;left:4px;font-size:7px;color:#d8e1c880;pointer-events:none}
.board .rock{background:#263239}.board .terrain-icon{filter:drop-shadow(3px 6px 1px #0007);z-index:1}
.board .ramp-mark{position:absolute;inset:5%;border:0;opacity:.9;background:repeating-linear-gradient(0deg,#d6c49680 0 2px,#53626799 2px 8px);transform:rotate(var(--ramp-angle));clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #e7dfb987;z-index:1}
.board .creep-cell .tile-surface{background:radial-gradient(ellipse at 18% 64%,#9c629942,transparent 64%),radial-gradient(ellipse at 85% 34%,#974f913d,transparent 67%),repeating-linear-gradient(135deg,#804b7922 0 2px,transparent 3px 13px);box-shadow:inset 0 0 13px #884b8535}
.board .unit-badge{z-index:5;transition:filter .12s,border-color .12s;box-shadow:0 3px 5px #0008}
.board .unit-badge.zerg{border-color:#a1799f;box-shadow:0 0 0 1px #491f48,0 3px 8px #070007b3}
.board .unit-badge.zerg .unit-hp>span{background:#ec91b3}.board .unit-badge.hatchery{border-color:#ce90d9;box-shadow:0 0 15px #bd57cb66}
.board .unit-badge.acting{animation:none;outline:2px solid #ffe3a1;outline-offset:2px;filter:brightness(1.16);z-index:8;transform:none}
.board[aria-busy=true] .unit-badge:disabled{opacity:.85;cursor:default}.board[aria-busy=true] .unit-badge.acting{opacity:1}
.board .unit-badge.selected{z-index:7}.board .unit-badge.inspected{z-index:7;border-color:#efd0f3;outline:1px solid #dba9f2}
.hatch-timer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#522446;color:#ffe0f6;border:1px solid #ce87ca;padding:1px 4px;font-size:9px;font-weight:700;white-space:nowrap;z-index:8}
.build-ring{border-color:#d791d5;animation:build-pulse 1.8s ease-in-out infinite}
.range-edge,.move-mark,.target-mark,.area-mark,.path-mark{position:absolute;pointer-events:none;z-index:3}
.range-edge{inset:0;border:0 solid #e5bf72;opacity:.85}
.range-n .range-edge{border-top:2px dashed #e5bf72}.range-e .range-edge{border-right:2px dashed #e5bf72}.range-s .range-edge{border-bottom:2px dashed #e5bf72}.range-w .range-edge{border-left:2px dashed #e5bf72}
.move-mark{inset:2px;background:#4bacec1f;border:1px solid #61c3ed48;border-radius:2px}
.move-mark:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:#77d1f5;box-shadow:0 0 4px #55b3ff80}
.move-option:hover .move-mark{background:#46c2f351;border-color:#b5f0ff}.path-mark{inset:15%;color:#d1f5ff;text-align:center;font-size:22px;line-height:1;font-weight:700;z-index:4}.move-path .move-mark{background:#3ccaff49;border-color:#7aeaff}
.target-mark{inset:0;z-index:7;border:2px solid #ff8472;border-radius:4px;background:linear-gradient(45deg,#ff6a481c,transparent);box-shadow:inset 0 0 9px #f33c1c33}
.area-mark{inset:1px;background:repeating-linear-gradient(135deg,#f7684866 0 3px,#ee704121 3px 9px);border:1px solid #ffae7b;z-index:4}
.board .deploy-option{box-shadow:inset 0 0 0 1px #65d6c56e}.board .deploy-preview .area-mark{background:repeating-linear-gradient(135deg,#60d8d049 0 3px,#49d8da14 3px 9px);border-color:#88fff5}
.board .zone-cell{box-shadow:inset 0 0 0 2px #65d6c573}
.board .forecast-mark{inset:0;border:0;background:none;z-index:4;pointer-events:none}
.board .forecast-mark:after{content:"";position:absolute;top:1px;right:1px;width:0;height:0;border-top:9px solid #e3a0eb;border-left:9px solid transparent;filter:drop-shadow(0 0 2px #6c137f)}
.board .intent-focused .forecast-mark{border:2px dashed #dfa0f2;box-shadow:none;background:repeating-linear-gradient(135deg,#bd61d328 0 3px,transparent 3px 9px)}
.tower-aura{position:absolute;inset:-13%;border:2px solid var(--tower-color,#92a6a877);border-radius:50%;background:radial-gradient(circle,transparent 32%,var(--tower-glow,#7587800f) 67%,transparent 70%);box-shadow:0 0 15px var(--tower-glow,#0000);pointer-events:none;z-index:2}
.tower-human{--tower-color:#9bf3ca;--tower-glow:#66efab55}.tower-zerg{--tower-color:#e2a3ef;--tower-glow:#c86cf35c}.tower-contested{--tower-color:#f6cf86;--tower-glow:#e7a64750}
.tower-human .tower-aura,.tower-zerg .tower-aura,.tower-contested .tower-aura{animation:tower-breathe 2.3s ease-in-out infinite}
.tower-captured .tower-aura:after{content:"";position:absolute;inset:0;border:3px solid var(--tower-color);border-radius:50%;animation:tower-capture 1s ease-out both}
.board .tower-icon{filter:drop-shadow(0 0 7px var(--tower-glow,#0000));z-index:3}.board .terrain-label{z-index:6;text-shadow:0 1px 3px #000,0 1px 5px #000;color:#d4dfcb}
.pressure-label{color:#bba0bc;font-size:10px;letter-spacing:.4px;margin:0 0 7px;min-height:16px;padding-left:25px}.pressure-building{color:#e5afdc}.pressure-critical{color:#f0b1df}.pressure-critical:before{content:"● ";color:#de83c8;animation:build-pulse 1.5s infinite}
.combat-caption{margin:7px 0 0 25px;padding:8px 10px;min-height:33px;background:#163540;border-left:3px solid #83d8ed;color:#d9f3ff;font-size:11px;line-height:1.5}.combat-caption[data-side=zerg]{background:#352536;border-color:#d294d6;color:#f5d0ed}
.board-footer i{display:inline-block;width:7px;height:7px;margin-right:4px}.legend-move{background:#77d1f5;border-radius:50%}.legend-hit{border:1px solid #ff8f75}.legend-threat{background:#dea1ef;clip-path:polygon(0 0,100% 0,100% 100%)}.legend-range{background:transparent;border:1px dashed #e5bf72}
.combat-effects{position:absolute;inset:0;pointer-events:none;z-index:15;overflow:visible}.combat-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--shot-color);stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px #0009)}
.fx-source{stroke:#e9fbd5;stroke-width:3;stroke-dasharray:18 8;fill:#e9fbd509}.side-zerg .fx-source{stroke:#ecb5f1}.fx-target{stroke:#ff978b;stroke-width:3;stroke-dasharray:13 9;fill:#fb80570b}
.fx-aim{stroke:#f7e2ba99;stroke-width:2;stroke-dasharray:7 9}.fx-crosshair{stroke:#ffe8be;stroke-width:3}.fx-lock{stroke:#ffcda6;stroke-width:2;animation:lock-on var(--fx-time) ease-out both;transform-box:fill-box;transform-origin:center}
.fx-projectile{stroke-dasharray:8 92;animation:projectile var(--fx-time) linear both;filter:drop-shadow(0 0 6px var(--shot-color))}.fx-trail{stroke-width:2;opacity:.3}
.fx-muzzle{fill:#fff2c5;stroke-width:2;animation:shot-flash var(--fx-time) ease-out both}
.fx-flame{stroke:#ff922e;opacity:.75;filter:blur(2px);stroke-dasharray:1000;animation:flame-grow var(--fx-time) ease-out both}.fx-flame-core{stroke:#ffe8a3;stroke-width:9;animation:flame-grow var(--fx-time) ease-out both;stroke-dasharray:1000}
.fx-claw{stroke:#f5c3c0;stroke-width:8;animation:claw var(--fx-time) ease-out both;filter:drop-shadow(0 0 6px #ff6235)}
.fx-impact{fill:var(--shot-color);fill-opacity:.2;stroke-width:5;animation:impact-expand var(--fx-time) ease-out both}.fx-ring{fill:none;stroke-width:2}.fx-bounce{stroke-width:4;stroke-dasharray:9 7;animation:shot-flash var(--fx-time) ease-out both}
.unit-ghost{position:absolute;padding:9%;box-sizing:border-box;animation:destroy-unit var(--fx-time) ease-out both;padding:0}.unit-ghost img{width:80%;height:80%;margin:10%;object-fit:contain;filter:sepia(.7) brightness(1.6)}
.board .unit-hit{animation:hit-recoil .48s ease-out both}.board .unit-travel{animation:travel var(--travel-time) linear both;z-index:9}
.event-float{background:#291e18b3;border-radius:3px;font-size:13px;z-index:20}.board .event-flash{background:transparent;animation:none}
@keyframes projectile{from{stroke-dashoffset:8}to{stroke-dashoffset:-100}}@keyframes lock-on{from{transform:scale(1.7);opacity:.3}to{transform:scale(1);opacity:1}}
@keyframes shot-flash{0%{opacity:1}75%,100%{opacity:0}}@keyframes flame-grow{0%{stroke-dashoffset:1000;opacity:.1}50%{stroke-dashoffset:0;opacity:1}100%{opacity:.25}}
@keyframes claw{0%{opacity:0;transform:translateY(-16px)}50%{opacity:1}100%{opacity:.1;transform:translateY(7px)}}
@keyframes impact-expand{0%{transform:scale(.5);opacity:1}60%{opacity:.7}100%{transform:scale(1.8);opacity:0}}
@keyframes destroy-unit{0%{opacity:1;filter:brightness(2)}100%{opacity:0;transform:scale(.6);filter:brightness(.3)}}
@keyframes hit-recoil{0%,100%{transform:translateX(0)}20%{transform:translateX(3px);filter:brightness(2)}45%{transform:translateX(-2px)}}
@keyframes travel{from{transform:translate(var(--travel-x),var(--travel-y))}to{transform:translate(0,0)}}
@keyframes tower-breathe{50%{box-shadow:0 0 21px var(--tower-glow);opacity:.6}}@keyframes tower-capture{to{transform:scale(3);opacity:0}}@keyframes build-pulse{50%{opacity:.5}}
@media(min-width:901px){.game-shell{max-width:min(1440px,calc((100dvh - 400px)*1.2 + 430px))}}
@media(max-width:550px){.board .cliff-top{border-top-width:2px}.board .cliff-left{border-left-width:2px}.board .cliff-right{border-right-width:3px;box-shadow:3px 2px 0 #091219aa}.board .cliff-bottom{border-bottom-width:4px;box-shadow:0 2px 0 #6b7d71,0 4px 0 #243139,0 6px 6px #0008}.height-mark{font-size:4px;top:1px;left:2px}.pressure-label{padding-left:18px;font-size:8px}.hatch-timer{font-size:6px;top:-5px;padding:0 2px}.move-mark:after{width:3px;height:3px}.path-mark{font-size:13px}.target-mark{border-width:1px}.board .forecast-mark:after{border-top-width:6px;border-left-width:6px}.combat-caption{margin-left:18px;font-size:10px}.event-float{font-size:10px}.range-edge{opacity:.8}}
@media(prefers-reduced-motion:reduce){.board *, .combat-effects *{animation:none!important;transition:none!important}.fx-projectile{stroke-dasharray:none;opacity:.8}.unit-ghost{opacity:.3}}
/* The terrain stays known; fog hides combat information rather than the board geometry. */
.board .fog-cell{background:#101923;border-color:#40576a30}
.board .fog-cell .tile-surface{filter:brightness(.45);background-color:#08142166}
.board .fog-cell.plateau{background:#35414b}
.board .height-mark{color:#ecf1ce;font-size:8px;font-weight:700;text-shadow:0 1px 3px #000}
.board .cliff-top{border-top-color:#d1d5aa}.board .cliff-left{border-left-color:#afc7a5}
.board .fog-cell .height-mark{color:#b9c4a2}
.fog-warning{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#cb594016 0 3px,transparent 3px 11px);box-shadow:inset 0 0 0 1px #b64f3825;z-index:2;pointer-events:none}
.sector-warning{position:absolute;left:-90%;right:-90%;top:40%;text-align:center;z-index:4;color:#dcaa95;font-size:9px;letter-spacing:1px;pointer-events:none;white-space:nowrap;text-shadow:0 2px 4px #000}
.board .prep-cell:not(.rock){background:#223d3c}.deployment-mark{position:absolute;inset:2px;border:1px dashed #80cfa951;pointer-events:none;z-index:3}
.board .prep-cell.rock .deployment-mark{display:none}.board .prep-cell:hover:not(.rock) .deployment-mark{border-color:#bbf7c9;background:#a0f0a81a}
.board .prep-zone-option{outline:1px solid #6eead274;outline-offset:-3px}.board .prep-zone-option:hover{box-shadow:inset 0 0 0 3px #8feedd}
.board .sight-edge .tile-surface{border-bottom:1px dotted #84a9ae55}.board .tower-vision-edge .tile-surface{box-shadow:inset 0 0 0 2px #87ffc447}
.board .tower-cell .tower-icon{transform:scale(1.16)}.board .tower-human .tower-aura{inset:-25%;border-width:3px}
.board .tower-human .terrain-label{color:#bdffdc;font-size:9px;background:#102f2ada;padding:1px 3px}
.board .target-mark{border:1px solid #ff947164;box-shadow:none;background:#fb7b4a0a}.board .attack-option:hover .target-mark{border:2px solid #ffd1a6;background:#e9933b24}
.board .unit-badge .unit-hp{height:4px}.board .unit-badge.selected{outline:2px solid #a9eed8;outline-offset:1px}
.pilot-line{min-height:22px;padding:5px 0 3px;font-size:9px;line-height:1.3;color:#99b9c4}.pilot-line.rank-3{color:#b4d5ae}.pilot-line.rank-7{color:#a6dbf2}.pilot-line.rank-12{color:#f0d395}
.prep-select{width:100%;padding:5px 2px;border:1px solid #477d70;border-radius:4px;color:#c2f4df;background:#24463b;font-size:10px;cursor:pointer;margin:3px 0}.roster-card.selected .prep-select{background:#376e58;border-color:#98e6ba}
.roster-card select[data-start-mode]{margin-top:3px;font-size:10px}.career-detail{background:#2441484d;border:1px solid #5a82893b;border-radius:5px;padding:9px!important}
.deployment-brief{margin-top:10px;padding:10px;background:#21483a60;border:1px solid #4d9d7944;border-radius:6px;font-size:11px;color:#bbebd2}.deployment-brief p{margin:7px 0;line-height:1.6}.deployment-brief small{color:#9eafa5;line-height:1.5;display:block}
.volume-settings{position:relative;color:#a7c3cc;font-size:11px}.volume-settings summary{cursor:pointer;border:1px solid #53748155;padding:8px;border-radius:5px;list-style:none}.volume-settings[open]{z-index:40}.volume-settings label{position:absolute;right:0;top:36px;background:#152730;border:1px solid #456579;border-bottom:0;width:170px;padding:12px;border-radius:5px 5px 0 0;color:#d1e2e6}.volume-settings output{float:right}.volume-settings input{position:absolute;right:0;top:72px;width:170px;padding:8px 12px 13px;height:42px;margin:0;background:#152730;border:1px solid #456579;border-top:0;accent-color:#89d8bb;border-radius:0 0 5px 5px;box-sizing:content-box}
@media(max-width:550px){.board .height-mark{font-size:5px}.sector-warning{font-size:6px}.pilot-line{font-size:7px}.prep-select{font-size:8px}.roster-card select[data-start-mode]{font-size:8px}.header-buttons{flex-wrap:wrap}.deployment-brief{font-size:10px}.board .tower-human .terrain-label{font-size:6px}}
@media(max-width:550px){
 .topbar{display:grid;grid-template-columns:minmax(0,1fr);height:auto;gap:8px;padding:12px 0}
 .topbar .brand{width:100%;min-width:0;gap:10px;grid-row:1}
 .topbar .brand h1{white-space:nowrap;font-size:20px;line-height:1.4}
 .topbar .brand .eyebrow{font-size:7px;letter-spacing:1.5px}
 .topbar .header-buttons{grid-row:2;margin:0;gap:6px;justify-content:space-between}
 .topbar .header-buttons .quiet-button{font-size:10px;padding:8px}
 .topbar .header-status{grid-row:3;margin:0;order:initial;font-size:10px;min-height:16px}
}
.supply-panel{margin:10px 0;padding:10px;border:1px solid #8d765244;border-radius:5px;background:#332d2145}
.supply-panel .panel-heading{margin-bottom:7px}.supply-panel label{font-size:10px;color:#d5bb90;margin-right:6px}
.supply-panel select{width:100%;margin:6px 0;padding:7px;color:#e1ecea;background:#182a30;border:1px solid #51606a;font:inherit;font-size:11px}
.supply-panel button{width:100%;color:#ead8b1;border-color:#8f7858}.supply-mark{position:absolute;inset:2px;border:2px dashed #e6c78b;background:#d5ae4522;display:grid;place-items:center;color:#ffe4a2;font-size:20px;pointer-events:none;z-index:6}
.reinforce-option:hover .supply-mark{background:#d5ae4555;border-style:solid}.random-game{margin-top:12px;width:100%}.random-note{display:block;font-size:9px;line-height:1.5;color:#92aaa9;margin-top:5px}
.sector-warning.edge-warning{left:0;right:0;white-space:normal}.tower-status{max-width:65%;text-align:right}
.objective-tracker{margin:0 0 10px;padding:10px 12px;border:1px solid #35525d;border-left:3px solid #769f9b;background:linear-gradient(100deg,#132c31,#101e28);border-radius:3px;font-size:11px;line-height:1.6}
.objective-tracker>div{display:flex;gap:5px 12px;justify-content:space-between;flex-wrap:wrap}.objective-tracker span{color:#b2c7cc}.objective-tracker em{font-style:normal;color:#edc587;margin-left:8px}.objective-tracker strong{color:#a8e2d5;font-weight:600;font-variant-numeric:tabular-nums}.objective-tracker p{font-size:10px;color:#96aeb8;margin-top:3px}.objective-tracker.holding{border-color:#69b699;border-left-color:#96edb8;background:linear-gradient(100deg,#173b32,#112831)}.objective-tracker.holding strong{color:#baffd2}
@media(max-width:550px){.objective-tracker{padding:8px 9px;font-size:10px}.objective-tracker p{font-size:9px}.mission-title p{line-height:1.65}}
@media(min-width:901px){.game-shell{max-width:min(1400px,calc((100dvh - 380px)*var(--board-ratio,1) + 390px))}}
@media(min-width:901px) and (max-height:760px){.game-shell{max-width:1080px}.board-frame,.field-heading,.field-instruction,.squad-section{max-width:calc((100dvh - 270px)*var(--board-ratio,1) + 40px)}}

.squad-budget{margin:8px 0 10px;padding:9px 11px;border:1px solid #3d6570;background:#122830;border-radius:4px;font-size:11px;line-height:1.5}
.squad-budget>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#b7d2d8}.squad-budget strong{font-size:17px;color:#b6ecdf;font-variant-numeric:tabular-nums}.squad-budget p{margin:4px 0 0;color:#96b4bf;font-size:10px}.squad-budget.over-budget{border-color:#dc8668;background:#38221e}.squad-budget.over-budget strong,.squad-budget.over-budget p{color:#ffc0a0}#prep-budget{margin-bottom:8px}#reinforce-budget{margin:5px 0 9px;text-align:left}

.nest-list{border-top:1px solid #735451;margin-top:9px;padding-top:9px;font-size:10px;line-height:1.7;color:#d9a497}.nest-list p{color:#b7a39c;margin:3px 0}