*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0d0d14;width:100%;height:100%;font-family:system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}#root{width:100%;height:100%}.settings-panel{opacity:0;background:#0d0d18d9;border:1px solid #ffffff14;border-radius:14px;width:100%;max-width:440px;max-height:0;margin-top:16px;padding:0;transition:max-height .3s,opacity .25s,padding .3s;overflow:hidden}.settings-panel--open{opacity:1;max-height:200px;padding:16px 20px}.settings-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.settings-title{color:#fff;font-size:15px;font-weight:600}.settings-close{color:#556;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:16px;transition:color .15s}.settings-close:hover{color:#fff}.settings-row{justify-content:space-between;align-items:center;padding:8px 0;display:flex}.settings-row+.settings-row{border-top:1px solid #ffffff0d}.settings-label{color:#999aaa;font-size:13px}.settings-speed-btns{gap:6px;display:flex}.speed-btn{color:#778;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:500;transition:all .15s}.speed-btn:hover{color:#aab;border-color:#4d96ff4d}.speed-btn--active{color:#4d96ff;background:#4d96ff26;border-color:#4d96ff80}.toggle-btn{cursor:pointer;background:#ffffff1a;border:none;border-radius:11px;width:40px;height:22px;padding:0;transition:background .2s;position:relative}.toggle-btn--on{background:#4d96ff80}.toggle-knob{pointer-events:none;background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}.toggle-btn--on .toggle-knob{transform:translate(18px)}.start-screen{background:#0d0d14;justify-content:center;align-items:center;min-height:100svh;padding:24px;display:flex}.start-card{text-align:center;width:100%;max-width:440px}.start-header{text-align:left;justify-content:space-between;align-items:flex-start;display:flex}.start-header>div{flex:1}.gear-btn{cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:10px;flex-shrink:0;width:40px;height:40px;margin-top:4px;font-size:20px;transition:all .2s}.gear-btn:hover{background:#ffffff1a;border-color:#ffffff26}.gear-btn--active{background:#4d96ff26;border-color:#4d96ff66}.start-title{letter-spacing:-1px;color:#fff;-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff);-webkit-background-clip:text;background-clip:text;margin:0 0 8px;font-family:system-ui,Segoe UI,sans-serif;font-size:52px;font-weight:700}.start-subtitle{color:#556;margin:0 0 40px;font-size:16px}.drop-zone{cursor:pointer;border:2px dashed #2e3040;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:48px 24px;transition:border-color .2s,background .2s;display:flex;position:relative}.drop-zone:hover,.drop-zone--active{background:#4d96ff0f;border-color:#4d96ff}.drop-zone__input{opacity:0;cursor:pointer;position:absolute;inset:0}.drop-zone__icon{color:#3a3a50;-webkit-user-select:none;user-select:none;font-size:48px;line-height:1}.drop-zone__text{color:#778;-webkit-user-select:none;user-select:none;margin:0;font-size:14px}.loading-box{flex-direction:column;align-items:center;gap:16px;padding:48px 24px;display:flex}.spinner{border:3px solid #2e3040;border-top-color:#4d96ff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#fff;margin:0;font-size:16px;font-weight:500}.loading-file{color:#556;margin:0;font-size:13px}.error-box{padding:32px 24px}.error-text{color:#ff6b6b;margin:0 0 20px;font-size:15px}.error-retry{color:#4d96ff;cursor:pointer;background:#4d96ff1a;border:1px solid #4d96ff;border-radius:8px;padding:8px 24px;font-size:14px;transition:background .2s}.error-retry:hover{background:#4d96ff33}.game-wrapper{background:#0d0d14;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:100svh;display:flex;position:relative}.game-canvas{aspect-ratio:480/720;border-radius:12px;max-width:100vw;max-height:100svh;display:block;box-shadow:0 0 60px #6464ff1f,0 0 120px #6464ff0f}.game-hint{color:#556;letter-spacing:1px;margin:0;font-family:system-ui,sans-serif;font-size:14px}.game-hint kbd{color:#999;background:#1a1a2e;border:1px solid #2e3040;border-radius:4px;padding:2px 8px;font-family:ui-monospace,Consolas,monospace;font-size:13px;display:inline-block}.song-done-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:#0d0d14e6;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;inset:0}.song-done-score{color:#ffd93d;letter-spacing:2px;margin:0;font-family:ui-monospace,Consolas,monospace;font-size:48px;font-weight:700}.song-done-label{color:#778;text-transform:uppercase;letter-spacing:2px;margin:0 0 4px;font-size:14px}.song-done-stats{color:#999;gap:20px;margin:4px 0 12px;font-family:system-ui,sans-serif;font-size:13px;display:flex}.song-done-stats span{align-items:center;gap:4px;display:flex}.leaderboard-rank-new{color:#ffd93d;margin:0 0 4px;font-family:system-ui,sans-serif;font-size:14px;font-weight:600;animation:1.2s ease-in-out infinite pulse-badge}@keyframes pulse-badge{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}.name-input{color:#fff;text-align:center;background:#ffffff0f;border:1px solid #ffffff26;border-radius:8px;outline:none;width:200px;padding:8px 14px;font-family:system-ui,sans-serif;font-size:15px;transition:border-color .2s}.name-input::placeholder{color:#556}.name-input:focus{border-color:#4d96ff}.song-done-btn{color:#4d96ff;cursor:pointer;background:#4d96ff1f;border:1px solid #4d96ff;border-radius:8px;padding:10px 32px;font-family:system-ui,sans-serif;font-size:15px;transition:background .2s}.song-done-btn:hover{background:#4d96ff40}.countdown-overlay{z-index:10;pointer-events:none;background:#0d0d1480;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown-number{text-shadow:0 0 30px,0 0 60px;font-family:system-ui,Segoe UI,sans-serif;font-size:96px;font-weight:800;line-height:1}.countdown-sub{color:#556;margin-top:12px;font-family:system-ui,sans-serif;font-size:14px}.pause-title{color:#fff;letter-spacing:1px;margin:0 0 16px;font-family:system-ui,sans-serif;font-size:28px;font-weight:700}.pause-actions{flex-direction:column;align-items:center;gap:10px;margin-bottom:16px;display:flex}.pause-hint{color:#556;margin:0;font-family:system-ui,sans-serif;font-size:13px}.pause-hint kbd{color:#999;background:#1a1a2e;border:1px solid #2e3040;border-radius:4px;padding:2px 8px;font-family:ui-monospace,Consolas,monospace;font-size:12px;display:inline-block}.leaderboard-title{color:#fff;letter-spacing:1px;margin:0 0 16px;font-family:system-ui,sans-serif;font-size:20px;font-weight:700}.leaderboard-list{flex-direction:column;gap:4px;width:300px;max-height:340px;margin-bottom:16px;display:flex;overflow-y:auto}.leaderboard-empty{text-align:center;color:#556;padding:20px 0;font-family:system-ui,sans-serif;font-size:14px}.leaderboard-row{background:#ffffff0a;border-radius:8px;align-items:center;gap:10px;padding:8px 12px;font-family:system-ui,sans-serif;font-size:14px;transition:background .2s;display:flex}.leaderboard-row:hover{background:#ffffff12}.leaderboard-row--current{background:#4d96ff26;border:1px solid #4d96ff59;box-shadow:0 0 12px #4d96ff26}.leaderboard-rank{color:#778;text-align:left;flex-shrink:0;width:28px;font-weight:700}.leaderboard-row:first-child .leaderboard-rank{color:#ffd93d}.leaderboard-row:nth-child(2) .leaderboard-rank{color:silver}.leaderboard-row:nth-child(3) .leaderboard-rank{color:#cd7f32}.leaderboard-name{color:#ccc;white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.leaderboard-row--current .leaderboard-name{color:#fff;font-weight:600}.leaderboard-score{color:#ffd93d;flex-shrink:0;font-family:ui-monospace,Consolas,monospace;font-weight:600}.leaderboard-acc{text-align:right;color:#778;flex-shrink:0;width:38px;font-size:12px}