:root{color-scheme:dark;--ivory:#eee4c8;--gold:#c3a76c;--glass:rgba(17,25,25,.82)}*{box-sizing:border-box}body{margin:0;background:#25392e;color:var(--ivory);font-family:Georgia,serif;overflow:hidden}canvas#world{display:block;width:100vw;height:100vh}button{font:12px system-ui;letter-spacing:2px;cursor:pointer;border:1px solid var(--gold);background:#c5ad79;color:#18211f;padding:18px 25px;transition:.2s}button:hover{background:#e9d7ac}header{position:absolute;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:linear-gradient(#111b1bec,transparent);border-top:3px solid #c3a76c}.brand{font-size:24px;letter-spacing:3px}.brand span{font-size:16px;color:var(--gold)}.brand small{font:9px system-ui;letter-spacing:3px;margin-left:16px}#objective{font:10px system-ui;letter-spacing:2px;color:#e4d5ae}#pauseBtn{padding:7px 12px;background:var(--glass);color:var(--ivory)}.mission{position:absolute;top:92px;left:28px;max-width:285px;text-shadow:0 2px 6px #000}.eyebrow{font:9px system-ui;letter-spacing:2px;color:var(--gold)}h2{font-weight:normal;font-size:25px;margin:9px 0 16px}#tasks{font:11px/2 system-ui;color:#eee4cb}#tasks .done{color:#a6c8a2}.right{position:absolute;right:26px;top:90px;width:180px}#map{width:180px;height:230px;border:1px solid #b09b66;background:#1b2928d9}.maplabel{font:8px system-ui;letter-spacing:2px;padding:9px 0}.maplabel span{float:right}#damage{margin-top:14px;background:var(--glass);border:1px solid #726747;padding:12px}#damage svg{width:140px;height:105px;display:block;margin:auto}#damage svg path,#damage svg circle{fill:#9eac86;stroke:#151e20;stroke-width:2}#damageText{font:8px system-ui;letter-spacing:1px;text-align:center;min-height:20px}footer{position:absolute;bottom:34px;left:26px;right:26px;display:flex;background:var(--glass);border:1px solid #776c50;box-shadow:0 8px 30px #0005;padding:17px 12px}.stat{flex:1;padding:0 18px;border-right:1px solid #81775855}.stat:last-child{border:0}.stat label{font:9px system-ui;letter-spacing:2px;display:block;color:#c7bb9c;margin-bottom:8px}.stat strong{font-size:28px;font-weight:normal;letter-spacing:2px}.stat small{font:8px system-ui;letter-spacing:1px;display:block;color:#b5b8a9;margin-top:4px}.fuel{flex:1.5}.fuel label span{float:right}.bar{height:8px;background:#101916;margin:18px 0 16px}.bar i{height:100%;width:100%;background:#b7b48b;display:block}.keystrip{position:absolute;bottom:12px;width:100%;text-align:center;font:8px system-ui;letter-spacing:1.4px;color:#e5dfc4b8}#message{position:absolute;top:65px;left:25%;right:25%;text-align:center;font:11px system-ui;letter-spacing:2px;color:#ffe2a4;text-shadow:0 2px 3px #000}#approach{position:absolute;bottom:170px;left:25%;right:25%;text-align:center;white-space:pre-line;font:12px/1.8 system-ui;color:#f7e4b9;text-shadow:0 2px 4px #000}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#101b1bf2 0%,#14201cda 38%,#17242135 75%);display:flex;align-items:center}.brief{margin-left:8vw;width:470px;padding:20px 0}h1{font-size:76px;line-height:.88;letter-spacing:9px;font-weight:normal;margin:26px 0 24px}h1 em{font-size:55px;color:#c5ac79;font-style:italic}.rule{width:65px;border-top:2px solid #c1a779;margin:20px 0}h3{font:11px system-ui;letter-spacing:3px}.brief p{font-size:17px;line-height:1.6;color:#c9cbb8}.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 10px;font:10px system-ui;margin:24px 0}.brief-grid b{color:#c5ac79;margin-right:8px;font-weight:normal}#start{width:100%;text-align:left}#start span{float:right;font-size:18px}.controls{font:9px/1.9 system-ui;color:#b5bcac;margin-top:20px}.tip{font:10px/1.6 system-ui;color:#a0ad9c;display:block;margin-top:14px}#loading{font:9px system-ui;margin-top:12px;color:#cfb780}#pause{position:absolute;inset:0;background:#0a141bd9;display:grid;place-items:center}#pause[hidden],#debug[hidden]{display:none}.panel{width:min(520px,90vw);padding:35px;background:#192422;border:1px solid #8c7c55}.panel p{font:12px/1.8 system-ui;color:#c5cbbd}.panel button{margin-top:12px}.secondary{background:transparent;color:#d3c39e;margin-left:8px}#debug{position:absolute;top:65px;left:40%;background:#000b;padding:12px;font:11px monospace;pointer-events:none}#hud{pointer-events:none}#hud button{pointer-events:auto}@media(max-height:760px){h1{font-size:58px;margin:16px 0}.brief p{font-size:14px}.brief-grid{margin:16px 0}.right{top:78px}#damage{margin-top:5px}.controls{margin-top:12px}}@media(max-width:900px){.mission{max-width:210px;left:15px}.right{right:15px;width:145px}#map{width:145px;height:185px}.stat{padding:0 10px}.stat strong{font-size:23px}.brief{margin-left:5vw;width:410px}header{padding:0 15px}.brand small{display:none}#objective{max-width:40%;font-size:8px}footer{left:15px;right:15px}.keystrip{font-size:7px}}


.landing-stat{flex:.8;min-width:85px;padding:0 12px;background:transparent;color:#b5b8a9;border:0;border-right:1px solid #81775855;letter-spacing:1px}.landing-stat strong{display:block;font:32px Georgia;color:#eee4c8}.landing-stat small{display:block;font:8px/1.6 system-ui;margin-top:4px}.landing-stat:disabled{cursor:default;opacity:.45}.landing-stat.active strong{color:#a6c8a2}.landing-stat.due strong{color:#ffe2a4;animation:land-flash 1s steps(2,end) infinite}@keyframes land-flash{50%{opacity:.15}}@media(prefers-reduced-motion:reduce){.landing-stat.due strong{animation:none;text-shadow:0 0 12px #ffe2a4}}

@media(max-width:600px){header{height:50px}.brand{font-size:20px}#objective{display:none}.mission{top:70px;left:12px;max-width:170px}.mission h2,.mission>.eyebrow{display:none}#tasks{font-size:9px}.right{top:65px;right:12px;width:100px}#map{width:100px;height:128px}.maplabel{font-size:6px;letter-spacing:1px}#damage{display:none}footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;left:10px;right:10px;bottom:38px;gap:8px 0}.stat{padding:0 6px;min-width:0}.stat label{font-size:7px;letter-spacing:.6px;margin-bottom:2px}.stat strong{font-size:20px}.stat small{font-size:6px;letter-spacing:.3px;margin-top:2px}.landing-stat{grid-row:span 2;min-width:0;padding:0 5px}.landing-stat strong{font-size:30px}.landing-stat small{font-size:7px}.bar{margin:8px 0}.fuel label span{float:none}.keystrip{bottom:8px;padding:0 10px;font-size:6px;line-height:1.6;letter-spacing:.5px}#approach{bottom:165px;left:12px;right:12px;font-size:10px;line-height:1.5}#message{top:51px;left:8px;right:8px;font-size:9px;letter-spacing:.5px}.brief{width:90vw}.brief-grid{font-size:9px}h1{font-size:48px}.brief p{font-size:12px}.controls{font-size:8px}}

#airThreat{position:fixed;inset:0;border:6px solid #ec3d35;box-shadow:inset 0 0 45px 15px #d5212166;pointer-events:none;z-index:5}#airThreat[hidden]{display:none}

.theatre-select{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:15px 0}.theatre-select button{padding:10px 8px;background:#162622b8;color:#c2caba;font:9px system-ui;letter-spacing:1px;border-color:#6e7965}.theatre-select button.selected{background:#cab17d;color:#192522;border-color:#efd7a5}.theatre-select button:hover{border-color:#eedcba}.brief{max-height:96vh;overflow-y:auto;scrollbar-width:thin}.mission h2{font-size:20px}@media(max-height:650px){.theatre-select{margin:8px 0;gap:5px}.theatre-select button{padding:7px 5px}h1{font-size:42px;margin:12px 0}.brief-grid{margin:12px 0}.brief .rule{margin:10px 0}.brief h3{margin:8px 0}.brief p{margin:8px 0}}

#hud[hidden]{display:none}.brief h1{overflow-wrap:normal}@media(max-width:600px){h1{font-size:42px;letter-spacing:5px}.brief{margin-left:5vw;margin-right:5vw}.brief-grid{gap:10px 8px}.brief p{font-size:12px;line-height:1.5}.brief .controls{font-size:8px}.panel{padding:22px}.panel button{padding:13px 14px;font-size:10px}}

.music-toggle{background:transparent;color:#c9cbb8;border:0;border-bottom:1px solid #6e7965;font:9px system-ui;letter-spacing:1px;padding:7px 0;cursor:pointer}.music-toggle:hover{background:transparent;color:#ffe0a1}

#bombSelect{display:block;padding:4px 2px;margin:3px 0 0;background:#283b3c;color:#ffe4a8;border:1px solid #8a9578;font:8px system-ui;letter-spacing:.4px}#bombSelect[hidden]{display:none}#bombSelect:disabled{opacity:.45}@media(max-width:600px){#bombSelect{font-size:6px;padding:3px 1px}}

/* Touch cockpit: instruments above the view, flight controls at the thumbs. */
html,body{width:100%;height:100%;overscroll-behavior:none}
canvas#world{height:100dvh;touch-action:none}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#overlay,#pause{position:fixed;z-index:20}
#pause{padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));overflow:auto}
.panel{max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.panel button{min-height:44px}
.touch-instructions{display:none;font:11px/1.6 system-ui;color:#e4d5ae;margin:16px 0 8px}
#touchControls[hidden],#touchSwap[hidden]{display:none}
#touchControls{position:fixed;inset:0;z-index:10;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#touchControls button,#flightStick{pointer-events:auto;touch-action:none}
#touchControls button{padding:8px 6px;min-height:44px;font:700 11px system-ui;letter-spacing:1px;border-radius:9px;background:#182925e8;color:#f6e8c7;border:1px solid #c3a76ca8}
#touchControls button.pressed{background:#e6c581;color:#15221e;transform:scale(.96)}
#touchControls button:disabled{opacity:.4}
#flightStick{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:138px;height:138px;border:1px solid #ddc38899;border-radius:50%;background:radial-gradient(circle,#263d3299 0 32%,#12221baa 33% 65%,#a88c5740 66%);box-shadow:0 2px 20px #0005}
#flightStick span{position:absolute;font:8px system-ui;letter-spacing:1px;color:#f0deb8;pointer-events:none}
.stick-up{top:11px;left:0;right:0;text-align:center}.stick-down{bottom:11px;left:0;right:0;text-align:center}.stick-left{left:10px;top:64px}.stick-right{right:10px;top:64px}
#stickKnob{position:absolute;left:calc(50% - 23px);top:calc(50% - 23px);width:46px;height:46px;border:1px solid #ebd6a4;border-radius:50%;background:#d8bd8299;box-shadow:0 2px 9px #0006;pointer-events:none}
#flightStick.pressed #stickKnob{background:#e6c581}
.touch-actions{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:166px;display:grid;gap:7px}
.touch-power{display:grid;grid-template-columns:44px 1fr 44px;gap:6px;align-items:center;text-align:center}
.touch-power span{font:8px system-ui;color:#e4d5ae;text-shadow:0 1px 3px #000}.touch-power strong{display:block;font:16px Georgia;color:#fff0cb}
#touchControls .touch-power button{font-size:24px;line-height:1}
.touch-weapons{display:grid;grid-template-columns:1fr 1.2fr;gap:7px}
#touchControls .touch-weapons button{min-height:60px;font-size:13px}
#touchControls #touchFire{background:#874434de;border-color:#e7a077}
#touchControls #touchFire.pressed{background:#ecb37a;color:#221712}
.touch-utility{display:flex;gap:7px}.touch-utility button{flex:1}
#touchControls #touchSwap{font-size:9px;letter-spacing:0}
#touchControls #touchLand.due{border-color:#ffe1a1;box-shadow:0 0 12px #f2d18088}
#touchLand[aria-pressed=true]{color:#aff5bd}
.touch-ui .touch-instructions{display:block}
.touch-ui .keystrip,.touch-ui #damage,.touch-ui #bombSelect,.touch-ui footer>.landing-stat{display:none}
.touch-ui header{height:52px;top:env(safe-area-inset-top);padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
.touch-ui .brand{font-size:19px}.touch-ui .brand small{display:none}
.touch-ui #pauseBtn{width:44px;height:44px;padding:0;font-size:19px}
.touch-ui #objective{display:none}
.touch-ui footer{top:calc(54px + env(safe-area-inset-top));bottom:auto;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:8px 2px;gap:0;min-height:57px}
.touch-ui .stat{padding:0 6px;min-width:0}.touch-ui .stat label{font:7px system-ui;letter-spacing:.3px;margin-bottom:3px}.touch-ui .stat strong{font-size:19px;letter-spacing:0}.touch-ui .stat small{font:6px system-ui;letter-spacing:0;margin-top:1px}
.touch-ui .fuel label span{float:none;display:block;font-size:13px;color:var(--ivory)}.touch-ui .bar{height:4px;margin:3px 0}.touch-ui #throttle{display:none}
.touch-ui .mission{top:calc(119px + env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));max-width:170px}.touch-ui .mission h2,.touch-ui .mission>.eyebrow{display:none}.touch-ui #tasks{font:9px/1.7 system-ui}
.touch-ui .right{top:calc(119px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:75px}.touch-ui #map{width:75px;height:96px}.touch-ui .maplabel{display:none}
.touch-ui #message{top:calc(226px + env(safe-area-inset-top));left:10px;right:10px;font:10px/1.4 system-ui;letter-spacing:.5px}
.touch-ui #approach{bottom:calc(191px + env(safe-area-inset-bottom));left:16px;right:16px;font:10px/1.5 system-ui}
.touch-ui .brief{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:12px 0;overscroll-behavior:contain}
.touch-ui .theatre-select button,.touch-ui .music-toggle{min-height:44px}
.touch-ui .panel button{display:block;width:100%;margin-left:0}
.touch-ui .prototype-back{top:calc(10px + env(safe-area-inset-top));bottom:auto;max-width:60%;overflow:hidden;text-overflow:ellipsis;font-size:10px;padding:8px;z-index:15}
@media(orientation:landscape) and (max-height:540px){
 .touch-ui .mission{top:calc(117px + env(safe-area-inset-top));max-width:160px}.touch-ui #tasks{font-size:8px}
 .touch-ui .right{top:calc(117px + env(safe-area-inset-top));width:58px}.touch-ui #map{width:58px;height:74px}
 .touch-ui #message{top:calc(118px + env(safe-area-inset-top));left:25%;right:25%;font-size:9px}
 .touch-ui #approach{bottom:calc(18px + env(safe-area-inset-bottom));left:180px;right:194px;font-size:9px}
 .touch-ui #flightStick{width:120px;height:120px;bottom:max(12px,env(safe-area-inset-bottom))}.touch-ui .stick-left,.touch-ui .stick-right{top:55px}
 .touch-ui .touch-actions{width:166px;gap:5px}.touch-ui .touch-weapons button{min-height:50px}
 .touch-ui .brief{width:min(600px,85vw);margin:auto}
}
@media(max-width:600px){.touch-ui #score{font-size:clamp(10px,3.3vw,19px)}}
@media(max-width:350px){.touch-ui #flightStick{width:120px;height:120px;left:8px}.touch-ui .stick-left,.touch-ui .stick-right{top:55px}.touch-ui .touch-actions{width:158px;right:8px}.touch-ui .stat{padding:0 4px}.touch-ui .stat strong{font-size:16px}}
@media(orientation:landscape) and (max-height:350px){.touch-ui .right{display:none}}