:root{color-scheme:dark;--bg:#081521;--panel:#0f2335;--card:#122c40;--line:#25435a;--text:#eff8ff;--muted:#a4bfd2;--delta-blue:#0087DC;--delta-aqua:#64D7D7;--delta-green:#B9EB5F;--mint:var(--delta-aqua);--blue:var(--delta-blue);--amber:#ffcd85;--mono:ui-monospace,"SFMono-Regular",Consolas,monospace;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(ellipse at 83% 4%,#102f4d 0,transparent 48%),var(--bg)}
button,input,select{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
button:disabled{cursor:default}
.shell{max-width:1192px;margin:auto;padding:0 26px}
.bar,.footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar{position:relative;height:77px;margin-bottom:27px}
.bar::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,var(--delta-blue) 0 60%,var(--delta-aqua) 60% 80%,var(--delta-green) 80% 100%)}
.brand,.tools{display:flex;align-items:center;gap:14px}
.brand img{width:114px;height:37px;object-fit:contain;object-position:left center}
.brand{gap:20px}
.edition,.kicker,.tag,.stat,.chip,.footer span+span,.option-key{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.edition{font-size:10px;line-height:1.45;color:var(--muted)}
.edition b{color:var(--text)}
.icon-button{display:grid;place-items:center;width:43px;height:43px;background:#112638;border:1px solid var(--line);border-radius:9px;color:var(--text);padding:0}
.icon-button:hover,.icon-button[aria-pressed=true]{border-color:var(--mint);color:var(--mint)}
.icon-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#sound[aria-pressed=false] .sound-waves,#sound[aria-pressed=true] .sound-muted{display:none}
#screen:focus{outline:none}
.kicker,.tag,.chip{font-size:11px}
.kicker{color:var(--mint);margin:0 0 12px}
h1,h2,h3,p{margin:0}
h1,h2,h3{letter-spacing:-.04em}
h1{font-size:clamp(49px,7.2vw,105px);line-height:.88;font-weight:860}
h1 em{font-style:normal;color:var(--mint)}
h2{font-size:clamp(28px,4vw,48px);line-height:1.02}
p{line-height:1.55}
.hero,.mission,.finish{display:grid;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.hero{min-height:448px;grid-template-columns:.85fr 1.15fr}
.hero-copy{padding:clamp(24px,4.4vw,57px);display:flex;flex-direction:column;justify-content:center}
.hero-copy>p:not(.kicker){max-width:32ch;color:#c5d8e6;margin:20px 0 26px;font-size:clamp(15px,1.8vw,19px)}
.scene{position:relative;min-width:0;overflow:hidden;background:#142c48;isolation:isolate}
.scene canvas{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.hero .scene{border-left:1px solid var(--line)}
.scene-label{position:absolute;left:14px;top:14px;background:#091726ed;border:1px solid #57718a;color:#e4f1ff;padding:6px 8px;border-radius:4px;font:700 10px var(--mono);letter-spacing:.10em;text-transform:uppercase}
.scene-label:before{content:"";display:inline-block;width:6px;height:6px;background:#ffc386;margin-right:7px;vertical-align:1px;box-shadow:0 0 8px #ffc386}
.scene-label.online:before{background:var(--delta-green);box-shadow:0 0 8px var(--delta-green)}
.scene-index{position:absolute;bottom:12px;right:12px;color:#e4f1ff;background:#091726df;border:1px solid #57718a;padding:5px 7px;font:700 10px var(--mono);letter-spacing:.12em;border-radius:4px}
.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.primary,.secondary{min-height:47px;padding:10px 17px;border:1px solid transparent;border-radius:8px;font-weight:760}
.primary{color:#082820;background:var(--mint);box-shadow:0 3px 0 #2a8597}
.primary:hover{background:#9fecec}
.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #2a8597}
.secondary{background:#172f43;color:var(--text);border-color:#39566c}
.secondary:hover{border-color:var(--blue)}
.primary:disabled{opacity:.6}
.chevron{margin-left:12px}
.route{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.route li{min-width:0;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);background:#0e2234;border-radius:8px}
.route .node{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:4px;background:#1a344a;color:#b4cee2;font:700 11px var(--mono)}
.route li.active{border-color:var(--delta-blue);background:#153347}
.route li.done{border-color:#397d70}
.route li.done .node{background:var(--delta-green);color:#082820}
.route .route-name{font-size:12px;font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.footer{padding:24px 0;font-size:12px;color:var(--muted)}
.footer b{color:var(--text)}
.footer span+span{font-size:10px;white-space:nowrap}
.footer i{display:inline-block;width:4px;height:4px;background:var(--delta-blue);margin:0 4px;vertical-align:2px}
.hud{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;color:var(--muted);gap:10px}
.stat{font-size:11px}
.score strong{font-size:17px;color:var(--delta-green);margin-left:6px}
.mission{grid-template-columns:.9fr 1.1fr;min-height:260px}
.mission-copy{padding:clamp(20px,3.5vw,38px);display:flex;flex-direction:column;justify-content:center}
.mission-copy>p:not(.kicker){max-width:39ch;color:#c5d8e6;margin-top:12px;font-size:clamp(15px,1.7vw,18px)}
.mission .scene{border-left:1px solid var(--line);min-height:260px}
.options-label{margin:19px 0 9px;color:#c3d9ea;font:700 11px var(--mono);letter-spacing:.12em}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.option{min-width:0;display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;text-align:left;color:var(--text);border-radius:9px;border:1px solid var(--line);background:#11283a;min-height:100px}
.option:hover:not(:disabled){border-color:var(--blue);background:#19374c}
.option img{display:block;width:76px;height:66px;object-fit:contain;background:radial-gradient(ellipse,#eff8ff,#b9d4df);border-radius:5px;padding:5px}
.option strong,.option small{display:block}
.option strong{font-size:15px;line-height:1.12}
.option small{font-size:12px;line-height:1.25;margin-top:4px;color:#b9d1e3}
.option-key{align-self:start;color:#a4bfd2;font-size:11px;padding:3px 4px}
.option.missed{border-color:#946b4b;background:#332c32}
.option.matched{border-color:var(--mint);background:#163d3d}
.option.matched .option-key{color:var(--mint)}
.feedback{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;min-height:44px}
.feedback p{font-size:14px;color:var(--muted)}
.feedback[data-kind=hint] p{color:var(--amber)}
.feedback[data-kind=success] p{color:var(--mint)}
.feedback .primary{flex-shrink:0}
.finish{grid-template-columns:1fr 1fr;min-height:330px}
.finish .scene{border-left:1px solid var(--line)}
.finish-copy{padding:clamp(23px,4vw,44px)}
.finish-copy>p:not(.kicker){color:#c5d8e6;margin:12px 0}
.finish-score{font:800 clamp(45px,7vw,76px)/1.05 var(--mono);color:var(--delta-green);margin:16px 0 5px}
.finish-score small{font-size:16px;color:var(--muted)}
.result-note{font:700 11px var(--mono);letter-spacing:.08em;color:var(--muted)}
.score-form{margin-top:17px;padding:17px;background:#11283a;border:1px solid var(--line);border-radius:10px}
.score-form h3{font-size:22px}
.score-form>p{font-size:13px;color:var(--muted);margin:4px 0 10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.form-grid label{display:grid;gap:5px;font-size:13px}
.form-grid input,.form-grid select{width:100%;min-width:0;background:#0a1b2b;border:1px solid #456079;border-radius:7px;color:var(--text);min-height:46px;padding:8px 10px}
#save-status:empty{display:none}
#save-status{margin-bottom:0;color:var(--amber)}
dialog{width:min(490px,calc(100% - 28px));max-height:80dvh;padding:20px;background:#102538;color:var(--text);border:1px solid #39586f;border-radius:14px;box-shadow:0 24px 80px #0009}
dialog::backdrop{background:#030c16c7}
.dialog-top{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:15px}
.dialog-top h2{font-size:31px}
.dialog-top .kicker{margin-bottom:6px}
#board-content p{color:var(--muted)}
.board-table{width:100%;border-collapse:collapse;font-size:14px}
.board-table th,.board-table td{padding:9px 5px;border-top:1px solid var(--line);text-align:left}
.board-table th{font:700 11px var(--mono);color:var(--muted)}
.board-table th:last-child,.board-table td:last-child{text-align:right}
.board-table td:last-child{color:var(--mint);font-weight:800}
.board-table .flag{margin-right:5px}
.board-table td:nth-child(2){overflow-wrap:anywhere}
@media(max-width:850px){.hero{min-height:385px}.option{grid-template-columns:57px minmax(0,1fr) auto;gap:7px}.option img{width:57px;height:57px}.option strong{font-size:14px}}
@media(max-width:660px){.shell{padding:0 13px}.bar{height:61px;margin-bottom:12px}.brand{gap:15px}.tools{gap:8px}.brand img{width:89px;height:31px}.icon-button{width:38px;height:38px}.hero,.mission,.finish{grid-template-columns:1fr;border-radius:11px}.hero .scene,.mission .scene,.finish .scene{border-left:0;border-top:1px solid var(--line);min-height:0;aspect-ratio:2.06}.hero .scene,.finish .scene{aspect-ratio:1.95}.hero-copy{padding:23px 20px}.hero-copy>p:not(.kicker){margin:13px 0 17px}.mission-copy{padding:15px}.mission-copy>p:not(.kicker){margin-top:6px}.mission-copy .kicker{margin-bottom:7px}.mission .scene-label{left:8px;top:8px}.route{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px}.route li{padding:6px 2px;gap:5px;flex-direction:column;text-align:center}.route .route-name{font-size:9px}.route .node{width:21px;height:21px;font-size:10px}.footer{padding:16px 0;font-size:11px;flex-wrap:wrap}.footer span+span{font-size:9px}.options-label{margin:12px 0 6px}.options{gap:5px}.option{padding:6px;grid-template-columns:minmax(0,1fr) auto;gap:3px;align-items:start;min-height:0}.option img{width:100%;height:51px;grid-column:1/-1;padding:3px}.option strong{font-size:12px}.option small{font-size:11px}.option-key{font-size:9px;padding:1px}.hud{margin-bottom:7px}.feedback{align-items:flex-start}.feedback p{font-size:13px}.feedback .primary{font-size:12px;padding:7px 9px;min-height:41px}.form-grid{grid-template-columns:1fr 1fr}.form-grid button{grid-column:1/-1}.scene-index{bottom:8px;right:8px}}
@media(max-width:350px){.edition{display:none}.shell{padding:0 9px}.option small{font-size:10px}.option strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

[hidden]{display:none!important}
#fullscreen[aria-pressed=false] .fullscreen-collapse,#fullscreen[aria-pressed=true] .fullscreen-expand{display:none}
.feedback:not([data-kind]){display:none}
.feedback[data-kind=success]{align-items:center;padding:12px 14px;background:#102c31;border:1px solid #397d70;border-radius:8px}
.feedback[data-kind=success] p{color:#d2f5ea}
#benefit-label{color:var(--delta-green);font:700 11px var(--mono);letter-spacing:.08em;margin-bottom:4px}
.finish-copy .actions{margin-top:16px}
.board-editions{display:flex;gap:7px;margin-bottom:14px}
.board-editions .secondary{min-height:40px;padding:5px 10px;font-size:13px}
.board-editions [aria-pressed=true]{border-color:var(--mint);color:var(--mint)}
@media(max-width:660px){
 .feedback[data-kind=success]{align-items:stretch;flex-direction:column;padding:10px}
 .feedback .primary{align-self:flex-end}
 .scene-label{max-width:calc(100% - 24px)}
}