:root{--bg:#fff;--ink:#111827;--muted:#6b7280;--accent:#e11d48;--accent-2:#2563eb;--purple:#7c3aed;--green:#16a34a;--panel:#ffffffd9}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;padding:0}html,body,#app{width:100%;height:100%;color:var(--ink);text-transform:lowercase;background:#fff;font-family:Cascadia Code,Cascadia Mono,ui-monospace,monospace;overflow:hidden}#game{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block}#overlay{pointer-events:none;z-index:2;position:fixed;inset:0}#overlay .screen{pointer-events:auto;background:#ffffffe0;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;padding:2rem;display:flex;position:absolute;inset:0}#overlay .brand{letter-spacing:-.02em;color:#000;padding:.12em .08em .2em;font-size:clamp(3rem,12vw,5.5rem);font-weight:600;line-height:1.15;animation:.7s ease-out both brand-in;overflow:visible}#overlay .tag{text-align:center;max-width:22rem;color:var(--muted);font-size:.95rem;line-height:1.45;animation:.6s ease-out .1s both fade-up}#overlay .actions{flex-wrap:wrap;justify-content:center;gap:.75rem;animation:.6s ease-out .2s both fade-up;display:flex}#overlay .progress{pointer-events:none;flex-direction:column;gap:.35rem;padding:.65rem 1rem 0;display:flex;position:absolute;top:0;left:0;right:0}#overlay .esc-hint{pointer-events:auto;color:var(--muted);font:inherit;letter-spacing:.04em;cursor:pointer;opacity:.7;background:0 0;border:none;padding:.35rem .45rem;font-size:.85rem;position:absolute;bottom:1rem;left:1rem}#overlay .esc-hint:hover{opacity:1;color:var(--ink)}#overlay .pause-screen{background:#ffffffc7}#overlay .pause-title{font-size:clamp(2.2rem,8vw,3.5rem)}#overlay .countdown-overlay{pointer-events:none;background:#fff;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#overlay .countdown-num{letter-spacing:-.04em;color:#000;text-transform:lowercase;font-size:clamp(4.5rem,22vw,8rem);font-weight:700;line-height:1;animation:.45s ease-out both countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(.65)}55%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}#overlay .progress-track{background:#e5e7eb;border-radius:2px;height:3px;overflow:hidden}#overlay .progress-fill{background:#000;border-radius:2px;width:0%;height:100%;transition:width .12s linear}#overlay .accuracy{letter-spacing:-.04em;margin:.35rem 0 .75rem;font-size:clamp(2.4rem,8vw,3.6rem);font-weight:700;line-height:1}#overlay .accuracy-label{letter-spacing:0;color:var(--muted);font-size:.45em;font-weight:500}#overlay .grades{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:.55rem 1rem;margin-bottom:.5rem;font-size:.85rem;display:flex}#overlay .grades .g-perfect{color:var(--green)}#overlay .grades .g-great{color:var(--accent-2)}#overlay .grades .g-good{color:#ca8a04}#overlay .grades .g-miss{color:var(--accent)}#overlay button,#overlay .ghost{appearance:none;border:2px solid var(--ink);background:var(--ink);color:var(--bg);font:inherit;cursor:pointer;text-transform:lowercase;padding:.7rem 1.2rem;font-size:1rem;transition:transform .15s,background .15s,color .15s}#overlay button:hover{transform:translateY(-2px)}#overlay button.secondary{color:var(--ink);background:0 0}#overlay button:disabled{opacity:.45;cursor:not-allowed;transform:none}#overlay input:not([type=range]){appearance:none;border:2px solid var(--muted);background:var(--panel);color:var(--ink);font:inherit;text-align:center;text-transform:none;outline:none;width:min(16rem,80vw);padding:.7rem 1rem;font-size:1rem}#overlay #join-code{text-transform:lowercase}#overlay #player-name,#overlay .lobby-players,#overlay .tag strong{text-transform:none}#overlay input:not([type=range]):focus{border-color:var(--ink)}#overlay .hint{min-height:1.1em;color:var(--accent);text-align:center;margin-top:-.65rem;font-size:.8rem}#overlay .menu-screen{justify-content:flex-start;padding-top:1.5rem;padding-bottom:2rem;overflow-y:auto}#overlay .leaderboard{text-align:left;width:min(22rem,90vw);margin-top:.75rem}#overlay .leaderboard-title{letter-spacing:.04em;margin-bottom:.55rem;font-size:.95rem;font-weight:700}#overlay .leaderboard-list{scrollbar-width:none;-ms-overflow-style:none;border-top:1px solid #e5e7eb;max-height:min(40vh,18rem);overflow-y:auto}#overlay .leaderboard-list::-webkit-scrollbar{width:0;height:0;display:none}#overlay .leaderboard-row{border-bottom:1px solid #f3f4f6;grid-template-columns:2rem 1fr 2.4rem 3.4rem;align-items:center;gap:.35rem;padding:.35rem .15rem;font-size:.82rem;display:grid}#overlay .lb-rank{color:var(--muted);font-variant-numeric:tabular-nums}#overlay .lb-name{text-overflow:ellipsis;white-space:nowrap;text-transform:none;overflow:hidden}#overlay .lb-mode{color:var(--muted);text-align:center;font-size:.72rem}#overlay .lb-acc{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}#overlay .leaderboard-empty{color:var(--muted);padding:.65rem .1rem;font-size:.82rem}#overlay .lobby-players{flex-direction:column;gap:.2rem;display:flex}#overlay .room-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem;display:flex}#overlay .copy-btn{padding:.35rem .7rem;font-size:.85rem}#overlay .room-code{letter-spacing:.08em;text-transform:none;font-size:1.15rem}#overlay .peer-board{flex-direction:column;gap:.85rem;width:min(20rem,88vw);margin-top:.25rem;display:flex}#overlay .peer-card{text-align:center;border-top:1px solid #e5e7eb;padding-top:.75rem}#overlay .peer-board .peer-card:first-child{border-top:none;padding-top:0}#overlay .peer-name{color:var(--muted);text-transform:none;margin-bottom:.35rem;font-size:.9rem}#overlay .peer-card .accuracy{margin:.15rem 0 .4rem;font-size:clamp(1.4rem,5vw,2rem)}#overlay .peer-card .grades{font-size:.8rem}#overlay .rematch-wait{color:var(--muted);min-height:1.2em}#overlay .rematch-wait[hidden]{display:none}#overlay .meta{color:var(--muted);text-align:center;font-size:.85rem}#overlay .result{font-size:clamp(1.8rem,6vw,2.6rem);font-weight:600}#overlay .result.win{color:var(--accent-2)}#overlay .result.lose{color:var(--accent)}#overlay input,#overlay button{-webkit-user-select:none;user-select:none}@keyframes brand-in{0%{opacity:0;transform:translateY(18px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}