:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#fff7df;background:#102732;--gold:#ffcf73;--ink:#102732}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center}
main{width:min(100%,1220px);padding:clamp(8px,2vw,24px)}
header,footer,.hud,.touch,.group{display:flex;align-items:center;justify-content:space-between;gap:10px}
header,footer{padding:8px 3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
header b,header a,.release{color:var(--gold)}
header a{text-decoration:none}
header a:hover{text-decoration:underline}
.release{white-space:nowrap}
select,button{font:inherit;color:inherit}
select{background:#183945;border:1px solid #587078;border-radius:6px;padding:4px}
.screen{position:relative;isolation:isolate;overflow:hidden;height:min(76svh,680px);min-height:290px;border:1px solid #557981;border-radius:14px;background:#183945;box-shadow:0 14px 55px #061720}
canvas{width:100%;height:100%;display:block}
.overlay{position:absolute;inset:0;display:grid;align-items:center;overflow:auto;padding:clamp(12px,3.5vw,44px);background:linear-gradient(90deg,#0a2731ed,#0a2731bd 43%,#0a273118 86%)}
.card{width:min(100%,460px)}
.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.23em;font-weight:900;text-transform:uppercase}
h1,h2{font-family:Impact,'Arial Black',system-ui,sans-serif;text-transform:uppercase;font-style:italic;font-weight:1000;line-height:.9;margin:10px 0 12px;letter-spacing:-.025em;text-shadow:0 4px #702f2f}
h1{font-size:clamp(42px,8vw,104px)}
h1 span{color:var(--gold);display:block}
h2{font-size:clamp(32px,5vw,62px)}
p{font-size:14px;line-height:1.35;margin:8px 0 12px}
fieldset{border:0;margin:0 0 9px;padding:0;min-width:0}
legend,.label{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#f2daaa;margin-bottom:4px}
.choices{display:flex;gap:5px;flex-wrap:wrap}
button{background:#153841f5;border:1px solid #64848a;border-radius:6px;padding:7px 10px;font-size:13px;font-weight:750;cursor:pointer}
button[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 -2px var(--gold);color:var(--gold)}
button:focus-visible{outline:3px solid white;outline-offset:2px}
.primary{background:var(--gold);color:#263137;border-color:var(--gold);text-transform:uppercase;letter-spacing:.08em;padding:10px 18px}
.hud{position:absolute;inset:10px 10px auto;align-items:start;pointer-events:none}
.cluster{display:flex;gap:6px;flex-wrap:wrap}
.readout{display:grid;background:#0c2834ee;border:1px solid #7c9b9e;border-radius:7px;padding:5px 9px;font-size:22px;font-weight:900;line-height:1;min-width:67px;font-variant-numeric:tabular-nums}
.readout small{font-size:9px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.hud button{pointer-events:auto}
.location{position:absolute;top:22%;left:50%;transform:translateX(-50%);padding:6px 12px;background:#102732eb;border-bottom:3px solid var(--gold);font-weight:900;white-space:nowrap;pointer-events:none}
progress{width:100%;height:8px;accent-color:var(--gold)}
.touch{display:none;position:absolute;inset:auto 10px 10px;pointer-events:none}
.touch button{pointer-events:auto;touch-action:none;user-select:none;min-width:52px;min-height:54px;font-size:18px;background:#102732db}
.touch button.held{background:#b67137}
[hidden]{display:none!important}
.route-map{display:block;width:min(100%,320px);height:clamp(105px,24vh,210px);margin:6px 0}
.route-map text{fill:#fff7df;font:700 11px system-ui}
@media (pointer:coarse),(max-width:700px){.touch{display:flex}.screen{height:min(85svh,680px)}.overlay{background:linear-gradient(90deg,#0a2731f5,#0a2731a8)}.readout{font-size:19px;min-width:57px;padding:5px 6px}}
@media (max-height:470px){header,footer{padding:3px}.screen{height:calc(100svh - 49px)}.overlay{align-items:start}.overlay h1{font-size:38px}.overlay h1 span{display:inline}.overlay p{margin:5px 0}.overlay fieldset{margin-bottom:4px}}
@media (max-width:400px){.touch button{min-width:45px;padding:5px}.group{gap:5px}}