:root{--bg: #101418;--panel: #1a2028;--ink: #f2f5f8;--muted: #8fa0b0;--accent: #4cc2ff;--good: #3ddc84;--bad: #ff5c5c;--gold: #ffc94d;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;justify-content:center}#app{width:min(720px,100vw);padding:24px 16px;text-align:center}h1{font-size:2.4rem;margin:8px 0 4px}.tagline{color:var(--muted);margin-bottom:28px}button{font:inherit;cursor:pointer;border:none;border-radius:12px;padding:14px 28px;background:var(--accent);color:#06202e;font-size:1.2rem;font-weight:700}button:hover{filter:brightness(1.1)}button.secondary{background:var(--panel);color:var(--ink)}.picker-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}.picker-row button{padding:10px 18px;font-size:1rem}.picker-row button.selected{outline:3px solid var(--gold)}.picker-label{color:var(--muted);font-size:.9rem;margin-top:20px;text-transform:uppercase;letter-spacing:.1em}.hud{display:flex;justify-content:space-between;align-items:baseline;font-size:1.3rem;font-weight:700;padding:8px 4px}.hud .timer{color:var(--gold);font-variant-numeric:tabular-nums}.hud .streak{color:var(--accent)}.hud .quit{padding:4px 12px;font-size:.9rem}#staff-box{background:#fdfcf7;border-radius:16px;padding:20px 0 8px;margin:12px 0;min-height:180px;display:flex;justify-content:center;align-items:center;transition:box-shadow .15s}#staff-box.flash-good{box-shadow:0 0 0 6px var(--good)}#staff-box.flash-bad{box-shadow:0 0 0 6px var(--bad)}#staff-box svg{max-width:100%;height:auto}.hint{min-height:2rem;font-size:1.4rem;font-weight:700;color:var(--gold)}.subtle{color:var(--muted);font-size:.95rem}.mic-meter{display:flex;align-items:center;gap:12px;margin:6px 4px 0}.mic-bar{flex:1;height:14px;background:var(--panel);border-radius:8px;overflow:hidden}.mic-bar-fill{height:100%;width:0%;background:var(--muted);border-radius:8px;transition:width .06s linear,background .1s}.mic-bar-fill.hot{background:var(--good)}.mic-label{color:var(--muted);font-size:.9rem;min-width:11ch;text-align:left;font-variant-numeric:tabular-nums}.piano-wrap{margin:14px auto 0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;text-align:center}.piano{display:inline-block;touch-action:manipulation;-webkit-user-select:none;user-select:none}.big-score{font-size:4rem;font-weight:800;margin:12px 0 0;color:var(--gold)}.stat-row{display:flex;justify-content:center;gap:32px;margin:18px 0 26px}.stat-row .stat b{display:block;font-size:1.6rem}.stat-row .stat{color:var(--muted)}.pb{color:var(--good);font-weight:700;font-size:1.2rem}.submit-row{display:flex;gap:10px;justify-content:center;margin:24px 0 6px;flex-wrap:wrap}.name-input{font:inherit;padding:12px 16px;border-radius:12px;border:2px solid var(--panel);background:var(--panel);color:var(--ink);font-size:1.1rem;width:200px;max-width:60vw}.name-input:focus{outline:none;border-color:var(--accent)}.submit-row button{font-size:1rem;padding:12px 20px}.board-wrap{margin:14px auto 0;max-width:420px}ol.board{list-style:none;margin:0;padding:0;text-align:left}ol.board li{display:flex;align-items:baseline;gap:12px;padding:9px 14px;border-radius:10px;background:var(--panel);margin-bottom:6px}ol.board li.me{outline:2px solid var(--gold)}ol.board .rank{color:var(--muted);width:2ch;text-align:right;font-variant-numeric:tabular-nums}ol.board .who{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ol.board .pts{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}