:root{--bg:#08080a;--bg-elevated:#111114;--surface:#18181b;--border:#27272a;--border-subtle:#1c1c1f;--text:#fafafa;--text-secondary:#a1a1aa;--text-muted:#52525b;--accent:#a78bfa;--accent-dim:#a78bfa26;--radius:10px;--radius-lg:16px;--transition:.2s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background:var(--bg);color:var(--text);font-feature-settings:"cv02", "cv03", "cv04", "cv11";overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100dvh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overflow:hidden}.btn-primary{background:var(--text);color:var(--bg);border-radius:var(--radius);cursor:pointer;letter-spacing:.02em;transition:opacity var(--transition), transform var(--transition);border:none;padding:11px 36px;font-size:.875rem;font-weight:500}.btn-primary:hover{opacity:.9}.btn-primary:active{transform:scale(.97)}.btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius);cursor:pointer;letter-spacing:.02em;transition:all var(--transition);padding:11px 36px;font-size:.875rem;font-weight:400}.btn-secondary:hover{color:var(--text);border-color:#3f3f46}.btn-secondary:active{transform:scale(.97)}.btn-ghost{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:8px 16px;font-size:.8rem;font-weight:400}.btn-ghost:hover{color:var(--text-secondary)}.start-screen{z-index:100;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:2rem;display:flex;position:fixed;inset:0}.start-screen h1{letter-spacing:.35em;color:var(--text);text-transform:uppercase;font-size:1.75rem;font-weight:300}.difficulty-selector{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius);gap:4px;padding:4px;display:flex}.diff-btn{color:var(--text-muted);border-radius:calc(var(--radius) - 4px);cursor:pointer;letter-spacing:.04em;transition:all var(--transition);background:0 0;border:none;padding:7px 22px;font-size:.8rem;font-weight:400}.diff-btn:hover{color:var(--text-secondary)}.diff-btn.active{background:var(--bg);color:var(--text);box-shadow:0 1px 3px #0000004d}.drop-zone{border:1.5px dashed var(--border);border-radius:var(--radius-lg);cursor:pointer;width:300px;height:170px;transition:all var(--transition);background:var(--bg-elevated);flex-direction:column;justify-content:center;align-items:center;gap:.6rem;display:flex;position:relative;overflow:hidden}.drop-zone:hover,.drop-zone.dragover{border-color:var(--text-muted);background:var(--surface)}.drop-zone svg{width:32px;height:32px;fill:var(--text-muted);transition:fill var(--transition)}.drop-zone:hover svg,.drop-zone.dragover svg{fill:var(--text-secondary)}.drop-zone span{color:var(--text-muted);transition:color var(--transition);font-size:.8rem;font-weight:400}.drop-zone:hover span,.drop-zone.dragover span{color:var(--text-secondary)}.file-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.file-name{color:var(--text-muted);text-align:center;max-width:300px;min-height:1.2em;transition:color var(--transition);font-size:.75rem}.file-name:has(template:not(:empty)){color:var(--text-secondary)}.cached-section{flex-direction:column;align-items:center;gap:.4rem;display:flex}.cached-btn{background:var(--accent-dim);color:var(--accent);border-radius:var(--radius);cursor:pointer;letter-spacing:.03em;transition:all var(--transition);border:1px solid #a78bfa33;padding:10px 28px;font-size:.825rem;font-weight:400}.cached-btn:hover:not(:disabled){background:#a78bfa38;border-color:#a78bfa59}.cached-btn:disabled{opacity:.4;cursor:not-allowed}.cached-clear{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:4px 8px;font-size:.7rem}.cached-clear:hover{color:var(--text-secondary)}.load-progress{flex-direction:column;gap:8px;width:280px;display:flex}.load-progress-label{color:var(--text-muted);justify-content:space-between;font-size:.75rem;display:flex}.load-progress-pct{font-variant-numeric:tabular-nums}.load-progress-track{background:var(--border-subtle);border-radius:2px;width:100%;height:3px;overflow:hidden}.load-progress-fill{background:var(--accent);border-radius:2px;height:100%;transition:width .15s linear}.lang-toggle{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;letter-spacing:.04em;transition:all var(--transition);background:0 0;border-radius:6px;padding:5px 14px;font-size:.7rem;font-weight:400;position:fixed;bottom:20px;right:20px}.lang-toggle:hover{border-color:var(--text-muted);color:var(--text-secondary)}.countdown-screen{z-index:100;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;display:flex;position:fixed;inset:0}.countdown-number{color:var(--text);font-size:7rem;font-weight:200;line-height:1;animation:.7s cubic-bezier(.2,0,0,1) countPulse}.countdown-hint{color:var(--text-muted);letter-spacing:.4em;text-transform:uppercase;font-size:.75rem;font-weight:400}@keyframes countPulse{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.game-screen{position:fixed;inset:0}canvas{width:100%;height:100%;display:block}.score{letter-spacing:.15em;color:var(--text);z-index:10;pointer-events:none;font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:300;transition:transform .1s ease-out;position:fixed;top:20px;left:50%;transform:translate(-50%)}.score.pulse{transform:translate(-50%)scale(1.12)}.combo{color:var(--text-muted);z-index:10;pointer-events:none;letter-spacing:.12em;font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:400;transition:transform .1s ease-out,color .2s;position:fixed;top:52px;left:50%;transform:translate(-50%)}.combo.pulse{color:var(--text);transform:translate(-50%)scale(1.25)}.time-remaining{color:var(--text-muted);z-index:10;pointer-events:none;letter-spacing:.06em;font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:300;position:fixed;top:22px;right:20px}.progress-bar{background:var(--text);opacity:.2;z-index:10;height:2px;transition:width .3s linear;position:fixed;bottom:0;left:0}.hit-effect{pointer-events:none;z-index:20;letter-spacing:.08em;text-shadow:0 0 16px;font-size:1.2rem;font-weight:500;animation:.7s cubic-bezier(.2,0,0,1) forwards hitBounce;position:fixed}@keyframes hitBounce{0%{opacity:1;transform:translate(-50%)scale(.5)}20%{opacity:1;transform:translate(-50%)scale(1.2)}40%{transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-70px)scale(.85)}}.pause-overlay{-webkit-backdrop-filter:blur(16px);z-index:50;background:#08080ae0;flex-direction:column;justify-content:center;align-items:center;gap:2rem;display:none;position:fixed;inset:0}.pause-overlay.show{display:flex}.pause-overlay p{letter-spacing:.3em;color:var(--text-muted);text-transform:uppercase;font-size:1.1rem;font-weight:300}.pause-actions{flex-direction:column;align-items:center;gap:.6rem;display:flex}.results-screen{z-index:100;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;animation:.5s cubic-bezier(.2,0,0,1) fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.results-grade{letter-spacing:.05em;margin-bottom:.25rem;font-size:5rem;font-weight:200;line-height:1}.grade-S{color:#fbbf24;text-shadow:0 0 50px #fbbf244d}.grade-A{color:#60a5fa;text-shadow:0 0 40px #60a5fa40}.grade-B{color:#34d399}.grade-C{color:var(--text-secondary)}.grade-D{color:var(--text-muted)}.results-score{letter-spacing:.12em;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:.15rem;font-size:1.75rem;font-weight:300}.results-song{color:var(--text-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:300px;margin-bottom:2rem;font-size:.75rem;overflow:hidden}.results-grid{grid-template-columns:1fr 1fr;gap:.5rem 2.5rem;margin-bottom:2.5rem;display:grid}.results-item{justify-content:space-between;gap:2rem;font-size:.85rem;display:flex}.results-label{color:var(--text-muted);font-weight:400}.results-value{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-weight:400}.results-item.perfect .results-value{color:var(--text)}.results-item.great .results-value{color:var(--text-secondary)}.results-item.good .results-value{color:var(--text-muted)}.results-item.miss .results-value{color:#3f3f46}.results-actions{flex-direction:column;align-items:center;gap:.6rem;display:flex}.pause-btn{z-index:10;color:var(--text-muted);cursor:pointer;opacity:.6;transition:opacity var(--transition);background:0 0;border:none;padding:8px;font-size:1.2rem;line-height:1;position:fixed;top:14px;right:14px}.pause-btn:hover{opacity:1}.touch-zones{z-index:5;height:160px;display:none;position:fixed;bottom:0;left:0;right:0}.touch-zone{background:0 0;border:none;flex:1;position:relative;overflow:hidden}.touch-zone:after{content:"";border-left:1px solid var(--border-subtle);pointer-events:none;background:#ffffff05;position:absolute;inset:0}.touch-zone:first-child:after{border-left:none}.touch-zone:active{background:#ffffff0f}@media (hover:none) and (pointer:coarse){.touch-zones{display:flex}.pause-btn{display:block}}@media (hover:hover) and (pointer:fine){.pause-btn{display:none}}@media (width<=480px){.start-screen h1{font-size:1.3rem}.drop-zone{width:260px;height:145px}.results-grade{font-size:3.5rem}.results-score{font-size:1.4rem}.countdown-number{font-size:5.5rem}}