*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--tc:#1e6fd9;--glow:0 0 24px color-mix(in srgb,var(--tc) 70%,transparent);--glass:rgba(16,14,40,.62);--line:rgba(255,255,255,.14);--ink:#fff;--gold:#ffc83d;--lime:#7CFF4F;
 --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
html,body{margin:0;height:100%;font-family:Lexend,system-ui,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;overscroll-behavior:none;background:#0b0820}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(11,8,32,.15),rgba(11,8,32,.7)),url(assets/img/ui_bg.jpg) center/cover;z-index:-2}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(60% 40% at 50% 0%,color-mix(in srgb,var(--tc) 35%,transparent),transparent 70%);z-index:-1;pointer-events:none}
#app{min-height:100%;padding:calc(14px + var(--st)) calc(18px + var(--sr)) calc(22px + var(--sb)) calc(18px + var(--sl));max-width:1200px;margin:0 auto}
.screen{animation:enter .42s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes enter{from{opacity:0;transform:translateY(24px) scale(.98)}}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:.01em}
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.05;text-shadow:0 4px 0 rgba(0,0,0,.45)}
h2{font-size:clamp(24px,3.4vw,34px)}h3{font-size:22px}
.muted{opacity:.75}.center{text-align:center}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1}
/* buttons */
.btn{--b:var(--tc);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:68px;padding:12px 28px;border:0;border-radius:24px;cursor:pointer;
 font:800 clamp(21px,2.5vw,27px) Lexend,sans-serif;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--b) 80%,#fff),var(--b) 55%);
 box-shadow:0 7px 0 color-mix(in srgb,var(--b) 55%,#000),0 12px 22px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.35);text-shadow:0 2px 0 rgba(0,0,0,.3);transition:transform .08s,box-shadow .08s,filter .2s}
.btn:active,.btn.pressed{transform:translateY(6px);box-shadow:0 1px 0 color-mix(in srgb,var(--b) 55%,#000),0 4px 10px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.35)}
.btn:disabled{filter:saturate(.4) brightness(.8)}
.btn.go{--b:#2fbf4a}.btn.gold{--b:#f5a623;color:#3a2100;text-shadow:none}.btn.dark{--b:#3b3566}.btn.red{--b:#e0323c}.btn.big{min-height:88px;font-size:clamp(28px,3.6vw,38px);padding:14px 44px;border-radius:30px}
.btn.icon{min-height:60px;min-width:60px;padding:0 16px;border-radius:20px;font-size:26px}
.btn.wide{width:100%}
.pulse{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.04)}}
/* glass */
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1.5px solid var(--line);border-radius:28px;box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.pad{padding:20px}
/* HUD */
.top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 16px 0 8px;border-radius:999px;background:rgba(10,8,30,.7);border:1.5px solid var(--line);font-weight:800;font-size:21px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.chip .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.1)}
.lvl{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px 0 4px;border-radius:999px;background:rgba(10,8,30,.75);border:1.5px solid var(--line)}
.badge{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:24px;color:#2b1800;background:radial-gradient(circle at 35% 30%,#fff3b0,var(--gold) 55%,#c47a00);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 18px rgba(255,200,61,.6)}
.xpbar{width:clamp(90px,14vw,160px);height:16px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.xpbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#7CFF4F,#2fd3ff);box-shadow:0 0 12px #7CFF4F;transition:width 1.1s cubic-bezier(.2,.9,.2,1)}
.lvl small{font-size:15px;opacity:.8;display:block;line-height:1}
/* title */
.logo{font-weight:800;font-size:clamp(46px,8vw,92px);line-height:.92;letter-spacing:.02em;text-transform:uppercase;color:#b6ff5c;
 text-shadow:0 4px 0 #2d7a12,0 8px 0 #143d06,0 0 30px rgba(124,255,79,.55);transform:rotate(-2deg)}
.logo span{display:block;color:#fff;font-size:.42em;text-shadow:0 3px 0 var(--tc),0 0 18px var(--tc);letter-spacing:.12em}
/* home */
.hero{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media (orientation:landscape) and (min-width:900px){.hero{grid-template-columns:1.1fr 1fr}}
.avatar{position:relative;width:min(56vw,340px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 60%,#fff) 0,var(--tc) 45%,transparent 70%);display:grid;place-items:center}
.avatar img{width:86%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:6px solid #fff;box-shadow:0 0 0 6px var(--tc),0 0 50px var(--tc);animation:float 3.2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.ring{position:absolute;inset:-4%;border-radius:50%;border:3px dashed color-mix(in srgb,var(--tc) 70%,#fff);opacity:.5;animation:spin 20s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.daily{display:flex;align-items:center;gap:16px}
.meter{position:relative;height:30px;border-radius:99px;background:rgba(0,0,0,.45);box-shadow:inset 0 3px 6px rgba(0,0,0,.6);overflow:visible;flex:1}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffb300,#ffe066);box-shadow:0 0 16px #ffc83d;transition:width 1s}
.meter .mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:#2a2550;border:3px solid #fff3;}
.meter .mk.got{background:var(--gold);border-color:#fff;box-shadow:0 0 16px var(--gold);animation:pop .5s}
.menu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:24px;cursor:pointer;font-weight:800;font-size:19px;background:rgba(255,255,255,.07);border:1.5px solid var(--line);transition:transform .1s}
.tile b{font-size:40px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}.tile:active{transform:scale(.94)}
/* turtle pick */
.tgrid{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}@media (orientation:landscape) and (min-width:900px){.tgrid{grid-template-columns:repeat(4,1fr)}}
.tcard{--c:#1e6fd9;position:relative;border-radius:30px;padding:18px 12px 20px;text-align:center;cursor:pointer;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#0b0820),#0b0820 85%);border:3px solid color-mix(in srgb,var(--c) 70%,#fff);box-shadow:0 0 28px color-mix(in srgb,var(--c) 55%,transparent),0 10px 0 rgba(0,0,0,.35);transition:transform .15s}
.tcard:active{transform:scale(.96)}.tcard.sel{transform:scale(1.04);box-shadow:0 0 0 5px #fff,0 0 50px var(--c)}
.tcard img{width:82%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:#fff;box-shadow:0 0 0 5px var(--c)}
.tcard h2{margin-top:12px;color:#fff;text-shadow:0 3px 0 var(--c)}.tcard .w8{font-size:19px;opacity:.85;margin-top:4px}
.stat{height:10px;border-radius:9px;background:rgba(255,255,255,.12);margin-top:6px;overflow:hidden}.stat i{display:block;height:100%;background:var(--c)}
/* map */
.map{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:9/14;border-radius:32px;overflow:hidden;background:url(assets/img/ui_map.jpg) center/cover;border:2px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,32,.2),transparent 30%,rgba(11,8,32,.35))}
.node{position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.node .o{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-size:50px;background:radial-gradient(circle at 35% 30%,#fff,var(--tc) 60%);border:5px solid #fff;box-shadow:0 8px 0 rgba(0,0,0,.4),0 0 34px var(--tc)}
.node.done .o{background:radial-gradient(circle at 35% 30%,#fff7c2,var(--gold) 60%);box-shadow:0 8px 0 rgba(0,0,0,.4),0 0 34px var(--gold)}
.node.lock .o{background:#3a3560;filter:grayscale(1);border-color:#888;box-shadow:0 8px 0 rgba(0,0,0,.4)}
.node.next .o{animation:bounce 1.3s ease-in-out infinite}@keyframes bounce{50%{transform:translateY(-10px) scale(1.05)}}
.node .lab{padding:6px 14px;border-radius:99px;background:rgba(10,8,30,.85);font-weight:800;font-size:18px;white-space:nowrap;border:1.5px solid var(--line)}
.stars{font-size:18px;letter-spacing:2px}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:22px 22px calc(26px + var(--sb));border-radius:32px 32px 0 0;animation:up .35s cubic-bezier(.2,.9,.3,1.1)}
@keyframes up{from{transform:translateY(100%)}}
.scrim{position:fixed;inset:0;background:rgba(5,3,20,.6);z-index:19;animation:fade .3s}@keyframes fade{from{opacity:0}}
/* story */
.story{position:relative;min-height:calc(100vh - 40px - var(--st) - var(--sb));display:flex;flex-direction:column}
.art{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,var(--tc),#0b0820);display:grid;place-items:center;font-size:120px;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 2px var(--line)}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.08) translate(-1.5%,-1%)}}
.art .bob{animation:float 2s ease-in-out infinite}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(11,8,32,.55))}
.tcard2{margin-top:-46px;position:relative;z-index:2;padding:22px 24px}
@media (orientation:landscape) and (min-width:900px){.story{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start}.tcard2{margin-top:0}.art{position:sticky;top:calc(10px + var(--st));aspect-ratio:auto;height:calc(100vh - 140px - var(--st) - var(--sb))}}
.prog{display:flex;gap:6px;flex:1;max-width:340px}.prog i{flex:1;height:10px;border-radius:9px;background:rgba(255,255,255,.18)}.prog i.on{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.text{font-size:clamp(30px,3.9vw,40px);line-height:1.65;letter-spacing:.03em;word-spacing:.16em;font-weight:600}
.text>div{margin-bottom:4px}
.w{display:inline-block;padding:0 5px;border-radius:12px;cursor:pointer;transition:background .2s,transform .2s}
.w.on{background:var(--gold);color:#241500;transform:scale(1.12)}.w.hl{background:color-mix(in srgb,var(--tc) 65%,transparent);box-shadow:0 0 12px var(--tc)}
.helper{font-size:18px;opacity:.75}
.act{margin-top:18px;display:grid;gap:14px}
.choice{--b:var(--tc);justify-content:flex-start;text-align:left;width:100%;min-height:80px}
/* quiz */
.quiz{border-radius:28px;padding:20px;background:linear-gradient(180deg,#2a2058,#17123a);border:2px solid #ffffff22;box-shadow:0 0 0 4px color-mix(in srgb,var(--tc) 50%,transparent),0 18px 40px rgba(0,0,0,.5);animation:pop .4s}
.quiz .q{font-size:clamp(26px,3.4vw,34px);font-weight:800;line-height:1.3}
.opt{--b:#4b3f8f;width:100%;justify-content:flex-start;text-align:left;min-height:78px;margin-top:12px}
.opt .k{flex:none;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:22px}
.opt.right{--b:#2fbf4a;animation:pop .4s}.opt.wrong{--b:#9a3550;animation:shake .4s}
.hint{margin-top:14px;padding:14px 18px;border-radius:20px;background:rgba(255,200,61,.16);border:1.5px solid rgba(255,200,61,.5);font-size:22px}
@keyframes pop{0%{transform:scale(.7);opacity:.2}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
/* boss */
.bossbg::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(70% 50% at 50% 30%,rgba(255,40,80,.35),transparent 70%),linear-gradient(180deg,#22052e,#0b0820)}
.vs{font-size:clamp(34px,6vw,64px);font-weight:800;text-align:center;color:#ff4d6d;text-shadow:0 4px 0 #5a0018,0 0 24px #ff2d55;letter-spacing:.06em}
.hpw{display:flex;align-items:center;gap:12px;margin:12px 0}
.hpw .nm{font-weight:800;font-size:22px;white-space:nowrap}
.hpb{flex:1;height:34px;border-radius:12px;background:#300a18;border:3px solid #fff;display:flex;gap:4px;padding:4px;box-shadow:0 0 18px rgba(255,45,85,.5)}
.hpb i{flex:1;border-radius:6px;background:linear-gradient(180deg,#ff8a8a,#e0323c);transition:.4s}.hpb i.gone{background:rgba(255,255,255,.08);transform:scaleY(.6)}
.bossart{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:16/9;background:#300a2e;display:grid;place-items:center;font-size:140px;box-shadow:0 0 0 3px #ff4d6d,0 0 50px rgba(255,45,85,.5)}
.bossart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bossart.hit img,.bossart.hit .bm{animation:hitf .55s}
@keyframes hitf{15%{filter:brightness(2.6) saturate(0);transform:scale(1.06) translateX(-14px)}45%{transform:translateX(12px)}}
.shake{animation:scr .45s}@keyframes scr{20%{transform:translate(-12px,6px)}40%{transform:translate(10px,-8px)}60%{transform:translate(-8px,4px)}80%{transform:translate(6px,-2px)}}
.dmg{position:absolute;font-size:72px;font-weight:800;color:#ffe066;text-shadow:0 5px 0 #b33c00,0 0 20px #ff8a00;z-index:5;animation:dmg 1s ease-out forwards;pointer-events:none}
@keyframes dmg{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.3);opacity:1}100%{transform:translateY(-120px) scale(1);opacity:0}}
.slash{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(120deg,transparent 45%,#fff 50%,transparent 55%);animation:slash .35s ease-out forwards}@keyframes slash{from{transform:translateX(-100%)}to{transform:translateX(100%);opacity:0}}
/* rewards */
.reward{text-align:center;padding-top:4vh}
.trophy{font-size:140px;display:inline-block;animation:pop .6s,float 3s 0.6s ease-in-out infinite;filter:drop-shadow(0 0 30px var(--gold))}
.rays{position:fixed;inset:-50%;z-index:-1;background:repeating-conic-gradient(from 0deg,rgba(255,200,61,.09) 0 10deg,transparent 10deg 20deg);animation:spin 30s linear infinite}
.loot{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:22px 0}
.loot .glass{padding:16px 24px;font-size:30px;font-weight:800;animation:pop .5s both}
/* cards / stuff */
.cgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ccard{--r:#7a8;position:relative;aspect-ratio:3/4;border-radius:24px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
 background:linear-gradient(160deg,color-mix(in srgb,var(--r) 55%,#1a1540),#120e30 75%);border:3px solid var(--r);box-shadow:0 0 22px color-mix(in srgb,var(--r) 60%,transparent),0 8px 0 rgba(0,0,0,.35);overflow:hidden}
.ccard::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--r) 50%,transparent),transparent 30%);animation:spin 6s linear infinite;opacity:.6}
.ccard>*{position:relative}.ccard .e{font-size:68px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}.ccard h3{font-size:20px}
.ccard .rar{font-size:14px;font-weight:800;letter-spacing:.14em;padding:4px 10px;border-radius:99px;background:var(--r);color:#120e30}
.ccard.lock{--r:#555;filter:grayscale(1) brightness(.6)}.ccard.lock::before{display:none}.ccard.lock .e{filter:blur(4px) brightness(.3)}
.ccard .when{font-size:15px;opacity:.85}
.tabs{display:flex;gap:10px;margin:12px 0 18px;flex-wrap:wrap}.tab{padding:10px 18px;border-radius:99px;font-weight:800;font-size:18px;background:rgba(255,255,255,.08);border:1.5px solid var(--line)}
/* toast, overlay, confetti */
#toast{position:fixed;left:50%;top:calc(16px + var(--st));transform:translate(-50%,-300%);z-index:50;padding:14px 26px;border-radius:22px;font:800 24px Lexend;color:#2b1800;background:linear-gradient(180deg,#fff3b0,var(--gold));box-shadow:0 8px 0 #b37400,0 14px 30px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.2,.9,.3,1.3);text-align:center;max-width:90vw}
#toast.show{transform:translate(-50%,0)}
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,3,20,.88);animation:fade .25s}
.overlay video{max-width:100%;max-height:78vh;border-radius:24px;box-shadow:0 0 0 3px var(--tc),0 0 60px var(--tc)}
.modal{max-width:580px;width:100%;text-align:center;padding:28px;animation:pop .45s}
.parts{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.pt{position:absolute;width:12px;height:12px;border-radius:3px;will-change:transform}
.emo{position:fixed;top:-40px;font-size:34px;z-index:44;pointer-events:none;animation:fall 2.4s linear forwards}@keyframes fall{to{transform:translateY(115vh) rotate(540deg)}}
/* parent */
.dash{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}@media(min-width:1000px){.dash{grid-template-columns:repeat(4,1fr)}}
.kpi{padding:18px 20px}.kpi .l{font-size:16px;opacity:.7;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.kpi .v{font-size:38px;font-weight:800;margin-top:4px}.kpi .s{font-size:16px;opacity:.75}
.kpi .v em{font-style:normal;font-size:20px;opacity:.7}
.panel{padding:22px;margin-top:16px}.panel h3{margin-bottom:12px}
.chart{display:flex;align-items:flex-end;gap:8px;height:190px;padding-top:10px;position:relative}
.chart .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;font-size:13px;opacity:.95}
.chart .b i{width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#ffe066,#f5a623);min-height:4px}.chart .b i.full{background:linear-gradient(180deg,#9dff7a,#2fbf4a);box-shadow:0 0 12px rgba(124,255,79,.4)}
.goal-line{position:absolute;left:0;right:0;border-top:2px dashed rgba(255,255,255,.35)}
.cols{display:grid;gap:16px;grid-template-columns:1fr}@media(min-width:900px){.cols{grid-template-columns:1fr 1fr}}
input,select{font:600 21px Lexend;padding:12px 16px;border-radius:16px;border:1.5px solid var(--line);width:100%;min-height:58px;background:rgba(255,255,255,.08);color:#fff;outline:none}
input:focus{border-color:var(--tc);box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 40%,transparent)}
label{display:block;margin:14px 0 6px;font-weight:600;font-size:17px;opacity:.85}
.wordc{display:flex;flex-wrap:wrap;gap:8px}.wordc span{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.1);font-size:20px;font-weight:600}.wordc b{opacity:.6;font-size:15px;margin-left:6px}
.feed{max-height:360px;overflow:auto}.feed div{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:17px}.feed time{opacity:.6;white-space:nowrap;min-width:120px}
.keypad{display:grid;grid-template-columns:repeat(3,96px);gap:14px;justify-content:center;margin-top:20px}.keypad .btn{min-height:88px;font-size:32px;--b:#3b3566}
.dots{display:flex;gap:16px;justify-content:center;margin:18px 0}.dots i{width:22px;height:22px;border-radius:50%;border:3px solid #fff8}.dots i.f{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px var(--lime)}
.donut{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:28px}
.donut span{width:84px;height:84px;border-radius:50%;background:#17123a;display:grid;place-items:center}
.opt.right:disabled{filter:none}
.invid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .4s}.invid.fadeout{opacity:0}
.vbtn{position:absolute;right:12px;bottom:12px;z-index:3;width:54px;height:54px;border-radius:50%;border:2px solid #fff8;background:rgba(10,8,30,.65);color:#fff;font-size:24px;cursor:pointer}
.comic{position:absolute;z-index:6;font-weight:800;color:#ffe066;-webkit-text-stroke:4px #2b0b00;paint-order:stroke fill;text-shadow:0 6px 0 #b33c00,0 0 30px #ff8a00;transform:translate(-50%,-50%) rotate(var(--r));animation:comic 1.1s cubic-bezier(.2,1.6,.4,1) forwards;pointer-events:none;white-space:nowrap}
@keyframes comic{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(.2);opacity:0}20%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.25);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-80%) rotate(var(--r)) scale(1);opacity:0}}
.wslash{position:absolute;z-index:5;top:38%;left:-30%;display:flex;align-items:center;gap:6px;animation:wsl .6s cubic-bezier(.3,.9,.3,1) forwards;pointer-events:none}
.wslash img{width:90px;height:90px;border-radius:50%;border:4px solid var(--tc);box-shadow:0 0 30px var(--tc)}.wslash b{font-size:80px;filter:drop-shadow(0 0 14px #fff)}
@keyframes wsl{0%{transform:translateX(0) rotate(-10deg)}60%{transform:translateX(110%) rotate(10deg)}100%{transform:translateX(160%);opacity:0}}
.bossart.freeze img,.bossart.freeze video{filter:brightness(3) saturate(0)}
.bossart.battered img{filter:saturate(1.3) hue-rotate(-15deg) contrast(1.1);transform:rotate(-2deg)}
.bossart.wrecked img{filter:saturate(.7) sepia(.35) contrast(1.2);transform:rotate(3deg) scale(1.02)}
.mood{position:absolute;right:14px;top:10px;z-index:4;font-size:54px;filter:drop-shadow(0 4px 6px #000)}
.bossart.laugh{animation:laugh .9s}@keyframes laugh{20%,60%{transform:translateY(-8px) scale(1.03)}40%,80%{transform:translateY(4px)}}
.chunk{position:fixed;z-index:60;border-radius:6px;background:linear-gradient(180deg,#ff8a8a,#e0323c);animation:chunk .9s ease-in forwards;pointer-events:none}
@keyframes chunk{to{transform:translate(120px,300px) rotate(540deg) scale(.5);opacity:0}}
#combo{color:#ffe066;border-color:#ff8a00}#combo.pop{animation:pop .4s}
.celeb{position:fixed;right:calc(16px + var(--sr));bottom:calc(16px + var(--sb));width:min(40vw,340px);aspect-ratio:16/9;border-radius:22px;overflow:hidden;z-index:30;box-shadow:0 0 0 3px var(--gold),0 0 40px var(--gold);animation:pop .4s}
.celeb.out{opacity:0;transition:opacity .4s}.celeb .vbtn{width:40px;height:40px;font-size:18px}
/* shop */
.shopgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}.shopitem{padding:18px}.shopitem h2{margin:6px 0 0}
.shoptop{display:flex;align-items:center;gap:18px;margin-top:10px}.avatar.sm{width:110px;height:110px;margin:0}.avatar{position:relative}
.avatar .gear{position:absolute;top:-10px;right:-6px;font-size:38px;filter:drop-shadow(0 2px 4px #000)}
.lvdots{display:flex;gap:6px}.lvdots i{width:22px;height:22px;border-radius:50%;background:#ffffff22;border:2px solid #ffffff55}.lvdots i.on{background:#ffc83d;border-color:#ffe28a;box-shadow:0 0 10px #ffc83d}
.buy.poor{opacity:.55}.upstar{display:inline-block;background:linear-gradient(#ffd84d,#ff9f1c);color:#3a2200;border-radius:12px;padding:2px 10px;font-size:18px;font-weight:900;margin-left:8px;vertical-align:middle}
.aura1 img,.card.aura1{box-shadow:0 0 22px 6px var(--tc)}.aura2 img,.card.aura2{box-shadow:0 0 30px 10px #ffc83d}
.aura3 img,.card.aura3{animation:rainbow 2.4s linear infinite}@keyframes rainbow{0%{box-shadow:0 0 34px 12px #ff4d6d}33%{box-shadow:0 0 34px 12px #ffc83d}66%{box-shadow:0 0 34px 12px #2fd3ff}100%{box-shadow:0 0 34px 12px #ff4d6d}}
.powers{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.pw{min-height:56px;font-size:20px}.opt.gone{opacity:.25;text-decoration:line-through}
body.pw1 .comic{transform:scale(1.15)}body.pw2 .comic{transform:scale(1.3)}body.pw3 .comic{transform:scale(1.5);color:#ffe066}
.tbl{width:100%;border-collapse:collapse;font-size:16px}.tbl td,.tbl th{padding:6px;border-bottom:1px solid #ffffff22;text-align:left}
@media (max-width:700px){.shopgrid{grid-template-columns:1fr}}
/* math */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}.tier{padding:14px;text-align:center;color:#fff;border:2px solid #ffffff33;cursor:pointer;min-height:150px;position:relative}
.tier .tn{font-size:46px;font-weight:900}.tier .ts{font-size:20px}.tier .tb{font-size:15px;opacity:.8;margin-top:4px}.tier.locked{opacity:.45}.tier.focus{border-color:#ffc83d;box-shadow:0 0 18px #ffc83d88}
.tier .fb{position:absolute;top:6px;right:8px;font-size:14px;background:#ffc83d;color:#3a2200;border-radius:10px;padding:2px 8px;font-weight:800}
.big3{font-size:72px;font-weight:900;letter-spacing:2px}.mopts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.mo{font-size:44px!important;min-height:110px;justify-content:center}
.arr{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.grp{background:#ffffff14;border-radius:12px;padding:6px 10px;font-size:22px}.gn{font-size:14px;opacity:.7;margin-right:6px}
.nline{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.nb{min-width:52px;text-align:center;padding:8px;border-radius:10px;background:#ffffff14;font-size:22px;font-weight:800}.nb.on{background:#2fd3ff44;border:2px solid #2fd3ff}
.trick{margin-top:12px;font-size:24px;background:#ffc83d22;border:2px dashed #ffc83d;border-radius:14px;padding:10px}.chipf{display:inline-block;margin:4px;padding:6px 10px;border-radius:10px;background:#ffffff14}
.mboss{position:relative;max-width:520px;margin:6px auto}.mboss img{width:100%;border-radius:18px}.mboss .bm{position:absolute;left:10px;top:6px;font-size:44px}.mboss.hit{animation:shake .4s}
@media (max-width:700px){.tiers{grid-template-columns:repeat(3,1fr)}.big3{font-size:56px}}
.lookcard{display:flex;gap:18px;align-items:center;margin-top:14px}.lookbig{width:200px;height:200px;border-radius:20px;object-fit:cover;border:3px solid #ffffff44}
.lookln{font-size:22px;margin:4px 0}.nextgear{color:#ffc83d;font-weight:800;font-size:17px;margin-top:4px}
body.wglow .wslash b{filter:drop-shadow(0 0 14px var(--wg)) drop-shadow(0 0 26px var(--wg))}body.wglow .wslash img{box-shadow:0 0 30px 10px var(--wg)}
body.wglow .comic{text-shadow:0 0 16px var(--wg),3px 3px 0 #000}
.nl20{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin:12px 0}.nt{width:36px;height:40px;display:grid;place-items:center;border-radius:8px;background:#ffffff18;font-weight:800;font-size:18px}
.nt.hop{background:#2fd3ff55}.nt.st{background:#ffc83d;color:#222}.nt.en{background:#3ddc84;color:#062}
.tfs{display:flex;justify-content:center;margin:10px 0}.tframe{display:grid;grid-template-columns:repeat(5,34px);gap:5px;padding:8px;border:3px solid #fff8;border-radius:10px}
.tframe i{width:34px;height:34px;border-radius:50%;display:block}.tframe .da{background:#2f8cff}.tframe .db{background:#ff9f1c}.tframe .dx{background:#ff4d6d55;position:relative}.tframe .dx:after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900}
.b10row{justify-content:center;gap:18px;align-items:center;margin:10px 0}.b10{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px;max-width:260px;padding:8px;background:#ffffff12;border-radius:10px}
.b10 .rod{width:12px;height:90px;background:repeating-linear-gradient(#2f8cff 0 8px,#1b5fc0 8px 9px);border-radius:3px}.b10 .cube{width:12px;height:12px;background:#ff9f1c;border-radius:2px}.b10 b{width:100%;text-align:center;font-size:22px}
.steps{font-size:20px;line-height:1.5}
/* ---- home v2 ---- */
.h2wrap{position:relative;min-height:100vh}
.screen:has(.h2wrap){animation:none;transform:none}
.h2bg{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;filter:saturate(1.15)}
.h2shade{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,8,30,.25),rgba(10,8,30,.55) 55%,rgba(10,8,30,.85))}
.h2fx{position:fixed;inset:0;z-index:1;pointer-events:none}
.h2p{position:absolute;bottom:-30px;font-style:normal;color:#ffd36b;opacity:.8;animation:h2rise linear infinite}
.h2p.sp{width:6px;height:6px;border-radius:50%;background:#ffb13b;box-shadow:0 0 10px #ff8a1a}
.h2p.ns{font-size:26px;color:#cfe8ff;text-shadow:0 0 10px #7ad7ff}
@keyframes h2rise{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-110vh) rotate(720deg);opacity:0}}
.h2top{position:relative;z-index:3;display:flex;justify-content:flex-end}
.h2main{position:relative;z-index:2;display:grid;gap:18px;align-items:center}
@media (orientation:landscape) and (min-width:900px){.h2main{grid-template-columns:1fr 1fr}}
.h2title{font-weight:800;text-align:center;font-size:clamp(40px,7.5vw,84px);line-height:.95;letter-spacing:.03em;color:#b6ff5c;
 text-shadow:0 4px 0 #1b4d12,0 0 22px #7CFF4F,0 0 48px var(--tc);animation:h2glow 2.4s ease-in-out infinite}
.h2title.sm{font-size:clamp(34px,6vw,56px)}
@keyframes h2glow{50%{text-shadow:0 4px 0 #1b4d12,0 0 34px #b6ff5c,0 0 80px var(--tc);transform:scale(1.02)}}
.h2av{position:relative;width:min(52vw,300px);aspect-ratio:1;margin:18px auto 0;display:grid;place-items:center}
.h2av img{width:88%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:6px solid #fff;box-shadow:0 0 0 6px var(--tc),0 0 60px var(--tc);animation:float 3.2s ease-in-out infinite}
.h2right{display:grid;gap:14px}
.h2hello h2{margin:0;font-size:28px}.h2hello p{margin:4px 0 10px;font-size:18px}
.h2stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.h2stats b{display:block;font-size:24px}.h2stats span{font-size:14px;opacity:.75}
.h2xp{height:12px;border-radius:9px;background:rgba(255,255,255,.12);margin:12px 0 4px;overflow:hidden}.h2xp i{display:block;height:100%;background:linear-gradient(90deg,#7CFF4F,#ffc83d)}
.h2play{font-size:30px;min-height:84px;box-shadow:0 0 30px #7CFF4F,0 0 60px rgba(124,255,79,.5);animation:h2pulse 1.6s ease-in-out infinite}
@keyframes h2pulse{50%{box-shadow:0 0 50px #b6ff5c,0 0 100px rgba(124,255,79,.7);transform:scale(1.03)}}
.h2menu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.h2map{cursor:pointer}.h2nodes{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:10px}
.h2node{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.1)}
.h2node.open{background:var(--tc);box-shadow:0 0 16px var(--tc);animation:h2pulse 1.6s infinite}.h2node.lock{opacity:.5}
.h2dash{flex:1;min-width:6px;height:3px;background:rgba(255,255,255,.3);border-radius:2px}
.h2intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#07061a;pointer-events:none;animation:h2out .6s ease 2.6s forwards}
.h2intro .h2title{animation:h2zoom 2.4s cubic-bezier(.2,.8,.2,1) both}
.h2slash{position:absolute;left:-20%;top:50%;width:140%;height:6px;background:linear-gradient(90deg,transparent,#fff,#7CFF4F,transparent);transform:rotate(-12deg) scaleX(0);animation:h2cut .7s ease .3s forwards;box-shadow:0 0 30px #7CFF4F}
@keyframes h2zoom{0%{transform:scale(2.4);opacity:0;filter:blur(8px)}40%{opacity:1;filter:none}100%{transform:scale(1)}}
@keyframes h2cut{to{transform:rotate(-12deg) scaleX(1)}}
@keyframes h2out{to{opacity:0;visibility:hidden}}
.h2wrap.intro .h2main{animation:h2in .8s ease 2.6s both}@keyframes h2in{from{opacity:0;transform:translateY(30px)}}
.h2login{position:relative;z-index:2;max-width:460px;margin:12vh auto 0;display:grid;gap:12px;text-align:center}
.h2login label{display:grid;gap:6px;text-align:left;font-weight:700;font-size:18px}
.h2login input{font:inherit;font-size:24px;padding:14px 16px;border-radius:16px;border:2px solid var(--line);background:rgba(0,0,0,.35);color:#fff}
.h2err{min-height:26px;color:#ffc83d;font-weight:800;font-size:20px}
@media (prefers-reduced-motion:reduce){.h2p,.h2title,.h2play{animation:none}}
/* anti-guessing */
.glocked [data-o],.glocked.mopts .mo,.mopts.glocked .mo{opacity:.55;filter:saturate(.6)}
.needread{animation:gread 1s ease-in-out infinite;box-shadow:0 0 0 4px #ffc83d,0 0 26px #ffc83d!important}
@keyframes gread{50%{transform:scale(1.12)}}
.ghl{background:linear-gradient(90deg,rgba(255,200,61,.35),rgba(124,255,79,.25));border-radius:12px;box-shadow:0 0 0 3px #ffc83d;transition:.3s}
.gthink{font-weight:800;text-align:center;font-size:20px}

.qcard{position:relative;border:4px solid #ffd23f!important;box-shadow:0 0 0 6px #ff7a1a66,0 0 38px #ffd23faa,0 18px 40px rgba(0,0,0,.5)!important;background:radial-gradient(circle at 50% 0,#3b2a8a,#17123a 70%)!important;animation:qpop .55s cubic-bezier(.2,1.6,.4,1),qglow 2s ease-in-out .6s infinite!important;padding-top:56px!important}
.qcard .q,.qcard .big3{font-size:clamp(32px,4.4vw,46px)!important;line-height:1.25;text-shadow:0 2px 0 #000a}
.qburst{position:absolute;top:-22px;left:50%;transform:translateX(-50%) rotate(-3deg);background:linear-gradient(90deg,#ff3d6e,#ff9a1a);color:#fff;font-weight:900;font-size:26px;letter-spacing:2px;padding:6px 22px;border-radius:999px;border:3px solid #fff;box-shadow:0 0 20px #ff3d6e;animation:qburst .7s cubic-bezier(.2,1.8,.4,1);white-space:nowrap;z-index:3}
@keyframes qpop{0%{transform:scale(.6) rotate(-2deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes qburst{0%{transform:translateX(-50%) scale(0) rotate(-20deg)}100%{transform:translateX(-50%) scale(1) rotate(-3deg)}}
@keyframes qglow{50%{box-shadow:0 0 0 8px #ff7a1a88,0 0 60px #ffd23f,0 18px 40px rgba(0,0,0,.5)}}
.qhide{opacity:0!important;transform:translateY(20px) scale(.9);pointer-events:none}
.qin{animation:qin .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes qin{0%{opacity:0;transform:translateY(20px) scale(.8)}100%{opacity:1;transform:none}}
.gbusy [data-o],.gbusy .mo{pointer-events:auto;filter:saturate(.7)}
.qcard .big3,.mq.qcard .big3{font-size:clamp(44px,6vw,64px)!important}