:root{
  --sat:max(env(safe-area-inset-top),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));--sab:max(env(safe-area-inset-bottom),var(--tg-safe-area-inset-bottom,0px));
  --bg1:#e9e1ff;--bg2:#ffe3d3;--bg3:#d6f7ea;--card:rgba(255,255,255,.72);--card2:#fff;--ink:#3b2d5c;--mute:#8a7fa8;
  --pri1:#ff7eb6;--pri2:#ff9a5a;--acc:#7c5cff;--ok:#22c55e;--bad:#ef4444;
  --c0:#9aa3b5;--c1:#3b82f6;--c2:#a855f7;--c3:#f5b301;--r:24px;--sh:0 10px 30px rgba(90,60,160,.18);
  --tabh:72px;
}
body.dark{--bg1:#1d1636;--bg2:#2a1a33;--bg3:#12272a;--card:rgba(40,32,70,.78);--card2:#2b2350;--ink:#f3eefe;--mute:#a99dcc;--sh:0 10px 30px rgba(0,0,0,.4)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
/* Per-script fonts: Baloo 2 has no Cyrillic/Arabic glyphs, so those languages swap the heading font. */
:root{--fb:Nunito,system-ui,sans-serif;--fh:"Baloo 2",Nunito,system-ui,sans-serif;--fw:800;--side:max(10px,calc(50% - 270px))}
html[lang=ru]{--fh:Nunito,system-ui,sans-serif}
html[lang=fa]{--fb:Vazirmatn,Tahoma,sans-serif;--fh:Vazirmatn,Tahoma,sans-serif;--fw:700}
html[lang=ar]{--fb:"Noto Kufi Arabic",Vazirmatn,Tahoma,sans-serif;--fh:"Noto Kufi Arabic",Vazirmatn,Tahoma,sans-serif;--fw:700}
body{font-family:var(--fb);font-weight:var(--fw);color:var(--ink);background:var(--bg1);user-select:none;-webkit-user-select:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
*{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{border:0;background:none;cursor:pointer}
h1,h2,h3,.big{font-family:var(--fh);margin:0}
.hide{display:none!important}
html[dir=rtl] body{letter-spacing:0;line-height:1.55}
html[dir=rtl] .title,html[dir=rtl] .stage-title,html[dir=rtl] .btn.big,html[dir=rtl] h1,html[dir=rtl] h2{font-weight:900;line-height:1.5}
html[dir=rtl] #tabs small{font-size:12px;font-weight:700}
html[dir=rtl] .btn{line-height:1.5}
html[dir=rtl] #hint{border-radius:18px 18px 4px 18px}
body.busy .btn.big,body.busy .press{cursor:progress}
.upg-wheel{width:230px;height:230px;border-radius:50%;margin:14px auto;border:8px solid #fff;box-shadow:var(--sh);transition:transform 4s cubic-bezier(.12,.9,.18,1);display:grid;place-items:center;position:relative}
.upg-wheel span{width:96px;height:96px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:50px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.burn{font-size:120px;animation:burn 1.6s ease-in forwards}
@keyframes burn{0%{filter:none}40%{filter:sepia(1) saturate(4) hue-rotate(-30deg)}100%{transform:scale(.2) translateY(60px);opacity:0;filter:brightness(0)}}
.gift-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:20px;background:var(--card2);box-shadow:var(--sh);font-size:12px}
.gift-tile b{font-size:40px;animation:bob 3s ease-in-out infinite}
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.hub .btn{flex-direction:column;padding:10px 4px;font-size:12px;gap:2px}.hub .btn span{font-size:24px}.hub .lk{font-size:10px;opacity:.8;white-space:nowrap}
.card.pass,.pass{background:linear-gradient(135deg,#7c5cff,#ff7eb6);color:#fff}.pass .mute{color:rgba(255,255,255,.85)}

/* animated background */
#bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3),var(--bg1));background-size:400% 400%;animation:bgmove 18s ease infinite;overflow:hidden}
#bg i{position:absolute;width:140px;height:60px;border-radius:60px;background:rgba(255,255,255,.45);filter:blur(2px);animation:cloud 40s linear infinite}
body.dark #bg i{background:rgba(255,255,255,.06)}
#bg i::before{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:inherit;left:25px;top:-30px}
#bg i:nth-child(1){top:8%;animation-duration:46s}#bg i:nth-child(2){top:28%;animation-duration:60s;animation-delay:-20s;transform:scale(.7)}
#bg i:nth-child(3){top:52%;animation-duration:52s;animation-delay:-35s}#bg i:nth-child(4){top:74%;animation-duration:70s;animation-delay:-10s;transform:scale(.6)}
#bg i:nth-child(5),#bg i:nth-child(6){width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:40vw 10vh #fff,70vw 30vh #fff,20vw 60vh #fff,85vw 75vh #fff,10vw 85vh #fff,55vw 50vh #fff;animation:twinkle 3s ease-in-out infinite}
#bg i:nth-child(5)::before,#bg i:nth-child(6)::before{display:none}
#bg i:nth-child(6){left:30vw;top:20vh;animation-delay:-1.5s}
@keyframes bgmove{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes cloud{from{left:-180px}to{left:110vw}}
@keyframes twinkle{50%{opacity:.2}}

/* header */
#top{position:fixed;top:0;left:var(--side);right:var(--side);z-index:20;display:flex;gap:8px;align-items:center;padding:calc(10px + var(--sat)) 2px 8px}
.lvl{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding-block:4px;padding-inline:4px 10px;box-shadow:var(--sh);backdrop-filter:blur(8px)}
.lvl{position:relative}
.ava{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex-shrink:0;color:#fff;font-family:var(--fh);font-size:15px;background:linear-gradient(135deg,var(--acc),var(--pri1))}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ava.big{width:92px;height:92px;font-size:40px;margin:6px auto 8px;box-shadow:0 0 0 4px var(--card2),var(--sh)}
#lvlNum{position:absolute;bottom:0;inset-inline-start:24px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:linear-gradient(135deg,var(--acc),var(--pri1));color:#fff;font:800 10px/17px var(--fb);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--card2)}
.xp{width:54px;height:8px;border-radius:9px;background:rgba(124,92,255,.18);overflow:hidden}
.xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--pri1));border-radius:9px;transition:width .6s cubic-bezier(.3,1.6,.5,1)}
.pill{display:flex;align-items:center;gap:4px;background:var(--card);border-radius:999px;padding:7px 11px;box-shadow:var(--sh);font-size:14px;backdrop-filter:blur(8px)}
.coins{margin-inline-start:auto;background:linear-gradient(135deg,#ffd76a,#ffb13b);color:#5a3a00}
.coins .plus{width:18px;height:18px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:14px;line-height:1;margin-inline-start:2px}
.ico{width:36px;height:36px;border-radius:50%;background:var(--card);box-shadow:var(--sh);font-size:16px}

/* layout */
/* --dock: strip above the tabs reserved for the mascot, so it never covers content */
:root{--dock:58px}
#view{position:absolute;inset:0 0 calc(var(--tabh) + 10px + var(--dock) + var(--sab)) 0;overflow-y:auto;overflow-x:hidden;padding:calc(64px + var(--sat)) calc(var(--side) + 4px) 0;-webkit-overflow-scrolling:touch;--fade:linear-gradient(transparent calc(44px + var(--sat)),#000 calc(62px + var(--sat)),#000 calc(100% - 18px),transparent);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
#view::after{content:"";display:block;height:20px}
.screen{animation:pagein .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes pagein{from{opacity:0;transform:translateY(24px) scale(.97)}}
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--sh);margin-bottom:14px;backdrop-filter:blur(10px);position:relative}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.col{display:flex;flex-direction:column;gap:8px}
.center{text-align:center}.mute{color:var(--mute);font-size:13px}.wrap{flex-wrap:wrap}
.title{font-family:var(--fh);font-size:20px;margin-bottom:10px;display:flex;align-items:center;gap:8px}

/* tabs */
#tabs{position:fixed;left:var(--side);right:var(--side);bottom:calc(10px + var(--sab));height:var(--tabh);z-index:20;display:flex;background:var(--card);border-radius:26px;box-shadow:var(--sh);backdrop-filter:blur(14px);padding:6px}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;position:relative;transition:background .3s}
#tabs span{font-size:24px;transition:transform .4s cubic-bezier(.3,2,.5,1)}
#tabs small{font-size:11px;color:var(--mute)}
#tabs .on{background:linear-gradient(135deg,rgba(255,126,182,.25),rgba(124,92,255,.25))}
#tabs .on span{transform:translateY(-4px) scale(1.25)}#tabs .on small{color:var(--ink)}
.badge{position:absolute;top:4px;right:18%;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center;padding:0 4px;animation:pulse 1.4s infinite}
.badge:empty{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;border-radius:18px;background:var(--card2);box-shadow:0 4px 0 rgba(0,0,0,.08),var(--sh);font-size:15px;transition:transform .12s}
.btn:active,.press:active{transform:scale(.92) translateY(2px)}
.btn.pri{color:#fff;background:linear-gradient(135deg,var(--pri1),var(--pri2));box-shadow:0 5px 0 #d4567f,0 10px 24px rgba(255,110,150,.45)}
.btn.vio{color:#fff;background:linear-gradient(135deg,#8b6bff,#5b8cff);box-shadow:0 5px 0 #5039c4,0 10px 24px rgba(110,90,255,.4)}
.btn.gold{color:#5a3a00;background:linear-gradient(135deg,#ffe07a,#ffb13b);box-shadow:0 5px 0 #c98a14,0 10px 24px rgba(255,180,60,.4)}
.btn.big{width:100%;padding:16px;font-size:20px;font-family:var(--fh);border-radius:22px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:14px}
.btn[disabled]{filter:grayscale(1);opacity:.55}.btn.dim{opacity:.6}
.glow{position:relative;overflow:hidden;animation:breathe 2s ease-in-out infinite}
.glow::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);animation:sweep 2.6s infinite}
@keyframes breathe{50%{transform:scale(1.03)}}
@keyframes sweep{60%,100%{left:130%}}
@keyframes pulse{50%{transform:scale(1.15)}}

/* items */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px}
.it{--rc:var(--c0);position:relative;aspect-ratio:1;border-radius:20px;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.55));border:3px solid var(--rc);box-shadow:0 0 0 0 var(--rc),0 6px 14px rgba(0,0,0,.12),inset 0 -6px 0 rgba(0,0,0,.05);transition:transform .2s}
body.dark .it{background:radial-gradient(circle at 35% 30%,#3d3370,#2a2150)}
.it .em{font-size:34px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.2));animation:bob 3s ease-in-out infinite;animation-delay:calc(var(--d,0s)*-1)}
.it .q{position:absolute;bottom:-6px;right:-6px;background:var(--ink);color:#fff;font-size:11px;border-radius:10px;padding:1px 6px;min-width:20px;text-align:center}
body.dark .it .q{background:#fff;color:#2b2350}
.it .rb{position:absolute;top:-7px;left:-7px;font-size:12px}
.it:active{transform:scale(.88)}
.it.r1{--rc:var(--c1);box-shadow:0 0 12px rgba(59,130,246,.45),0 6px 14px rgba(0,0,0,.12)}
.it.r2{--rc:var(--c2);box-shadow:0 0 16px rgba(168,85,247,.55),0 6px 14px rgba(0,0,0,.12)}
.it.r3{--rc:var(--c3);box-shadow:0 0 20px rgba(245,179,1,.7),0 6px 14px rgba(0,0,0,.12);overflow:hidden}
.it.r3::after{content:"";position:absolute;inset:-20%;background:linear-gradient(110deg,transparent 40%,rgba(255,240,180,.9) 50%,transparent 60%);animation:shimmer 2.4s infinite;pointer-events:none}
.it.r4{border-color:transparent;background-clip:padding-box;box-shadow:0 0 22px rgba(255,120,220,.7)}
.it.r4::before{content:"";position:absolute;inset:-3px;border-radius:20px;padding:3px;background:conic-gradient(red,orange,yellow,lime,cyan,blue,magenta,red);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hue 3s linear infinite}
.it.r4 .em{animation:bob 3s ease-in-out infinite,hue 4s linear infinite}
.it.r2 .em::after,.it.r3 .em::after,.it.r4 .em::after{content:"✦";position:absolute;font-size:12px;color:#fff;text-shadow:0 0 6px var(--rc);top:-4px;right:-10px;animation:spark 1.8s ease-in-out infinite}
.it .em{position:relative}
.it.lock{border-color:rgba(0,0,0,.08);box-shadow:none;background:rgba(0,0,0,.05)}
.it.lock .em{filter:brightness(0) opacity(.18);animation:none}
.it.lock::after,.it.lock::before{display:none}
.it.can{animation:canpulse 1.2s ease-in-out infinite}
.it.sel{transform:scale(.9);opacity:.5}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes shimmer{from{transform:translateX(-80%)}to{transform:translateX(80%)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.2) rotate(90deg)}}
@keyframes canpulse{50%{box-shadow:0 0 0 6px rgba(124,92,255,.25),0 6px 14px rgba(0,0,0,.12)}}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.chip{padding:7px 12px;border-radius:14px;background:var(--card);white-space:nowrap;font-size:13px;box-shadow:var(--sh)}
.chip.on{background:var(--ink);color:#fff}
body.dark .chip.on{background:#fff;color:#2b2350}
.bar{height:12px;border-radius:9px;background:rgba(124,92,255,.15);overflow:hidden}
.bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#7c5cff,#ff7eb6);transition:width .8s cubic-bezier(.3,1.4,.5,1)}

/* forge */
.slots{display:flex;justify-content:center;gap:14px;margin:6px 0 -10px;position:relative;z-index:2}
.slot{width:70px;height:70px;border-radius:22px;border:3px dashed rgba(124,92,255,.35);display:grid;place-items:center;background:rgba(255,255,255,.3)}
.slot .it{width:100%;animation:snap .45s cubic-bezier(.3,2,.5,1)}
@keyframes snap{from{transform:scale(.3)}}
.caul{position:relative;width:230px;height:190px;margin:0 auto}
.caul .pot{position:absolute;left:15px;right:15px;bottom:0;height:150px;border-radius:40% 40% 48% 48%/30% 30% 70% 70%;background:radial-gradient(circle at 35% 30%,#6c5a9e,#2d2150 70%);box-shadow:inset -14px -18px 0 rgba(0,0,0,.25),0 18px 30px rgba(45,33,80,.4)}
.caul .rim{position:absolute;left:5px;right:5px;top:22px;height:44px;border-radius:50%;background:linear-gradient(#8a76c9,#4b3b7e);box-shadow:0 6px 0 #3a2c66}
.caul .liq{position:absolute;left:22px;right:22px;top:28px;height:32px;border-radius:50%;background:radial-gradient(circle,#b9ff9c,#5ee08b 60%,#2fbf71);overflow:hidden;animation:liq 2s ease-in-out infinite}
.caul .liq b{position:absolute;bottom:-10px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.75);animation:bubble 1.6s ease-in infinite}
.caul .liq b:nth-child(2){left:40%;animation-delay:-.5s;width:10px;height:10px}.caul .liq b:nth-child(3){left:70%;animation-delay:-1s}.caul .liq b:nth-child(1){left:18%}
.caul .glowc{position:absolute;left:50%;top:40px;width:220px;height:120px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(140,255,170,.55),transparent);animation:pulse 2.4s ease-in-out infinite;pointer-events:none}
.caul .legs{position:absolute;bottom:-10px;left:50px;right:50px;height:20px;display:flex;justify-content:space-between}
.caul .legs i{width:22px;height:20px;border-radius:0 0 10px 10px;background:#2d2150}
.caul.lvl1{animation:shake .4s infinite}.caul.lvl2{animation:shake .18s infinite}.caul.lvl3{animation:shake .08s infinite}
.caul.lvl2 .liq,.caul.lvl3 .liq{filter:hue-rotate(160deg) brightness(1.3)}
@keyframes liq{50%{transform:scaleX(1.04)}}
@keyframes bubble{from{transform:translateY(0);opacity:1}to{transform:translateY(-40px);opacity:0}}
@keyframes shake{0%,100%{transform:translate(0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-1.5deg)}75%{transform:translate(3px,-1px) rotate(1.5deg)}}
.odds{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--mute);margin:8px 0}
.odds span{background:var(--card);padding:3px 8px;border-radius:10px}

/* boxes */
.chest{font-size:110px;line-height:1;margin:6px auto;filter:drop-shadow(0 14px 12px rgba(120,60,160,.35));animation:float 3s ease-in-out infinite;display:inline-block}
.chest.wig{animation:wiggle .12s infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes wiggle{0%,100%{transform:rotate(-8deg) scale(1.05)}50%{transform:rotate(8deg) scale(1.12)}}
.streak{display:flex;justify-content:space-between}
.streak div{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--mute);gap:2px}
.streak div b{font-size:22px;filter:grayscale(1) opacity(.35)}
.streak div.on b{filter:none;animation:bob 1.6s ease-in-out infinite}
.quest{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(70px,1fr) 3.4em;align-items:center;gap:10px;padding:8px 0}
.quest>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quest>span:last-child{text-align:end;white-space:nowrap}
.quest .bar{min-width:0}.quest.done{opacity:.6}.quest[data-q="trade"]{cursor:pointer}

/* map */
.road{position:relative;padding:6px 0 20px;direction:ltr}
.road svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.node{position:relative;width:40%;margin:0 0 14px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.node.p0{margin-left:0}.node.p1{margin-left:30%}.node.p2{margin-left:60%}
html[dir=rtl] .node{direction:rtl}
.node b{font-size:14px;line-height:1.3}
.tier{position:relative;display:flex;justify-content:center;margin:4px 0 12px}
.tier span{background:linear-gradient(135deg,#ffd76a,#ffb13b);color:#5b3a00;padding:4px 14px;border-radius:999px;font-size:13px;box-shadow:0 4px 12px rgba(255,177,59,.4);direction:ltr}
.mygifts{padding:14px}
.mygifts .cnt{background:var(--acc);color:#fff;border-radius:999px;padding:2px 10px;font-size:13px}
.gift-row{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.gift-row::-webkit-scrollbar{display:none}
.gift-row .gift-tile{flex:0 0 96px;scroll-snap-align:start}
.gift-tile span{font-size:12px;line-height:1.3;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gift-row .empty{padding:6px 2px}
.node .ring{width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--acc) calc(var(--p)*1%),rgba(124,92,255,.15) 0);box-shadow:var(--sh);transition:transform .2s}
.node .ring span{width:80px;height:80px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:46px}
.node.ready .ring{animation:pulse 1.2s ease-in-out infinite;background:conic-gradient(#22c55e 100%,transparent 0);box-shadow:0 0 30px rgba(34,197,94,.7)}
.node.tgt .ring{outline:4px solid #ffb13b;outline-offset:3px}
.node.locked span{filter:grayscale(1) opacity(.5)}
.node small{font-size:12px;color:var(--mute)}
.recipe{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}

/* mascot & hint */
#mascot{position:fixed;inset-inline:var(--side);bottom:calc(var(--tabh) + 14px + var(--sab));height:calc(var(--dock) - 6px);z-index:19;display:flex;align-items:center;gap:8px;pointer-events:none;padding-inline:4px}
#mascot .blob{zoom:.78}
.blob{pointer-events:auto;cursor:pointer;width:58px;height:52px;flex:none;position:relative;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:radial-gradient(circle at 35% 30%,#ffd1f0,#ff8fc8 60%,#e0619f);box-shadow:inset -6px -8px 0 rgba(0,0,0,.08),0 8px 16px rgba(220,80,160,.35);animation:blob 2.6s ease-in-out infinite}
.blob::before{content:"✦";position:absolute;top:-14px;left:22px;color:#ffd76a;font-size:16px;animation:spark 2s infinite}
.blob .eye{position:absolute;top:18px;width:8px;height:11px;border-radius:50%;background:#3b2d5c;animation:blink 4s infinite}
.blob .eye:nth-child(1){left:17px}.blob .eye:nth-child(2){right:17px}
.blob .mouth{position:absolute;left:50%;top:31px;width:12px;height:6px;margin-left:-6px;border-radius:0 0 10px 10px;background:#3b2d5c}
.blob .cheek{position:absolute;top:28px;left:8px;width:9px;height:5px;border-radius:50%;background:#ff5c9a;opacity:.6}.blob .cheek.r{left:auto;right:8px}
#mascot.happy .blob{animation:hop .5s ease 3}
#mascot.sad .blob{filter:hue-rotate(200deg) saturate(.6)}#mascot.sad .mouth{border-radius:10px 10px 0 0;top:34px}
@keyframes blob{50%{transform:scale(1.06,.94) translateY(2px)}}
@keyframes hop{50%{transform:translateY(-22px) scale(.9,1.1)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
#hint{pointer-events:auto;background:var(--card2);padding:9px 13px;border-radius:18px 18px 18px 4px;box-shadow:var(--sh);font-size:14px;line-height:1.4;animation:pop .5s cubic-bezier(.3,2,.5,1);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
#hint:empty{display:none}
@keyframes pop{from{transform:scale(.4);opacity:0}}
#hand{position:fixed;z-index:60;font-size:40px;pointer-events:none;display:none;animation:point 1s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
@keyframes point{50%{transform:translateY(12px)}}

/* sheet */
#sheet{position:fixed;inset:0;z-index:40}
.sheet-bg{position:absolute;inset:0;background:rgba(30,15,60,.45);backdrop-filter:blur(3px);animation:fade .25s}
.sheet-card{position:absolute;left:max(0px,calc(50% - 290px));right:max(0px,calc(50% - 290px));bottom:0;max-height:88vh;overflow-y:auto;background:var(--bg1);border-radius:28px 28px 0 0;padding:10px 16px calc(24px + var(--sab));animation:up .4s cubic-bezier(.2,1.3,.4,1)}
body.dark .sheet-card{background:#1d1636}
.grab{width:44px;height:5px;border-radius:3px;background:var(--mute);opacity:.4;margin:0 auto 12px}
@keyframes up{from{transform:translateY(100%)}}@keyframes fade{from{opacity:0}}
.hero-item{width:120px;margin:4px auto 10px}.hero-item .em{font-size:64px}

/* stage (fullscreen cinematics) */
#stage{position:fixed;inset:0;z-index:50;background:radial-gradient(circle,rgba(40,20,80,.85),rgba(10,5,25,.95));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;animation:fade .3s}
.rays{position:absolute;width:520px;height:520px;border-radius:50%;background:repeating-conic-gradient(var(--rc,#fff) 0 10deg,transparent 10deg 30deg);opacity:.35;animation:spin 8s linear infinite;-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
@keyframes spin{to{transform:rotate(360deg)}}
.reveal{position:relative;width:150px;animation:revealpop .7s cubic-bezier(.3,1.8,.5,1)}
.reveal .em{font-size:86px}
@keyframes revealpop{0%{transform:scale(0) rotate(-180deg)}100%{transform:scale(1) rotate(0)}}
.stage-title{font-family:var(--fh);font-size:30px;margin-top:18px;text-shadow:0 4px 12px rgba(0,0,0,.5);animation:pop .6s .2s both}
.stage-sub{opacity:.8;margin-top:4px;animation:pop .6s .35s both}
.beam{position:absolute;bottom:50%;width:160px;height:120vh;background:linear-gradient(to top,var(--rc),transparent);opacity:.6;filter:blur(8px);animation:beam .8s ease-out}
@keyframes beam{from{transform:scaleY(0);transform-origin:bottom}}
.gift3d{font-size:130px;animation:rot3d 2.4s ease-in-out infinite;filter:drop-shadow(0 0 30px #ffd76a)}
@keyframes rot3d{0%{transform:perspective(500px) rotateY(0)}100%{transform:perspective(500px) rotateY(360deg)}}
.smoke{font-size:120px;animation:smoke 1.2s ease-out forwards}
@keyframes smoke{0%{transform:scale(.3);opacity:0}30%{opacity:1}100%{transform:scale(1.6) translateY(-30px);opacity:0}}

/* fx & toasts */
#fx{position:fixed;inset:0;z-index:70;pointer-events:none;width:100%;height:100%}
#toasts{position:fixed;top:calc(60px + var(--sat));left:0;right:0;z-index:80;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:var(--card2);padding:10px 16px;border-radius:16px;box-shadow:var(--sh);font-size:14px;animation:toast .5s cubic-bezier(.3,1.8,.5,1)}
.toast.bad{background:#ffe1e1;color:#a11}.toast.good{background:#dcfce7;color:#14532d}
@keyframes toast{from{transform:translateY(-40px) scale(.8);opacity:0}}
.shake-screen{animation:shake .3s 2}

/* wallet */
.pay-tabs{display:flex;gap:8px;overflow-x:auto;margin:10px 0}
.pay-tabs button{flex:1;padding:11px 8px;border-radius:16px;background:var(--card);box-shadow:var(--sh);font-size:14px;white-space:nowrap;border:2px solid transparent}
.pay-tabs .on{border-color:var(--acc);background:var(--card2)}
.pack{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:18px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--sh)}
.pack b{font-size:18px}.pack .bonus{color:var(--ok);font-size:12px}
.note{border-radius:16px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.note.fast{background:rgba(34,197,94,.14);color:#15803d}.note.wait{background:rgba(245,179,1,.18);color:#92400e}
body.dark .note.fast{color:#86efac}body.dark .note.wait{color:#fde68a}
.cardno{font-family:monospace;font-size:20px;letter-spacing:1px;direction:ltr;text-align:center;padding:12px;border-radius:16px;background:var(--card2);margin:8px 0}
input.inp{width:100%;padding:13px;border-radius:14px;border:2px solid rgba(124,92,255,.3);background:var(--card2);color:var(--ink);font:inherit;font-size:16px;margin:8px 0}
.st{font-size:11px;padding:2px 8px;border-radius:8px;background:var(--card2)}
.st.paid,.st.approved{background:#dcfce7;color:#166534}.st.pending,.st.awaiting{background:#fef3c7;color:#92400e}.st.rejected{background:#fee2e2;color:#991b1b}
.offer{background:linear-gradient(135deg,#ff7eb6,#ffb13b);color:#fff}
.offer .mute{color:rgba(255,255,255,.85)}
.wheel{width:240px;height:240px;border-radius:50%;margin:10px auto;position:relative;border:8px solid #fff;box-shadow:var(--sh);transition:transform 3.2s cubic-bezier(.15,.9,.2,1)}
.wheel-wrap{position:relative}
.wheel-wrap::after{content:"▼";position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:28px;color:var(--pri1);text-shadow:0 2px 0 #fff}
.wheel b{position:absolute;left:50%;top:50%;font-size:20px;transform-origin:0 0}
canvas#rain{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hud{position:absolute;top:calc(14px + var(--sat));left:0;right:0;display:flex;justify-content:space-around;font-family:var(--fh);font-size:24px;z-index:2;pointer-events:none}
.guide{padding:12px 14px}
.guide summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font:800 17px var(--fh)}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:'▾';opacity:.6;transition:transform .2s}
.guide[open] summary::after{transform:rotate(180deg)}
.guide ul{margin:10px 0 2px;padding-inline-start:1.2em;font-size:15px;line-height:1.75}
.guide li{margin:5px 0}
.grid>.col{justify-content:space-between}
.grid .btn{white-space:nowrap;width:100%;padding:7px 4px;gap:2px;font-size:12.5px}
.btn.sm{white-space:nowrap}
#top>*{flex-shrink:0}
@media (max-width:420px){
  #top{gap:5px}
  .xp{width:30px}
  .pill{padding:6px 8px;font-size:13px}
  .ico{width:32px;height:32px;font-size:15px}
}
@media (max-width:360px){
  .xp,.coins .plus{display:none}
  .lvl{padding-inline:4px}
  .ico{width:30px;height:30px;font-size:14px}
}
.btn.gold{white-space:nowrap}
.sep{display:inline-block;width:1.5px;height:.95em;background:currentColor;opacity:.25;margin:0 .6em;vertical-align:-.12em;border-radius:1px}
.tag{background:var(--card2);padding:4px 10px;border-radius:999px;font-size:13px;white-space:nowrap}
.quest>span:first-child{display:flex;flex-direction:column;line-height:1.35}
.quest>span:first-child small{color:var(--mute);font-size:12px}
.row.wrap{flex-wrap:wrap}

#outside{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;text-align:center}
#outside .card{max-width:360px;width:100%;padding:28px 20px}
#outside a{display:flex;justify-content:center;text-decoration:none;margin-top:16px}
.prof h2{margin:0}
.prof .row{justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.xp.big{width:100%;height:10px;margin-top:8px}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.pstat{background:var(--card);border-radius:16px;padding:10px 4px;text-align:center;box-shadow:var(--sh)}
.pstat b{display:block;font-family:var(--fh);font-size:15px;white-space:nowrap}
.pstat small{display:block;color:var(--mute);font-size:11px;line-height:1.25;margin-top:2px}
@media (max-width:360px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pstat small::first-letter{text-transform:uppercase}
#fsBtn{color:var(--ink);display:grid;place-items:center}#fsBtn.hide{display:none}