*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0c09;--cream:#f8f2e8;--cream-dim:#c9c0b2;--mint:#6edc82;--bronze:#4b4438;--bronze-light:#7d7160;--red:#e6483c;--pale-green:#c8ffd4;--ff:"Inter", system-ui, -apple-system, sans-serif}html,body{background:var(--bg);width:100%;height:100%;font-family:var(--ff);-webkit-user-select:none;user-select:none;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#game-canvas{width:100%;height:100%;display:block}.hidden{display:none!important}#hud{z-index:5;pointer-events:none;padding:18px 26px 0;position:absolute;top:0;left:0;right:0}#progress-bar{background:#f8f2e81f;border-radius:99px;height:6px;margin-bottom:14px;position:relative;overflow:visible}#progress-fill{background:linear-gradient(90deg, var(--mint), #9df0ac);border-radius:99px;width:0%;height:100%;transition:width 80ms linear;box-shadow:0 0 10px #6edc8299}#progress-drop{background:var(--pale-green);width:2px;height:12px;position:absolute;top:-3px;left:70%;box-shadow:0 0 8px #c8ffd4e6}#progress-drop span{letter-spacing:.08em;color:var(--pale-green);white-space:nowrap;font-size:.6rem;font-weight:700;position:absolute;top:-18px;left:50%;transform:translate(-50%)}#hud-row{justify-content:space-between;align-items:flex-start;display:flex}#score{color:var(--cream);letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px #0009;font-size:2.1rem;font-weight:800;line-height:1.05}#combo{color:var(--mint);text-shadow:0 0 12px #6edc8280;height:1.2em;font-size:.95rem;font-weight:600}#multiplier-block{background:#f8f2e814;border:1px solid #f8f2e826;border-radius:8px;padding:.4rem .85rem}#multiplier{color:var(--pale-green);font-size:1.1rem;font-weight:800}#health-bar{background:#f8f2e81a;border-radius:99px;width:220px;height:8px;margin-top:10px;overflow:hidden}#health-fill{background:linear-gradient(90deg, #489458, var(--mint));width:100%;height:100%;transition:width .15s,background .2s}#health-fill.low{background:linear-gradient(90deg, #8a2a20, var(--red));box-shadow:0 0 10px #e6483c99}#judgment-popups{pointer-events:none;width:0;height:0;position:absolute;top:44%;left:50%}.judgment-popup{letter-spacing:.06em;color:var(--cream);opacity:0;white-space:nowrap;text-shadow:0 2px 10px #000000b3;font-size:1.3rem;font-weight:800;transition:transform .22s cubic-bezier(.2,1.4,.4,1),opacity .22s,top .55s;position:absolute;top:0;left:0;transform:translate(-50%)scale(.7)}.judgment-popup.pop{opacity:1;top:-20px;transform:translate(-50%,-30px)scale(1)}.judgment-miss{color:var(--red)!important}#fret-rail{z-index:5;gap:14px;display:flex;position:absolute;bottom:26px;left:50%;transform:translate(-50%)}.fret-btn{border:2px solid color-mix(in srgb, var(--fret-color) 55%, transparent);background:color-mix(in srgb, var(--fret-color) 16%, #17130e);width:54px;height:54px;color:var(--fret-color);line-height:1;font-family:var(--ff);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1.3rem;font-weight:800;transition:transform 80ms,box-shadow .12s,background .12s;display:flex;position:relative;box-shadow:0 0 #0000}.fret-btn:active{background:color-mix(in srgb, var(--fret-color) 55%, #17130e);box-shadow:0 0 22px color-mix(in srgb, var(--fret-color) 70%, transparent);transform:scale(.9)}@keyframes fretHitGreat{0%{transform:scale(1);box-shadow:0 0 #0000}35%{box-shadow:0 0 24px color-mix(in srgb, var(--fret-color) 80%, transparent);transform:scale(1.22)}to{transform:scale(1);box-shadow:0 0 #0000}}@keyframes fretHitPerfect{0%{filter:brightness()saturate();transform:scale(1);box-shadow:0 0 #0000}25%{box-shadow:0 0 46px color-mix(in srgb, var(--fret-color) 90%, white 25%);filter:brightness(1.8)saturate(1.4);transform:scale(1.45)}to{filter:brightness()saturate();transform:scale(1);box-shadow:0 0 #0000}}@keyframes fretPerfectRing{0%{opacity:.9;border-width:3px;transform:scale(.75)}to{opacity:0;border-width:1px;transform:scale(2.4)}}.fret-btn.hit-great{animation:.3s ease-out fretHitGreat}.fret-btn.hit-perfect{animation:.42s cubic-bezier(.2,1.6,.4,1) fretHitPerfect}.fret-btn.hit-perfect:after{content:"";border:3px solid var(--fret-color);pointer-events:none;border-radius:50%;animation:.42s ease-out fretPerfectRing;position:absolute;inset:-2px}.overlay{text-align:center;z-index:10;background:radial-gradient(at 50% 40%,#14372059 0%,#0f0c09eb 70%);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;transition:opacity .5s;display:flex;position:absolute;inset:0}.overlay.fade{opacity:0;pointer-events:none}.eyebrow{letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim);font-size:.7rem;font-weight:700}.eyebrow-glow{color:var(--mint);text-shadow:0 0 16px #6edc82b3}.eyebrow-bad{color:var(--red);text-shadow:0 0 16px #e6483c99}.overlay h1{letter-spacing:-.02em;color:var(--cream);text-shadow:0 6px 24px #0009;font-size:clamp(2.4rem,8vw,4.4rem);font-weight:900}#victory-banner h1{color:var(--mint);text-shadow:0 0 30px #6edc828c,0 6px 24px #0009}#fail-screen h1{color:var(--red);text-shadow:0 0 30px #e6483c80}#track-picker{flex-wrap:wrap;justify-content:center;gap:10px;max-width:560px;margin:2px 0 4px;display:flex}.track-card{width:168px;box-shadow:none;cursor:pointer;background:#f8f2e80d;border:2px solid #f8f2e824;border-radius:12px;flex-direction:column;align-items:center;gap:3px;padding:12px 10px;transition:border-color .12s,background .12s,transform 80ms;display:flex;transform:none}.track-card:active{transform:scale(.97)}.track-card.selected{border-color:var(--mint);background:#6edc821f;box-shadow:0 0 18px #6edc8240}.track-title{color:var(--cream);letter-spacing:-.01em;text-align:center;font-size:.9rem;font-weight:700}.track-card.selected .track-title{color:var(--mint)}.track-artist{color:var(--cream-dim);text-align:center;font-size:.72rem;font-weight:500;line-height:1.3}.sub{color:var(--cream-dim);max-width:420px;font-size:1rem;line-height:1.6}.key-hints{gap:10px;margin:6px 0;display:flex}.key-chip{width:42px;height:42px;color:var(--fret-color);border:2px solid color-mix(in srgb, var(--fret-color) 55%, transparent);background:color-mix(in srgb, var(--fret-color) 14%, #17130e);border-radius:10px;justify-content:center;align-items:center;font-size:1.25rem;font-weight:800;line-height:1;display:flex}button{font-family:var(--ff);letter-spacing:.1em;border:2px solid var(--mint);background:linear-gradient(180deg, #86eb9a, var(--mint));color:#0b1a0f;cursor:pointer;border-radius:40px;margin-top:6px;padding:15px 40px;font-size:1.05rem;font-weight:800;transition:transform 80ms,box-shadow 80ms,opacity .15s;box-shadow:0 6px #2c6e3a,0 10px 22px #00000080}button:active{transform:translateY(4px);box-shadow:0 2px #2c6e3a,0 4px 12px #00000080}button:disabled{opacity:.5;cursor:default;box-shadow:none;border-color:var(--bronze-light);background:var(--bronze);color:var(--cream-dim);transform:none}#fail-screen button{border-color:var(--red);background:linear-gradient(180deg, #f0776b, var(--red));color:#2a0a07;box-shadow:0 6px #7a231c,0 10px 22px #00000080}#fail-screen button:active{box-shadow:0 2px #7a231c,0 4px 12px #00000080}#loading-note{color:var(--cream-dim);opacity:.7;font-size:.8rem}.results-stats{gap:2.5rem;margin:8px 0 4px;display:flex}.results-stats div{flex-direction:column;align-items:center;gap:2px;display:flex}.results-stats span{color:var(--cream);font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:800}.results-stats label{letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim);font-size:.7rem}#results-grade{color:var(--pale-green);text-shadow:0 0 34px #c8ffd48c;font-size:clamp(4rem,14vw,7rem)}@media (width<=640px){#health-bar{width:150px}#score{font-size:1.6rem}.fret-btn{width:46px;height:46px;font-size:.95rem}}