/* A self-contained 4:3 game screen; the unused viewport stays black. */
html,body{width:100%;height:100%;overflow:hidden;background:#000}
body{display:grid;place-items:center;background-image:none}
.shell{width:min(100vw,133.333333vh);height:min(100vh,75vw);max-width:none;padding:0;margin:0}
.shell>header,.shell>.heading,.shell>.briefing,body>footer,.framebar{display:none}
.frame{width:100%;height:100%;border:0;box-shadow:none}
.game{width:100%;height:100%;aspect-ratio:auto;background:#11190e}
.game canvas{width:100%;height:100%}
.overlay{display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch;justify-items:stretch;justify-content:stretch;align-content:stretch;gap:0;overflow:hidden;padding:0;text-align:left;background:#171e13;color:#f1edd1}
.overlay[hidden]{display:none}
.menu-header{min-height:0;padding:2.5% 4.5% 1.4%;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #7a794a;background:linear-gradient(180deg,#353d21,#222b1a)}
.game-logo{line-height:.72;filter:drop-shadow(3px 4px 0 #11150d)}
.game-logo span,.game-logo strong{display:block;font:900 clamp(25px,5.2vh,63px)/.74 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.035em;color:#e9e0ad}
.game-logo strong{color:#d3743d}.game-logo i{display:block;margin-top:9px;color:#bdc995;font:600 clamp(6px,.9vh,10px)/1 'IBM Plex Mono',monospace;letter-spacing:.12em}
.menu-header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#a5b18f;font-size:clamp(7px,.95vh,10px);letter-spacing:.14em}
.overlay .fullscreen-toggle{min-width:0;margin:0;padding:7px 9px;border:1px solid #6a7758;background:#172014;color:#d4ddbf;font-size:clamp(7px,.9vh,10px);letter-spacing:.02em}
.menu-body{min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3%;padding:2.4% 4.5% 2%;align-items:center;background:linear-gradient(112deg,#303b24 0%,#242f1f 48%,#182218 100%)}
.heroes-hill{width:100%;min-width:0;margin:0;text-align:left;align-self:center}
.hill-title{padding:9px 10px;border:0;background:#10180e;color:#e9e5c5;font-size:clamp(8px,1.25vh,13px);font-weight:600;letter-spacing:.12em}
.hill-title span{color:#c5ad70}.hill-scene{height:auto;aspect-ratio:272/184;border:0;background:url('assets/hill.png') center / 100% 100% no-repeat;image-rendering:pixelated;box-shadow:0 8px 20px #0005}
.hill-grave{width:clamp(4px,.55vw,7px);height:clamp(12px,1.8vw,20px)}.hill-grave:before{top:25%;left:-70%;width:240%;height:25%}
.hill-recruit{position:absolute;width:5.8824%;height:7.0652%;background-image:url('assets/hill-recruits.png');background-repeat:no-repeat;background-size:600% 400%;image-rendering:pixelated;pointer-events:none}
.menu-controls{min-width:0;max-height:100%;overflow-y:auto;scrollbar-color:#71805a #1c2519;padding:2px 4px 2px 1px;display:flex;flex-direction:column;align-items:stretch;gap:clamp(6px,1.2vh,13px)}
.menu-heading .kicker{margin:0;color:#c5b873;font-size:clamp(8px,1.1vh,11px);letter-spacing:.17em}
.overlay .menu-heading h2{margin:6px 0 4px;font-size:clamp(25px,4.8vh,56px);line-height:.86;color:#f1edce;letter-spacing:-.02em}
.overlay .menu-heading p{margin:0;color:#9faa94;font-size:clamp(8px,1.1vh,11px);line-height:1.35}
.game-settings{max-width:none;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.game-settings .map-picker{min-width:0;margin:0;display:flex;flex-direction:column;gap:4px;color:#b8c3a4;font-size:clamp(8px,1vh,10px);letter-spacing:.06em}
.map-picker select{width:100%;margin:0;padding:6px;background:#111a10;border:1px solid #6d7a58;color:#f0edda;font:600 clamp(9px,1.15vh,12px) 'IBM Plex Mono',monospace}
.game-settings .map-picker:last-child{grid-column:1/-1}
.roster-panel{width:100%;margin:0;padding:9px 10px;background:#141e14;border:1px solid #647650}
.roster-heading,.roster-actions{font-size:clamp(8px,1.05vh,11px)}.roster-heading strong{color:#d5dcbb}.roster-count{color:#d3bd7b}
.mission-details{font-size:clamp(8px,1vh,10px);line-height:1.4;color:#b9c7a8}.roster-list{min-height:0;margin:7px 0}.recruit-badge{font-size:clamp(8px,1vh,10px);padding:4px 6px}.fallen-count{font-size:clamp(7px,.95vh,10px)}
.overlay .roster-actions button{font-size:clamp(8px,1vh,10px)}
.overlay .menu-controls #start{width:100%;min-width:0;margin:0;padding:clamp(10px,1.6vh,16px) 16px;background:#d6d889;color:#172010;text-align:left;font:700 clamp(11px,1.5vh,15px) 'IBM Plex Mono',monospace;letter-spacing:.04em}
.overlay .menu-controls #start:hover{background:#eff0a9}.overlay .menu-controls #start:disabled{opacity:.5}
.overlay .menu-controls .music-toggle{align-self:flex-start;min-width:0;margin:0;padding:5px 0;border:0;background:transparent;color:#b9c7a7;font-size:clamp(8px,1vh,10px)}
.overlay .menu-controls .music-toggle:hover{color:#f3edc7}
.menu-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:1.2% 4.5%;background:#11190f;border-top:1px solid #505c3e;color:#8f9d7a;font-size:clamp(7px,.95vh,10px);letter-spacing:.05em}
.menu-footer span:first-child{color:#c5be80}.hud .fullscreen-hud{margin-left:0}
.overlay.victory .menu-heading h2,.overlay.defeat .menu-heading h2{animation:report-enter .65s both}.overlay.defeat .menu-body{background:linear-gradient(112deg,#423127,#2c211c 55%,#1d1713)}
@media(max-aspect-ratio:1/1){.shell{width:100vw;height:100dvh}.game{height:100%}.menu-header{padding:10px 16px}.menu-body{grid-template-columns:1fr;grid-template-rows:minmax(0,30%) minmax(0,70%);gap:8px;padding:8px 16px}.heroes-hill{width:min(100%,34vh);justify-self:center;max-height:100%}.hill-scene{max-height:calc(100% - 28px)}.menu-controls{width:min(100%,520px);justify-self:center;gap:5px}.menu-footer{padding:8px 16px}.menu-footer span:last-child{display:none}.game-logo span,.game-logo strong{font-size:clamp(27px,4vh,38px)}}
@media(max-height:520px) and (min-aspect-ratio:1/1){.menu-header{padding-top:1%;padding-bottom:1%}.game-logo span,.game-logo strong{font-size:clamp(23px,5.4vh,38px)}.game-logo i{margin-top:4px}.menu-body{padding-top:1.2%;padding-bottom:1.2%}.menu-controls{gap:4px}.menu-heading p{display:none}.roster-panel{padding:5px 7px}.roster-list{margin:3px 0}.mission-details{margin-top:3px}.menu-footer{padding-top:.5%;padding-bottom:.5%}}

/* The status and squad controls have their own strip, outside the camera. */
.game{background:#10190f}.playfield{position:absolute;top:104px;left:0;right:0;bottom:0;overflow:hidden;background:#283b24}
.hud{top:0;left:0;right:0;height:53px;padding:5px 8px;gap:3px;background:#10190f;overflow-x:auto;flex-wrap:nowrap;align-items:stretch}
.hud div{min-width:67px;padding:4px 8px}.hud button{height:auto;flex:0 0 38px}.hud .sound-button{margin-left:auto}
.squad-controls{top:53px;left:0;right:0;max-width:none;height:51px;padding:6px 8px;background:#1b2718;align-items:center;flex-wrap:nowrap;overflow-x:auto;gap:4px}
.squad-controls button{white-space:nowrap;flex:none}
.objective-bar{top:8px;bottom:auto;left:8px;right:auto;max-width:60%}.objective{font-size:9px;padding:4px 6px}
.touch-controls{display:none}.touch-controls[hidden]{display:none!important}
@media(max-width:700px){.playfield{top:91px}.hud{height:45px;padding:4px;gap:2px}.hud div{min-width:44px;padding:3px 4px}.hud small{font-size:6px}.hud strong{font-size:16px}.hud button{height:auto;flex-basis:29px;font-size:15px}.squad-controls{top:45px;height:46px;padding:4px;gap:3px}.squad-controls button{padding:6px;font-size:8px}.objective-bar{top:5px;left:5px;right:auto;bottom:auto}}
@media(pointer:coarse){
 .touch-controls:not([hidden]){position:absolute;inset:0;z-index:3;display:block;pointer-events:none}
 .touch-stick{position:absolute;bottom:22px;width:clamp(88px,23vw,140px);aspect-ratio:1;border:2px solid #e0e8b088;border-radius:50%;background:#13231288;box-shadow:inset 0 0 0 8px #ffffff0b;touch-action:none;pointer-events:auto}
 .move-stick{left:18px}.fire-stick{right:18px;border-color:#f18c6eaa;background:#321a16a3}
 .stick-knob{position:absolute;left:32%;top:32%;width:36%;height:36%;border-radius:50%;background:#dce5baaa;border:2px solid #f8f5d4bb}
 .fire-stick .stick-knob{background:#d96245aa;border-color:#ffc3a6bb}.touch-stick small{position:absolute;top:calc(100% + 3px);width:100%;text-align:center;color:#f4f0d4;font:600 9px 'IBM Plex Mono',monospace;text-shadow:1px 1px #000}
 .touch-actions{position:absolute;right:18px;bottom:calc(clamp(88px,23vw,140px) + 38px);display:flex;gap:6px;pointer-events:auto}.touch-actions button{border:1px solid #d8d596;background:#26331fe8;color:#f4edca;padding:10px;font:700 9px 'IBM Plex Mono',monospace;touch-action:manipulation}.grenade-action{display:none}
 .touch-actions button:disabled{opacity:.4}
}