:root{--bg: #262626;--panel: #333;--accent: #00c9a7;--miss: #ff5f6d;--text: #eaeaea}*{box-sizing:border-box;font-family:system-ui,monospace}body{margin:0;background:var(--bg);color:var(--text);height:100vh;display:flex;align-items:center;justify-content:center}.game{width:900px;touch-action:none}.overlay{position:absolute;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10}.overlay.hidden{display:none}.overlay-text{font-size:24px;text-align:center;color:#fff;padding:20px}.hud{display:flex;justify-content:space-between;margin-bottom:20px;font-size:24px;font-weight:700;color:#ffeb3b}#combo{text-shadow:1px 1px 2px #000;transition:transform .2s ease,opacity .2s ease;pointer-events:none}.bar{position:relative;height:22px;background:#1e1e1e;border-radius:12px;overflow:hidden;margin-bottom:20px}.slider{position:absolute;top:0;bottom:0;width:24px;background:#fff;transform:translate(var(--tx, 0)) scale(var(--scale, 1));transform-origin:center}@keyframes sliderRedBlink{0%,to{background-color:#fff;--scale: 1;box-shadow:0 0 #ff3b3b00}50%{background-color:#ff3b3b;--scale: 1.3;box-shadow:0 0 12px #ff3b3bcc}}.slider.blink{animation:sliderRedBlink .2s ease-in-out 3}.columns{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}.column{height:100px;background:var(--panel);border-radius:10px;position:relative;display:flex;align-items:center;justify-content:center;padding-bottom:10px;font-size:16px;opacity:.85;border-top:4px solid var(--panel)}@keyframes hitAnimation{0%,to{background:var(--panel)}50%{background:var(--accent)}}@keyframes missAnimation{0%,to{background:var(--panel)}50%{background:var(--miss)}}.column.hit{animation:hitAnimation .15s ease}.column.miss{animation:missAnimation .15s ease}.column.highlight{border-top:4px solid gold}