:root{--color-sky: #4FC3F7;--color-perfect: #69F0AE;--color-good: #FFF176;--color-break: #FF5252;--color-player: #FFD54F;--color-text: #ffffff;--color-muted: rgba(255, 255, 255, .72);--color-bg: #0b1020;--c-magenta: #ff2e93;--c-violet: #9b5cff;--c-cyan: #18e0ff;--c-lime: #5cff9b;--c-amber: #ffcb3d;--c-orange: #ff7a3d;--c-gold: #ffd54f;--c-pitch: #2e7d32;--c-deep-blue: #1a237e;--grad-primary: linear-gradient(135deg, #18e0ff 0%, #5cff9b 100%);--grad-hot: linear-gradient(135deg, #ff2e93 0%, #ff7a3d 60%, #ffcb3d 100%);--grad-title: linear-gradient(100deg, #18e0ff, #5cff9b, #ffcb3d, #ff2e93, #9b5cff, #18e0ff);--grad-stroke: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.05));--grad-gold: linear-gradient(135deg, #ffd54f 0%, #ffb300 50%, #ffd54f 100%);--grad-scoreboard: linear-gradient(180deg, #0d1b2a 0%, #1b2838 100%);--glass-bg: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));--glass-border: rgba(255, 255, 255, .18);--panel-bg: var(--glass-bg);--overlay-bg: rgba(8, 11, 24, .72);--radius: 24px;--radius-sm: 16px;--space-sm: .6rem;--space-md: 1.1rem;--space-lg: 1.7rem}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--color-bg);font-family:Fredoka,system-ui,sans-serif;color:var(--color-text);-webkit-font-smoothing:antialiased}#app,#ui-layer{position:fixed;inset:0}#app{touch-action:none}#ui-layer{pointer-events:none}#ui-layer button,#ui-layer .panel{pointer-events:auto}.hidden{display:none!important}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);padding:var(--space-lg);text-align:center;isolation:isolate;background:var(--overlay-bg);overflow:hidden;animation:overlay-in .35s ease both}.overlay:before{content:"";position:absolute;inset:-25%;z-index:-2;background:radial-gradient(38% 38% at 18% 22%,rgba(255,46,147,.55),transparent 70%),radial-gradient(42% 42% at 82% 18%,rgba(24,224,255,.5),transparent 70%),radial-gradient(45% 45% at 25% 85%,rgba(155,92,255,.5),transparent 70%),radial-gradient(40% 40% at 80% 80%,rgba(92,255,155,.42),transparent 70%);filter:blur(8px) saturate(1.15);animation:aurora 18s ease-in-out infinite alternate}.overlay:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 35%,transparent 40%,rgba(5,7,16,.75) 100%)}@keyframes aurora{0%{transform:translate3d(-3%,-2%,0) rotate(0) scale(1.05)}50%{transform:translate3d(3%,2%,0) rotate(8deg) scale(1.18)}to{transform:translate3d(-2%,3%,0) rotate(-6deg) scale(1.1)}}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.overlay h1{margin:0;font-size:clamp(2.6rem,12vw,5.5rem);font-weight:700;letter-spacing:.01em;line-height:.98;background:var(--grad-title);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 22px rgba(24,224,255,.35)) drop-shadow(0 2px 10px rgba(255,46,147,.3));animation:title-shine 6s linear infinite,title-float 4.5s ease-in-out infinite}@keyframes title-shine{to{background-position:280% 0}}@keyframes title-float{0%,to{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-8px) rotate(.5deg)}}.tagline{margin:0;max-width:26ch;font-size:clamp(1rem,3.6vw,1.35rem);font-weight:400;color:var(--color-muted);text-shadow:0 2px 10px rgba(0,0,0,.4)}.btn-primary{position:relative;font-family:inherit;font-size:clamp(1.25rem,5.2vw,2rem);font-weight:700;letter-spacing:.02em;padding:.7em 1.7em;border-radius:999px;border:0;cursor:pointer;color:#06121a;background:var(--grad-primary);background-size:160% 160%;overflow:hidden;box-shadow:0 10px 30px #18e0ff59,0 4px 14px #5cff9b4d,inset 0 1px #ffffff73;transition:transform .14s cubic-bezier(.34,1.56,.64,1),filter .14s ease,box-shadow .2s ease;animation:btn-breathe 3.5s ease-in-out infinite}.btn-primary:after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skew(-18deg);animation:btn-sheen 3.2s ease-in-out infinite}.btn-primary:hover{filter:brightness(1.06) saturate(1.1);transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px #18e0ff73,0 6px 18px #5cff9b66}.btn-primary:active{transform:translateY(1px) scale(.97)}.btn-primary:focus-visible{outline:3px solid #fff;outline-offset:3px}@keyframes btn-breathe{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes btn-sheen{0%{left:-60%}60%{left:130%}to{left:130%}}.btn-primary.btn-hot{color:#fff;background:var(--grad-hot);box-shadow:0 10px 30px #ff2e9366,0 4px 14px #ff7a3d59,inset 0 1px #ffffff59}.btn-primary.btn-hot:hover{box-shadow:0 16px 40px #ff2e9380,0 6px 18px #ffcb3d66}.btn-secondary,.overlay .panel>button:not([class]){font-family:inherit;font-size:clamp(1rem,4vw,1.25rem);font-weight:600;letter-spacing:.01em;padding:.6em 1.5em;border-radius:999px;cursor:pointer;color:var(--color-text);background:#ffffff14;border:1.5px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);transition:transform .14s ease,background .2s ease,border-color .2s ease}.btn-secondary:hover,.overlay .panel>button:not([class]):hover{background:#ffffff29;border-color:#ffffff8c;transform:translateY(-2px)}.btn-secondary:active,.overlay .panel>button:not([class]):active{transform:translateY(1px) scale(.98)}.btn-secondary:focus-visible{outline:3px solid var(--c-cyan);outline-offset:3px}.icon-btn{font-family:inherit;min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:.4em;font-size:clamp(1.1rem,4vw,1.5rem);border:1.5px solid rgba(255,215,79,.4);border-radius:8px;cursor:pointer;color:var(--color-text);background:linear-gradient(180deg,#0d1b2ad9,#1b2838d9);box-shadow:0 0 0 1px #0003,0 4px 14px #00000059;transition:transform .14s ease,filter .14s ease,border-color .2s ease}.icon-btn:hover{filter:brightness(1.15);border-color:#ffffff80;transform:translateY(-2px)}.icon-btn:active{transform:scale(.92)}.icon-btn:focus-visible{outline:3px solid var(--c-cyan);outline-offset:2px}.icon-row{display:flex;align-items:center;justify-content:center;gap:var(--space-md)}.badge{margin:0;display:inline-flex;align-items:center;gap:.45em;padding:.45em 1.1em;font-size:clamp(.95rem,3.4vw,1.2rem);font-weight:600;border-radius:999px;color:#1a1205;background:linear-gradient(135deg,#ffcb3d,#ff9b3d);box-shadow:0 8px 22px #ffaa2866,inset 0 1px #ffffff80}#gameover-record.badge{background:linear-gradient(135deg,#ff2e93,#ffcb3d);color:#fff;animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) both,badge-beat 1.4s ease-in-out .5s infinite}@keyframes badge-pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes badge-beat{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);width:min(92vw,30rem);max-width:100%;padding:var(--space-lg);border-radius:var(--radius);background:var(--panel-bg);border:1.5px solid var(--glass-border);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 24px 60px #00000073,inset 0 1px #ffffff40;animation:pop-in .4s cubic-bezier(.34,1.56,.64,1) both}.panel:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(135deg,var(--c-cyan),transparent 40%,transparent 60%,var(--c-magenta));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;pointer-events:none}.panel p{margin:.1rem 0;color:var(--color-muted)}@keyframes pop-in{0%{transform:scale(.85) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}#gameover-score,.score-big{font-size:clamp(3rem,14vw,4.6rem);font-weight:700;line-height:1;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(24,224,255,.35))}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);width:100%}.stat{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.7rem .4rem;border-radius:var(--radius-sm);background:#ffffff0f;border:1px solid rgba(255,255,255,.12)}.stat-value{font-size:clamp(1.2rem,5vw,1.7rem);font-weight:700;color:var(--color-text)}.stat-label{font-size:clamp(.65rem,2.6vw,.8rem);font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}.hud{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md);padding-top:calc(var(--space-md) + env(safe-area-inset-top,0px))}#hud .hud:before{content:"";position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 100%);pointer-events:none}#lives{display:inline-flex;align-items:center;gap:.2em;padding:.4em .9em;border-radius:8px;background:linear-gradient(180deg,#0d1b2aeb,#1b2838eb);border:2px solid rgba(255,215,79,.5);box-shadow:0 0 0 1px #0000004d,0 4px 16px #0006,inset 0 1px #ffffff1a;font-variant-numeric:tabular-nums}#score{font-size:clamp(2.4rem,10vw,4.2rem);font-weight:700;line-height:1;letter-spacing:.02em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(139,90,0,.8)) drop-shadow(0 4px 16px rgba(255,179,0,.45));font-variant-numeric:tabular-nums}#feedback{text-shadow:0 0 4px rgba(0,0,0,.9),0 2px 0 rgba(0,0,0,.5),0 4px 22px currentColor;letter-spacing:.04em;text-transform:uppercase}.live-badge{display:inline-flex;align-items:center;gap:.3em;padding:.3em .7em;border-radius:4px;background:#dc143ce6;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 2px 8px #dc143c66}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;animation:live-blink 1.4s ease-in-out infinite}@keyframes live-blink{0%,to{opacity:1}50%{opacity:.2}}.scoreboard-frame{position:absolute;bottom:5%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.4rem 1.2rem .5rem;border-radius:10px;background:linear-gradient(180deg,#0d1b2aeb,#081020f0);border:2px solid rgba(255,215,79,.55);box-shadow:0 0 0 1px #0006,0 8px 32px #00000080,inset 0 1px #ffffff12}.scoreboard-frame:after{content:"";position:absolute;bottom:-2px;left:10%;right:10%;height:2px;background:var(--grad-gold);border-radius:2px}.level-badge{display:inline-flex;align-items:center;gap:.3em;padding:.15em .6em;border-radius:4px;background:linear-gradient(135deg,#ffd54f,#ffb300);color:#1a1205;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.streak-row{display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:.1rem}.streak-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}.streak-value{font-size:1.1rem;font-weight:700;color:var(--c-gold);font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(255,215,79,.5)}.mult-value{font-size:.9rem;font-weight:700;color:var(--c-cyan);font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(24,224,255,.4)}@media(orientation:landscape)and (max-height:480px){.overlay{gap:var(--space-md);padding:var(--space-md)}.overlay h1{font-size:clamp(2rem,9vh,3rem)}.panel{padding:var(--space-md);gap:var(--space-sm)}.hud{padding:var(--space-sm) var(--space-md)}}@media(min-width:768px){.panel{width:min(80vw,34rem)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.overlay h1{background-position:0 0}}