:root{color-scheme:dark;--lime:#b2ff30;--lime2:#84e51a;--pink:#f079ed;--purple:#9454eb;--white:#f4f4fc;--muted:#acabc3;--bg:#10121e;--ease:cubic-bezier(.2,.72,.2,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--white);-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}#app{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:#10121e}#stage,canvas{display:block;width:100%;height:100%}#stage{position:absolute;inset:0;z-index:0;touch-action:none}#vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(9,8,19,.66),transparent 27%,transparent 65%,rgba(9,8,19,.54) 100%),radial-gradient(ellipse 82% 84% at 50% 48%,transparent 44%,rgba(6,6,17,.28) 100%)}#grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E")}#flash{position:absolute;inset:0;z-index:4;pointer-events:none;background:#ff314b;opacity:0;transition:opacity .23s}
#topbar{position:absolute;z-index:8;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top)) clamp(17px,3vw,44px) 8px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.game-brand{display:flex;align-items:baseline;gap:9px;font-size:clamp(12px,1.55vw,19px);font-weight:950;letter-spacing:.055em;text-shadow:0 2px 12px #0b0715;white-space:nowrap}.game-brand b{color:var(--lime)}.brand-star{color:var(--lime);font-size:1.25em}.game-brand small{margin-left:7px;font-size:clamp(8px,.8vw,11px);color:#dddaf2;letter-spacing:.15em;font-weight:700}#top-actions{display:flex;gap:8px;pointer-events:auto}.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid rgba(255,255,255,.19);display:grid;place-items:center;background:rgba(16,17,30,.71);color:#f0effa;backdrop-filter:blur(14px)}.icon-btn svg{width:19px;height:19px}.icon-btn.muted .sound-waves{opacity:.14}#pause-btn{opacity:0;pointer-events:none}#app.playing #pause-btn,#app.paused #pause-btn{opacity:1;pointer-events:auto}
#hud{position:absolute;z-index:6;top:calc(70px + env(safe-area-inset-top));left:clamp(16px,3vw,44px);right:clamp(16px,3vw,44px);display:flex;gap:clamp(9px,1.6vw,25px);align-items:center;pointer-events:none;transition:opacity .3s}#app:not(.playing):not(.paused) #hud{opacity:0}.hud-stat{min-width:75px}.hud-label{color:#b6b5ca;font-weight:850;font-size:clamp(8px,.85vw,11px);letter-spacing:.16em}.hud-value{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;font-size:clamp(21px,2.7vw,38px);font-weight:950;line-height:1.05;letter-spacing:-.045em;text-shadow:0 3px 16px #100817}.hud-value small{font-size:12px;letter-spacing:0;color:#a6a1b7}.coin-glyph{color:var(--lime);font-size:.78em;transform:rotate(16deg)}.hud-sep{height:36px;width:1px;background:#ffffff35}.hud-right{margin-left:auto;display:flex;align-items:center;gap:23px}#lives{color:#ff688f;font-size:clamp(13px,1.7vw,23px);letter-spacing:5px;white-space:nowrap;text-shadow:0 0 15px #fa4a7640}.level-panel{width:110px}.level-panel span{font-size:11px;font-weight:900;color:var(--lime);letter-spacing:.14em}.speed-track{height:4px;border-radius:4px;margin-top:7px;background:rgba(255,255,255,.24);overflow:hidden}.speed-track div{height:100%;background:linear-gradient(90deg,var(--lime),#f3ff9a);width:9%;transition:width .3s}
#powerup{position:absolute;z-index:8;top:calc(132px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:8px 18px 8px 9px;display:flex;align-items:center;gap:10px;border:1px solid #b1ff5077;border-radius:13px;background:#122218e8;box-shadow:0 10px 30px #0007}.power-symbol{font-size:24px;color:var(--lime)}#powerup strong{font-size:10px;letter-spacing:.15em}.power-track{width:120px;height:4px;margin-top:7px;border-radius:10px;background:#ffffff39}.power-track div{width:100%;height:100%;background:var(--lime)}
.combo{position:absolute;z-index:6;top:28%;left:50%;transform:translateX(-50%);font-size:clamp(20px,4vw,45px);color:var(--lime);font-weight:950;letter-spacing:-.04em;text-shadow:0 0 25px #b3ff5499,0 5px 15px #000;opacity:0;transition:opacity .15s}.combo.visible{opacity:1}#toast{position:absolute;z-index:9;bottom:calc(135px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,10px);pointer-events:none;max-width:90%;padding:10px 17px;border:1px solid rgba(255,255,255,.2);border-radius:30px;color:#fff;background:#131225df;box-shadow:0 8px 40px #0007;font-size:12px;font-weight:800;letter-spacing:.06em;opacity:0;transition:all .24s}#toast.show{opacity:1;transform:translate(-50%,0)}
#controls{position:absolute;z-index:8;bottom:calc(24px + env(safe-area-inset-bottom));left:clamp(14px,3vw,44px);right:clamp(14px,3vw,44px);display:flex;align-items:flex-end;justify-content:space-between;opacity:0;pointer-events:none;transition:opacity .2s}#app.playing #controls{opacity:1;pointer-events:auto}.controls-group{display:flex;gap:12px}.control-btn{width:clamp(60px,8vw,82px);height:clamp(60px,8vw,82px);background:#0e1125bd;border:1px solid #d5e9fd48;border-radius:20px;display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(15px);box-shadow:0 6px 18px #0d0b2290, inset 0 1px #fff2;user-select:none}.control-btn:active{transform:scale(.92);border-color:var(--lime)}.control-btn svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.control-btn small{font-weight:950;letter-spacing:.1em;font-size:10px;margin-top:3px}.control-btn.jump{border-color:#bcff507d;background:#1c291fd6;color:var(--lime)}.control-btn.slide{border-color:#ec9bff77;background:#281729ca;color:#f2b1fc}
.screen{position:absolute;inset:0;z-index:12;display:none;pointer-events:none}.screen:not(.hidden){display:flex;pointer-events:auto}.menu-screen{align-items:center;justify-content:flex-start;background:linear-gradient(90deg,rgba(9,8,21,.98) 1%,rgba(9,8,21,.93) 20%,rgba(9,8,21,.67) 44%,transparent 79%)}.menu-light{position:absolute;pointer-events:none;left:-25vw;top:10%;width:60vw;height:75vh;background:radial-gradient(ellipse,rgba(155,77,242,.13),transparent 63%)}.menu-inner{position:relative;width:min(610px,87vw);margin-left:clamp(24px,8vw,150px);padding-top:clamp(50px,12vh,105px)}.eyebrow{display:flex;align-items:center;gap:8px;font-size:clamp(9px,1vw,12px);font-weight:950;letter-spacing:.19em;color:#dad6e7}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime)}.menu-title{margin-top:20px;display:flex;flex-direction:column;line-height:.82;font-weight:1000;font-size:clamp(68px,10vw,148px);letter-spacing:-.095em;font-stretch:condensed;font-family:Impact,"Arial Narrow",Inter,system-ui,sans-serif;text-shadow:0 6px 24px #0007}.gradient-word{color:var(--lime);text-shadow:0 0 50px #a2ee4422}.title-dot{color:#fff}.menu-description{margin:24px 0 27px;max-width:360px;font-size:clamp(14px,1.35vw,18px);font-weight:450;color:#d7d4e6;line-height:1.45}.menu-card{width:min(380px,86vw);background:rgba(18,17,35,.68);border:1px solid #ffffff22;padding:16px;border-radius:18px;backdrop-filter:blur(14px);box-shadow:0 20px 75px #0003}.menu-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.menu-card-top span{font-size:10px;letter-spacing:.15em;color:#b9b7c6;font-weight:850}.menu-card-top b{font-size:21px}.primary-btn,.secondary-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:11px;min-height:51px;font-size:13px;font-weight:1000;letter-spacing:.13em}.primary-btn{background:linear-gradient(100deg,#b9ff3e,#81dc28);color:#151a10;box-shadow:0 10px 30px #7ee51c27;transition:filter .14s,transform .14s}.primary-btn:hover{filter:brightness(1.08)}.primary-btn:active{transform:scale(.98)}.primary-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}.secondary-btn{background:transparent;border:1px solid #ffffff30;color:#f2f1fa;margin-top:10px}.secondary-btn:hover{border-color:#b2ff30aa}.menu-foot{margin-top:23px;font-size:10px;font-weight:850;letter-spacing:.14em;color:#b5b3c5}.menu-foot span{color:var(--lime);margin:0 8px}.menu-side{position:absolute;right:24px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font-size:10px;letter-spacing:.3em;color:#ccc8d790;font-weight:900}
.modal-screen{align-items:center;justify-content:center;background:rgba(7,7,18,.72);backdrop-filter:blur(12px)}.modal-card{width:min(470px,90vw);padding:clamp(20px,5vw,39px);border:1px solid #d8d0f22d;background:linear-gradient(145deg,#1f1a31,#131423);border-radius:23px;box-shadow:0 28px 100px #000a;text-align:center}.modal-eyebrow{color:var(--lime);font-size:10px;font-weight:950;letter-spacing:.21em}.modal-card h2{margin:15px 0;font-size:clamp(38px,5vw,61px);line-height:1;letter-spacing:-.075em;font-weight:1000}.modal-card h2 em{color:var(--lime);font-style:normal}.modal-card p{font-size:14px;color:#cfcbdf;line-height:1.58;margin:11px auto 26px;max-width:360px}.guide-card{width:min(600px,92vw)}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0}.guide-grid div{border:1px solid #ffffff24;background:#ffffff08;border-radius:11px;padding:13px 5px;display:flex;align-items:center;flex-direction:column;gap:7px}.guide-icon{font-size:28px;font-weight:900;color:var(--lime)}.guide-grid b{font-size:11px}.guide-grid small{font-size:10px;line-height:1.3;color:#b9b6cc}.modal-card .keyboard-note{font-size:10px;letter-spacing:.05em;margin-bottom:23px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:25px 0}.result-grid div{border:1px solid #ffffff22;background:#ffffff0a;border-radius:11px;padding:14px 3px}.result-grid span{display:block;font-size:9px;letter-spacing:.1em;color:#c0bdcf;font-weight:850}.result-grid strong{display:block;font-size:clamp(24px,4vw,39px);margin-top:6px;font-variant-numeric:tabular-nums}.result-grid small{font-size:12px;color:#aaa5c0}.new-best{color:var(--lime);letter-spacing:.14em;font-size:12px;font-weight:1000;animation:pulse .8s ease-in-out infinite alternate}@keyframes pulse{to{filter:brightness(1.7);transform:scale(1.03)}}
.countdown{position:absolute;z-index:14;top:44%;left:50%;transform:translate(-50%,-50%);font-size:clamp(100px,21vw,240px);font-family:Impact,Inter,sans-serif;font-weight:1000;line-height:1;color:var(--lime);text-shadow:0 0 70px #8fff5578,0 9px 35px #000b;pointer-events:none}#bottom-caption{position:absolute;z-index:3;bottom:calc(13px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-weight:850;font-size:10px;letter-spacing:.16em;text-shadow:0 2px 9px #000b;color:#dedbe8;white-space:nowrap;pointer-events:none}#bottom-caption span{color:var(--lime);padding:0 5px}#app.playing #bottom-caption,#app.paused #bottom-caption{display:none}
#loading{z-index:30;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#292140,#0b0b17 68%)}.loading-brand{font-size:12px;font-weight:900;letter-spacing:.17em;color:#fff}.loading-brand em{font-style:normal;color:var(--lime)}.brand-icon{font-size:22px;color:var(--lime);vertical-align:middle;margin-right:10px}.loading-mark{font-family:Impact,sans-serif;font-size:130px;line-height:1.2;letter-spacing:-.08em;color:var(--lime);text-shadow:0 0 90px #b4ff3929}.loading-mark span{color:#fff}.loading-title{font-size:12px;letter-spacing:.3em;font-weight:900;margin:10px 0 30px}.loading-track{width:min(260px,70vw);height:4px;background:#ffffff2a;overflow:hidden;border-radius:10px}.loading-track div{width:8%;height:100%;background:var(--lime);transition:width .4s}.loading-track+.loading-title{}#loading-status{font-size:11px;letter-spacing:.1em;color:#bbb5d3;margin-top:15px}.hidden{display:none!important}
@media(max-width:820px){#topbar{padding-top:calc(9px + env(safe-area-inset-top))}.game-brand small{display:none}#hud{top:calc(63px + env(safe-area-inset-top));gap:9px}.hud-sep{height:27px}.hud-stat{min-width:56px}#lives{letter-spacing:1px}.hud-right{gap:8px}.level-panel{width:73px}#powerup{top:calc(123px + env(safe-area-inset-top))}.menu-screen{background:linear-gradient(0deg,#0a0919ee,#0c0b1d95 45%,#0a091944 100%);align-items:flex-end;justify-content:center}.menu-inner{margin:0;padding:0 0 calc(35px + env(safe-area-inset-bottom));width:min(480px,91vw)}.menu-title{font-size:clamp(71px,18vw,125px);margin-top:13px}.menu-description{margin:15px 0}.menu-side{display:none}.menu-foot{margin-top:13px}.guide-grid{grid-template-columns:repeat(2,1fr)}.guide-grid div{padding:8px 4px}.guide-icon{font-size:22px}.guide-card{max-height:92dvh;overflow:auto}.control-btn{width:68px;height:68px}#bottom-caption{bottom:9px}}
@media(max-width:430px){.game-brand{font-size:13px}.icon-btn{width:36px;height:36px}#hud{top:calc(61px + env(safe-area-inset-top));gap:8px}.hud-best{display:none}.hud-sep:nth-of-type(4){display:none}.hud-value{font-size:26px}.hud-label{font-size:8px}#lives{font-size:16px}.level-panel{width:74px}.control-btn{width:64px;height:64px;border-radius:17px}.controls-group{gap:9px}.control-btn svg{width:27px;height:27px}.menu-inner{padding-bottom:calc(44px + env(safe-area-inset-bottom))}.menu-description{font-size:15px}.menu-card{width:min(366px,90vw)}.menu-foot{font-size:9px}#toast{bottom:130px}}
@media(max-height:590px) and (min-width:700px){#topbar{padding-top:7px}#hud{top:54px}.menu-inner{padding-top:10px}.menu-title{font-size:clamp(65px,11vh,100px);margin-top:10px}.menu-description{margin:9px 0 12px}.menu-card{padding:12px}.menu-card-top{margin-bottom:8px}.primary-btn,.secondary-btn{min-height:41px}.menu-foot{margin-top:10px}.control-btn{width:60px;height:60px}.guide-card{max-height:94vh;overflow:auto}.modal-card h2{margin:7px 0}.modal-card p{margin:5px auto 12px}}
/* Keep the brand header visible above the title overlay but behind pause dialogs. */
#menu{z-index:7}
@media(max-height:590px) and (min-width:700px){#bottom-caption{display:none}.menu-foot{display:none}.menu-inner{padding-top:34px}}