/* 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}
}

/* Dynamic viewport units follow the mobile address bar and installed window. */
body{height:100dvh;overscroll-behavior:none}
.shell{width:min(100vw,133.333333dvh);height:min(100dvh,75vw)}
@media(max-aspect-ratio:1/1){.shell{width:100vw;height:100dvh}}
@media(pointer:coarse) and (orientation:landscape){
 :root{
  --edge:max(env(safe-area-inset-left),env(safe-area-inset-right));
  --screen-width:min(calc(100vw - 192px - var(--edge) - var(--edge)),133.333333dvh);
  --rail:calc((100vw - var(--screen-width))/2);
  --stick-size:min(120px,calc(var(--rail) - var(--edge) - 24px));
 }
 .shell{width:var(--screen-width);height:calc(var(--screen-width)*.75)}
 .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}
 .touch-controls:not([hidden]){position:fixed;inset:0}
 .touch-stick{width:var(--stick-size);bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));user-select:none;-webkit-user-select:none}
 .move-stick{left:calc((var(--rail) + var(--edge))/2);transform:translateX(-50%)}
 .fire-stick{right:calc((var(--rail) + var(--edge))/2);transform:translateX(50%)}
 .touch-actions{right:0;bottom:calc(var(--stick-size) + max(28px,calc(env(safe-area-inset-bottom) + 16px)) + 18px);width:var(--rail);padding:0 calc(var(--edge) + 8px) 0 8px;flex-direction:column;align-items:center;gap:8px}
 .touch-actions button{width:min(100%,120px);min-height:44px;padding:8px 3px}
}
.install-app{position:fixed;z-index:5;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));border:1px solid #829574;background:#172014;color:#e5ebd9;padding:10px;font:600 10px 'IBM Plex Mono',monospace;cursor:pointer}
.install-app[hidden],body:has(.overlay[hidden]) .install-app{display:none}
.overlay .menu-header-right .install-app{position:static;min-width:0;margin:0;padding:7px 9px;font-size:clamp(7px,.9vh,10px);background:#cce573;color:#172014}
.game-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:30px;border:1px solid #657650;border-radius:18px;background:linear-gradient(145deg,#293522,#141d13);color:#e5ebd9;box-shadow:0 24px 100px #0009;font:12px/1.7 'IBM Plex Mono',monospace;overflow:auto}
.game-dialog::backdrop{background:#050904b8;backdrop-filter:blur(6px)}
.dialog-eyebrow{color:#b8cc83;font-size:9px;letter-spacing:.18em;padding-right:30px}
.game-dialog h2{font:700 clamp(28px,5vw,36px)/1.05 'Barlow Condensed',sans-serif;margin:16px 0 12px;color:#f1edd1}
.game-dialog p{margin:0;color:#b8c4aa}
.game-dialog button{font:600 11px 'IBM Plex Mono',monospace;cursor:pointer;min-height:44px;border-radius:9px}
.dialog-close{position:absolute;top:10px;right:10px;width:44px;border:0;background:transparent;color:#b8c4aa;font-size:26px!important}
.dialog-close:hover{background:#ffffff0a;color:#fff}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:26px}
.dialog-actions button{padding:12px 18px;border:1px solid #657650}
.dialog-secondary{background:transparent;color:#e5ebd9}.dialog-secondary:hover{background:#ffffff0a}
.dialog-primary{background:#cce573;color:#172014}.dialog-primary:hover{background:#e0f39c}
.dialog-actions .dialog-danger{background:#de9b70;border-color:#de9b70;color:#27170d}.dialog-actions .dialog-danger:hover{background:#efb58e}
@media(max-width:450px),(max-height:400px){.game-dialog{padding:22px}.dialog-actions{margin-top:18px}.dialog-actions button{flex:1;padding:10px}.game-dialog h2{margin-top:10px}}
.phase-progress{padding:6px 0;color:#e5e8b6;font-size:clamp(10px,1.3vh,14px)}
.save-status{font-size:clamp(7px,.95vh,10px);line-height:1.4;letter-spacing:0;color:#a5b59b}

/* The mobile menu uses the whole viewport; gameplay keeps its side rails. */
@media(pointer:coarse){
 .shell:has(.overlay:not([hidden])){width:100vw;height:100dvh}
 .overlay{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .menu-header{padding:8px 14px}
 .menu-header-right{gap:4px}
 .game-logo i{margin-top:5px}
 .menu-body{padding:8px 14px;gap:10px}
 .menu-controls{min-height:0;max-height:none;width:100%;padding:0;gap:6px;overflow:visible}
 .menu-controls>*{flex-shrink:0}
 .menu-footer{padding:5px 14px}
 .game-settings{gap:5px}
 .phase-progress{padding:3px 0}
 .roster-panel{padding:6px 8px}
 .roster-list{margin:4px 0}
 .overlay .menu-controls .music-toggle{padding:5px 0}
}
@media(pointer:coarse) and (orientation:portrait){
 .menu-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
 .heroes-hill{height:min(100%,calc((100vw - 28px)*.757353));width:auto;max-width:100%;min-height:0;aspect-ratio:272/206;display:flex;flex-direction:column;justify-self:center;align-self:center}
 .hill-title{flex:none;padding:4px 7px}
 .hill-scene{min-height:0;flex:1;max-height:none;aspect-ratio:auto}
 .overlay .menu-heading h2{font-size:clamp(26px,4.3dvh,38px);margin:4px 0}
 .overlay .menu-heading h2 br{display:contents}.overlay .menu-heading h2 br::after{content:' '}
 .overlay .menu-heading p{margin:2px 0}
 .overlay .menu-controls #start{min-height:40px;padding:10px 14px}
}
@media(pointer:coarse) and (orientation:landscape){
 .menu-body{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center}
 .heroes-hill{max-width:100%;max-height:100%;width:min(100%,calc((100dvh - 90px)*1.2));justify-self:center}
 .hill-title{padding:5px 7px}
 .menu-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
 .menu-controls>.menu-heading,.menu-controls>.game-settings,.menu-controls>.roster-panel{grid-column:1/-1}
 .game-logo span,.game-logo strong{font-size:24px}
 .game-logo i{display:none}
 .menu-header-right{flex-direction:row;align-items:center;gap:6px}
 .menu-header-right>span{display:none}
 .overlay .menu-heading h2{font-size:26px;margin:3px 0}
 .overlay .menu-heading h2 br{display:contents}.overlay .menu-heading h2 br::after{content:' '}
 .menu-heading .kicker{font-size:8px}
 .game-settings{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
 .game-settings .map-picker:last-child{grid-column:auto}
 .game-settings .map-picker{font-size:8px;gap:3px}
 .map-picker select{padding:5px 3px;font-size:9px}
 .phase-progress{font-size:10px;padding:3px 0}
 .save-status{font-size:7px}
 .overlay .menu-controls #start{min-height:34px;padding:8px 12px}
 .menu-footer span:last-child{display:none}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:360px){
 .menu-header{padding:4px 14px}.game-logo span,.game-logo strong{font-size:20px}
 .menu-body{padding:4px 14px}.menu-footer{padding:2px 14px}
 .menu-controls{gap:3px 8px}
}
.overlay .settings-button{min-width:0;margin:0;padding:9px 12px;border:1px solid #829574;border-radius:7px;background:#172014;color:#e5ebd9;font:600 10px 'IBM Plex Mono',monospace}
.overlay .settings-button:hover{background:#32452c}
.game-settings.campaign-progress{grid-template-columns:1fr}
.menu-controls>#start{grid-column:1/-1}
.settings-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.settings-content .map-picker{display:flex;flex-direction:column;gap:7px;margin:0;font-size:10px;letter-spacing:.05em}
.settings-content select{margin:0;min-height:44px;width:100%;padding:8px;font-size:12px;border-radius:7px}
.settings-content button{margin:0;min-width:0;padding:10px;border:1px solid #657650;background:#172014;color:#e5ebd9;font-size:10px}
.settings-content button:hover{background:#32452c}
.settings-content button[aria-pressed=true]{border-color:#cce573;color:#cce573}
.settings-content .fullscreen-toggle{grid-column:1/-1}
@media(max-width:360px){.settings-content{gap:10px}.settings-content select{font-size:10px;padding:6px}}