*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{color:#fff;overscroll-behavior:none;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-drag:none;background:#0a0a0a;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}.btn-primary{color:#fff;cursor:pointer;letter-spacing:.05em;background:#ffffff1a;border:1px solid #555;border-radius:8px;padding:10px 32px;font-size:.95rem;transition:all .2s}.btn-primary:hover{background:#fff3;border-color:#888}.btn-secondary{color:#888;cursor:pointer;letter-spacing:.05em;background:0 0;border:1px solid #333;border-radius:8px;padding:10px 32px;font-size:.95rem;transition:all .2s}.btn-secondary:hover{color:#fff;border-color:#666}.btn-ghost{color:#555;cursor:pointer;background:0 0;border:none;padding:8px 16px;font-size:.85rem;transition:color .2s}.btn-ghost:hover{color:#aaa}.start-screen{z-index:100;background:#0a0a0a;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.start-screen h1{letter-spacing:.3em;color:#fff;margin-bottom:1.5rem;font-size:2rem;font-weight:300}.difficulty-selector{gap:.5rem;margin-bottom:2rem;display:flex}.diff-btn{color:#555;cursor:pointer;letter-spacing:.05em;background:0 0;border:1px solid #222;border-radius:6px;padding:6px 20px;font-size:.85rem;transition:all .2s}.diff-btn:hover{color:#aaa;border-color:#444}.diff-btn.active{color:#fff;background:#ffffff0f;border-color:#888}.drop-zone{cursor:pointer;border:2px dashed #333;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;width:300px;height:180px;transition:all .3s;display:flex;position:relative;overflow:hidden}.drop-zone:hover,.drop-zone.dragover{background:#111;border-color:#555}.drop-zone svg{fill:#555;width:40px;height:40px}.drop-zone span{color:#555;font-size:.85rem}.file-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.file-name{color:#444;text-align:center;max-width:300px;margin-top:1rem;font-size:.8rem}.cached-section{flex-direction:column;align-items:center;gap:.5rem;margin-top:1.5rem;display:flex}.cached-btn{color:#ccc;cursor:pointer;letter-spacing:.05em;background:#ffffff14;border:1px solid #333;border-radius:8px;padding:10px 28px;font-size:.9rem;transition:all .2s}.cached-btn:hover:not(:disabled){color:#fff;background:#ffffff26;border-color:#555}.cached-btn:disabled{opacity:.5;cursor:not-allowed}.cached-clear{color:#444;cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:.75rem;transition:color .2s}.cached-clear:hover{color:#888}.countdown-screen{z-index:100;background:#0a0a0a;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.countdown-number{color:#fff;font-size:6rem;font-weight:100;animation:.7s ease-out countPulse}.countdown-hint{color:#555;letter-spacing:.3em;margin-top:1rem;font-size:1rem;font-weight:200}@keyframes countPulse{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.game-screen{position:fixed;inset:0}canvas{width:100%;height:100%;display:block}.score{letter-spacing:.2em;color:#fff;z-index:10;pointer-events:none;text-shadow:0 0 20px #ffffff4d;font-size:1.5rem;font-weight:200;transition:transform .1s ease-out;position:fixed;top:20px;left:50%;transform:translate(-50%)}.score.pulse{text-shadow:0 0 30px #fff9;transform:translate(-50%)scale(1.15)}.combo{color:#666;z-index:10;pointer-events:none;letter-spacing:.15em;font-size:.85rem;font-weight:300;transition:transform .1s ease-out,color .2s;position:fixed;top:55px;left:50%;transform:translate(-50%)}.combo.pulse{color:#fff;transform:translate(-50%)scale(1.3)}.time-remaining{color:#444;z-index:10;pointer-events:none;letter-spacing:.1em;font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:200;position:fixed;top:20px;right:20px}.progress-bar{opacity:.3;z-index:10;background:#fff;height:3px;transition:width .3s linear;position:fixed;bottom:0;left:0}.hit-effect{pointer-events:none;z-index:20;letter-spacing:.1em;text-shadow:0 0 12px;font-size:1.4rem;font-weight:400;animation:.7s ease-out forwards hitBounce;position:fixed}@keyframes hitBounce{0%{opacity:1;transform:translate(-50%)scale(.5)}15%{opacity:1;transform:translate(-50%)scale(1.3)}30%{transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-80px)scale(.8)}}.pause-overlay{z-index:50;background:#000000d9;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:none;position:fixed;inset:0}.pause-overlay.show{display:flex}.pause-overlay p{letter-spacing:.2em;color:#666;font-size:1.2rem;font-weight:200}.pause-actions{flex-direction:column;align-items:center;gap:.8rem;display:flex}.results-screen{z-index:100;background:#0a0a0a;flex-direction:column;justify-content:center;align-items:center;animation:.4s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.results-grade{letter-spacing:.1em;margin-bottom:.5rem;font-size:5rem;font-weight:100}.grade-S{color:#feca57;text-shadow:0 0 40px #feca5766}.grade-A{color:#48dbfb;text-shadow:0 0 30px #48dbfb4d}.grade-B{color:#00b894}.grade-C{color:#888}.grade-D{color:#666}.results-score{letter-spacing:.15em;color:#fff;margin-bottom:.3rem;font-size:2rem;font-weight:200}.results-song{color:#555;text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:300px;margin-bottom:2rem;font-size:.8rem;overflow:hidden}.results-grid{grid-template-columns:1fr 1fr;gap:.6rem 2rem;margin-bottom:2.5rem;display:grid}.results-item{justify-content:space-between;gap:1.5rem;font-size:.9rem;display:flex}.results-label{color:#555;font-weight:300}.results-value{color:#ccc;font-variant-numeric:tabular-nums;font-weight:400}.results-item.perfect .results-value{color:#fff}.results-item.great .results-value{color:#ccc}.results-item.good .results-value{color:#888}.results-item.miss .results-value{color:#555}.results-actions{flex-direction:column;align-items:center;gap:.8rem;display:flex}.pause-btn{z-index:10;color:#444;cursor:pointer;background:0 0;border:none;padding:8px;font-size:1.4rem;line-height:1;position:fixed;top:16px;right:16px}.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:"";pointer-events:none;background:#ffffff0a;border-left:1px solid #1a1a1a;position:absolute;inset:0}.touch-zone:first-child:after{border-left:none}.touch-zone:active{background:#ffffff14}@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{margin-bottom:1rem;font-size:1.4rem}.drop-zone{width:260px;height:150px}.difficulty-selector{margin-bottom:1.5rem}.results-grade{font-size:3.5rem}.results-score{font-size:1.5rem}}