*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;background:#07031a;overflow:hidden;overscroll-behavior:none}
body{font-family:system-ui,-apple-system,"SF Pro Rounded","Segoe UI",Roboto,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;touch-action:none}
#app{position:relative;height:100%;width:100%;max-width:520px;margin:0 auto;overflow:hidden;background:#120a2e;box-shadow:0 0 80px rgba(140,80,255,.25)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#safeProbe{position:absolute;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.pix{image-rendering:pixelated;image-rendering:crisp-edges}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 12px) 18px calc(env(safe-area-inset-bottom) + 14px)}
.screen.on{display:flex;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#hud{pointer-events:none}
#hud .pausebtn{pointer-events:auto;position:absolute;right:14px;top:calc(env(safe-area-inset-top) + 20px)}
.iconbtn{width:44px;height:44px;border-radius:14px;background:rgba(20,6,40,.6);font-size:18px;font-weight:900;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.15)}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c2 0 15%,#ffd23f 16% 60%,#b8770b 61%);box-shadow:0 0 8px rgba(255,210,63,.7);vertical-align:middle}
.coins{display:flex;align-items:center;gap:6px;background:rgba(20,6,40,.65);padding:6px 12px 6px 8px;border-radius:20px;font-weight:900;color:#ffe066;border:1.5px solid rgba(255,224,102,.25)}
/* title */
#title{justify-content:flex-start;background:linear-gradient(180deg,rgba(10,4,30,.55),rgba(10,4,30,0) 30%,rgba(10,4,30,0) 55%,rgba(10,4,30,.75))}
.topbar{width:100%;display:flex;align-items:center;gap:10px}
.lvl{display:flex;align-items:center;gap:6px;flex:1}
.lvlnum{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:16px;background:radial-gradient(circle at 35% 30%,#d6b8ff,#7b54c9 60%,#3a1f7a);border:2px solid #fff;box-shadow:0 0 12px rgba(180,140,255,.8)}
.xpbar{flex:1;max-width:120px;height:10px;border-radius:6px;background:rgba(20,6,40,.7);overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5af0ff,#b48cff,#ff7ad9);border-radius:6px;transition:width .3s}
.xpbar.big{max-width:none;height:14px}
.logo{margin-top:min(4vh,30px);text-align:center;line-height:.86;filter:drop-shadow(0 6px 0 rgba(30,8,60,.9))}
.logo1,.logo2{font-weight:1000;letter-spacing:2px;font-size:clamp(46px,15vw,66px);background:linear-gradient(180deg,#fff7c9 0%,#ffd23f 45%,#ff8a2e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #2a0d4a;animation:float 3s ease-in-out infinite}
.logo2{font-size:clamp(58px,19vw,84px);background:linear-gradient(180deg,#e9dcff 0%,#b48cff 45%,#6a3cff 100%);-webkit-background-clip:text;background-clip:text;animation-delay:-.4s}
.logo3{margin-top:10px;font-weight:900;font-size:14px;letter-spacing:4px;color:#8ff3ff;text-shadow:0 0 10px #5af0ff}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero{position:relative;margin-top:auto;display:flex;flex-direction:column;align-items:center}
.heroglow{position:absolute;top:0;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(180,140,255,.55),rgba(180,140,255,0) 70%);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}
#heroCv{position:relative;width:340px;height:190px;max-width:100%}
.heroname{position:relative;margin-top:4px;font-weight:900;font-size:15px;background:rgba(20,6,40,.7);padding:4px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2)}
.bestline{margin:10px 0 8px;font-weight:800;font-size:13px;color:#ffe066;opacity:.95;min-height:16px}
.bigbtn{width:min(300px,82%);padding:16px 10px;border-radius:22px;font-weight:1000;font-size:26px;letter-spacing:2px;background:linear-gradient(180deg,#ffe36b,#ffb627 55%,#ff8a1e);color:#3a1600;border-bottom:6px solid #b8570b;box-shadow:0 0 24px rgba(255,190,60,.55),inset 0 2px 0 rgba(255,255,255,.7);text-shadow:0 1px 0 rgba(255,255,255,.5);transition:transform .08s}
.bigbtn:active{transform:translateY(3px) scale(.98);border-bottom-width:3px}
.bigbtn.play{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.midbtn{width:min(300px,82%);margin-top:10px;padding:10px;border-radius:18px;font-weight:900;font-size:16px;background:linear-gradient(180deg,#8a5cff,#5b2fd6);border-bottom:4px solid #36188f;box-shadow:0 0 16px rgba(140,90,255,.45);display:flex;flex-direction:column;align-items:center}
.midbtn small{font-weight:700;font-size:11px;opacity:.85;margin-top:2px}
.midbtn.ghost{background:rgba(255,255,255,.1);border-bottom:3px solid rgba(0,0,0,.3);box-shadow:none}
.midbtn.share{background:linear-gradient(180deg,#3ad1ff,#1e8fe0);border-bottom-color:#11589a}
.midbtn:active{transform:translateY(2px)}
.daily{background:linear-gradient(180deg,#ff7ad9,#c43fd6);border-bottom-color:#7a1d8a}
.nav{display:flex;gap:6px;margin-top:12px;width:100%;justify-content:center}
.nav button{position:relative;flex:1;max-width:84px;padding:8px 2px;border-radius:16px;background:linear-gradient(180deg,rgba(60,24,120,.85),rgba(20,6,40,.85));border:1.5px solid rgba(180,140,255,.35);box-shadow:0 4px 0 rgba(10,2,30,.6),inset 0 1px 0 rgba(255,255,255,.2);font-weight:800;font-size:11.5px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:2px}
.nav .ni{font-size:22px;filter:drop-shadow(0 0 6px rgba(255,255,255,.4))}
.nav .ni.go{display:inline-block;animation:spinico 3s linear infinite}
@keyframes spinico{to{transform:rotate(360deg)}}
.badge{position:absolute;top:-8px;right:-4px;min-width:20px;height:20px;border-radius:10px;font-size:10px!important;background:#ff3b5c;color:#fff;font-style:normal;font-weight:900;font-size:12px;display:none;place-items:center;padding:0 5px;border:2px solid #fff;animation:bounce 1s infinite}
.badge.on{display:grid}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* modal */
.modal{justify-content:center;background:rgba(8,2,24,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.card{width:min(340px,92%);background:linear-gradient(180deg,#2a1660,#170b3a);border:2px solid rgba(180,140,255,.45);border-radius:26px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(140,90,255,.3)}
.card h2{font-weight:1000;font-size:28px;margin-bottom:14px;letter-spacing:1px}
.card .sub{font-size:13px;opacity:.8;margin:-6px 0 12px;text-align:center}
.card .fine{font-size:11px;opacity:.55;margin:12px 0 0;text-align:center}
.toggles{display:flex;gap:8px;margin:14px 0 4px}
.tog{padding:10px 10px;border-radius:14px;font-weight:800;font-size:13px;background:rgba(90,240,255,.18);border:1.5px solid rgba(90,240,255,.6)}
.tog.off{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);opacity:.55;text-decoration:line-through}
/* game over */
#over{background:radial-gradient(ellipse at 50% 30%,rgba(60,20,120,.82),rgba(8,2,24,.95));overflow-y:auto;touch-action:pan-y}
.overwrap{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;padding-top:6px}
.overhead{font-weight:1000;font-size:20px;letter-spacing:3px;opacity:.85}
.ribbon{display:none;margin-top:6px;padding:4px 22px;font-weight:1000;font-size:18px;color:#3a1600;background:linear-gradient(180deg,#fff17a,#ffb627);border-radius:8px;transform:rotate(-3deg);box-shadow:0 0 24px rgba(255,210,60,.8);animation:ribbon .5s ease-out}
.ribbon.on{display:block}
@keyframes ribbon{0%{transform:scale(2.5) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.oscore{font-weight:1000;font-size:64px;line-height:1.05;text-shadow:0 0 24px rgba(180,140,255,.8),0 4px 0 #2a0d4a}
.obest{font-weight:800;font-size:13px;opacity:.8;margin-bottom:10px}
.ostats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.ostats div{background:rgba(255,255,255,.07);border-radius:14px;padding:8px 2px;text-align:center;border:1px solid rgba(255,255,255,.08)}
.ostats b{display:block;font-size:17px;font-weight:900}
.ostats span{font-size:10px;opacity:.7;font-weight:700;text-transform:uppercase}
.orewards{width:100%;margin-top:10px;background:rgba(20,6,40,.6);border-radius:18px;padding:10px 12px;border:1px solid rgba(255,255,255,.1)}
.ocoins{font-weight:1000;font-size:22px;color:#ffe066;display:flex;align-items:center;gap:6px}
.ocoins small{font-size:11px;color:#fff;opacity:.7;font-weight:700;margin-left:auto}
.oxp{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:800;font-size:13px}
.oxp span{min-width:62px;text-align:right;color:#b8f7ff}
.unlock{display:none;width:100%;margin-top:10px;padding:10px;border-radius:18px;background:linear-gradient(135deg,rgba(255,210,63,.25),rgba(255,122,217,.25));border:2px solid #ffd23f;align-items:center;gap:10px;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.unlock.on{display:flex}
.unlock img{width:56px;height:56px;border-radius:12px;background:rgba(0,0,0,.25)}
.unlock .ut{font-weight:1000;font-size:16px}
.unlock .us{font-size:12px;opacity:.85}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.soclose{width:100%;margin-top:10px}
.soclose p{font-weight:800;font-size:13px;color:#ffd6f7;background:rgba(255,122,217,.14);border-left:3px solid #ff7ad9;padding:7px 10px;border-radius:8px;margin-top:5px}
.oquests{width:100%;margin-top:8px}
.oq{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;margin-top:5px}
.oq .qb{flex:0 0 70px;height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.oq .qb i{display:block;height:100%;background:#7dff9a}
.oq.done{color:#7dff9a}
#againBtn{margin-top:14px}
.row{display:flex;gap:8px;width:min(300px,82%)}
.row .midbtn{width:auto;flex:1;font-size:14px}
/* panels */
.panel{background:linear-gradient(180deg,#1d0f45,#0d0626);justify-content:flex-start;overflow:hidden}
.panel header{width:100%;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.panel header h2{flex:1;font-weight:1000;font-size:24px}
.back{font-size:30px;line-height:1}
.tabs{display:flex;gap:6px;width:100%;margin-bottom:8px}
.tab{flex:1;padding:9px;border-radius:14px;font-weight:900;background:rgba(255,255,255,.07);border:1.5px solid transparent}
.tab.on{background:rgba(180,140,255,.25);border-color:#b48cff}
.preview{width:100%;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse,rgba(120,80,255,.35),rgba(0,0,0,0) 70%);border-radius:20px;margin-bottom:6px}
#prevCv{width:300px;height:130px}
#prevName{font-weight:900;font-size:14px;opacity:.9;margin-top:-6px;margin-bottom:6px}
.grid{width:100%;display:grid;align-content:start;grid-template-columns:repeat(4,1fr);gap:8px;overflow-y:auto;padding:6px 2px 30px;touch-action:pan-y;flex:1}
.cell{position:relative;border-radius:16px;padding:4px 2px 6px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;font-size:10px;font-weight:800}
.cell img,.cell canvas{width:100%;aspect-ratio:1;border-radius:12px}
.cell.sel{border-color:#ffd23f;box-shadow:0 0 14px rgba(255,210,63,.6)}
.cell.locked img{filter:brightness(0) drop-shadow(0 0 1px rgba(180,140,255,.8));opacity:.6}
.cell .lk{margin-top:2px;color:#ffe066;white-space:nowrap}
.cell .nm{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cell .rar{position:absolute;top:3px;left:4px;font-size:8px;padding:1px 4px;border-radius:6px;background:rgba(0,0,0,.45)}
.cell .rar.Rare{color:#5af0ff}.cell .rar.Epic{color:#d6a4ff}.cell .rar.Legendary{color:#ffb627}.cell .rar.Mythic{color:#ff7ad9}
.qtimer{font-size:12px;opacity:.7;font-weight:700;margin-bottom:8px}
#qList{width:100%}
.quest{width:100%;display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:10px;border-radius:18px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1)}
.quest .qi{font-size:26px}
.quest .qm{flex:1}
.quest .ql{font-weight:900;font-size:14px}
.quest .qr{font-size:11px;opacity:.8;margin-top:2px;color:#ffe066;font-weight:800}
.quest .qb{height:9px;border-radius:5px;background:rgba(0,0,0,.35);overflow:hidden;margin-top:6px}
.quest .qb i{display:block;height:100%;background:linear-gradient(90deg,#5af0ff,#7dff9a)}
.quest button{padding:9px 12px;border-radius:12px;font-weight:900;font-size:13px;background:linear-gradient(180deg,#7dff9a,#2fc26a);color:#08301a;border-bottom:3px solid #1a7a40;animation:breathe 1.2s infinite}
.quest .qd{font-size:12px;font-weight:900;color:#7dff9a}
.quest.ready{border-color:#7dff9a;box-shadow:0 0 16px rgba(125,255,154,.3)}
.qbonus{width:100%;text-align:center;font-weight:800;font-size:13px;padding:10px;border-radius:16px;background:rgba(255,210,63,.12);border:1.5px dashed rgba(255,210,63,.5)}
.qbonus button{margin-top:6px;padding:8px 16px;border-radius:12px;font-weight:900;background:linear-gradient(180deg,#ffe36b,#ffb627);color:#3a1600}
.dailycard{width:100%;margin-top:14px;padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,122,217,.25),rgba(140,90,255,.25));border:1.5px solid rgba(255,122,217,.6);font-weight:800;font-size:13px}
.dailycard b{font-size:16px}
.dailycard button{margin-top:8px;width:100%;padding:10px;border-radius:14px;font-weight:900;background:linear-gradient(180deg,#ff7ad9,#c43fd6);border-bottom:3px solid #7a1d8a}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%;margin-bottom:14px}
.day{border-radius:12px;padding:6px 0;text-align:center;background:rgba(255,255,255,.07);font-size:10px;font-weight:800;border:1.5px solid transparent}
.day b{display:block;font-size:12px;color:#ffe066;margin-top:3px}
.day.done{background:rgba(125,255,154,.18);border-color:rgba(125,255,154,.5)}
.day.today{border-color:#ffd23f;background:rgba(255,210,63,.2);animation:breathe 1.2s infinite}
.day.big{background:linear-gradient(180deg,rgba(255,122,217,.3),rgba(140,90,255,.3))}
#toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 70px);transform:translateX(-50%) translateY(-20px);padding:10px 18px;border-radius:16px;background:rgba(30,120,70,.95);font-weight:900;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:50}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:481px){#app{border-left:1px solid rgba(180,140,255,.2);border-right:1px solid rgba(180,140,255,.2)}}
@media (max-height:700px){.logo{margin-top:6px}.logo1{font-size:42px}.logo2{font-size:54px}#heroCv{height:150px}.bigbtn{padding:12px}.nav{margin-top:8px}}

/* ===== v2 ===== */
.gems,.tokens{display:flex;align-items:center;gap:4px;background:rgba(20,6,40,.65);padding:6px 10px 6px 7px;border-radius:20px;font-weight:900;border:1.5px solid rgba(160,120,255,.35);font-size:14px}
.gems{color:#d9c4ff}.tokens{color:#ff9ab0}
.gem{display:inline-block;width:14px;height:14px;transform:rotate(45deg);background:linear-gradient(135deg,#f3e6ff,#b48cff 45%,#6a3cff);box-shadow:0 0 8px rgba(180,140,255,.9);border-radius:3px}
.topbar .coins{padding:6px 10px 6px 7px;font-size:14px}
.lvl{min-width:0}
.logo{position:relative}
.logo::before{content:"";position:absolute;left:50%;top:50%;width:300px;height:200px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,180,80,.45),rgba(180,90,255,.25) 45%,rgba(0,0,0,0) 70%);z-index:-1;animation:pulse 2.4s ease-in-out infinite}
.logo1{filter:drop-shadow(0 0 14px rgba(255,190,60,.7))}
.logo2{filter:drop-shadow(0 0 16px rgba(160,110,255,.9))}
.logo3{animation:shimmer 2.5s linear infinite;background:linear-gradient(90deg,#8ff3ff,#fff,#ff9ae0,#8ff3ff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 6px rgba(90,240,255,.8))}
@keyframes shimmer{to{background-position:-200% 0}}
.heroname{border:2px solid #9be7ff;box-shadow:0 0 14px rgba(150,120,255,.5)}
.heroname .mst{color:#ffd23f;letter-spacing:1px}.heroname small{opacity:.7;font-size:11px}
.bigbtn{position:relative;overflow:hidden}
.bigbtn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));transform:skewX(-20deg);animation:shine 2.6s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.card{background:linear-gradient(180deg,#3a1c86,#1a0b45);border:2px solid rgba(200,160,255,.6)}
/* revive */
.revcard h2{background:linear-gradient(180deg,#fff,#ffb0c8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(255,90,140,.8))}
.revring{position:relative;width:120px;height:120px;margin:-4px 0 8px}
.revring svg{width:100%;height:100%;transform:rotate(-90deg)}
.revring circle{fill:none;stroke-width:9}
.revring .trk{stroke:rgba(255,255,255,.12)}
.revring .bar{stroke:#ff5a8a;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:0}
.revring b{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;font-weight:1000;animation:beat 1s ease-in-out infinite;text-shadow:0 0 16px rgba(255,90,140,.9)}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
.sub b{color:#ffe066}
#rvOpts{width:100%;display:flex;flex-direction:column;align-items:center}
.rvbtn{width:100%!important;font-size:20px!important}
.midbtn.rvbtn{font-size:15px!important}
/* chest */
.chestrow{width:100%;margin-top:10px;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,210,63,.22),rgba(255,122,217,.18));border:2px solid var(--tc,#ffd23f);text-align:left;box-shadow:0 0 18px color-mix(in srgb,var(--tc,#ffd23f) 45%,transparent)}
.chestrow.ready{animation:breathe 1.1s ease-in-out infinite}
.chestrow .ct{font-weight:1000;font-size:16px;color:var(--tc,#ffd23f)}
.chestrow .cs{font-size:12px;font-weight:800;opacity:.9}
.chest{position:relative;--tc:#ffd23f}
.chest i{position:absolute;left:0;right:0;border-radius:8px;border:3px solid #3a1600}
.chest .body{bottom:0;height:58%;background:linear-gradient(180deg,#c06a1c,#7a3a0c);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--tc) 80%,#000)}
.chest .body::after{content:"";position:absolute;left:50%;top:-4px;width:22%;height:42%;transform:translateX(-50%);background:var(--tc);border:2px solid #3a1600;border-radius:4px}
.chest .lid{top:0;height:46%;background:linear-gradient(180deg,#e28a2a,#a04e12);border-radius:40% 40% 8px 8px/60% 60% 8px 8px;box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--tc) 80%,#000);transform-origin:10% 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.chest.mini{width:52px;height:46px;flex:0 0 52px}
.chest.mini i{border-width:2px}
.chest.open .lid{transform:rotate(-38deg) translate(-6px,-10px)}
.chestwrap{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.chest.big{width:170px;height:150px;margin-top:40px;cursor:pointer;filter:drop-shadow(0 0 22px var(--tc))}
.chest.big.shake{animation:cshake .36s ease-in-out}
@keyframes cshake{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-9deg) scale(1.06)}40%{transform:rotate(8deg) scale(1.1)}60%{transform:rotate(-6deg) scale(1.08)}80%{transform:rotate(4deg)}}
.chest.big.open{animation:copen .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes copen{0%{transform:scale(.8)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.rays{position:absolute;top:-30px;left:50%;width:420px;height:420px;margin-left:-210px;border-radius:50%;opacity:0;pointer-events:none;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tc,#ffd23f) 70%,transparent) 0 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);transition:opacity .4s}
.rays.on{opacity:1;animation:spinico 8s linear infinite}
.chtier{margin-top:22px;font-weight:1000;font-size:30px;letter-spacing:1px;text-shadow:0 0 18px currentColor,0 3px 0 #2a0d4a}
.chrw{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 18px;min-height:40px;width:90%}
.chrw div{background:rgba(20,6,40,.8);border:1.5px solid rgba(255,255,255,.25);padding:8px 14px;border-radius:14px;font-weight:1000;font-size:18px;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.chrw div:nth-child(2){animation-delay:.12s}.chrw div:nth-child(3){animation-delay:.24s}.chrw div:nth-child(4){animation-delay:.36s}
.chrw .newdog{display:flex;align-items:center;gap:8px;border-color:#ffb627;color:#ffe066}
.chrw .newdog img{width:44px;height:44px;border-radius:10px}
/* mastery / pass bars */
.mstar,.pstar{width:36px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:1000;font-size:12px;background:linear-gradient(180deg,#ffd23f,#c4880f);color:#3a1600;border:2px solid #fff}
.pstar{background:linear-gradient(180deg,#5af0ff,#3a6cff);color:#fff}
.pstar::before{content:"⭐";font-size:9px;margin-right:1px}
.xpbar.mast i{background:linear-gradient(90deg,#ffe066,#ff9a2e)}
.xpbar.pass i{background:linear-gradient(90deg,#5af0ff,#7a5cff,#ff7ad9)}
.oxp span{font-size:12px}
/* spin */
.spincard{padding-bottom:16px}
.wheelbox{position:relative;width:280px;height:280px;max-width:80vw;max-height:80vw}
#wheelCv{width:100%;height:100%}
.pointer{position:absolute;left:50%;top:-6px;width:0;height:0;margin-left:-14px;border-left:14px solid transparent;border-right:14px solid transparent;border-top:30px solid #fff;filter:drop-shadow(0 2px 0 #7a3a00) drop-shadow(0 0 8px #ffd23f)}
.spres{min-height:30px;margin:8px 0 4px;font-size:18px;text-align:center}
.spres b{color:#ffe066;text-shadow:0 0 12px rgba(255,210,63,.8);animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.spres .jack{color:#ff7ad9;font-size:24px}
/* season pass */
.passhead{width:100%;display:flex;gap:12px;align-items:center;padding:12px;border-radius:18px;background:linear-gradient(135deg,rgba(90,240,255,.18),rgba(255,122,217,.18));border:1.5px solid rgba(90,240,255,.5)}
.ptier{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;font-weight:1000;background:linear-gradient(180deg,#5af0ff,#3a6cff);border:2px solid #fff;box-shadow:0 0 16px rgba(90,240,255,.6)}
.pt{font-weight:900;font-size:14px;margin-bottom:5px}
.pend{font-size:11px;opacity:.75;margin-top:5px;font-weight:700}
.pinfo{font-size:12px;opacity:.75;margin:8px 0;font-weight:700;text-align:center}
.plist{width:100%;flex:1;overflow-y:auto;touch-action:pan-y;padding-bottom:30px}
.ptr{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:7px;border-radius:14px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.08)}
.ptr .pn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:1000;font-size:12px;background:rgba(0,0,0,.35)}
.ptr .pi{font-size:22px}.ptr .pl{flex:1;font-weight:800;font-size:13px}
.ptr .pk{font-size:12px;font-weight:900;opacity:.7}
.ptr.done{opacity:.55}.ptr.done .qd{color:#7dff9a;font-weight:1000}
.ptr.ready{border-color:#7dff9a;box-shadow:0 0 14px rgba(125,255,154,.35)}
.ptr.next{border-color:#5af0ff}
.ptr.special{background:linear-gradient(90deg,rgba(255,210,63,.18),rgba(255,122,217,.18));border-color:rgba(255,210,63,.6)}
.ptr button{padding:7px 12px;border-radius:12px;font-weight:900;font-size:12px;background:linear-gradient(180deg,#7dff9a,#2fc26a);color:#08301a;border-bottom:3px solid #1a7a40;animation:breathe 1.2s infinite}
/* collection */
.panel header h2 small{font-size:14px;color:#ffe066;margin-left:4px}
.cell{border-color:color-mix(in srgb,var(--rc,#fff) 40%,transparent)}
.cell:not(.locked){box-shadow:inset 0 0 14px color-mix(in srgb,var(--rc,#fff) 30%,transparent)}
.cell.r-Legendary:not(.locked),.cell.r-Mythic:not(.locked){animation:rglow 2s ease-in-out infinite}
@keyframes rglow{50%{box-shadow:0 0 16px var(--rc),inset 0 0 14px var(--rc)}}
.cell .ms{font-size:9px;color:#ffd23f;line-height:1}
.cell .lv{font-size:9px;opacity:.6}
#prevMast{width:80%;text-align:center;font-size:12px;font-weight:800;margin-bottom:8px}
#prevMast span{color:#ffe066}
#prevMast small{opacity:.7;font-size:10px}
#prevMast .xpbar{max-width:none;margin:4px 0 2px}
.day i{display:block;font-style:normal;font-size:9px;margin-top:2px}
@media (max-height:760px){.logo{margin-top:4px}.logo1{font-size:44px}.logo2{font-size:58px}#heroCv{height:160px}.bigbtn{padding:13px}.midbtn{margin-top:8px}}