/* MeowLearn – style gry */
/* Layout: one focused column; sticky stat bar; course path as a winding trail of unit nodes; lessons take over the screen */
:root{
  --bg:#F5F3FA; --surface:#FFFFFF; --sunk:#ECE8F5; --line:#DCD6EA;
  --ink:#221D3D; --muted:#6B6585;
  --ginger:#E8812C; --ginger-deep:#C2621A; --ginger-soft:#FCE7D3;
  --good:#17946B; --good-soft:#D7F2E7; --bad:#D63B57; --bad-soft:#FBE0E5;
  --locked:#C9C3DA; --plum:#5B4B9A; --plum-soft:#E6E1F5;
  --f-display:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:22px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16132A; --surface:#211D3A; --sunk:#2B2648; --line:#3A3460;
  --ink:#F0EDFA; --muted:#A49EC0;
  --ginger:#F2954A; --ginger-deep:#F7B077; --ginger-soft:#3E2C24;
  --good:#3CCB97; --good-soft:#163A30; --bad:#F06A82; --bad-soft:#41202B;
  --locked:#4A4470; --plum:#A898E8; --plum-soft:#2F2856; color-scheme:dark}}
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --bg:#16132A; --surface:#211D3A; --sunk:#2B2648; --line:#3A3460;
  --ink:#F0EDFA; --muted:#A49EC0;
  --ginger:#F2954A; --ginger-deep:#F7B077; --ginger-soft:#3E2C24;
  --good:#3CCB97; --good-soft:#163A30; --bad:#F06A82; --bad-soft:#41202B;
  --locked:#4A4470; --plum:#A898E8; --plum-soft:#2F2856; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1100px 650px at 12% -8%,rgba(168,152,232,.22),transparent 60%),radial-gradient(900px 620px at 108% 6%,rgba(242,149,74,.14),transparent 55%),radial-gradient(800px 560px at 50% 112%,rgba(60,203,151,.10),transparent 60%),var(--bg);background-attachment:fixed;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
body:has(header.top)::before{display:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,label:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.wrap{max-width:720px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* top bar */
.top{position:sticky;top:0;padding-top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 1px 0 rgba(255,255,255,.03)}
.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--ginger-deep);background:none;border:0;padding:0}
.brand svg{width:38px;height:38px}
.stats{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(6px);font-weight:700;font-size:14px}
.pill svg{width:18px;height:18px}
.tabs{display:flex;gap:4px;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar,.ladder::-webkit-scrollbar{display:none}
.ladder{scrollbar-width:none}
@media (min-width:640px){.tabs{flex-wrap:wrap;overflow:visible}}
.tab{border:0;background:none;padding:6px 12px;border-radius:10px;font-weight:700;color:var(--muted);white-space:nowrap}
.tab[aria-current="page"]{background:var(--plum-soft);color:var(--plum)}

main{padding-block:20px 60px}
.stack{display:flex;flex-direction:column;gap:18px}
.card{background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 94%,white 4%),color-mix(in srgb,var(--surface) 97%,black 8%));border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:18px;box-shadow:0 16px 36px -20px rgba(0,0,0,.6)}
.muted{color:var(--muted)}
.small{font-size:14px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* buttons — chunky, pressable */
.btn{border:0;border-radius:14px;padding:12px 20px;font-weight:800;font-size:16px;letter-spacing:.02em;background:var(--ginger);color:#fff;box-shadow:0 4px 0 var(--ginger-deep);transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ginger-deep)}
.btn:disabled{background:var(--locked);box-shadow:0 4px 0 var(--line);cursor:not-allowed;color:var(--surface)}
.btn.ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.btn.good{background:var(--good);box-shadow:0 4px 0 color-mix(in srgb,var(--good) 70%,#000)}
.btn.bad{background:var(--bad);box-shadow:0 4px 0 color-mix(in srgb,var(--bad) 70%,#000)}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:12px}
.btn.wide{width:100%}
.linkbtn{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:5px 12px;color:var(--plum);font-weight:700;text-decoration:none;line-height:1.3;transition:border-color .12s,background .12s}
.linkbtn:hover{border-color:var(--plum);background:var(--plum-soft)}
.linkbtn:active{transform:translateY(1px)}
.linkbtn:disabled{opacity:.5;cursor:default;border-color:var(--line);background:var(--surface)}
.linkbtn[data-delete],.linkbtn[data-leaveclan],.linkbtn[data-kick],.linkbtn[data-duelkick],.linkbtn[data-freeseat]{color:var(--bad)}
.linkbtn[data-delete]:hover,.linkbtn[data-leaveclan]:hover,.linkbtn[data-kick]:hover,.linkbtn[data-duelkick]:hover,.linkbtn[data-freeseat]:hover{border-color:var(--bad);background:var(--bad-soft)}

/* daily */
.daily{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.ring{width:96px;height:96px}
.ring text{fill:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 12px;font-weight:700;font-size:14px}
.chip[aria-pressed="true"]{border-color:var(--ginger);background:var(--ginger-soft);color:var(--ginger-deep)}
.daily-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}

/* course + path */
.course-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.course-head > div{min-width:0}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--plum-soft);color:var(--plum)}
.tag.ex{background:var(--ginger-soft);color:var(--ginger-deep)}
.bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--good);border-radius:99px}
.plan{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:14px}
.plan b{font-family:var(--f-num)}
.path{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.path li{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:220px;text-align:center}
.node{width:72px;height:72px;border-radius:50%;border:0;display:grid;place-items:center;position:relative;background:none;padding:0}
.node svg{position:absolute;inset:0;width:72px;height:72px}
.node .core{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:22px;color:#fff;background:var(--ginger);box-shadow:0 4px 0 var(--ginger-deep);position:relative}
.node.done .core{background:var(--good);box-shadow:0 4px 0 color-mix(in srgb,var(--good) 70%,#000)}
.node.locked{cursor:not-allowed}
.node.locked .core{background:var(--locked);box-shadow:0 4px 0 var(--line);color:var(--surface)}
.node.next .core{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.node-label{font-weight:700;font-size:14px;line-height:1.25}
.unit-actions{display:flex;gap:8px;margin-top:4px}

/* drop zone */
.drop{border:3px dashed var(--line);border-radius:var(--r);padding:28px 16px;text-align:center;background:var(--surface);transition:border-color .15s, background .15s}
.drop.over{border-color:var(--ginger);background:var(--ginger-soft)}
.files{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.files li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:var(--sunk);font-size:14px;align-items:center}
.files li span{min-width:0;overflow-wrap:anywhere}
.field{display:flex;flex-direction:column;gap:6px}
.field input[type=text]{border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink)}
.notice{padding:12px 14px;border-radius:12px;background:var(--plum-soft);color:var(--ink);font-size:14px}
.notice.warn{background:var(--ginger-soft)}
.log{font-family:var(--f-num);font-size:13px;color:var(--muted);white-space:pre-wrap;max-height:160px;overflow:auto}

/* lesson */
.lesson{min-height:100%;display:flex;flex-direction:column}
.lesson > .wrap{width:100%}
.lesson .foot{width:100%}
.lesson-top{display:flex;gap:12px;align-items:center;padding-block:14px}
.x{border:0;background:none;width:36px;height:36px;border-radius:10px;font-size:22px;color:var(--muted)}
.lbar{flex:1;min-width:60px;height:16px;border-radius:99px;background:var(--sunk);overflow:hidden}
.lbar i{display:block;height:100%;background:var(--good);border-radius:99px;transition:width .3s}
.ex-area{flex:1;display:flex;flex-direction:column;gap:18px;padding-block:8px 24px}
.prompt{display:flex;gap:14px;align-items:flex-start}
.prompt .cat{width:72px;flex:none}
.bubble{position:relative;border:2px solid var(--line);border-radius:16px;padding:12px 16px;background:var(--surface);font-size:18px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.ex-kind{font-size:13px;font-weight:700;color:var(--plum);text-transform:uppercase;letter-spacing:.08em}
.opts{display:grid;grid-template-columns:1fr;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);border-radius:14px;padding:12px 14px;font-size:16px;font-weight:600;min-width:0}
.opt .k{flex:none;width:28px;height:28px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;font-family:var(--f-num);font-size:13px;color:var(--muted)}
.opt span:last-child{min-width:0;overflow-wrap:anywhere}
.opt[aria-pressed="true"]{border-color:var(--plum);background:var(--plum-soft)}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt:disabled{cursor:default}
.flash{perspective:1000px;min-height:220px;width:100%}
.flash-inner{position:relative;min-height:220px;transition:transform .45s;transform-style:preserve-3d}
.flash.flipped .flash-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;background:var(--surface);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;text-align:center;gap:8px;overflow-y:auto;overflow-x:hidden;width:100%;font:inherit;color:var(--ink)}
.face.back{transform:rotateY(180deg);background:var(--ginger-soft)}
.face .big{font-family:var(--f-display);font-size:26px;font-weight:700;overflow-wrap:anywhere}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match .col{display:flex;flex-direction:column;gap:10px;min-width:0}
.mt{border:2px solid var(--line);border-bottom-width:4px;border-radius:12px;background:var(--surface);padding:10px;font-size:14px;font-weight:600;text-align:left;min-height:52px;overflow-wrap:anywhere}
.mt[aria-pressed="true"]{border-color:var(--plum);background:var(--plum-soft)}
.mt.ok{border-color:var(--good);background:var(--good-soft);opacity:.55}
.mt.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.foot{position:sticky;bottom:0;border-top:2px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom,0px)}
.foot .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-block:14px;flex-wrap:wrap}
.foot.ok{background:var(--good-soft);border-color:var(--good)}
.foot.no{background:var(--bad-soft);border-color:var(--bad)}
.verdict{min-width:0;flex:1 1 240px}
.verdict h3{font-size:22px}
.foot.ok .verdict h3{color:var(--good)}
.foot.no .verdict h3{color:var(--bad)}
.verdict p{margin:2px 0 0;font-size:14px;overflow-wrap:anywhere}

/* result + stats */
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:24px}
.result .cat{width:140px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.tile{border:2px solid var(--line);border-radius:14px;padding:12px 8px;background:var(--surface);text-align:center}
.tile b{display:block;font-family:var(--f-num);font-size:22px}
.tile span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chart text{fill:var(--muted);font-family:var(--f-num);font-size:11px}
.rows{display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.row .bar{grid-column:1/-1}
.confirm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.xprow{display:grid;grid-template-columns:auto auto 1fr;gap:6px 10px;align-items:center;margin-top:10px}
.xprow .xpbar{grid-column:1/-1;height:8px}
.xprow .xpbar > i{background:var(--ginger)}
.xprow > .small.muted{grid-column:1/-1}
.rank{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;background:var(--ginger-soft);color:var(--ginger-deep);font-weight:800;font-size:13px}
.xplist ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.xplist li{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.xplist li span{min-width:0;overflow-wrap:anywhere}
.xplist li b{color:var(--ginger-deep);white-space:nowrap}
.xplist li.sum{border-top:2px solid var(--line);padding-top:6px;font-weight:800}
.rankup{background:var(--ginger-soft)}
.pillbtn{border:0;cursor:pointer;color:inherit}
.hero-grid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:20px;align-items:center}
.stage{display:flex;flex-direction:column;align-items:center;gap:8px;background:radial-gradient(circle at 50% 60%,var(--ginger-soft),transparent 70%);border-radius:var(--r);padding:8px}
.stage-cat{width:190px;max-width:100%}
.stage-name{margin:0;font-family:var(--f-display);font-weight:800;font-size:22px;text-align:center}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.swatch{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px 4px 4px;font-weight:700;font-size:14px}
.swatch span{width:24px;height:24px;border-radius:50%;border:2px solid var(--line)}
.swatch[aria-pressed="true"]{border-color:var(--ginger);background:var(--ginger-soft)}
.slot{display:flex;flex-direction:column;gap:6px}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.item{border:2px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px;display:flex;flex-direction:column;gap:8px}
.item.trying{border-color:var(--plum)}
.thumb{border:0;background:var(--sunk);border-radius:12px;padding:8px 20px 4px;display:block}
.thumb svg{width:100%;height:auto}
.item-name{font-weight:700;font-size:14px;line-height:1.25}
.price{display:flex;align-items:center;gap:4px}
.price svg{width:18px;height:18px}
.balance{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:30px;font-weight:800}
.balance svg{width:34px;height:34px}
.balance span{font-size:18px;color:var(--muted)}
.modal-bg{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,#000 55%,transparent);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-left,0px));padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-bottom,0px))}
.modal{width:min(440px,100%);background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 96%,white 4%),var(--surface));border-radius:22px;padding:16px;border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px -24px rgba(0,0,0,.65)}
.modal-head{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.adscreen{aspect-ratio:16/9;max-width:100%;border-radius:14px;background:linear-gradient(135deg,var(--plum),var(--ginger));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;gap:2px;overflow:hidden}
.adscreen p{margin:0;font-family:var(--f-display);font-weight:800;font-size:20px}
.ad-cat{width:64px;animation:bob 1.2s ease-in-out infinite}
@media (max-width:560px){.hero-grid{grid-template-columns:1fr}.items{grid-template-columns:repeat(2,minmax(0,1fr))}}
.badge{flex:none;display:inline-block;vertical-align:middle}
.league-head{display:flex;gap:16px;align-items:center}
.ladder{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:0 4px;overflow-x:auto}
.rung{display:grid;place-items:center;min-width:36px}
.rung.dim{opacity:.4;filter:grayscale(.6)}
.rung.on{transform:translateY(-2px)}
.seg{display:flex;background:var(--sunk);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:8px;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lbrow{width:100%;display:grid;grid-template-columns:28px 40px minmax(0,1fr) auto;gap:10px;align-items:center;border:0;background:none;padding:6px 8px;border-radius:12px;text-align:left}
.lbrow:hover{background:var(--sunk)}
.lbrow.me{background:var(--plum-soft)}
.lbrow .pos{font-weight:700;text-align:center;color:var(--muted)}
.lbrow.up .pos{color:var(--good)}
.lbrow.down .pos{color:var(--bad)}
.who{display:flex;flex-direction:column;min-width:0}
.who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .small{display:inline-flex;align-items:center;gap:3px}
.who .small svg{width:14px;height:14px}
.lbxp{font-weight:700;white-space:nowrap}
.ava{display:block;height:44px;overflow:hidden}
.ava svg{width:100%;height:auto;display:block}
.tag.bot{background:var(--sunk);color:var(--muted)}
.zone{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px}
.zone.up{color:var(--good);border-top:2px dashed var(--good)}
.zone.down{color:var(--bad);border-top:2px dashed var(--bad)}
.prof-league{display:flex;gap:10px;align-items:center}
.toggle{display:flex;gap:10px;align-items:center;font-weight:700;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--ginger)}
.leaguebtn{display:inline-flex;align-items:center;gap:6px}
.pp{display:flex;flex-direction:column;gap:10px}
.plat{display:inline-flex;vertical-align:middle;color:var(--muted)}
.plat svg{width:15px;height:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ctag{display:inline-block;vertical-align:middle;margin-left:4px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;line-height:18px}
.nickrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.invite{display:flex;flex-direction:column;gap:8px}
.invite-row{display:flex;gap:8px;align-items:center}
.invite-row input{flex:1;min-width:0;border:2px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.clan-preview{display:flex;gap:12px;align-items:center}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.emb{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:4px;display:grid;place-items:center}
.emb[aria-pressed="true"]{border-color:var(--ink)}
.emb .dot{width:30px;height:30px;border-radius:50%;display:block}
.linkish{border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0}
.lbend{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
div.lbrow{cursor:default}
div.lbrow:hover{background:none}
div.lbrow.me:hover{background:var(--plum-soft)}
.seats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.seat{display:grid;grid-template-columns:22px 34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:12px}
.seat.turn{background:var(--ginger-soft)}
.seat .yarn svg{width:22px;height:22px;display:block}
.ava.empty{height:40px;border:2px dashed var(--line);border-radius:10px}
.board{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;background:var(--plum);padding:8px;border-radius:18px;width:100%;max-width:440px;margin:0 auto;box-shadow:0 5px 0 color-mix(in srgb,var(--plum) 65%,#000)}
.board .col{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;border:0;background:none;padding:0;border-radius:10px}
.board button.col:not(:disabled){cursor:pointer}
.board button.col:not(:disabled):hover{background:rgba(255,255,255,.14)}
.board button.col:disabled{cursor:default}
.board .cell{aspect-ratio:1;border-radius:50%;background:var(--bg);display:grid;place-items:center;overflow:hidden}
.board .cell svg{width:100%;height:100%;display:block}
.board .cell.last svg{animation:drop .35s ease-in}
.board .cell.win{box-shadow:0 0 0 3px #3CCB97}
.board.mini{width:120px;padding:4px;gap:2px;border-radius:10px;box-shadow:none;margin:0}
.board.mini .col{gap:2px}
@keyframes drop{from{transform:translateY(-320%)}}
@media (max-width:480px){.grid2{grid-template-columns:1fr}.board.mini{display:none}}
.emote-scene{position:relative;width:100%;max-width:240px;margin:0 auto;aspect-ratio:120/150}
.emote-scene.big{max-width:220px}
.emo-cat{position:absolute;inset:0}
.emo-cat svg{width:100%;height:100%;display:block}
.emo-fx{position:absolute;inset:0;pointer-events:none}
.fx{position:absolute;display:block}
.fx svg{width:100%;height:auto;display:block}
.emo-jump .emo-cat{animation:ejump .9s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes ejump{0%,100%{transform:translateY(0)}35%{transform:translateY(-12%)}55%{transform:translateY(-12%)}}
.emo-dance .emo-cat{animation:edance 1s ease-in-out infinite;transform-origin:50% 100%}
@keyframes edance{25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.emo-wave .arm-r{transform-origin:84px 98px;animation:ewave .45s ease-in-out infinite alternate}
@keyframes ewave{from{transform:rotate(0)}to{transform:rotate(-75deg)}}
.emo-purr .emo-cat{animation:epurr .14s linear infinite}
@keyframes epurr{50%{transform:translateX(1.2%) rotate(.6deg)}}
.heart{width:15%;bottom:35%;animation:efloat 2.2s ease-in infinite;opacity:0}
.purrtxt{font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--ginger-deep);animation:efloat 1.8s ease-out infinite;opacity:0}
@keyframes efloat{0%{transform:translateY(40%) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-160%) scale(1.1);opacity:0}}
.conf{width:4%;height:6%;top:-8%;border-radius:2px;animation:efall 2.4s linear infinite}
@keyframes efall{from{transform:translateY(0) rotate(0)}to{transform:translateY(1800%) rotate(540deg)}}
.fishfx{width:13%;top:-12%;animation:efall2 2.6s linear infinite}
@keyframes efall2{from{transform:translateY(0) rotate(0)}to{transform:translateY(900%) rotate(220deg)}}
.burst{width:38%;animation:eburst 1.6s ease-out infinite;opacity:0}
@keyframes eburst{0%{transform:scale(.1);opacity:1}100%{transform:scale(1.25);opacity:0}}
.shades{inset:0;width:100%;height:100%;animation:eshades 2.6s ease-out infinite}
@keyframes eshades{0%{transform:translateY(-40%);opacity:0}30%,100%{transform:translateY(0);opacity:1}}
.thumb .emote-scene{max-width:100%}
.thumbscene .emo-fx{overflow:hidden}
.duel-card{background:linear-gradient(135deg,var(--surface) 55%,var(--ginger-soft))}
.duel-cats{display:flex;align-items:flex-end;gap:0}
.duel-cats span{width:44px;margin-left:-8px}
.duel-cats span:nth-child(2){width:62px;z-index:1}
.duel-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;background:var(--surface);padding:14px;text-align:left;display:flex;flex-direction:column;gap:2px}
.mode b{font-family:var(--f-display);font-size:22px;color:var(--ginger-deep)}
.mode span{font-size:13px;color:var(--muted)}
.mode:active{transform:translateY(3px);border-bottom-width:2px}
.invite-row select{flex:1;min-width:0;border:2px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.duel-badge{flex:none;width:64px;height:64px;border-radius:18px;background:var(--ginger);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:22px}
.duel-stage{display:flex;flex-direction:column;gap:14px}
.duel-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dtime{font-family:var(--f-display);font-weight:800;font-size:22px}
.tbar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--ginger);border-radius:99px;width:100%}
.qcard{background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.qcard h2{font-size:24px;overflow-wrap:anywhere}
.qtag{font-size:12px;font-weight:800;letter-spacing:.04em;padding:3px 10px;border-radius:999px;background:var(--plum-soft);color:var(--plum)}
.qtag.zero{background:var(--sunk);color:var(--muted)}
.atiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.atile{display:flex;align-items:center;gap:10px;border:0;border-radius:16px;padding:16px 14px;min-height:76px;background:var(--ac);color:#fff;font-weight:700;font-size:16px;text-align:left;box-shadow:0 5px 0 color-mix(in srgb,var(--ac) 65%,#000);transition:transform .08s,opacity .2s}
.atile svg{width:28px;height:28px;flex:none}
.atile span{flex:1;min-width:0;overflow-wrap:anywhere}
.atile em{font-style:normal;background:rgba(255,255,255,.25);border-radius:8px;padding:2px 8px}
.atile:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--ac) 65%,#000)}
.atile:disabled{cursor:default}
.atile.dim{opacity:.35}
.atile.picked{outline:4px solid var(--ink);outline-offset:2px}
.atile.right{outline:4px solid #3CCB97;outline-offset:2px}
.atile.wrong{opacity:.55;text-decoration:line-through}
.gain{color:var(--good);font-weight:800}
.gain.big{font-family:var(--f-display);font-size:30px;margin:0}
.countdown{display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:30px;text-align:center}
.countdown p{margin:0;font-family:var(--f-display);font-weight:800;font-size:24px}
.countdown b{font-family:var(--f-display);font-size:96px;line-height:1;color:var(--ginger-deep)}
.cutscene .spot,.cutscene.final{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:24px 16px;border-radius:24px;background:radial-gradient(circle at 50% 55%,var(--ginger-soft),transparent 70%);animation:spotin .4s ease-out}
.cutscene .spot h2{font-size:32px}
@keyframes spotin{from{transform:scale(.92);opacity:0}}
.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;text-align:center}
.pod{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pod b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pod-cat{width:70%}
.pod .step{width:100%;border-radius:12px 12px 0 0;background:var(--plum-soft);color:var(--plum);font-family:var(--f-display);font-weight:800;font-size:26px;display:grid;place-items:center}
.pod.p1 .step{height:90px;background:var(--ginger-soft);color:var(--ginger-deep)}
.pod.p2 .step{height:64px}
.pod.p3 .step{height:44px}
@media (max-width:480px){.atiles{grid-template-columns:1fr}.atile{min-height:58px}.duel-modes{grid-template-columns:1fr}.qcard h2{font-size:20px}}
.topline{display:flex;align-items:center;gap:10px;width:100%}
.me-btn{display:flex;align-items:center;gap:8px;border:2px solid transparent;background:none;padding:2px 10px 2px 2px;border-radius:999px;min-width:0}
.me-btn:hover,.me-btn.on{border-color:var(--ginger);background:var(--ginger-soft)}
.me-ava{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--ginger-soft);border:2px solid var(--ginger);box-shadow:0 0 0 3px color-mix(in srgb,var(--ginger) 22%,transparent),0 0 16px -2px color-mix(in srgb,var(--ginger) 55%,transparent)}
.me-ava svg{width:52px;height:auto;margin:-3px 0 0 -8px;display:block}
.me-nick{font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.topline .stats{margin-left:auto;flex-wrap:nowrap}
.gear{flex:none;width:40px;height:40px;border-radius:12px;border:0;background:none;color:var(--muted);display:grid;place-items:center}
.gear svg{width:24px;height:24px}
.gear:hover,.gear.on{background:var(--plum-soft);color:var(--plum)}
.nav{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:5px;margin-top:4px}
.navbtn{border:0;background:none;border-radius:16px;padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-weight:700;font-size:11px;min-width:0;transition:background .15s,color .15s,transform .15s}
.navbtn svg{width:22px;height:22px}
.navbtn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navbtn:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.navbtn[aria-current="page"]{background:linear-gradient(155deg,var(--plum),color-mix(in srgb,var(--plum) 55%,#1b1030));color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--plum) 60%,transparent);transform:translateY(-1px)}
.seg3 button{font-size:15px}
@media (max-width:520px){.me-nick{max-width:76px;font-size:13px}.hide-xs{display:none}.topline .stats .pill{padding:4px 8px}}
.cz{display:flex;flex-direction:column;gap:12px}
.cz-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cz-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -6px;padding:2px 6px 4px;scroll-snap-type:x proximity}
.cz-cats::-webkit-scrollbar{display:none}
.cz-cat{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0;width:62px;font-size:11px;font-weight:700;color:var(--muted);scroll-snap-align:start}
.cz-ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--muted);border:3px solid transparent;transition:transform .1s}
.cz-ic svg{width:26px;height:26px}
.cz-cat[aria-selected="true"]{color:var(--ink)}
.cz-cat[aria-selected="true"] .cz-ic{background:var(--ginger-soft);color:var(--ginger-deep);border-color:var(--ginger);transform:scale(1.05)}
.cz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.cz-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);border-radius:16px;padding:8px 4px 6px;min-height:96px}
.cz-tile:active{transform:translateY(2px);border-bottom-width:2px}
.cz-thumb{width:100%;height:52px;display:grid;place-items:center;background:var(--sunk);border-radius:10px}
.cz-thumb svg{max-width:84%;max-height:44px;width:auto;height:44px}
.cz-name{font-size:11px;font-weight:700;line-height:1.15;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cz-tile.on{border-color:var(--ginger);background:var(--ginger-soft)}
.cz-tile.on .cz-thumb{background:var(--surface)}
.cz-check{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:var(--ginger);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;border:2px solid var(--surface)}
.cz-tile.locked .cz-thumb{opacity:.45}
.cz-tile.locked .cz-name{color:var(--muted)}
.cz-tile.trying{border-color:var(--plum);background:var(--plum-soft)}
.cz-tile.trying .cz-thumb{opacity:1}
.cz-price{display:inline-flex;align-items:center;gap:2px;font-family:var(--f-num);font-size:11px;font-weight:700;color:var(--ginger-deep)}
.cz-price svg{width:13px;height:13px}
.cz-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:var(--plum-soft)}
.cz-buy span{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.cz-buy svg{width:16px;height:16px}
.cz-buy-actions{gap:8px}
.cz-name-row{display:flex;flex-direction:column;gap:6px}
.cz-name-row input{border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink)}
@media (max-width:560px){.profile-top{grid-template-columns:1fr}.stage-cat{width:150px}}
.flag{display:inline-block;vertical-align:middle;border-radius:3px;flex:none}
.odot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3CCB97;box-shadow:0 0 0 2px var(--surface);vertical-align:middle;margin:0 2px}
.seen{color:var(--muted)}
.seen.on{color:var(--good);font-weight:700}
.profile-top{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:16px;align-items:center}
.profile-top .stage-cat{width:170px}
.lvl{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.lvl .bar{height:10px}
.lvl-n{font-family:var(--f-display);font-weight:800;font-size:15px;white-space:nowrap}
.lvl-n b{color:var(--ginger-deep);font-size:18px}
.pstats{display:flex;flex-wrap:wrap;gap:6px}
.pstat{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:4px 10px 4px 6px;text-align:left;color:inherit;font:inherit;min-width:0}
button.pstat{cursor:pointer}
button.pstat:hover{border-color:var(--ginger)}
.pstat > svg{width:24px;height:24px;flex:none}
.pstat span{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.pstat b{font-size:13px;white-space:nowrap}
.pstat small{font-size:11px;color:var(--muted);white-space:nowrap}
@media (max-width:560px){.profile-top{grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:start}.profile-top .stage{padding:0}.profile-top .stage-cat{width:100px}.profile-top .stage-name{font-size:15px}.profile-top .emote-scene{max-width:100px}.nickrow b{font-size:17px!important}.pstat{padding:3px 8px 3px 4px}}
.pstage{position:relative}
.pname{border:0;background:none;color:inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:2px 6px;border-radius:10px}
.pname:hover{background:var(--ginger-soft)}
.pencil{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ginger);color:#fff}
.pencil svg{width:14px;height:14px}
.edit-fab{position:absolute;top:4px;right:4px;width:38px;height:38px;border-radius:50%;border:0;background:var(--ginger);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 var(--ginger-deep)}
.edit-fab svg{width:18px;height:18px}
.edit-fab:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ginger-deep)}
.ce{min-height:100%;display:flex;flex-direction:column;background:var(--bg)}
.ce-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:2px solid var(--line)}
.ce-head .wrap{display:flex;align-items:center;gap:10px;padding-block:10px}
.ce-head h1{font-size:22px;flex:1;min-width:0}
.ce-back{border:0;background:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink)}
.ce-back svg{width:24px;height:24px}
.ce-back:hover{background:var(--sunk)}
.ce-paws{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--ginger-soft);color:var(--ginger-deep);font-weight:800}
.ce-paws svg{width:20px;height:20px}
.ce-paws b{font-size:18px}
.ce-paws span{font-size:13px;font-weight:700}
.ce-body{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;padding-block:18px 90px;align-items:start}
.ce-preview{background:var(--sunk);border:2px solid var(--line);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:calc(env(safe-area-inset-top,0px) + 78px);justify-content:flex-start}
.ce-preview .stage{background:radial-gradient(circle at 50% 60%,var(--surface),transparent 70%)}
.ce-preview .stage-cat,.ce-preview .emote-scene{width:220px;max-width:100%}
.ce-name{display:flex;flex-direction:column;gap:6px}
.ce-name input{border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink)}
.ce-panel{background:var(--surface);border:2px solid var(--line);border-radius:20px;display:flex;flex-direction:column;gap:14px;padding:0 16px 16px;align-self:stretch;min-width:0}
.ce-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:2px solid var(--line);margin:0 -16px;padding:0 10px}
.ce-tabs::-webkit-scrollbar{display:none}
.ce-tab{flex:none;border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 8px;min-width:58px;font-size:11px;font-weight:700;position:relative}
.ce-tab svg{width:26px;height:26px}
.ce-tab:hover{color:var(--ink)}
.ce-tab[aria-selected="true"]{color:var(--ginger-deep)}
.ce-tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-2px;height:3px;border-radius:3px;background:var(--ginger)}
.ce-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ce-sub h2{font-size:20px}
.ce-filter{display:flex;gap:6px;flex-wrap:wrap}
.ce-filter .chip{font-size:12px;padding:5px 10px}
.ce-foot{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:2px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.ce-foot .wrap{padding-block:12px;display:flex;justify-content:flex-end}
.ce-foot .btn{max-width:320px}
@media (max-width:720px){
  .ce-body{grid-template-columns:minmax(0,1fr);gap:0;padding-block:0 90px;padding-left:0;padding-right:0}
  .ce-preview{border-radius:0;border:0;border-bottom:2px solid var(--line);min-height:0;padding:10px max(16px,env(safe-area-inset-left,0px));flex-direction:row;align-items:center;gap:12px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:4}
  .ce-preview .stage{flex:none;padding:0}
  .ce-preview .stage-cat,.ce-preview .emote-scene{width:120px}
  .ce-preview .stage-name{display:none}
  .ce-name{flex:1;min-width:0}
  .ce-panel{border-radius:0;border:0;padding:0 max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .ce-tabs{margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
  .ce-foot .btn{max-width:none}
  .ce-head h1{font-size:19px}
}
.shopbar{position:sticky;top:var(--topbar-h,112px);z-index:4;background:var(--bg);padding-block:8px;margin-block:-8px;display:flex;flex-direction:column;gap:8px}
.shop-search{display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:4px 4px 4px 12px}
.shop-search > svg{width:20px;height:20px;color:var(--muted);flex:none}
.shop-search input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);padding:8px 0;outline:none}
.shop-search:focus-within{border-color:var(--plum)}
.filter-btn{display:inline-flex;align-items:center;gap:6px;flex:none}
.filter-btn svg{width:16px;height:16px}
.fcount{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:#fff;color:var(--ginger-deep);font-size:12px;font-family:var(--f-num)}
.shop-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.shop-cats::-webkit-scrollbar{display:none}
.shop-cats .chip{flex:none;white-space:nowrap}
.chip .cnt{font-family:var(--f-num);font-size:11px;opacity:.7}
.chip[aria-selected="true"]{border-color:var(--ginger);background:var(--ginger-soft);color:var(--ginger-deep)}
.shop-filters{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto}
.shop-filters .chips{margin-top:6px}
.shop-filters .chip svg{width:14px;height:14px;vertical-align:-2px}
.rar-chip .rdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rar);margin-right:4px;vertical-align:middle}
.rar-chip[aria-pressed="true"]{border-color:var(--rar);background:color-mix(in srgb,var(--rar) 14%,var(--surface));color:var(--ink)}
.filter-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.item{position:relative;border-top:4px solid var(--rar,var(--line))}
.rar-tag{position:absolute;top:6px;left:6px;z-index:1;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--rar);padding:1px 7px;border-radius:6px}
.item .price{flex-wrap:wrap}
.item-cat{margin-left:auto;font-size:11px}
.credits-cat{display:flex;gap:14px;align-items:center}
.credits-list{margin:0;display:flex;flex-direction:column;gap:8px}
.credits-list div{display:flex;flex-direction:column;gap:1px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.credits-list dt{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.credits-list dd{margin:0;font-weight:600}
.play .mode{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:center;padding:14px}
.mode-art .play-art{width:100%;height:auto;display:block;border-radius:16px}
.mode-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.mode-body h2{font-size:24px}
.mode-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-btns .btn{padding:12px 10px;font-size:15px}
.mode.ranked{--acc:var(--plum);background:linear-gradient(160deg,color-mix(in srgb,var(--plum) 22%,var(--surface)),var(--surface) 65%);border-color:color-mix(in srgb,var(--plum) 40%,rgba(255,255,255,.08))}
.mode.friends{--acc:var(--ginger);background:linear-gradient(160deg,color-mix(in srgb,var(--ginger) 20%,var(--surface)),var(--surface) 65%)}
.mode.bots{--acc:#93A3D6;background:linear-gradient(160deg,color-mix(in srgb,#93A3D6 20%,var(--surface)),var(--surface) 65%)}
.card.mode{border-width:1px}
.rank-strip{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:8px 12px;backdrop-filter:blur(6px)}
.rank-strip .bar{margin:4px 0}
.play-art .hop{animation:phop 1.4s ease-in-out infinite}
@keyframes phop{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
.play-art .pconf{animation:pconf 2.6s linear infinite}
@keyframes pconf{0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:translateY(40px)}}
.play-art .blink{animation:pblink 1.2s steps(2) infinite}
@keyframes pblink{50%{opacity:.25}}
.play-art .screen{animation:pscreen 2.4s ease-in-out infinite}
@keyframes pscreen{50%{fill:#4A3B96}}
.add-notes{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;border-style:dashed}
.add-notes:hover{border-color:var(--ginger)}
.add-notes > span:last-child{display:flex;flex-direction:column;gap:2px}
.add-ic{width:44px;height:44px;border-radius:14px;background:var(--ginger-soft);color:var(--ginger-deep);display:grid;place-items:center;flex:none}
.add-ic svg{width:24px;height:24px}
@media (max-width:640px){.play .mode{grid-template-columns:1fr;gap:12px}.mode-art{max-width:360px;width:100%;margin:0 auto}.mode-btns{grid-template-columns:1fr 1fr}}
.cat-ab{display:inline-grid;place-items:center;flex:none;border-radius:8px;background:var(--cc);color:#fff;font-family:var(--f-display);font-weight:800;letter-spacing:.02em;line-height:1}
.cat-picker{display:flex;flex-wrap:wrap;gap:6px}
.catchip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:4px 10px 4px 4px;font-weight:700;font-size:13px;color:var(--ink)}
.catchip[aria-pressed="true"]{border-color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,var(--surface))}
.catchip.sug{box-shadow:0 0 0 2px color-mix(in srgb,var(--cc) 35%,transparent)}
.catchip.new{border-style:dashed;color:var(--muted)}
.catchip.small{padding:2px 8px 2px 2px;font-size:12px}
.catchip.static{cursor:default}
.pencil-s{color:var(--muted);font-size:12px}
.x.mini{width:22px;height:22px;font-size:12px;padding:0}
.chip.catf{display:inline-flex;align-items:center;gap:6px}
.chip.catf[aria-selected="true"]{border-color:var(--cc);background:color-mix(in srgb,var(--cc) 14%,var(--surface));color:var(--ink)}
.cat-new{display:flex;flex-direction:column;gap:8px;padding:10px;border:2px dashed var(--line);border-radius:14px;margin-top:6px}
.cat-new input{border:2px solid var(--line);border-radius:12px;padding:8px 10px;font:inherit;background:var(--surface);color:var(--ink)}
.cat-edit{margin-top:8px;padding:10px;border-radius:14px;background:var(--sunk)}
.today-strip{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:10px 14px;backdrop-filter:blur(6px)}
.today-strip .ring{width:58px;height:58px;flex:none}
.today-strip > div{display:flex;flex-direction:column;gap:2px}
.learn-landing .mode{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:center;padding:14px}
.mode.adv{--acc:#3CCB97;background:linear-gradient(160deg,color-mix(in srgb,#2E7D4F 20%,var(--surface)),var(--surface) 65%)}
.mode.own{--acc:#F2B66B;background:linear-gradient(160deg,color-mix(in srgb,#C99C6E 24%,var(--surface)),var(--surface) 65%)}
.mode .bar{height:10px}
.aunit{display:flex;flex-direction:column;gap:14px;padding-bottom:20px}
.aunit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ginger);color:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 4px 0 var(--ginger-deep);position:relative;z-index:1}
.aunit-head .eyebrow{color:rgba(255,255,255,.8)}
.aunit-head h2{font-size:22px}
.aunit.locked .aunit-head{background:var(--locked);box-shadow:0 4px 0 var(--line)}
.guide-btn{flex:none;display:inline-flex;align-items:center;gap:6px;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:8px 12px;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.guide-btn svg{width:18px;height:18px}
.guide-btn:hover{background:rgba(255,255,255,.24)}
.apath-wrap{position:relative}
.apath{list-style:none;margin:0;padding:52px 0 14px;display:flex;flex-direction:column;align-items:center;gap:22px}
.apath li:has(.start-bubble){margin-top:14px}
.apath li{position:relative;display:flex;flex-direction:column;align-items:center}
.anode{border:0;background:none;padding:0;cursor:pointer}
.anode .nd{display:grid;place-items:center;width:70px;height:62px;border-radius:50%;background:var(--ginger);box-shadow:0 7px 0 var(--ginger-deep);transition:transform .08s}
.anode .nd svg{width:32px;height:32px}
.anode:not(:disabled):active .nd{transform:translateY(5px);box-shadow:0 2px 0 var(--ginger-deep)}
.anode.test .nd{background:#D99A00;box-shadow:0 7px 0 #A57500}
.anode.done .nd{background:var(--good);box-shadow:0 7px 0 color-mix(in srgb,var(--good) 65%,#000)}
.anode.locked .nd{background:var(--locked);box-shadow:0 7px 0 var(--line)}
.anode.locked{cursor:not-allowed}
.anode.cur .nd{outline:5px solid color-mix(in srgb,var(--ginger) 30%,transparent);outline-offset:4px;animation:bob 1.8s ease-in-out infinite}
.anode .chest{display:block;width:76px}
.anode .chest svg{width:100%;height:auto;display:block}
.anode.cur .chest{animation:bob 1.6s ease-in-out infinite}
.start-bubble{position:absolute;top:-44px;background:var(--surface);color:var(--ginger-deep);border:2px solid var(--line);border-radius:10px;padding:3px 12px;font-weight:800;font-size:13px;letter-spacing:.06em;white-space:nowrap;z-index:1}
.start-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:var(--surface);border-right:2px solid var(--line);border-bottom:2px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.adeco{position:absolute;top:50%;transform:translateY(-50%);width:140px;pointer-events:none}
.adeco.right{right:0}.adeco.left{left:0}
.adv-deco{width:100%;height:auto;display:block}
.aunit.locked .adeco{opacity:.35;filter:grayscale(.8)}
.guide-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.guide-list div{display:flex;flex-direction:column;background:var(--sunk);border-radius:10px;padding:8px 10px}
.guide-list b{font-size:15px}
.guide-list span{font-size:13px;color:var(--muted)}
.chest-open{width:120px;margin:0 auto;animation:spotin .4s ease-out}
@media (max-width:640px){.learn-landing .mode{grid-template-columns:1fr;gap:12px}.adeco{width:96px;opacity:.9}.guide-list{grid-template-columns:1fr}.aunit-head h2{font-size:19px}}
.fr-btn{position:relative}
.badge-n{position:absolute;top:2px;right:2px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:800;font-family:var(--f-num);display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px var(--surface)}
.modal-bg.dd-bg{background:transparent;display:block;padding:0}
.dropdown{position:fixed;top:calc(env(safe-area-inset-top,0px) + 58px);right:max(16px,env(safe-area-inset-right,0px));width:min(380px,calc(100vw - 32px));max-height:min(72vh,620px);overflow-y:auto;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 18px 40px rgba(20,14,40,.28);display:flex;flex-direction:column;gap:12px;animation:ddin .16s ease-out}
@keyframes ddin{from{transform:translateY(-6px);opacity:0}}
.dd-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dd-head b{font-family:var(--f-display);font-size:20px}
.dd-search{padding:2px 4px 2px 10px}
.dd-sec{display:flex;flex-direction:column;gap:6px}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.frow{display:flex;align-items:center;gap:6px}
.frow-main{flex:1;min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;border:0;background:none;padding:6px;border-radius:12px;text-align:left;color:inherit;font:inherit}
.frow-main:hover{background:var(--sunk)}
.frow-act{display:flex;gap:4px;align-items:center;flex:none}
.online-t{color:var(--good);font-weight:700}
@media (max-width:520px){.dropdown{left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));width:auto}}
.shop{gap:16px}
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shop-head h1{font-size:30px}
.wallet{display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:4px 4px 4px 12px;font-family:var(--f-display);font-size:22px;font-weight:800}
.wallet svg{width:24px;height:24px}
.wallet-add{width:34px;height:34px;border-radius:50%;border:0;background:var(--good);color:#fff;font-size:22px;font-weight:800;line-height:1;box-shadow:0 3px 0 color-mix(in srgb,var(--good) 65%,#000)}
.wallet-add:disabled{background:var(--locked);box-shadow:none}
.deal{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;text-align:left;border:0;border-radius:22px;padding:14px;color:#fff;background:radial-gradient(circle at 20% 40%,color-mix(in srgb,var(--rar) 75%,#fff) 0%,var(--rar) 45%,color-mix(in srgb,var(--rar) 55%,#000) 100%);box-shadow:0 6px 0 color-mix(in srgb,var(--rar) 50%,#000);overflow:hidden}
.deal::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px);pointer-events:none}
.deal-art{position:relative;z-index:1;background:rgba(255,255,255,.18);border-radius:18px;padding:6px}
.deal-art svg,.deal-art .emote-scene{width:100%;max-width:130px;height:auto;margin:0 auto;display:block}
.deal-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.deal-badge{align-self:flex-start;background:#fff;color:#C2361F;font-weight:800;font-size:12px;letter-spacing:.04em;padding:3px 9px;border-radius:999px;text-transform:uppercase}
.deal-name{font-family:var(--f-display);font-size:26px;line-height:1.1}
.deal-meta,.deal-time{opacity:.85}
.deal-price{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:24px}
.deal-price svg{width:24px;height:24px}
.deal-price s,.sheet-price s,.sc-price s{opacity:.6;font-size:.75em}
.earn-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.earn-ic{width:40px;height:40px;border-radius:12px;background:var(--ginger-soft);display:grid;place-items:center;flex:none}
.earn-ic svg{width:24px;height:24px}
.earn-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.shopbar{gap:10px}
.filter-btn{position:relative;flex:none;width:40px;height:40px;border-radius:12px;border:0;background:var(--sunk);color:var(--ink);display:grid;place-items:center}
.filter-btn svg{width:20px;height:20px}
.filter-btn.on{background:var(--ginger);color:#fff}
.filter-btn .fcount{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;box-shadow:0 0 0 2px var(--bg)}
.shop-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:4px}
.shop-tabs::-webkit-scrollbar{display:none}
.stab{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;border-radius:12px;padding:6px 10px;min-width:64px;color:var(--muted);font-size:11px;font-weight:700}
.stab svg{width:22px;height:22px}
.stab[aria-selected="true"]{background:var(--ginger-soft);color:var(--ginger-deep)}
.srow-sec{display:flex;flex-direction:column;gap:8px}
.srow-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.srow-head h3{font-size:20px}
.srow{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:2px max(16px,env(safe-area-inset-left,0px)) 8px}
.srow::-webkit-scrollbar{display:none}
.srow .sc{flex:none;width:136px;scroll-snap-align:start}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.sc{position:relative;display:flex;flex-direction:column;border:0;padding:0;border-radius:18px;overflow:hidden;background:var(--surface);text-align:left;color:inherit;box-shadow:0 0 0 2px var(--line),0 5px 0 var(--line);transition:transform .1s}
.sc:active{transform:translateY(3px)}
.sc-art{height:110px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rar) 55%,#fff) 0%,var(--rar) 70%,color-mix(in srgb,var(--rar) 70%,#000) 100%)}
.sc-art svg{width:78%;height:76px}
.sc-rar{position:absolute;top:7px;left:7px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.25);padding:1px 7px;border-radius:6px}
.sc-info{display:flex;flex-direction:column;gap:4px;padding:8px 10px 10px;min-height:62px}
.sc-info b{font-size:13px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sc-price{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-display);font-size:17px;font-weight:800;color:var(--ink)}
.sc-price svg{width:18px;height:18px}
.sc-price.short b{color:var(--muted)}
.sc-own{align-self:flex-start;font-size:11px;font-weight:800;color:var(--good);background:var(--good-soft);padding:2px 8px;border-radius:6px}
.sc.own .sc-art{filter:saturate(.75)}
.modal-bg.sheet-bg{display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet{position:relative;width:min(520px,100%);max-height:88vh;overflow-y:auto;background:var(--surface);border-radius:24px 24px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;animation:sheetup .22s ease-out;box-shadow:0 -10px 40px rgba(20,14,40,.3)}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}}
.sheet-grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto}
.sheet-x{position:absolute;top:10px;right:10px}
.sheet-art{border-radius:20px;padding:14px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rar,var(--ginger)) 35%,var(--surface)) 0%,var(--surface) 75%)}
.sheet-cat{width:170px;margin:0 auto}
.sheet-art .emote-scene{max-width:170px}
.sheet-body{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.sheet-body.left{align-items:stretch;text-align:left;gap:14px}
.sheet-body h2{font-size:26px}
.rar-pill{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--rar);padding:2px 10px;border-radius:999px}
.sheet-price{display:flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:26px;font-weight:800}
.sheet-price svg{width:26px;height:26px}
.sheet-price .deal-badge{background:var(--bad-soft);color:var(--bad);font-family:var(--f-body)}
.sheet .btn.wide{width:100%}
@media (max-width:520px){.deal{grid-template-columns:110px minmax(0,1fr);gap:12px}.deal-name{font-size:21px}.deal-price{font-size:20px}.shop-head h1{font-size:26px}}
.promo-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;align-items:stretch}
.promo-row .deal{height:100%}
.earn-tile{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:10px;box-shadow:0 6px 0 var(--line)}
.earn-art svg{width:100%;height:auto;display:block;border-radius:14px}
.earn-body{display:flex;flex-direction:column;gap:6px;flex:1}
.earn-body > b{font-family:var(--f-display);font-size:19px;line-height:1.1}
.earn-body .btn{margin-top:auto}
.ecoin{animation:ecoin 2.2s ease-in-out infinite}
@keyframes ecoin{50%{transform:translateY(-5px)}}
.tvbar{animation:tvbar 3s linear infinite}
@keyframes tvbar{from{width:4px}to{width:72px}}
@media (max-width:640px){
  .promo-row{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px}
  .promo-row .deal{grid-template-columns:1fr;gap:8px;padding:10px;align-content:start}
  .promo-row .deal-art{max-width:110px;width:100%;margin:0 auto}
  .promo-row .deal-name{font-size:18px}
  .promo-row .deal-price{font-size:18px}
  .promo-row .deal-price svg{width:18px;height:18px}
  .promo-row .deal-badge{font-size:10px;padding:2px 7px}
  .promo-row .deal-meta,.promo-row .deal-time{font-size:11px}
  .earn-tile{padding:8px;border-radius:18px}
  .earn-body > b{font-size:16px}
  .earn-body .small{font-size:11px}
  .earn-body .btn{padding:8px 6px;font-size:13px}
}
.collapse{padding:0;overflow:hidden}
.collapse-head{width:100%;display:flex;align-items:center;gap:12px;border:0;background:none;padding:14px;text-align:left;color:inherit;font:inherit;cursor:pointer}
.collapse-head:hover{background:var(--sunk)}
.collapse-head .who{flex:1;min-width:0}
.collapse-head b{font-family:var(--f-display);font-size:20px}
.chev{width:22px;height:22px;flex:none;transition:transform .2s;color:var(--muted)}
.collapse.open .chev{transform:rotate(180deg)}
.collapse.open{border-color:var(--ginger)}
.cform{display:flex;flex-direction:column;gap:12px;padding:4px 14px 16px;border-top:2px solid var(--line);animation:ddin .18s ease-out}
.cform .clan-preview{padding-top:10px}
.join-code input{padding:10px 12px}
.shopbar.static{position:static;margin:0;padding:0;background:none}
.clan-list{gap:4px}
.clan-row{display:flex;align-items:center;gap:8px;border-radius:14px}
.clan-row:hover{background:var(--sunk)}
.clan-main{flex:1;min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;border:0;background:none;padding:8px;text-align:left;color:inherit;font:inherit;cursor:pointer}
.clan-main .who b{font-size:15px}
.clan-act{flex:none;padding-right:8px}
.ctabs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ctab{display:flex;flex-direction:column;gap:8px;border:2px solid var(--line);border-bottom-width:5px;background:var(--surface);border-radius:20px;padding:10px;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:transform .1s,border-color .15s}
.ctab:active{transform:translateY(3px);border-bottom-width:2px}
.ctab.on{border-color:var(--ginger);background:var(--ginger-soft)}
.ctab-art .play-art{border-radius:14px}
.ctab-txt{display:flex;flex-direction:column;gap:2px;padding:0 4px 2px}
.ctab-txt b{font-family:var(--f-display);font-size:20px;line-height:1.15}
.ctab-panel{animation:ddin .18s ease-out}
.cform.flat{border-top:0;padding:0}
@media (max-width:520px){.ctabs{gap:8px}.ctab{padding:6px;border-radius:16px}.ctab-txt b{font-size:16px}.ctab-txt .small{font-size:11px}}
.vol-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vol-row svg{width:22px;height:22px;color:var(--muted)}
.vol-row input[type=range]{flex:1;min-width:140px;accent-color:var(--ginger)}
.me-btn{padding:2px 10px 2px 2px;border-radius:16px}
.me-info{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.me-info .me-nick{font-size:15px;line-height:1.1}
.me-lvl{display:flex;align-items:center;gap:6px}
.me-lvl b{font-family:var(--f-display);font-size:12px;color:var(--ginger-deep);white-space:nowrap}
.me-bar{display:block;width:96px;height:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.me-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ginger),#F2B632);border-radius:4px}
.me-need{font-size:10.5px;color:var(--muted);white-space:nowrap;line-height:1.1}
.stats-left{margin-left:4px!important;margin-right:auto}
.stats-right{margin-left:auto}
.topline .stats-left{margin-left:4px}
.paws-pill{padding:0;gap:2px}
.topline .pill{background:none;border:0;box-shadow:none;padding:4px 6px}
.topline .paws-pill{padding:0}
.topline .paws-n{padding:4px 4px 4px 6px}
.paws-n{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 4px 4px 10px;font:inherit;font-weight:700;color:inherit;cursor:pointer}
.paws-n svg{width:18px;height:18px}
.paw-add{width:24px;height:24px;border-radius:50%;border:0;background:var(--good);color:#fff;font-weight:800;font-size:17px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 0 color-mix(in srgb,var(--good) 65%,#000)}
.paw-add:active{transform:translateY(1px);box-shadow:none}
.paws-modal .earn-art svg{border-radius:16px}
.pm-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.pm-sep::before,.pm-sep::after{content:"";flex:1;height:2px;background:var(--line)}
.pm-msg.ok{color:var(--good);font-weight:700}
.pm-msg.no{color:var(--bad);font-weight:700}
@media (max-width:700px){.hide-sm{display:none}}
@media (max-width:520px){.me-info .me-nick{display:block}.me-bar{width:64px}.me-need{display:none}.topline{gap:6px}.topline .stats{gap:4px}}
.seg-sub{background:none;padding:0;gap:6px}
.seg-sub button{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:7px 6px;font-size:14px}
.seg-sub button.on{border-color:var(--ginger);background:var(--ginger-soft);color:var(--ginger-deep);box-shadow:none}
.prize-card{display:flex;flex-direction:column;gap:12px;background:linear-gradient(170deg,var(--ginger-soft),var(--surface) 55%)}
.prize-podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;max-width:360px;width:100%;margin:0 auto}
.pp-col{display:flex;flex-direction:column;align-items:center;gap:2px}
.pp-art{width:64px}
.pp-col.p1 .pp-art{width:80px}
.pp-art svg{width:100%;height:auto;display:block}
.pp-col b{font-family:var(--f-display);font-size:18px;color:var(--ginger-deep)}
.pp-step{width:100%;display:grid;place-items:center;border-radius:12px 12px 0 0;font-family:var(--f-display);font-weight:800;font-size:22px;color:#fff}
.pp-col.p1 .pp-step{height:58px;background:#E2B33C}
.pp-col.p2 .pp-step{height:42px;background:#AEB6C6}
.pp-col.p3 .pp-step{height:30px;background:#C98A5A}
.prize-rest{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.prize{display:inline-flex;align-items:center;gap:3px;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:2px 9px 2px 6px;font-size:13px}
.prize svg{width:15px;height:15px}
.prize .pos-s{color:var(--muted);font-size:12px;margin-right:2px}
.prize.sm{border:0;background:var(--ginger-soft);color:var(--ginger-deep);padding:1px 7px 1px 5px;font-size:12px}
.lbrow.top1 .pos{color:#D99A00}
.lbrow.top2 .pos{color:#8D93A3}
.lbrow.top3 .pos{color:#B5651D}
.mmr-ic{display:inline-grid;place-items:center;flex:none;min-width:34px;height:24px;padding:0 5px;border-radius:7px;background:linear-gradient(135deg,#5B4B9A,#D63B57);color:#fff;font-family:var(--f-num);font-size:10px;font-weight:700;letter-spacing:.04em}
.mmr-ic.big{min-width:44px;height:30px;font-size:12px}
.mmr-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xp-ic{display:inline-grid;place-items:center;flex:none;min-width:40px;height:30px;padding:0 6px;border-radius:8px;background:linear-gradient(135deg,#E8812C,#F2B632);color:#fff;font-family:var(--f-num);font-size:12px;font-weight:700}
.rank-name{display:inline-block;font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--rc);text-shadow:0 1px 0 rgba(0,0,0,.08)}
.rank-mmr{font-family:var(--f-display);font-size:18px;margin-left:6px}
.mmr-strip > b{font-family:var(--f-display);font-size:26px}
.mmr-chip{display:inline-block;vertical-align:middle;font-family:var(--f-num);font-size:11px;font-weight:700;padding:0 6px;border-radius:6px;background:var(--plum-soft);color:var(--plum)}
.mmr-d{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.mmr-d .yarn-ic{width:16px;height:16px}
.mmr-d.up{color:var(--good)}
.pick-mode{display:flex;align-items:center;justify-content:center;gap:8px;font-size:17px;padding:14px}
.pick-mode .yarn-ic,.pick-mode svg{width:22px;height:22px;flex:none}
.mode-sheet{width:min(640px,100%);gap:14px}
.mp-top{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.yarn-v.big{font-family:var(--f-display);font-size:38px;gap:8px}
.yarn-v.big .yarn-ic{width:40px;height:40px}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-card{display:flex;flex-direction:column;border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;overflow:hidden;background:var(--surface)}
.pm-art .play-art{border-radius:0}
.pm-body{display:flex;flex-direction:column;gap:8px;padding:12px;flex:1}
.pm-body > b{font-family:var(--f-display);font-size:21px}
.pm-body .btn{margin-top:auto}
.pm-facts{display:flex;flex-wrap:wrap;gap:6px}
.pm-facts span{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--plum-soft);color:var(--plum)}
@media (max-width:560px){.pm-grid{grid-template-columns:1fr}.pm-card{display:grid;grid-template-columns:120px minmax(0,1fr)}.pm-art{display:flex}.pm-art .play-art{height:100%;object-fit:cover}.pm-body > b{font-size:18px}}
.yarn-v{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;white-space:nowrap}
.yarn-v .yarn-ic{width:20px;height:20px;flex:none}
.yarn-v b{font-weight:800}
.yarn-v.sm .yarn-ic{width:14px;height:14px}
.yarn-v.sm b{font-size:12px}
.yarn-v.rank-mmr{margin-left:8px;font-family:var(--f-display);font-size:18px}
.yarn-v.rank-mmr .yarn-ic{width:24px;height:24px}
.pstat > .yarn-ic{width:26px;height:26px;flex:none}
.mmr-d.down{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;z-index:20;max-width:calc(100% - 32px)}
.empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty .cat{width:110px}

/* cat moods */
.cat .mouth-sad,.cat .tear,.cat .eye-closed{display:none}
.cat.sad .mouth-happy{display:none}.cat.sad .mouth-sad,.cat.sad .tear{display:inline}
.cat.joy .eye-open{display:none}.cat.joy .eye-closed{display:inline}
.cat .tail{transform-origin:84px 126px;animation:tail 2.4s ease-in-out infinite}
@keyframes tail{50%{transform:rotate(9deg)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width:480px){.daily{grid-template-columns:1fr;justify-items:start}.tiles{grid-template-columns:1fr 1fr 1fr}.bubble{font-size:16px}.face .big{font-size:22px}}

:root{--og:#A8740A;--og-bg:#FFF4D6;--adm:#C8323A;--adm-bg:#FDE7E8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--og:#F2C14E;--og-bg:rgba(242,193,78,.14);--adm:#FF6B6B;--adm-bg:rgba(255,107,107,.14)}}
:root,:root[data-theme="light"],:root[data-theme="dark"]{--og:#F2C14E;--og-bg:rgba(242,193,78,.14);--adm:#FF6B6B;--adm-bg:rgba(255,107,107,.14)}
.ttls{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;vertical-align:middle}
.ttl{display:inline-flex;align-items:center;gap:3px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:12px;line-height:1;letter-spacing:.07em;padding:3px 7px 2px;border-radius:7px;border:1.5px solid currentColor;text-transform:uppercase;white-space:nowrap}
.ttl svg{width:11px;height:11px;flex:none;margin-top:-1px}
.ttl.sm{font-size:10px;padding:2px 5px 1px;border-radius:6px}
.ttl-admin{color:var(--adm);background:var(--adm-bg)}
.ttl-og{color:var(--og);background:var(--og-bg)}
.me-nameline{display:flex;align-items:center;gap:5px;min-width:0}
.me-nameline .me-nick{min-width:28px;flex:0 1 auto}
.me-nameline .ttls{flex-wrap:nowrap;flex:none}
@media (max-width:520px){.me-nameline{gap:4px}.me-nameline .ttl+.ttl{display:none}.me-nameline .ttl.sm{font-size:0;padding:2px 3px;gap:0;border-radius:5px}.me-nameline .ttl svg{width:10px;height:10px;margin:0}}
.ge-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%;margin-top:18px}
.ge-one{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1 1 150px;max-width:220px}
.ge-one .emote-scene.big{max-width:180px}
@media (max-width:560px){.ge-row{gap:6px}.ge-one{flex:1 1 110px}.ge-one .emote-scene.big{max-width:130px}.game-end h2{font-size:22px!important}}
.game-top .topline{gap:8px}
.gt-title{display:flex;align-items:center;gap:10px;min-width:0}
.gt-title svg{width:34px;height:34px;flex:none}
.gt-title b{display:block;font-family:"Baloo 2",sans-serif;font-size:18px;line-height:1.1}
.gt-title small{display:block;color:var(--muted);font-size:12px}
.gt-sp{flex:1}
.game-result{max-width:560px;margin:0 auto}
.gr-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px}
.gr-head h1{font-size:44px;margin:0;line-height:1}
.gr-badge{font:800 12px/1 "Baloo 2",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px 4px;border-radius:999px;border:1.5px solid currentColor}
.res-w .gr-head h1,.res-w .gr-badge{color:var(--good)}
.res-l .gr-head h1,.res-l .gr-badge{color:var(--bad)}
.res-d .gr-head h1,.res-d .gr-badge{color:var(--plum)}
.gr-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gr-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1.5px solid var(--line);border-radius:14px}
.gr-chip svg{width:20px;height:20px}
.gr-chip b{font-size:18px}
.gr-chip small{color:var(--muted)}
.gr-chip.up b{color:var(--good)}.gr-chip.down b{color:var(--bad)}
.gr-board summary{cursor:pointer;font-weight:700;text-align:center}
.gr-board[open] summary{margin-bottom:10px}
.board.mini{max-width:260px;gap:3px;padding:5px}
.board.mini .col{gap:3px}
.gr-actions{display:flex;flex-direction:column;gap:10px}
.game-result .game-end .eyebrow,.res-w .game-end h2,.res-d .game-end h2{display:none}
.game-result .game-end{padding-top:8px}
.gr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ava-wrap{position:relative;display:block;flex:none}
.ava-on{position:absolute;top:1px;right:-1px;width:11px;height:11px;border-radius:50%;background:#3CCB97;box-shadow:0 0 0 2.5px var(--surface)}
.lbrow.me .ava-on{box-shadow:0 0 0 2.5px var(--surface-2, var(--surface))}
b.nmline{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;min-width:0;overflow:hidden}
b.nmline>*{flex:none}
b.nmline>.nm{flex:0 1 auto;min-width:5ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
b.nmline .tag{margin:0}
b.nmline img,b.nmline svg{display:block}
@media (max-width:560px){b.nmline{gap:4px}b.nmline .ttl.sm{font-size:0;padding:2px 3px;gap:0;border-radius:5px}b.nmline .ttl svg{width:10px;height:10px;margin:0}}

/* catalog gear animations */
.it-glow{filter:drop-shadow(0 0 2.5px var(--gc));animation:itglow 2.4s ease-in-out infinite}
@keyframes itglow{50%{filter:drop-shadow(0 0 5px var(--gc))}}
.it-pulse{animation:itpulse 1.8s ease-in-out infinite}
@keyframes itpulse{50%{opacity:.55}}
.it-spin{animation:itspin 6s linear infinite}
@keyframes itspin{to{transform:rotate(360deg)}}
.it-sway{transform-origin:60px 92px;animation:itsway 2.6s ease-in-out infinite}
@keyframes itsway{50%{transform:rotate(2.5deg)}}
.it-flap{transform-origin:60px 100px;animation:itflap 1.4s ease-in-out infinite}
@keyframes itflap{50%{transform:scaleX(1.06)}}
.it-float{animation:itfloat 2.4s ease-in-out infinite}
@keyframes itfloat{50%{transform:translateY(-3px)}}
.it-bob{animation:itfloat 1.6s ease-in-out infinite}
.it-orbit{transform-origin:60px 70px;animation:itorbit 7s linear infinite}
@keyframes itorbit{0%{transform:translateX(0)}25%{transform:translateX(-30px) translateY(4px)}50%{transform:translateX(-80px)}75%{transform:translateX(-30px) translateY(-4px)}100%{transform:translateX(0)}}
.it-orbit2{animation:itfloat 2s ease-in-out infinite}
.it-flicker{animation:itflick 1s ease-in-out infinite alternate}
@keyframes itflick{from{opacity:.7;transform:translateY(1px)}to{opacity:1;transform:translateY(-2px)}}
.it-twinkle circle{animation:itpulse 1.6s ease-in-out infinite}
.it-peek{animation:itpeek 3s ease-in-out infinite}
@keyframes itpeek{0%,60%,100%{transform:translateY(0)}75%{transform:translateY(-3px)}}
/* catalog emote moves */
.emo-prop{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.emo-spin .emo-cat{animation:espin 1.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes espin{0%,20%{transform:scaleX(1)}45%{transform:scaleX(-1)}70%,100%{transform:scaleX(1)}}
.emo-bow .emo-cat{transform-origin:50% 100%;animation:ebow 1.6s ease-in-out infinite}
@keyframes ebow{0%,100%{transform:none}40%,60%{transform:rotate(10deg) translateY(3%) scaleY(.94)}}
.emo-sway .emo-cat{transform-origin:50% 100%;animation:edance 2s ease-in-out infinite}
.emo-shake .emo-cat{animation:eshake .5s ease-in-out infinite}
@keyframes eshake{25%{transform:translateX(-3%) rotate(-3deg)}75%{transform:translateX(3%) rotate(3deg)}}
.emo-pose .emo-cat{transform-origin:50% 100%;animation:epose 1.8s ease-in-out infinite}
@keyframes epose{0%,100%{transform:none}30%,70%{transform:scale(1.06) translateY(-2%)}}
.emo-sleep .emo-cat{transform-origin:50% 100%;animation:esleep 2.6s ease-in-out infinite}
@keyframes esleep{50%{transform:scaleY(.95) translateY(2%)}}
.emo-float .emo-cat{animation:efloatc 2.4s ease-in-out infinite}
@keyframes efloatc{50%{transform:translateY(-9%)}}
.emo-spin .emo-prop .prop-spin,.prop-spin{animation:itspin 2s linear infinite}
.prop-up{animation:epropup 1.4s ease-in-out infinite}
@keyframes epropup{50%{transform:translateY(-4px)}}
.prop-wave{animation:ewave .5s ease-in-out infinite alternate}
.prop-pulse{animation:epose 1.2s ease-in-out infinite}
.fx.sm{width:9%}
.twinkle{width:11%;animation:etwinkle 1.6s ease-in-out infinite;opacity:0}
@keyframes etwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
.crowndrop{left:30%;width:40%;top:-20%;animation:ecrown 2.4s cubic-bezier(.3,.8,.4,1) infinite}
@keyframes ecrown{0%{transform:translateY(-60%);opacity:0}40%,80%{transform:translateY(40%);opacity:1}100%{transform:translateY(40%);opacity:0}}
.boltfx{left:52%;width:30%;top:-10%;animation:ebolt 1.8s steps(1) infinite}
@keyframes ebolt{0%,40%{opacity:1}45%{opacity:.2}50%,100%{opacity:1}}
.cloudfx{left:30%;width:40%;top:-6%;animation:efloatc 3s ease-in-out infinite}
.rainbowfx{left:5%;width:90%;top:-4%;opacity:.85;animation:epose 3s ease-in-out infinite}
.crystal{width:12%;bottom:6%;animation:ecrys 2s ease-out infinite;opacity:0}
@keyframes ecrys{0%{transform:translateY(40%) scale(.3);opacity:0}30%,70%{transform:none;opacity:1}100%{opacity:0}}
.firewing{left:-10%;width:120%;top:20%;z-index:-1;animation:efire 1.8s ease-in-out infinite}
@keyframes efire{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.05);opacity:1}}
.emo-fx{z-index:1}
.ringfx{left:10%;width:80%;aspect-ratio:3/1;bottom:-2%;border-radius:50%;border:3px solid var(--rc);animation:ering 1.8s ease-out infinite;opacity:0}
.ringfx.r2{animation-delay:.9s}
@keyframes ering{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.2);opacity:0}}
.flashfx{inset:0;background:#fff;border-radius:20px;animation:eflash 2.4s ease-out infinite;opacity:0}
@keyframes eflash{0%,60%{opacity:0}62%{opacity:.75}80%,100%{opacity:0}}
.mistfx{left:-5%;right:-5%;bottom:0;height:22%;border-radius:50%;background:radial-gradient(closest-side,var(--mc),transparent);opacity:.5;animation:epose 2.6s ease-in-out infinite}
.balloon{width:11%;top:-2%;animation:efloatc 2s ease-in-out infinite}
.scanfx{left:0;right:0;height:3px;background:#35E0C8;box-shadow:0 0 10px #35E0C8;animation:escan 1.8s ease-in-out infinite}
@keyframes escan{0%{top:5%}50%{top:90%}100%{top:5%}}
.cz-price{font-size:11px}
.sc-off{position:absolute;top:8px;right:8px;background:var(--bad);color:#fff;font:800 12px/1 var(--f-display);padding:4px 7px 3px;border-radius:8px;z-index:2}
.sc{position:relative}
.sc-own.lvl{color:var(--plum)}
.promo-pill{display:inline-block;margin-left:6px;font:800 11px/1 var(--f-display);color:var(--bad);border:1.5px solid currentColor;border-radius:999px;padding:3px 7px 2px;vertical-align:middle}
.earn-tile{position:relative}
.earn-badge{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);box-shadow:0 2px 0 var(--line)}
.earn-badge svg{width:18px;height:18px}.earn-badge b{font-size:15px}
.earn-plus{display:inline-flex;align-items:center;gap:2px;color:var(--ginger-deep,var(--ginger))}.earn-plus svg{width:15px;height:15px}
.sheet-desc{color:var(--ink);opacity:.85;line-height:1.45}
@media (prefers-reduced-motion: reduce){.it-glow,.it-pulse,.it-spin,.it-sway,.it-flap,.it-float,.it-bob,.it-orbit,.it-orbit2,.it-flicker,.it-twinkle circle,.it-peek{animation:none}}
.prof-rank,.prof-clan{display:flex;gap:12px;align-items:center;justify-content:center;padding:10px 14px;border:1.5px solid var(--line);border-radius:16px}
.prof-rank b{display:block;font-size:18px;color:var(--rc)}.prof-rank .eyebrow,.prof-clan .eyebrow{display:block}
.prof-clan b{display:flex;gap:6px;align-items:center}
.rank-sub b{color:var(--rc)}
.rank-end{display:flex;align-items:center;gap:8px}
.rank-ic{flex:none;display:block}
.pstat-rank b{color:var(--rc)}
.pstat-clan b{display:flex;gap:5px;align-items:center}
.rank-legend summary{cursor:pointer;font-weight:700}
.rank-legend ul{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.rank-legend li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center}
.lvl-reward{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:8px 12px 8px 8px;border-radius:16px;border:1.5px dashed var(--rar);background:color-mix(in srgb,var(--rar) 9%,transparent);cursor:pointer;color:inherit;font:inherit}
.lr-art{width:52px;height:52px;border-radius:12px;background:var(--surface-2,rgba(255,255,255,.06));display:grid;place-items:center;overflow:hidden}
.lr-art svg{width:44px;height:44px}
.lr-txt{display:flex;flex-direction:column;min-width:0}.lr-txt b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-gift svg{width:28px;height:28px;display:block;animation:epose 2s ease-in-out infinite}
.inv-sum{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 16px}
.inv-rar{display:inline-flex;align-items:center;gap:6px}.inv-rar .rdot{width:10px;height:10px;border-radius:50%;background:var(--rar)}
.inv-card.worn{outline:2.5px solid var(--good);outline-offset:-2.5px}
.inv-worn{position:absolute;top:8px;left:8px;z-index:2;font:800 11px/1 var(--f-display);padding:4px 7px 3px;border-radius:8px;background:var(--good);color:#fff}
.door-btn{color:var(--bad)}
.exit-modal{text-align:center;align-items:center;max-width:380px}
.exit-cat{width:120px;margin:0 auto}
.exit-modal h2{font-size:24px}
.exit-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.btn.bad{background:var(--bad);box-shadow:0 4px 0 color-mix(in srgb,var(--bad) 60%,#000);color:#fff}
.bad-t{color:var(--bad)}
.ban-note{display:flex;flex-direction:column;gap:2px;margin:0}
.gdd{position:fixed;z-index:60;width:min(300px,calc(100vw - 16px));background:var(--surface);border:1.5px solid var(--line);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.35);padding:14px;display:flex;flex-direction:column;gap:12px;animation:ddin .15s ease-out}
.gdd-head{display:flex;justify-content:space-between;align-items:center}
.gvol.off{opacity:.45}
.gvol-row{display:flex;align-items:center;gap:12px;margin-top:6px}
.gvol-n{min-width:44px;text-align:right;font-size:16px}
input[type=range]{--v:50%;cursor:pointer;-webkit-appearance:none;appearance:none;flex:1;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--ginger) var(--v),var(--line) var(--v));outline:none;margin:14px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:38px;height:34px;border:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2036%22%3E%3Cpath%20d%3D%22M4%2014%206%201%2016%208z%20M36%2014%2034%201%2024%208z%22%20fill%3D%22%23E8812C%22/%3E%3Cpath%20d%3D%22M7%2011%208%205%2012%209z%20M33%2011%2032%205%2028%209z%22%20fill%3D%22%23F7B9A6%22/%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%2220%22%20rx%3D%2217%22%20ry%3D%2214%22%20fill%3D%22%23E8812C%22%20stroke%3D%22%23C2621A%22%20stroke-width%3D%221.5%22/%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%2225%22%20rx%3D%229%22%20ry%3D%226.5%22%20fill%3D%22%23FFF3E6%22/%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%2218%22%20r%3D%222.4%22%20fill%3D%22%232A2140%22/%3E%3Ccircle%20cx%3D%2226.5%22%20cy%3D%2218%22%20r%3D%222.4%22%20fill%3D%22%232A2140%22/%3E%3Cpath%20d%3D%22M18.5%2022.5%20h3%20l-1.5%202z%22%20fill%3D%22%23E86F7F%22/%3E%3C/svg%3E") center/contain no-repeat;cursor:grab;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
input[type=range]::-moz-range-thumb{width:38px;height:34px;border:0;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2036%22%3E%3Cpath%20d%3D%22M4%2014%206%201%2016%208z%20M36%2014%2034%201%2024%208z%22%20fill%3D%22%23E8812C%22/%3E%3Cpath%20d%3D%22M7%2011%208%205%2012%209z%20M33%2011%2032%205%2028%209z%22%20fill%3D%22%23F7B9A6%22/%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%2220%22%20rx%3D%2217%22%20ry%3D%2214%22%20fill%3D%22%23E8812C%22%20stroke%3D%22%23C2621A%22%20stroke-width%3D%221.5%22/%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%2225%22%20rx%3D%229%22%20ry%3D%226.5%22%20fill%3D%22%23FFF3E6%22/%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%2218%22%20r%3D%222.4%22%20fill%3D%22%232A2140%22/%3E%3Ccircle%20cx%3D%2226.5%22%20cy%3D%2218%22%20r%3D%222.4%22%20fill%3D%22%232A2140%22/%3E%3Cpath%20d%3D%22M18.5%2022.5%20h3%20l-1.5%202z%22%20fill%3D%22%23E86F7F%22/%3E%3C/svg%3E") center/contain no-repeat;cursor:grab}
input[type=range]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 40%,transparent)}
.chat-card{display:flex;flex-direction:column;gap:10px}
.chat-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chat-head svg{width:26px;height:26px}.chat-head h3{font-size:19px;margin:0;flex:1}
.chat-list{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:8px;max-height:300px;min-height:120px;overflow-y:auto;border:1.5px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--line) 25%,transparent)}
.chat-empty{margin:auto;text-align:center}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:88%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.bubble{background:var(--surface);border:1.5px solid var(--line);border-radius:14px 14px 14px 4px;padding:6px 10px;min-width:0}
.msg.me .bubble{background:color-mix(in srgb,var(--plum) 18%,var(--surface));border-color:color-mix(in srgb,var(--plum) 40%,var(--line));border-radius:14px 14px 4px 14px}
.msg-h{display:flex;gap:8px;font-size:12px;align-items:baseline}.msg-t{display:block;word-break:break-word;font-size:14px}
.chat-form{display:flex;gap:8px}.chat-form input{flex:1;min-width:0}
.chat-err{margin:0;color:var(--bad);min-height:0}
.chat-err:empty{display:none}
.inv-open{display:flex;align-items:center;justify-content:center;gap:8px}.inv-open svg{width:20px;height:20px}
.inv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
.inv-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border:1.5px solid var(--line);border-radius:14px}
.inv-row.off{opacity:.6}
.inv-link summary{cursor:pointer;font-weight:700;margin-bottom:8px}
.inv-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;width:min(440px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;background:var(--surface);border:2px solid var(--plum);border-radius:18px;padding:10px 12px;box-shadow:0 14px 40px rgba(0,0,0,.35);animation:sheetup .25s ease-out}
.inv-banner[hidden]{display:none}
.ib-txt{display:flex;flex-direction:column;min-width:0}
.res-tiles .tile.pop{animation:tilepop .35s ease-out}
@keyframes tilepop{50%{transform:scale(1.08)}}
.res-tiles .t-xp b{color:var(--ginger)}.res-tiles .t-acc b{color:var(--good)}.res-tiles .t-time b{color:var(--plum)}
.chat-form input{border:2px solid var(--line);border-radius:12px;padding:9px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.cz-tile.lvlitem .cz-price{color:var(--plum)}
@media (max-width:520px){.topline .gear{width:34px;height:34px}.topline .gear svg{width:21px;height:21px}.topline{gap:4px}.me-btn{padding-right:6px}.me-btn{flex:1 1 auto;min-width:0}.me-info{min-width:0}.me-info .me-nick{max-width:none}.stats-right{margin-left:0}}
@media (max-width:380px){.topline .stats-left{display:none}}
.me-ava-w{position:relative;flex:none;display:block}.me-ava-w .me-ava{display:block}
.me-ttl{display:none;position:absolute;right:-4px;bottom:-3px;width:18px;height:18px;border-radius:6px;border:1.5px solid currentColor;place-items:center;background:var(--surface)}
.me-ttl svg{width:11px;height:11px}
.me-ttl.ttl-admin{color:var(--adm)}.me-ttl.ttl-og{color:var(--og)}
@media (max-width:520px){.me-ttl{display:grid}.me-nameline .ttls{display:none}.topline .gear{width:32px}}
.bp-head{display:flex;align-items:center;gap:10px}.bp-head h2{font-size:22px;margin:0}
.bp-group{display:flex;flex-direction:column;gap:8px}
.bp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.bp-opts.five{grid-template-columns:repeat(5,1fr)}
.bp-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.bp-opt b{font-size:16px}.bp-opt .small{font-size:11px;line-height:1.2}
.bp-opt.on{border-color:var(--ginger);background:var(--ginger-soft)}
.bp-opt:active{transform:translateY(2px);border-bottom-width:2px}
.bp-select{border:2px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink)}
.bot-sheet{display:flex;flex-direction:column;gap:14px}
@media (max-width:420px){.bp-opts.five{grid-template-columns:repeat(5,1fr);gap:5px}.bp-opt{padding:8px 2px 6px}}
.dl-head{display:flex;align-items:center;gap:14px;padding:14px 16px}
.dl-head h2{font-size:22px;margin:0}
.dl-count{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.dl-count b{font-size:22px}
.dl-players{display:flex;flex-direction:column;gap:10px;padding:12px}
.dl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.dl-seat{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 8px;border:2px solid var(--line);border-radius:16px;background:var(--surface);min-width:0;text-align:center}
.dl-seat.me{border-color:var(--ginger);background:var(--ginger-soft)}
.dl-seat.empty{border-style:dashed;background:transparent}
.dl-ava{width:54px;height:54px;display:block;overflow:hidden}.dl-ava svg{width:54px;height:auto;display:block}
.dl-plus{display:grid;place-items:center;border-radius:50%;border:2px dashed var(--line);color:var(--muted);font-size:26px;font-weight:700;width:46px;height:46px;margin:4px 0}
.dl-name{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-sub{font-size:12px;min-height:18px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dl-host{position:absolute;top:6px;left:8px;color:#F2B632;font-size:14px}
.dl-kick{position:absolute;top:4px;right:4px}
.dl-ok{color:var(--good);font-weight:700;font-size:12px}
.dl-sec{display:flex;flex-direction:column;gap:10px}
.dl-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.dl-sec-h h3{font-size:18px;margin:0}
.dl-up{cursor:pointer;border-style:dashed}.dl-rm{color:var(--bad)}
.dl-pool{padding:8px 12px;border-radius:12px;font-size:14px}
.dl-pool.ok{background:var(--good-soft);color:var(--good)}.dl-pool.warn{background:var(--bad-soft);color:var(--bad)}
.dl-set{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dl-seg{display:inline-flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.dl-seg button{border:0;background:none;color:var(--ink);font:inherit;font-weight:700;padding:7px 14px;min-width:52px;cursor:pointer}
.dl-seg button+button{border-left:2px solid var(--line)}
.dl-seg button[aria-pressed="true"]{background:var(--ginger);color:#fff}
.dl-seg button:disabled{cursor:default}
.dl-seg button:disabled:not([aria-pressed="true"]){opacity:.55}
.dl-rules summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--muted)}
.dl-foot{position:sticky;bottom:0;padding:10px 0 12px;background:linear-gradient(transparent,var(--bg) 30%);display:flex;flex-direction:column;gap:6px;z-index:5}
.dl-need{margin:0;text-align:center}
@media (max-width:480px){.dl-grid{grid-template-columns:repeat(4,1fr);gap:6px}.dl-seat{padding:8px 3px 6px}.dl-ava{width:44px;height:44px}.dl-ava svg{width:44px}.dl-name{font-size:12px}.dl-head h2{font-size:19px}}
.gl-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}.gl-vs-t{align-self:center}
.gl-vs-t{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ginger)}
.gl-team{display:flex;flex-direction:column;gap:6px;min-width:0}
.gl-team-h{display:flex;align-items:center;gap:6px;justify-content:center}.gl-team-h svg{width:20px;height:20px}
.gl-grid{grid-template-columns:repeat(auto-fit,minmax(86px,1fr))!important}
.gl-badge svg{width:40px;height:40px}
.dl-open{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer;width:100%;min-width:0;position:relative}
.dl-open:hover .dl-ava{transform:scale(1.06)}.dl-ava{transition:transform .15s}
.dl-open[data-player=""]{cursor:default}
.dl-rank{position:absolute;top:30px;right:calc(50% - 32px)}
.dl-head.has-art{display:block;padding:0;overflow:hidden}
.lobby-art{display:block;width:100%;height:170px}@media (min-width:560px){.lobby-art{height:200px}}
.dl-head-row{display:flex;align-items:center;gap:14px;padding:12px 16px}
.lobby-art .fire{transform-origin:0 4px;animation:lfire .5s ease-in-out infinite alternate}
@keyframes lfire{from{transform:scale(1,1)}to{transform:scale(.92,1.08)}}
.lobby-art .spark{animation:lspark 1.5s ease-out infinite;opacity:0}
@keyframes lspark{0%{opacity:1;transform:translateY(10px)}100%{opacity:0;transform:translateY(-14px)}}
.lobby-art .tw{animation:pblink 2.4s ease-in-out infinite}
.lobby-art .bub{animation:lbub 4s ease-in-out infinite}
.lobby-art .b2{animation-delay:2s}
@keyframes lbub{0%,10%{opacity:0;transform:translateY(4px)}20%,45%{opacity:1;transform:none}55%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.lobby-art *{animation:none!important;opacity:1!important}}
.cz-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:480px){.cz-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pg-num,.pg-arrow{min-width:34px;height:34px}}
.ce-name input{min-width:0;width:100%}
.cz-pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px}
.pg-num,.pg-arrow{min-width:38px;height:38px;border-radius:12px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);color:var(--ink);font:inherit;font-weight:800;display:grid;place-items:center;cursor:pointer;padding:0 8px}
.pg-arrow svg{width:18px;height:18px}
.pg-num[aria-current="page"]{background:var(--ginger);border-color:var(--ginger-deep,var(--ginger));color:#fff}
.pg-arrow:disabled{opacity:.35;cursor:default}
.pg-gap{color:var(--muted);font-weight:800}
.cz-tile{min-height:104px}
.ce-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;gap:0;padding:4px 6px}
.ce-tab{min-width:0;padding:8px 2px 7px;font-size:10px;gap:2px;border-radius:10px}
.ce-tab svg{width:20px;height:20px}
.ce-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-tab[aria-selected="true"]{background:var(--ginger-soft)}
.ce-tab[aria-selected="true"]::after{left:8px;right:8px;bottom:0}
/* big cat previews: let tall hats, halos and wings draw outside the 120×150 box without being cut */
.stage-cat svg.cat,.sheet-cat svg.cat,.deal-art svg.cat,.emo-cat svg.cat{overflow:visible}
.cz-thumb svg,.ava svg,.dl-ava svg{overflow:hidden}
.stage-cat,.sheet-cat,.deal-art,.emo-cat{overflow:visible}
.stage-cat,.sheet-cat{padding:15% 6% 0;box-sizing:content-box}
.ce-preview .stage-cat{padding:15% 4% 0}
.emote-scene{margin-top:14%}
.stage,.sheet-art,.ce-preview{overflow:visible}
/* fixed-size editor panel: same frame on every tab */
.cz-tile{height:112px;min-height:0;box-sizing:border-box;justify-content:flex-start}
.cz-grid{grid-auto-rows:112px;align-content:start;min-height:calc(3 * 112px + 2 * 8px)}
.cz-grid.cz-empty{display:grid;place-items:center;text-align:center}
.cz-pager{min-height:42px}
.ce-sub{min-height:34px}
.ce-filter{min-height:30px}
@media (max-width:480px){.cz-grid{min-height:calc(4 * 112px + 3 * 8px)}}
@media (max-width:560px){.ce-sub{flex-direction:column;align-items:stretch;gap:6px;flex-wrap:nowrap}.ce-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;height:34px;min-height:34px;align-items:center}.ce-filter::-webkit-scrollbar{display:none}.ce-filter .chip{flex:none}}
/* fixed-size preview frame: emotes and outfits use the same box */
.ce-preview .stage{height:340px;justify-content:center;box-sizing:border-box;padding:0 8px}
.ce-preview .stage-cat{width:200px;padding:0;margin-top:34px}
.ce-preview .stage .emote-scene{width:200px;max-width:200px;margin-top:34px}
.ce-preview .stage-name{min-height:28px;margin:0}
@media (max-width:560px){.ce-preview .stage{height:150px;width:120px;padding:0}.ce-preview .stage-cat,.ce-preview .stage .emote-scene{width:104px;max-width:104px;margin-top:22px}}
.ce-sub{flex-direction:column;align-items:stretch;gap:6px;flex-wrap:nowrap}
.ce-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;height:34px;min-height:34px;align-items:center}.ce-filter::-webkit-scrollbar{display:none}.ce-filter .chip{flex:none}
.dl-head.has-art{position:relative}
.lb-ctrl{position:absolute;top:8px;left:8px;right:8px;display:flex;align-items:center;gap:6px;z-index:2}
.lb-btn{position:relative;width:40px;height:40px;border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:rgba(16,12,36,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#F1ECFF;display:grid;place-items:center;cursor:pointer}
.lb-btn svg{width:21px;height:21px}
.lb-btn:hover{background:rgba(16,12,36,.75)}
.lb-btn.door{color:#FF8FA3}
.lb-btn .badge-n{position:absolute;top:-4px;right:-4px}
.dlobby{padding-top:12px}
/* titles: plain coloured text, no frame or icon */
.ttls{gap:8px}
.ttl,.ttl.sm{border:0!important;background:none!important;padding:0!important;border-radius:0;font-size:12px!important;letter-spacing:.08em;gap:0}
.ttl.sm{font-size:10.5px!important}
.ttl svg{display:none}
@media (max-width:520px){.me-nameline .ttls{display:inline-flex}.me-nameline .ttl+.ttl{display:none}.me-ttl{display:none!important}}
.inv-hero{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center;background:radial-gradient(circle at 15% 60%,var(--ginger-soft),transparent 55%),var(--surface)}
.inv-hero-art{width:110px}.inv-hero-art svg{width:100%;height:auto;display:block}
.inv-hero-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.inv-hero-body h1{font-size:30px;margin:0;line-height:1}
.inv-prog{display:flex;align-items:center;gap:10px}.inv-prog .bar{flex:1;height:12px}.inv-prog .bar i{background:linear-gradient(90deg,var(--ginger),#F2B632)}
.inv-prog span{font-size:15px;white-space:nowrap}
.inv-edit{align-self:flex-start;margin-top:4px}
.inv-rars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.inv-rt{background:var(--surface);border:2px solid var(--line);border-top:4px solid var(--rar);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.inv-rt b{font-size:22px;color:var(--rar);line-height:1}.inv-rt b small{font-size:12px;color:var(--muted);font-weight:700}
.inv-rt span{font-size:12px;font-weight:700;color:var(--muted)}
.inv-rt .bar{height:6px}.inv-rt .bar i{background:var(--rar)}
.inv-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.inv-tabs::-webkit-scrollbar{display:none}
.inv-tab{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:84px;padding:10px 10px 8px;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer;position:relative}
.inv-tab svg{width:22px;height:22px}
.inv-tab span{white-space:nowrap}
.inv-tab b{position:absolute;top:4px;right:6px;font-size:11px;color:var(--muted)}
.inv-tab[aria-selected="true"]{border-color:var(--ginger);background:var(--ginger-soft);color:var(--ginger-deep,var(--ginger))}
.inv-tab[aria-selected="true"] b{color:var(--ginger-deep,var(--ginger))}
@media (max-width:520px){.inv-hero{grid-template-columns:80px minmax(0,1fr);gap:12px}.inv-hero-art{width:80px}.inv-hero-body h1{font-size:24px}.inv-rars{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shopbar{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.sgrid4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){.sgrid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.shop-list-head{align-items:baseline;flex-wrap:wrap;gap:4px 10px;scroll-margin-top:200px}
.shop-list-head h3{margin:0}
.promo-sec .srow{margin:0;padding:4px 2px 10px;scroll-padding-left:2px}
.promo-sec .srow .sc{width:calc((100% - 30px) / 4)}
.sgrid4{padding:2px}
.shop .srow-sec,.shop .shop-list-head{margin:0}
@media (max-width:640px){.promo-sec .srow .sc{width:calc((100% - 10px) / 2)}}
.rk-card{display:flex;flex-direction:column;gap:10px;background:none;border:0;border-radius:12px;padding:4px 0}
.rk-top{display:flex;align-items:center;gap:12px}
.rk-id{display:flex;flex-direction:column;min-width:0;flex:1}
.rk-card .rk-name{font-size:18px;color:var(--rc)!important;line-height:1.15}.rk-card .rk-stat b,.rk-card .rk-prog b{color:var(--ink)!important}.rk-card .rk-stat .w{color:var(--good)!important}.rk-card .rk-stat .l{color:var(--bad)!important}
.rk-mmr b{font-size:22px}.rk-mmr .yarn-ic{width:24px;height:24px}
.rk-prog{display:flex;flex-direction:column;gap:4px}.rk-prog .bar{height:10px;margin:0}
.rk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rk-stat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:12px;background:var(--sunk);text-align:center}
.rk-stat b{font-size:17px}.rk-stat em{font-style:normal}.rk-stat .w{color:var(--good)}.rk-stat .l{color:var(--bad)}
.rk-stat span{font-size:11px;color:var(--muted);font-weight:700;line-height:1.2}
/* compact Graj screen: three modes fit on one screen */
@media (min-width:641px){
  .play{gap:12px}
  .play .mode{grid-template-columns:200px minmax(0,1fr);gap:16px;padding:12px 14px;align-items:center}
  .play .mode-art .play-art{max-height:150px;object-fit:cover}
  .play .mode-body{gap:7px}
  .play .mode-body h2{font-size:21px;margin:0}
  .play .mode-body .eyebrow{margin-bottom:-4px}
  .play .rk-card{gap:7px;padding:2px 0}
  .play .rk-top .rank-ic{width:34px;height:34px}
  .play .rk-name{font-size:16px}
  .play .rk-mmr b{font-size:19px}
  .play .rk-stat{padding:5px 4px;flex-direction:row;gap:6px;justify-content:center;align-items:baseline}
  .play .rk-stat b{font-size:15px}
  .play .rk-prog .bar{height:8px}
  .play .pick-mode{padding:10px;font-size:16px}
  .play .invite-row input{padding:6px 10px}
  .play .rk-prog b{font-size:13px}
  .play .rk-prog{flex-direction:row;align-items:center;gap:10px}.play .rk-prog .bar{flex:1}.play .rk-prog span{white-space:nowrap}
  .play .pick-mode,.play .invite-row .btn{padding-block:8px}
  main.wrap:has(> .play){padding-top:14px}
}
@media (min-width:641px) and (max-height:860px){
  .play .mode{grid-template-columns:160px minmax(0,1fr);padding:10px 12px}
  .play .mode-art .play-art{max-height:118px}
  .play .mode-body>.eyebrow,.play .mode-body>p.small,.play .rk-title .eyebrow{display:none}.play .rk-title{justify-content:flex-end;margin-bottom:-26px}
  .play .rk-prog span.small{font-size:12px}
  .play{gap:10px}
}
.rk-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rk-title h2{margin:0}
.rk-calib{flex:none;display:inline-flex;align-items:baseline;gap:5px;font-size:12px;font-weight:700;color:var(--muted)}
.rk-calib b{font-size:15px;color:var(--ink)}
button.rk-card{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
button.rk-card:hover{border-color:var(--rc)}
.rank-info-btn{display:inline-flex;align-items:center;gap:8px;align-self:center;border:0;background:none;color:var(--plum);font:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:6px 10px;border-radius:10px}
.rank-info-btn:hover{background:var(--plum-soft)}.rank-info-btn svg{width:18px;height:18px}
.rank-sheet{display:flex;flex-direction:column;gap:12px;max-height:88vh;overflow-y:auto}
.ri-head{display:flex;align-items:center;gap:14px}.ri-head h2{font-size:22px;margin:0;color:var(--rc)}
.ri-explain{background:var(--sunk);border-radius:14px;padding:10px 14px;font-size:13px;line-height:1.45}
.ri-explain p{margin:0 0 6px}.ri-explain p:last-child{margin:0}
.ri-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ri-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:14px}
.ri-row.me{background:color-mix(in srgb,var(--rc) 14%,transparent);outline:2px solid color-mix(in srgb,var(--rc) 60%,transparent)}
.ri-name{color:var(--rc);font-size:15px}
.ri-divs{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.ri-div b{color:var(--ink)}.ri-div.on{color:var(--rc)}.ri-div.on b{color:var(--rc)}
.ri-range{font-size:13px;color:var(--muted);white-space:nowrap}
input[type=range]:disabled{opacity:.5;cursor:default}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12) rotate(-6deg)}
input[type=range]::-webkit-slider-thumb{transition:transform .12s}
input[type=range]::-moz-range-track{background:transparent;border:0}
/* themed scrollbars instead of the browser default */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--plum) 55%,transparent) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--plum) 50%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--plum)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
.rank-sheet{overscroll-behavior:contain}
.ri-row{padding:6px 10px}.ri-list{gap:2px}
.pm-facts{display:none!important}
.stars-head{display:flex;align-items:center;gap:14px;padding:12px 16px}.stars-head svg{width:40px;height:40px;flex:none}
.stars-head b{display:block;font-size:28px;line-height:1}
.res-stars{display:flex;gap:10px;justify-content:center;margin:-4px 0 4px}
.res-stars .rs svg{width:46px;height:46px;display:block;filter:grayscale(1) brightness(.5);opacity:.5}
.res-stars .rs.on svg{filter:none;opacity:1}
.res-stars .rs.on{animation:starpop .45s cubic-bezier(.3,1.6,.5,1) both}
.res-stars .rs:nth-child(2) svg{width:58px;height:58px;margin-top:-8px}
@keyframes starpop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.seg3{grid-template-columns:repeat(4,1fr)!important}
[style*="--rar:#E04FC6"] .sc-art{background:radial-gradient(circle at 50% 40%,#FF9BE8,#7A2BD0 75%)}
[style*="--rar:#E04FC6"] .rar-pill,[style*="--rar:#E04FC6"] .sc-rar{background:linear-gradient(90deg,#E04FC6,#7A55C9,#2BB5B0);color:#fff}
.serial{position:absolute;top:8px;right:8px;z-index:3;font:800 11px/1 var(--f-num,monospace);padding:4px 7px;border-radius:8px;background:rgba(10,8,18,.7);color:#fff;border:1px solid rgba(255,255,255,.35)}
.serial.big{position:static;display:inline-block;margin-left:6px;font-size:13px;background:var(--sunk);color:var(--ink);border-color:var(--line)}
.serial.sm{top:4px;right:4px;font-size:9.5px;padding:2px 5px}
.sc-art .inv-worn{top:auto;bottom:8px;left:8px}
.sc .sc-art{position:relative}
.worn-box{display:flex;flex-direction:column;gap:8px;width:100%}
.worn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.worn-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 7px;border:2px solid var(--line);border-top:3px solid var(--rar);border-radius:14px;background:var(--surface);color:inherit;font:inherit;cursor:pointer;min-width:0}
.wi-art{width:100%;height:46px;display:grid;place-items:center}.wi-art svg{max-height:44px;max-width:90%;width:auto;height:44px}
.wi-name{font-size:11.5px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-rar{font-size:10px;font-weight:800;color:var(--rar);text-transform:uppercase;letter-spacing:.05em}
.inv-lim{color:#E04FC6;font-weight:800}
main.in-game{padding-top:14px}
.g-ctrl{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.g-ctrl .lb-btn{background:var(--surface);border-color:var(--line);color:var(--ink)}
.g-ctrl .lb-btn.door{color:var(--bad)}
.g-ctrl-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.g-ctrl-t b{font-family:var(--f-display);font-size:16px}.g-ctrl-t small{font-size:12px;color:var(--muted)}
/* ---------- login screen ---------- */
.auth{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#3A2E72 0%,#1D1838 45%,#120F24 100%)}
.auth-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.as-stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 30% 70%,#fff6,transparent),radial-gradient(1.5px 1.5px at 72% 26%,#fff9,transparent),radial-gradient(1px 1px at 86% 64%,#fff6,transparent),radial-gradient(1.2px 1.2px at 52% 46%,#fff5,transparent),radial-gradient(1px 1px at 20% 88%,#fff6,transparent);animation:pblink 4s ease-in-out infinite}
.as-paw{position:absolute;bottom:-60px;width:calc(34px * var(--s));opacity:.16;animation:pawup linear infinite}
.as-paw svg{width:100%;height:auto;display:block}.as-paw svg *{fill:#C9B8FF}
@keyframes pawup{0%{transform:translateY(0) rotate(-10deg)}100%{transform:translateY(-120vh) rotate(20deg)}}
.as-yarn{position:absolute;width:44px;bottom:6%;opacity:.9;animation:yroll 9s linear infinite}
.as-yarn svg{width:100%;height:auto}
.as-yarn.y0{left:-60px}.as-yarn.y1{left:-60px;bottom:14%;width:30px;animation-delay:3s;animation-duration:12s}.as-yarn.y2{left:-60px;bottom:3%;width:24px;animation-delay:6s;animation-duration:8s}
@keyframes yroll{0%{transform:translateX(0) rotate(0)}100%{transform:translateX(calc(100vw + 120px)) rotate(900deg)}}
.auth-inner{position:relative;z-index:1;width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:14px}
.auth-hero{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.auth-cat{width:112px;animation:catwave 3.6s ease-in-out infinite;transform-origin:50% 100%}
.auth-cat .arm-r{transform-origin:84px 98px;animation:ewave .5s ease-in-out infinite alternate}
@keyframes catwave{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.auth-logo{font-family:var(--f-display);font-size:42px;margin:0;line-height:1;color:#fff;letter-spacing:.01em;text-shadow:0 4px 0 #0007}
.auth-tag{margin:0;color:#C9C2E8;font-size:14px}
.auth-card{width:100%;background:color-mix(in srgb,var(--surface) 92%,transparent);border:2px solid color-mix(in srgb,var(--plum) 40%,var(--line));border-radius:24px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;animation:sheetup .35s ease-out;backdrop-filter:blur(6px)}
.auth-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--sunk);border-radius:14px;padding:4px}
.auth-tabs button{position:relative;z-index:1;border:0;background:none;font:inherit;font-weight:800;padding:10px;color:var(--muted);cursor:pointer;border-radius:10px}
.auth-tabs button[aria-selected="true"]{color:var(--ink)}
.at-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--surface);box-shadow:0 2px 0 var(--line);transition:transform .25s cubic-bezier(.3,.8,.4,1)}
.at-ind.register{transform:translateX(100%)}
.auth-form{display:flex;flex-direction:column;gap:10px}
.af{display:flex;flex-direction:column;gap:4px}
.af-l{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.af-in{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:14px;padding:0 10px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.af-in:focus-within{border-color:var(--plum);box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 25%,transparent)}
.af-in>svg{width:19px;height:19px;color:var(--muted);flex:none}
.af-in input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);padding:11px 0;outline:none}
.af-eye{border:0;background:none;color:var(--muted);cursor:pointer;padding:4px;display:grid}.af-eye svg{width:19px;height:19px}.af-eye.on{color:var(--plum)}
.af-row{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.af-err{margin:0;color:var(--bad);font-size:13px;font-weight:700;background:var(--bad-soft);padding:8px 10px;border-radius:10px}
.af-sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.af-sep::before,.af-sep::after{content:"";flex:1;height:1.5px;background:var(--line)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff!important;color:#1f1f1f!important;border-color:#dadce0!important;box-shadow:0 3px 0 #c9c9d2!important}.gbtn svg{width:20px;height:20px}
.af-head{display:flex;gap:12px;align-items:flex-start}.af-head>svg{width:30px;height:30px;color:var(--plum);flex:none}.af-head b{display:block;font-size:17px}
.otp{font:800 28px/1 var(--f-num,monospace);letter-spacing:.5em;text-align:center;padding:12px 8px 12px 20px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);width:100%}
.otp:focus{outline:none;border-color:var(--plum)}
.qr-wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.qr{width:168px;height:168px;background:#fff;border-radius:14px;padding:8px;display:grid;place-items:center}.qr img,.qr canvas{display:block}
.qr-key{display:flex;flex-direction:column;gap:4px;max-width:180px}.qr-key code{font:700 13px/1.5 var(--f-num,monospace);word-break:break-all;background:var(--sunk);padding:8px;border-radius:10px}
.auth-foot{margin:0;color:#9F97C9;text-align:center;max-width:360px}
.auth .linkbtn{color:var(--plum)}
.auth-form>.linkbtn{align-self:center;width:auto}
.toggle.small{font-size:13px}
.bob{animation:catwave 1.6s ease-in-out infinite}
.gear-dd{position:fixed;z-index:60;min-width:200px;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;animation:ddin .15s ease-out}
.gear-dd button{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--ink);font:inherit;font-weight:700;padding:10px 12px;border-radius:10px;cursor:pointer;text-align:left}
.gear-dd button:hover{background:var(--sunk)}.gear-dd svg{width:20px;height:20px;flex:none}
.gear-dd .danger{color:var(--bad)}.gear-dd hr{border:0;height:1.5px;background:var(--line);margin:4px 6px}
.acc-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.info-hero{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}
.info-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
@media (max-width:520px){.info-hero{grid-template-columns:80px minmax(0,1fr)}.auth-logo{font-size:36px}.auth-cat{width:90px}}
@media (prefers-reduced-motion: reduce){.as-paw,.as-yarn,.auth-cat,.auth-cat .arm-r{animation:none}}
.wallet-n{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}
.paw-store{display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow-y:auto}
.ps-head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.ps-head h2{margin:0;font-size:24px}
.ps-bal{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--sunk)}.ps-bal svg{width:20px;height:20px}.ps-bal b{font-size:18px}
.ps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ps-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px 10px;border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,#F2B632 10%,var(--surface)),var(--surface));color:inherit;font:inherit;cursor:pointer;transition:transform .12s}
.ps-pack:hover{transform:translateY(-2px);border-color:#F2B632}.ps-pack:active{transform:translateY(1px);border-bottom-width:3px}
.ps-pack.hot{border-color:#F2B632;box-shadow:0 0 0 3px color-mix(in srgb,#F2B632 25%,transparent)}
.ps-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;font:800 10.5px/1 var(--f-display);padding:4px 9px 3px;border-radius:999px;background:var(--bad);color:#fff}
.ps-art{width:100%;aspect-ratio:16/10;display:block}.ps-art svg{width:100%;height:100%;display:block}
.pk-spark{animation:etwinkle 1.8s ease-in-out infinite;opacity:0;transform-box:fill-box;transform-origin:center}
.ps-name{font-weight:800;font-size:13px;text-align:center}
.ps-paws{display:inline-flex;align-items:center;gap:4px}.ps-paws svg{width:18px;height:18px}.ps-paws b{font-size:20px}
.ap-list{display:flex;flex-direction:column;gap:10px}
.ap-opt{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid var(--line);border-bottom-width:5px;border-radius:18px;background:var(--surface);text-align:left;cursor:pointer;color:inherit;font:inherit}
.ap-opt:hover:not(:disabled){border-color:#F2B632}.ap-opt:active:not(:disabled){transform:translateY(1px);border-bottom-width:3px}.ap-opt:disabled{opacity:.5;cursor:not-allowed}
.ap-ic{width:44px;height:44px;border-radius:14px;background:var(--sunk);display:grid;place-items:center;font-size:24px;flex:none}
.ap-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.ap-txt b{font-family:var(--f-display);font-size:16px}
.ap-go{flex:none;font:800 13px/1 var(--f-display);padding:9px 12px 8px;border-radius:12px;background:var(--good);color:#fff}
.ps-bonus{font-size:11px;font-weight:800;color:var(--good)}.ps-bonus.none{visibility:hidden}
.ps-price{margin-top:4px;width:100%;text-align:center;font:800 15px/1 var(--f-display);padding:9px 0 8px;border-radius:12px;background:var(--ginger);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--ginger) 60%,#000)}
@media (max-width:520px){.ps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ps-promo{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:var(--sunk)}

/* ranked quiz: search, intro, bans, roll */
.qsearch{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 12px 10px;min-height:calc(100svh - 170px);justify-content:center}
.qs-radar{position:relative;width:min(240px,64vw);aspect-ratio:1;display:grid;place-items:center;margin-bottom:6px}
.qs-ring{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--plum) 55%,transparent);animation:qsRing 2.4s ease-out infinite;opacity:0}
.qs-ring.r2{animation-delay:.8s}.qs-ring.r3{animation-delay:1.6s}
@keyframes qsRing{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.08);opacity:0}}
.qs-sweep{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--plum) 40%,transparent),transparent 28%);animation:qsSpin 2.2s linear infinite}
.qs-radar::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--plum) 16%,var(--surface)) 0 60%,var(--surface));border:2px solid var(--line)}
@keyframes qsSpin{to{transform:rotate(360deg)}}
.qs-orbit{position:absolute;inset:0;animation:qsSpin 14s linear infinite}
.qs-ghost{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%;display:grid;place-items:center;font:800 15px/1 var(--f-display);color:var(--muted);background:var(--sunk);border:2px solid var(--line);transform:rotate(var(--a)) translateY(calc(min(240px,64vw) * -.4)) rotate(calc(var(--a) * -1));animation:qsGhost 2.4s ease-in-out var(--d) infinite}
@keyframes qsGhost{0%,100%{opacity:.35}50%{opacity:1}}
.qs-me{position:relative;width:46%;z-index:1;animation:qsBob 1.6s ease-in-out infinite}
@keyframes qsBob{50%{transform:translateY(-5px)}}
.qsearch.found .qs-ring,.qsearch.found .qs-sweep{animation-play-state:paused;opacity:0}
.qsearch.found .qs-orbit{display:none}
.qsearch.found .qs-radar::before{background:radial-gradient(circle,color-mix(in srgb,var(--good) 30%,var(--surface)) 0 60%,var(--surface));border-color:var(--good)}
.qs-title{margin:0;font-size:26px}.qs-title.pop{animation:qsPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes qsPop{from{transform:scale(.6);opacity:0}}
.qs-dots i{font-style:normal;animation:qsDot 1.2s infinite}.qs-dots i:nth-child(2){animation-delay:.2s}.qs-dots i:nth-child(3){animation-delay:.4s}
@keyframes qsDot{0%,60%,100%{opacity:.2}30%{opacity:1}}
.qs-time{font:800 44px/1 var(--f-display);color:var(--plum)}
.qs-sub{margin:0;max-width:360px;line-height:1.5}.qs-sub .yarn-v{vertical-align:middle}
.qs-tips{margin-top:6px;padding:6px 12px;border-radius:999px;background:var(--sunk)}
.qintro{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 4px;min-height:calc(100svh - 170px);justify-content:center}
.qi-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:6px;width:100%;max-width:640px}
.qi-card{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:14px 8px 12px;border-radius:22px;border:2px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--plum) 14%,var(--surface)),var(--surface));min-width:0}
.qi-card.l{animation:qiL .7s cubic-bezier(.2,1.3,.4,1) both}.qi-card.r{animation:qiR .7s cubic-bezier(.2,1.3,.4,1) .15s both;background:linear-gradient(180deg,color-mix(in srgb,var(--bad) 14%,var(--surface)),var(--surface))}
@keyframes qiL{from{transform:translateX(-120%) rotate(-8deg);opacity:0}}@keyframes qiR{from{transform:translateX(120%) rotate(8deg);opacity:0}}
.qi-cat{width:100%;max-width:170px}.qi-cat .emote-scene{margin-top:0}
.qi-name{font-family:var(--f-display);font-size:19px;line-height:1.1;overflow-wrap:anywhere}
.qi-rank{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:13px}.qi-rank svg{width:22px;height:22px}
.qi-emo{font-size:11px}
.qi-vs{position:relative;display:grid;place-items:center;align-self:center;width:62px;animation:qiVs .6s cubic-bezier(.3,1.8,.5,1) .55s both}
.qi-vs svg{width:50px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}.qi-vs b{position:absolute;font:800 24px/1 var(--f-display);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;transform:rotate(-8deg)}
@keyframes qiVs{from{transform:scale(3);opacity:0}60%{transform:scale(.85)}}
.qi-next{margin:0;animation:qsDot 1.6s infinite}
.qban{display:flex;flex-direction:column;gap:10px}
.qb-head{display:flex;align-items:center;gap:10px}
.qb-players{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.qb-p{flex:1;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:14px;border:2px solid var(--line);background:var(--surface);min-width:0;transition:.2s}
.qb-p b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.qb-p small{font-weight:800;color:var(--muted)}
.qb-p.on{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent)}
.qb-vs{font:800 12px/1 var(--f-display);color:var(--muted)}
.qb-timer{display:flex;align-items:baseline;gap:1px;padding:6px 12px;border-radius:14px;background:var(--ink);color:var(--surface)}.qb-timer span{font:800 26px/1 var(--f-display)}
.qb-title{margin:4px 0 0;text-align:center;font-size:22px}
.qb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.qb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qb-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border-radius:18px;border:2px solid color-mix(in srgb,var(--cc) 45%,var(--line));border-bottom-width:5px;background:color-mix(in srgb,var(--cc) 10%,var(--surface));color:inherit;font:inherit;cursor:pointer;overflow:hidden;transition:transform .12s}
.qb-tile b{font-family:var(--f-display);font-size:16px;line-height:1.1;text-align:center}.qb-tile small{color:var(--muted);font-size:11.5px;font-weight:700}
.qb-tile:not(:disabled):hover{transform:translateY(-2px);border-color:var(--bad)}.qb-tile:not(:disabled):active{transform:translateY(1px);border-bottom-width:3px}
.qb-tile:disabled{cursor:default}
.qb-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--cc);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--cc) 60%,#000)}.qb-ic svg{width:26px;height:26px}
.qb-tile.banned{filter:grayscale(1);opacity:.55}
.qb-stamp{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);font:800 26px/1 var(--f-display);color:var(--bad);border:3px solid var(--bad);border-radius:10px;padding:4px 10px 2px;background:color-mix(in srgb,var(--surface) 70%,transparent);animation:qbStamp .35s cubic-bezier(.3,1.8,.5,1);filter:none}
@keyframes qbStamp{from{transform:translate(-50%,-50%) rotate(-14deg) scale(2.4);opacity:0}}
.qb-by{font-size:10.5px!important}
.qroll{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px 4px;min-height:calc(100svh - 190px);justify-content:center}
.qroll h2{margin:0;font-size:28px}
.qr-row{display:flex;align-items:center;gap:10px;width:100%;max-width:520px;padding:0 14px;box-sizing:border-box}
@media (max-width:520px){.qr-opt.won{transform:scale(1.04)}.qr-opt.hi{transform:scale(1.02)}.qr-opt{padding:18px 6px}}
.qr-opt{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 10px;border-radius:22px;border:3px solid var(--line);background:var(--surface);transition:transform .08s,border-color .08s,box-shadow .08s}
.qr-opt b{font-family:var(--f-display);font-size:19px}.qr-opt small{color:var(--muted);font-weight:700}
.qr-opt .qb-ic{width:60px;height:60px;border-radius:18px}.qr-opt .qb-ic svg{width:34px;height:34px}
.qr-opt.hi{border-color:var(--cc);transform:scale(1.05);box-shadow:0 0 0 5px color-mix(in srgb,var(--cc) 30%,transparent)}
.qr-opt.won{border-color:var(--cc);transform:scale(1.1);box-shadow:0 0 0 6px color-mix(in srgb,var(--cc) 35%,transparent),0 0 40px color-mix(in srgb,var(--cc) 60%,transparent);animation:qrWon .6s ease}
.qr-opt.lost{opacity:.35;transform:scale(.92)}
@keyframes qrWon{40%{transform:scale(1.22)}}
.qr-or{font:800 14px/1 var(--f-display);color:var(--muted)}
.qtag.qcat{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--cc) 16%,var(--surface));color:var(--cc)}.qtag.qcat svg{width:15px;height:15px}
.qsrc{font-size:11.5px;color:var(--muted);font-style:italic;border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.cheat-line{margin:0;text-align:center;color:var(--bad)}
.cheat-modal{align-items:center;text-align:center;gap:10px!important;border:3px solid var(--bad)}
.cheat-modal.ok{border-color:var(--good)}
.cheat-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--bad);color:#fff;font:800 32px/1 var(--f-display);animation:qsPop .4s cubic-bezier(.3,1.8,.5,1)}
.cheat-modal.ok .cheat-ic{background:var(--good)}
.cheat-modal h2{margin:0}
.cheat-strikes{display:flex;gap:8px}.cheat-strikes span{width:34px;height:10px;border-radius:99px;background:var(--sunk)}.cheat-strikes span.on{background:var(--bad)}
.cheat-pen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.cheat-pen span{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad);font-weight:800}.cheat-pen svg{width:18px;height:18px}

/* top bar xp row (mobile) */
.me-xprow{display:none}
@media (max-width:520px){
  .me-xprow{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 2px 2px;color:inherit;font:inherit;cursor:pointer}
  .me-xprow b{font-family:var(--f-display);font-size:12px;color:var(--ginger-deep);white-space:nowrap}
  .me-xpbar{flex:1;height:8px;border-radius:5px;background:var(--sunk);overflow:hidden}.me-xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ginger),#F2B632);border-radius:5px}
  .me-xprow .num{font-size:11px;color:var(--muted);white-space:nowrap}
  .me-btn .me-lvl{display:none}
  /* profile card: big cat on top, details below */
  .profile-top{grid-template-columns:1fr!important;justify-items:stretch;gap:12px!important}
  .profile-top .pstage{display:flex;flex-direction:column;align-items:center;padding:10px 0 4px!important;border-radius:18px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--ginger) 16%,transparent),transparent 70%)}
  .profile-top .stage-cat{width:150px!important}
  .profile-top .stage-name{font-size:17px!important}
  .pstats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pstat{width:100%;padding:8px 10px 8px 8px}
  .pstat b,.pstat small{overflow:hidden;text-overflow:ellipsis}
  .pstat-clan{grid-column:1/-1}
  .pstats > :last-child:nth-child(odd){grid-column:1/-1}
  .lvl-reward{width:100%}
  /* inventory rarity counters: one even row */
  .inv-rars{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px}
  .inv-rt{padding:8px 4px;align-items:center;text-align:center;gap:3px}
  .inv-rt b{font-size:16px}.inv-rt b small{font-size:10px}
  .inv-rt span{font-size:9.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .inv-rt .bar{width:100%}
}
.sheet-price{justify-content:center}
/* duel final: full-screen winner */
.final-hero{display:flex;flex-direction:column;gap:14px;min-height:calc(100svh - 150px);justify-content:center}
.fh-card{flex:1;justify-content:center;padding:28px 16px!important}
.fh-card h2{font-size:40px!important;margin:0}
.fh-card .emote-scene.big{max-width:280px}
.fh-pts{margin:0;font-family:var(--f-display);font-size:20px}.fh-pts b{font-size:30px;color:var(--ginger)}
.fh-next{font-size:18px;padding-block:14px}
.fs-head{text-align:center}.fs-head h2{margin:2px 0 0;font-size:30px}
/* 2x XP offer */
.xp2-modal{align-items:center;text-align:center;gap:12px!important}
.x2-badge{width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#FFE08A,#F2B632 60%,#C98A12);color:#5A3A00;box-shadow:0 6px 0 #A86E00,0 0 0 6px color-mix(in srgb,#F2B632 25%,transparent);animation:x2Pop .6s cubic-bezier(.3,1.7,.5,1)}
.x2-badge b{font:800 34px/1 var(--f-display)}.x2-badge span{font:800 14px/1 var(--f-display)}
@keyframes x2Pop{from{transform:scale(.3) rotate(-30deg);opacity:0}}
.xp2-modal h2{margin:0}.good-t{color:var(--good)}
/* adventure: languages + sections */
.adv-langs{display:flex;flex-direction:column;gap:8px}
.adv-lang{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:4px 10px;align-items:center;padding:10px 12px;border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer}
.adv-lang:hover{border-color:var(--ginger)}
.adv-lang span{display:flex;flex-direction:column;min-width:0}.adv-lang b{font-family:var(--f-display);font-size:16px}.adv-lang small{color:var(--muted);font-size:12px}
.adv-lang-bar{grid-column:1/-1;height:6px;border-radius:4px;background:var(--sunk);overflow:hidden}.adv-lang-bar i{display:block;height:100%;background:var(--ginger)}
.adv-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.adv-tab{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;font:800 15px/1 var(--f-display);cursor:pointer}
.adv-tab.on{border-color:var(--ginger);background:var(--ginger-soft)}
.adv-sec-card{display:flex;flex-direction:column;gap:10px}
.asc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}.asc-top h2{margin:2px 0 0;font-size:24px}.asc-top h2 small{font-size:13px;font-family:var(--f-body)}
.asc-st{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.asc-st span:first-child{display:inline-flex;align-items:center;gap:4px}.asc-st svg{width:18px;height:18px}
.sec-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;align-items:center}
.sec-chip{flex:none;width:36px;height:36px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:inherit;font:800 13px/1 var(--f-display);cursor:pointer}
.sec-chip.done{background:color-mix(in srgb,var(--good) 18%,var(--surface));border-color:var(--good);color:var(--good)}
.sec-chip.locked{opacity:.55;font-size:12px}
.sec-chip.on{border-color:var(--ginger);box-shadow:0 0 0 3px color-mix(in srgb,var(--ginger) 30%,transparent)}
.sec-lvl{flex:none;font:800 11px/1 var(--f-display);color:var(--plum);padding:4px 6px;border-radius:8px;background:var(--plum-soft);margin-left:4px}
.adv-show{display:flex;flex-direction:column;gap:6px}
.as-list{display:flex;flex-direction:column;gap:6px}
.as-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:4px 0;border:0;border-radius:0;background:none}
.as-n{display:flex;flex-direction:column;min-width:0}.as-n b{font-size:14px}.as-n small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-v{display:inline-flex;align-items:center;gap:3px;font-weight:800}.as-v svg{width:16px;height:16px}.as-v.xp b{color:var(--ginger)}.as-v small{font-size:10px;color:var(--muted)}

/* profile card: friends chip on the stage, only rank + clan as chips */
.pstage-fr{position:absolute;top:10px;left:10px;z-index:2;width:auto!important;max-width:calc(100% - 80px);padding:6px 12px 6px 8px!important;background:color-mix(in srgb,var(--surface) 85%,transparent)}
.profile-top .pstats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profile-top .pstats .pstat{width:100%;padding:8px 10px 8px 8px;overflow:hidden}
.profile-top .pstats .pstat > span{flex:1;min-width:0}
.profile-top .pstats .pstat b,.profile-top .pstats .pstat small{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
@media (max-width:520px){.profile-top .pstats{grid-template-columns:1fr}.profile-top .pstats > :last-child:nth-child(odd){grid-column:auto}.profile-top .pstage{min-height:240px;justify-content:center}}
@media (min-width:521px){.profile-top{grid-template-columns:minmax(0,260px) minmax(0,1fr)!important;align-items:stretch!important}.profile-top .pstage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 10px 14px;border-radius:18px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--ginger) 16%,transparent),transparent 70%)}.profile-top .stage-cat{width:190px}}

/* editor grid keeps the same height on every tab and page (mobile: 3 cols x 4 rows) */
@media (max-width:560px){.cz-grid{min-height:calc(4 * 112px + 3 * 8px)!important}}
.ce-panel .cz-buy{height:52px;box-sizing:border-box;flex-wrap:nowrap;padding:6px 8px 6px 12px}.ce-panel .cz-buy > span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.ce-panel .cz-buy > span:first-child svg{vertical-align:-3px}.ce-panel .cz-buy-actions{display:flex;flex:none}.ce-panel .cz-buy .btn{white-space:nowrap}.cz-buy-empty{visibility:hidden}

/* cat editor: its own full-screen scroll area with a reserved scrollbar gutter,
   so switching tabs (fur, emotes, victory…) can never change the page width */
.ce{position:fixed;inset:0;z-index:15;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;min-height:0!important;overscroll-behavior:contain}
.ce-body{width:100%;box-sizing:border-box}
.ce-preview,.ce-panel{min-width:0;max-width:100%;overflow:hidden}
.ce-preview .stage,.ce-preview .emote-scene{overflow:hidden}

/* free paws tile on phones: badge in its own corner, artwork centred below it */
@media (max-width:520px){
  .earn-tile{padding-top:44px}
  .earn-badge{top:8px;right:8px;padding:4px 9px}
  .earn-art{display:flex;justify-content:center;align-items:center;border-radius:14px;overflow:hidden}
  .earn-art svg{width:100%;max-width:230px;margin:0 auto}
}

.pm-eta{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:var(--muted);white-space:nowrap;flex-wrap:nowrap}.pm-eta svg{width:15px;height:15px}.pm-eta b{color:var(--good)}
.priv-box{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;border:2px dashed var(--line);background:var(--sunk)}.priv-box svg{width:26px;height:26px;flex:none;color:var(--muted)}.priv-box div{display:flex;flex-direction:column;gap:2px}

.mmr-res{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.mmr-res .mr-top{display:flex;align-items:center;gap:12px}.mmr-res .mr-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mmr-res .mr-txt > b{font-family:var(--f-display);font-size:20px}
.mmr-res.up .mr-d{color:var(--good)}.mmr-res.down .mr-d{color:var(--bad)}
.mr-bar{height:10px;border-radius:6px;background:var(--sunk);overflow:hidden}.mr-bar i{display:block;height:100%;border-radius:6px;transition:width .8s ease}
.ge-one.ge-click{cursor:pointer;border:0;background:none;color:inherit;font:inherit;padding:0}


.seat-open{grid-column:2/4;display:flex;align-items:center;gap:10px;min-width:0;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer}
.seat-open,.seat-open *,.ge-one.ge-click,.ge-one.ge-click *{text-decoration:none!important}
.turn-t{font:800 15px/1 var(--f-display);padding:5px 9px;border-radius:10px;background:var(--sunk);color:var(--ink)}
.turn-t.urgent{background:var(--bad);color:#fff;animation:qsDot 1s infinite}

/* in-game header: fixed heights so the board never jumps between turns */
.game-status h2{font-size:24px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:34px;height:34px}
.seat{min-height:52px;box-sizing:border-box}
.seat .who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .who{min-width:0}
.seat-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turn-t.off{visibility:hidden}
@media (max-width:520px){.game-status h2{font-size:20px}}

.ingame-t{color:var(--ginger);font-weight:700}

/* leaderboards: pager, pinned own row, compact rows on phones */
.lb-pager{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 8px;scrollbar-width:thin}
.lb-pager button{flex:none;padding:7px 11px;border-radius:11px;border:2px solid var(--line);background:var(--surface);color:inherit;font:800 12.5px/1 var(--f-display);cursor:pointer}
.lb-pager button.on{border-color:var(--ginger);background:var(--ginger-soft)}
.lb-mine{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));margin-top:10px;padding:8px;border-radius:18px;background:var(--surface);border:2px solid var(--ginger);box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:3;display:flex;flex-direction:column;gap:4px}
.lb-mine .eyebrow{padding:0 4px}
.lb-sub{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
.lb-sub .ctag{font-size:10px;padding:1px 5px}
.lbrow .nm{white-space:nowrap}
@media (max-width:520px){
  .lbrow{gap:8px!important;padding:8px 8px!important;grid-template-columns:22px 34px minmax(0,1fr) auto!important}
  .lbrow .ava-wrap,.lbrow .ava{width:34px!important}
  .lbrow .pos{font-size:13px}
  .lbrow .nmline{font-size:13.5px;gap:4px;white-space:nowrap;overflow:hidden}
  .lbrow .nmline .flag,.lbrow .nmline svg.flag{width:14px}
  .lbrow .lb-sub,.lbrow .rank-sub{font-size:11px}
  .lb-plat{display:none}
  .lbrow .lbxp{font-size:13px}
  .lbrow .prize.sm{font-size:11px;padding:2px 6px}
  .lbrow .rank-end svg{width:24px;height:24px}
  .lbrow .rank-end .yarn-v{font-size:13px}
  .lbrow .tag{font-size:10px;padding:1px 5px}
}
/* every dialog fits the screen and scrolls inside; player profile is more compact on phones */
.modal{max-height:calc(100svh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
@media (max-width:520px){
  .modal{padding:14px 12px}
  .pp{gap:8px}
  .pp:not(.pp2) > div:first-child{width:92px!important}
  .pp h2{font-size:21px!important}
  .pp .prof-rank{padding:8px 10px}
  .pp .prof-rank svg{width:36px;height:36px}
  .pp .tiles .tile{padding:8px 4px}
  .pp .tiles .tile b{font-size:18px}
  .pp .tiles .tile span{font-size:10px}
  .worn-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
  .worn-it{padding:6px 4px}
}
/* guided tour */
.tour{position:fixed;inset:0;z-index:60}
.tour.intro{background:radial-gradient(120% 90% at 50% 20%,#3B2F7A 0,#1E1840 55%,#100C24 100%);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-left,0px));cursor:pointer;animation:tiIn .45s ease}
@keyframes tiIn{from{opacity:0}}
.ti-stars{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 12% 18%,#fff8,transparent),radial-gradient(2px 2px at 78% 12%,#fff9,transparent),radial-gradient(1.5px 1.5px at 40% 30%,#fff7,transparent),radial-gradient(2px 2px at 88% 42%,#fff6,transparent),radial-gradient(1.5px 1.5px at 22% 60%,#fff7,transparent),radial-gradient(2px 2px at 64% 70%,#fff5,transparent);animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.5}}
.ti-scene{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:460px;width:100%}
.ti-cat{width:min(180px,46vw);animation:tiCat .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes tiCat{from{transform:translateY(60px) scale(.6);opacity:0}}
.ti-cat svg{animation:qsBob 2s ease-in-out infinite}
.ti-bubble{position:relative;width:100%;background:#fff;color:#2B2648;border-radius:22px;padding:16px 18px 14px;box-shadow:0 8px 0 rgba(0,0,0,.25);animation:tiPop .35s cubic-bezier(.3,1.6,.5,1)}
.ti-bubble::before{content:"";position:absolute;left:50%;top:-12px;margin-left:-12px;border:12px solid transparent;border-top:0;border-bottom-color:#fff}
@keyframes tiPop{from{transform:scale(.85);opacity:0}}
.ti-name{display:inline-block;font:800 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#E8742A;margin-bottom:6px}
.ti-bubble p{margin:0;font-size:17px;line-height:1.5}
.ti-hint{display:block;margin-top:10px;font-size:12px;color:#7A6FA0;text-align:right;animation:qsDot 1.4s infinite}
.ti-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ti-acts .btn.ghost{background:#F1ECFA;color:#2B2648;border-color:#DDD3EE}
.tour-skip{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));z-index:3;padding:9px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.35);background:rgba(20,14,40,.6);color:#fff;font:800 13px/1 var(--f-display);cursor:pointer}
.tour.steps{pointer-events:auto}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(10,6,25,.74);border:3px solid #F2B632;transition:all .35s cubic-bezier(.3,1.2,.5,1);pointer-events:none}
.tour-card{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;background:var(--surface);border:2px solid var(--ginger);border-radius:22px;padding:12px 14px;box-shadow:0 12px 30px rgba(0,0,0,.45);animation:tiPop .3s cubic-bezier(.3,1.6,.5,1)}
.tour-card.top{bottom:auto;top:calc(64px + env(safe-area-inset-top,0px))}
.tc-cat{flex:none;width:72px}
.tc-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.tc-body h3{margin:0;font-size:20px}
.tc-body p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink)}
.tc-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
@media (max-width:520px){.tc-cat{width:56px}.tc-body p{font-size:13.5px}.tc-body h3{font-size:18px}}
/* XP pass (Play tab) */
.pass{padding:0;overflow:hidden}
.pass-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;width:100%;padding:14px 16px;cursor:pointer}
.pass-head:focus-visible{outline:3px solid var(--ginger);outline-offset:-3px;border-radius:inherit}
.pass-lvl{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--ginger);color:#fff;line-height:1;box-shadow:0 3px 0 color-mix(in srgb,var(--ginger) 60%,#000)}
.pass-lvl small{font-size:10px;font-weight:800;letter-spacing:.08em;opacity:.85}.pass-lvl b{font-family:var(--f-display);font-size:24px}
.pass-mid{display:grid;gap:6px;min-width:0}
.pass-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.pass-top b{font-family:var(--f-display);font-size:17px}
.pass .bar{height:10px;border-radius:99px;background:var(--sunk);overflow:hidden}.pass .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ginger),color-mix(in srgb,var(--ginger) 60%,#F2C230))}
.pass-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pass-xp-m{display:none}.pass-top b,.pass-xp{white-space:nowrap}
.pass-next{width:52px;height:52px;border-radius:14px;border:1.5px dashed var(--rar);background:color-mix(in srgb,var(--rar) 10%,transparent);display:grid;place-items:center}
.pass-next svg{width:44px;height:44px}
.pass-chev svg{width:22px;height:22px;transition:transform .2s;color:var(--muted,currentColor)}.pass.open .pass-chev svg{transform:rotate(180deg)}
.pass-list{max-height:min(62vh,560px);overflow-y:auto;border-top:1.5px solid var(--line);padding:6px 16px 16px;overscroll-behavior:contain}
.pass-sum{margin:0;padding:10px 16px 4px;border-top:1.5px solid var(--line)}.pass-list{border-top:0!important}
.pass-list ol{list-style:none;margin:0;padding:0}
.pl{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;position:relative;padding-bottom:14px}
.pl::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:3px;border-radius:2px;background:var(--line)}
.pl.done::before{background:var(--ginger)}.pl:last-child::before{display:none}
.pl-node{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--sunk);color:var(--muted,inherit);border:2px solid var(--line);position:relative;z-index:1}
.pl.done .pl-node{background:var(--ginger);border-color:var(--ginger);color:#fff}.pl-node svg{width:18px;height:18px}
.pl.cur .pl-node{background:var(--surface);border-color:var(--ginger);color:var(--ginger);box-shadow:0 0 0 4px color-mix(in srgb,var(--ginger) 22%,transparent)}
.pl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:34px}
.pl-meta b{font-family:var(--f-display);font-size:16px}.pl-buy{margin-left:auto}.pl-buy svg{width:14px;height:14px;vertical-align:-2px}
.pl-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:6px}
.pl-it{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-rows:auto auto auto;gap:2px;padding:8px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--rar) 45%,var(--line));background:color-mix(in srgb,var(--rar) 8%,var(--surface));position:relative}
.pl-it:hover{border-color:var(--rar)}.pl-it:focus-visible{outline:3px solid var(--rar);outline-offset:2px}
.pl.lock .pl-art{filter:grayscale(.55) opacity(.75)}
.pl-art{display:grid;place-items:center;height:58px}.pl-art svg{width:100%;height:58px}
.pl-name{font-weight:700;font-size:12.5px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pl-rar{font-size:11px;font-weight:700;color:var(--rar)}
.pl-it.own::after{content:"✓";position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--good);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
@media (max-width:520px){.pass-head{gap:10px;padding:12px}.pass-lvl{width:46px;height:46px;border-radius:14px}.pass-lvl b{font-size:20px}.pass-next{width:44px;height:44px}.pass-next svg{width:36px;height:36px}.pass-top b{font-size:16px}.pass-xp{display:none}.pass-xp-m{display:inline}.pass-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}.pass-list{padding:4px 12px 14px}.pl-items{grid-template-columns:repeat(2,minmax(0,1fr))}.pl{grid-template-columns:30px minmax(0,1fr);gap:10px}.pl-node{width:30px;height:30px}.pl::before{left:14px;top:30px}}
@media (min-width:721px){
  .pass-list{max-height:none;overflow-x:auto;overflow-y:hidden;margin:0 20px;padding:8px 0 18px;scroll-snap-type:x mandatory}
  .pass-list ol{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 5);gap:12px}
  .pl{grid-template-columns:none;grid-template-rows:auto auto 1fr;width:auto;min-width:0;padding:0;gap:8px;scroll-snap-align:start}
  .pl::before{left:34px;right:-12px;top:16px;bottom:auto;width:auto;height:3px}.pl:last-child::before{display:none}
  .pl-meta{flex-direction:column;align-items:flex-start;gap:2px;min-height:0}
  .pl-buy{margin-left:0;margin-top:4px}
  .pl-items{grid-template-columns:1fr;margin-top:2px}
  .pl.cur .pl-body{background:color-mix(in srgb,var(--ginger) 7%,transparent);border-radius:14px;padding:6px}.pl-meta .small{white-space:nowrap;font-size:12px}
}
.pass-list{scrollbar-width:none}.pass-list::-webkit-scrollbar{display:none}
@media (min-width:721px) and (max-width:900px){.pass-list ol{grid-auto-columns:calc((100% - 36px) / 4)}}
/* training quiz with several robocats */
.qi-row.multi{grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr)}
.qi-many{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:6px;align-content:center;animation:qiR .6s cubic-bezier(.2,1.2,.4,1) both}
.qi-mini{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:16px;border:2px solid var(--line);background:color-mix(in srgb,var(--plum) 10%,var(--surface));text-align:center;min-width:0}
.qi-mini-cat{width:52px}.qi-mini-cat svg{width:100%;height:auto}
.qi-mini b{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qi-mini .qi-rank{font-size:10.5px}
.qb-players.many{flex-wrap:wrap;gap:4px 8px}.qb-players.many .qb-p b{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-opts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:520px){.qi-row.multi{grid-template-columns:1fr;justify-items:center}.qi-row.multi .qi-vs{margin:2px 0}.qi-many{width:100%;grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}}
/* public profile card */
.pp-modal{position:relative;padding-top:18px}
.pp-x{position:absolute;top:10px;right:10px;z-index:2}
.pp2{gap:12px}
.pp-hero{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:22px;
  background:radial-gradient(120% 90% at 20% 30%,color-mix(in srgb,var(--rc,var(--plum)) 26%,transparent),transparent 70%),color-mix(in srgb,var(--plum) 8%,var(--surface));border:1.5px solid color-mix(in srgb,var(--rc,var(--plum)) 30%,var(--line))}
.pp-cat{position:relative;padding:4px 4px 0}
.pp-cat::after{content:"";position:absolute;left:16%;right:16%;bottom:2px;height:10px;border-radius:50%;background:#000;opacity:.18;filter:blur(3px);z-index:-1}
.pp-cat svg{width:100%;height:auto;display:block}
.pp-info{display:flex;flex-direction:column;gap:6px;min-width:0}

.pp-name{margin:0;font-size:24px;line-height:1.1;display:flex;align-items:center;gap:8px;min-width:0}
.pp-nick{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-titles:empty{display:none}.pp-titles{display:flex;flex-wrap:wrap;gap:4px}
.pp-seen{margin:0}
.pp-chips{display:flex;flex-wrap:wrap;gap:5px}
.pp-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 9px 3px 7px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.pp-chip svg{width:14px;height:14px;flex:none}.pp-chip .plat{display:inline-flex}.pp-chip b{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
.pp-chip.clan{padding-left:4px}.pp-chip.bot{color:var(--plum)}
.pp-rank{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:14px;background:color-mix(in srgb,var(--rc,var(--plum)) 12%,var(--surface));border:1.5px solid color-mix(in srgb,var(--rc,var(--plum)) 40%,transparent)}
.pp-rank b{display:block;font-family:var(--f-display);font-size:16px;color:var(--rc);line-height:1.1}
.pp-rank small{display:block;font-size:11.5px;color:var(--muted)}
.pp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
.pp-stat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px 8px;border-radius:14px;background:var(--sunk);border:1.5px solid var(--line);min-width:0}
.pp-stat b{font-family:var(--f-display);font-size:20px;line-height:1.1}
.pp-stat span{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center}
.pp-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;text-align:center}.pp-foot b{color:var(--ink)}
@media (max-width:520px){.pp-hero{grid-template-columns:104px minmax(0,1fr);gap:10px;padding:10px}.pp-name{font-size:20px}.pp-stat b{font-size:17px}.pp-stat span{font-size:9.5px}}
.clan-logo summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.clan-logo summary::-webkit-details-marker{display:none}
.clan-logo summary>span:last-child{display:flex;flex-direction:column}
.clan-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center;padding:0 8px 8px 52px}.clan-acts .linkbtn{margin:0}.linkbtn[data-clandisband]{color:var(--bad)}
.tag.crown{background:color-mix(in srgb,#D99A00 22%,transparent);color:#B07A0A}.tag.gen{background:color-mix(in srgb,var(--plum) 18%,transparent);color:var(--plum)}
/* crowning ceremony */
.crown-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;border:1.5px solid color-mix(in srgb,#D99A00 45%,var(--line));background:color-mix(in srgb,#F2C230 14%,var(--surface));color:#C98A12;cursor:pointer}
.crown-btn svg{width:17px;height:17px}.crown-btn:hover{background:#F2C230;color:#fff;transform:translateY(-1px)}
.crown-sheet{gap:10px}
.coron{position:relative;width:300px;max-width:100%;height:210px;margin:6px auto 0;overflow:hidden;border-radius:22px;background:radial-gradient(100% 80% at 50% 100%,color-mix(in srgb,#F2C230 22%,transparent),transparent 70%),color-mix(in srgb,var(--plum) 10%,var(--surface))}
.cr-glow{position:absolute;left:50%;bottom:-40px;width:260px;height:120px;transform:translateX(-50%);border-radius:50%;background:#F2C230;opacity:.18;filter:blur(18px)}
.cr-cat{position:absolute;bottom:8px;width:108px;display:flex;flex-direction:column;align-items:center}
.cr-cat svg{width:108px;height:auto;display:block}.cr-cat b{font-size:11px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-4px}
.cr-a{left:24px}.cr-b{right:24px}
.coron.play .cr-a{animation:crA 3.4s cubic-bezier(.3,.9,.4,1) both}.coron.play .cr-b{animation:crB 3.4s cubic-bezier(.3,.9,.4,1) both}
@keyframes crA{0%{transform:none}22%{transform:translateX(30px) rotate(8deg)}30%{transform:translateX(24px) rotate(-3deg)}42%,100%{transform:none}}
@keyframes crB{0%{transform:none}22%{transform:translateX(-30px) rotate(-8deg)}30%{transform:translateX(-24px) rotate(3deg)}42%{transform:none}86%{transform:translateY(0)}90%{transform:translateY(-10px) scale(1.04)}96%,100%{transform:none}}
.cr-five{position:absolute;left:50%;top:100px;width:70px;margin-left:-35px;text-align:center;opacity:0;pointer-events:none}
.cr-five svg{width:44px;height:44px}.cr-five span{display:block;font:800 13px/1 var(--f-display);color:#C98A12;letter-spacing:.06em}
.coron.play .cr-five{animation:crFive 3.4s ease both}
@keyframes crFive{0%,18%{opacity:0;transform:scale(.3)}24%{opacity:1;transform:scale(1.15) rotate(10deg)}36%{opacity:1;transform:scale(1)}44%,100%{opacity:0;transform:scale(.6)}}
.cr-crown{position:absolute;width:46px;left:78px;top:30px;margin-left:-23px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.cr-crown svg{width:46px;height:auto;display:block}
.coron.play .cr-crown{animation:crCrown 3.4s cubic-bezier(.45,.05,.3,1) both}
@keyframes crCrown{0%,44%{transform:translate(0,0) rotate(-8deg)}52%{transform:translate(14px,-16px) rotate(6deg)}66%{transform:translate(72px,-28px) rotate(-10deg)}80%{transform:translate(132px,-8px) rotate(8deg)}86%{transform:translate(144px,0) rotate(0)}90%{transform:translate(144px,-6px) scale(1.12)}100%{transform:translate(144px,0)}}
.cr-sp{position:absolute;width:8px;height:8px;border-radius:50%;background:#FFE27A;opacity:0;box-shadow:0 0 8px #F2C230}
.cr-sp.s1{left:186px;top:30px}.cr-sp.s2{left:252px;top:40px}.cr-sp.s3{left:196px;top:62px}.cr-sp.s4{left:240px;top:18px}
.coron.play .cr-sp{animation:crSp 3.4s ease both}.coron.play .cr-sp.s2{animation-delay:.08s}.coron.play .cr-sp.s3{animation-delay:.16s}.coron.play .cr-sp.s4{animation-delay:.22s}
@keyframes crSp{0%,84%{opacity:0;transform:scale(.2)}90%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.4) translateY(-14px)}}
@media (prefers-reduced-motion: reduce){.coron.play *{animation:none!important}.coron .cr-crown{transform:translate(144px,0)}}
/* Kłębki result: everything on one screen */
.gr2{display:grid;gap:12px;align-items:center}
.gr2 .gr-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.gr2 .gr-head{padding-top:0}.gr2 .gr-head h1{font-size:40px}
.gr2 .game-end{padding:12px 10px;margin:0}.gr2 .game-end h2{font-size:22px!important;margin:2px 0 0}
.gr2{grid-template-areas:"head" "scene" "rest"}.gr2 .gr-head{grid-area:head}.gr2 .gr-left{grid-area:scene;min-width:0}.gr2 .gr-right{grid-area:rest}
.gr2 .game-end .emote-scene{width:min(26vh,220px);margin:0 auto}
.gr2 .mmr-res{padding:10px 14px;gap:6px;margin:0}.gr2 .mmr-res .mr-txt>b{font-size:18px}
@media (min-width:721px){.gr2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"scene head" "scene rest";column-gap:16px;row-gap:12px;align-items:stretch;align-content:center;max-width:900px;margin:0 auto;min-height:calc(100svh - 150px);min-height:0;padding-top:max(0px,calc((100svh - 620px) / 2))}
  .gr2 .gr-left{display:flex}.gr2 .gr-left .game-end{flex:1;display:flex;flex-direction:column;justify-content:center}
  .gr2 .gr-head{align-self:start;text-align:left;align-items:flex-start}.gr2 .gr-head h1{line-height:1}
  .gr2 .gr-right{justify-content:flex-start;gap:12px}.gr2 .gr-head{text-align:left;align-items:flex-start}.gr2 .gr-chips{justify-content:flex-start}}
@media (max-width:720px){.gr2{gap:8px}.gr2 .gr-head h1{font-size:32px}.gr2 .game-end .emote-scene{width:min(15vh,112px)}.gr2 .game-end{padding:8px}.gr2 .mmr-res{padding:8px 12px}.gr2 .mmr-res svg.rank,.gr2 .mmr-res .mr-top>svg{width:38px;height:38px}.gr2 .game-end h2{font-size:18px!important}.gr2 .game-end .ge-one .small{display:none}.gr2 .gr-chip{padding:6px 10px}.gr2 .gr-actions{gap:8px}}
.gr2 .gr-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gr2 .gr-chips.one{grid-template-columns:1fr}
.gr2 .gr-chip{justify-content:center;border-radius:16px;padding:10px 12px;background:var(--surface);transition:transform .15s}
.gr2 .gr-chip b{font-size:22px;min-width:2.2ch;text-align:right;font-variant-numeric:tabular-nums}
.gr2 .mr-d{font-variant-numeric:tabular-nums}
.gr2 .gr-row{gap:10px}.gr2 .gr-actions .btn{width:100%}
.cnt-on{transform:scale(1.06);box-shadow:0 0 0 3px color-mix(in srgb,var(--ginger) 35%,transparent)}
.cnt-done{animation:cntPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes cntPop{40%{transform:scale(1.1)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.cnt-on,.cnt-done{transform:none;animation:none}}
/* in-game top buttons (exit, friends, settings): plain icons, no frames */
.game-top .topline .gear,.game-top .topline button[data-friends-open]{border:0!important;background:transparent!important;box-shadow:none!important}
.game-top .topline .gear:hover,.game-top .topline button[data-friends-open]:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)!important}
.lb-btn{border:0!important;box-shadow:none!important}
.g-ctrl .lb-btn{background:transparent!important}.g-ctrl .lb-btn:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)!important}
/* my status in the friends dropdown */
.pres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:2px 0 8px}
.pres-opt{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.pres-opt span:last-child{display:flex;flex-direction:column;min-width:0}.pres-opt b{font-size:12.5px;line-height:1.15}.pres-opt small{font-size:10.5px;color:var(--muted);line-height:1.2}
.pres-opt[aria-checked="true"]{border-color:var(--plum);background:color-mix(in srgb,var(--plum) 10%,var(--surface))}
.pres-dot{flex:none;width:13px;height:13px;border-radius:50%;background:#2FBF71}
.pres-opt.dnd .pres-dot{position:relative;background:#E2445C}.pres-opt.dnd .pres-dot::after{content:"";position:absolute;left:22%;right:22%;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:#fff}
.pres-opt.invisible .pres-dot{background:transparent;border:2.5px solid #8D93A3}
.dnd-t{color:#E2445C}.pp-seen.dnd{color:#E2445C}
@media (max-width:420px){.pres-opt small{display:none}.pres-opt{padding:7px 6px;gap:5px}.pres-opt b{font-size:11px}.pres-dot{width:12px;height:12px}}
/* clan member icons + kick scene */
.clan-ic{display:inline-flex;gap:6px;vertical-align:middle}.lbrow .lbend:has(.clan-ic){display:flex;flex-direction:row;align-items:center;gap:10px}
.kick-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--bad) 40%,var(--line));background:color-mix(in srgb,var(--bad) 10%,var(--surface));color:var(--bad);cursor:pointer}
.kick-btn svg{width:15px;height:15px}.kick-btn:hover{background:var(--bad);color:#fff;transform:translateY(-1px)}
.coron.kick{background:radial-gradient(100% 80% at 50% 100%,color-mix(in srgb,#E2445C 18%,transparent),transparent 70%),color-mix(in srgb,var(--plum) 10%,var(--surface))}
.kk-door{position:absolute;right:16px;bottom:10px;width:58px;height:120px;border-radius:6px 6px 0 0;background:#6B4A35;padding:5px 5px 0;box-sizing:border-box}
.kk-dark{display:block;width:100%;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#120E1C,#2A2140)}
.kk-leaf{position:absolute;left:5px;top:5px;width:48px;bottom:0;background:#A97A52;border-radius:3px 3px 0 0;transform-origin:left center;transform:perspective(200px) rotateY(-70deg);box-shadow:inset -4px 0 0 rgba(0,0,0,.12)}
.kk-leaf::after{content:"";position:absolute;right:6px;top:55%;width:5px;height:5px;border-radius:50%;background:#F2C230}
.kk-sign{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font:800 9px/1 var(--f-display);letter-spacing:.1em;color:#fff;background:#2F8F55;padding:3px 5px;border-radius:4px}
.kk-admin{left:8px;width:104px}.kk-admin svg.cat{width:104px}
.kk-over{position:absolute;left:0;top:0;width:104px;height:130px;overflow:visible;pointer-events:none}
.kk-out{left:120px;width:84px}.kk-out svg.cat{width:84px}
.kk-bubble{position:absolute;left:78px;top:16px;padding:5px 9px;border-radius:12px;background:#fff;color:#C2203A;font:800 13px/1 var(--f-display);box-shadow:0 2px 6px rgba(0,0,0,.18);opacity:0}
.kk-bubble::after{content:"";position:absolute;left:12px;bottom:-6px;border:6px solid transparent;border-top-color:#fff;border-bottom:0}
.coron.kick.play .kk-arm{animation:kkArm .5s ease-in-out 5 alternate;transform-origin:84px 104px}
.coron.kick.play .kk-vein{animation:kkVein .45s ease-in-out infinite alternate;transform-origin:99px 20px}
.coron.kick.play .kk-admin{animation:kkShake 3.6s ease both}
.coron.kick.play .kk-bubble{animation:kkBub 3.6s ease both}
.coron.kick.play .kk-out{animation:kkOut 3.6s cubic-bezier(.45,.05,.4,1) both}
.coron.kick.play .kk-leaf{animation:kkLeaf 3.6s ease both}
@keyframes kkArm{to{transform:rotate(-7deg)}}
@keyframes kkVein{to{transform:scale(1.25)}}
@keyframes kkShake{0%,4%{transform:none}6%{transform:translateX(-3px)}8%{transform:translateX(3px)}10%{transform:translateX(-2px)}12%,100%{transform:none}}
@keyframes kkBub{0%,6%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.1)}18%,70%{opacity:1;transform:none}80%,100%{opacity:0}}
@keyframes kkOut{0%,22%{transform:none;opacity:1}30%{transform:translateX(8px) rotate(4deg)}38%{transform:translateX(26px) translateY(-3px)}46%{transform:translateX(44px)}54%{transform:translateX(62px) translateY(-3px)}62%{transform:translateX(80px)}70%{transform:translateX(98px) scale(.86);opacity:1}80%{transform:translateX(112px) scale(.72);opacity:0}100%{transform:translateX(112px) scale(.72);opacity:0}}
@keyframes kkLeaf{0%,80%{transform:perspective(200px) rotateY(-70deg)}92%,100%{transform:perspective(200px) rotateY(0)}}
@media (prefers-reduced-motion: reduce){.coron.kick.play *{animation:none!important}}
.crown-btn.on{background:#F2C230;color:#fff;border-color:#C98A12}
.gen-one{position:relative;width:120px;margin:8px auto 0}.gen-one svg.cat{width:120px;filter:grayscale(.15)}
.gen-badge{position:absolute;left:50%;top:-6px;width:46px;transform:translateX(-50%) rotate(-8deg);opacity:.85}.gen-badge svg{width:46px}
/* friend icon in the player card */
.pp-fr{position:relative;width:32px;height:32px;border-radius:12px;display:grid;place-items:center;border:0;cursor:pointer;background:color-mix(in srgb,var(--plum) 14%,var(--surface));color:var(--plum);transition:transform .15s,background .15s}
.pp-fr svg{width:19px;height:19px}.pp-fr:hover:not([disabled]){transform:translateY(-1px);background:color-mix(in srgb,var(--plum) 24%,var(--surface))}
.pp-fr.pending{color:#D99A00;background:color-mix(in srgb,#F2C230 18%,var(--surface))}
.pp-fr.incoming{color:var(--good);background:color-mix(in srgb,var(--good) 16%,var(--surface));animation:frPulse 1.6s ease-in-out infinite}
.pp-fr.friends{color:var(--good);background:color-mix(in srgb,var(--good) 16%,var(--surface));cursor:default}
.pp-fr.pop{animation:frPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes frPop{40%{transform:scale(1.25)}100%{transform:none}}
@keyframes frPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 25%,transparent)}}

.pp-toprow{display:flex;align-items:center;gap:8px;min-height:32px;margin-top:-4px}.pp-toprow .eyebrow{flex:1;min-width:0;margin:0!important}.pp-acts{display:flex;align-items:center;gap:4px;flex:none}.pp-modal .pp-x{position:static;width:32px;height:32px}
.pp-seen{display:flex;align-items:center;gap:6px}.pp-seen .plat{display:inline-flex;color:var(--muted)}.pp-seen .plat svg{width:15px;height:15px}.pp-chips:empty{display:none}
.pp-hero .pp-rank{background:none;border:0;padding:0;border-radius:0}
.pp-catname{display:block;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-hero .pp-rank1{display:flex;flex-direction:row;align-items:center;gap:7px}.pp-rank1 b{font-size:16px;line-height:1.15;white-space:normal;overflow:visible;min-width:0}.pp-rank1>svg{width:22px;height:22px;flex:none}.pp-rank-mmr{margin-left:auto;padding-left:6px;flex:none;font-weight:800;font-size:15px;color:var(--muted)}
@media (max-width:520px){.pp-rank1{gap:5px!important}.pp-rank1 b{font-size:13.5px}.pp-rank1>svg{width:18px;height:18px}.pp-rank-mmr{font-size:12px}.pp-rank-mmr svg{width:14px;height:14px}}
/* friend row menu */
.frow-main[aria-expanded="true"]{background:var(--sunk)}
.fr-menu{display:flex;flex-direction:column;gap:2px;margin:-2px 0 6px 44px;padding:4px;border-radius:12px;background:var(--sunk);border:1px solid var(--line);animation:frMenu .16s ease-out}
.fr-menu button{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:9px;background:none;color:inherit;font:inherit;font-weight:700;font-size:14px;text-align:left;cursor:pointer}
.fr-menu button:hover{background:var(--surface)}.fr-menu button svg{width:17px;height:17px;flex:none;color:var(--plum)}
.fr-menu button.del{color:var(--bad)}.fr-menu button.del svg{color:var(--bad)}
@keyframes frMenu{from{opacity:0;transform:translateY(-4px)}}
/* goodbye scene */
.coron.unfr{background:radial-gradient(100% 80% at 50% 100%,color-mix(in srgb,#8CC8F0 22%,transparent),transparent 70%),color-mix(in srgb,var(--plum) 10%,var(--surface))}
.uf-a{left:20px;width:100px}.uf-b{right:20px;width:100px}.uf-a svg.cat,.uf-b svg.cat{width:100px}
.uf-wave{position:absolute;left:0;top:0;width:100px;height:125px;overflow:visible;pointer-events:none}
.uf-wave.r{transform:scaleX(-1)}
.coron.unfr.play .uf-arm{animation:ufWave .45s ease-in-out infinite alternate;transform-origin:86px 104px}
@keyframes ufWave{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.coron.unfr.play .uf-a{animation:ufA 3.2s ease-in-out both}.coron.unfr.play .uf-b{animation:ufB 3.2s ease-in-out both}
@keyframes ufA{0%{transform:translateX(34px)}60%,100%{transform:translateX(0)}}
@keyframes ufB{0%{transform:translateX(-34px)}60%,100%{transform:translateX(0)}}
.uf-heart{position:absolute;left:50%;top:44px;width:54px;margin-left:-27px}.uf-heart svg{width:54px;overflow:visible}
.coron.unfr.play .uf-heart .h1{animation:ufH1 3.2s ease both;transform-origin:24px 42px}
.coron.unfr.play .uf-heart .h2{animation:ufH2 3.2s ease both;transform-origin:24px 42px}
@keyframes ufH1{0%,30%{transform:none}55%,100%{transform:translate(-7px,5px) rotate(-16deg)}}
@keyframes ufH2{0%,30%{transform:none}55%,100%{transform:translate(7px,5px) rotate(16deg)}}
.uf-tear{position:absolute;width:6px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#8CC8F0;opacity:0}
.uf-tear.t1{left:62px;top:96px}.uf-tear.t2{right:62px;top:96px}
.coron.unfr.play .uf-tear{animation:ufTear 1.4s ease-in 1s infinite}
@keyframes ufTear{0%{opacity:0;transform:none}20%{opacity:1}100%{opacity:0;transform:translateY(26px)}}
@media (prefers-reduced-motion: reduce){.coron.unfr.play *{animation:none!important}}
/* clan: my clan / all clans */
.cl-switch{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--sunk)}
.cl-switch button{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-weight:800;font-size:14.5px;padding:9px 6px;border-radius:10px;cursor:pointer}
.cl-switch button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.clan-main.has-pos{grid-template-columns:22px 44px minmax(0,1fr);gap:10px}.cl-pos{text-align:center;font-weight:800;color:var(--muted)}
.tag.mine{background:var(--plum-soft);color:var(--plum)}
.cpeek{gap:12px}.cp-head{display:flex;gap:14px;align-items:center}.cp-head h2{font-size:24px;margin:0;line-height:1.15}
.cp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:42vh;overflow:auto}
.cp-m{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:6px;border-radius:10px;cursor:pointer}
.cp-m:hover{background:var(--sunk)}.cp-m b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-i{width:18px;color:var(--muted);font-weight:800;text-align:center;flex:none}
.cp-role{font-size:13px}.cp-xp{margin-left:auto;flex:none}
.profile-top .pstats .pstat{border:0;background:none;padding:4px 0;border-radius:10px}
.profile-top .pstats button.pstat:hover{background:var(--sunk)}
.cprog{display:flex;align-items:center;gap:10px;margin-top:14px}.cprog-bar{flex:1;height:12px;border-radius:99px;background:var(--sunk);overflow:hidden}
.cprog-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ginger),#F7B077)}
.cprog b{font-size:16px;min-width:44px;text-align:right}.cprog-sub{display:block;margin-top:4px}
.pp-seen .plat{color:#8E89A8}.pp-seen.on .plat{color:var(--good)}.pp-seen.dnd .plat{color:#E2445C}
.navbtn{position:relative}.nav-new{position:absolute;top:3px;left:calc(50% + 7px);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE89A,#F2B632 55%,#C98204);box-shadow:0 0 0 2px var(--surface),0 0 8px rgba(242,182,50,.7);animation:navNew 1.8s ease-in-out infinite}
@keyframes navNew{50%{box-shadow:0 0 0 2px var(--surface),0 0 14px rgba(242,182,50,.95)}}
.sc-new{position:absolute;top:8px;right:8px;z-index:2;padding:2px 7px;border-radius:99px;background:linear-gradient(180deg,#FFE08A,#F2B632);color:#3A2600;font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
@media (prefers-reduced-motion: reduce){.nav-new{animation:none}}
.sc-off ~ .sc-new{top:34px}
/* full screen prompt */
#fsAsk{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px;background:rgba(10,8,22,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fsIn .25s ease-out}
#fsAsk .fs-card{width:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px 20px 16px;border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#fsAsk .fs-ic{width:64px;height:64px;color:var(--ginger);animation:fsPulse 1.6s ease-in-out infinite}
#fsAsk h2{margin:2px 0 0;font:800 24px/1.15 var(--f-display)}
#fsAsk p{margin:0;color:var(--muted);font-size:15px;line-height:1.45}
#fsAsk .fs-steps{margin:2px 0 4px;padding:0 0 0 20px;text-align:left;font-size:15px;line-height:1.6;align-self:stretch}
#fsAsk .fs-steps svg{width:18px;height:18px;vertical-align:-3px;color:#2F8CFF}
#fsAsk button{width:100%;border:0;border-radius:14px;font:800 17px var(--f-display);cursor:pointer;padding:14px}
#fsAsk .fs-yes{margin-top:6px;background:var(--ginger);color:#fff;box-shadow:0 4px 0 var(--ginger-deep)}
#fsAsk .fs-yes:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ginger-deep)}
#fsAsk .fs-no{background:none;color:var(--muted);font-size:15px;padding:10px}
@keyframes fsIn{from{opacity:0}}@keyframes fsPulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){#fsAsk,#fsAsk .fs-ic{animation:none}}
/* ranking: country dropdown */
.lbc{position:relative;align-self:flex-start;z-index:4}
.lbc-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--sunk);color:var(--ink);font:inherit;font-weight:800;font-size:14.5px;padding:8px 12px 8px 10px;border-radius:999px;cursor:pointer}
.lbc-btn .chev{width:16px;height:16px;color:var(--muted);transition:transform .15s}.lbc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.globe-ic{width:20px;height:20px;flex:none}
.lbc-pop{position:absolute;top:calc(100% + 6px);left:0;width:min(280px,calc(100vw - 32px));max-height:min(380px,60vh);overflow:auto;background:var(--surface);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px var(--line);padding:6px;animation:frMenu .14s ease-out}
.lbc-pop ul{list-style:none;margin:0;padding:0}
.lbc-pop button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:inherit;font:inherit;font-weight:700;font-size:14.5px;padding:8px 10px;border-radius:10px;text-align:left;cursor:pointer}
.lbc-pop button:hover{background:var(--sunk)}.lbc-pop button[aria-selected="true"]{background:var(--plum-soft);color:var(--plum)}
.lbc-pop button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lbc-pop small{color:var(--muted);font-weight:700}
.lbc-sep{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
/* quiz: intro / ban strip / final — frameless */
.qi-card{border:0!important;background:none!important;box-shadow:none!important;padding:6px 4px!important}
.qi-mini{border:0!important;background:none!important;padding:2px!important;gap:4px}
.qi-mini-cat{width:58px;height:58px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--plum) 18%,var(--surface));display:block}
.qi-mini-cat svg{width:130%!important;margin:-2px 0 0 -15%}
.qi-mini b{font-size:12.5px}
.qb-head{gap:12px;align-items:center}
.qb-players{gap:10px;justify-content:center}
.qb-p{flex:0 1 auto!important;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
.qb-p .ava-wrap,.qb-p .ava{width:44px!important;height:44px!important}
.qb-p .ava{border-radius:50%;background:color-mix(in srgb,var(--plum) 18%,var(--surface));box-shadow:0 0 0 2px transparent;transition:box-shadow .2s,transform .2s}
.qb-p .ava svg{width:130%!important;margin:-2px 0 0 -15%}
.qb-p small{font-size:11px}
.qb-p.on .ava{box-shadow:0 0 0 3px var(--bad),0 0 14px color-mix(in srgb,var(--bad) 55%,transparent);transform:scale(1.06)}
.qb-p.on b{color:var(--bad)}
.qb-players.many{flex-wrap:nowrap!important;gap:6px!important;justify-content:space-between;min-width:0}
.qb-players.many .qb-p{flex:1 1 0!important;flex-direction:column;gap:3px;min-width:0}
.qb-players.many .qb-p b{display:none}
.qb-players.many .qb-p .ava-wrap,.qb-players.many .qb-p .ava{width:min(100%,44px)!important;height:auto!important;aspect-ratio:1}
.qb-timer{flex:none}
.fh-card{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ginger) 18%,transparent),transparent 65%)!important;border:0!important}
.fh-next{align-self:center;width:min(340px,100%)!important}
.fin{gap:16px!important}
.fin .fs-head h2{font-size:34px}.fin-of{color:var(--muted);font-size:.7em}
.fin-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.fin-stat{display:flex;flex-direction:column;align-items:center;min-width:52px}
.fin-stat b{font-size:20px;line-height:1.1}.fin-stat small{font-size:11.5px;font-weight:700;color:var(--muted)}
.fin-stat.up b{color:var(--good)}.fin-stat.down b{color:var(--bad)}
.fin-note{margin:6px 0 0;text-align:center}
.fin-pod{padding:4px 6px 0;gap:10px}
.fin-pod .pod-cat{width:min(100%,92px)}
.fin-pod .pod b{font-size:14.5px}
.fin-pod .step{border-radius:14px 14px 4px 4px;color:#fff!important;text-shadow:0 2px 0 rgba(0,0,0,.25);font-size:28px}
.fin-pod .p1 .step{background:linear-gradient(180deg,#F7C948,#C98204)!important;box-shadow:0 0 24px rgba(242,182,50,.35)}
.fin-pod .p2 .step{background:linear-gradient(180deg,#C9CEDA,#7F8794)!important}
.fin-pod .p3 .step{background:linear-gradient(180deg,#E09A5C,#9A5524)!important}
.fin-list .lb{margin:0}
.fin-acts{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.fin-acts .btn{min-width:150px}
@media (min-width:900px){.stack.fin{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 28px!important;align-items:end}
.fin>.fs-head,.fin>.fin-acts,.fin>.mmr-res{grid-column:1/-1}.fin-list{align-self:end}.fin-list .lbrow{padding:4px 8px}}
/* game result: frameless scene, rank and rewards */
.gr2 .game-end{background:radial-gradient(60% 55% at 50% 52%,color-mix(in srgb,var(--ginger) 16%,transparent),transparent 72%)!important;border:0!important;box-shadow:none!important}
.mmr-res{background:none!important;border:0!important;box-shadow:none!important;padding:4px 0!important}
.mmr-res .mr-top>svg,.mmr-res svg.rank{width:52px;height:52px;flex:none}
.mmr-res .bar{height:8px}
.gr2 .gr-chips{gap:8px 18px}
.gr2 .gr-chip{border:0!important;background:none!important;padding:2px 0!important;justify-content:flex-start;gap:8px}
.gr2 .gr-chip svg{width:24px;height:24px}
.gr2 .gr-chip b{font-size:26px;min-width:0;text-align:left}
@media (max-width:720px){.gr2 .gr-chip{justify-content:center}.mmr-res .mr-top>svg,.mmr-res svg.rank{width:40px;height:40px}}
.mmr-res .mr-top>:first-child,.mmr-res .mr-top>:first-child svg{width:56px!important;height:56px!important;flex:none}
@media (max-width:720px){.mmr-res .mr-top>:first-child,.mmr-res .mr-top>:first-child svg{width:44px!important;height:44px!important}}
/* gifts */
.gift-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}.gift-ic{width:22px;height:22px;flex:none}
.gift-sheet{gap:12px}.gift-sheet h2{margin:0;font-size:22px;text-align:center}
.gift-item{display:flex;gap:14px;align-items:center}.gift-item h2{text-align:left!important;font-size:22px}
.gi-art{width:84px;height:84px;flex:none;border-radius:18px;background:var(--sunk);display:grid;place-items:center;overflow:hidden}.gi-art svg{width:100%;height:100%}
.gf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow:auto}
.gf-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:8px;border-radius:12px;cursor:pointer}
.gf-row:hover:not(:disabled){background:var(--sunk)}.gf-row:disabled{cursor:default;opacity:.55}
.gf-n{flex:1;min-width:0;display:flex;flex-direction:column}.gf-n b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gf-n small{color:var(--muted);font-size:12.5px}
.gf-go .gift-ic{width:26px;height:26px}.gf-lock{font-size:16px}
.gift-scene{position:relative;height:150px;display:flex;align-items:center;justify-content:center;gap:28px}
.gbox{width:120px;height:120px}.gbox svg{width:100%;height:100%;overflow:visible}
.gbox.bob{animation:gbBob 1.6s ease-in-out infinite}
@keyframes gbBob{50%{transform:translateY(-6px) rotate(-3deg)}}
.gift-to{animation:gbBob 2s ease-in-out .4s infinite}
.gift-scene.sent .gbox.fly{animation:gbFly 1.4s cubic-bezier(.5,0,.3,1) forwards}
@keyframes gbFly{0%{transform:none}40%{transform:translate(20px,-30px) rotate(-8deg)}100%{transform:translate(110px,-6px) scale(.35);opacity:0}}
.gift-scene.sent .gift-to{animation:gbJoy .5s ease 1.2s 2}
@keyframes gbJoy{50%{transform:translateY(-12px)}}
.gift-scene.open .gb-lid{animation:gbLid .7s cubic-bezier(.3,1.4,.5,1) .5s forwards;transform-origin:60px 47px}
@keyframes gbLid{to{transform:translate(-26px,-46px) rotate(-28deg)}}
.gift-scene.open .gbox{animation:gbShake .5s ease-in-out}
@keyframes gbShake{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.gi-reveal{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-70px 0 0 -48px;opacity:0;animation:giUp .7s cubic-bezier(.2,1.4,.4,1) .8s forwards;filter:drop-shadow(0 0 16px rgba(242,182,50,.8))}
.gi-reveal svg{width:100%;height:100%}
@keyframes giUp{from{opacity:0;transform:translateY(30px) scale(.4)}to{opacity:1;transform:translateY(-14px) scale(1)}}
.gb-spark{animation:gbSpark 1.4s ease-in-out infinite}@keyframes gbSpark{50%{opacity:.2}}
.gift-price{display:flex;align-items:center;justify-content:center;gap:6px;font-size:22px}.gift-price svg{width:22px;height:22px}
@media (prefers-reduced-motion: reduce){.gift-sheet *{animation:none!important}.gi-reveal{opacity:1}}
.gift-item .small svg{width:15px;height:15px;vertical-align:-2px}.btn .gift-ic{margin-right:6px;vertical-align:-4px}
@media (min-width:721px){.cz-grid[style*="--czc"]{grid-template-columns:repeat(var(--czc),minmax(0,1fr))!important;min-height:calc(var(--czr) * 112px + (var(--czr) - 1) * 8px)!important}}
@media (min-width:1100px){.ce .wrap{max-width:min(1240px,calc(100vw - 48px))!important}.ce-body{grid-template-columns:340px minmax(0,1fr)!important}.ce-tabs{flex-wrap:nowrap!important}}
/* desktop editor: one screen, no page scroll */
@media (min-width:721px){
  .ce{height:100svh;overflow:hidden}
  .ce-body{min-height:0;padding-block:12px calc(var(--ce-foot,70px) + 12px)!important;align-items:stretch}
  .ce-panel{overflow:hidden;gap:10px}
  .ce-preview{position:static!important;max-height:100%;overflow:hidden}
  .ce-preview .stage-cat,.ce-preview .emote-scene{width:min(220px,30svh)}
  .ce-foot .wrap{padding-block:10px}
  .cz-grid[style*="--czc"]{min-height:0!important;flex:none;grid-auto-rows:var(--czh,112px)!important}
  .ce-panel>*{flex-shrink:0}
  .ce-preview{gap:8px}
}
/* clickable game cards in Graj */
.card.mode.pickable{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative}
.card.mode.pickable:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc,var(--ginger)) 55%,var(--line));box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
.card.mode.pickable:active{transform:translateY(1px)}
.card.mode.pickable:focus-visible{outline:3px solid var(--acc,var(--ginger));outline-offset:2px}
.card.mode.pickable::after{content:"";position:absolute;right:18px;top:50%;width:46px;height:46px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background-color:rgba(255,255,255,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z' fill='white'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:58% 50%;background-size:18px 18px;backdrop-filter:blur(6px);box-shadow:0 8px 20px -8px rgba(0,0,0,.5);transform:translateY(-50%);opacity:1;transition:transform .15s,background-color .15s}
.card.mode.pickable:hover::after{transform:translateY(-50%) scale(1.08);background-color:rgba(255,255,255,.24)}
.card.mode.pickable .mode-body{padding-right:54px}
/* lesson summary: frameless, two columns on desktop, fits one screen */
.res2 .res-hero{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.res2 .res-cat{width:min(150px,20svh)}
.res2 .res-side{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.res2 .res-tiles .tile{background:none!important;border:0!important;box-shadow:none!important;padding:4px 0!important}
.res2 .res-tiles .tile b{font-size:28px}
.res2 .res-xp{background:none;border:0;padding:0}
.res2 .res-xp ul{margin:6px 0 0}
@media (min-width:900px){
  .res2{display:flex!important;flex-direction:column;align-items:center;gap:16px;max-width:560px;margin:0 auto;padding-top:clamp(0px,calc(50svh - 430px),70px)}
  .res2 .res-hero h1{margin:0}
  .res2 .res-cat{width:min(140px,17svh)}
  .res2 .res-side{align-items:stretch;width:100%}
  .res2 .res-side .btn{width:100%}
  .res2 .res-side>p{margin:0;text-align:center}
}
@media (min-width:900px){main{padding-bottom:20px}}
.res2 .notice{padding:7px 12px;font-size:13.5px;border-radius:12px;text-align:center}
@media (max-width:640px){
  main.wrap:has(> .res2){padding-top:8px}
  .res2.result{gap:8px;padding-block:4px}
  .res2 .res-hero{gap:4px}
  .res2 .res-cat{width:min(104px,14svh)}
  .res2 .res-stars{margin:-2px 0 0}
  .res2 .res-stars .rs svg{width:32px;height:32px}.res2 .res-stars .rs:nth-child(2) svg{width:40px;height:40px;margin-top:-6px}
  .res2 .res-hero h1{font-size:28px}
  .res2 .res-tiles .tile{padding:0!important}.res2 .res-tiles .tile b{font-size:23px}
  .res2 .res-side{gap:8px}
  .res2 .res-xp ul{gap:2px;margin-top:4px}.res2 .res-xp li{font-size:13.5px}
}
@media (min-width:900px) and (max-height:900px){
  main.wrap:has(> .res2){padding-block:8px 6px}
  .res2{gap:8px;padding-top:0}
  .res2.result{padding-block:6px}
  .res2 .res-hero{gap:4px}
  .res2 .res-cat{width:min(96px,12svh)}
  .res2 .res-stars{margin:-2px 0 0}
  .res2 .res-stars .rs svg{width:34px;height:34px}.res2 .res-stars .rs:nth-child(2) svg{width:42px;height:42px;margin-top:-6px}
  .res2 .res-hero h1{font-size:30px}
  .res2 .res-tiles .tile{padding:0!important}
  .res2 .res-tiles .tile b{font-size:24px}
  .res2 .res-side{gap:8px}
  .res2 .res-xp ul{gap:1px;margin-top:2px}
  .res2 .res-xp li{font-size:13.5px}
}
@media (min-width:900px) and (max-height:740px){.res2 .res-cat{width:min(80px,11svh)}.res2 .res-tiles .tile span{font-size:10px}.res2 .res-stars .rs svg{width:28px;height:28px}.res2 .res-stars .rs:nth-child(2) svg{width:34px;height:34px}.res2 .res-xp li{font-size:13px}.res2 .res-xp>.eyebrow{display:none}.res2 .res-tiles .tile b{font-size:21px}.res2 .notice{padding:5px 10px;font-size:12.5px}.res2 .res-hero h1{font-size:26px}.res2 .res-side>p{display:none}}
/* ===== MeowLearn look: hero cards, logo, floating nav, background ===== */
.top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate%28-22 32 32%29'%3E%3Cg fill='%23A898E8' fill-opacity='.075'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='15' cy='27' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='38' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='49' cy='27' rx='6' ry='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 3% 20%/78px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate%2824 32 32%29'%3E%3Cg fill='%23A898E8' fill-opacity='.075'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='15' cy='27' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='38' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='49' cy='27' rx='6' ry='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 96% 13%/98px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate%28-22 32 32%29'%3E%3Cg fill='%23A898E8' fill-opacity='.075'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='15' cy='27' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='38' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='49' cy='27' rx='6' ry='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 92% 66%/66px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate%2824 32 32%29'%3E%3Cg fill='%23A898E8' fill-opacity='.075'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='15' cy='27' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='38' cy='17' rx='6' ry='8'/%3E%3Cellipse cx='49' cy='27' rx='6' ry='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 5% 82%/90px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0 -10 Q1.8 -1.8 10 0 Q1.8 1.8 0 10 Q-1.8 1.8 -10 0 Q-1.8 -1.8 0 -10Z' fill='%23C9BEF5' fill-opacity='.22'/%3E%3C/svg%3E") 12% 46%/26px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0 -10 Q1.8 -1.8 10 0 Q1.8 1.8 0 10 Q-1.8 1.8 -10 0 Q-1.8 -1.8 0 -10Z' fill='%23C9BEF5' fill-opacity='.22'/%3E%3C/svg%3E") 86% 40%/20px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M0 -10 Q1.8 -1.8 10 0 Q1.8 1.8 0 10 Q-1.8 1.8 -10 0 Q-1.8 -1.8 0 -10Z' fill='%23C9BEF5' fill-opacity='.22'/%3E%3C/svg%3E") 70% 90%/24px no-repeat}

/* logo */
.ml-logo{display:flex;flex-direction:column;align-items:center;margin:-2px 0 -4px;user-select:none}
.ml-logo svg{width:92px;height:auto;margin-bottom:-12px;filter:drop-shadow(0 0 10px rgba(247,162,75,.5));overflow:visible}
.ml-logo b{font-family:var(--f-display);font-weight:800;font-size:46px;line-height:1;color:#fff;letter-spacing:.3px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25)) drop-shadow(0 0 18px rgba(168,152,232,.45))}
.ml-logo b span{background:linear-gradient(180deg,#FFC676,#F2892C);-webkit-background-clip:text;background-clip:text;color:transparent}
.ml-div{display:flex;align-items:center;gap:10px;margin-top:4px;color:#B6A8F2}
.ml-div span{width:76px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#8F7CE8)}
.ml-div span:last-child{background:linear-gradient(270deg,transparent,#8F7CE8)}
.ml-div svg{width:18px;height:18px}
.ml-cap{transform-box:fill-box;transform-origin:50% 90%;animation:mlCap 3.6s ease-in-out infinite}
@keyframes mlCap{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg) translateY(-2px)}}

/* hero cards */
.play,.learn-landing{gap:26px}
.play .card.mode,.learn-landing .card.mode{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:20px;align-items:center;padding:18px 20px;min-height:168px;border-radius:26px;overflow:visible;border:1px solid rgba(196,182,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 46px -22px rgba(0,0,0,.8)}
.play .card.mode::before,.learn-landing .card.mode::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 46%);pointer-events:none;z-index:-1}
.play .card.mode.ranked{--bic:#FFD36E;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 3h10v3h3v2a5 5 0 0 1-4.6 5A5 5 0 0 1 13 15.9V18h3v3H8v-3h3v-2.1A5 5 0 0 1 8.6 13 5 5 0 0 1 4 8V6h3z'/%3E%3C/svg%3E");background:linear-gradient(120deg,#4141A2 0%,#2D2A74 50%,#241F55 100%)}
.play .card.mode.friends{--bic:#FF9EC4;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM1 20c0-3.9 3.6-6 8-6s8 2.1 8 6v1H1zm16.6-5.9c3 .4 5.4 2 5.4 5.4V21h-4v-1c0-2.3-.5-4.2-1.4-5.9z'/%3E%3C/svg%3E");background:linear-gradient(120deg,#71409E 0%,#422574 50%,#2A1E55 100%)}
.play .card.mode.bots{--bic:#7FE3FF;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11 2h2v3h4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h4zM8.5 10a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm7 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9 15.5h6V17H9zM1 10h2v5H1zm20 0h2v5h-2z'/%3E%3C/svg%3E");background:linear-gradient(120deg,#2D5A8F 0%,#293C74 50%,#221F52 100%)}
.learn-landing .card.mode.own{--bic:#FFC56E;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 5.2C5 3.6 8.3 3.7 11.2 5.5V20C8.3 18.3 5 18.2 2 19.8zM22 5.2c-3-1.6-6.3-1.5-9.2.3V20c2.9-1.7 6.2-1.8 9.2-.2z'/%3E%3C/svg%3E");background:linear-gradient(120deg,#6747BE 0%,#3E2B86 50%,#2A2160 100%)}
.learn-landing .card.mode.adv{--bic:#6FF0B8;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2.2a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6zM16.5 7.5l-2.7 6.3-6.3 2.7 2.7-6.3zM12 10.8a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z'/%3E%3C/svg%3E");background:linear-gradient(120deg,#1E6E64 0%,#22496C 50%,#231F52 100%)}
.card.mode .mode-art{position:relative;align-self:stretch;max-width:none;width:auto;margin:-18px 0 -18px -20px;clip-path:inset(-90px 0 0 0 round 0 0 0 26px)}
.card.mode .mode-art .hero-art{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;transform-origin:50% 100%;transition:transform .25s}
.card.mode.pickable:hover .hero-art{transform:scale(1.035)}
.card.mode .mode-body{position:relative;z-index:1}
.card.mode .mode-body h2{color:#fff;font-size:27px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.card.mode .mode-body>p.small{color:#D3CAF7!important}
.card.mode .mode-body>.eyebrow:first-child,.card.mode .rk-title>.eyebrow{display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:7px;padding:5px 13px 5px 10px;margin:0;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:none;line-height:1.3;backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.card.mode .mode-body>.eyebrow:first-child::before,.card.mode .rk-title>.eyebrow::before{content:"";width:16px;height:16px;flex:none;background:var(--bic,#fff);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.play .card.mode .rk-title{justify-content:space-between;margin-bottom:0}
.card.mode .rk-card .eyebrow{color:#C9BEF5}
.card.mode .adv-lang{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-bottom-width:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .15s,transform .15s}
.card.mode .adv-lang:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.card.mode .btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);box-shadow:0 3px 0 rgba(0,0,0,.25);color:#fff}
.card.mode .invite-row input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.card.mode .bar{background:rgba(255,255,255,.12)}
.card.mode.pickable::after{width:52px;height:52px;right:22px;border:1.5px solid rgba(255,255,255,.4);background-color:rgba(255,255,255,.13);background-size:20px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -8px rgba(0,0,0,.6);animation:playPulse 2.6s ease-in-out infinite}
@keyframes playPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -8px rgba(0,0,0,.6),0 0 0 0 rgba(255,255,255,.22)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -8px rgba(0,0,0,.6),0 0 0 9px rgba(255,255,255,0)}}
.card.mode.pickable .mode-body{padding-right:72px}
.card.mode.pickable:hover{border-color:rgba(214,204,255,.5)}

/* hero art animations */
.gc-bob{animation:gcBob 3.4s ease-in-out infinite}
@keyframes gcBob{50%{transform:translateY(-4px)}}
.gc-ear-r{transform-box:fill-box;transform-origin:30% 100%;animation:gcEar 5.2s ease-in-out infinite}
@keyframes gcEar{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(10deg)}92%{transform:rotate(-3deg)}96%{transform:rotate(6deg)}}
.hx-spark{transform-box:fill-box;transform-origin:center;animation:hxSpark 2.4s ease-in-out infinite}
@keyframes hxSpark{0%,100%{transform:scale(.45) rotate(0);opacity:.3}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
.hx-glow{animation:hxGlow 4s ease-in-out infinite}
@keyframes hxGlow{50%{opacity:.62}}
.hx-note{opacity:0;animation:hxNote 3s ease-in infinite}
@keyframes hxNote{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(14px,-46px) rotate(18deg);opacity:0}}
.hx-crown{transform-box:fill-box;transform-origin:50% 100%;animation:hxCrown 3.4s ease-in-out infinite}
@keyframes hxCrown{25%{transform:rotate(-6deg)}75%{transform:rotate(5deg)}}
.hx-trophy{transform-box:fill-box;transform-origin:50% 100%;animation:hxTrophy 2.8s ease-in-out infinite}
@keyframes hxTrophy{50%{transform:translateY(-4px) rotate(4deg)}}
.hx-conf{transform-box:fill-box;transform-origin:center;opacity:0;animation:hxConf 3.2s linear infinite}
@keyframes hxConf{0%{transform:translateY(-14px) rotate(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(176px) rotate(400deg);opacity:0}}
.hx-blink{animation:hxBlink 1.2s steps(2) infinite}
@keyframes hxBlink{50%{opacity:.25}}
.hx-scan{animation:hxScan 2.2s ease-in-out infinite}
@keyframes hxScan{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
.hx-bolt{transform-box:fill-box;transform-origin:center;animation:hxBolt 1.6s ease-in-out infinite}
@keyframes hxBolt{0%,100%{opacity:1;transform:scale(1)}40%{opacity:.35;transform:scale(.85)}55%{opacity:1;transform:scale(1.18)}}
.hx-chest{transform-box:fill-box;transform-origin:50% 100%;animation:hxChest 2.6s ease-in-out infinite}
@keyframes hxChest{50%{transform:scale(1.07) rotate(-3deg)}}
.hx-leaf{transform-box:fill-box;transform-origin:0% 100%;animation:hxLeaf 4s ease-in-out infinite}
@keyframes hxLeaf{50%{transform:rotate(-7deg)}}
.card.mode.pickable:hover .gc-bob{animation-duration:1.3s}

@media (min-width:641px) and (max-height:860px){
  .play,.learn-landing{gap:14px}
  .play .card.mode,.learn-landing .card.mode{min-height:122px;padding:12px 18px;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px}
  .play .card.mode .mode-art,.learn-landing .card.mode .mode-art{margin:-12px 0 -12px -18px}
  .card.mode .mode-body h2{font-size:23px}
  .play .mode-body{gap:6px}
  .ml-logo{flex-direction:row;justify-content:center;gap:2px;margin:-6px 0 -4px}.ml-logo b{font-size:30px}.ml-logo svg{width:50px;margin:0 0 -4px}.ml-div{display:none}
  main.wrap:has(> .play){padding-top:10px;padding-bottom:18px}
}
@media (max-width:640px){
  .play,.learn-landing{gap:30px}
  .play .card.mode,.learn-landing .card.mode{grid-template-columns:1fr;gap:12px;padding:16px;min-height:0}
  .card.mode .mode-art{height:150px;margin:-16px -16px 0;clip-path:inset(-90px 0 0 0)}
  .card.mode .mode-art .hero-art{left:-6px;width:min(262px,80%);-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
  .card.mode.pickable::after{top:56px;right:16px;transform:none;width:50px;height:50px}
  .card.mode.pickable:hover::after{transform:scale(1.08)}
  .card.mode.pickable .mode-body{padding-right:0}
  .card.mode .mode-body h2{font-size:24px}
  .ml-logo b{font-size:40px}
  .topline{gap:6px}.topline .gear{width:34px}.me-nick{max-width:96px}.topline .stats .pill{padding:4px 7px}
  /* floating bottom navigation */
  .top .nav{position:fixed;left:12px;right:12px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:15;max-width:520px;margin:0 auto;padding:6px;gap:4px;border-radius:26px;background:color-mix(in srgb,var(--surface) 84%,transparent);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 18px 40px -12px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08)}
  .top .nav .navbtn{padding:9px 2px 7px;border-radius:20px}
  .top .nav .navbtn[aria-current="page"]{box-shadow:0 8px 20px -6px color-mix(in srgb,var(--plum) 70%,transparent),inset 0 0 0 1.5px rgba(255,255,255,.35)}
  body:has(.top .nav) main.wrap{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:430px){.topline .me-info{display:none}.topline .me-btn{padding:2px;flex:none;width:auto;border-radius:50%}}
/* no play buttons on cards */
.card.mode.pickable::after{display:none!important}
.card.mode.pickable .mode-body{padding-right:0!important}
/* extra hero animations */
.hx-float{animation:hxFloat 3s ease-in-out infinite}
@keyframes hxFloat{50%{transform:translateY(-5px)}}
.hx-hover{animation:hxHover 2.4s ease-in-out infinite}
@keyframes hxHover{0%,100%{transform:translateX(-66px)}50%{transform:translateX(0)}}
.hx-drop{opacity:0;animation:hxDrop 3.4s cubic-bezier(.5,0,.6,1) infinite}
@keyframes hxDrop{0%,40%{transform:translateY(-36px);opacity:0}45%{opacity:1}68%{transform:translateY(72px)}74%{transform:translateY(64px)}80%{transform:translateY(72px);opacity:1}95%{opacity:1}100%{transform:translateY(72px);opacity:0}}

/* ===== game pickers (ranked / bots / friends) ===== */
.sheet.mode-sheet{background:radial-gradient(420px 220px at 50% -40px,rgba(168,152,232,.28),transparent 70%),linear-gradient(175deg,#29235A 0%,#1C1840 55%,#17142F 100%);border:1px solid rgba(196,182,255,.2);box-shadow:0 -24px 70px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.mode-sheet h2{color:#fff;font-size:24px!important;text-shadow:0 2px 14px rgba(140,120,255,.35)}
.mode-sheet .sheet-x{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#fff}
.mode-sheet .sheet-grab{background:rgba(255,255,255,.25)}
.mp-top .eyebrow{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;text-transform:none;letter-spacing:.02em;font-size:12.5px}
.mode-sheet>p.small.muted,.mp-top .small.muted{color:#BDB2EA!important}
.pm-grid{gap:14px}
.pm-card{position:relative;isolation:isolate;border:1px solid rgba(196,182,255,.24);border-bottom-width:1px;border-radius:24px;background:linear-gradient(160deg,#3E3E9C 0%,#2A2766 55%,#211C4A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 36px -20px rgba(0,0,0,.85);transition:transform .2s,border-color .2s,box-shadow .2s}
.pm-card:has([data-match="game"],[data-bp-mode="game"],[data-fp-mode="game"]){background:linear-gradient(160deg,#6C3E9C 0%,#41256F 55%,#2A1E55 100%)}
.pm-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 40%);pointer-events:none;z-index:-1}
.pm-card:hover{transform:translateY(-3px);border-color:rgba(214,204,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 44px -20px rgba(0,0,0,.9)}
.pm-art{position:relative;height:150px;overflow:hidden;background:none}
.pm-art .hero-art{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%)}
@media (max-width:560px){.pm-card{display:flex;flex-direction:column}.pm-art{display:block;height:124px}.pm-body{padding:10px 14px 14px;gap:8px}.pm-body>b{font-size:20px}}
.pm-body{padding:14px 16px 16px;gap:10px}
.pm-body>b{color:#fff;font-size:23px}
.pm-body>p.small{color:#D3CAF7!important;line-height:1.45}
.pm-eta{align-self:center;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);color:#C9BEF5;font-size:11.5px}
.pm-eta svg{color:#6FF0B8;animation:etaTick 1.6s ease-in-out infinite}
.pm-eta b{color:#6FF0B8}
@keyframes etaTick{50%{opacity:.45}}

/* modern primary buttons */
.mode-sheet .btn:not(.ghost):not(.sm),.dlobby .btn.wide:not(.ghost){position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:16px;padding:14px 18px;font-size:16.5px;letter-spacing:.01em;background:linear-gradient(135deg,#FFB86E 0%,#F2862F 55%,#E8624A 100%);color:#fff;text-shadow:0 1px 2px rgba(120,40,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #B24F1A,0 14px 26px -12px rgba(242,120,47,.9);transition:transform .1s,box-shadow .1s,filter .15s}
.mode-sheet .btn:not(.ghost):not(.sm):hover,.dlobby .btn.wide:not(.ghost):hover{filter:brightness(1.07)}
.mode-sheet .btn:not(.ghost):not(.sm):active,.dlobby .btn.wide:not(.ghost):active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #B24F1A,0 8px 16px -10px rgba(242,120,47,.9)}
.mode-sheet .btn:not(.ghost):not(.sm)::after,.dlobby .btn.wide:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);animation:btnShine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes btnShine{0%,60%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.mode-sheet .btn[data-match]::before,.mode-sheet .btn[data-bp-go]::before,.mode-sheet .btn[data-fp-go]::before,.mode-sheet .btn[data-bp-mode]::before,.mode-sheet .btn[data-fp-mode]::before{content:"";width:18px;height:18px;flex:none;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.5.9l12-7.5a1 1 0 0 0 0-1.8l-12-7.5A1 1 0 0 0 7 4.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.5.9l12-7.5a1 1 0 0 0 0-1.8l-12-7.5A1 1 0 0 0 7 4.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.mode-sheet .btn[data-match]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.5 3a7.5 7.5 0 0 1 6 12l4.8 4.8-1.8 1.8-4.8-4.8A7.5 7.5 0 1 1 10.5 3zm0 2.5a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.5 3a7.5 7.5 0 0 1 6 12l4.8 4.8-1.8 1.8-4.8-4.8A7.5 7.5 0 1 1 10.5 3zm0 2.5a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E")}
.mode-sheet .btn[data-fp-go]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4h3v6.5H20v3h-6.5V20h-3v-6.5H4v-3h6.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4h3v6.5H20v3h-6.5V20h-3v-6.5H4v-3h6.5z'/%3E%3C/svg%3E")}
.mode-sheet .btn:disabled,.dlobby .btn.wide:disabled{background:rgba(255,255,255,.1)!important;color:#A49EC0!important;box-shadow:none!important;text-shadow:none}
.mode-sheet .btn:disabled::after,.dlobby .btn.wide:disabled::after{display:none}

/* bot / friends configuration */
.bp-head h2{color:#fff}
.bp-head .ce-back{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;color:#fff}
.bp-group{padding:12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.bp-group .eyebrow{color:#B6A8F2}
.bp-opt{position:relative;border:1px solid rgba(255,255,255,.13);border-bottom-width:1px;border-radius:16px;background:rgba(255,255,255,.06);color:#fff;padding:12px 6px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:background .15s,transform .15s,border-color .15s,box-shadow .15s}
.bp-opt:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}
.bp-opt:active{transform:translateY(1px);border-bottom-width:1px}
.bp-opt .small{color:#C2B7EC!important}
.bp-opt.on{background:linear-gradient(160deg,rgba(176,156,255,.5),rgba(110,88,220,.32));border-color:rgba(220,210,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -10px rgba(140,118,255,.95)}
.bp-opt.on .small{color:#EDE7FF!important}
.bp-opt.on::after{content:"✓";position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%;background:#6FF0B8;color:#103026;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2.5px #241E4E;animation:onPop .25s ease-out}
@keyframes onPop{from{transform:scale(.3)}}
.bp-select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:14px}

/* lobby */
.dl-head.has-art{border-radius:26px;border:1px solid rgba(196,182,255,.24);background:linear-gradient(180deg,#2B2766,#211C4A)}
.dl-head.has-art .lobby-art{height:180px}
@media (min-width:560px){.dl-head.has-art .lobby-art{height:210px}}
.dl-head-row{background:linear-gradient(180deg,rgba(23,19,52,0),rgba(23,19,52,.55))}
.dl-head-row h2{color:#fff}
.dl-head-row .eyebrow{display:inline-flex;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;text-transform:none;letter-spacing:.02em;margin-bottom:4px}
.dl-count b{color:#FFC676}
.dl-seat{border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .15s,background .15s}
.dl-seat:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.dl-seat.me{background:linear-gradient(160deg,rgba(242,149,74,.3),rgba(242,149,74,.08));border-color:rgba(255,190,130,.6)}
.dl-seat.empty{border:1.5px dashed rgba(196,182,255,.35);background:rgba(255,255,255,.02)}
.dl-plus{border:1.5px dashed rgba(196,182,255,.55);color:#C9BEF5;animation:plusPulse 2.2s ease-in-out infinite}
@keyframes plusPulse{50%{transform:scale(1.08);border-color:rgba(255,198,118,.8);color:#FFC676}}
.dl-seg{border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.05);padding:3px;gap:3px}
.dl-seg button{border-radius:11px;color:#E6E0FF;transition:background .15s}
.dl-seg button+button{border-left:0}
.dl-seg button:hover:not(:disabled){background:rgba(255,255,255,.08)}
.dl-seg button[aria-pressed="true"]{background:linear-gradient(135deg,#FFB86E,#F2862F);color:#fff;box-shadow:0 6px 14px -6px rgba(242,134,47,.85)}
.dl-foot{background:linear-gradient(transparent,var(--bg) 35%)}
.dlobby .chip{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#E6E0FF}
.dlobby .chip[aria-pressed="true"]{background:linear-gradient(160deg,rgba(176,156,255,.5),rgba(110,88,220,.32));border-color:rgba(220,210,255,.7);color:#fff}
.dlobby .btn.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);box-shadow:0 3px 0 rgba(0,0,0,.3);color:#fff;border-radius:16px}
@media (max-width:640px){body:has(.top .nav) .lb-mine,body:has(.top .nav) .dl-foot{bottom:calc(88px + env(safe-area-inset-bottom,0px))}body:has(.top .nav) .tour-card:not(.top){bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
/* ===== ranking: rewards banner ===== */
.pz2{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:26px;border:1px solid rgba(255,214,120,.3);background:radial-gradient(380px 220px at 50% 62%,rgba(255,196,90,.2),transparent 70%),linear-gradient(160deg,#4A3A9E 0%,#2D2670 50%,#211C4E 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 46px -22px rgba(0,0,0,.8)}
.pz2::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.09),transparent 40%);pointer-events:none;z-index:-1}
.pz-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pz-title{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.pz-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:700}
.pz-badge svg{width:15px;height:15px;color:#FFD36E}
.pz-title h3{font-size:25px;color:#fff;margin:2px 0 0;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.pz-sub{font-size:13px;color:#C9BEF5;font-weight:700}
.pz-timer{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);flex:none}
.pz-timer svg{width:20px;height:20px;color:#6FF0B8;animation:etaTick 1.6s ease-in-out infinite}
.pz-timer>span{display:flex;flex-direction:column;line-height:1.15}
.pz-timer small{font-size:10px;color:#B6A8F2;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.pz-timer b{font-size:14px;color:#fff;white-space:nowrap}
.pz-stage{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;max-width:460px;width:100%;margin:0 auto;padding-top:14px}
.pz-glow{position:absolute;left:50%;top:0;width:240px;height:240px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,210,100,.33),transparent 64%);animation:hxGlow 3.5s ease-in-out infinite;pointer-events:none;z-index:-1}
.pz-sp{position:absolute;width:18px;height:18px;pointer-events:none}
.pz-sp.s1{left:6%;top:12%}.pz-sp.s2{right:6%;top:4%;width:14px;height:14px}.pz-sp.s3{right:22%;top:40%;width:12px;height:12px}
.pz-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.pz-ava{display:block;width:64px;height:72px;overflow:hidden;border:0;padding:0;background:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));transition:transform .15s}
.pz-ava:hover{transform:translateY(-3px)}
.pz-ava svg{width:100%;height:auto;display:block}
.pz-col.p1 .pz-ava{width:84px;height:94px}
.pz-ava.pz-empty{display:grid;place-items:center;width:54px;height:54px;margin:10px 0 8px;border-radius:50%;border:2px dashed rgba(255,255,255,.3);color:rgba(255,255,255,.5);font-family:var(--f-display);font-size:24px;font-weight:800;filter:none}
.pz-col.p1 .pz-ava.pz-empty{width:68px;height:68px}
.pz-crown{width:40px;height:auto;margin-bottom:-8px;transform-origin:50% 100%;animation:hxCrown 3s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(255,210,80,.7));position:relative;z-index:1}
.pz-name{font-size:13px;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pz-name em{font-style:normal;color:#FFC676}
.pz-col.me .pz-name{color:#FFC676}
.pz-score{font-size:11.5px;color:#C9BEF5;font-weight:700;margin-bottom:6px}
.pz-step{position:relative;overflow:hidden;width:100%;border-radius:16px 16px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -6px 0 rgba(0,0,0,.16),0 12px 22px -10px rgba(0,0,0,.6)}
.pz-col.p1 .pz-step{height:114px;background:linear-gradient(180deg,#FFE27A,#F2B22E 60%,#D98A0E)}
.pz-col.p2 .pz-step{height:88px;background:linear-gradient(180deg,#EEF1F8,#B9C2D4 60%,#8E99AF)}
.pz-col.p3 .pz-step{height:70px;background:linear-gradient(180deg,#F4C7A0,#D28E5C 60%,#A9663A)}
.pz-col.p1 .pz-step::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-130%);animation:btnShine 3.6s ease-in-out infinite}
.pz-place{font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.22)}
.pz-col.p1 .pz-place{font-size:40px}
.pz-prize{position:relative;z-index:1;display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:999px;background:rgba(30,20,60,.6);color:#FFD36E;font-size:13px;white-space:nowrap}
.pz-prize svg{width:14px;height:14px}
.pz-rest{display:flex;flex-direction:column;align-items:center;gap:8px}
.pz-rest-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#B6A8F2}
.pz-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pz-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:13px;color:#fff}
.pz-chip i{font-style:normal;color:#B6A8F2;font-size:12px}
.pz-chip svg{width:14px;height:14px}
.pz-chip b{color:#FFD36E}
.pz-info{align-self:center;text-align:center;margin-top:-4px}
.pz-info summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:700;color:#B6A8F2;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px}
.pz-info summary::-webkit-details-marker{display:none}
.pz-info summary::before{content:"i";display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:900;font-style:italic}
.pz-info summary:hover{background:rgba(255,255,255,.07)}
.pz-info p{margin:6px auto 0;font-size:13px;color:#D3CAF7;max-width:440px}
/* ranking tabs */
.rank-view>.seg.seg3{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:5px;gap:4px}
.rank-view>.seg.seg3 button{border-radius:14px;padding:10px 4px;color:#C9BEF5;transition:background .15s,color .15s}
.rank-view>.seg.seg3 button:hover{background:rgba(255,255,255,.06);color:#fff}
.rank-view>.seg.seg3 button.on{background:linear-gradient(155deg,var(--plum),color-mix(in srgb,var(--plum) 55%,#1b1030));color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--plum) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.rank-view .seg-sub{gap:8px}.rank-view .seg-sub button{white-space:nowrap;min-width:0}@media (max-width:430px){.rank-view .seg-sub button{font-size:13.5px;padding:8px 4px}}
.rank-view .seg-sub button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:999px;padding:8px 6px;color:#D9D2F7;font-weight:700;transition:background .15s}
.rank-view .seg-sub button:hover{background:rgba(255,255,255,.09)}
.rank-view .seg-sub button.on{background:linear-gradient(135deg,#FFB86E,#F2862F);border-color:transparent;color:#fff;box-shadow:0 8px 18px -8px rgba(242,134,47,.85),inset 0 1px 0 rgba(255,255,255,.35)}
@media (max-width:430px){.pz2{padding:16px 14px}.pz-title h3{font-size:22px}.pz-timer{padding:6px 10px}.pz-stage{gap:6px}.pz-ava{width:54px;height:62px}.pz-col.p1 .pz-ava{width:72px;height:82px}.pz-prize{font-size:12px;padding:2px 7px}.pz-place{font-size:26px}.pz-col.p1 .pz-place{font-size:34px}.rank-view>.seg.seg3 button{font-size:13.5px}}
/* ===== shop: deal of the day ===== */
.deal{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.22);border-radius:26px;padding:16px 18px;color:#fff;overflow:hidden;cursor:pointer;background:radial-gradient(260px 200px at 22% 50%,color-mix(in srgb,var(--d1) 70%,transparent),transparent 70%),linear-gradient(125deg,var(--d1) 0%,var(--d2) 48%,var(--d3) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 22px 44px -22px color-mix(in srgb,var(--d2) 80%,#000);transition:transform .2s,box-shadow .2s}
.deal::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 92% 8%,rgba(255,255,255,.22),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.12),transparent 42%);pointer-events:none}
.deal::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);transform:translateX(-130%);animation:btnShine 4.2s ease-in-out infinite;pointer-events:none}
.deal:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 28px 50px -22px color-mix(in srgb,var(--d2) 85%,#000)}
.deal-art{position:relative;z-index:1;display:grid;place-items:center;aspect-ratio:1/1.02;background:none;border-radius:0;padding:0}
.deal-rays{position:absolute;inset:-12%;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.16) 0 9deg,transparent 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%);animation:dealSpin 18s linear infinite}
@keyframes dealSpin{to{transform:rotate(360deg)}}
.deal-glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rar) 55%,#fff) 0%,color-mix(in srgb,var(--rar) 40%,transparent) 40%,transparent 70%);filter:blur(6px);opacity:.75;animation:hxGlow 3.4s ease-in-out infinite}
.deal-fig{position:relative;z-index:1;width:64%;animation:dealBob 3.2s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
@keyframes dealBob{50%{transform:translateY(-6px)}}
.deal-fig svg,.deal-fig .emote-scene{width:100%;max-width:none;height:auto;display:block;margin:0}
.deal-ped{position:absolute;left:18%;right:18%;bottom:4%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.38),transparent 70%);animation:dealShadow 3.2s ease-in-out infinite}
@keyframes dealShadow{50%{transform:scaleX(.86);opacity:.7}}
.deal-art .deal-sp{position:absolute;width:16px;height:16px;max-width:none;margin:0;z-index:2;pointer-events:none}
.deal-art .deal-sp.s1{left:6%;top:10%}.deal-art .deal-sp.s2{right:6%;top:22%;width:12px;height:12px}.deal-art .deal-sp.s3{right:14%;bottom:16%;width:14px;height:14px}
.deal-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.deal-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.deal-hot{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 8px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.22);font-size:12.5px;font-weight:800;letter-spacing:.02em;backdrop-filter:blur(4px)}
.deal-hot svg{width:15px;height:15px;color:#FFC24D;animation:etaTick 1.4s ease-in-out infinite}
.deal .deal-badge{align-self:auto;background:linear-gradient(135deg,#FFE066,#FFB020);color:#7A2A00;font-size:13px;font-weight:900;padding:4px 10px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(255,176,32,.8),inset 0 1px 0 rgba(255,255,255,.6);animation:dealBadge 2.4s ease-in-out infinite}
.deal .deal-badge.deal-corner{position:absolute;top:14px;right:14px;z-index:3;font-size:15px;padding:6px 12px}
@media (max-width:640px){.promo-row .deal .deal-badge.deal-corner{top:10px;right:10px;font-size:12px;padding:4px 9px}}
.deal-body{padding-right:8px}
@keyframes dealBadge{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(3deg) scale(1.08)}}
.deal-name{font-family:var(--f-display);font-size:28px;line-height:1.05;text-shadow:0 2px 14px rgba(0,0,0,.25);overflow-wrap:anywhere}
.deal-meta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;opacity:.92}
.deal-meta i{width:9px;height:9px;border-radius:50%;background:var(--rar);box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.deal-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--f-display)}
.deal-price s{display:inline-flex;align-items:center;gap:3px;font-size:16px;opacity:.7}
.deal-price s svg{width:15px;height:15px}
.deal-price b{display:inline-flex;align-items:center;gap:5px;font-size:24px;padding:3px 12px 3px 8px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2)}
.deal-price b svg{width:22px;height:22px}
.deal-price em{font-style:normal;font-family:var(--f-body);font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;background:#6FF0B8;color:#0F3B2C}
.deal-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;margin-top:2px}
.deal-time{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;opacity:.9}
.deal-time svg{width:15px;height:15px}
.deal-cta{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:999px;background:#fff;color:var(--d3);font-weight:800;font-size:14px;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);transition:gap .15s}
.deal-cta svg{width:16px;height:16px}
.deal:hover .deal-cta{gap:9px}
@media (max-width:640px){
  .promo-row .deal{grid-template-columns:1fr;gap:6px;padding:12px;align-content:start;border-radius:22px}
  .promo-row .deal-art{max-width:130px;width:100%;margin:0 auto}
  .promo-row .deal-name{font-size:19px}
  .promo-row .deal-price b{font-size:18px}.promo-row .deal-price b svg{width:17px;height:17px}.promo-row .deal-price s{font-size:13px}
  .promo-row .deal-badge{font-size:11px;padding:3px 8px}
  .promo-row .deal-hot{font-size:11px;padding:3px 8px 3px 6px}
  .promo-row .deal-meta,.promo-row .deal-time{font-size:11px}
  .promo-row .deal-cta{display:none}
  .promo-row .deal-price em{display:none}
}
/* ===== lesson screen ===== */
div.lesson:not(.anode){min-height:100vh;min-height:100svh}
.lesson .lbar{height:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.lesson .lbar i{background:linear-gradient(90deg,#3CCB97,#86F2C9);box-shadow:0 0 14px rgba(60,203,151,.55)}
.lesson .ex-kind{display:inline-flex;align-self:flex-start;padding:5px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#D3CAF7}
.lesson .prompt .bubble{position:relative;border:1px solid rgba(196,182,255,.32);border-radius:22px 22px 22px 8px;padding:14px 20px;background:linear-gradient(160deg,#3A3284,#29225F);font-size:21px;font-weight:700;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 32px -18px rgba(0,0,0,.85)}
.lesson .prompt .cat{filter:drop-shadow(0 10px 14px rgba(0,0,0,.4));animation:dealBob 3.4s ease-in-out infinite}
.lesson .opt{border:1px solid rgba(255,255,255,.13);border-bottom-width:1px;background:linear-gradient(160deg,#272150,#1F1A42);border-radius:18px;padding:14px 16px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 0 rgba(0,0,0,.28);transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
.lesson .opt:not(:disabled):hover{background:linear-gradient(160deg,#2F285E,#251F4C);transform:translateY(-2px);border-color:rgba(196,182,255,.45)}
.lesson .opt:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(0,0,0,.28)}
.lesson .opt .k{border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(0,0,0,.22);color:#C9BEF5}
.lesson .opt[aria-pressed="true"]{background:linear-gradient(160deg,rgba(176,156,255,.48),rgba(110,88,220,.3));border-color:rgba(220,210,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -12px rgba(140,118,255,.95)}
.lesson .opt[aria-pressed="true"] .k{background:var(--plum);color:#fff;border-color:transparent}
.lesson .opt.right{background:linear-gradient(160deg,rgba(60,203,151,.38),rgba(60,203,151,.14));border-color:#3CCB97}
.lesson .opt.right .k{background:#3CCB97;color:#0F3B2C;border-color:transparent}
.lesson .opt.wrong{background:linear-gradient(160deg,rgba(240,106,130,.34),rgba(240,106,130,.12));border-color:#F06A82}
.lesson .mt{border:1px solid rgba(255,255,255,.13);border-bottom-width:1px;background:linear-gradient(160deg,#272150,#1F1A42);border-radius:16px;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.28);transition:transform .12s,background .15s}
.lesson .mt:not(:disabled):hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
.lesson .mt[aria-pressed="true"]{background:linear-gradient(160deg,rgba(176,156,255,.48),rgba(110,88,220,.3));border-color:rgba(220,210,255,.8)}
.lesson .mt.ok{background:rgba(60,203,151,.22);border-color:#3CCB97}
.lesson .face{border:1px solid rgba(196,182,255,.3);border-bottom-width:1px;border-radius:24px;background:linear-gradient(160deg,#3A3284,#29225F);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 36px -20px rgba(0,0,0,.85)}
.lesson .face.back{background:linear-gradient(160deg,#6B3E9A,#3E2470)}
.lesson .foot{background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.08)}
.lesson .foot.ok{background:linear-gradient(180deg,rgba(60,203,151,.26),rgba(22,58,48,.92));border-top-color:#3CCB97}
.lesson .foot.no{background:linear-gradient(180deg,rgba(240,106,130,.24),rgba(65,32,43,.92));border-top-color:#F06A82}
.lesson .foot .btn:not(.ghost):not(:disabled){border-radius:16px;padding:13px 26px;background:linear-gradient(135deg,#FFB86E 0%,#F2862F 55%,#E8624A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #B24F1A,0 14px 26px -12px rgba(242,120,47,.9)}
.lesson .foot .btn.good:not(:disabled){background:linear-gradient(135deg,#6FF0B8,#2FB985);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #1C7A56,0 14px 26px -12px rgba(60,203,151,.9);color:#0C2E22}
.lesson .foot .btn:disabled{border-radius:16px;padding:13px 26px;background:rgba(255,255,255,.1);box-shadow:none;color:#A49EC0}
@media (min-width:900px){
  .lesson>.wrap,.lesson .foot .wrap{max-width:880px}
  .lesson .lesson-top{padding-block:22px 10px}
  .lesson .ex-area{justify-content:center;gap:28px;padding-block:8px 48px}
  .lesson .prompt{align-items:center;gap:24px}
  .lesson .prompt .cat{width:128px}
  .lesson .prompt .bubble{font-size:30px;padding:20px 30px;border-radius:26px 26px 26px 8px}
  .lesson .opts{grid-template-columns:1fr 1fr;gap:14px}
  .lesson .opt{min-height:78px;font-size:19px;padding:16px 20px;gap:14px}
  .lesson .opt .k{width:34px;height:34px;font-size:14px}
  .lesson .match{gap:14px}.lesson .match .col{gap:12px}.lesson .mt{min-height:64px;font-size:16px;padding:14px}
  .lesson .foot .wrap{padding-block:18px}
  .lesson .verdict h3{font-size:24px}
  .lesson .face .big{font-size:40px}
}
/* ===== game result screen (Kłębki / duel) ===== */
main.wrap:has(> .gr2){display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.gr2{position:relative;isolation:isolate;display:flex!important;flex-direction:column;align-items:stretch!important;gap:14px!important;width:100%;max-width:520px!important;margin:0 auto!important;padding:22px 18px 18px!important;border-radius:30px;border:1px solid rgba(196,182,255,.24);background:radial-gradient(440px 280px at 50% 30%,var(--grg),transparent 70%),linear-gradient(170deg,#2E2868 0%,#211C4E 55%,#1A163D 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -28px rgba(0,0,0,.85);animation:grIn .35s ease-out}
@keyframes grIn{from{transform:translateY(14px) scale(.98);opacity:0}}
.gr2.res-w{--grg:rgba(60,203,151,.3)}.gr2.res-l{--grg:rgba(240,106,130,.26)}.gr2.res-d{--grg:rgba(127,180,255,.28)}
.gr2::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 38%);pointer-events:none;z-index:-1}
.gr2 .gr-head{display:flex;flex-direction:column;align-items:center!important;align-self:stretch!important;text-align:center!important;gap:4px;padding:0!important}
.gr2 .gr-head h1{font-size:46px!important;line-height:1!important;text-shadow:0 0 30px currentColor}
.gr2.res-w .gr-head h1{color:#4BE3A6}.gr2.res-l .gr-head h1{color:#FF7E96}.gr2.res-d .gr-head h1{color:#8FC4FF}
.gr2 .gr-left{display:block!important}
.gr2 .game-end{padding:0!important;margin:0!important;background:none!important}
.gr2 .game-end .eyebrow{display:none}
.gr2 .game-end h2{font-size:18px!important;color:#E6E0FF;margin:0 0 2px!important}
.gr2 .game-end .emote-scene{width:min(25svh,210px)!important}
.gr2 .gr-right{display:flex;flex-direction:column;gap:12px!important}
.gr2 .mmr-res{padding:12px 14px!important;border-radius:20px;background:rgba(0,0,0,.24)!important;border:1px solid rgba(255,255,255,.1)!important;gap:8px!important}
.gr2 .mmr-res .mr-txt>b{font-size:19px!important}
.gr2 .mmr-res .bar{background:rgba(255,255,255,.1)}
.gr2 .mmr-res>.small,.gr2 .mmr-res .small{font-size:13px}
.gr2 .gr-chips{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
.gr2 .gr-chips.one{grid-template-columns:1fr}
.gr2 .gr-chip{justify-content:center!important;align-items:center;gap:7px!important;padding:10px 12px!important;border-radius:18px!important;background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important}
.gr2 .gr-chip b{font-size:24px!important}
.gr2 .gr-chip small{color:#C9BEF5}
.gr2 .gr-right>p.small{color:#B6A8F2!important;font-size:12.5px}
.gr2 .gr-actions{gap:10px}
.gr2 .gr-actions .btn:not(.ghost){border-radius:18px;padding:15px 18px;font-size:17px;background:linear-gradient(135deg,#FFB86E 0%,#F2862F 55%,#E8624A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 #B24F1A,0 14px 26px -12px rgba(242,120,47,.9);position:relative;overflow:hidden}
.gr2 .gr-actions .btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%);animation:btnShine 3.4s ease-in-out infinite;pointer-events:none}
.gr2 .gr-actions .btn.ghost{border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);box-shadow:0 3px 0 rgba(0,0,0,.3);color:#fff}
.gr2 .mmr-res .rank-name{font-size:inherit!important;font-weight:800}
.gr2 .gr-row .btn{white-space:nowrap;font-size:15px;padding-inline:8px}
@media (max-width:720px){main.wrap:has(> .gr2){padding-inline:10px;padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}.gr2{padding:16px 12px 12px!important;gap:10px!important;border-radius:26px}.gr2 .gr-head h1{font-size:38px!important}.gr2 .game-end .emote-scene{width:min(19svh,150px)!important}.gr2 .gr-actions .btn:not(.ghost){padding:13px 16px}.gr2 .gr-chip{padding:8px 10px!important}.gr2 .mmr-res .mr-txt>b{font-size:17px!important}.gr2 .gr-chip b{font-size:21px!important}}
@media (max-height:820px){main.wrap:has(> .gr2){padding-block:10px}.gr2{gap:10px!important;padding-block:16px 14px!important}.gr2 .game-end .emote-scene{width:min(19svh,150px)!important}.gr2 .gr-head h1{font-size:36px!important}}
/* ===== matchmaking search ===== */
.qsearch.qs2{min-height:calc(100svh - var(--qs-off,120px));padding:8px 0;gap:0}
.qs-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:440px;padding:8px 4px;animation:grIn .35s ease-out}
.qs-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:800}
.qs-badge svg{width:16px;height:16px;color:#7FE3FF;animation:qsSpin 2.2s linear infinite}
.qs2.found .qs-badge svg{color:#6FF0B8;animation:none}
.qs2 .qs-radar{width:min(230px,58vw);margin:22px 0 24px}
.qs2 .qs-radar::before{background:radial-gradient(circle,rgba(140,123,255,.28) 0 38%,rgba(40,32,90,.9) 70%,#1C1742);border:1.5px solid rgba(196,182,255,.35);box-shadow:0 0 40px rgba(140,123,255,.35),inset 0 0 30px rgba(0,0,0,.4)}
.qs2 .qs-ring{border:2px solid rgba(127,227,255,.55)}
.qs2 .qs-sweep{background:conic-gradient(from 0deg,rgba(127,227,255,.5),rgba(127,227,255,0) 26%);mix-blend-mode:screen}
.qs2 .qs-ghost{background:linear-gradient(160deg,#4A3FA0,#2E2670);border:1.5px solid rgba(196,182,255,.45);color:#E6E0FF;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}
.qs2 .qs-me{filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.qs2.found .qs-radar::before{background:radial-gradient(circle,rgba(60,203,151,.35) 0 38%,rgba(22,58,48,.9) 70%,#132A24);border-color:#3CCB97;box-shadow:0 0 44px rgba(60,203,151,.45)}
.qs2 .qs-title{font-size:25px;color:#fff;text-shadow:0 2px 14px rgba(140,120,255,.35)}
.qs2.found .qs-title{color:#6FF0B8}
.qs-timer{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 12px;border-radius:16px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.1)}
.qs-timer svg{width:22px;height:22px;color:#7FE3FF;animation:etaTick 1.6s ease-in-out infinite}
.qs2 .qs-time{font:800 34px/1 var(--f-display);color:#fff;letter-spacing:.02em}
.qs-rank{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);text-align:left}
.qs-rank-ic{flex:none;display:grid;place-items:center}.qs-rank-ic svg{width:34px;height:34px}
.qs-rank-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.qs-rank-t small{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#B6A8F2}
.qs-rank-t b{font-size:16px;color:var(--rc,#fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs2.found .qs-rank-t b{color:#fff}
.qs-hint{margin:0;font-size:12.5px;color:#BDB2EA;max-width:330px;line-height:1.45}
.qs-cancel{width:100%;border-radius:16px!important;background:rgba(240,106,130,.12)!important;border:1px solid rgba(240,106,130,.45)!important;color:#FFB3C1!important;box-shadow:0 3px 0 rgba(0,0,0,.3)!important}
.qs-cancel:hover{background:rgba(240,106,130,.2)!important}
.qs-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.qs-tags span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:11.5px;font-weight:700;color:#D3CAF7}
@media (max-width:720px){.qsearch.qs2{--qs-off:150px}.qs-card{gap:10px}.qs2 .qs-radar{width:min(200px,52vw)}.qs2 .qs-time{font-size:30px}}
@media (max-height:760px){.qs-card{gap:8px}.qs2 .qs-radar{width:min(170px,44vw)}}
@media (prefers-reduced-motion:reduce){.deal *,.deal::after{animation:none!important}}
@media (prefers-reduced-motion:reduce){.pz2 *{animation:none!important}}
@media (prefers-reduced-motion:reduce){.hero-art *,.ml-cap,.card.mode.pickable::after{animation:none!important}}
#srvDown{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9000;width:min(560px,calc(100vw - 24px));display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 14px;border-radius:16px;background:#2a1430;border:1.5px solid #ff6b8b;color:#ffe3ea;box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:13px;line-height:1.4}
body:has(.nav) #srvDown{bottom:calc(92px + env(safe-area-inset-bottom))}
#srvDown b{grid-column:1;font-size:14px;color:#fff}
#srvDown span{grid-column:1}
#srvDown button{grid-column:2;grid-row:1/3;border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:800;background:#ff6b8b;color:#2a1430;cursor:pointer}
.cinv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cinv-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:14px}
.cinv-row .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cinv-row .who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cinv-row .btn{flex:none}
.cinv-on{color:var(--good);font-weight:800}
.cinv-box{border:2px solid color-mix(in srgb,var(--ginger) 55%,transparent)}