/* WildCards – "Night safari" game UI (UI UX Pro Max: vibrant blocks + aurora glow, Baloo 2 / Nunito, SVG icons) */
:root{--bg:#0B1530;--bg2:#111f45;--panel:rgba(17,31,69,.82);--panel2:rgba(255,255,255,.06);--line:rgba(255,255,255,.1);--ink:#EEF3FF;--mut:#9AA8CC;
  --acc:#FF5FA2;--acc2:#8B5CF6;--gold:#F5C542;--ok:#34D399;--bad:#F2555A;--sun:#F5C542;--g:#8B5CF6;--g2:#FF5FA2;--card:rgba(17,31,69,.82);--r:20px;--bgimg:none}
body.th-cats{--acc:#FF5FA2;--acc2:#8B5CF6;--bgimg:url(bg/A_bg_cats.webp)}
body.th-wild{--acc:#2EE6A6;--acc2:#14B8A6;--bgimg:url(bg/B_bg_forest.webp)}
body.th-dogs{--acc:#FFA94D;--acc2:#F76707;--bgimg:url(bg/bg_dogs.webp)}
body.th-pets{--acc:#FF9FB2;--acc2:#B197FC;--bgimg:url(bg/bg_pets.webp)}
body.th-farm{--acc:#FFD43B;--acc2:#E8590C;--bgimg:url(bg/bg_farm.webp)}
body.th-birds{--acc:#4DABF7;--acc2:#22D3EE;--bgimg:url(bg/bg_birds.webp)}
body.th-fish{--acc:#3BC9DB;--acc2:#4C6EF5;--bgimg:url(bg/bg_fish.webp)}
body.th-insects{--acc:#A9E34B;--acc2:#FAB005;--bgimg:url(bg/bg_insects.webp)}
body.th-exotic{--acc:#FFA94D;--acc2:#E64980;--bgimg:url(bg/bg_exotic.webp)}
body.th-reptiles{--acc:#69DB7C;--acc2:#20C997;--bgimg:url(bg/bg_reptiles.webp)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font:15px/1.45 Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#050a18;display:flex;justify-content:center;align-items:center}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.d{font-family:"Baloo 2",system-ui,sans-serif;letter-spacing:.2px}
.phone{width:420px;height:880px;max-height:100vh;background:var(--bg) var(--bgimg) center bottom/cover no-repeat;border-radius:30px;overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;transition:background-image .4s}
.phone:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,48,.15),rgba(11,21,48,.55) 70%,rgba(11,21,48,.85));pointer-events:none}
@media(max-width:560px){body{background:var(--bg)}.phone{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none}}
.boot{margin:auto;font-size:60px;animation:bob 1.2s ease-in-out infinite}
.scr{flex:1;overflow-y:auto;padding:12px 14px 110px;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scr::-webkit-scrollbar{display:none}
.scr.full{padding:0}
.scr>*{animation:rise .35s cubic-bezier(.2,.9,.3,1) both}
.scr>*:nth-child(2){animation-delay:.03s}.scr>*:nth-child(3){animation-delay:.06s}.scr>*:nth-child(4){animation-delay:.09s}.scr>*:nth-child(n+5){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
h2{margin:6px 0 10px;font-size:24px;line-height:1.1}h3{margin:18px 0 8px;font-size:18px}
.small{font-size:13px;color:var(--mut)}.center{text-align:center}.row{display:flex;gap:8px;align-items:center}.grow{flex:1;min-width:0}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:800;cursor:pointer;background:linear-gradient(180deg,var(--acc),var(--acc2));color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s,filter .15s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn.gh{background:var(--panel2);color:var(--ink);border:1px solid var(--line);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.btn.sun{background:linear-gradient(180deg,#FFD866,#E9A915);color:#3b2a00}.btn.red{background:rgba(242,85,90,.16);color:#ff9a9d;border:1px solid rgba(242,85,90,.35);box-shadow:none}
.btn.w{width:100%}.btn:disabled{opacity:.45;cursor:default}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:18px;padding:16px;font:800 19px "Baloo 2";color:#fff;background:linear-gradient(180deg,var(--acc),var(--acc2));box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 30px color-mix(in srgb,var(--acc) 45%,transparent);cursor:pointer;transition:transform .08s}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.pill{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:6px 11px;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
input.in,select.in,textarea.in{width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);background:rgba(5,10,24,.55);margin:6px 0;outline:none;transition:border-color .15s}
input.in:focus,select.in:focus,textarea.in:focus{border-color:var(--acc)}
select.in option{background:#111f45}
label.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--mut);margin:8px 0}
.err{color:#ff9a9d;font-weight:700;min-height:20px;font-size:14px}
.linkish{color:var(--acc);font-weight:800;cursor:pointer}
.badge{position:absolute;top:-4px;right:2px;background:var(--bad);color:#fff;border-radius:99px;font-size:11px;font-weight:800;padding:1px 6px;box-shadow:0 0 0 2px var(--bg)}
.ic{width:20px;height:20px;flex:none}
/* auth */
.auth{padding:46px 22px}.logo{width:96px;height:96px;margin:0 auto;border-radius:28px;background:url(bg/cardback.webp) center/cover;box-shadow:0 0 40px color-mix(in srgb,var(--acc) 50%,transparent);animation:bob 3s ease-in-out infinite}
.auth h1{text-align:center;margin:12px 0 2px;font-size:38px}.auth .tag{text-align:center;color:var(--mut);margin:0 0 22px}
.pill.ic{width:auto;height:auto}.pill.on{background:linear-gradient(180deg,var(--acc),var(--acc2));border-color:transparent}
/* HUD */
.hud{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hud .av{width:46px;height:46px;border-radius:50%;border:3px solid var(--gold);background:center/cover #222;flex:none;box-shadow:0 0 0 3px rgba(245,197,66,.2);cursor:pointer}
.hud .lv{flex:1;min-width:0;cursor:pointer}.hud .lv b{font:800 16px/1.1 "Baloo 2";display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp{height:8px;background:rgba(255,255,255,.12);border-radius:9px;overflow:hidden;margin-top:4px}.xp i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:9px;transition:width .6s cubic-bezier(.2,.9,.3,1)}
.chip{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 11px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font:800 15px "Baloo 2";cursor:pointer;position:relative;backdrop-filter:blur(8px);color:var(--ink)}
.chip.pop{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.25)}}
/* segmented mode switch */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:rgba(5,10,24,.6);border:1px solid var(--line);margin-bottom:10px}
.seg button{border:0;border-radius:12px;padding:8px;font:800 15px "Baloo 2";background:none;color:var(--mut);cursor:pointer;transition:.2s}
.seg button.on{background:linear-gradient(180deg,var(--acc),var(--acc2));color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.35)}
/* chips row */
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:1px solid var(--line);border-radius:99px;padding:7px 12px;background:var(--panel2);font-weight:700;font-size:13px;cursor:pointer;color:var(--mut);transition:.15s}
.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* member cards (home) */
.mem{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:12px;cursor:pointer;backdrop-filter:blur(10px);transition:transform .15s}
.mem:active{transform:scale(.985)}
.mem.me{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 24px rgba(245,197,66,.18)}
.mem .hd{display:flex;align-items:center;gap:10px}
.mem .rk{width:34px;text-align:center;font:800 20px "Baloo 2";color:var(--mut);flex:none}
.mem .a{width:48px;height:48px;border-radius:50%;background:center/cover #222;border:2px solid var(--line);flex:none}
.mem.r1 .a{border-color:#F5C542}.mem.r2 .a{border-color:#C9D3E3}.mem.r3 .a{border-color:#E39B5A}
.mem .nm{font:800 17px/1.1 "Baloo 2"}.mem .pts{text-align:right;flex:none}.mem .pts b{display:block;font:800 22px/1 "Baloo 2";color:var(--gold)}
.mem .kp{display:flex;gap:12px;margin:8px 0 2px;font-size:13px;color:var(--mut)}.mem .kp b{color:var(--ink)}
.mem .top{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.mem .top div{aspect-ratio:1;border-radius:12px;background:center/cover #222;position:relative;border:2px solid transparent}
.mem .top .t2{border-color:#C9D3E3}.mem .top .t3{border-color:#F5C542}.mem .top .t4{border-color:transparent;background-origin:border-box;box-shadow:0 0 0 2px #ff9ad5,0 0 12px rgba(155,215,255,.6)}
.dex{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:10px}
.dex div{text-align:center;font-size:13px}.dex i{display:block;height:5px;border-radius:5px;background:rgba(255,255,255,.12);margin-top:3px;overflow:hidden}.dex i b{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.dex div.full i b{background:var(--gold)}
.dexL .dl{display:grid;grid-template-columns:28px 1fr 52px;gap:8px;align-items:center;margin:7px 0;font-size:14px}.dexL .dl i{height:9px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;display:block}.dexL .dl i b{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .8s}
/* cards */
.wc{position:relative;border-radius:16px;padding:4px;background:#8a6a4a;box-shadow:0 6px 16px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s}
.wc:active{transform:scale(.96)}
.wc.t0{background:#3a4670}.wc.t1{background:linear-gradient(135deg,#d39a62,#8a5a33)}.wc.t2{background:linear-gradient(135deg,#eef2f5,#8e9aa8,#eef2f5)}.wc.t3{background:linear-gradient(135deg,#ffe58a,#c9930c,#fff1b8)}
.wc.t4{background:linear-gradient(120deg,#ff9ad5,#9ad7ff,#b8ff9a,#ffe08a,#ff9ad5);background-size:300% 300%;animation:holo 4s linear infinite}
@keyframes holo{to{background-position:300% 0}}
.wc .in{background:#0f1a3a;border-radius:12px;overflow:hidden;border:3px solid transparent}
.wc .ph{aspect-ratio:1/1;background:center/cover #1b2754}
.wc .nm{padding:5px 6px 0;font:800 13px "Baloo 2";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc .st{color:var(--gold);font-size:11px;letter-spacing:-1px;padding:0 6px 5px}.wc .st i{opacity:.22;font-style:normal}
.wc .fd{position:absolute;top:8px;left:8px;background:rgba(5,10,24,.65);border-radius:8px;font-size:12px;padding:1px 5px}
.wc .tg{position:absolute;top:8px;right:8px;background:var(--gold);color:#3b2a00;border-radius:8px;font-size:11px;padding:1px 5px;font-weight:800}
.wc.lock .ph{filter:grayscale(1) brightness(.45) contrast(1.2) blur(1.5px)}.wc.lock{background:#1f2a50}.wc.lock .nm{color:var(--mut)}
.wc.sel{outline:4px solid var(--gold);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-items:start}
.bar{height:9px;background:rgba(255,255,255,.12);border-radius:9px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .5s cubic-bezier(.2,.9,.3,1)}
/* species picker */
.prev{width:100%;aspect-ratio:4/3;border-radius:18px;background:center/cover #111;margin-bottom:10px;border:1px solid var(--line)}
.spgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:46vh;overflow-y:auto;padding:2px}
.sp{border:2px solid transparent;border-radius:14px;background:var(--panel);padding:4px;cursor:pointer;text-align:center;font-size:12px;font-weight:700}
.sp img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;margin-bottom:3px}.sp.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.sp .r{color:var(--gold);font-size:10px}
/* RATE game */
.quest{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-bottom:8px}.quest .bar{height:6px;margin-top:4px}
.ring{width:46px;height:46px;flex:none;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:6}.ring .bgc{stroke:rgba(255,255,255,.12)}.ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.9,.3,1)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:20px}
.combo{font:800 15px "Baloo 2";color:var(--gold);opacity:0;transform:scale(.6);transition:.2s;white-space:nowrap}.combo.on{opacity:1;transform:none}
.deck{position:relative;height:clamp(250px,calc(min(100dvh,880px) - 520px),480px);margin:2px 2px 0}
.rc{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#111c3d;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.08);touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform;cursor:grab}
.rc.back{transform:translateY(12px) scale(.94);opacity:.7;background:#0e1838 url(bg/cardback.webp) center/cover;cursor:default}
.rc .ph{position:absolute;inset:0;background:center/cover #1b2754}
.rc .sh{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(5,10,24,.95))}
.rc .rar{position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:999px;background:rgba(5,10,24,.65);color:var(--gold);font-size:13px;backdrop-filter:blur(6px)}.rc .rar i{opacity:.3;font-style:normal}
.rc .tm{position:absolute;top:12px;right:12px;padding:5px 10px;border-radius:999px;background:rgba(5,10,24,.65);font:700 12px Nunito;color:#c9d3ef}
.rc .info{position:absolute;left:16px;right:16px;bottom:14px}.rc .info h2{margin:0;font-size:32px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.rc .info .m{color:#d4dcf5;font-size:14px;margin-top:2px}
.rc .tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.rc .tags span{padding:3px 9px;border-radius:8px;font:800 11px Nunito;letter-spacing:.05em;background:linear-gradient(90deg,var(--acc),var(--acc2))}.rc .tags span.g{background:rgba(255,255,255,.14)}
.meter{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.5);opacity:0;transition:opacity .12s,transform .15s cubic-bezier(.3,1.6,.6,1);pointer-events:none;text-align:center}
.meter.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.meter b{display:block;font:800 96px/1 "Baloo 2";color:#fff;text-shadow:0 5px 0 var(--acc2),0 0 40px var(--acc)}.meter small{font:800 13px Nunito;letter-spacing:.14em}
.rc.fly{transition:transform .4s cubic-bezier(.3,.9,.4,1),opacity .4s;transform:translateX(140%) rotate(22deg)!important;opacity:0}
.rc.in{animation:cardIn .4s cubic-bezier(.3,1.4,.6,1)}
@keyframes cardIn{from{transform:translateY(16px) scale(.94);opacity:.6}}
.stars10{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:10px 0 4px}
.stars10 button{height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(11,21,48,.8);color:#c9d3ef;font:800 16px "Baloo 2";cursor:pointer;padding:0;transition:transform .1s,background .15s}
.stars10 button.on{background:linear-gradient(180deg,var(--acc),var(--acc2));color:#fff;border-color:transparent;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.stars10 button:active{transform:translateY(2px)}
.ract{display:flex;gap:8px}.ract .btn{flex:1;padding:10px}
.hint{text-align:center;color:#c9d3ef;font-size:12px;margin:2px 0 6px}
.res{position:absolute;left:10px;right:10px;top:10px;padding:14px;border-radius:18px;background:rgba(11,21,48,.94);border:1px solid var(--line);backdrop-filter:blur(10px);transform:translateY(-10px) scale(.97);opacity:0;transition:.25s cubic-bezier(.3,1.4,.6,1);pointer-events:none;z-index:3}
.res.on{opacity:1;transform:none}
.res .r1{display:flex;justify-content:space-between;align-items:baseline}.res .r1 b{font:800 30px "Baloo 2";color:var(--gold)}
.hist{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:6px}.hist i{flex:1;border-radius:4px 4px 2px 2px;background:rgba(255,255,255,.2);min-height:4px}.hist i.me{background:var(--acc)}
.fx{position:absolute;z-index:30;pointer-events:none;font:800 20px "Baloo 2";color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.6);animation:fxUp 1s ease-out forwards}
@keyframes fxUp{to{transform:translateY(-70px) scale(1.2);opacity:0}}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:31;overflow:hidden}.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall 1.6s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fall{to{transform:translateY(900px) rotate(720deg);opacity:.2}}
.lvup{text-align:center}.lvup .big{font:800 72px/1 "Baloo 2";color:var(--gold);text-shadow:0 5px 0 #8a5a00,0 0 40px var(--gold);animation:pop .6s}
/* league */
.lrow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);cursor:pointer}.lrow:last-child{border:0}
.lrow .n{width:28px;font-weight:800;text-align:center}.lrow .a{width:38px;height:38px;border-radius:50%;background:center/cover;flex:none}.lrow .s{margin-left:auto;font-weight:800;color:var(--gold)}
.lrow.me{background:rgba(245,197,66,.1);border-radius:12px}
/* plans */
.plan{background:var(--panel);border-radius:18px;padding:14px;border:2px solid var(--line);margin-bottom:10px}.plan.hot{border-color:var(--acc)}.plan.cur{border-color:var(--gold)}
.plan ul{margin:6px 0 10px;padding-left:18px;font-size:14px}.plan .pr{font:800 24px "Baloo 2"}
/* profile */
.prof-head{text-align:center}.prof-head .ava{width:96px;height:96px;margin:6px auto 8px;border-radius:50%;border:4px solid var(--gold);background:center/cover;box-shadow:0 0 30px rgba(245,197,66,.25)}
.ava{border-radius:50%;background:center/cover #222;border:3px solid var(--gold);flex:none;display:inline-block}
.pstats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:12px 0}.pstats b{display:block;font:800 20px "Baloo 2"}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.themes button{height:72px;border-radius:14px;border:2px solid var(--line);background:#0B1530 center 88%/cover;color:#fff;font:800 13px "Baloo 2";cursor:pointer;text-shadow:0 1px 4px #000;display:flex;align-items:flex-end;justify-content:center;padding:6px}
.themes button.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
/* trades */
.trade{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:start}.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* nav */
nav.bn{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);height:68px;background:rgba(9,17,40,.9);display:flex;align-items:center;justify-content:space-around;border:1px solid var(--line);border-radius:24px;z-index:8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav.bn button{border:0;background:none;font:700 11px Nunito;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;width:62px;position:relative;transition:color .15s}
nav.bn button svg{width:24px;height:24px;transition:transform .2s}nav.bn button.on{color:var(--ink)}nav.bn button.on svg{color:var(--acc);transform:translateY(-2px)}
nav.bn button.sosb svg{color:#ff7b80}
nav.bn .cam{width:66px;height:66px;border-radius:50%;background:linear-gradient(180deg,var(--acc),var(--acc2));color:#fff;margin-top:-36px;box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 0 6px var(--bg),0 0 26px var(--acc);justify-content:center}
nav.bn .cam svg{width:30px;height:30px;color:#fff!important}
/* modal */
.modal{position:absolute;inset:0;background:rgba(3,7,18,.78);display:flex;align-items:center;justify-content:center;z-index:20;padding:18px;flex-direction:column;animation:fade .2s;backdrop-filter:blur(4px)}
@keyframes fade{from{opacity:0}}
.modal>*{animation:rise .3s cubic-bezier(.3,1.4,.6,1)}
.modal .box{width:100%;max-width:370px;max-height:86%;overflow-y:auto;margin:0;background:#111f45}
.big{width:260px}.big .nm{font-size:18px;padding:8px 10px 0}.big .st{font-size:16px;padding:0 10px 4px}.fact{padding:4px 10px 10px;font-size:13px;color:var(--mut)}
.mbtns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.pack{display:flex;gap:10px}.flip{width:104px;height:150px;perspective:600px;cursor:pointer}
.flip .f{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}.flip.open .f{transform:rotateY(180deg)}
.flip:not(.open) .f{animation:wiggle 1.6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-3deg)}20%{transform:rotate(3deg)}30%{transform:rotate(0)}}
.flip .bk,.flip .fr{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px}
.flip .bk{background:url(bg/cardback.webp) center/cover;border:2px solid var(--gold);box-shadow:0 0 20px rgba(245,197,66,.35)}
.flip .fr{transform:rotateY(180deg)}
.toast{position:absolute;left:50%;top:14px;transform:translate(-50%,-90px);background:rgba(17,31,69,.96);border:1px solid var(--line);color:#fff;padding:10px 16px;border-radius:16px;font-weight:700;transition:.3s cubic-bezier(.3,1.4,.6,1);z-index:40;font-size:14px;max-width:92%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.on{transform:translate(-50%,0)}
.note{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.note.new{font-weight:800}
.top2{display:flex;align-items:center;gap:8px;margin-bottom:8px}.back{font-size:22px;cursor:pointer;border:0;background:var(--panel2);border-radius:12px;width:40px;height:40px;color:var(--ink);flex:none}
[hidden]{display:none!important}
@keyframes bob{50%{transform:translateY(-6px)}}
/* frames + shiny */
.wc.fr-leaf .in{border-color:#3fa34d;box-shadow:inset 0 0 0 2px #b9f2a1}
.wc.fr-ice .in{border-color:#7cc8ff;box-shadow:inset 0 0 0 2px #e3f6ff}
.wc.fr-fire .in{border-color:#ff6b2c;box-shadow:inset 0 0 0 2px #ffd166}
.wc.fr-gold .in{border-color:#d4a514;box-shadow:inset 0 0 0 2px #fff1b8}
.wc.shiny:after{content:"✨";position:absolute;right:6px;bottom:6px;font-size:16px;animation:bob 1.6s ease-in-out infinite}
.wc.shiny .ph{position:relative}.wc.shiny .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;animation:shine 2.6s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
.frames{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}.frames button{border:2px solid var(--line);border-radius:10px;padding:6px 9px;background:var(--panel);font-weight:700;font-size:12px;cursor:pointer}
.frames button.on{border-color:var(--gold)}.frames button.lk{opacity:.6}
.stat{display:grid;grid-template-columns:78px 1fr 34px;gap:6px;align-items:center;font-size:12px;margin:3px 0}.stat i{display:block;height:7px;border-radius:9px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{body.print-sos .scr>*:not(.prev):not(h2):not(.small):not(p):not(#sosQr),body.print-sos nav.bn,body.print-sos .toast,body.print-sos #sosQr .row{display:none!important}body.print-sos .phone{box-shadow:none;height:auto;width:100%;background:#fff;color:#000}body.print-sos .phone:before{display:none}body.print-sos .scr{overflow:visible}body.print-sos .prev{max-width:520px}}

/* compact category grid (fits 10 tiles without scrolling) */
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.cgrid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;padding:5px 2px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--mut);cursor:pointer;transition:transform .1s,background .15s;backdrop-filter:blur(8px)}
.cgrid button .e{font-size:20px;line-height:1.1}.cgrid button .l{font:700 10.5px/1.15 Nunito;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgrid button i{font:800 10px Nunito;font-style:normal;color:var(--gold)}
.cgrid button.on{background:linear-gradient(180deg,var(--acc),var(--acc2));color:#fff;border-color:transparent;box-shadow:0 3px 0 rgba(0,0,0,.35)}.cgrid button.on i{color:#fff}
.cgrid button:active{transform:scale(.95)}
.cgrid.c5 button{min-height:58px}
.pill.on{background:linear-gradient(180deg,var(--acc),var(--acc2));border-color:transparent;color:#fff}

.cgrid{grid-template-columns:repeat(6,1fr);gap:5px}.cgrid button .l{font-size:10px}.cgrid button .e{font-size:19px}.cgrid.c5{grid-template-columns:repeat(5,1fr)}

/* gold animated rating stars */
.stars10 button{display:grid;place-items:center;padding:3px;background:rgba(11,21,48,.7)}
.stars10 svg{width:100%;height:100%;max-width:30px;fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.35);stroke-width:1.2;transition:transform .25s cubic-bezier(.3,1.8,.5,1),fill .15s,filter .2s}
.stars10 button.on{background:rgba(245,197,66,.14);border-color:rgba(245,197,66,.45);box-shadow:none}
.stars10 button.on svg{fill:url(#gstar);stroke:#FFE58A;transform:scale(1.18);filter:drop-shadow(0 0 6px rgba(255,212,59,.85));animation:starPop .45s var(--d,0ms) cubic-bezier(.3,1.8,.5,1) both,twinkle 2.2s calc(var(--d,0ms) + .5s) ease-in-out infinite}
@keyframes starPop{0%{transform:scale(.6) rotate(-20deg)}70%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1.18)}}
@keyframes twinkle{0%,100%{filter:drop-shadow(0 0 5px rgba(255,212,59,.7))}50%{filter:drop-shadow(0 0 11px rgba(255,236,150,1)) brightness(1.15)}}
.wrongb{position:absolute;right:12px;top:48px;z-index:2;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 10px;background:rgba(5,10,24,.65);color:#ffd9a8;font:800 12px Nunito;cursor:pointer;backdrop-filter:blur(6px)}
.wrongb:active{transform:scale(.95)}
.chip.dim{opacity:.55;filter:grayscale(.6)}
/* badges */
.bdg{position:relative;display:inline-block;border-radius:50%;flex:none;padding:3px;background:#2a3560}
.bdg img{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scale(1.28);display:block;clip-path:circle(39%)}
.bdg.t1{background:linear-gradient(135deg,#f0b27a,#a0522d);box-shadow:0 0 12px rgba(205,127,50,.45)}
.bdg.t2{background:linear-gradient(135deg,#ffffff,#9aa6b2);box-shadow:0 0 14px rgba(220,230,240,.5)}
.bdg.t3{background:linear-gradient(135deg,#fff1b8,#e0a800,#fff1b8);box-shadow:0 0 18px rgba(245,197,66,.65);animation:goldPulse 2.4s ease-in-out infinite}
@keyframes goldPulse{50%{box-shadow:0 0 26px rgba(255,220,100,.9)}}
.bdg.t0 img{filter:grayscale(1) brightness(.5)}
.bdg b{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:10px;color:#FFD43B;background:#0B1530;border-radius:99px;padding:0 5px;letter-spacing:-1px;white-space:nowrap;border:1px solid rgba(245,197,66,.5)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bitem{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:10px 4px;border-radius:16px;background:var(--panel);border:1px solid var(--line);cursor:pointer}
.bitem>b{font:800 12px/1.15 "Baloo 2";margin-top:4px}.bitem>i{display:block;width:80%;height:5px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}.bitem>i u{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.bitem.lock>b{color:var(--mut)}
.brow{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}.bmini{display:flex;flex-direction:column;align-items:center;gap:6px;width:70px;flex:none;text-align:center;font:700 10.5px/1.15 Nunito;color:var(--mut)}
.ttl{display:inline-block;margin-top:3px;padding:2px 8px;border-radius:99px;font:800 11px Nunito;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.ttl.t1{border-color:#cd7f32;color:#f0b27a}.ttl.t2{border-color:#c9d3e3;color:#e6ecf5}.ttl.t3{border-color:#F5C542;color:#FFD43B;box-shadow:0 0 10px rgba(245,197,66,.3)}
.streakbox{display:flex;align-items:center;gap:12px}.streakbox .fl{font-size:40px;animation:flame 1.4s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,120,0,.7))}.streakbox .fl.off{filter:grayscale(1);opacity:.5;animation:none}
@keyframes flame{50%{transform:scale(1.12) rotate(-4deg)}}
.chl.got{opacity:.6}

/* ===== v14: less boxy – round, floating, organic shapes ===== */
:root{--r:26px}
.box{border:0;border-radius:28px;background:linear-gradient(160deg,rgba(30,46,96,.72),rgba(14,24,54,.72));box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.mem{border:0;border-radius:30px;background:linear-gradient(160deg,rgba(30,46,96,.7),rgba(14,24,54,.7));box-shadow:0 10px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.mem.me{box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(245,197,66,.2)}
.mem .top div{border-radius:50%;border-width:3px}
.btn,.btn.gh,.btn.red{border-radius:999px}
.cta{border-radius:999px}
.chip{border-radius:999px;border:0;background:rgba(17,31,69,.7)}
.seg{border-radius:999px;border:0;background:rgba(5,10,24,.55)}.seg button{border-radius:999px}
input.in,select.in,textarea.in{border-radius:20px}
/* stars: free-floating, no squares */
.stars10{gap:0;margin:12px -4px 6px}
.stars10 button,.stars10 button.on{background:none;border:0;box-shadow:none;height:40px;padding:0 1px}
.stars10 svg{max-width:34px;fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.4)}
/* category picker: round bubbles with label under */
.cgrid{gap:8px 2px}
.cgrid button,.cgrid button.on{background:none;border:0;box-shadow:none;min-height:0;padding:0;backdrop-filter:none;gap:3px}
.cgrid button .e{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),rgba(17,31,69,.85));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.cgrid button.on .e{background:linear-gradient(180deg,var(--acc),var(--acc2));box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 18px var(--acc);transform:scale(1.08)}
.cgrid button .l{color:var(--mut)}.cgrid button.on .l{color:#fff;font-weight:800}
.cgrid button i{color:var(--gold)}.cgrid button.on i{color:var(--gold)}
.cgrid.c5 button .e{width:52px;height:52px}
/* badges + quest without boxes */
.bitem{background:none;border:0;padding:6px 2px}
.bgrid{gap:14px 8px}
.quest{background:none;box-shadow:none;padding:4px 2px}
.res{border:0;border-radius:24px}
.toast{border:0;border-radius:999px}
.rc{border-radius:30px}
.back{border-radius:50%}
.plan{border-radius:28px}
.themes button{border-radius:22px}
.sp{border-radius:20px}.sp img{border-radius:50%}
.wrongb{border:0}

.tags{display:grid;gap:8px}
.tag{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:999px;background:linear-gradient(160deg,rgba(30,46,96,.72),rgba(14,24,54,.72))}
.tag .e{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:21px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(17,31,69,.9));flex:none}
.tag.t1 .e{box-shadow:0 0 0 3px #cd7f32}.tag.t2 .e{box-shadow:0 0 0 3px #dfe6ef}.tag.t3 .e{box-shadow:0 0 0 3px #F5C542,0 0 16px rgba(245,197,66,.6)}
.tag b{font:800 15px "Baloo 2";display:block}.tag i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;margin:3px 0}.tag i u{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.tag.lock{opacity:.6}.tag.lock .e{filter:grayscale(1)}

.tag .lv,.plv .lv{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font:800 16px "Baloo 2";color:#3b2a00;background:linear-gradient(180deg,#FFE58A,#E9A915);box-shadow:0 0 12px rgba(245,197,66,.45)}
.tag i{height:8px}
.plv{display:flex;align-items:center;gap:10px;max-width:300px;margin:8px auto 4px;text-align:left}.plv i{display:block;height:10px;border-radius:10px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:3px}.plv i u{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:10px}

/* category bubble with XP progress ring + level badge */
.cgrid .ring2{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:conic-gradient(rgba(255,255,255,.35) var(--p,0%),rgba(255,255,255,.08) 0)}
.cgrid .ring2.has{background:conic-gradient(#FFD43B var(--p,0%),rgba(255,255,255,.1) 0);filter:drop-shadow(0 0 6px rgba(255,212,59,.35))}
.cgrid .ring2 .e{width:44px;height:44px}
.cgrid button.on .ring2 .e{box-shadow:0 0 16px var(--acc);transform:none}
.cgrid button.on .ring2{transform:scale(1.08);transition:transform .2s}
.cgrid .lvb{position:absolute;right:-4px;bottom:-3px;min-width:20px;height:20px;padding:0 4px;border-radius:99px;display:grid;place-items:center;font:800 11px "Baloo 2";color:#3b2a00;background:linear-gradient(180deg,#FFE58A,#E9A915);box-shadow:0 0 0 2px #0B1530}
.cgrid .lvb.lk{background:#2a3560;color:#c9d3ef;font-size:9px}

/* v18: real circular progress bar (SVG stroke) */
.cgrid .ring2,.cgrid .ring2.has{background:none;filter:none;width:56px;height:56px}
.cgrid .ring2 svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.cgrid .ring2 circle{fill:none;stroke-width:4.5}
.cgrid .ring2 .tr{stroke:rgba(255,255,255,.12)}
.cgrid .ring2 .pg{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.9,.3,1)}
.cgrid .ring2.has .pg{stroke:#FFD43B;filter:drop-shadow(0 0 4px rgba(255,212,59,.7))}
.cgrid .ring2 .e{width:42px;height:42px}

/* ===== v19: smooth progress + performance (no endless glitter) ===== */
.cgrid .ring2 .pg{transition:stroke-dashoffset 1.1s cubic-bezier(.22,.9,.3,1)}
.xp i,.bar i,.tag i u,.plv i u,.bitem>i u,.dex i b,.dexL .dl i b{transition:width 1.1s cubic-bezier(.22,.9,.3,1)}
.gain{animation:gain .9s ease-out 1}
.ring2.gain{animation:gainRing .9s ease-out 1}
@keyframes gain{30%{box-shadow:0 0 0 3px rgba(255,212,59,.45),0 0 16px rgba(255,212,59,.4)}100%{box-shadow:0 0 0 0 rgba(255,212,59,0)}}
@keyframes gainRing{30%{transform:scale(1.12)}100%{transform:scale(1)}}
.box,.mem,.cgrid button,.chip,.rc .rar,.rc .tm,.wrongb,.res,.sp,.toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.res{background:rgba(11,21,48,.97)}
.stars10 button.on svg{animation:starPop .45s var(--d,0ms) cubic-bezier(.3,1.8,.5,1) both;filter:drop-shadow(0 0 5px rgba(255,212,59,.75))}
.bdg.t3{animation:none}
.wc.t4{animation:none;background-size:100% 100%}
.modal .wc.t4{animation:holo 6s linear infinite;background-size:300% 300%}
.wc.shiny:after{animation:none}
.wc.shiny .ph:after{animation:none;opacity:0}
.modal .wc.shiny .ph:after{opacity:1;animation:shine 3s linear infinite}
.scr>*{animation-duration:.28s}
.scr>*:nth-child(n+5){animation-delay:.08s}

/* ===== v20: avatar decorations, forum ===== */
.ava2{position:relative;display:inline-block;width:var(--s);height:var(--s);flex:none}
.ava2 .p{position:absolute;inset:0;border-radius:50%;background:center/cover #1b2754;border:2px solid rgba(255,255,255,.15)}
.ava2.hd .p{inset:17%;border:0}
.ava2 .d{position:absolute;inset:-6%;background:center/contain no-repeat;pointer-events:none}
.ava2.anim .d{animation:decoSway 5s ease-in-out infinite;will-change:transform}
@keyframes decoSway{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(3deg) scale(1.03)}}
.hud .ava2:not(.hd) .p{border:3px solid var(--gold)}
.bigava{display:flex;justify-content:center;margin:4px 0 4px}
.bigava .ava2:not(.hd) .p{border:4px solid var(--gold);box-shadow:0 0 30px rgba(245,197,66,.25)}
.decos{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.decos button{flex:none;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mut);font:700 11px Nunito;cursor:pointer;padding:4px;border-radius:18px}
.decos button.on{background:rgba(245,197,66,.14);color:#fff;box-shadow:0 0 0 2px var(--gold)}
.addf{border:0;border-radius:999px;padding:6px 9px;background:linear-gradient(180deg,var(--acc),var(--acc2));color:#fff;font:800 12px Nunito;cursor:pointer;flex:none;margin-right:4px}
.seg.s3{grid-template-columns:1fr 1fr 1fr}.seg.s3 button{font-size:14px;padding:8px 4px}
.room{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:10px;border-radius:26px;background:linear-gradient(160deg,rgba(30,46,96,.72),rgba(14,24,54,.72));cursor:pointer}
.room:active{transform:scale(.985)}.room b{font:800 16px "Baloo 2"}.room .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:23px;flex:none;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(17,31,69,.9))}.ri.sm{width:38px;height:38px;font-size:19px}
.live{font:800 12px Nunito;color:var(--ok);white-space:nowrap}
.rmsgs{display:flex;flex-direction:column;gap:10px}
.rm{display:flex;gap:8px;align-items:flex-start}.rm.me{flex-direction:row-reverse}
.rm .bub{max-width:76%;padding:8px 12px;border-radius:20px;background:linear-gradient(160deg,rgba(30,46,96,.85),rgba(14,24,54,.85));word-wrap:break-word}
.rm.me .bub{background:linear-gradient(180deg,var(--acc),var(--acc2))}.rm.me .bub .small{color:rgba(255,255,255,.75)}
.rm .who{display:flex;align-items:center;gap:6px;font-size:13px}.rm .who b{cursor:pointer}.rm .rep{margin-left:auto;border:0;background:none;color:var(--mut);cursor:pointer;font-size:16px;line-height:1}
.rcard2{width:120px;margin-top:6px}
.dday{text-align:center;font:700 11px Nunito;color:var(--mut);margin:6px 0}
.rform{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 88px);display:flex;gap:6px;padding:8px 12px;background:linear-gradient(transparent,rgba(11,21,48,.95) 30%)}
.rform .in{margin:0;border-radius:999px}.rform .btn{flex:none;width:46px;padding:0}

.topw{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:6px;scrollbar-width:none;scroll-snap-type:x mandatory}.topw::-webkit-scrollbar{display:none}
.tp{position:relative;flex:none;width:118px;height:156px;border-radius:24px;overflow:hidden;cursor:pointer;scroll-snap-align:start;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.tp .ph{position:absolute;inset:0;background:center/cover #1b2754}
.tp:after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,rgba(5,10,24,.92))}
.tp.r1{box-shadow:0 0 0 3px #F5C542,0 8px 24px rgba(245,197,66,.35)}.tp.r2{box-shadow:0 0 0 3px #dfe6ef}.tp.r3{box-shadow:0 0 0 3px #cd7f32}
.tp .rk{position:absolute;top:8px;left:8px;z-index:1;min-width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(5,10,24,.7);font:800 14px "Baloo 2"}
.tp .sc{position:absolute;top:8px;right:8px;z-index:1;padding:2px 8px;border-radius:99px;background:rgba(5,10,24,.7);color:#FFD43B;font:800 12px Nunito}
.tp .by{position:absolute;left:10px;right:8px;bottom:8px;z-index:1;font:800 13px/1.15 "Baloo 2";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tp .by small{font:700 11px Nunito;color:#c9d3ef}