:root{color-scheme:dark;--bg: #12110f;--ink: #f2f0e8;--muted: #8a8578;--line: #2a2824;--gold: #e8c547;--font: "Manrope", sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%}body{overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none}#app{position:relative}#playfield{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:crosshair}.hud,.float{z-index:2}.panel{position:absolute;left:50%;top:50%;width:min(420px,calc(100% - 40px));transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:22px;z-index:4}.stat,.lives{opacity:0}body.playing .stat,body.playing .lives{opacity:1}.hud{pointer-events:none;position:absolute;inset:28px 32px auto;display:grid;grid-template-columns:1fr auto auto auto;align-items:baseline;gap:28px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:lowercase}.brand-wrap{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:auto}.brand{opacity:.55}.sound{border:none;background:none;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:lowercase;opacity:.45;cursor:pointer;padding:0}.sound:hover,.sound[aria-pressed=true]{opacity:.7}.sound[aria-pressed=false]{opacity:.35}.stat,.lives{color:var(--ink)}.lives{letter-spacing:.35em;color:var(--muted)}body.playing .lives{color:var(--ink)}.float{pointer-events:none;position:absolute;inset:0}.popup{position:absolute;transform:translate(-50%,-120%);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:lowercase;color:var(--ink);animation:rise .42s ease-out forwards}.popup.perfect{color:var(--gold)}.panel.hidden{display:none}.overlay{background:color-mix(in srgb,var(--bg) 88%,transparent);padding:36px 28px;border-radius:4px}.name{display:flex;flex-direction:column;gap:8px;width:100%;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:lowercase;color:var(--muted)}.name input{width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:500 22px/1.2 var(--font);padding:6px 0 10px;outline:none}.name input::placeholder{color:#4d4a43}.join-row{display:flex;align-items:center;gap:10px}.join-row input{min-width:0;flex:1}.join-paste{flex:none;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:lowercase;padding:6px 10px;cursor:pointer}.join-paste:hover{color:var(--ink);border-color:var(--ink)}.bpm-block{width:100%;text-align:center}.bpm-value{font-size:88px;font-weight:600;letter-spacing:-.06em;line-height:.9}.bpm-unit{display:inline-block;margin-left:10px;font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.18em;text-transform:lowercase;color:var(--muted);vertical-align:18px}input[type=range]{width:100%;margin:18px 0 10px;appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;margin-top:-6.5px;border-radius:50%;background:var(--ink)}input[type=range]::-moz-range-track{height:1px;background:var(--line)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--ink)}.presets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.presets button{border:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:6px 9px;cursor:pointer}.presets button.active,.presets button:hover{color:var(--ink);border-color:var(--ink)}.count{pointer-events:none;position:absolute;inset:0;display:grid;place-items:center;z-index:3;font-size:clamp(72px,18vw,160px);font-weight:600;letter-spacing:-.07em;line-height:1;text-transform:lowercase}.count.hidden{display:none}.rival{pointer-events:none;position:absolute;left:32px;top:76px;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:lowercase;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.lobby-status,.lobby-note{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:lowercase;text-align:center}.lobby-status{color:var(--ink)}.lobby-note{color:var(--muted);max-width:28ch}.play,.ghost{min-width:160px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:lowercase;padding:12px 20px;cursor:pointer}.play.hidden,.ghost.hidden{display:none}.ghost{background:transparent;color:var(--ink)}.play:hover,.ghost:hover{opacity:.82}.play:disabled{min-width:240px;opacity:.55;cursor:default}.play:disabled:hover{opacity:.55}.board{width:100%;margin-top:8px}.board-title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:lowercase;color:var(--muted);margin-bottom:12px}.board ol{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding-right:10px;margin-right:-36px}.board li{display:grid;grid-template-columns:36px 1fr auto;gap:12px;font-size:15px}.board .rank,.board .pts{font-family:var(--mono);font-size:12px;color:var(--muted)}.board .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board .empty{display:block;color:var(--muted);font-family:var(--mono);font-size:12px}.over-kicker,.over-meta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:lowercase;color:var(--muted)}.over-score{font-size:72px;font-weight:600;letter-spacing:-.05em;line-height:1}@keyframes rise{0%{opacity:1;transform:translate(-50%,-120%)}to{opacity:0;transform:translate(-50%,-180%)}}body.shake{animation:shake .18s ease-out}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}to{transform:translate(0)}}@media(max-width:640px){.hud{inset:18px 18px auto;gap:14px;font-size:12px}.bpm-value{font-size:64px}.over-score{font-size:56px}}