@font-face{font-family:Rush;src:url(lib/lilita.woff2) format("woff2");font-display:swap}
@font-face{font-family:Rush2;src:url(lib/font.woff2) format("woff2");font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#3aa8ff;touch-action:none;overscroll-behavior:none}
body{font-family:Rush,"Arial Black",system-ui,sans-serif;color:#fff;letter-spacing:.5px}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 18px)}
.screen.show{display:flex}
.screen.modal{background:rgba(10,30,60,.45);justify-content:center;pointer-events:auto;backdrop-filter:blur(2px)}
#title,#chars,#shop{pointer-events:none}
#title *,#chars *,#shop *,#hud button{pointer-events:auto}
#title .spacer,#chars .spacer{pointer-events:none}
.spacer{flex:1}
.topbar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pill{background:rgba(0,0,0,.35);border-radius:999px;padding:6px 14px 6px 8px;font-size:18px;display:flex;align-items:center;gap:6px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.pill .lbl{font-size:12px;opacity:.8;margin-left:6px}
.pill.sm{font-size:16px;padding:4px 10px 4px 6px}
.coin{display:inline-block;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6b0 0 15%,#ffd31a 35%,#f0a000 75%,#b86e00);box-shadow:inset 0 0 0 2px #c98200;vertical-align:-3px}
.logo{margin-top:6vh;text-align:center;line-height:.86;transform:rotate(-4deg);filter:drop-shadow(0 6px 0 rgba(0,40,90,.35))}
.logo span,.logo b{display:block;font-size:min(17vw,84px);font-weight:900;letter-spacing:1px;-webkit-text-stroke:3px #0b2a5b;paint-order:stroke fill}
.logo span{color:#fff}
.logo b{background:linear-gradient(#ffe95a,#ff9d00);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:min(22vw,108px)}
.logo.small span{font-size:48px}.logo.small b{font-size:62px}
.tagline{margin-top:10px;font-size:16px;letter-spacing:3px;text-shadow:0 2px 0 #0b2a5b}
.btn{position:relative;overflow:hidden;pointer-events:auto;border:3px solid rgba(255,255,255,.85);border-radius:18px;padding:14px 22px;margin:6px;font:inherit;font-size:20px;color:#fff;background:linear-gradient(#4fb3ff,#1f7fe0);box-shadow:0 5px 0 #0f4f99,0 8px 14px rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(0,0,0,.25);cursor:pointer;min-width:200px;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #0f4f99}
.btn.big{font-size:30px;padding:18px 30px;min-width:250px;border-radius:24px}
.btn.green{background:linear-gradient(#7ee84a,#35b01c);box-shadow:0 5px 0 #1f7a0c,0 8px 14px rgba(0,0,0,.25)}
.btn.red{background:linear-gradient(#ff7a6a,#e0352b);box-shadow:0 5px 0 #96211a,0 8px 14px rgba(0,0,0,.25)}
.btn.gold{background:linear-gradient(#ffd84a,#f39c00);box-shadow:0 5px 0 #a35f00,0 8px 14px rgba(0,0,0,.25)}
.btn.sm{min-width:0;font-size:16px;padding:8px 14px;margin:0}
.btn:disabled{filter:grayscale(.8) brightness(.8)}
#b-play{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.row{display:flex;gap:8px;margin-top:14px}
.btn.sq{min-width:0;width:76px;height:80px;padding:6px 2px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;border-radius:16px;position:relative}
.ico{display:block;width:34px;height:34px;background-size:contain;background-repeat:no-repeat;background-position:center;margin-bottom:4px}
.dot{position:absolute;top:6px;right:8px;width:14px;height:14px;border-radius:50%;background:#ff3b3b;border:2px solid #fff;display:none}
.dot.on{display:block}
.iconbtn{pointer-events:auto;width:46px;height:46px;border-radius:14px;border:0;background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:22px;cursor:pointer}
#b-pause{position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 14px);background:linear-gradient(#4fb3ff,#1f7fe0);border:3px solid #fff;box-shadow:0 3px 0 #0f4f99}
.hud-r{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 12px);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.scorebox{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.35);border-radius:16px;padding:4px 14px 4px 6px}
.star{width:30px;height:30px;background:radial-gradient(circle at 40% 35%,#fff7a0,#ffc400 60%,#e08a00);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.score{font-size:30px;text-shadow:0 3px 0 rgba(0,0,0,.35);-webkit-text-stroke:1px rgba(0,0,0,.25)}
.mult{font-size:18px;background:#ff8a00;border-radius:10px;padding:2px 10px;box-shadow:0 3px 0 #a35200}
.mult.x2{background:#ff2fa0;box-shadow:0 3px 0 #a0005d;animation:pulse .6s infinite}
#h-powers{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 130px);display:flex;flex-direction:column;gap:8px}
.pw{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);border-radius:12px;padding:4px 8px 4px 4px}
.pw canvas{width:30px;height:30px}
.pw .t{width:70px;height:8px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden}
.pw .t i{display:block;height:100%;background:#7ee84a}
.boardbtn{position:absolute;right:14px;bottom:calc(env(safe-area-inset-bottom) + 18px);width:70px;height:70px;border-radius:50%;border:3px solid #fff;background:linear-gradient(#b06bff,#6a2bd9);color:#fff;font:inherit;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 #3d158a}
.boardbtn .ico{width:34px;height:24px;margin:0}
.boardbtn.off{opacity:.35}
#h-msg{position:absolute;top:30%;width:100%;text-align:center;font-size:30px;text-shadow:0 3px 0 rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
#h-tut{position:absolute;top:24%;width:100%;text-align:center;font-size:22px;text-shadow:0 2px 0 rgba(0,0,0,.5);opacity:0;transition:opacity .4s}
.panel{background:linear-gradient(#2a8cf0,#1a5fc0);border:4px solid #fff;border-radius:28px;padding:20px 18px;width:min(92vw,380px);display:flex;flex-direction:column;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:pop .25s ease-out}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.panel h2{margin:0 0 12px;font-size:32px;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.stat{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:20px;padding:6px 10px;background:rgba(0,0,0,.18);border-radius:12px;margin:3px 0}
.newbest{color:#ffe95a;font-size:24px;margin:8px;display:none;animation:pulse .8s infinite}
.ring{position:relative;width:110px;height:110px;margin:4px 0 10px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:rgba(255,255,255,.25)}.ring .fg{stroke:#7ee84a;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:0}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px}
.charinfo{display:flex;align-items:center;gap:12px;text-align:center;background:rgba(0,0,0,.3);border-radius:20px;padding:10px 12px;margin-bottom:8px}
.charinfo h2{margin:0;font-size:30px}
.arrow{pointer-events:auto;width:52px;height:52px;border-radius:50%;border:0;background:#fff;color:#1f7fe0;font:inherit;font-size:34px;line-height:1;box-shadow:0 4px 0 #9bb}
.hint{font-size:14px;opacity:.9;text-align:center;margin-top:6px}
.hint.tiny{font-size:12px;opacity:.75;margin-top:12px;line-height:1.5}
.sh{font-size:34px;margin:6px 0 10px;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.list{width:min(94vw,420px);overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;padding-bottom:20px;pointer-events:auto}
.item{display:flex;align-items:center;gap:10px;background:linear-gradient(#2a8cf0,#1a5fc0);border:3px solid #fff;border-radius:18px;padding:10px}
.item canvas{width:52px;height:52px;flex:none}
.item .mid{flex:1}
.item .nm{font-size:18px}.item .ds{font-size:12px;opacity:.85;margin-top:2px}
.lv{display:flex;gap:3px;margin-top:6px}.lv i{width:22px;height:8px;border-radius:3px;background:rgba(255,255,255,.25)}.lv i.on{background:#7ee84a}
.item .btn{min-width:84px;font-size:16px;padding:10px 8px;margin:0;display:flex;align-items:center;justify-content:center;gap:4px}
.opt{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:20px;padding:8px 6px}
.tog{width:64px;height:34px;border-radius:999px;border:0;background:#0b2a5b;position:relative;cursor:pointer}
.tog::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .15s}
.tog.on{background:#35b01c}.tog.on::after{left:34px}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-bottom:10px}
.dgrid div{background:rgba(0,0,0,.2);border-radius:12px;padding:8px 2px;text-align:center;font-size:12px;border:2px solid transparent}
.dgrid div b{display:block;font-size:15px;margin-top:4px}
.dgrid div.done{opacity:.45}.dgrid div.today{border-color:#ffe95a;background:rgba(255,233,90,.25)}
.dgrid div:last-child{grid-column:span 2}
.bar{width:220px;height:14px;background:rgba(0,0,0,.25);border-radius:8px;margin-top:40px;overflow:hidden;border:2px solid #fff}
.bar i{display:block;height:100%;width:0;background:#ffd31a;transition:width .2s}
#loading{justify-content:center;background:linear-gradient(#3aa8ff,#9fdcff)}
#toast{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);background:rgba(0,0,0,.7);padding:10px 18px;border-radius:14px;font-size:16px;opacity:0;transition:opacity .3s;white-space:nowrap}
#fps{position:absolute;left:4px;bottom:4px;font:12px monospace;opacity:.7}
.sys{font-family:system-ui,"Segoe UI Symbol","Noto Color Emoji",sans-serif}
.btn::before{content:"";position:absolute;left:6%;right:6%;top:3px;height:45%;border-radius:14px 14px 40% 40%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08));pointer-events:none}
.btn.sq::before{border-radius:12px 12px 40% 40%}
.panel{background:linear-gradient(#3aa0ff,#1d63c9 70%,#174fa8);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 3px 0 rgba(255,255,255,.35)}
.panel h2{-webkit-text-stroke:2px #0b2a5b;paint-order:stroke fill;font-size:36px}
.score{-webkit-text-stroke:2px rgba(10,30,70,.7);paint-order:stroke fill}
.pill{border:2px solid rgba(255,255,255,.35)}
.item{box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.2)}

/* ---- motion pass (Oct 31) ---- */
#speedfx{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,0) 52%,rgba(255,255,255,.14) 68%,rgba(20,40,90,.5) 100%)}
#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:5}
#flash.crash{animation:flCrash .55s ease-out}
#flash.save{animation:flSave .45s ease-out}
#flash.go{animation:flGo .5s ease-out}
@keyframes flCrash{0%{opacity:.75;background:#fff}25%{opacity:.5;background:#ff3b2f}100%{opacity:0;background:#ff3b2f}}
@keyframes flSave{0%{opacity:.6;background:#7ef0ff}100%{opacity:0;background:#7ef0ff}}
@keyframes flGo{0%{opacity:.85;background:#fff}100%{opacity:0;background:#fff}}
#h-pop{position:absolute;top:38%;width:100%;text-align:center;font-size:26px;color:#ffe14a;text-shadow:0 3px 0 rgba(0,0,0,.45);opacity:0;pointer-events:none}
#h-pop.go{animation:popUp .8s ease-out}
@keyframes popUp{0%{opacity:0;transform:scale(.4) translateY(10px)}20%{opacity:1;transform:scale(1.25)}35%{transform:scale(1)}100%{opacity:0;transform:translateY(-40px)}}
#h-msg{transition:opacity .3s,transform .3s}
.screen.show{animation:scrIn .32s ease-out both}
@keyframes scrIn{from{opacity:0}}
#title.show .logo{animation:logoIn .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes logoIn{from{opacity:0;transform:translateY(-60px) scale(.7)}}
#title.show .tagline{animation:slideUp .5s .15s ease-out both}
#title.show #b-play{animation:btnIn .55s .2s cubic-bezier(.3,1.6,.5,1) both,pulse 1.4s 1s ease-in-out infinite}
#title.show .row .btn{animation:btnIn .5s cubic-bezier(.3,1.6,.5,1) both}
#title.show .row .btn:nth-child(1){animation-delay:.3s}#title.show .row .btn:nth-child(2){animation-delay:.36s}#title.show .row .btn:nth-child(3){animation-delay:.42s}#title.show .row .btn:nth-child(4){animation-delay:.48s}
#title.show .topbar{animation:slideDown .45s ease-out both}
@keyframes btnIn{from{opacity:0;transform:translateY(40px) scale(.6)}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-30px)}}
.screen.modal.show .panel{animation:panelIn .42s cubic-bezier(.3,1.5,.5,1) both}
@keyframes panelIn{from{opacity:0;transform:translateY(70px) scale(.85)}}
.screen.modal.show .panel>*{animation:slideUp .4s ease-out both}
.screen.modal.show .panel>*:nth-child(2){animation-delay:.08s}.screen.modal.show .panel>*:nth-child(3){animation-delay:.14s}.screen.modal.show .panel>*:nth-child(4){animation-delay:.2s}.screen.modal.show .panel>*:nth-child(5){animation-delay:.26s}.screen.modal.show .panel>*:nth-child(6){animation-delay:.32s}.screen.modal.show .panel>*:nth-child(7){animation-delay:.38s}.screen.modal.show .panel>*:nth-child(8){animation-delay:.44s}
#over.show .newbest{animation:slideUp .4s .5s ease-out both,nbPulse .9s 1s ease-in-out infinite}
@keyframes nbPulse{50%{transform:scale(1.12) rotate(-2deg)}}
#hud.show .hud-r,#hud.show #b-pause{animation:slideDown .4s ease-out both}
#hud.show #b-board{animation:slideUp .4s .1s ease-out both}
.coinpill{transition:transform .08s}
.btn{transition:transform .25s cubic-bezier(.3,1.8,.5,1),box-shadow .15s}
.btn:active{transform:translateY(3px) scale(.95)}
#chars.show .charinfo,#shop.show .panel,#shop.show .list{animation:slideUp .4s ease-out both}