*{box-sizing:border-box}html,body{color:#f2f2f2;background:#07080c;height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0}canvas{outline:none;display:block}.debug{z-index:30;pointer-events:none;background:#0000008c;border-radius:6px;padding:8px 10px;font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;position:absolute;top:8px;left:8px}.debug pre{white-space:pre;margin:0 0 6px}:root{--gold:#ffd23f;--cyan:#4fd1ff;--orange:#ff8a3d;--red:#ff4d5e;--ink:#0b0d14}.hud{pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none;text-shadow:0 2px 8px #000000a6;position:absolute;inset:0}.hud-top{text-align:center;position:absolute;top:14px;left:50%;transform:translate(-50%)}.hud-title{letter-spacing:.22em;opacity:.85;text-transform:uppercase;font-size:13px;font-weight:800}.hud-score{font-variant-numeric:tabular-nums;margin-top:2px;font-size:20px;font-weight:700}.hud-grade{text-align:center;opacity:0;transition:opacity .25s;position:absolute;top:30%;left:50%;transform:translate(-50%,-50%)}.hud-grade.show{opacity:1}.hud-grade-text{letter-spacing:.04em;-webkit-text-stroke:1px #00000059;font-size:60px;font-style:italic;font-weight:900;line-height:1}.hud-grade-sub{letter-spacing:.06em;margin-top:6px;font-size:18px;font-weight:700}.hud-grade.pop .hud-grade-text{animation:.42s cubic-bezier(.2,1.6,.35,1) gradePop}@keyframes gradePop{0%{opacity:0;transform:scale(.4)skew(-8deg)}60%{opacity:1;transform:scale(1.15)skew(-8deg)}to{transform:scale(1)skew(-8deg)}}.hud-grade-text{transform:skew(-8deg)}.g-perfect .hud-grade-text{color:var(--gold);text-shadow:0 0 22px #ffbe28d9,0 0 60px #ff780099,0 3px #7a4b00}.g-good .hud-grade-text{color:var(--cyan);text-shadow:0 0 16px #3cbeff99,0 3px #0a3a5a}.g-early .hud-grade-text,.g-late .hud-grade-text{color:var(--orange);text-shadow:0 3px #5a2a08}.g-miss .hud-grade-text{color:#c9c9d1;text-shadow:0 3px #333}.hud-banner{letter-spacing:.12em;opacity:0;font-size:34px;font-weight:900;transition:opacity .3s;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.hud-banner.show{opacity:1}.hud-banner.pop{animation:.35s ease-out bannerPop}@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}.b-good{color:#7dff9b}.b-bad{color:var(--red)}.b-neutral{color:#fff}.hud-bl{position:absolute;bottom:20px;left:22px}.hud-speed{font-style:italic;font-weight:900}.hud-speed-val{font-variant-numeric:tabular-nums;font-size:46px}.hud-speed-unit{opacity:.8;margin-left:6px;font-size:16px}.hud-speed-label{letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:-4px;font-size:11px}.hud-streak{text-align:right;font-style:italic;font-weight:900;position:absolute;bottom:22px;right:22px}.hud-streak-label{letter-spacing:.25em;opacity:.7;margin-right:8px;font-size:12px}.hud-streak-val{font-variant-numeric:tabular-nums;font-size:42px}.hud-streak.hot .hud-streak-val{color:var(--orange)}.hud-streak.fire .hud-streak-val{color:var(--gold);text-shadow:0 0 18px #ff8c00e6}.hud-hint{opacity:.85;white-space:nowrap;text-shadow:none;background:#080a1073;border-radius:6px;padding:6px 12px;font-size:13px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.hud-hint kbd{text-align:center;background:#ffffff24;border:1px solid #ffffff40;border-radius:4px;min-width:18px;margin:0 2px;padding:1px 5px;font:600 11px/1.4 ui-monospace,Menlo,monospace;display:inline-block}.hud-msg{letter-spacing:.1em;opacity:0;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;background:#080a1080;border-radius:6px;max-width:92vw;padding:6px 14px;font-size:15px;font-weight:800;transition:opacity .3s;position:absolute;top:13%;left:50%;overflow:hidden;transform:translate(-50%)}.hud-msg.show{opacity:1}.hud-cam{letter-spacing:.2em;opacity:.45;font-size:11px;font-weight:700;position:absolute;top:16px;right:20px}.hud-cam.pulse{animation:.6s ease-out camPulse}@keyframes camPulse{0%{opacity:1;transform:scale(1.2)}to{opacity:.45;transform:scale(1)}}.crosshair{border:2px solid #ffffffbf;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #00000059}.crosshair:after{content:"";background:#fff;border-radius:50%;width:2px;height:2px;margin:-1px 0 0 -1px;position:absolute;top:50%;left:50%}.crosshair.active{border-color:var(--gold);transition:transform 80ms;transform:scale(1.25)}.fade{opacity:0;pointer-events:none;z-index:40;background:#000;transition:opacity .35s ease-out;position:absolute;inset:0}.fade.dip{opacity:.4}button{font:inherit;color:inherit;cursor:pointer}.menu{z-index:20;background:linear-gradient(90deg,#06080ef0 0%,#06080edb 46%,#06080e40 75%,#06080e00 100%);align-items:stretch;display:flex;position:absolute;inset:0}.menu-left{flex-direction:column;gap:10px;width:min(760px,100%);padding:34px 40px;display:flex;overflow-y:auto}.logo{letter-spacing:.02em;font-size:64px;font-style:italic;font-weight:900;line-height:.95;transform:skew(-6deg)}.logo span{color:#fff}.logo b{color:var(--gold);text-shadow:0 0 28px #ffaa1e73;margin-left:12px}.tagline{opacity:.7;letter-spacing:.04em;margin-bottom:8px;font-size:15px}.menu-h{letter-spacing:.22em;text-transform:uppercase;opacity:.65;margin-top:10px;font-size:12px;font-weight:800}.pos-row{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.pos-card{text-align:left;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;padding:10px 10px 8px;transition:transform .12s,border-color .12s,background .12s}.pos-card:hover{border-color:#ffffff59;transform:translateY(-2px)}.pos-card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:#ffd23f1f}.pos-short{font-size:26px;font-style:italic;font-weight:900;line-height:1}.pos-card.on .pos-short{color:var(--gold)}.pos-name{margin:2px 0 4px;font-size:12px;font-weight:700}.pos-blurb{opacity:.65;min-height:40px;font-size:10.5px;line-height:1.3}.stat{opacity:.85;align-items:center;gap:6px;margin-top:3px;font-size:9.5px;display:flex}.stat span{opacity:.7;width:40px}.stat i{background:linear-gradient(90deg,#4fd1ff,#7dff9b);border-radius:2px;height:4px;display:block}.pos-h{opacity:.55;margin-top:4px;font-size:10px}.mode-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.mode-card{text-align:left;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;padding:10px 12px;transition:transform .12s,border-color .12s;position:relative}.mode-card:hover{border-color:#ffffff59;transform:translateY(-2px)}.mode-card.on{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset;background:#4fd1ff1f}.mode-n{opacity:.25;font-size:18px;font-weight:900;position:absolute;top:8px;right:10px}.mode-t{font-size:15px;font-weight:800}.mode-b{opacity:.65;margin-top:3px;font-size:11px;line-height:1.3}.menu-bottom{align-items:center;gap:10px;margin-top:14px;display:flex}.cam-sel{gap:6px;margin-right:auto;display:flex}.chip{background:#ffffff0f;border:1px solid #ffffff2e;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600}.chip.on{border-color:var(--gold);color:var(--gold);background:#ffd23f29}.play-btn{color:#1a1205;letter-spacing:.08em;background:linear-gradient(#ffd23f,#ff9f1c);border:none;border-radius:10px;padding:12px 34px;font-size:20px;font-style:italic;font-weight:900;transition:transform .1s;box-shadow:0 6px 24px #ffa01459}.play-btn:hover{transform:translateY(-1px)scale(1.02)}.ghost-btn{background:#ffffff0f;border:1px solid #fff3;border-radius:10px;padding:11px 18px;font-weight:600}.ghost-btn:hover{border-color:#ffffff73}.controls{opacity:.6;margin-top:8px;font-size:11.5px;line-height:1.6}.controls b{opacity:1;color:#fff;font-weight:700}.pause,.settings{z-index:25;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04060a99;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.settings{z-index:26}.pause-box,.settings-box{background:#0e111af5;border:1px solid #ffffff1f;border-radius:14px;flex-direction:column;gap:10px;min-width:300px;padding:24px 28px;display:flex;box-shadow:0 20px 60px #00000080}.settings-box{min-width:520px}.pause-t{margin-bottom:6px;font-size:30px;font-style:italic;font-weight:900}.set-grid{gap:8px;display:grid}.set-row{grid-template-columns:170px 1fr 70px;align-items:center;gap:10px;font-size:13px;display:grid}.set-row .chip{grid-column:2/span 2;justify-self:start}.set-val{text-align:right;opacity:.75;font-variant-numeric:tabular-nums}.set-row input[type=range]{accent-color:#ffd23f;width:100%}@media (max-width:900px){.pos-row{grid-template-columns:repeat(3,1fr)}.mode-grid{grid-template-columns:repeat(2,1fr)}.logo{font-size:44px}.settings-box{width:92vw;min-width:0}.set-row{grid-template-columns:1fr 1fr 50px}}.letterbox{pointer-events:none;z-index:12;position:absolute;inset:0}.letterbox:before,.letterbox:after{content:"";background:#000;height:0;transition:height .35s;position:absolute;left:0;right:0}.letterbox:before{top:0}.letterbox:after{bottom:0}body.replaying .letterbox:before,body.replaying .letterbox:after{height:9vh}.replay-tag{z-index:13;letter-spacing:.2em;opacity:0;pointer-events:none;text-shadow:0 2px 8px #000000b3;font-size:18px;font-style:italic;font-weight:900;transition:opacity .3s;position:absolute;top:calc(9vh + 14px);left:28px}.replay-tag span{color:#ff3b4f;animation:1s steps(2,end) infinite blink}.replay-tag small{letter-spacing:.15em;opacity:.6;margin-left:10px;font-size:10px;font-style:normal;font-weight:600}body.replaying .replay-tag{opacity:1}body.replaying .hud{opacity:.25}@keyframes blink{50%{opacity:.2}}.ctx-lost{z-index:50;text-align:center;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:18px;display:flex;position:absolute;inset:0}.ctx-lost button{color:#111;background:#ffd23f;border:0;border-radius:8px;padding:10px 22px;font-weight:800}.load-ring{opacity:0;--p:0%;background:conic-gradient(var(--gold) var(--p), #ffffff1f 0);border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;transition:opacity .12s;position:absolute;top:50%;left:50%;-webkit-mask:radial-gradient(circle,#0000 13px,#000 14px);mask:radial-gradient(circle,#0000 13px,#000 14px)}.load-ring.full{background:conic-gradient(#ff8a3d 100%, transparent 0);filter:drop-shadow(0 0 6px #ff8c28e6)}.charge-ring{opacity:0;--p:0%;background:conic-gradient(from 180deg, #ffd23f, #ff8a3d var(--p), #ffffff1a 0);border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;transition:opacity .1s;position:absolute;top:50%;left:50%;-webkit-mask:radial-gradient(circle,#0000 21px,#000 22px 25px,#0000 26px);mask:radial-gradient(circle,#0000 21px,#000 22px 25px,#0000 26px)}.charge-ring.full{background:conic-gradient(#ff6a2a 100%, transparent 0);filter:drop-shadow(0 0 8px #ff7828f2);animation:.5s ease-in-out infinite alternate chargeFull}@keyframes chargeFull{0%{transform:scale(1)}to{transform:scale(1.08)}}.go-cue{letter-spacing:.2em;color:#6fe3ff;opacity:0;text-shadow:0 0 14px #50c8ffcc;font-size:22px;font-style:italic;font-weight:900;position:absolute;top:58%;left:50%;transform:translate(-50%)}.go-cue.show{animation:.7s ease-out goCue}@keyframes goCue{0%{opacity:0;transform:translate(-50%)scale(1.6)}20%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)scale(1)}}