*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b1821;font-family:system-ui,Arial;color:#fff;touch-action:none}
canvas{display:block;width:100vw;height:100dvh;touch-action:none}
#overlay,#calibration,#help-panel{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#07151dd9,#162b36b8);backdrop-filter:blur(3px);overflow-y:auto}
#overlay{flex-direction:column;gap:22px}
.hidden,[hidden]{display:none!important}
button{border:0;border-radius:6px;background:#e78d45;color:#17212a;font-weight:900;padding:17px 35px;font-size:17px;cursor:pointer;box-shadow:0 6px #99552f}
button:disabled{cursor:wait;opacity:.55;box-shadow:none}
button.pad-selected,button:focus-visible{outline:3px solid #ffdf98;outline-offset:5px}
button[data-pad]{display:inline-flex;align-items:center;justify-content:center;gap:12px}
button[data-pad]::before{content:attr(data-pad);display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border:2px solid currentColor;border-radius:50%;background:#172a32;color:var(--pad-color);font:bold 15px system-ui}
button[data-pad="A"]{--pad-color:#86df96}button[data-pad="B"]{--pad-color:#ff8f84}button[data-pad="X"]{--pad-color:#80bdff}button[data-pad="Y"]{--pad-color:#ffdf75}
#calibration[data-phase="record"] button[data-pad]::before,#calibration[data-phase="release"] button[data-pad]::before{display:none}
#overlay button{width:min(300px,90vw)}
#calibrate,#help,#wizard-back,#wizard-cancel{background:#c7bb94;box-shadow:0 5px #6f684f}
.wizard-card{width:min(560px,100%);padding:30px;background:#10232bf5;border:1px solid #8d95746b;border-radius:14px;text-align:center;box-shadow:0 20px 80px #0008;margin:auto}
#wizard-step{margin:0 0 12px;text-transform:uppercase;letter-spacing:.15em;font-size:12px;color:#bdcbd0}
#wizard-progress{width:100%;height:6px;accent-color:#e78d45}
#wizard-icon{font-size:64px;line-height:1.2;color:#efaa65;margin:22px 0 14px}
#wizard-title{font-size:clamp(24px,4vw,34px);color:#f1e5bd;margin:0 0 14px}
#wizard-hint{color:#d6dedb;line-height:1.6;margin:0;min-height:52px}
#wizard-status{color:#efaa65;font-size:14px;min-height:40px;margin:16px 0;line-height:1.5}
.wizard-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.wizard-actions button{padding:12px 22px;font-size:14px}
#mobile{position:fixed;inset:0;z-index:2;pointer-events:none;display:none;--stick-size:clamp(96px,29vh,140px);--stick-bottom:max(14px,env(safe-area-inset-bottom));--stick-side:max(18px,env(safe-area-inset-left))}
.virtual-stick{position:absolute;bottom:var(--stick-bottom);width:var(--stick-size);height:var(--stick-size);border-radius:50%;border:2px solid #a5c6d67a;background:radial-gradient(circle,#243f4e70,#10232b99);box-shadow:inset 0 0 0 10px #b4d6e312;pointer-events:auto;touch-action:none;user-select:none}
#move-stick{left:var(--stick-side)}#aim-stick{right:max(18px,env(safe-area-inset-right));border-color:#edc48099}
.stick-label{position:absolute;left:0;right:0;top:12px;text-align:center;color:#dce9e9aa;font-size:10px;font-weight:800;letter-spacing:.1em;pointer-events:none}
.stick-knob{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);border-radius:50%;background:#83b9d3a6;border:2px solid #c8edffba;box-shadow:0 3px 10px #0005;pointer-events:none}
#aim-stick .stick-knob{background:#d7aa68b3;border-color:#ffe3a0cc}.virtual-stick.active{border-color:#edfaff;box-shadow:0 0 18px #8bcbee44}
.touch-button{position:absolute;bottom:calc(var(--stick-bottom) + var(--stick-size) + 12px);width:48px;height:48px;padding:0;border-radius:50%;background:#876038c9;border:2px solid #ffdf98;display:grid;place-items:center;font-size:23px;font-weight:bold;color:#ffedc9;box-shadow:none;pointer-events:auto;touch-action:none;user-select:none}
#grenade{right:max(18px,env(safe-area-inset-right))}#dodge{right:78px}
#fullscreen{position:fixed;z-index:6;right:max(10px,env(safe-area-inset-right));top:max(62px,env(safe-area-inset-top));width:42px;height:42px;display:grid;place-items:center;padding:0;background:#10232bcc;color:#e9dbb5;border:1px solid #e9dbb566;box-shadow:none;touch-action:manipulation}
#fullscreen-status{position:fixed;right:12px;top:108px;z-index:9;max-width:260px;padding:12px;background:#10232bf5;color:#f4e7be;border-radius:8px;font-size:13px;line-height:1.5}
@media(pointer:coarse){#mobile{display:block}}
@media(max-height:550px){#calibration{padding:12px}.wizard-card{padding:16px}#wizard-icon{font-size:36px;margin:8px 0}#wizard-title{font-size:24px;margin-bottom:8px}#wizard-status{margin:8px 0;min-height:22px}#wizard-hint{min-height:0;font-size:14px}}

#wizard-signal{display:block;color:#bdcbd0;font-family:monospace;font-size:12px;margin:0 0 16px;font-variant-numeric:tabular-nums}
.help-card{width:min(760px,100%);text-align:left;touch-action:pan-y}
#help-panel{touch-action:pan-y}
#help-title{margin:0;color:#f1e5bd;font-size:28px}
.help-intro,.help-touch p{color:#d6dedb;line-height:1.5}
.help-controls{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.help-card h2{font-size:17px;color:#efaa65;margin:14px 0}
.help-card dl{display:grid;grid-template-columns:auto 1fr;gap:12px 16px;font-size:14px;line-height:1.5}
.help-card dt{font-weight:700;color:#f1e5bd}
.help-card dd{margin:0;color:#d6dedb}
.help-card kbd{font:inherit;color:#fff;background:#293e45;border:1px solid #65736a;border-radius:3px;padding:1px 5px;white-space:nowrap}
.help-note{font-size:13px;line-height:1.5;color:#bdcbd0}
.help-touch{border-top:1px solid #8d95744d;margin-top:12px}
#help-close{display:block;margin:22px auto 6px;padding:12px 24px;font-size:15px}
@media(max-width:600px){#help-panel{padding:12px}.help-controls{grid-template-columns:1fr;gap:0}.help-card{padding:20px}}
@media(max-height:600px) and (min-width:601px){.help-card{padding:20px}#help-title{font-size:24px}.help-intro{margin:8px 0;font-size:14px}.help-card h2{margin:10px 0}.help-card dl{gap:8px 16px;margin:10px 0}.help-note{margin:8px 0}.help-touch{margin-top:8px}.help-touch p{margin:8px 0;font-size:14px}#help-close{margin:14px auto 2px}}

#overlay .menu-hint{margin:4px 0 0;color:#d6dedb;font-size:13px;text-align:center;line-height:1.6}
#overlay button:not(.pad-selected)[data-pad]::before{opacity:.35}

#players{background:#80bdff;box-shadow:0 5px #365d85;font-size:14px}
@media(max-height:600px){#overlay{gap:14px;padding:12px}#overlay button{padding:12px 20px}.menu-hint{margin:4px;font-size:12px}}

#overlay.mission-summary{gap:14px;padding:20px}
.mission-summary #calibrate,.mission-summary #help,.mission-summary #players,.mission-summary .menu-hint{display:none}
#mission-report{width:min(460px,92vw);padding:24px 30px;background:#10232bf2;border:1px solid #e0c08066;border-radius:12px;box-shadow:0 16px 60px #0008}
.result-eyebrow{margin:0 0 8px;color:#eab475;font-size:11px;font-weight:800;letter-spacing:.22em}
#result-title{margin:0;font-size:clamp(20px,4vw,28px);color:#f4e7be}
#result-subtitle{color:#d1dad5;line-height:1.5;font-size:14px;margin:12px 0}
#result-stats{color:#8eb4bf;font-size:12px;margin:0 0 18px}
.result-scores{display:grid;grid-template-columns:1fr auto;gap:11px 20px;margin:0;font-size:14px}
.result-scores dt{color:#c5d0cc}.result-scores dd{margin:0;text-align:right;color:#9ce3a3;font-weight:800;font-variant-numeric:tabular-nums}
.result-scores .result-total{padding-top:13px;border-top:1px solid #72877c66;color:#f4e7be;font-size:20px;font-weight:900}
#overlay.mission-summary #start{font-size:13px;padding:10px 20px;background:#bdb697;box-shadow:0 4px #6f684f}
#overlay #continue{width:min(360px,90vw);background:#91cf9b;box-shadow:0 5px #3f7155}
@media(max-height:600px){#overlay.mission-summary{gap:10px;padding:12px}#mission-report{padding:16px 24px}.result-scores{gap:7px 16px}#result-subtitle{margin:6px 0}#result-stats{margin-bottom:12px}.result-scores .result-total{padding-top:8px}}

#controller-assignment{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:24px;background:#07151de8;backdrop-filter:blur(4px)}
#assignment-title{margin:0 0 16px;font-size:clamp(22px,4vw,30px)}
#assignment-status{color:#d1dad5;font-size:15px;line-height:1.6;margin:0 0 24px;min-height:72px}
#controller-assignment[data-player="0"] .wizard-card,#calibration[data-player="0"] .wizard-card{border-color:#80bdff88}
#controller-assignment[data-player="1"] .wizard-card,#calibration[data-player="1"] .wizard-card{border-color:#ff8d9188}
#controller-assignment[data-player="0"] h1{color:#80bdff}#controller-assignment[data-player="1"] h1{color:#ff8d91}
#calibrate-red{background:#ff8d91;box-shadow:0 5px #955159}
#controller-status{margin:0;max-width:90vw;color:#bacbd0;font-size:12px;text-align:center}
#controller-status:empty{display:none}
.mission-summary #calibrate-red,.mission-summary #controller-status{display:none}
@media(max-height:600px){#overlay{gap:10px}#overlay button{padding:10px 16px}#controller-status{font-size:11px}}

#mobile{-webkit-touch-callout:none}
.stick-hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#f7d49d;font-size:8px;font-weight:800;pointer-events:none}
#aim-stick.firing{border-color:#ffba6b;box-shadow:0 0 22px #ff8b4566}
#aim-stick.firing .stick-knob{background:#e87937d9;border-color:#ffe0a2}

#mission-intro{position:fixed;inset:0;z-index:3;pointer-events:none}
#intro-skip{position:absolute;right:20px;top:16px;padding:10px 16px;background:#10232be6;color:#f4e7be;border:1px solid #e8b66b88;box-shadow:none;font-size:13px;pointer-events:auto}
#intro-skip span{display:block;font-size:10px;font-weight:400;margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


#general-voice{position:absolute;left:20px;top:16px;padding:10px 14px;background:#10232be6;color:#f4e7be;border:1px solid #e8b66b88;box-shadow:none;font-size:12px;pointer-events:auto}

#overlay.campaign-selection > :not(#campaign-list){display:none!important}
#campaign-list{width:min(500px,92vw);padding:28px;background:#10232bf2;border:1px solid #e0c08066;border-radius:12px;text-align:center}
#campaign-list-title{margin:0 0 28px;color:#f4e7be}
#campaign-list button{width:100%;margin-bottom:18px}
#campaign-back{background:#c7bb94;box-shadow:0 5px #6f684f}
#campaign-list .menu-hint{display:block;margin:8px 0 0}

#game-title{margin:0;color:#f4e7be;font-size:clamp(30px,6vw,52px);font-weight:900;letter-spacing:.17em;text-indent:.17em;text-shadow:0 4px 0 #613c29}
.mission-summary #game-title{display:none}