:root{--bg: #050b18;--stone: #ece6d9;--stone-70: rgba(236, 230, 217, .7);--stone-45: rgba(236, 230, 217, .45);--cyan: #4fe3ff;--cyan-60: rgba(79, 227, 255, .6);--cyan-25: rgba(79, 227, 255, .25);--amber: #ffb648;--gold: #ffd978;--beacon: #fff5d6;--indigo-glow: #7c6cff;--indigo-soft: #c3b9ff;--void-deep: #120c38;--danger: #ff6b8a;--panel: linear-gradient(180deg, rgba(9, 19, 42, .78), rgba(6, 12, 28, .62));--panel-border: rgba(79, 227, 255, .18);--radius: 12px;--font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}html{background:var(--bg);color:var(--stone);font-family:var(--font);-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;line-height:1.35}#scene{position:fixed;inset:0;width:100%;height:100%;display:block}#ui{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums}#ui [hidden]{display:none!important}#ui button{pointer-events:auto;font:inherit;color:inherit;cursor:pointer;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none}#ui button:focus{outline:none}#ui button:focus-visible{outline:2px solid var(--beacon);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.vignette{position:absolute;inset:-2px;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(18,12,56,.55) 72%,rgba(18,12,56,.95) 100%);transition:opacity .2s linear}#ui.is-critical .vignette{animation:void-breathe 1.1s ease-in-out infinite}.flash{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,transparent 35%,rgba(255,182,72,.55) 100%)}.hud{position:absolute;inset:0;display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(150px,220px) auto;grid-template-rows:auto 1fr auto;column-gap:12px;row-gap:8px;align-items:start;padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left));pointer-events:none}.panel-momentum{grid-column:1;grid-row:1}.panel-route{grid-column:2;grid-row:1;padding-top:10px}.panel-void{grid-column:3;grid-row:1}.corner{grid-column:4;grid-row:1;position:relative;z-index:4;display:flex;gap:8px}.assembled{grid-column:1 / -1;grid-row:3;justify-self:center}.panel{min-width:0;padding:8px 12px 9px;border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--panel);box-shadow:0 6px 20px #00000040;transition:opacity .4s ease,border-color .25s ease,box-shadow .25s ease}.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.panel-title{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan-60)}.panel-value{font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--stone)}#ui[data-tier="3"] .panel-momentum .panel-value{color:var(--beacon);text-shadow:0 0 10px rgba(255,217,120,.6)}#ui.is-critical .panel-void .panel-value{color:var(--danger)}.gauge{position:relative;height:7px;margin-top:7px;border-radius:4px;overflow:hidden;background:#ffffff0f}.gauge-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan) 0%,var(--amber) 62%,var(--beacon) 100%)}.gauge-cover{position:absolute;inset:0;background:#0a1326;transform-origin:100% 50%;transform:scaleX(1);will-change:transform}.gauge:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(5% - 1px),rgba(5,11,24,.95) calc(5% - 1px),rgba(5,11,24,.95) 5%)}.gauge-void .gauge-fill{background:linear-gradient(90deg,var(--indigo-glow) 0%,#b06cff 45%,var(--danger) 100%)}.tier{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-45)}.pips{display:inline-flex;gap:4px}.pips i{width:14px;height:5px;border-radius:2px;background:#ffffff1a;transition:background .25s,box-shadow .25s}.pips i.lit{background:var(--cyan);box-shadow:0 0 6px var(--cyan-60)}#ui[data-tier="2"] .pips i.lit{background:var(--amber);box-shadow:0 0 6px #ffb64899}#ui[data-tier="3"] .pips i.lit{background:var(--beacon);box-shadow:0 0 8px #ffd978cc}.tier-word{margin-left:auto;color:var(--stone-70)}.track{position:relative;height:16px;margin:2px 8px 0 4px}.track-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:#ece6d938}.track-void{position:absolute;left:0;top:50%;width:100%;height:6px;margin-top:-3px;border-radius:3px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,rgba(58,42,156,.35),var(--indigo-glow));box-shadow:0 0 10px #7c6cff8c;will-change:transform}.track-runner{position:absolute;left:0;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform:rotate(45deg)}.track-beacon{position:absolute;right:-6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,var(--gold) 50%,transparent 72%);box-shadow:0 0 14px 3px #ffd978a6;animation:beacon-pulse 2.4s ease-in-out infinite}.route-meta{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone-70)}.route-meta .time{font-family:var(--mono);letter-spacing:.04em;text-transform:none}.void-word{margin-top:6px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-45)}#ui.is-critical .void-word{color:var(--danger);animation:blink .8s steps(2,start) infinite}#ui.is-critical .panel-void{border-color:#ff6b8a8c;box-shadow:0 0 18px #ff6b8a40}.hud.is-stumbling .panel-momentum{border-color:#ffb64899}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--panel-border);border-radius:12px;background:var(--panel);color:var(--stone);box-shadow:0 6px 20px #00000040;touch-action:none;transition:border-color .2s ease,color .2s ease}.icon-btn svg{width:22px;height:22px;fill:currentColor}.icon-btn:hover{border-color:var(--cyan-60)}.icon-btn[aria-pressed=true]{color:var(--stone-45)}.assembled{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-45)}#ui[data-phase=ready] .panel,#ui[data-phase=ready] .assembled{opacity:0}#ui[data-phase=won] .panel,#ui[data-phase=lost] .panel{opacity:.4}#ui[data-touch="1"] .assembled{display:none}.touch{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;padding:0 calc(14px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left));pointer-events:none}#ui[data-touch="1"][data-phase=running]:not([data-paused="1"]) .touch{display:flex}.touch-group{display:flex;gap:12px}.touch-btn{--s: clamp(58px, min(20vw, 16vh), 104px);width:var(--s);height:var(--s);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid rgba(236,230,217,.22);border-radius:24px;background:radial-gradient(circle at 50% 30%,#ece6d924,#09132ad1 70%);color:var(--stone);font-size:10px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 10px 26px #0006;touch-action:none;transition:transform .08s ease,box-shadow .12s ease,background .12s ease,color .12s ease}.touch-btn svg{width:42%;height:42%}.touch-btn.is-held{transform:scale(.93)}.pedal-surge{border-color:#ffb6488c;color:var(--amber)}.pedal-surge.is-held{background:radial-gradient(circle at 50% 30%,#ffb64880,#78460ad9 72%);box-shadow:0 0 30px #ffb6488c;color:var(--beacon)}.pedal-brake{border-color:#7c6cff8c;color:var(--indigo-soft)}.pedal-brake.is-held{background:radial-gradient(circle at 50% 30%,#7c6cff80,#281c78e6 72%);box-shadow:0 0 30px #7c6cff80;color:#fff}.touch-lanes .touch-btn.is-tapped{animation:lane-pop .22s ease-out}.icon-btn.is-tapped,.btn.is-tapped{animation:tap-pop .18s ease-out}.overlay{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));background:radial-gradient(ellipse at 50% 35%,#1410406b,#050b18db 80%);pointer-events:auto;animation:overlay-in .35s ease-out}.overlay-result.is-lost{background:radial-gradient(ellipse at 50% 35%,#2a186e80,#08051ae6 80%)}.card{width:min(100%,580px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;-webkit-overflow-scrolling:touch;padding:clamp(18px,4vmin,34px) clamp(18px,4.5vmin,40px);border:1px solid rgba(79,227,255,.22);border-radius:20px;background:linear-gradient(160deg,#0c1834f0,#080922f0);box-shadow:0 30px 80px #0000008c,inset 0 0 0 1px #ffffff08;text-align:center;animation:card-in .4s cubic-bezier(.2,.8,.2,1)}.card-small{width:min(100%,440px)}.is-won .card{border-color:#ffd97873;box-shadow:0 30px 80px #0000008c,0 0 60px #ffd9782e}.is-lost .card{border-color:#7c6cff73;box-shadow:0 30px 80px #0000008c,0 0 60px #7c6cff29}.beacon-mark,.result-mark{width:46px;height:46px;margin:0 auto 12px;border-radius:50%}.beacon-mark,.is-won .result-mark{background:radial-gradient(circle,#fff 0 22%,var(--gold) 48%,transparent 70%);box-shadow:0 0 36px 10px #ffd97873;animation:beacon-pulse 2.4s ease-in-out infinite}.is-lost .result-mark{width:50px;height:50px;border:2px solid rgba(124,108,255,.8);background:radial-gradient(circle,var(--void-deep) 0 40%,transparent 42%);box-shadow:0 0 30px #7c6cff66,inset 0 0 18px #7c6cff80}.eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan-60)}.is-won .eyebrow{color:var(--gold)}.is-lost .eyebrow{color:var(--danger)}.title{margin:0;padding-left:.22em;font-size:clamp(30px,7.5vw,58px);font-weight:700;line-height:1.05;letter-spacing:.22em;text-transform:uppercase;background:linear-gradient(180deg,#fff 0%,var(--stone) 45%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.title-sm{font-size:clamp(24px,5vw,38px)}.is-won .title{background-image:linear-gradient(180deg,#fff 0%,var(--beacon) 40%,var(--gold) 100%)}.is-lost .title{background-image:linear-gradient(180deg,#fff 0%,var(--indigo-soft) 45%,var(--indigo-glow) 100%)}.lede{margin:14px auto 0;max-width:46ch;font-size:clamp(13px,1.7vw,15.5px);color:var(--stone-70)}.howto{list-style:none;display:grid;gap:8px;margin:18px 0 0;padding:0;text-align:left}.howto li{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;padding:8px 12px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:#ffffff09}.glyph{display:inline-flex;justify-content:center;gap:2px;color:var(--cyan)}.glyph svg{width:22px;height:22px}.glyph-surge{color:var(--amber)}.glyph-brake{color:var(--indigo-soft)}.how{display:grid;gap:1px}.how b{font-size:14px;font-weight:600;letter-spacing:.04em}.how small{font-size:12px;color:var(--stone-45)}.keys{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}kbd{padding:5px 6px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:#ffffff12;box-shadow:inset 0 -1px #00000080;color:var(--stone);font-family:var(--mono);font-size:11px;line-height:1}.touch-hint{display:none;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-45)}#ui[data-touch="1"] .howto .keys,#ui[data-touch="1"] .hint.keys{display:none}#ui[data-touch="1"] .touch-hint{display:inline}.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:20px}.btn{min-height:48px;padding:0 22px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#ffffff0d;color:var(--stone);font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;touch-action:manipulation;transition:background .2s ease,box-shadow .2s ease,transform .1s ease}.btn:hover{background:#ffffff17}.btn[aria-pressed=true]{color:var(--stone-45)}.btn-primary{min-height:56px;padding:0 32px;border-color:#fff5d6b3;background:linear-gradient(180deg,#fff6dc,var(--gold) 55%,var(--amber));color:#1a1304;box-shadow:0 0 0 1px #ffd9784d,0 10px 30px #ffb64847,0 0 40px #ffd97833}.btn-primary:hover{background:linear-gradient(180deg,#fffbee,#ffe39a 55%,#ffc15e);box-shadow:0 0 0 1px #ffd97880,0 12px 34px #ffb64861,0 0 54px #ffd9784d}.is-lost .btn-primary{border-color:#c3b9ffb3;background:linear-gradient(180deg,#ece8ff,var(--indigo-soft) 55%,var(--indigo-glow));color:#0e0a2e;box-shadow:0 0 0 1px #7c6cff59,0 10px 30px #7c6cff4d}.hint{margin:14px 0 0;font-size:11px;letter-spacing:.1em;color:var(--stone-45)}.hint kbd{margin:0 4px 0 6px}.instrument{font-family:var(--mono);letter-spacing:.02em}.stats{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:baseline;max-width:380px;margin:18px auto 0;text-align:left}.stats dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone-45)}.stats dd{margin:0;font-size:16px;font-weight:600;text-align:right}@keyframes beacon-pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.18);filter:brightness(1.25)}}@keyframes blink{to{visibility:hidden}}@keyframes void-breathe{0%,to{opacity:.62}50%{opacity:.95}}@keyframes overlay-in{0%{opacity:0}}@keyframes card-in{0%{opacity:0;transform:translateY(12px) scale(.98)}}@keyframes tap-pop{0%{transform:scale(.92)}to{transform:scale(1)}}@keyframes lane-pop{0%{transform:scale(.9);box-shadow:0 0 28px #4fe3ff99;border-color:var(--cyan)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){#ui *,#ui *:before,#ui *:after{animation:none!important;transition:none!important}}@media(max-width:640px){.hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;column-gap:8px;row-gap:6px}.panel-momentum{grid-column:1;grid-row:1}.panel-void{grid-column:2;grid-row:1}.corner{grid-column:3;grid-row:1}.panel-route{grid-column:1 / -1;grid-row:2;padding:6px 12px 8px}.assembled{grid-row:4}.panel{padding:6px 10px 8px}.panel-value{font-size:15px}.tier-word{display:none}.icon-btn{width:40px;height:40px}.howto li{grid-template-columns:44px 1fr auto;padding:6px 10px}.glyph svg{width:20px;height:20px}.btn{padding:0 18px}.btn-primary{padding:0 26px}}@media(max-height:460px)and (orientation:landscape){.card{padding:12px 18px;border-radius:16px}.beacon-mark,.result-mark{display:none}.eyebrow{margin-bottom:2px}.title{font-size:clamp(22px,5vh,34px)}.lede{margin-top:6px;font-size:12px}.howto{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}.howto li{grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;padding:6px 8px}.howto .keys,.howto .touch-hint{grid-column:2;justify-content:flex-start}.how small{display:none}.actions{margin-top:10px}.btn-primary{min-height:46px}.hint{margin-top:8px}.stats{grid-template-columns:auto 1fr auto 1fr;margin-top:8px;max-width:none}.panel{padding:5px 10px 6px}.tier{margin-top:4px}.route-meta{margin-top:3px}}
