*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#1b1040}
body{position:fixed;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",Roboto,system-ui,sans-serif;color:#fff}
#app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
#hud{position:absolute;left:0;right:0;top:0;padding:calc(max(env(safe-area-inset-top),var(--fz-sat,0px)) + 10px) calc(env(safe-area-inset-right) + 14px) 0 calc(env(safe-area-inset-left) + 14px);
 display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
#hud[hidden]{display:none}
#hearts{font-size:22px;letter-spacing:2px;min-width:90px;text-shadow:0 2px 0 rgba(0,0,0,.25)}
#hearts .lost{opacity:.22;filter:grayscale(1)}
#hearts .h{display:inline-block}#hearts .h.bump{animation:bump .4s}
#scorebox{text-align:center}
#score{font-size:44px;font-weight:900;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
#score.bump{animation:bump .18s}
#streak{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:99px;background:var(--acc,#ff4fa3);font-weight:900;font-size:16px;transition:transform .15s,opacity .2s}
#streak.off{opacity:.0;transform:scale(.6)}#streak.hot{animation:pulse .6s infinite alternate}
.icon{pointer-events:auto;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.14);font-weight:900;font-size:16px}
#banner{position:absolute;left:0;right:0;top:32%;text-align:center;font-size:40px;font-weight:900;pointer-events:none;opacity:0;text-shadow:0 4px 0 rgba(0,0,0,.25)}
#banner.go{animation:banner 1.4s ease-out}
#toasts{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 96px);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:rgba(20,10,40,.82);border:2px solid var(--acc,#ff4fa3);padding:10px 16px;border-radius:16px;font-weight:800;font-size:15px;animation:toast 2.6s forwards;max-width:90vw;text-align:center}
.screen,.modal{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
 padding:calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 20px)}
.screen.show,.modal.show{display:flex;animation:fade .25s}
#title{background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.08),rgba(10,5,30,.35))}
.logo{font-size:min(19vw,92px);font-weight:900;line-height:.9;letter-spacing:-2px;margin-bottom:22px;display:flex;flex-direction:column}
.logo span:first-child{color:#ffe14f;text-shadow:0 6px 0 #ff4fa3}.logo span:last-child{color:#5ff3ff;text-shadow:0 6px 0 #7b3dff}
.logo{animation:float 3s ease-in-out infinite}
.line{font-size:20px;line-height:1.35;max-width:320px;margin-bottom:8px}.sub{opacity:.75;font-size:14px;max-width:300px;margin:4px auto 0}
.best{margin:14px 0 4px;font-weight:800;opacity:.9;min-height:20px}
.big{display:block;margin:16px auto 0;min-width:220px;min-height:58px;padding:0 28px;border-radius:20px;font-size:22px;font-weight:900;
 background:linear-gradient(#ffe14f,#ffb02e);color:#3a1a00;box-shadow:0 6px 0 #c76a00,0 10px 24px rgba(0,0,0,.3);transition:transform .08s}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #c76a00}
#playBtn{animation:pulse 1s infinite alternate}
.row{display:flex;gap:10px;justify-content:center;margin-top:14px}
.pill{min-height:44px;padding:0 18px;border-radius:99px;background:rgba(255,255,255,.16);font-weight:800;font-size:15px}
.screen .card,.modal .card{background:rgba(25,12,55,.88);border:2px solid rgba(255,255,255,.12);border-radius:26px;padding:22px 20px 20px;width:min(340px,100%);
 box-shadow:0 20px 60px rgba(0,0,0,.4);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.card.wide{width:min(380px,100%);max-height:100%;overflow-y:auto;touch-action:pan-y}
.modal{background:rgba(5,2,20,.55);z-index:5}
.h{font-size:28px;font-weight:900;margin-bottom:10px}.h2{font-size:18px;font-weight:900;margin:16px 0 8px}
.lbl{font-size:13px;font-weight:800;letter-spacing:2px;opacity:.7}
#finalScore{font-size:64px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
#newBest{display:inline-block;background:#ff4fa3;padding:6px 14px;border-radius:12px;font-weight:900;font-size:20px;margin-bottom:8px;animation:pulse .5s infinite alternate}
#newBest[hidden]{display:none}
#runStats{font-size:14px;opacity:.85;margin:8px 0}
#unlocks .u{background:rgba(255,225,79,.15);border:2px solid #ffe14f;border-radius:14px;padding:8px;margin:6px 0;font-weight:800;font-size:15px;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
#unlocks .u button{margin-left:8px;padding:4px 10px;border-radius:99px;background:#ffe14f;color:#3a1a00;font-weight:900;min-height:32px}
#progWrap{margin:10px 0 2px;font-size:13px;font-weight:700}
.bar{height:12px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:6px}
#progBar{height:100%;width:0;background:linear-gradient(90deg,#5ff3ff,#ff4fa3);border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
#themeGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px}
.th{border-radius:16px;padding:8px 4px;min-height:96px;font-size:12px;font-weight:800;border:3px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.th.sel{border-color:#fff}.th.locked{filter:grayscale(.9) brightness(.6)}
.th .dots{display:flex;gap:3px}.th .dots i{width:12px;height:12px;border-radius:50%}
#achList{text-align:left}
.ach{display:flex;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.ach b{display:block}.ach small{opacity:.7}.ach .m{font-size:20px;width:28px;text-align:center}.ach.no{opacity:.45}
.tog{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;font-size:18px;font-weight:800;min-height:52px}
.tog input{display:none}.tog i{width:56px;height:32px;border-radius:99px;background:rgba(255,255,255,.2);position:relative;transition:background .2s}
.tog i:after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .2s}
.tog input:checked+i{background:#3ddc84}.tog input:checked+i:after{transform:translateX(24px)}
@keyframes bump{50%{transform:scale(1.25)}}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.7);opacity:0}}
@keyframes banner{0%{opacity:0;transform:scale(.5)}15%{opacity:1;transform:scale(1.1)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
@keyframes toast{0%{opacity:0;transform:translateY(20px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}
.rm *,.rm *:before,.rm *:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.logo,#playBtn,#streak.hot,#newBest{animation:none}}
.rm .toast{animation:none!important;opacity:1}.rm #banner.go{animation:none!important;opacity:1}

#unlocks .u.chip{display:inline-block;margin:3px;padding:5px 10px;font-size:13px;border-width:1.5px}

.chal{margin:6px auto 0;max-width:320px;text-align:left;background:rgba(20,10,40,.45);border-radius:14px;padding:8px 12px}
.chal ul{list-style:none;font-size:13px;font-weight:700;margin-top:4px}.chal li{padding:2px 0;opacity:.9}.chal li.done{opacity:.6;text-decoration:line-through}
#fxGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.fx{border-radius:14px;padding:8px 4px;min-height:58px;font-size:13px;font-weight:800;background:rgba(255,255,255,.12);border:3px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fx small{font-size:10px;opacity:.75}.fx.sel{border-color:#fff}.fx.locked{opacity:.45}
#streak.ms{animation:bump .5s}#score.best{color:#fff6a8}
#banner{top:24%;font-size:34px}