: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(--accent);z-index:10;pointer-events:none;letter-spacing:.12em;font-variant-numeric:tabular-nums;text-shadow:0 0 12px #a78bfa4d;font-size:.85rem;font-weight:500;transition:transform .1s ease-out,color .2s;position:fixed;top:52px;left:50%;transform:translate(-50%)}.combo.pulse{color:var(--text);text-shadow:0 0 20px #a78bfa80;transform:translate(-50%)scale(1.3)}.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:linear-gradient(90deg, var(--accent), #60a5fa);opacity:.4;z-index:10;height:3px;transition:width .3s linear;position:fixed;bottom:0;left:0;box-shadow:0 0 8px #a78bfa4d}.hit-effect{pointer-events:none;z-index:20;letter-spacing:.1em;text-shadow:0 0 20px,0 2px 8px #00000080;font-size:1.4rem;font-weight:600;animation:.8s cubic-bezier(.2,0,0,1) forwards hitBounce;position:fixed}@keyframes hitBounce{0%{opacity:1;transform:translate(-50%)scale(.3)}15%{opacity:1;transform:translate(-50%)scale(1.4)}30%{transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-80px)scale(.8)}}.combo-milestone{z-index:25;pointer-events:none;flex-direction:column;align-items:center;animation:1.5s cubic-bezier(.2,0,0,1) forwards milestoneFlash;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.combo-milestone-value{color:var(--accent);text-shadow:0 0 40px #a78bfa80;font-size:4rem;font-weight:200;line-height:1}.combo-milestone-label{letter-spacing:.3em;color:var(--text-secondary);margin-top:4px;font-size:.9rem;font-weight:500}@keyframes milestoneFlash{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}10%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}25%{transform:translate(-50%,-50%)scale(1)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(1.05)}}.song-info{z-index:10;pointer-events:none;flex-direction:column;gap:2px;display:flex;position:fixed;bottom:16px;left:16px}.song-name{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-size:.65rem;overflow:hidden}.song-diff{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;opacity:.6;font-size:.6rem}.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);-webkit-overflow-scrolling:touch;flex-direction:column;justify-content:center;align-items:center;padding:2rem 1rem;animation:.5s cubic-bezier(.2,0,0,1) fadeIn;display:flex;position:fixed;inset:0;overflow-y:auto}@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;width:44px;height:44px;transition:opacity var(--transition);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.2rem;line-height:1;display:flex;position:fixed;top:10px;right:10px}.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}.settings-btn{border:1px solid var(--border);width:40px;height:40px;color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed;bottom:20px;right:20px}.settings-btn:hover{border-color:var(--text-muted);color:var(--text-secondary)}.settings-overlay{-webkit-backdrop-filter:blur(6px);z-index:200;background:#08080a99;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.settings-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);width:300px;overflow:hidden;box-shadow:0 8px 32px #0006}.settings-header{border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);justify-content:space-between;align-items:center;padding:14px 18px;font-size:.8rem;font-weight:500;display:flex}.settings-close{color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:.85rem}.settings-close:hover{background:var(--surface);color:var(--text)}.settings-body{flex-direction:column;gap:14px;padding:12px 18px;display:flex}.settings-row{justify-content:space-between;align-items:center;display:flex}.settings-label{color:var(--text-secondary);font-size:.8rem}.settings-toggle-group{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius);gap:2px;padding:3px;display:flex}.settings-toggle{color:var(--text-muted);border-radius:calc(var(--radius) - 3px);cursor:pointer;transition:all var(--transition);background:0 0;border:none;padding:5px 14px;font-size:.75rem;font-weight:400}.settings-toggle:hover{color:var(--text-secondary)}.settings-toggle.active{background:var(--bg);color:var(--text);box-shadow:0 1px 3px #0000004d}.settings-switch{background:var(--border);cursor:pointer;width:40px;height:22px;transition:background var(--transition);border:none;border-radius:11px;padding:0;position:relative}.settings-switch.on{background:var(--accent)}.settings-switch-thumb{background:var(--text);width:16px;height:16px;transition:transform var(--transition);border-radius:50%;display:block;position:absolute;top:3px;left:3px}.settings-switch.on .settings-switch-thumb{transform:translate(18px)}.dev-toggle-btn{z-index:10;border:1px solid var(--border);width:40px;height:40px;color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:#ffffff0f;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;display:flex;position:fixed;bottom:14px;right:14px}.dev-toggle-btn:hover{border-color:var(--text-muted);background:#ffffff1a}.dev-toggle-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.game-screen.dev-split{display:flex}.game-screen.dev-split .game-area{flex:1;position:relative;overflow:hidden}.game-screen.dev-split .game-area canvas{width:100%;height:100%}.game-screen.dev-split .score,.game-screen.dev-split .combo,.game-screen.dev-split .time-remaining,.game-screen.dev-split .progress-bar{position:absolute}.game-screen.dev-split .progress-bar{position:absolute;bottom:0;left:0}.dev-dashboard{background:var(--bg-elevated);border-left:1px solid var(--border);flex-direction:column;width:340px;min-width:300px;height:100dvh;font-size:.75rem;display:flex;overflow:hidden}.dev-header{border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.dev-title{color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;font-size:.7rem;font-weight:500}.dev-close{color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:.85rem}.dev-close:hover{background:var(--surface);color:var(--text)}.dev-scroll{flex-direction:column;flex:1;gap:12px;padding:8px 14px;display:flex;overflow-y:auto}.dev-section{flex-direction:column;gap:6px;display:flex}.dev-section-title{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border-subtle);margin:0;padding-bottom:4px;font-size:.65rem;font-weight:500}.dev-grid{grid-template-columns:1fr 1fr;gap:4px 12px;display:grid}.dev-stat{justify-content:space-between;align-items:baseline;padding:2px 0;display:flex}.dev-stat-label{color:var(--text-muted);font-size:.7rem}.dev-stat-value{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:400}.dev-stat-value.accent{color:var(--accent)}.dev-stat-value.acc-perfect{color:var(--text)}.dev-stat-value.acc-good{color:var(--text-secondary)}.dev-stat-value.acc-warn{color:#ef4444}.dev-stat-value.warn{color:#f59e0b}.dev-canvas{background:#00000040;border-radius:6px;width:100%;height:100px;display:block}.dev-canvas-tall{height:160px}.db-meter{flex-direction:column;gap:6px;display:flex}.db-bar-track{background:var(--border-subtle);border-radius:4px;width:100%;height:8px;overflow:hidden}.db-bar-fill{border-radius:4px;height:100%;transition:width 50ms linear}.db-bar-fill.db-green{background:#34d399}.db-bar-fill.db-yellow{background:#fbbf24}.db-bar-fill.db-red{background:#ef4444}.db-labels{justify-content:space-between;align-items:baseline;display:flex}.db-value{font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:500}.db-value.db-green{color:#34d399}.db-value.db-yellow{color:#fbbf24}.db-value.db-red{color:#ef4444}.db-peak{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.65rem}.centroid-display{flex-direction:column;gap:4px;display:flex}.centroid-bar-track{background:var(--border-subtle);border-radius:3px;width:100%;height:6px;position:relative;overflow:visible}.centroid-bar-fill{background:linear-gradient(90deg,#6366f1,#a78bfa,#f472b6);border-radius:3px;height:100%;transition:width .1s}.centroid-marker{background:var(--text);border-radius:1px;width:2px;height:12px;transition:left .1s;position:absolute;top:-3px;transform:translate(-1px)}.centroid-labels{color:var(--text-muted);justify-content:space-between;align-items:baseline;font-size:.6rem;display:flex}.centroid-value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:500}@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}}