/* Zfighters Revived player site, round 2. Flat tiles (solid surface, 1px border, 14px radius) with a faded picture
   on the right, round profile pictures with VIP frames. */
:root{
  --bg:oklch(0.15 0.02 262);--surface:oklch(0.205 0.022 262);--surface-2:oklch(0.26 0.024 262);--surface-3:oklch(0.31 0.026 262);
  --border:oklch(0.33 0.024 262);--text:oklch(0.96 0.006 262);--dim:oklch(0.7 0.02 262);--faint:oklch(0.52 0.02 262);
  --accent:oklch(0.76 0.16 62);--accent-ink:oklch(0.22 0.05 62);--gold:oklch(0.86 0.15 88);--gold-ink:oklch(0.26 0.06 88);
  --blue:oklch(0.78 0.13 230);--violet:oklch(0.72 0.16 300);--good:oklch(0.74 0.14 155);--good-ink:oklch(0.2 0.05 155);
  --bad:oklch(0.68 0.18 25);--bad-ink:oklch(0.99 0.01 25);--warn:oklch(0.83 0.15 88);
  --r:14px;--nav:66px;--side:236px;--head:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
img{max-width:100%}
#ki{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.7}
#app{position:relative;z-index:1}
.boot{min-height:60vh;display:grid;place-items:center}
.spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--accent);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
h1,h2,h3{font-family:var(--head);letter-spacing:.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(26px,6vw,36px);line-height:1.1}
h2{font-size:19px;line-height:1.2}
h3{font-size:16.5px;line-height:1.25}
.dim{color:var(--dim)}.faint{color:var(--faint)}
.label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
svg{flex:none}

/* ---------- layout ---------- */
.shell{min-height:100vh;padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 12px)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));
  background:color-mix(in oklab,var(--bg) 88%,transparent);border-bottom:1px solid var(--border)}
.top .logo{height:30px;display:block}
.top .sp{flex:1}
.fsel{display:flex;align-items:center;gap:8px;min-width:0;max-width:56vw;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--border);background:var(--surface)}
.fsel img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.fsel span{min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsel small{color:var(--dim);font-weight:700}
.vipchip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font:700 12px var(--head);color:var(--gold-ink);background:var(--gold);white-space:nowrap}
.iconbtn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface);flex:none}
.iconbtn svg{width:18px;height:18px}
main.page{max-width:820px;margin:0 auto;padding:20px 16px 10px;animation:pageIn .3s ease both}
main.page.wide{max-width:1100px}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.phead{text-align:center;margin:4px auto 18px;max-width:560px}
.phead p{margin:8px 0 0;color:var(--dim)}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);background:color-mix(in oklab,var(--bg) 94%,transparent);
  border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.nav a,.nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--nav);color:var(--faint);font-size:11px;font-weight:600}
.nav svg{width:23px;height:23px}
.nav .on{color:var(--text)}.nav .on svg{color:var(--accent)}
.nav .on:after{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--accent)}
.nav .vip svg{color:var(--gold)}
.nav .badge{position:absolute;top:9px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:var(--bad-ink);font-size:10.5px;font-weight:800;display:grid;place-items:center}
.nav .brand,.nav .full{display:none}
@media (min-width:900px){
  .shell{padding-left:var(--side);padding-bottom:24px}
  .nav{top:0;right:auto;width:var(--side);grid-template-columns:1fr;align-content:start;gap:2px;padding:14px 12px;border-top:0;border-right:1px solid var(--border);overflow:auto}
  .nav .brand{display:flex;align-items:center;justify-content:center;height:56px;margin-bottom:10px}
  .nav .brand img{height:38px}
  .nav a,.nav button{flex-direction:row;justify-content:flex-start;gap:12px;height:44px;padding:0 14px;border-radius:11px;font-size:14.5px}
  .nav .full{display:flex}.nav .more{display:none}
  .nav a:hover{background:var(--surface);color:var(--text)}
  .nav .on{background:var(--surface-2)}
  .nav .on:after{top:11px;bottom:11px;left:0;right:auto;width:3px;height:auto;border-radius:0 4px 4px 0}
  .nav .badge{position:static;margin-left:auto}
  .nav .sep{height:1px;background:var(--border);margin:8px 6px}
  .top .logo{display:none}
}

/* ---------- tiles (flat, picture fading in from the right) ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;min-width:0}
.card.bgpic{overflow:hidden;isolation:isolate}
.bgpic>.pic{position:absolute;right:-6px;bottom:0;top:0;width:58%;z-index:-1;pointer-events:none;display:flex;justify-content:flex-end;align-items:flex-end;
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.55),rgba(0,0,0,.25) 45%,transparent 92%);mask-image:linear-gradient(to left,rgba(0,0,0,.55),rgba(0,0,0,.25) 45%,transparent 92%)}
.bgpic>.pic img{height:118%;max-width:none;object-fit:contain;object-position:right bottom}
.tint-good{background:color-mix(in oklab,var(--good) 16%,var(--surface));border-color:color-mix(in oklab,var(--good) 45%,var(--border))}
.tint-warn{background:color-mix(in oklab,var(--warn) 14%,var(--surface));border-color:color-mix(in oklab,var(--warn) 45%,var(--border))}
.tint-bad{background:color-mix(in oklab,var(--bad) 14%,var(--surface));border-color:color-mix(in oklab,var(--bad) 45%,var(--border))}
.tint-info{background:color-mix(in oklab,var(--blue) 12%,var(--surface));border-color:color-mix(in oklab,var(--blue) 40%,var(--border))}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:12px;min-width:0}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.grid2{grid-template-columns:1fr 1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border-radius:12px;font-weight:700;font-size:15px;
  color:var(--accent-ink);background:var(--accent);transition:transform .12s,filter .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}.btn:hover{filter:brightness(1.06)}
.btn svg{width:18px;height:18px}
.btn.sec{color:var(--text);background:var(--surface-2)}
.btn.good{background:var(--good);color:var(--good-ink)}
.btn.bad{background:var(--bad);color:var(--bad-ink)}
.btn.small{min-height:36px;padding:0 13px;font-size:13px;border-radius:10px}
.btn.small svg{width:15px;height:15px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--dim);white-space:nowrap}
.tag.o{background:color-mix(in oklab,var(--accent) 22%,var(--surface-2));color:var(--text)}
.tag.g{background:var(--good);color:var(--good-ink)}.tag.b{background:var(--bad);color:var(--bad-ink)}.tag.w{background:var(--warn);color:var(--gold-ink)}.tag.i{background:var(--blue);color:oklch(0.22 0.05 230)}
input,textarea,select{width:100%;font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:11px 13px;min-height:46px;outline:none}
textarea{min-height:100px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:12px;color:var(--dim);font-weight:600}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface)}
.seg button{flex:1;min-height:36px;padding:0 10px;border-radius:9px;font-size:13px;font-weight:700;color:var(--dim);white-space:nowrap}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip{min-height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--border);color:var(--dim);font-weight:700;font-size:13px}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface-2);cursor:pointer}
.switch i{position:relative;width:46px;height:28px;border-radius:99px;background:var(--surface-3);flex:none;transition:background .2s}
.switch i:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.switch.on i{background:var(--accent)}.switch.on i:after{transform:translateX(18px)}
.empty{text-align:center;padding:30px 14px;color:var(--dim);font-size:14px}
.note{font-size:13px;color:var(--dim)}
#toast{position:fixed;left:50%;bottom:calc(var(--nav) + 16px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;z-index:90;padding:11px 16px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border);font-weight:600;font-size:14px;max-width:min(92vw,420px);text-align:center;transition:.25s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){#toast{bottom:24px;left:calc(50% + var(--side)/2)}}
.sheetbg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;max-width:520px;max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:18px 18px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom));animation:up .25s ease}
@keyframes up{from{transform:translateY(30px);opacity:.5}}
@media (min-width:700px){.sheetbg{align-items:center}.sheet{border-radius:16px}}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--surface-3);margin:-4px auto 14px}
.sheet h2{text-align:center;margin-bottom:14px}

/* round profile pictures with VIP frames (frame + colour unlock with VIP) */
.dp{--dp:44px;--c:var(--blue);position:relative;width:var(--dp);height:var(--dp);flex:none;border-radius:50%}
.dp img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--surface-2);display:block}
.dp:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--c);z-index:0}
.dp.f-plain:before{inset:-2px;background:var(--border)}
.dp.f-bronze:before{background:linear-gradient(135deg,#f0b27a,#8a4b1f)}
.dp.f-silver:before{background:linear-gradient(135deg,#f4f6fb,#8a93a8)}
.dp.f-gold:before{background:linear-gradient(135deg,#fff3a6,#e0a100);box-shadow:0 0 12px rgba(255,200,40,.45)}
.dp.f-ultra:before,.dp.f-god:before,.dp.f-shenron:before{inset:-4px;background:conic-gradient(from var(--a,0deg),var(--c),#fff,var(--c),transparent,var(--c));animation:spinA 3s linear infinite}
.dp.f-god:before{background:conic-gradient(from var(--a,0deg),#b56bff,#46c8ff,#fff,#b56bff,#ff5ef1,#b56bff);box-shadow:0 0 16px rgba(181,107,255,.7)}
.dp.f-shenron:before{inset:-5px;background:conic-gradient(from var(--a,0deg),#2ecc71,#ffd23f,#2ecc71,#0b6,#ffd23f,#2ecc71);box-shadow:0 0 18px rgba(46,204,113,.7)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spinA{to{--a:360deg}}
.c-blue{--c:#46c8ff}.c-orange{--c:#ff8a1f}.c-green{--c:#35d07f}.c-pink{--c:#ff5ec8}.c-red{--c:#ff4655}.c-gold{--c:#ffd23f}.c-violet{--c:#a970ff}
.c-rainbow{--c:#ff8a1f}.c-rainbow.f-plain:before,.c-rainbow.f-bronze:before,.c-rainbow.f-silver:before,.c-rainbow.f-gold:before{background:conic-gradient(#ff4655,#ffd23f,#35d07f,#46c8ff,#a970ff,#ff4655)}

/* ---------- sign in ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login .box{width:100%;max-width:390px;display:flex;flex-direction:column;gap:14px;animation:pageIn .4s ease both}
.wordmark{font-family:var(--head);font-weight:700;text-align:center;line-height:.95;user-select:none;margin-bottom:6px}
.wordmark .z{display:block;font-size:58px;font-style:italic;background:linear-gradient(180deg,#fff3b0,#ffb020 45%,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .rev{display:block;font-size:15px;letter-spacing:.5em;margin-top:8px;color:var(--blue);text-indent:.5em}
.login .hint{font-size:13.5px;color:var(--dim);text-align:center;margin:0}
.err{padding:10px 14px;border-radius:12px;background:color-mix(in oklab,var(--bad) 18%,var(--surface));color:#ffc2c6;font-weight:600;font-size:14px;text-align:center}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- home ---------- */
.play{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:18px;border-radius:16px;overflow:hidden;
  background:linear-gradient(110deg,#ff6a00,#ffb020 60%,#ffd23f);color:#1d0f00}
.play:before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,255,255,.5) 80%,transparent 88%);animation:rot 4s linear infinite;mix-blend-mode:overlay}
.play .ico{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#1d0f00;color:#ffd23f}
.play .ico svg{width:24px;height:24px;margin-left:4px}
.play b{position:relative;display:block;font:700 26px var(--head);letter-spacing:.05em}
.play small{position:relative;display:block;font-weight:600;opacity:.75}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:700px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex;flex-direction:column;gap:4px;padding:14px;min-height:96px;justify-content:flex-end}
.tile .ti{position:absolute;top:12px;left:14px;width:30px;height:30px;color:var(--accent)}
.tile b{font-size:15px}.tile span{font-size:12.5px;color:var(--dim);line-height:1.35}
.tile:hover{border-color:var(--surface-3)}
.fighters{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:700px){.fighters{grid-template-columns:1fr 1fr}}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.nums div{background:var(--surface-2);border-radius:10px;padding:6px 9px;min-width:0}
.nums small{display:block;font-size:11px;color:var(--dim)}.nums b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- news ---------- */
.hero-news{overflow:hidden;padding:0}
.hero-news .stage{display:flex;align-items:flex-end;justify-content:center;gap:8px;height:210px;padding:12px 12px 0;
  background:radial-gradient(70% 90% at 50% 100%,color-mix(in oklab,var(--violet) 40%,transparent),transparent 70%),var(--surface-2)}
.hero-news .stage img{height:100%;min-width:0;max-width:33%;object-fit:contain;object-position:bottom}
.hero-news .body{padding:16px;text-align:center}
.notes{display:flex;flex-direction:column;gap:10px}
.nt{padding:0;overflow:hidden}
.nt summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.nt summary::-webkit-details-marker{display:none}
.nt .d{flex:none;width:50px;text-align:center;border-radius:10px;padding:5px 0;background:var(--surface-2);font-family:var(--head)}
.nt .d b{display:block;font-size:19px;line-height:1}.nt .d small{font-size:10.5px;color:var(--dim);text-transform:uppercase}
.nt .t{flex:1;min-width:0}.nt .t b{display:block;font-size:15px}
.nt .chev{width:20px;height:20px;color:var(--dim);transition:transform .25s}
.nt[open] .chev{transform:rotate(180deg)}
.nt .in{padding:0 16px 16px 76px}
.nt h4{margin:12px 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.nt ul{margin:0;padding-left:18px}.nt li{margin:0 0 6px;color:oklch(0.88 0.01 262)}
@media (max-width:520px){.nt .in{padding-left:16px}}

/* ---------- roadmap: line down the middle, steps alternate sides, fighters on the other side ---------- */
.road{position:relative;padding:6px 0 0}
.road .rail,.road .lit{position:absolute;left:50%;top:0;width:4px;margin-left:-2px;border-radius:4px}
.road .rail{bottom:0;background:linear-gradient(180deg,var(--surface-3),transparent)}
.road .lit{height:0;background:linear-gradient(180deg,#ffd23f,#ff8a1f);box-shadow:0 0 12px rgba(255,138,31,.7);transition:height 1.4s cubic-bezier(.3,.8,.3,1)}
.road .runner{position:absolute;left:50%;margin-left:-5px;width:10px;height:56px;border-radius:10px;background:linear-gradient(180deg,transparent,rgba(70,200,255,.85),transparent);animation:run 3.4s linear infinite}
@keyframes run{from{top:0;opacity:0}10%{opacity:1}90%{opacity:1}to{top:calc(100% - 56px);opacity:0}}
.node{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;padding-bottom:26px}
.node .dot{grid-column:2;grid-row:1;display:flex;justify-content:center;z-index:1}
.node .dot i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--surface-3);background:var(--bg);font:700 12px var(--head);color:var(--dim)}
.node.done .dot i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.node.done .dot svg{width:13px;height:13px}
.node.now .dot i{width:32px;height:32px;background:#fff;border:5px solid var(--blue);box-shadow:0 0 0 6px rgba(70,200,255,.2),0 0 26px rgba(70,200,255,.9);animation:beacon 1.8s ease-in-out infinite}
@keyframes beacon{50%{box-shadow:0 0 0 12px rgba(70,200,255,.05),0 0 40px rgba(70,200,255,1)}}
.node.next .dot i{border-color:var(--blue)}
.node.mystery .dot i{border-style:dashed;border-color:var(--violet);color:var(--violet)}
.node .rc{grid-row:1;min-width:0}
.node .art{grid-row:1;min-width:0;display:flex;align-items:flex-end;justify-content:center;gap:4px;height:190px;padding:0 4px}
.node .art img{flex:1 1 0;min-width:0;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.node .art img.myst{opacity:.95}
.node.l .rc{grid-column:1}.node.l .art{grid-column:3}
.node.r .rc{grid-column:3}.node.r .art{grid-column:1}
.node.now .rc .card{border-color:var(--blue);background:color-mix(in oklab,var(--blue) 12%,var(--surface))}
.node.mystery .rc .card{border-style:dashed;border-color:color-mix(in oklab,var(--violet) 55%,var(--border));background:color-mix(in oklab,var(--violet) 8%,var(--surface))}
.rc .card{padding:12px}
.rc .meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:6px}
.rc h3{margin-bottom:4px;font-size:15px}
.rc p{margin:0;color:oklch(0.85 0.012 262);font-size:13px;line-height:1.4}
.here{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--blue);text-transform:uppercase}
.here:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.rc .adm{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.road .tail{position:relative;height:80px}
.road .tail span{position:absolute;left:50%;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:var(--surface-3)}
@media (min-width:700px){.node{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}.node .art{height:260px}.rc .card{padding:16px}.rc h3{font-size:17px}.rc p{font-size:14px}}

/* ---------- wishlist ---------- */
.wish{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}
.st{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.st svg{width:18px;height:18px}
.st.pending{background:color-mix(in oklab,var(--warn) 20%,var(--surface-2));color:var(--warn)}
.st.progress{background:color-mix(in oklab,var(--blue) 20%,var(--surface-2));color:var(--blue)}.st.progress svg{animation:rot 2.4s linear infinite}
.st.done{background:var(--good);color:var(--good-ink)}
.st.declined{background:var(--bad);color:var(--bad-ink)}
.wish .tx b{display:block;font-size:15.5px;overflow-wrap:anywhere}
.wish .tx p{margin:4px 0 0;color:oklch(0.86 0.012 262);font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.by{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:8px;font-size:12.5px;color:var(--dim)}
.by button{font-size:12.5px;color:var(--dim)}.by button.a{color:var(--accent);font-weight:700}
.reply{margin-top:10px;padding:9px 12px;border-radius:10px;background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent);font-size:13.5px}
.reply b{color:var(--accent);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.votes{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:42px}
.votes button{width:36px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--dim);background:var(--surface-2)}
.votes button svg{width:18px;height:18px}
.votes button.up.on{background:var(--good);color:var(--good-ink)}
.votes button.dn.on{background:var(--bad);color:var(--bad-ink)}
.votes b{font:700 15px var(--head)}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;font-size:12.5px;color:var(--dim);margin-bottom:14px}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.legend .st{width:22px;height:22px;border-radius:7px;display:grid;place-items:center}.legend .st svg{width:13px;height:13px}
.fab{position:fixed;right:16px;bottom:calc(var(--nav) + 14px + env(safe-area-inset-bottom));z-index:25;display:flex;align-items:center;gap:8px;min-height:50px;padding:0 20px;border-radius:999px;
  font-weight:800;color:var(--accent-ink);background:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.fab svg{width:20px;height:20px}
.padfab{padding-bottom:90px}
@media (min-width:900px){.fab{bottom:24px;right:24px}}

/* ---------- ranks ---------- */
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:end;margin-bottom:14px}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 6px 12px;overflow:hidden;isolation:isolate}
.pod .body{height:120px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px}
.pod .body img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.pod.p1 .body{height:160px}
.pod .medal{position:absolute;top:8px;left:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--head);color:#1d1300}
.pod.p1 .medal{background:#ffd23f}.pod.p2 .medal{background:#d9dee8}.pod.p3 .medal{background:#e7a46a}
.pod.p1{border-color:color-mix(in oklab,var(--gold) 60%,var(--border));background:color-mix(in oklab,var(--gold) 10%,var(--surface))}
.pod b{font-size:13.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod small{font-size:11.5px;color:var(--dim)}
.pod .pw{font:700 14px var(--head);color:var(--gold)}
.rrow{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px}
.rrow .n{font:700 16px var(--head);color:var(--dim);text-align:center}
.rrow .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .who small{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .pw{font:700 15px var(--head);text-align:right}
.rrow .pw small{display:block;font:600 11px Inter,sans-serif;color:var(--dim)}
.rrow.me{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,var(--surface))}
.list{display:flex;flex-direction:column;gap:8px}
.pickgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:260px;overflow:auto;padding:2px}
.pickgrid button{aspect-ratio:1;border-radius:12px;border:2px solid var(--border);overflow:hidden;background:var(--surface-2)}
.pickgrid button img{width:100%;height:100%;object-fit:cover;display:block}
.pickgrid button.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 40%,transparent)}
.framegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.framegrid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;border:2px solid var(--border);background:var(--surface-2);font-size:11px;font-weight:700;color:var(--dim)}
.framegrid button.on{border-color:var(--accent);color:var(--text)}
.framegrid button[disabled]{opacity:.45}
.swatches{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.swatches button{position:relative;width:34px;height:34px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border);background:var(--c)}
.swatches button.c-rainbow{background:conic-gradient(#ff4655,#ffd23f,#35d07f,#46c8ff,#a970ff,#ff4655)}
.swatches button.on{box-shadow:0 0 0 2px var(--text)}
.swatches button[disabled]{opacity:.35}
.swatches button small{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:9.5px;color:var(--dim);white-space:nowrap}
.preview{display:flex;justify-content:center;padding:6px 0}

/* ---------- chat ---------- */
.chatwrap{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.chatwrap{grid-template-columns:300px minmax(0,1fr);align-items:start}}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;cursor:pointer;width:100%;text-align:left}
.crow b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow small{display:block;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .un{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;display:grid;place-items:center}
.crow.on{border-color:var(--accent)}
.thread{display:flex;flex-direction:column;min-height:60vh;padding:0;overflow:hidden}
.thead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.thead b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 12px;overflow:auto;max-height:58vh}
.bub{max-width:80%;padding:8px 12px;border-radius:14px;background:var(--surface-2);font-size:14.5px;overflow-wrap:anywhere;white-space:pre-wrap}
.bub.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.bub:not(.me){align-self:flex-start;border-bottom-left-radius:4px}
.bub small{display:block;font-size:10.5px;opacity:.65;margin-top:2px}
.compose{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}
.compose input{flex:1}
.safety{font-size:12px;color:var(--faint);text-align:center;padding:0 12px 10px}

/* ---------- trade / gift ---------- */
.cardpick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:300px;overflow:auto;padding:2px}
@media (min-width:600px){.cardpick{grid-template-columns:repeat(6,1fr)}}
.cardpick button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:12px;border:2px solid var(--border);background:var(--surface-2);font-size:10.5px;font-weight:600;color:var(--dim);min-width:0}
.cardpick button img{width:100%;aspect-ratio:1;border-radius:8px;object-fit:contain;padding:2px}
.cardpick button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardpick button.on{border-color:var(--accent);color:var(--text)}
.cardpick button[disabled]{opacity:.35}
.swap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;text-align:center}
.swap img{width:64px;height:84px;object-fit:contain}
.swap .ar{width:28px;height:28px;color:var(--accent)}
.swap b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rules{margin:0;padding-left:18px;font-size:13.5px;color:oklch(0.86 0.012 262)}.rules li{margin:0 0 5px}

/* ---------- locked (shop, gifts) ---------- */
.locked{position:relative;overflow:hidden;border-radius:16px}
.locked .preview2{filter:blur(2.5px) saturate(.7);opacity:.5;pointer-events:none;user-select:none}
.locked .veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;
  background:radial-gradient(60% 50% at 50% 45%,color-mix(in oklab,var(--bg) 55%,transparent),color-mix(in oklab,var(--bg) 92%,transparent))}
.padlock{width:70px;height:70px;border-radius:20px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border)}
.padlock svg{width:32px;height:32px;color:var(--gold)}
.srv{display:flex;align-items:center;gap:12px;padding:11px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2)}
.srv.sel{border-color:var(--accent)}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.items div{border-radius:12px;padding:10px;background:var(--surface-2);text-align:center;font-size:12px}
.items i{display:block;height:40px;border-radius:9px;margin-bottom:6px;background:var(--surface-3)}
.total{display:flex;justify-content:space-between;align-items:center;font:700 18px var(--head)}

/* ---------- VIP ---------- */
.vip-page{max-width:1080px;margin:0 auto;padding:0 0 30px;animation:pageIn .35s ease both}
.vhero{position:relative;overflow:hidden;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:30px 16px 22px;text-align:center;
  background:radial-gradient(60% 55% at 50% 58%,rgba(255,180,40,.25),transparent 70%),radial-gradient(90% 60% at 50% 100%,rgba(169,112,255,.28),transparent 70%)}
.vhero .rays{position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;opacity:.3;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,63,.35) 0deg 4deg,transparent 4deg 18deg);animation:rot 60s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%)}
.vhero .dragon{position:absolute;top:12px;left:50%;width:min(78vw,400px);transform:translateX(-50%);filter:drop-shadow(0 0 26px rgba(255,200,60,.55))}
.vtitle{position:relative;font-family:var(--head);font-weight:700;font-size:clamp(64px,18vw,116px);line-height:.9;letter-spacing:.06em;
  background:linear-gradient(100deg,#fff6c2 0%,#ffd23f 25%,#ff8a1f 45%,#fff6c2 55%,#ffd23f 75%,#ff8a1f 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;filter:drop-shadow(0 0 22px rgba(255,170,30,.5))}
@keyframes shine{to{background-position:-250% 0}}
.vsub{position:relative;max-width:520px;color:oklch(0.92 0.02 300);margin:6px 0 0}
.vme{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--surface);border:1px solid color-mix(in oklab,var(--gold) 45%,var(--border))}
.vme b{font-family:var(--head);font-size:18px;color:var(--gold)}
.vrail{position:sticky;top:calc(58px + env(safe-area-inset-top));z-index:15;display:flex;gap:6px;overflow-x:auto;padding:10px 16px;background:color-mix(in oklab,var(--bg) 92%,transparent);scrollbar-width:none}
.vrail::-webkit-scrollbar{display:none}
@media (min-width:900px){.vrail{justify-content:center}}
.vrail button{flex:none;min-width:42px;height:42px;padding:0 10px;border-radius:12px;font:700 15px var(--head);color:var(--dim);border:1px solid var(--border);background:var(--surface);transition:.2s}
.vrail button.got{color:var(--gold-ink);background:var(--gold);border-color:var(--gold)}
.vrail button.cur{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text);transform:translateY(-1px)}
.vrail button.myst:not(.got){color:var(--violet)}
.vfirst{position:relative;margin:16px;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:20px;
  background:radial-gradient(80% 120% at 85% 50%,rgba(150,40,255,.42),transparent 60%),color-mix(in oklab,var(--violet) 10%,var(--surface));border:1px solid color-mix(in oklab,var(--violet) 50%,var(--border))}
.vfirst img{height:200px;filter:drop-shadow(0 0 16px rgba(170,60,255,.75))}
.tiers{display:flex;flex-direction:column;gap:16px;padding:0 16px}
.tier{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface);scroll-margin-top:130px;
  opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1)}
.tier.in{opacity:1;transform:none}
.tier .bg{position:absolute;inset:0;background-size:cover;background-position:center 70%;opacity:.38}
.tier .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,color-mix(in oklab,var(--surface) 82%,transparent) 50%,color-mix(in oklab,var(--surface) 30%,transparent) 100%)}
.tier.got{border-color:color-mix(in oklab,var(--gold) 55%,var(--border))}
.tier.myst{border-color:color-mix(in oklab,var(--violet) 45%,var(--border))}
.tier .glow{position:absolute;inset:-1px;border-radius:16px;pointer-events:none;background:conic-gradient(from var(--a,0deg),transparent 0 75%,rgba(255,210,63,.7) 85%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;animation:spinA 6s linear infinite}
.tier .tick{position:absolute;top:12px;right:12px;z-index:3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--good);color:var(--good-ink);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--good) 30%,transparent),0 6px 16px rgba(0,0,0,.4)}
.tier .tick svg{width:28px;height:28px;stroke-width:3}
.tier .in2{position:relative;display:grid;grid-template-columns:1fr;gap:14px;padding:20px}
@media (min-width:760px){.tier .in2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}}
.tier .lvl{display:flex;align-items:center;gap:14px;padding-right:56px}
.tier .num{font:700 62px/0.9 var(--head);background:linear-gradient(180deg,#fff6c2,#ffb020 60%,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:1.15em;text-align:center}
.tier .lvl small{display:block;font-size:12px;color:var(--dim);font-weight:600}
.tier .lvl b{font-family:var(--head);font-size:20px}
.sect{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:2px 0 8px}
.perks{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.perks li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.perks li svg{width:16px;height:16px;margin-top:3px;color:var(--gold)}
.rewards{display:flex;flex-wrap:wrap;gap:8px}
.rw{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:11px;background:var(--surface-2);font-size:13px;font-weight:600;max-width:100%}
.rw img{width:40px;height:40px;object-fit:contain}
.rw .ph{width:34px;height:34px;border-radius:8px;background:var(--surface-3)}
.rw span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw small{color:var(--gold);font-weight:800}
.tier .side{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;min-height:210px}
.tier .side .drg{flex:none;width:180px;height:200px;max-width:48%;display:flex;align-items:center;justify-content:center}
.tier .side .drg img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,210,63,.35))}
.tier .side .gb{position:relative;flex:none;height:230px;max-width:48%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.tier .side .gb img{height:calc(100% - 34px);max-width:100%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(170,60,255,.65))}
.tier .side .gb img.myst{filter:drop-shadow(0 0 16px rgba(169,112,255,.8))}
.tier .plus{margin-top:6px;white-space:nowrap;font:700 12px var(--head);color:#fff;padding:3px 10px;border-radius:10px;background:linear-gradient(135deg,#8a2be2,#ff3cac);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.tier .plus b{font-size:16px;margin-left:2px}
.vfoot{margin:20px 16px 0;text-align:center}
.row>svg,.card>svg{width:20px;height:20px}
.tile .ti{position:static;width:46px;height:46px;margin-bottom:auto;display:grid;place-items:center;border-radius:13px;color:var(--accent);background:color-mix(in oklab,var(--accent) 14%,var(--surface-2))}
.tile .ti svg{width:24px;height:24px}
.tile{min-height:112px;justify-content:flex-start;gap:6px}
.tile b{margin-top:10px}
@media (min-width:900px){.nav{bottom:0}}
.node .art .bigdate{align-self:center;display:flex;flex-direction:column;align-items:center;font-family:var(--head);color:var(--surface-3);line-height:.9}
.node .art .bigdate b{font-size:64px}.node .art .bigdate span{font-size:20px;letter-spacing:.2em;text-transform:uppercase}
.node.done .art .bigdate{color:color-mix(in oklab,var(--accent) 45%,var(--surface-2))}
@media (max-width:699px){.rc .adm{gap:4px}.rc .adm .btn.small{min-height:30px;padding:0 8px}}
@media (min-width:700px){.node .art .bigdate b{font-size:90px}}
/* undated group of smaller patches sitting on the line */
.node.minor{display:flex;justify-content:center;padding-bottom:26px}
.mp{position:relative;z-index:1;max-width:min(92%,460px);border-radius:14px;border:1px dashed var(--surface-3);background:var(--bg)}
.mp summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--dim)}
.mp summary::-webkit-details-marker{display:none}
.mp summary svg{width:14px;height:14px;transition:transform .2s}
.mp[open] summary svg{transform:rotate(45deg)}
.mp .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--surface-2);color:var(--text);font-size:11px;display:grid;place-items:center}
.mp ul{margin:0;padding:2px 16px 12px 32px;font-size:13px;color:oklch(0.86 0.012 262)}
.mp li{margin:0 0 4px}
.mp[open]{background:var(--surface);border-style:solid;border-color:var(--border)}
.mp .adm{display:flex;gap:6px;justify-content:center;padding:0 0 10px}

.pod .medal{z-index:2}
.tier .side .drg.wide{width:250px;max-width:56%}

/* VIP-only roadmap steps (2026-11-07) */
.tag.vipt{background:var(--gold);color:var(--gold-ink)}
.node.locked .dot i{border-color:var(--gold);color:var(--gold)}
.node.locked .dot i svg{width:14px;height:14px}
.node.locked .rc .card{border-style:dashed;border-color:color-mix(in oklab,var(--gold) 60%,var(--border));background:color-mix(in oklab,var(--gold) 8%,var(--surface))}

/* leaderboard: drop-downs, animated podium (purple, red, orange) and head to head (2026-11-07) */
.rsels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.rsels .field>span{font-size:12px}
.rsels select:disabled{opacity:.6}
button.pod,button.rrow{width:100%;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
button.pod{text-align:center}
.pod.p1,.pod.p2,.pod.p3{border-color:transparent;background:var(--surface)}
.pod.p1:before,.pod.p2:before,.pod.p3:before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from var(--a,0deg),var(--k1),var(--k2),transparent 40%,var(--k1) 60%,var(--k2),var(--k1));animation:spinA 4s linear infinite}
.pod.p1:after,.pod.p2:after,.pod.p3:after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:calc(var(--r) - 2px);background:linear-gradient(180deg,color-mix(in oklab,var(--k1) 22%,var(--surface)),var(--surface) 70%)}
.pod.p1{--k1:#b56bff;--k2:#ff5ef1;box-shadow:0 0 22px rgba(181,107,255,.45);animation:podGlow 2.6s ease-in-out infinite}
.pod.p2{--k1:#ff3b3b;--k2:#ff9a6b;box-shadow:0 0 16px rgba(255,59,59,.35)}
.pod.p3{--k1:#ff8a1a;--k2:#ffd23f;box-shadow:0 0 16px rgba(255,138,26,.35)}
.pod.p1 .medal{background:#c792ff}.pod.p2 .medal{background:#ff6b6b}.pod.p3 .medal{background:#ffa64d}
.pod.p1 .pw{color:#d6b0ff}.pod.p2 .pw{color:#ff8f8f}.pod.p3 .pw{color:#ffb766}
@keyframes podGlow{50%{box-shadow:0 0 34px rgba(181,107,255,.75)}}
@media (prefers-reduced-motion:reduce){.pod:before,.pod{animation:none!important}}
.vs{display:flex;flex-direction:column;gap:14px}
.vtop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.vside{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.vside b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vside small{color:var(--dim);font-size:12px}
.vmid{font:700 22px var(--head);color:var(--accent)}
.vscore{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.vscore .sc{display:flex;align-items:center;gap:14px;font:700 44px var(--head);line-height:1}
.vscore .sc i{font-style:normal;color:var(--dim);font-size:30px}
.vscore .sc .win{color:#4ade80}.vscore .sc .lose{color:#ff6b6b}
.vscore small{color:var(--dim);font-size:12.5px}
.vmodes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.vmodes span{font-size:12px;color:var(--dim);background:var(--surface-2);border-radius:999px;padding:3px 10px}
.vmodes b{color:var(--text);font-variant-numeric:tabular-nums}
.vstats{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.vrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:9px 12px;font-variant-numeric:tabular-nums}
.vrow+.vrow{border-top:1px solid var(--border)}
.vrow span{font:700 15px var(--head)}.vrow span:last-child{text-align:right}
.vrow small{color:var(--dim);font-size:12px;text-align:center}
.vrow .win{color:#4ade80}

/* soul trades (2026-11-07) */
.bcard{display:flex;gap:12px;align-items:center;min-width:0}
.bcard img{width:46px;height:58px;object-fit:contain;flex:none}
.bcard .bico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--dim);flex:none}
.bcard small{display:block;font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.bcard b{display:block;font-size:14.5px}
.bcard .note{display:block;font-size:12.5px;margin-top:2px}
.final{display:flex;gap:10px;align-items:center;font-size:13px}
.final svg{flex:none;width:18px;height:18px}
button.mreq{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
.bform .arrive{min-height:1em}
.tsect{font:700 12px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* world feed (2026-11-07) */
.frow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px}
.frow b{display:block;font-size:14px}.frow .srv{font:600 11px Inter,sans-serif;color:var(--dim);margin-left:4px}
.frow span{display:block;font-size:13.5px}.frow .faint{display:block;font-size:11.5px;margin-top:2px}
.frow .fimg{width:44px;height:52px;object-fit:contain}
.frow .fico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.frow.k-ladder .fico{color:var(--gold)}.frow.k-story .fico{color:var(--blue)}.frow.k-level .fico{color:var(--good,#4ade80)}
.frow.fresh{animation:fresh 1.6s ease-out}
@keyframes fresh{from{background:color-mix(in oklab,var(--accent) 30%,var(--surface));transform:translateY(-6px)}}
.ldot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4d4d;margin-right:8px;box-shadow:0 0 0 0 rgba(255,77,77,.6);animation:ldot 1.6s infinite}
@keyframes ldot{70%{box-shadow:0 0 0 8px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.wlive{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.wlive #hfeed div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.ldot,.frow.fresh{animation:none}}

/* world chat (2026-11-07) */
.wbox{display:flex;flex-direction:column;padding:0;overflow:hidden}
.wlist{height:min(62vh,560px);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.wmsg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.wmsg b{font-size:13.5px}.wmsg .srv{font:600 11px Inter,sans-serif;color:var(--dim)}.wmsg .faint{font:500 11px Inter,sans-serif}
.wmsg span{display:block;font-size:14px;overflow-wrap:anywhere}
.wmsg.mine b{color:var(--accent)}
.wmsg .stk{display:block;width:120px;height:120px;margin-top:4px}
.wadm{display:flex!important;gap:6px;margin-top:4px}
.wevt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px;color:var(--dim);background:var(--surface-2);border-radius:12px;padding:6px 10px}
.wevt b{color:var(--text)}.wevt .srv{font:600 11px Inter,sans-serif}.wevt .faint{font-size:11px}
.wevt .fico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface);color:var(--accent)}
.wevt .fico svg{width:16px;height:16px}.wevt img{width:30px;height:36px;object-fit:contain}
.wevt.k-ladder .fico,.wevt.k-gear .fico{color:var(--gold)}.wevt.k-story .fico{color:var(--blue)}
.wcompose{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;gap:6px;align-items:center;padding:10px;border-top:1px solid var(--border)}
.wcompose input{min-height:42px}
.wcompose .iconbtn{font-size:20px}
.wpick{border-top:1px solid var(--border);padding:10px;max-height:240px;overflow-y:auto}
.emogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}
.emogrid button{font-size:24px;background:none;border:0;padding:4px;cursor:pointer;border-radius:8px}
.emogrid button:hover{background:var(--surface-2)}
.stkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.stkgrid button{background:none;border:0;padding:0;cursor:pointer}.stkgrid img{width:100%;aspect-ratio:1;display:block}
.wclaim{display:flex;gap:10px;align-items:center;justify-content:center;text-align:center;font-size:13.5px;padding:10px 14px;border-radius:var(--r);background:var(--surface-2);color:var(--dim)}
.wclaim svg{width:18px;height:18px;flex:none}
.wclaim.ready{background:color-mix(in oklab,var(--gold) 22%,var(--surface));color:var(--text);justify-content:space-between;text-align:left}
.wclaim.done{color:var(--good,#4ade80)}
.wsv,.wtm{display:inline!important;font:600 11px Inter,sans-serif;color:var(--dim);background:none;border:0;padding:0;margin-left:4px}
.wtm{font-weight:500}
.cseg{margin:-4px 0 4px}.cseg .chip{display:inline-flex;align-items:center;gap:6px}.cseg .chip svg{width:15px;height:15px}

/* zeni bets (2026-11-07) */
.bets{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.bet{flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r);border:1px solid color-mix(in oklab,var(--gold) 50%,var(--border));background:color-mix(in oklab,var(--gold) 8%,var(--surface))}
.bet .bh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
.bet .bh b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bet .bh small{display:block;font-size:12px;color:var(--dim)}
.bstake{font:700 20px var(--head);color:var(--gold)}.bstake small{display:block;font:500 11.5px Inter,sans-serif;color:var(--dim)}
.wevt.k-bet .fico{font-size:16px}
.rpsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wcompose .iconbtn{width:38px;height:38px}

/* roadmap maintenance badge (2026-11-07) */
.node .art .maint{align-self:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--accent)}
.maint .mw{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;background:color-mix(in oklab,var(--accent) 16%,var(--surface));border:2px solid color-mix(in oklab,var(--accent) 50%,var(--border))}
.maint .mw svg{width:54px;height:54px;animation:spinA 0s}
.maint .mu{position:absolute;top:-8px;right:-10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--good,#4ade80);color:#06210f;box-shadow:0 0 14px rgba(74,222,128,.6);animation:mup 1.6s ease-in-out infinite}
.maint .mu svg{width:22px;height:22px}
.maint b{font:700 12px var(--head);letter-spacing:.12em;text-transform:uppercase}
@keyframes mup{50%{transform:translateY(-4px)}}

/* full-screen chats (host 2026-11-07): the chat covers the screen, the page under it can't scroll, back button exits */
html.chatopen,html.chatopen body{overflow:hidden;overscroll-behavior:none;height:100%}
.fullchat{position:fixed;top:0;left:0;right:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top,0px)}
@media (min-width:900px){.fullchat{left:var(--side);bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}}
.fullchat>*{width:100%;max-width:900px;margin-inline:auto}
.fullchat .thead{flex:none;background:var(--surface)}
.fullchat .wlist,.fullchat .msgs{flex:1;min-height:0;height:auto;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fullchat .wtop{flex:none;padding:8px 12px 0}.fullchat .wtop:empty{display:none}
.fullchat .wclaim{padding:8px 12px;font-size:13px}
.fullchat .wcompose,.fullchat .compose{flex:none;background:var(--surface)}
.fullchat .safety{flex:none;text-align:center;font-size:11.5px;color:var(--dim);padding:4px 0 6px}
.fullchat .boot{flex:1;display:grid;place-items:center}
.wsel{width:auto;min-height:34px;padding:4px 10px;margin-left:auto;font-size:13px}
.wcard{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;font:inherit;color:inherit;cursor:pointer;border-color:color-mix(in oklab,var(--accent) 45%,var(--border))}
.wcard .wci{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in oklab,var(--accent) 18%,var(--surface-2));color:var(--accent)}
.wcard b{display:block;font-size:16px}.wcard small{display:block;font-size:12.5px;color:var(--dim)}
.wcard.big{min-height:112px;padding:18px}.wcard.big .wci{width:58px;height:58px;border-radius:18px}.wcard.big .wci svg{width:30px;height:30px}.wcard.big b{font-size:19px}
.wcard .un{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font:700 12px var(--head);vertical-align:2px;margin-left:6px}
.subhead{display:flex;align-items:center;gap:10px;margin:4px 0 14px}.subhead b{font:700 22px var(--head)}
.tile.topup{border-color:color-mix(in oklab,var(--gold) 55%,var(--border))}.tile.topup .ti{color:var(--gold);background:color-mix(in oklab,var(--gold) 16%,var(--surface-2))}
.btn.gold{background:var(--gold);color:var(--gold-ink)}

/* roadmap admin view toggle (2026-11-07) */
.rview{display:flex;flex-direction:column;align-items:center;gap:8px;margin:-6px 0 16px;text-align:center}
.rview .seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}
.rview .seg button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--dim);font:600 13px Inter,sans-serif;padding:8px 14px;border-radius:999px;cursor:pointer}
.rview .seg button svg{width:15px;height:15px}
.rview .seg button.on{background:var(--accent);color:var(--accent-ink)}

/* top up page (2026-11-07) */
.tpwho{display:grid;gap:8px}
.tpf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:10px 12px}
.tpf b{display:block}.tpf small{display:block;color:var(--dim);font-size:12px}
.tpf.on{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 10%,var(--surface))}
.tpfirst{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 12%,var(--surface));text-align:center;font-size:14px}
.tppacks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.tppacks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tppack{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:14px}
.tppack b{font:700 20px var(--head);color:var(--text)}.tppack small{color:var(--dim);font-size:12px}
.tppack .pr{margin-top:8px;font:700 15px var(--head);color:var(--gold)}
.tppack .x2{position:absolute;top:10px;right:10px;font:700 11px var(--head);padding:2px 7px;border-radius:999px;background:var(--gold);color:var(--gold-ink)}
.tppack.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset;background:color-mix(in oklab,var(--gold) 10%,var(--surface))}
.tppay{display:flex;flex-direction:column;gap:10px;text-align:center}
.tpsum{font-size:15px}.tpsum small{color:var(--dim)}
paypal-button{display:block;width:100%}

/* promo codes (2026-11-07) */
.codecard{display:flex;flex-direction:column;gap:8px}
.codecard .code{font:700 18px ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--gold);overflow-wrap:anywhere}
.codecard.old{opacity:.6}.codecard.old .code{color:var(--dim);text-decoration:line-through}
.codecard .btn{align-self:flex-start}
.codecard.disc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;color:inherit;text-decoration:none}
.codecard .cico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface-2);color:#8c9eff}
.codecard.disc b,.codecard.disc small{white-space:normal;overflow:visible;text-overflow:clip}

/* roadmap tile tiers (host 2026-11-07): metal plates. gold = featured/summon fighters, silver = F2P, bronze =
   maintenance/patches/buffs, purple = big reworks. Bevel + sheen + a slow shine sweep; dark ink on the light metals. */
.node[class*=" t-"] .rc .card{position:relative;overflow:hidden;border-width:2px;border-style:solid;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.28),0 6px 18px rgba(0,0,0,.45)}
.node[class*=" t-"] .rc .card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);background-size:250% 100%;
  animation:plateShine 5.5s ease-in-out infinite}
@keyframes plateShine{0%,55%{background-position:160% 0}100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.node[class*=" t-"] .rc .card::after{animation:none;opacity:0}}
.node.t-gold .rc .card{border-color:#8a5d0a;background:linear-gradient(135deg,#a8770f 0%,#f3cf5d 22%,#fff4b8 38%,#e2ae2e 55%,#f8dc78 75%,#9c6c0d 100%)}
.node.t-silver .rc .card{border-color:#6c7480;background:linear-gradient(135deg,#8a929e 0%,#e3e8ee 22%,#ffffff 38%,#b9c1cb 55%,#eef1f5 75%,#7b838f 100%)}
.node.t-bronze .rc .card{border-color:#6b3712;background:linear-gradient(135deg,#7c4317 0%,#cf8a4e 22%,#f6c8a0 38%,#b06a32 55%,#d99a63 75%,#6e3a12 100%)}
.node.t-purple .rc .card{border-color:#3a0f73;background:linear-gradient(135deg,#3b0f78 0%,#8c4df0 24%,#d9bcff 40%,#7a3be0 58%,#a874ff 76%,#35106b 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.35),0 0 26px rgba(150,90,255,.55)}
.node.t-red .rc .card{border-color:#5e0a0a;background:linear-gradient(135deg,#6e0b0b 0%,#d8302b 24%,#ff9a86 40%,#c01f1a 58%,#e8473d 76%,#5a0808 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.35),0 0 24px rgba(230,50,40,.5)}
.node.t-red .rc .card,.node.t-red .rc h3,.node.t-red .rc p,.node.t-red .rc .faint{color:#fff!important;text-shadow:0 1px 2px rgba(60,0,0,.6)}
.node.t-gold .rc .card,.node.t-silver .rc .card,.node.t-bronze .rc .card{color:#24180a}
.node.t-gold .rc h3,.node.t-silver .rc h3,.node.t-bronze .rc h3{color:#1a1006;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.node.t-gold .rc p,.node.t-silver .rc p,.node.t-bronze .rc p,
.node.t-gold .rc .faint,.node.t-silver .rc .faint,.node.t-bronze .rc .faint{color:#3b2a12!important}
.node.t-silver .rc .card,.node.t-silver .rc h3,.node.t-silver .rc p,.node.t-silver .rc .faint{color:#1d232b!important}
.node.t-purple .rc .card,.node.t-purple .rc h3,.node.t-purple .rc p,.node.t-purple .rc .faint{color:#fff!important;text-shadow:0 1px 2px rgba(30,0,60,.6)}
.node[class*=" t-"] .rc .tag:not(.vipt):not(.i){background:rgba(0,0,0,.72);color:#fff}
.node[class*=" t-"] .rc .card>*{position:relative;z-index:1}
.node.t-gold.now .rc .card{outline:3px solid var(--blue);outline-offset:2px}

/* roadmap progress line + ticked dots in green (host 2026-11-07) */
.road .lit{background:linear-gradient(180deg,#7dffb0,#22c55e);box-shadow:0 0 12px rgba(34,197,94,.75)}
.node.done .dot i{background:#22c55e;border-color:#22c55e;color:#04210f}
/* "You are here": green border highlight + green beacon (host 2026-11-07) */
.node.herenode .rc .card{outline:3px solid #22c55e;outline-offset:3px;box-shadow:0 0 0 6px rgba(34,197,94,.18),0 0 26px rgba(34,197,94,.65)}
.node.herenode .dot i{width:32px;height:32px;background:#fff;border:5px solid #22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.2),0 0 26px rgba(34,197,94,.9);animation:beaconG 1.8s ease-in-out infinite}
@keyframes beaconG{50%{box-shadow:0 0 0 12px rgba(34,197,94,.05),0 0 40px rgba(34,197,94,1)}}
.here{color:#22c55e;text-shadow:0 0 6px rgba(0,0,0,.6)}.here:before{background:#22c55e;box-shadow:0 0 6px #22c55e}
/* rainbow tile: festivals / special events (host 2026-11-07, option A): a smooth still rainbow plate, no sweep */
.node.t-rainbow .rc .card{border-color:rgba(255,255,255,.8);
  background:linear-gradient(135deg,#e53935 0%,#fb8c00 18%,#fdd835 34%,#43a047 52%,#1e88e5 70%,#5e35b1 86%,#d81b60 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.45)}
.node.t-rainbow .rc .card::after{display:none}
.node.t-rainbow .rc .card{isolation:isolate}
/* rainbow tile fireworks (host 2026-11-07): still rainbow plate, little firework bursts pop in two corners */
.node.t-rainbow .rc .card::before{filter:none;background:none;content:"";position:absolute;inset:auto;z-index:0;
  width:4px;height:4px;border-radius:50%;top:26%;right:18%;box-shadow:26px 0px 0 0 #fff,23px 11px 0 0 #ffe14a,16px 20px 0 0 #ff6bd6,6px 25px 0 0 #fff,-6px 25px 0 0 #7cf2ff,-16px 20px 0 0 #ffe14a,-23px 11px 0 0 #fff,-26px 0px 0 0 #ffe14a,-23px -11px 0 0 #ff6bd6,-16px -20px 0 0 #fff,-6px -25px 0 0 #7cf2ff,6px -25px 0 0 #ffe14a,16px -20px 0 0 #fff,23px -11px 0 0 #ffe14a,14px 0px 0 0 #fff,10px 10px 0 0 #ffe14a,0px 14px 0 0 #ff6bd6,-10px 10px 0 0 #fff,-14px 0px 0 0 #7cf2ff,-10px -10px 0 0 #ffe14a,0px -14px 0 0 #fff,10px -10px 0 0 #ffe14a;opacity:0;animation:fwPop 3.2s ease-out infinite}
.node.t-rainbow .rc .card::after{display:block;content:"";position:absolute;inset:auto;z-index:0;background:none;
  width:4px;height:4px;border-radius:50%;bottom:22%;left:72%;box-shadow:22px 0px 0 0 #fff,19px 11px 0 0 #7cf2ff,11px 19px 0 0 #b388ff,0px 22px 0 0 #fff,-11px 19px 0 0 #ffb74d,-19px 11px 0 0 #69f0ae,-22px 0px 0 0 #fff,-19px -11px 0 0 #7cf2ff,-11px -19px 0 0 #b388ff,0px -22px 0 0 #fff,11px -19px 0 0 #ffb74d,19px -11px 0 0 #69f0ae,11px 0px 0 0 #fff,7px 9px 0 0 #7cf2ff,-2px 11px 0 0 #b388ff,-10px 5px 0 0 #fff,-10px -5px 0 0 #ffb74d,-2px -11px 0 0 #69f0ae,7px -9px 0 0 #fff;opacity:0;animation:fwPop 3.2s ease-out 1.6s infinite}
@keyframes fwPop{0%{opacity:0;transform:scale(.15)}8%{opacity:1}55%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.15) translateY(6px)}}
@media (prefers-reduced-motion:reduce){.node.t-rainbow .rc .card::before,.node.t-rainbow .rc .card::after{animation:none;opacity:0}}


.node.t-rainbow .rc .card,.node.t-rainbow .rc h3,.node.t-rainbow .rc p,.node.t-rainbow .rc .faint{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* black plate: VIP-exclusive fighters (host 2026-11-07): obsidian with a thin gold edge */
.node.t-black .rc .card{border-color:#c9a227;background:linear-gradient(135deg,#050505 0%,#2b2b2e 24%,#5a5a60 38%,#1a1a1c 55%,#3a3a3e 75%,#020202 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.6),0 0 20px rgba(201,162,39,.35)}
.node.t-black .rc .card,.node.t-black .rc h3,.node.t-black .rc p,.node.t-black .rc .faint{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.9)}

/* profiles + reports (2026-11-07) */
.wwho{cursor:pointer}
.prof{display:flex;flex-direction:column;gap:12px}
.prof .ph{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.prof .ph small{display:block;color:var(--dim);font-size:12.5px}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pstats div{background:var(--surface-2);border-radius:12px;padding:8px;text-align:center}.pstats small{display:block;font-size:11px;color:var(--dim)}.pstats b{font:700 18px var(--head)}
.plog{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto}
.pev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface-2);border-radius:12px;padding:7px 10px;font-size:13.5px}
.pev small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.pev .fico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface);color:var(--accent)}.pev .fico svg{width:16px;height:16px}
.pev img{width:28px;height:34px;object-fit:contain}
.tkt .tkres{border-radius:10px;padding:8px 10px;background:var(--surface-2);font-size:13.5px}
.tkt .tkres.good{background:color-mix(in oklab,#22c55e 18%,var(--surface));color:var(--text)}
.tkadm{display:flex;flex-direction:column;gap:8px}.tkadm select,.tkadm input{min-height:38px}

/* roadmap tile -> full patch notes (2026-11-08) */
.node .rc .card.tap{cursor:pointer}
.node .rc .card.tap:active{transform:scale(.99)}
.nsheet{display:flex;flex-direction:column;gap:8px}
.nsheet .nart{display:flex;justify-content:center;gap:6px;height:150px}.nsheet .nart img{height:100%;object-fit:contain;max-width:45%}
.nsheet .meta{display:flex;gap:8px;align-items:center}
.pnotes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}

/* credit rating (host 2026-11-08) */
.tag.dev{background:linear-gradient(135deg,#7c3aed,#c026d3);color:#fff;letter-spacing:.04em}
.crchip{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer;text-align:left}
.crchip svg{width:20px;height:20px;flex:none}.crchip span{flex:1}.crchip em{font-style:normal;font-weight:800;font-size:12px}
.crhero{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 16px 26px}
.crhero small{color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.crhero>b{font-size:44px;line-height:1.05;font-variant-numeric:tabular-nums}
.crhero>em{font-style:normal;font-weight:800;margin-bottom:12px}
.crbar{position:relative;display:flex;width:100%;height:10px;border-radius:99px;overflow:visible}.crbar i{height:100%;opacity:.85}.crbar i:first-child{border-radius:99px 0 0 99px}.crbar i:last-of-type{border-radius:0 99px 99px 0}
.crbar span{position:absolute;top:-5px;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:var(--text);box-shadow:0 0 0 2px var(--surface)}
.crticks{position:relative;width:100%;height:16px;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}.crticks span{position:absolute;transform:translateX(-50%)}.crticks span:first-child{transform:none}
.cb-red{background:#e5484d}.cb-orange{background:#f08c2e}.cb-blue{background:#3e8ef7}.cb-green{background:#30a46c}.cb-gold{background:#e2b53e}
.cr-red em{color:#e5484d}.cr-orange em{color:#f08c2e}.cr-blue em{color:#3e8ef7}.cr-green em{color:#30a46c}.cr-gold em{color:#d4a72c}
.crtiers{display:grid;gap:8px}.crtiers div{display:grid;grid-template-columns:12px 92px 1fr;gap:10px;align-items:center}.crtiers i{width:12px;height:12px;border-radius:3px}.crtiers span{color:var(--dim);min-width:0}
.crl{display:flex;gap:12px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}.crl:last-of-type{border-bottom:0}
.crl>span:last-child{min-width:0;flex:1}.crl small{display:block;color:var(--faint,var(--dim));font-size:11.5px}
.crd{flex:none;min-width:48px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;border-radius:8px;padding:1px 6px}.crd.up{color:var(--good);background:color-mix(in oklab,var(--good) 15%,transparent)}.crd.dn{color:var(--bad);background:color-mix(in oklab,var(--bad) 15%,transparent)}
.tkres.bad{color:var(--bad)}

/* sheets (host 2026-11-07): a close button, and only the sheet scrolls while it's open */
html.sheet-open,html.sheet-open body{overflow:hidden;overscroll-behavior:none}
.sheet{position:relative;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheetbg{overscroll-behavior:contain;touch-action:none}.sheet{touch-action:pan-y}
.sheetxw{position:sticky;top:0;height:0;z-index:5;display:flex;justify-content:flex-end}.sheetx{margin:-6px -6px 0 0;background:var(--surface-2);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.wwho{cursor:pointer}

.cb-mythic{background:linear-gradient(90deg,#a855f7,#ec4899,#f59e0b)}.cr-mythic em{background:linear-gradient(90deg,#a855f7,#ec4899,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}

/* credit tiers as Goku forms (host 2026-11-08): the form fades in on the right of leaderboard rows and the rating card */
.bgpic>.pic.crpic{width:46%;-webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.16),rgba(0,0,0,.07) 50%,transparent 90%);mask-image:linear-gradient(to left,rgba(0,0,0,.16),rgba(0,0,0,.07) 50%,transparent 90%)}.rrow .pw{text-shadow:0 1px 6px rgba(0,0,0,.85)}
.bgpic>.pic.crpic img{height:100%;width:auto;object-fit:cover;object-position:center top}
.bgpic>.pic.crpic.big{width:38%;opacity:.12}
.crline{display:flex!important;align-items:center;gap:4px;margin-top:2px;font-weight:700;color:var(--text)!important}
.crline svg{width:13px;height:13px}.crline em{font-style:normal;font-weight:800}
.cr-angel em{background:linear-gradient(90deg,#e0e7ff,#a5b4fc,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-angel{background:linear-gradient(90deg,#c7d2fe,#e9d5ff,#f8fafc)}
.crtiers div{grid-template-columns:34px 112px 1fr!important}
.crface{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--surface-2);display:block}.crface img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(2.3);transform-origin:50% 14%}

/* soul merchant (host 2026-11-08) */
.mer-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.mer-rate{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.mer-deal{display:flex;align-items:center;gap:10px;font-size:13.5px;min-width:0}
.mer-deal span{min-width:0}
.mer-ico{width:34px;height:34px;object-fit:contain;flex:none}
.mer-g{align-self:flex-start}
.mer-g.g3{background:linear-gradient(90deg,#ff5d5d,#ffb547);color:#1b0c00}
.mer-g.g2{background:#ffb547;color:#1b0c00}
.mer-g.g1{background:#5aa6ff;color:#06162b}
.mer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.mer-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;text-align:center;cursor:pointer;min-width:0}
.mer-card b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mer-card small{color:var(--dim);font-size:12.5px}
.mer-card .mer-g{align-self:center}
.mer-art{width:100%;height:120px;object-fit:contain}
.mer-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.mer-head h2{margin:6px 0 2px}
.mer-big{width:96px;height:120px;object-fit:contain;flex:none}
.mer-opts{display:flex;flex-direction:column;gap:8px}
.mer-opt{display:flex;gap:12px;align-items:center;padding:10px 12px;text-align:left;cursor:pointer;width:100%}
.mer-opt small{display:block;color:var(--dim);font-size:12.5px}
.mer-opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.mer-step{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 6px}
.mer-step b{min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.mer-get{text-align:center;min-height:20px}
.mer-link{color:var(--accent);font-weight:700;white-space:nowrap}
.node.focus .rc .card{box-shadow:0 0 0 2px var(--accent),0 0 24px rgba(255,170,60,.35);transition:box-shadow .4s}

/* gift-box shop (host 2026-11-08) */
.gbdeal{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.gbtabs{overflow-x:auto;flex-wrap:nowrap}
.gbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gbitem{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;text-align:center;cursor:pointer;min-width:0}
.gbitem img{width:64px;height:64px;object-fit:contain}
.gbitem b{font-size:13.5px;line-height:1.25;max-width:100%;overflow-wrap:anywhere}
.gbitem small{color:var(--dim);font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbitem .gbpr{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.gbitem.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.gbitem.red{background:linear-gradient(180deg,rgba(255,70,70,.14),transparent 60%),var(--surface)}
.gbitem[disabled]{opacity:.45;cursor:default}
.gbin{position:absolute;top:8px;right:8px;min-width:22px;height:22px;border-radius:999px;background:var(--accent);color:#1b0c00;font-weight:800;font-size:12px;display:grid;place-items:center}
.gbbox{display:flex;flex-direction:column;gap:10px}
.gbslots{display:grid;grid-template-columns:repeat(4,minmax(0,64px));gap:10px;justify-content:center}
.gbslot{aspect-ratio:1;width:100%;border-radius:12px;border:1.5px dashed var(--surface-3);display:grid;place-items:center;color:var(--dim);background:var(--surface-2);position:relative;padding:0}
.gbslot.on{border-style:solid;border-color:var(--accent);cursor:pointer}
.gbslot img{width:80%;height:80%;object-fit:contain}
.gbslot i{position:absolute;top:2px;right:6px;font-style:normal;font-weight:800;color:var(--dim)}
.gbtot{font-size:20px}
.gbitem.out{opacity:.45;cursor:default}
.gbdest{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:1.5px solid var(--gold);background:color-mix(in oklab,var(--gold) 9%,var(--surface))}
.gbdest b{display:block;font-size:17px;overflow-wrap:anywhere}.gbdest small{display:block;color:var(--dim);font-size:12px}
.gbwarn{border:1.5px solid var(--bad);border-radius:12px;padding:12px;background:color-mix(in oklab,var(--bad) 10%,var(--surface));text-align:left}
.gbwarn>b{display:flex;gap:6px;align-items:center;color:var(--bad)}.gbwarn>b svg{width:18px;height:18px;flex:none}.gbwarn p{margin:6px 0 10px;font-size:13.5px;line-height:1.45}
.gbwarnbtns{display:flex;gap:8px;flex-wrap:wrap}.gbwarnbtns .btn{flex:1 1 140px;min-width:0;white-space:normal}
.gbmain{margin-top:4px;display:inline-block}.gbalt{color:var(--bad)!important}
.gbitem.have{cursor:default;border-color:rgba(70,200,120,.55)}
.gbitem .gbnote{color:var(--text);font-weight:700;white-space:normal}
.gbitem .gbok{color:#46c878;font-weight:700;white-space:normal}
.gbitem .gbneed{color:#ff6b6b;font-weight:700;white-space:normal}
.gbi{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--dim);background:var(--surface-2);color:var(--dim);font:700 13px/1 Georgia,serif;font-style:italic;display:grid;place-items:center;padding:0;cursor:pointer}
.gbminus{position:absolute;bottom:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:var(--surface-3);color:var(--text);font-size:20px;font-weight:800;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
.gbit{width:100%;border-collapse:collapse;margin-top:10px}.gbit td{padding:8px 4px;border-bottom:1px solid var(--surface-3)}.gbit td.num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
#gbiseg{margin-top:12px}
.gbgift{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:rgba(255,170,60,.1)}
.gbgift small{color:var(--dim)}
.gbgift svg{width:20px;height:20px;vertical-align:-4px;color:var(--accent)}
.gbfirst{color:#46c878;font-weight:700}
.gbwel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(255,170,60,.12)}
.gbwel>span{flex:1;min-width:180px}
.gbwel small{color:var(--dim)}
.gbwel svg{width:22px;height:22px;color:var(--accent);flex:none}
.gbwel.done{background:rgba(70,200,120,.14);border-color:rgba(70,200,120,.55)}
.gbwel.done svg,.gbwel.done b{color:#46c878}
.gbrulesrow{display:flex;justify-content:center}
.gbrulesrow svg{width:16px;height:16px}
.gbrules{display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center;padding-top:6px}
.gbrules h2{margin:4px 0}
.gbrules p{margin:0;line-height:1.5}
.gbrico svg{width:40px;height:40px;color:var(--accent)}
.gbrdots{display:flex;gap:6px;justify-content:center}
.gbrdots i{width:8px;height:8px;border-radius:999px;background:var(--surface-3)}
.gbrdots i.on{width:20px;background:var(--accent)}
.gbwel.done{padding-top:10px;padding-bottom:10px}
.gbcredit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(70,200,120,.12);color:var(--text)}
.gbcredit b{color:#46c878}
.gbci{position:static}
.gbit tr.tot td{border-top:2px solid var(--surface-3)}
.gbgrades{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.gbgrades .tag{cursor:pointer;border:1.5px solid transparent;font-size:12.5px;padding:4px 12px}
.gbgrades .tag.on{border-color:var(--text);color:var(--text)}
.gbg-purple{color:#b07cff}.gbg-red{color:#ff6b6b}.gbg-orange{color:#ffab4a}.gbg-blue{color:#5aa6ff}.gbg-exp{color:#7ee0a0}
/* shop rules: full-screen walkthrough (host 2026-11-08) */
.gbtut{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;animation:fade .2s;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.gbt-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.gbt-top>b{font-size:16px}.gbt-top>.faint{font-size:13px;font-variant-numeric:tabular-nums}
.gbt-top>button,.gbt-top>span:last-child{justify-self:end}
.gbt-view{flex:1;overflow:hidden;min-height:0}
.gbt-track{display:flex;height:100%;transition:transform .35s ease;touch-action:pan-y}
.gbt-page{flex:0 0 100%;min-width:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:20px 20px 12px;box-sizing:border-box}
.gbt-page h2{margin:6px 0 0;font-size:24px;text-wrap:balance}
.gbt-page>p{margin:0;max-width:440px;line-height:1.55;color:var(--dim)}
.gbt-vis{width:100%;max-width:420px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:18px 14px;border-radius:20px;background:radial-gradient(120% 100% at 50% 0%,color-mix(in oklab,var(--accent) 16%,transparent),transparent 70%),var(--surface);border:1px solid var(--border);box-sizing:border-box}
.gbt-slots{display:grid;grid-template-columns:repeat(4,64px);gap:10px;justify-content:center}
.gbt-slots .gbslot{width:64px;height:64px}
.gbt-deals{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.gbt-tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gbt-tile{width:92px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:14px;background:var(--surface-2);border:1.5px solid var(--border)}
.gbt-tile img{width:58px;height:58px;object-fit:contain}
.gbt-tile small{font-weight:800;font-size:12px}
.gbt-tile.miss{border-color:rgba(255,107,107,.6)}.gbt-tile.miss small{color:#ff6b6b}
.gbt-tile.have{border-color:rgba(70,200,120,.6)}.gbt-tile.have small{color:#46c878}
.gbt-cap{margin:0;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px}
.gbt-cap svg{width:16px;height:16px;color:var(--accent)}.gbt-cap img{width:18px;height:18px}
.gbt-cap.no img{filter:grayscale(1);opacity:.7}.gbt-cap.no{color:var(--dim);text-decoration:line-through}
.gbt-flow{display:flex;align-items:center;gap:14px}
.gbt-big{width:84px;height:84px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--surface-2);border:1.5px solid var(--border)}
.gbt-big svg{width:38px;height:38px;color:var(--accent)}
.gbt-big.vip{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 16%,var(--surface-2))}.gbt-big.vip svg{color:var(--gold)}
.gbt-big b{font-size:12px}
.gbt-arrow{font-size:26px;font-weight:800;color:var(--dim)}
.gbt-vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.gbt-col{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:14px;background:var(--surface-2);border:1.5px solid var(--border)}
.gbt-col svg{width:28px;height:28px;color:var(--accent)}.gbt-col small{color:var(--dim);font-size:12px}
.gbt-col.good{border-color:rgba(70,200,120,.6)}.gbt-col.good svg{color:#46c878}
.gbt-credit{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;font-size:13.5px}
.gbt-credit b{color:#46c878}.gbt-credit .gbt-arrow{font-size:18px}
.gbt-foot{display:flex;flex-direction:column;gap:12px;padding:12px 16px 16px;border-top:1px solid var(--border)}
.gbt-btns{display:grid;grid-template-columns:1fr 2fr;gap:10px;max-width:440px;width:100%;margin:0 auto}
.gbing{width:18px;height:18px;object-fit:contain}
.gbwpop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:4px}
.gbwpop h2{margin:6px 0 0}.gbwpop p{margin:0}
.gbwamt{font-size:28px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.gbwburst{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in oklab,var(--gold) 40%,transparent),transparent 70%);animation:gbwpop .5s ease}
.gbwburst img{width:64px;height:64px;object-fit:contain}
.gbwpop .btn{margin-top:8px}
@keyframes gbwpop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* home news slideshow (host 2026-11-08; picture on top, one slide per swipe) */
.hsl{display:flex;flex-direction:column;gap:8px;min-width:0}
.hsl-view{overflow:hidden;border-radius:var(--r,16px)}
.hsl-track{display:flex;align-items:stretch;transition:transform .35s ease;touch-action:pan-y;will-change:transform}
.hsl-s{flex:0 0 100%;min-width:0;min-height:372px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.hsl-art{height:132px;display:flex;align-items:flex-end;justify-content:center;gap:4px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 100%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%),var(--surface-2)}
.hsl-art img{height:100%;width:auto;max-width:48%;object-fit:contain;object-position:bottom}
.hsl-art img.hsl-item{height:96px;max-width:none;align-self:center}
.hsl-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;min-width:0}
.hsl-body h3{margin:2px 0 0;text-wrap:balance}
.hsl-body .note{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hsl-btn{margin-top:auto;justify-content:space-between;width:100%}
.hsl-body>.note{margin-bottom:6px}
.hsl-rw{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 4px;border-radius:999px;background:rgba(0,0,0,.16);font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.hsl-rw img{width:18px;height:18px;object-fit:contain}
.hsl-cta{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hsl-got{display:inline-flex;align-items:center;gap:5px;color:var(--good);font-weight:700;font-size:12.5px}
.hsl-got svg{width:16px;height:16px;stroke-width:3}.hsl-got img{width:16px;height:16px;object-fit:contain}
/* world feed live dot: green (host 2026-11-08) */
.ldot{background:var(--good);box-shadow:0 0 0 0 color-mix(in oklab,var(--good) 60%,transparent);animation:ldotg 1.6s infinite}
@keyframes ldotg{70%{box-shadow:0 0 0 8px color-mix(in oklab,var(--good) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.ldot{animation:none}}
.hsl-dots{display:flex;gap:6px;justify-content:center}
.hsl-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--surface-3);cursor:pointer;transition:width .2s}
.hsl-dots button.on{width:20px;background:var(--accent)}

/* Angel reward on the credit page (host 2026-11-08) */
.crangel{display:flex;gap:14px;align-items:center;background:radial-gradient(120% 120% at 0% 50%,rgba(236,241,248,.24),transparent 70%),linear-gradient(135deg,rgba(214,222,233,.10),rgba(255,255,255,.03)),var(--surface);border-color:rgba(214,222,233,.55)}
.crwhis{border-radius:14px;background:radial-gradient(circle at 50% 40%,#ffffff,#dfe5ee 55%,#b9c3d1);box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}
.crwhis{width:88px;height:88px;padding:4px;box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.crwhis img{max-width:100%;max-height:100%;object-fit:contain}
.crangel>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.crangel small{color:#dfe5ee;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px}
.crangel b{font-size:17px}.crangel .note{margin:0}
.crangel-why{margin:0;font-style:italic;color:var(--text);font-size:13.5px;line-height:1.45}
.crgot{margin:0;display:flex;gap:6px;align-items:center;color:var(--good);font-weight:700;font-size:13px}.crgot svg{width:15px;height:15px}
/* rewards history (host 2026-11-08) */
.rw-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rw-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;cursor:pointer;text-align:left}
.rw-stat small{color:var(--dim);font-size:12px}.rw-stat b{font-size:18px;font-variant-numeric:tabular-nums}
.rw-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.rw-tabs::-webkit-scrollbar{display:none}
.rw-tabs button{flex:0 0 auto}
.rw-list{display:flex;flex-direction:column;gap:8px}
.rw-row{display:flex;gap:12px;padding:12px 14px;align-items:flex-start}
.rw-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surface-2)}
.rw-ico svg{width:18px;height:18px}
.rw-gift .rw-ico{color:var(--accent)}.rw-bug .rw-ico{color:var(--bad)}.rw-team .rw-ico{color:var(--blue)}.rw-site .rw-ico{color:var(--good)}.rw-game .rw-ico{color:var(--dim)}
.rw-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rw-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.rw-head b{min-width:0;overflow-wrap:anywhere}.rw-head small{flex:none;font-size:12px}
.rw-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rw-meta .tag{font-size:11.5px;padding:2px 8px}
.rw-msg{margin:0;font-size:13px;color:var(--dim);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.rw-msg.open{display:block}
.rw-bugs{display:flex;flex-direction:column;gap:6px}
.rw-bug{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:10px;font-size:13.5px;font-weight:700;
  background:color-mix(in oklab,var(--bad) 12%,var(--surface-2));border:1px solid color-mix(in oklab,var(--bad) 40%,var(--border))}
.rw-bug svg{width:15px;height:15px;color:var(--bad);flex:none;margin-top:2px}
.rw-bug small{display:block;font-size:11px;font-weight:600;color:var(--dim)}
.rw-items{display:flex;flex-wrap:wrap;gap:6px}
.rw-it{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--surface-2);font-size:12.5px;max-width:100%}
.rw-it img{width:24px;height:24px;object-fit:contain;flex:none}
.rw-it>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-cr{padding-left:10px;color:var(--good);font-weight:700}
.rw-pos{color:var(--good)}.rw-neg{color:var(--bad)}

/* credit: Thanks in world chat + Bring a friend (host 2026-11-08) */
.wthxb{display:inline-flex;align-items:center;gap:4px;margin-top:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--dim);border-radius:999px;padding:3px 10px;font:700 12px/1.4 inherit;cursor:pointer}
.wthxb.on{color:var(--good);border-color:color-mix(in oklab,var(--good) 45%,var(--border));cursor:default}
.wthxn{display:inline-block;margin-top:6px;color:var(--good);font-weight:700;font-size:12px}
.crref .crow{width:100%}
.wclaim.todo{background:color-mix(in oklab,var(--good) 16%,var(--surface));border:1px solid color-mix(in oklab,var(--good) 45%,var(--border));color:var(--text)}
.wclaim.todo svg{color:var(--good)}.wclaim.todo b{color:var(--good)}
.thead .wonly{margin-left:auto;width:36px;height:36px}.thead .wonly svg{width:18px;height:18px}
.thead .wonly.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.thead .wonly+.wsel{margin-left:0}

/* wishlist tabs, status-coloured tiles and reply threads (host 2026-11-09) */
.wtabs{max-width:560px;margin:0 auto 14px;overflow-x:auto;scrollbar-width:none}
.wtabs button small{opacity:.7;font-weight:600;margin-left:3px}
.wtiles{display:flex;flex-direction:column;gap:10px}
.wt,.wthead{--wc:var(--warn)}
.wt.progress,.wthead.progress{--wc:var(--blue)}
.wt.done,.wthead.done{--wc:var(--good)}
.wt.declined,.wthead.declined{--wc:var(--bad)}
.wt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;cursor:pointer;padding:11px 10px 11px 14px;
  background:color-mix(in oklab,var(--wc) 9%,var(--surface));border-color:color-mix(in oklab,var(--wc) 45%,var(--border));
  box-shadow:inset 4px 0 0 var(--wc);transition:background .15s,transform .1s}
.wt:hover{background:color-mix(in oklab,var(--wc) 15%,var(--surface))}
.wt:active{transform:scale(.99)}
.wt:focus-visible{outline:2px solid var(--wc);outline-offset:2px}
.wt .tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.3;overflow-wrap:anywhere;
  color:color-mix(in oklab,var(--wc) 30%,var(--text))}
.wt .by,.wthead .by{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin-top:4px;font-size:12px;color:var(--dim)}
.wrc{display:inline-flex;align-items:center;gap:4px}.wrc svg{width:14px;height:14px}.wrc.has{color:var(--text);font-weight:700}
.wteam{color:var(--accent);font-weight:700}
.wt .votes{min-width:36px}.wt .votes button{width:32px;height:26px}.wt .votes b{font-size:14px}
.wthead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 10px 12px 14px;border-radius:12px;
  background:color-mix(in oklab,var(--wc) 12%,var(--surface-2));box-shadow:inset 4px 0 0 var(--wc)}
.wthead h2{text-align:left;margin:2px 0 0;font-size:18px;overflow-wrap:anywhere}
.wstat{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wc)}
.wbody{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 2px 0;font-size:14.5px}
.wtools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wthread .tsect{margin-top:18px}
.wthread{padding-top:34px}
.wrep b .tag,.wrep b small{display:inline-flex;vertical-align:1px}.wrep b .tag{font-size:10.5px;padding:1px 8px}
.wreps{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.wrep .wrb{white-space:pre-wrap}
.wrep .wsv,.wrep .wtm{font:600 11px Inter,sans-serif;color:var(--dim)}
.wrdel{font-size:12px;color:var(--faint);margin-top:3px}
.wnone{text-align:center;margin:6px 0}
.wreply{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;
  margin:14px -16px calc(-20px - env(safe-area-inset-bottom));padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border)}
.wreply textarea{min-height:46px;max-height:140px;resize:none}
.wreply .btn{display:inline-flex;align-items:center;gap:6px;min-height:46px}
.wreply .btn svg{width:16px;height:16px}