:root{--void: #05070d;--ink: #eaf3f8;--dim: #9fb3c2;--cyan: #7fe3ff;--amber: #ffc978;--danger: #ff8a72;--good: #9dffc4;--card: rgba(7, 12, 20, .88);--edge: rgba(127, 227, 255, .28);--speed: 0}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--void);color:var(--ink);font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}#app{position:fixed;inset:0;overflow:hidden}#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.speedfx{position:absolute;inset:0;pointer-events:none;opacity:calc(.18 + var(--speed) * .55);background:radial-gradient(ellipse at center,#0000 34%,#020409b8),conic-gradient(from 0deg at 50% 50%,#7fe3ff29,#0000,#7fe3ff21 12deg,#0000 19deg);background-size:100% 100%,100% 100%;mix-blend-mode:screen;transition:opacity 90ms linear}.hud{position:absolute;inset:0;display:none;flex-direction:column;justify-content:space-between;padding:clamp(10px,1.6vmin,20px);pointer-events:none}.hud[data-visible=true]{display:flex}.hud-top,.hud-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.hud-bottom{align-items:flex-end}.panel{background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:8px 12px;min-width:0}.panel--clock{text-align:center;border-color:#ffc97866}.panel--keys{display:flex;gap:8px;pointer-events:auto}.label{margin:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}.label--tight{margin-top:2px;letter-spacing:.12em}.label[data-warn=true]{color:var(--danger)}.value{margin:2px 0 0;font-size:clamp(13px,1.7vmin,17px);font-weight:600;letter-spacing:.04em}.value--speed{font-size:clamp(20px,3vmin,30px);color:var(--cyan);font-variant-numeric:tabular-nums}.value--small{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}.unit{font-size:11px;color:var(--dim);margin-left:3px}.clock{margin:1px 0 0;font-size:clamp(28px,4.6vmin,46px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--amber)}.clock[data-urgent=true]{color:var(--danger)}.pips{display:flex;gap:5px;margin-top:6px}.pip{width:16px;height:5px;border-radius:2px;background:#eaf3f838}.pip[data-state=done]{background:var(--good)}.pip[data-state=active]{background:var(--amber)}.bar{position:relative;width:clamp(70px,12vmin,130px);height:7px;margin-top:7px;border-radius:4px;background:#eaf3f824;overflow:hidden}.bar--wide{width:clamp(96px,20vmin,200px)}.bar i,.bar b{position:absolute;inset:0;display:block;width:100%;border-radius:4px;transform:scaleX(0);transform-origin:left center}.bar--thin{height:4px;margin-top:4px}.bar i{background:linear-gradient(90deg,#3ba7d8,var(--cyan))}.bar b{background:#ffc978d9}.bar--wide i{background:linear-gradient(90deg,#4fd39a,var(--good))}.markers{position:absolute;inset:0;pointer-events:none}.reticle{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(234,243,248,.5);border-radius:50%}.reticle:before,.reticle:after{content:"";position:absolute;background:#eaf3f8a6}.reticle:before{left:50%;top:-9px;width:1px;height:6px}.reticle:after{top:50%;left:-9px;width:6px;height:1px}.prograde{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid var(--cyan);border-radius:50%;opacity:0;transition:opacity .14s linear}.prograde[data-on=true]{opacity:.95}.prograde:after{content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;margin:-1px 0 0 -1px;background:var(--cyan);border-radius:50%}.beacon{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}.beacon[data-on=true]{opacity:1}.beacon-arrow{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border:2px solid var(--amber);border-radius:50%;box-shadow:0 0 12px #ffc97873}.beacon[data-off=true] .beacon-arrow{left:-11px;top:-11px;width:0;height:0;border:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:19px solid var(--amber);border-radius:0;box-shadow:none;filter:drop-shadow(0 0 6px rgba(255,201,120,.5))}.beacon-label{position:absolute;left:18px;top:-8px;font-size:10px;letter-spacing:.18em;color:var(--amber);white-space:nowrap}.toast,.warn{position:absolute;left:50%;transform:translate(-50%);margin:0;padding:7px 16px;border-radius:999px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:#050910d1;border:1px solid var(--edge);color:var(--cyan);opacity:0;pointer-events:none;transition:opacity .18s linear;white-space:nowrap}.toast{top:clamp(84px,17vh,150px)}.warn{top:clamp(112px,22vh,190px);color:var(--danger);border-color:#ff8a7280}.toast[data-on=true],.warn[data-on=true]{opacity:1}.scrim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 45%,#04070eb3,#020307f0);backdrop-filter:blur(2px);z-index:5}.scrim[hidden]{display:none}.card{width:min(560px,100%);max-height:100%;overflow-y:auto;padding:clamp(20px,3.6vmin,34px);border-radius:16px;background:var(--card);border:1px solid var(--edge);box-shadow:0 24px 60px #0000008c}.card--wide{width:min(660px,100%)}.kicker{margin:0 0 6px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}h1,h2{margin:0 0 10px;line-height:1.02;letter-spacing:-.015em}h1{font-size:clamp(34px,7vmin,62px)}h2{font-size:clamp(24px,4.6vmin,38px)}.lede{margin:0 0 14px;font-size:clamp(14px,1.8vmin,16px);line-height:1.5;color:#cfe0ea}.legend{margin:0 0 18px;font-size:12.5px;line-height:1.9;color:var(--dim)}.legend b{color:var(--cyan);font-weight:600}.action{appearance:none;border:1px solid rgba(127,227,255,.55);border-radius:999px;padding:12px 24px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#041018;background:linear-gradient(180deg,#a9efff,#4fc7ec);cursor:pointer}.action:hover{background:linear-gradient(180deg,#c8f6ff,#6bd9f8)}.action:focus-visible{outline:2px solid var(--amber);outline-offset:3px}.fineprint{margin:14px 0 0;font-size:11.5px;letter-spacing:.1em;color:var(--dim)}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 20px}.stats div{padding:8px 10px;border-radius:8px;background:#7fe3ff12;border:1px solid rgba(127,227,255,.16)}.stats dt{margin:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}.stats dd{margin:3px 0 0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.chip{appearance:none;cursor:pointer;border-radius:999px;border:1px solid rgba(127,227,255,.4);background:#09101ae6;color:var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px}.chip:hover{border-color:var(--cyan);color:var(--cyan)}.chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.touch{display:none}@media(pointer:coarse){.hud-bottom{padding-bottom:186px}.hud-bottom .bar--wide{width:clamp(88px,26vw,150px)}.panel{padding:6px 9px}.touch[data-visible=true]{display:block}.touch{position:absolute;inset:0;z-index:4;pointer-events:none}.stick{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;border:1px solid rgba(127,227,255,.34);background:#080e1880;pointer-events:auto;touch-action:none}.stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#7fe3ff57;border:1px solid rgba(127,227,255,.7)}.touch-buttons{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,auto);gap:8px;justify-items:end}.tbtn{appearance:none;pointer-events:auto;touch-action:none;border-radius:16px;border:1px solid rgba(127,227,255,.45);background:#0a121eb8;color:var(--ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px}.tbtn--big{grid-column:span 2;width:100%;padding:20px 12px;font-size:13px;color:#041018;background:#7fe3ffdb}.tbtn--mid{grid-column:span 2;width:100%}.tbtn--small{min-width:74px}.tbtn[data-held=true]{background:#ffc978d1;color:#1a0f00}}@media(max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hud-bottom{flex-wrap:wrap}.panel--keys{order:-1}}@media(prefers-reduced-motion:reduce){.speedfx{background:radial-gradient(ellipse at center,#0000 40%,#020409b3)}.toast,.warn,.prograde,.speedfx{transition:none}}