@import "https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&display=swap";*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;margin:0;padding:0;font-family:Outfit,Nunito,system-ui,sans-serif}html,body{touch-action:none;background:#050710;width:100%;height:100%;overflow:hidden}#gameCanvas{width:100%;height:100%;image-rendering:pixelated;display:block;position:fixed;top:0;left:0}#hud{height:76px;padding:0 20px;padding-top:env(safe-area-inset-top,0px);-webkit-backdrop-filter:blur(8px);z-index:10;background:linear-gradient(#050710e0 0%,#0507108c 60%,#05071000 100%);justify-content:space-between;align-items:center;gap:14px;display:flex;position:fixed;top:0;left:0;right:0}#hud-next{flex-direction:column;align-items:center;gap:2px;display:flex}#nextCanvas{background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;display:block;box-shadow:0 2px 12px #0006,inset 0 1px #ffffff0d}#hud-score{text-align:center;flex:1;justify-content:center;align-items:center;display:flex;position:relative}#score-glow{background:radial-gradient(circle, var(--score-glow-color,#a855f74d) 0%, transparent 70%);pointer-events:none;z-index:-1;opacity:.8;filter:blur(10px);border-radius:50%;width:140px;height:140px;position:absolute}#score{color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-shadow:0 2px 16px #000c, 0 0 40px var(--score-glow-color,#a855f726);font-size:clamp(2.2rem,10vw,3.6rem);font-weight:900;line-height:1;transition:text-shadow .6s cubic-bezier(.4,0,.2,1)}#score.pop{animation:.25s cubic-bezier(.18,.89,.32,1.28) both sPop}@keyframes sPop{0%{transform:scale(1)}40%{text-shadow:0 2px 16px #000c,0 0 60px #f59e0b80;transform:scale(1.35)}to{transform:scale(1)}}#hud-combo{flex-direction:column;align-items:center;gap:0;min-width:56px;display:flex}.hlbl{text-transform:uppercase;letter-spacing:.14em;color:#ffffff47;font-size:.5rem;font-weight:800}#combo-val{letter-spacing:-.03em;font-size:clamp(1.8rem,8vw,2.8rem);font-weight:900;line-height:1}#combo-val.cdim{color:#ffffff1f;filter:none;animation:none}#combo-val.cactive{background:linear-gradient(135deg,#f59e0b,#ec4899,#7c3aed,#06b6d4) 0 0/200% 200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:1.7s ease-in-out infinite breathe,3s infinite gradientShift}#combo-val.cspike{background:linear-gradient(135deg,#f59e0b,#ec4899,#7c3aed,#06b6d4) 0 0/200% 200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:.3s cubic-bezier(.36,.07,.19,.97) forwards cspike,1.7s ease-in-out .3s infinite breathe,3s .3s infinite gradientShift}@keyframes breathe{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.2);transform:scale(1.1)}}@keyframes cspike{0%{transform:scale(1)}40%{transform:scale(1.7)}70%{transform:scale(.88)}to{transform:scale(1)}}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}#combo-dots{opacity:0;gap:4px;margin-top:4px;transition:opacity .3s;display:flex}#combo-dots.visible{opacity:1}#combo-dots .dot{background:#fff3;border-radius:50%;width:6px;height:6px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 1px 2px #00000080}#combo-dots .dot.active{background:#f59e0b;transform:scale(1.2);box-shadow:0 0 8px #f59e0bcc,inset 0 1px 1px #fffc}#popups{pointer-events:none;z-index:15;position:fixed;inset:0;overflow:hidden}.popup{color:#fff;text-shadow:0 0 14px,0 0 40px;white-space:nowrap;letter-spacing:-.02em;font-size:1rem;font-weight:900;animation:.85s cubic-bezier(.22,1,.36,1) forwards popUp;position:absolute;transform:translate(-50%,-50%)}@keyframes popUp{0%{opacity:1;transform:translate(-50%,-50%)scale(.4)rotate(-5deg)}20%{opacity:1;transform:translate(-50%,-100%)scale(1.3)rotate(0)}50%{opacity:.9;transform:translate(-50%,-160%)scale(1.05)}to{opacity:0;transform:translate(-50%,-240%)scale(.8)}}body.shake{animation:.4s cubic-bezier(.36,.07,.19,.97) both shk}@keyframes shk{0%{transform:translate(0)}14%{transform:translate(-9px,6px)rotate(-1.2deg)}28%{transform:translate(9px,-6px)rotate(1.2deg)}42%{transform:translate(-6px,4px)rotate(-.8deg)}57%{transform:translate(6px,-3px)rotate(.8deg)}71%{transform:translate(-3px,2px)}85%{transform:translate(2px,-1px)}to{transform:translate(0)}}#overlay{-webkit-backdrop-filter:blur(24px);z-index:30;background:#050710eb;justify-content:center;align-items:center;transition:opacity .35s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;inset:0}#overlay.hidden{opacity:0;pointer-events:none}#over-box{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:24px;flex-direction:column;align-items:center;gap:20px;min-width:300px;padding:40px;animation:.5s cubic-bezier(.22,1,.36,1) both overIn;display:flex;box-shadow:0 20px 40px #00000080,inset 0 1px #ffffff1a}@keyframes overIn{0%{opacity:0;transform:scale(.85)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}#over-title{background:linear-gradient(135deg,#ef4444,#fb923c,#f59e0b) 0 0/200% 200%;-webkit-text-fill-color:transparent;text-shadow:none;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.6rem,6vw,2.4rem);font-weight:900;animation:3s infinite gradientShift}#over-score{color:#f59e0b;letter-spacing:-.04em;text-shadow:0 0 50px #f59e0b80,0 0 120px #f59e0b33;font-size:clamp(3.2rem,14vw,5.8rem);font-weight:900;animation:2s ease-in-out infinite scoreGlow}@keyframes scoreGlow{0%,to{text-shadow:0 0 50px #f59e0b80,0 0 120px #f59e0b33}50%{text-shadow:0 0 70px #f59e0bb3,0 0 160px #f59e0b59}}#restartBtn{color:#fff;letter-spacing:.05em;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#06b6d4);border:none;border-radius:50px;padding:16px 56px;font-size:1.1rem;font-weight:800;transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s;position:relative;overflow:hidden;box-shadow:0 8px 32px #7c3aed73,inset 0 0 0 1px #ffffff1a}#restartBtn:before{content:"";border-radius:inherit;background:linear-gradient(135deg,#ffffff26 0%,#0000 50%);position:absolute;inset:0}#restartBtn:active{transform:scale(.92);box-shadow:0 4px 16px #7c3aed59,inset 0 0 0 1px #ffffff1a}:root{--score-breathe-speed:1.5s}.score-breathe{animation:breathe var(--score-breathe-speed) ease-in-out infinite;transform-origin:50%}#score-glow.score-breathe{animation:breatheGlow var(--score-breathe-speed) ease-in-out infinite}@keyframes breatheGlow{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}