:root{--bg: #0b1026;--bg-deep: #070a1a;--surface: #141a3a;--surface-hi: #1b2350;--surface2: #232c5c;--accent: #45e0ff;--accent-soft: #a5efff;--accent-deep: #1899c4;--violet: #7f5af0;--violet-deep: #4a2fa0;--green: #2cb67d;--green-soft: #7ee0b8;--gold: #ffd803;--gold-deep: #b8860b;--text: #f2f6ff;--text-dim: #8fa3c8;--text-dimmer: #56648a;--danger: #ff4d6d;--danger-deep: #8f1533;--radius: 14px;--radius-lg: 20px;--font-display: "Fredoka", "Nunito", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif;--spring: cubic-bezier(.34, 1.56, .64, 1)}#app{font-family:var(--font-body);color:var(--text);user-select:none;-webkit-user-select:none}#app .ui{position:absolute;inset:0;pointer-events:none}#app .ui>*{pointer-events:none}#app button,#app .clickable{pointer-events:auto}#app svg{display:inline-block;vertical-align:middle}.btn{appearance:none;border:none;border-radius:var(--radius);background:linear-gradient(180deg,var(--accent-soft) 0%,var(--accent) 38%,#27b8e6 100%);color:#07202e;font-family:var(--font-display);font-weight:600;font-size:1.05em;letter-spacing:1.2px;padding:14px 42px 16px;cursor:pointer;box-shadow:0 5px 0 var(--accent-deep),0 10px 26px #1899c466,inset 0 1px #ffffff8c;text-shadow:0 1px 0 rgba(255,255,255,.3);transition:transform .12s var(--spring),box-shadow .12s ease,filter .15s ease}.btn:active{transform:translateY(3px) scale(.97);box-shadow:0 2px 0 var(--accent-deep),0 5px 14px #1899c459,inset 0 1px #ffffff8c;filter:brightness(1.05)}.btn-secondary{background:linear-gradient(180deg,#9d82ff 0%,var(--violet) 42%,#5c3dd4 100%);color:var(--text);box-shadow:0 5px 0 var(--violet-deep),0 10px 26px #7f5af061,inset 0 1px #fff6;text-shadow:0 1px 2px rgba(18,9,46,.55)}.btn-secondary:active{box-shadow:0 2px 0 var(--violet-deep),0 5px 14px #7f5af059,inset 0 1px #fff6}.btn-outline{background:#141a3ab8;color:var(--accent);border:2px solid var(--surface2);box-shadow:0 4px #232c5ce6,inset 0 1px #8fa4ff29;text-shadow:none}.btn-outline:active{box-shadow:0 1px #232c5ce6,inset 0 1px #8fa4ff29}.btn-resume{background:linear-gradient(180deg,#ffe76a 0%,var(--gold) 45%,#e0a800 100%);color:#241a00;box-shadow:0 5px 0 var(--gold-deep),0 10px 26px #ffd80352,inset 0 1px #fff9;text-shadow:0 1px 0 rgba(255,255,255,.38)}.btn-resume:active{box-shadow:0 2px 0 var(--gold-deep),0 5px 14px #ffd8034d,inset 0 1px #fff9}.btn-sm{padding:11px 20px 13px;font-size:.88em}.btn-inner{display:inline-flex;align-items:center;justify-content:center;gap:9px}.btn-icon{width:1.15em;height:1.15em;display:inline-flex}.btn-icon svg{width:100%;height:100%}.btn-text{line-height:1}.icon-btn{appearance:none;border:2px solid rgba(61,77,159,.75);background:#141a3ad1;color:var(--text);width:44px;height:44px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s var(--spring),border-color .15s ease,background .15s ease;padding:7px;box-sizing:border-box;box-shadow:0 3px #0f1636e6,inset 0 1px #8fa4ff24}.icon-btn:active{transform:translateY(2px) scale(.94);box-shadow:0 1px #0f1636e6,inset 0 1px #8fa4ff24}.icon-btn svg{width:100%;height:100%}.icon-btn:disabled{opacity:.35}.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;pointer-events:none;animation:screen-in .24s ease-out}.screen.active{display:flex}@keyframes screen-in{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}#screen-menu{justify-content:space-between;text-align:center}.menu-top{width:100%;display:flex;justify-content:flex-end;padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-right:calc(env(safe-area-inset-right,0px) + 14px);box-sizing:border-box}.menu-mid{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:12vh;padding:0 24px}.menu-wave{filter:drop-shadow(0 0 18px rgba(69,224,255,.6));animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-7px)}}#screen-menu h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:2.9em;letter-spacing:4px;line-height:1.02;display:flex;gap:.34em}#screen-menu h1 .title-a{color:var(--accent);text-shadow:0 0 26px rgba(69,224,255,.55)}#screen-menu h1 .title-b{color:var(--text);text-shadow:0 0 26px rgba(127,90,240,.6)}.tagline{margin:0;color:var(--text-dim);max-width:300px;font-size:.95em;line-height:1.4;font-weight:400}.menu-row{display:flex;gap:12px}.menu-best{margin:2px 0 0;color:var(--gold);font-weight:700;min-height:1.2em;font-size:.92em;text-shadow:0 0 14px rgba(255,216,3,.35)}#screen-levels{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 14px);gap:14px}.levels-head{width:100%;display:flex;align-items:center;gap:12px;padding:0 16px env(safe-area-inset-top,0px);box-sizing:border-box}.levels-head h2{margin:0;flex:1;text-align:center;font-family:var(--font-display);font-weight:600;letter-spacing:4px;font-size:1.35em;text-shadow:0 0 18px rgba(69,224,255,.35)}.levels-spacer{width:44px}.levels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 16px);width:100%;max-width:340px;box-sizing:border-box;overflow-y:auto}.level-btn{appearance:none;border:2px solid rgba(61,77,159,.8);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface-hi) 0%,var(--surface) 100%);color:var(--text);padding:10px 4px 11px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-family:inherit;box-shadow:0 4px #0f1636d9,inset 0 1px #8fa4ff29;transition:transform .1s var(--spring),box-shadow .1s ease}.level-btn:active{transform:translateY(2px) scale(.95);box-shadow:0 1px #0f1636d9,inset 0 1px #8fa4ff29}.level-btn .level-num{font-family:var(--font-display);font-weight:600;font-size:1.3em;line-height:1}.level-btn .level-stars{display:inline-flex;gap:1px;font-size:.78em;height:1em;align-items:center;justify-content:center}.level-btn .level-stars .star{width:1em;height:1em}.level-btn .level-stars .star.on{filter:drop-shadow(0 0 3px rgba(255,216,3,.55))}.level-btn .level-stars.is-lock{font-size:1.05em;color:var(--text-dimmer)}.level-btn.locked{opacity:.5;background:linear-gradient(180deg,#141a38,#10142e)}.level-btn.unlocked{border-color:#45e0ff8c}.level-btn.unlocked:active{border-color:var(--accent)}#hud{position:absolute;top:0;left:0;right:0;display:none;flex-direction:column;padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-left:calc(env(safe-area-inset-left,0px) + 12px);padding-right:calc(env(safe-area-inset-right,0px) + 12px);pointer-events:none}#hud.active{display:flex}.hud-row{display:flex;align-items:center;justify-content:space-between}.hud-label{font-family:var(--font-display);font-weight:600;letter-spacing:2.5px;font-size:1em;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,.6),0 0 18px rgba(69,224,255,.28)}.hud-progress{position:relative;margin:10px 8px 0;height:7px;border-radius:4px;background:#0f1636cc;box-shadow:inset 0 1px 3px #0000008c,0 0 10px #45e0ff1f;overflow:visible}.hud-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,var(--violet));border-radius:4px;box-shadow:0 0 8px #45e0ff8c;transition:width .2s linear}.hud-pips{position:absolute;inset:0;pointer-events:none}.hud-pip{position:absolute;top:50%;width:7px;height:11px;border-radius:3px;transform:translate(-50%,-50%);background:var(--surface2);border:1.5px solid rgba(255,216,3,.55);box-sizing:border-box;transition:background .2s ease,box-shadow .2s ease}.hud-pip.pip-hit{background:var(--gold);box-shadow:0 0 7px #ffd803bf}.hud-dist{text-align:center;margin-top:8px;font-family:var(--font-display);font-weight:600;font-size:1.7em;color:var(--accent);text-shadow:0 0 16px rgba(69,224,255,.55),0 1px 6px rgba(0,0,0,.6);line-height:1}.hud-dist-unit{font-size:.5em;color:var(--accent-soft);margin-left:4px;letter-spacing:1px;opacity:.85}#play-banner{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 110px);display:none;text-align:center;white-space:pre-line;font-weight:700;font-size:1em;line-height:1.5;letter-spacing:.4px;color:var(--text);text-shadow:0 1px 10px rgba(0,0,0,.8),0 0 22px rgba(69,224,255,.25);pointer-events:none;animation:banner-pulse 1.4s ease-in-out infinite}#play-banner.active{display:block}@keyframes banner-pulse{50%{opacity:.55}}.card-screen{justify-content:center;background:#0406106b;backdrop-filter:blur(2px)}.card{background:linear-gradient(180deg,#1b2350f7,#141a3af7);border:2px solid var(--surface2);border-radius:var(--radius-lg);padding:26px 30px 30px;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:252px;max-width:320px;box-sizing:border-box;pointer-events:auto;box-shadow:0 22px 70px #0000008c,inset 0 1px #8fa4ff2e;text-align:center}.card h2{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:3px;font-size:1.55em}.card-danger h2{color:var(--danger);text-shadow:0 0 22px rgba(255,77,109,.5)}.card-win h2{color:var(--green-soft);text-shadow:0 0 22px rgba(44,182,125,.5)}.card-detail{margin:0;color:var(--text-dim);font-size:.9em;max-width:250px;line-height:1.45}.stars{display:inline-flex;gap:8px;letter-spacing:0;font-size:2.1em;height:1.05em;align-items:center}.stars .star{width:1em;height:1em}.stars .star.on{filter:drop-shadow(0 0 9px rgba(255,216,3,.6))}.stars .star.off{opacity:.55}.over-dist{font-family:var(--font-display);font-weight:600;font-size:3.3em;color:var(--accent);text-shadow:0 0 26px rgba(69,224,255,.55);line-height:1}.over-dist:after{content:"m";font-size:.38em;margin-left:6px;color:var(--accent-soft);opacity:.85}.card .btn{width:100%;box-sizing:border-box}@media(max-width:340px){.card{min-width:0;width:calc(100% - 40px);padding:22px 20px 24px}#screen-menu h1{font-size:2.45em}}@media(prefers-reduced-motion:reduce){.menu-wave,#play-banner{animation:none}}#fx-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 86% 70% at 50% 52%,#06081400 55%,#06081470);opacity:0;transition:opacity .45s ease}#fx-vignette.on{opacity:1}#fx-flash{position:absolute;inset:0;pointer-events:none;opacity:0}#fx-flash.run-crash{background:radial-gradient(circle at 50% 68%,#ff4d6d8c,#ff4d6d00 60%);animation:fx-flash .34s ease-out 1}#fx-flash.run-win{background:radial-gradient(circle at 50% 62%,#ffd80366,#ffd80300 66%);animation:fx-flash .6s ease-out 1}@keyframes fx-flash{0%{opacity:1}to{opacity:0}}