:root{--neon-pink: #ff3fb8;--neon-cyan: #55f2ff;--neon-orange: #ff8a2a;--ink: #0b0418}html,body{margin:0;padding:0;height:100%;background-color:var(--ink);overflow:hidden;font-family:Space Mono,ui-monospace,SF Mono,Menlo,monospace;color:#fff}#app{position:fixed;inset:0}#app canvas{display:block}.hud{position:absolute;inset:0;pointer-events:none}.hud-tint{position:absolute;inset:0;background:#24a;opacity:0}.hud-timer{position:absolute;bottom:28px;left:50%;transform:translate(-50%);font-size:34px;letter-spacing:2px;text-shadow:0 0 10px var(--neon-pink),0 0 2px #000}.hud-split{position:absolute;bottom:74px;left:50%;transform:translate(-50%);font-size:28px;font-weight:700;letter-spacing:2px;color:#ff4a5a;text-shadow:0 0 10px currentColor,0 0 2px #000;opacity:0;pointer-events:none}.hud-split[data-ahead="1"]{color:#3dff7a}.hud-split.show{animation:split-flash 1.5s ease-out forwards}@keyframes split-flash{0%{opacity:0}10%{opacity:1}75%{opacity:1}to{opacity:0}}.hud-ghost{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:12px;letter-spacing:3px;color:var(--neon-cyan);opacity:.7;white-space:nowrap}.hud-message b{font-size:22px;margin-top:10px;letter-spacing:2px}.hud-message b.ahead{color:#3dff7a}.hud-message b.behind{color:#ff4a5a}.hud-speed{position:absolute;right:32px;bottom:24px;font-size:46px;font-weight:700;color:var(--neon-orange);text-shadow:0 0 12px var(--neon-orange)}.hud-speed span{font-size:16px;margin-left:6px;color:#ffd2a8}.hud-hint{position:absolute;top:28px;left:50%;transform:translate(-50%);font-size:18px;letter-spacing:3px;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}.hud-coach{position:absolute;top:18%;left:50%;transform:translate(-50%);max-width:90vw;text-align:center;font-size:28px;font-weight:700;letter-spacing:4px;color:#fff;text-shadow:0 0 12px var(--neon-cyan),0 0 3px #000}.hud-coach[data-tone=good]{color:#6dff8a;text-shadow:0 0 12px #6dff8a,0 0 3px #000}.hud-coach[data-tone=bad]{color:var(--neon-pink);text-shadow:0 0 12px var(--neon-pink),0 0 3px #000}.hud-sound{position:absolute;top:58px;left:50%;transform:translate(-50%);font-size:14px;letter-spacing:3px;color:var(--neon-pink, #ff3fb8);text-shadow:0 0 8px currentColor;animation:hud-sound-pulse 1.2s ease-in-out infinite}@keyframes hud-sound-pulse{50%{opacity:.4}}.hud-message{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;font-size:72px;font-weight:700;letter-spacing:6px;text-shadow:0 0 18px currentColor,0 0 4px #000}.hud-message.finished{color:#6dff8a}.hud-message.wipedout{color:var(--neon-pink)}.hud-message small{font-size:30px;margin-top:12px;color:#fff}.hud-message em{font-style:normal;font-size:18px;margin-top:18px;letter-spacing:3px;color:#ddd}.hud-pause{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:#05020f99;font-size:72px;font-weight:700;letter-spacing:6px;color:var(--neon-cyan);text-shadow:0 0 18px currentColor,0 0 4px #000}.hud-pause em{font-style:normal;font-size:18px;margin-top:18px;letter-spacing:3px;color:#ddd;text-shadow:none}.hud-grade{position:absolute;top:30%;left:50%;transform:translate(-50%);font-size:40px;font-weight:700;letter-spacing:8px;color:#ffb98a;text-shadow:0 0 14px currentColor,0 0 3px #000;opacity:0;pointer-events:none}.hud-grade[data-grade=clean]{color:var(--neon-cyan)}.hud-grade.show{animation:grade-flash 1.1s ease-out forwards}@keyframes grade-flash{0%{opacity:0;transform:translate(-50%) scale(1.4)}12%{opacity:1;transform:translate(-50%) scale(1)}70%{opacity:1}to{opacity:0}}#app.in-menu .hud,#app.in-menu .hud-minimap{display:none}.menu{position:absolute;inset:0;z-index:10;background:linear-gradient(to right,#0b0418eb,#0b0418c7 42%,#0b041826);--menu-x: clamp(32px, 6.7vw, 96px);--menu-y: clamp(48px, 12.5vh, 112px)}.menu h1,.menu-item b{font-family:Chakra Petch,Space Mono,monospace;font-weight:700}.menu-title{position:absolute;left:var(--menu-x);top:clamp(40px,9.8vh,88px);display:flex;flex-direction:column;gap:16px}.menu h1{margin:0;font-size:clamp(56px,6.7vw,96px);line-height:.92;letter-spacing:-2px;color:#fff;text-shadow:0 0 28px rgba(255,63,184,.55)}.menu-tag{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:5px;color:var(--neon-cyan)}.menu-tag i{width:44px;height:2px;background:var(--neon-cyan)}.menu-nav{position:absolute;left:var(--menu-x);bottom:var(--menu-y);display:flex;flex-direction:column;gap:14px}.menu-item{display:flex;align-items:baseline;gap:22px;min-height:56px;text-decoration:none;color:#a898c0;cursor:pointer}.menu-item i{width:18px;height:18px;align-self:center;flex:none;clip-path:polygon(0 0,100% 50%,0 100%)}.menu-item b{font-size:clamp(30px,3vw,44px);letter-spacing:2px;line-height:1}.menu-item span{font-size:14px;letter-spacing:3px;color:#7f6f98;white-space:nowrap}.menu-item.selected{color:#fff}.menu-item.selected i{background:var(--neon-pink);box-shadow:0 0 14px var(--neon-pink)}.menu-item.selected span{color:#c9a8e8}.menu-status{position:absolute;right:var(--menu-x);bottom:var(--menu-y);display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-size:13px;letter-spacing:3px;color:#8f7fa8}.menu-status div{display:flex;align-items:center;gap:10px}.menu-status i{width:8px;height:8px;border-radius:50%;background:#4a3a66}.menu-status i.on{background:#3dff7a;box-shadow:0 0 8px #3dff7a}.menu-hint{position:absolute;left:var(--menu-x);bottom:56px;font-size:12px;letter-spacing:4px;color:#6a5a84}.mapping{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080214db;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.mapping h1{margin:0;font-size:54px;letter-spacing:10px;color:var(--neon-pink);text-shadow:0 0 20px var(--neon-pink)}.mapping h2{margin:6px 0 24px;font-weight:400;font-size:18px;letter-spacing:4px;color:var(--neon-cyan)}.mapping-list{width:min(640px,calc(100vw - 32px))}.mapping-head,.mapping-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;column-gap:12px;padding:9px 16px;margin:4px 0;border:1px solid #3a2a55;background:#28144699;cursor:pointer;font-size:17px}.mapping-head{padding-top:0;padding-bottom:4px;border:1px solid transparent;background:none;cursor:default;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--neon-cyan)}.mapping-row.selected{background:#461e6ecc}.mapping-row.listening{border-color:var(--neon-cyan);box-shadow:0 0 12px var(--neon-cyan)}.mapping-binding{color:#ffb98a}.mapping-hint{height:24px;margin-top:14px;color:var(--neon-cyan)}.mapping-footer{margin-top:8px;color:#9a8ab0}.mapping-pad{margin-top:18px;font-size:14px;color:#9a8ab0}.mapping-connect{margin-top:8px;padding:8px 18px;font:inherit;font-size:15px;letter-spacing:2px;color:var(--neon-cyan);background:#28144699;border:1px solid var(--neon-cyan);cursor:pointer}.mapping-connect:hover{box-shadow:0 0 12px var(--neon-cyan)}.hud-minimap{position:absolute;top:20px;right:20px;width:200px;height:200px;background:#0a04188c;border:1px solid rgba(85,242,255,.35);border-radius:10px;box-shadow:0 0 14px #55f2ff2e}@media(max-width:600px){.hud-minimap{width:130px;height:130px}}.hud-debug{position:absolute;left:12px;top:12px;max-width:60vw;font-size:12px;color:#b8ffcf;background:#0000008c;padding:4px 8px}.hud-debug:empty{display:none}