/* ==========================================================================
   RoStats — design system
   One cached stylesheet for every page. Shares its brand with
   ccgames.co.uk (the blue → violet → pink gradient and the Outfit face)
   on a near-black canvas: content sits on the page, not in boxes, and
   colour is kept for data and for what is active.

   Keep the short variable names (--panel, --panel2, --line, --dim, --tx,
   --acc, --up, --down): page templates use them in inline styles.
   ========================================================================== */

/* Self-hosted Outfit (font-src 'self' in the CSP): no third-party request. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  --bg:#06080e; --bg2:#0a0e17;
  --panel:#0b1019; --panel2:#111826; --panel3:#182133;
  --line:#141a26; --line2:#1d2535; --line-hi:#2f3b54;
  --edge:rgba(148,163,190,.09); --edge2:rgba(148,163,190,.15);
  --wash:rgba(148,163,190,.045); --wash2:rgba(148,163,190,.08);
  --tx:#eef2fb; --tx2:#b6c0d3; --dim:#7f8aa1; --faint:#535e75;
  --acc:#4b8dff; --acc2:#3a76f0; --violet:#8b5cf6; --lav:#a78bfa; --pink:#ff4fa3;
  --up:#34d399; --down:#f87171; --warn:#fbbf24; --orange:#fb923c; --teal:#2dd4bf; --gold:#f5c45e;
  --grad:linear-gradient(120deg,#3b82ff 0%,#8b5cf6 55%,#ff4fa3 100%);
  --grad-soft:linear-gradient(135deg,rgba(59,130,255,.16),rgba(139,92,246,.12) 55%,rgba(255,79,163,.08));
  --r:16px; --r-sm:12px; --r-xs:9px;
  --shadow:0 1px 0 rgba(255,255,255,.02) inset;
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.85);
  --ease:cubic-bezier(.25,.1,.25,1); --out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --header-h:60px;
  --row:52px;   /* every compact list row (home cards, sidebars, chart cards) */
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
}

/* ---------- base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font-family:var(--font);
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%}
a{color:var(--acc);text-decoration:none;transition:color .15s}
a:hover{color:#7fabff}
::selection{background:rgba(75,141,255,.35);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
main:focus{outline:none}
b,strong{font-weight:650}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.015em;color:#fff}
small{font-size:.82em}
code,.mono{font-family:var(--mono);font-size:.9em}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
table{font-variant-numeric:tabular-nums}
html{scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line-hi)}
::-webkit-scrollbar-track{background:transparent}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A soft brand glow behind the top of every page. It scrolls away. */
.backdrop{position:absolute;inset:0 0 auto;height:560px;pointer-events:none;z-index:0;overflow:hidden}
.backdrop::before{content:'';position:absolute;inset:0;
  background:radial-gradient(38% 52% at 14% 0%,rgba(59,130,255,.13),transparent 70%),
             radial-gradient(32% 46% at 86% 0%,rgba(139,92,246,.10),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}

/* ---------- navigation progress (soft navigation) ------------------------- */
#rs-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;opacity:0;box-shadow:0 0 10px rgba(139,92,246,.6)}
#rs-progress.go{opacity:1;transform:scaleX(.85);transition:transform 4.5s cubic-bezier(.08,.82,.17,1),opacity .15s}
#rs-progress.done{opacity:0;transform:scaleX(1);transition:transform .2s var(--out),opacity .3s .12s}
.rs-busy,.rs-busy *{cursor:progress}
/* what a soft navigation brought in fades up; what stayed does not move */
.rs-in{animation:rsIn .26s var(--ease) both}
@keyframes rsIn{from{opacity:0}}

/* ---------- header ---------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);
  background:rgba(6,8,14,.8);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid var(--edge)}
.hwrap{max-width:1240px;height:100%;margin:auto;padding:0 24px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;font-weight:750;font-size:19px;letter-spacing:-.02em;color:#fff;flex:none}
.logo:hover{color:#fff}
.logo-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--grad);
  box-shadow:0 6px 16px -6px rgba(139,92,246,.7),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .35s var(--spring)}
.logo-mark svg{width:17px;height:17px;color:#fff;stroke-width:2.6}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.06)}
.logo .grad-text{margin-left:-1px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.mainnav{position:relative;display:flex;align-items:center;gap:2px;height:100%}
.mainnav>a,.navdrop>a{position:relative;display:flex;align-items:center;gap:5px;height:36px;padding:0 12px;border-radius:9px;
  color:var(--dim);font-weight:500;font-size:14.5px;transition:color .18s,background .18s}
.mainnav>a:hover,.navdrop>a:hover,.navdrop:focus-within>a{color:#fff;background:var(--wash)}
.mainnav a.on{color:#fff}
.nav-ink{position:absolute;left:0;bottom:-1px;height:2px;border-radius:2px;pointer-events:none;
  box-sizing:border-box;border:solid transparent;border-width:0 12px;background:var(--grad);background-clip:padding-box;
  transition:transform .4s var(--out),width .4s var(--out),opacity .25s}
.mainnav:not(.has-slider) a.on::after{content:'';position:absolute;left:12px;right:12px;bottom:-12px;height:2px;border-radius:2px;background:var(--grad)}
.navdrop{position:relative;display:flex;align-items:center;height:100%}
.navdrop .caret{width:14px;height:14px;opacity:.55;transition:transform .25s var(--out)}
.navdrop:hover .caret,.navdrop:focus-within .caret,.navdrop.open .caret{transform:rotate(180deg);opacity:1}
.dropmenu{position:absolute;top:calc(100% - 6px);left:-6px;min-width:236px;z-index:60;padding:6px;
  background:rgba(12,16,26,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--edge2);border-radius:14px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-4px);transform-origin:20% 0;
  transition:opacity .16s var(--ease),transform .22s var(--out),visibility 0s .22s}
.navdrop:hover .dropmenu,.navdrop:focus-within .dropmenu,.navdrop.open .dropmenu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.navdrop.hush .dropmenu{opacity:0!important;visibility:hidden!important;transition-delay:0s}
.dropmenu a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;color:var(--tx2);font-size:14px;font-weight:550}
.dropmenu a small{display:block;color:var(--faint);font-weight:450;font-size:12px;margin-top:-1px}
.dropmenu a:hover{background:var(--wash2);color:#fff}
.dropmenu a.on{background:rgba(75,141,255,.1);color:#fff}
.dropmenu .di{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--wash);border:1px solid var(--edge);color:var(--tx2);transition:background .2s,color .2s,border-color .2s}
.dropmenu a:hover .di,.dropmenu a.on .di{background:var(--grad);border-color:transparent;color:#fff}
.dropmenu .di svg{width:15px;height:15px}

.search{margin-left:auto;display:flex;align-items:center;position:relative;flex:none}
.search .sbox{display:flex;align-items:center;height:38px;background:var(--wash);border:1px solid var(--edge);
  border-radius:11px;transition:border-color .2s,box-shadow .2s,background .2s;overflow:hidden}
.search .sbox:hover{border-color:var(--edge2)}
.search .sbox:focus-within{border-color:rgba(75,141,255,.6);box-shadow:0 0 0 3px rgba(75,141,255,.15);background:var(--panel2)}
.search select{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-right:1px solid var(--edge);
  color:var(--tx2);font:inherit;font-size:13.5px;font-weight:550;height:100%;padding:0 26px 0 12px;cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237f8aa1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.search select option{background:var(--panel2);color:var(--tx)}
.search .sicon{width:16px;height:16px;color:var(--faint);margin-left:11px;flex:none}
.search input{background:transparent;border:0;outline:none;color:var(--tx);font:inherit;font-size:14px;width:210px;height:100%;padding:0 10px 0 8px}
.search input::placeholder{color:var(--faint)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:9px;border-radius:6px;
  border:1px solid var(--edge2);color:var(--faint);font-size:11.5px;font-weight:650;flex:none}
.search .sbox:focus-within .kbd{opacity:0}
/* search as you type */
.sugg{position:absolute;top:calc(100% + 8px);right:0;width:400px;max-width:calc(100vw - 28px);max-height:min(72vh,540px);overflow:auto;z-index:120;
  padding:6px;background:rgba(12,16,26,.98);border:1px solid var(--edge2);border-radius:14px;box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:suggIn .16s var(--out) both}
.sugg[hidden]{display:none}
@keyframes suggIn{from{opacity:0;transform:translateY(-4px)}}
.sg-h{padding:8px 10px 4px;font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.sg-i{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:10px;color:var(--tx2);font-size:14px}
.sg-i img,.sg-i .ph{width:32px;height:32px;border-radius:9px;flex:none;background:var(--panel2);object-fit:cover}
.sg-i img.round,.sg-i .ph.round{border-radius:50%}
.sg-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--tx)}
.sg-n mark{background:none;color:#fff;box-shadow:inset 0 -2px 0 rgba(75,141,255,.65)}
.sg-v{flex:none;color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
.sg-i:hover,.sg-i.on{background:var(--wash2);color:#fff}
.sg-all{margin-top:4px;color:var(--dim)}
.sg-all svg{width:16px;height:16px;flex:none;margin:0 8px;color:var(--faint)}
.sg-all .sg-n{font-weight:500;color:var(--tx2)}
@media(max-width:620px){.sugg{position:fixed;left:12px;right:12px;top:calc(var(--header-h) + 4px);width:auto;max-width:none}}
.navtoggle{display:none;margin-left:6px;width:38px;height:38px;border-radius:11px;border:1px solid var(--edge);
  background:var(--wash);color:var(--tx);cursor:pointer;place-items:center;flex:none}
.navtoggle svg{width:20px;height:20px}
.navtoggle .ic-x{display:none}
body.nav-open .navtoggle .ic-x{display:block}
body.nav-open .navtoggle .ic-menu{display:none}

@media(max-width:1240px){.search input{width:150px}}
@media(max-width:1100px){
  .navtoggle{display:grid}
  .nav-ink{display:none}
  .mainnav{position:fixed;top:var(--header-h);left:0;right:0;height:auto;max-height:calc(100dvh - var(--header-h));overflow:auto;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px 14px 18px;
    background:rgba(8,11,19,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--edge2);
    box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .3s var(--out),visibility 0s .3s}
  body.nav-open .mainnav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .mainnav>a,.navdrop>a{height:44px;font-size:16px;padding:0 12px}
  .mainnav a.on{background:var(--wash2)}
  .mainnav:not(.has-slider) a.on::after{display:none}
  .navdrop{flex-direction:column;align-items:stretch;height:auto}
  .navdrop .caret{display:none}
  .dropmenu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;
    backdrop-filter:none;padding:0 0 6px 14px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .navdrop.hush .dropmenu{opacity:1!important;visibility:visible!important}
  .dropmenu a small{display:none}
}
@media(max-width:620px){
  .hwrap{padding:0 14px;gap:10px}
  .search{flex:1;min-width:0}
  .search .sbox{width:100%}
  .search input{width:100%;min-width:0}
  .search select{padding:0 22px 0 9px;font-size:13px}
  .kbd{display:none}
  .logo .logo-word{display:none}
}

/* ---------- layout ---------------------------------------------------------- */
main{position:relative;z-index:1;max-width:1240px;margin:auto;padding:28px 24px 72px;min-height:calc(100vh - var(--header-h) - 160px)}
@media(max-width:620px){main{padding:20px 14px 56px}}
.pagehead{margin:2px 0 22px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.kicker svg{width:14px;height:14px;color:var(--lav)}
.pagehead h1,main>h1{font-size:clamp(28px,3.6vw,36px);line-height:1.1;margin:8px 0 0;letter-spacing:-.025em;font-weight:750}
.pagehead .sub{color:var(--dim);font-size:15px;max-width:720px;margin-top:8px}
h2{font-size:19px;margin:36px 0 14px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-weight:700}
h2 small{font-weight:450;color:var(--dim);font-size:13.5px}
h2 .h2i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--wash);border:1px solid var(--edge);color:var(--tx2)}
h2 .h2i svg{width:15px;height:15px}

.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
/* a grid 1fr column floors at its content's min width: let it shrink */
.grid>*{min-width:0}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}

/* ---------- panels & cards ------------------------------------------------- */
.panel,.chartbox,.stat,.card{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r)}
.panel{padding:16px 18px}
.panel h3,.ph{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:15px;color:#fff;font-weight:650;letter-spacing:-.005em}
.ph .phi,.panel h3 .phi{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--wash);border:1px solid var(--edge);color:var(--tx2)}
.phi svg{width:15px;height:15px}
.panel h3 a,.ph .more{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:550;color:var(--dim);
  padding:4px 8px;border-radius:8px;transition:color .15s,background .15s}
.panel h3 a:hover,.ph .more:hover{color:#fff;background:var(--wash)}
.panel h3 a svg,.ph .more svg{width:14px;height:14px;transition:transform .2s var(--out)}
.panel h3 a:hover svg,.ph .more:hover svg{transform:translateX(3px)}

/* stat cards */
.stat{padding:16px 18px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.stat b{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:24px;font-weight:700;color:#fff;line-height:1.15;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat>span,.stat .lbl{font-size:13px;color:var(--dim);margin-top:4px}
.stat .si{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;color:#fff;
  background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.stat .si svg{width:18px;height:18px}
.stat .si.green{background:linear-gradient(135deg,#10b981,#34d399)}
.stat .si.amber{background:linear-gradient(135deg,#f59e0b,#fb923c)}
.stat .si.pink{background:linear-gradient(135deg,#ec4899,#a855f7)}
.stat .si.blue{background:linear-gradient(135deg,#3b82f6,#06b6d4)}

/* change chips: ▲ / ▼ vs a baseline */
.chg,.stat small.d-up,.stat small.d-down,small.d-up,small.d-down{display:inline-flex;align-items:center;gap:3px;
  font-size:12.5px;font-weight:650;padding:1px 7px;border-radius:999px;letter-spacing:0;line-height:1.55;white-space:nowrap;font-variant-numeric:tabular-nums}
.chg.up,small.d-up{color:var(--up);background:rgba(52,211,153,.1)}
.chg.down,small.d-down{color:var(--down);background:rgba(248,113,113,.1)}
.chg.flat{color:var(--dim);background:var(--wash2)}

/* live dot */
.live-dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--up);flex:none}
.live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--up);animation:ping 2s var(--out) infinite}
.live-dot.amber{background:var(--warn)}.live-dot.amber::after{border-color:var(--warn)}
.live-dot.red{background:var(--down)}.live-dot.red::after{display:none}
.live-dot.blue{background:var(--acc)}.live-dot.blue::after{border-color:var(--acc)}
@keyframes ping{0%{transform:scale(.6);opacity:.85}80%,100%{transform:scale(1.9);opacity:0}}

/* stat strip (group / user headers) */
.statstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);
  border-radius:var(--r);overflow:hidden;margin:18px 0}
.statstrip.g4{grid-template-columns:repeat(4,1fr)}
.statstrip>div{background:var(--panel);padding:13px 16px;min-width:0;transition:background .2s}
.statstrip>div:hover{background:var(--panel2)}
.statstrip b{display:block;font-size:18px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.3}
.statstrip b a{color:#fff}.statstrip b a:hover{color:#7fabff}
.statstrip>div>span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);font-weight:500;margin-top:2px}
.statstrip>div>span svg{width:13px;height:13px;opacity:.7;flex:none}
@media(max-width:900px){.statstrip,.statstrip.g4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.statstrip,.statstrip.g4{grid-template-columns:repeat(2,1fr)}}

/* ---------- segmented controls & sliding indicators ----------------------- */
.ranges,.seg{position:relative;display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;margin:0 0 18px;
  background:var(--wash);border:1px solid var(--edge);border-radius:12px;max-width:100%}
.ranges a,.seg a,.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:9px;
  border:0;background:none;font:inherit;color:var(--dim);font-size:13.5px;font-weight:550;cursor:pointer;white-space:nowrap;
  transition:color .2s}
.ranges a:hover,.seg a:hover,.seg button:hover{color:#fff}
.ranges a.on,.seg a.on,.seg button.on{color:#fff}
.ranges a svg,.seg a svg{width:15px;height:15px}
/* the active pill before the script places the sliding one */
.seg:not(.has-slider)>.on,.ranges:not(.has-slider)>.on{background:var(--wash2);box-shadow:inset 0 0 0 1px var(--edge2)}
.seg-thumb{position:absolute;z-index:0;left:0;top:0;border-radius:9px;background:rgba(148,163,190,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 2px 8px -2px rgba(0,0,0,.5);pointer-events:none;
  transition:transform .38s var(--out),width .38s var(--out),height .38s var(--out),opacity .2s}
.seg.sm{padding:3px;border-radius:11px}
.seg.sm a,.seg.sm button{padding:5px 11px;font-size:13px}
.seg.sm .seg-thumb{border-radius:8px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.toolbar .ranges,.toolbar .seg{margin:0}
.toolbar .note{margin:0}

/* ---------- tables ------------------------------------------------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tcard{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
table{border-collapse:collapse;width:100%;font-size:14.5px}
td,th{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--faint);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
tr:last-child td{border-bottom:none}
td.num,th.num,td.r,th.r,.r{text-align:right}
tbody tr{transition:background .15s}
tbody tr:hover td{background:rgba(148,163,190,.035)}
.mini td{padding:8px 8px}
.mini th{padding:7px 8px}
.mini td:first-child,.mini th:first-child{padding-left:2px}
.mini td:last-child,.mini th:last-child{padding-right:2px}
.rank{color:var(--faint);width:34px;font-weight:650;font-variant-numeric:tabular-nums}
.rankchip{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;font-size:12px;font-weight:750;
  color:var(--dim);background:var(--wash2)}
.rankchip.r1{color:#3b2a05;background:linear-gradient(135deg,#ffe28a,#f5b83d)}
.rankchip.r2{color:#1f2533;background:linear-gradient(135deg,#f1f5ff,#aeb8cc)}
.rankchip.r3{color:#2e1606;background:linear-gradient(135deg,#ffc29a,#d9824a)}
.gcell{white-space:nowrap}
.gcell a{display:inline-block;max-width:440px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;
  color:var(--tx);font-weight:600}
.gcell a:hover{color:#fff}
.mini .gcell a{max-width:220px}
@media(max-width:900px){.gcell a{max-width:240px}.mini .gcell a{max-width:180px}}
@media(max-width:560px){.gcell a{max-width:170px}.mini .gcell a{max-width:150px}}
@media(max-width:440px){
  .panel{padding:14px 13px}
  .mini td,.mini th{padding:8px 5px}
  .mini .gcell a{max-width:112px}
  .mini .gicon{margin-right:7px}
  td,th{padding:9px 9px}
}
.gicon{width:32px;height:32px;border-radius:9px;vertical-align:middle;margin-right:11px;background:var(--panel2);
  object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.gicon.ph,.gicon-ph{display:inline-block}
.gicon-ph{background:var(--panel2);border:1px solid var(--line);border-radius:9px;vertical-align:middle}
.mini .gicon{width:26px;height:26px;margin-right:9px;border-radius:7px}
.num .up,.num .down{font-weight:650}
.up{color:var(--up)}.down{color:var(--down)}.dim{color:var(--dim)}.faint{color:var(--faint)}
.t{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}

/* ---------- charts --------------------------------------------------------- */
.ch-host{position:relative}
.ch-host canvas{position:absolute;left:0;top:0;display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.chartbox{padding:14px 16px 10px;height:330px;display:flex;flex-direction:column}
.ch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 2px 6px;min-height:22px}
.ch-title{font-size:13.5px;font-weight:600;color:var(--tx2);display:flex;align-items:center;gap:8px}
.ch-title .sw{width:8px;height:8px;border-radius:3px;flex:none}
.ch-val{text-align:right;line-height:1.15;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ch-val b{display:block;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ch-body{position:relative;flex:1;min-height:0}
.ch-body canvas{opacity:0;transition:opacity .4s var(--ease)}
.ch-body.ready canvas{opacity:1}
.ch-skel{position:absolute;inset:0 0 24px;border-radius:10px;overflow:hidden;transition:opacity .35s;
  background-image:radial-gradient(circle,rgba(150,162,186,.14) 1.2px,transparent 1.6px);background-size:18px 18px;background-position:center}
.ch-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.035) 50%,transparent 70%);
  background-size:220% 100%;animation:shimmer 1.5s linear infinite}
.ch-body.ready .ch-skel{opacity:0;pointer-events:none}
.ch-empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;
  color:var(--faint);font-size:13.5px;padding:20px}
.ch-empty svg{width:24px;height:24px;opacity:.6}
.ch-body.is-empty .ch-empty{display:flex}
.ch-body.is-empty canvas{opacity:.35}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
/* hover read-out */
.ch-tip{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .14s;
  padding:8px 11px 8px;border-radius:10px;background:rgba(12,16,26,.94);border:1px solid var(--edge2);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.9);font-size:13px;line-height:1.35;white-space:nowrap;color:var(--tx)}
.ch-tip.on{opacity:1}
.ch-tip .tt{color:var(--dim);font-size:11.5px;font-weight:500;margin-bottom:3px}
.ch-tip .tr{display:flex;align-items:center;gap:7px}
.ch-tip .tr+.tr{margin-top:2px}
.ch-tip .tr i{width:8px;height:8px;border-radius:2px;flex:none}
.ch-tip .tr span{color:var(--tx2);font-size:12.5px;margin-right:10px}
.ch-tip .tr b{margin-left:auto;font-weight:650;font-variant-numeric:tabular-nums}
/* the pulsing "now" dot riding the end of a line */
.ch-pulse{position:absolute;left:0;top:0;width:0;height:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.ch-pulse.on{opacity:1}
.ch-pulse::before,.ch-pulse::after{content:'';position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--c,#4b8dff)}
.ch-pulse::before{box-shadow:0 0 0 2.5px var(--bg),0 0 12px var(--c,#4b8dff);z-index:1}
.ch-pulse::after{animation:chPulse 2s var(--out) infinite;opacity:.6}
@keyframes chPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.8);opacity:0}}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.legend button{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;border:1px solid var(--edge2);
  background:var(--wash);color:var(--tx2);font:inherit;font-size:13px;font-weight:550;cursor:pointer;transition:all .2s}
.legend button i{width:14px;height:3px;border-radius:2px}
.legend button:hover{border-color:var(--line-hi);color:#fff}
.legend button.off{opacity:.45}
.legend button.off i{background:var(--faint)!important}

/* ---------- live numbers & chromeless charts (home, game, user) ------------ */
.livebox{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:30px;align-items:start}
.lb-main{min-width:0}
.lb-label{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:550;color:var(--dim)}
.lb-num{margin-top:2px}
/* proportional figures: Outfit's tabular 0 is wider than its own slot, so
   tabular zeros ran into each other (and were sliced off at the edges of
   the rolling columns) */
.lb-num b{display:inline-block;font-size:clamp(42px,6vw,64px);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2;
  font-variant-numeric:proportional-nums}
.lb-num.md b{font-size:clamp(36px,4.6vw,50px)}
.lb-sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:24px;font-size:14px;color:var(--dim);margin-top:-2px}
.lb-sub .chg{font-size:13px}
.lb-sub .when{color:var(--dim)}
.lb-sub b{color:var(--tx2);font-weight:600}
.lb-chart{position:relative;height:330px;margin:14px 0 0}
.lb-chart.sm{height:260px}
.lb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.lb-foot .seg{margin:0}
.lb-meta{font-size:13px;color:var(--faint)}
.lb-meta b{color:var(--dim);font-weight:600}
.lb-empty{position:absolute;inset:0 0 24px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px;text-align:center;padding:0 20px}
.lb-empty[hidden]{display:none}
.lb-chart canvas{transition:opacity .25s var(--ease)}
.lb-chart.loading canvas{opacity:.5}
[data-roll]{line-height:1.2}
@media(max-width:1000px){.livebox{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.lb-chart{height:250px}.lb-chart.sm{height:220px}}

/* rolling digits (RS.roll) */
.nf{display:inline-flex;white-space:nowrap;vertical-align:top;user-select:none;-webkit-user-select:none}
/* digits sit 1.7em apart in the strip but show through a 1.2em window, so
   mid-roll only the digit arriving and the one leaving are in view, each
   fading at the edge */
/* each column is padded out on both sides (and pulled back in by the same
   negative margin) so a digit whose ink runs past its advance width -- a
   round 0, 8 or 9 -- is never clipped by the column's own edge */
.nf-d{position:relative;display:inline-block;box-sizing:content-box;height:1.2em;padding:0 .12em;margin:0 -.12em;overflow:hidden;transition:width .5s var(--out);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 .2em,#000 calc(100% - .2em),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 .2em,#000 calc(100% - .2em),transparent 100%)}
.nf-s{display:block;margin-top:-.25em;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.nf-s i{display:block;height:1.7em;line-height:1.7em;font-style:normal}
.nf-c{display:inline-block;height:1.2em;line-height:1.2em}

/* ---------- pills, chips, buttons ----------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--wash);border:1px solid var(--edge);border-radius:999px;
  padding:4px 11px;font-size:13px;font-weight:550;color:var(--tx2);margin:2px 4px 2px 0;transition:border-color .2s,background .2s,color .2s}
.pill svg{width:14px;height:14px;opacity:.75}
.pill a{color:var(--tx)}
a.pill:hover,button.pill:hover{border-color:var(--edge2);color:#fff;background:var(--wash2)}
button.pill{cursor:pointer;font-family:inherit}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:11px;
  border:1px solid var(--edge2);background:var(--wash);color:var(--tx);font:inherit;font-size:14px;font-weight:650;cursor:pointer;
  white-space:nowrap;text-decoration:none;user-select:none;
  transition:transform .15s var(--ease),border-color .2s,background .2s,box-shadow .25s,opacity .2s,color .2s}
.btn svg{width:16px;height:16px;flex:none}
.btn:hover{border-color:var(--line-hi);background:var(--wash2);color:#fff}
.btn:active{transform:translateY(1px) scale(.98)}
.btn[disabled],.btn.busy{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:10px}
.btn.xs{height:28px;padding:0 10px;font-size:12.5px;border-radius:8px;gap:6px}
.btn.xs svg{width:13px;height:13px}
.btn-primary{border:0;color:#fff;background:var(--grad);background-size:140% 100%;background-position:0 0;
  box-shadow:0 8px 22px -10px rgba(139,92,246,.8),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:hover{background-position:100% 0;color:#fff;box-shadow:0 12px 28px -10px rgba(139,92,246,.95),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-green{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.1);color:#6ee7b7}
.btn-green:hover{border-color:rgba(52,211,153,.6);background:rgba(52,211,153,.18);color:#a7f3d0}
.btn-red{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08);color:#fca5a5}
.btn-red:hover{border-color:rgba(248,113,113,.6);background:rgba(248,113,113,.16);color:#fecaca}
.btn-amber{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:#fcd34d}
.btn-amber:hover{border-color:rgba(251,191,36,.6);background:rgba(251,191,36,.15);color:#fde68a}
.btn-ghost{background:transparent;border-color:transparent;color:var(--dim)}
.btn-ghost:hover{background:var(--wash);border-color:transparent;color:#fff}
.btn .spin{display:none}
.btn.busy .spin{display:inline-block}
.btn.busy svg:not(.spin){display:none}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rbxbtn{margin-left:auto;align-self:center}

/* ---------- hero (game / group / user) ------------------------------------ */
.hero{display:flex;gap:18px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.hero>img,.hero .hero-img{width:88px;height:88px;border-radius:22px;flex:none;object-fit:cover;background:var(--panel2);display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 16px 36px -16px rgba(0,0,0,.9)}
.hero .hero-img.round{border-radius:50%}
.hero-main{min-width:0;flex:1}
.hero h1{font-size:clamp(24px,3.2vw,32px);line-height:1.12;margin:0 0 7px;letter-spacing:-.025em;word-break:break-word;font-weight:750}
.hero h1 .vbadge{vertical-align:-1px}
.hero-sub{color:var(--dim);margin:-3px 0 8px;font-size:15px}
.hero-sub a.runs{color:var(--tx);font-weight:650}
.hero-sub a.runs:hover{color:#fff}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.hero .livechip,.livechip{display:inline-flex;align-items:center;gap:8px;padding:4px 11px 4px 10px;border-radius:999px;
  background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.24);color:#6ee7b7;font-weight:650;font-size:13px;margin:2px 4px 2px 0}
@media(max-width:620px){.hero>img,.hero .hero-img{width:68px;height:68px;border-radius:17px}.hero-actions{margin-left:0;width:100%}.hero-actions .btn{flex:1}}

/* screenshots strip */
.shots{display:flex;gap:12px;overflow-x:auto;margin:0;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.shots img{height:150px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;flex:none;scroll-snap-align:start;cursor:zoom-in;
  background:var(--panel2);box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:transform .3s var(--out),box-shadow .3s}
.shots img:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 28px -14px rgba(0,0,0,.9)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;
  background:rgba(4,6,11,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .25s;cursor:zoom-out}
.lightbox.show{opacity:1}
.lightbox img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:var(--shadow-lg);transform:scale(.95);transition:transform .35s var(--out)}
.lightbox.show img{transform:none}

/* ---------- tabs ---------------------------------------------------------- */
.tabbar{position:relative;display:flex;gap:2px;border-bottom:1px solid var(--edge);margin:26px 0 18px;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{position:relative;display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--dim);font:inherit;
  font-weight:600;font-size:14.5px;padding:10px 14px 12px;cursor:pointer;white-space:nowrap;transition:color .2s}
.tabbar button:hover{color:#fff}
.tabbar button.on{color:#fff}
.tabbar button svg{width:16px;height:16px;opacity:.8}
.tabbar button .count{font-size:11.5px;font-weight:650;padding:0 7px;border-radius:999px;background:var(--wash2);color:var(--dim);line-height:1.6}
.tabbar button.on .count{background:rgba(75,141,255,.15);color:#a9c6ff}
.tab-ink,.hub-ink{position:absolute;left:0;bottom:-1px;height:2px;border-radius:2px;pointer-events:none;
  box-sizing:border-box;border:solid transparent;border-width:0 10px;background:var(--grad);background-clip:padding-box;
  transition:transform .4s var(--out),width .4s var(--out),opacity .25s}
.tabbar:not(.has-slider) button.on{box-shadow:inset 0 -2px 0 var(--acc)}
.tabpane{display:none}
.tabpane.on{display:block}

/* ---------- game / user / group / item cards ------------------------------ */
.gamecards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.gamecards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gamecards{grid-template-columns:1fr}}
/* the glowing thumbnail tiles: lift, zoom and a sweep of light on hover */
.gcard{position:relative;display:block;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--panel2);
  aspect-ratio:16/10;transition:transform .35s var(--out),border-color .25s,box-shadow .35s}
.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--out)}
.gcard::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;
  transition:background-position .8s var(--out)}
.gcard:hover{transform:translateY(-4px);border-color:var(--line-hi);box-shadow:0 22px 44px -20px rgba(0,0,0,.9),0 0 0 1px rgba(75,141,255,.22),0 0 34px -10px rgba(75,141,255,.35)}
.gcard:hover img{transform:scale(1.06)}
.gcard:hover::after{background-position:-50% 0}
.gcard-info{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(4,6,12,.94))}
.gcard-name{color:#fff;font-weight:650;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.8);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gcard-stats{display:flex;gap:12px;font-size:12.5px;color:#d7deeb;margin-top:3px;flex-wrap:wrap}
.gcard-stats .dim{color:#9aa6bb}
.gcard.noart{background:linear-gradient(160deg,var(--panel3),var(--panel))}
.gcard.noart::before{content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' fill='none' stroke='%23535e75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='10' y1='11' y2='11'/%3E%3Cline x1='8' x2='8' y1='9' y2='13'/%3E%3Cline x1='15' x2='15.01' y1='12' y2='12'/%3E%3Cline x1='18' x2='18.01' y1='10' y2='10'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59L2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3l-.7-7.41A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E") center 40%/42px no-repeat}

.usercards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.ucard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--panel);
  border:1px solid var(--edge);border-radius:var(--r);padding:22px 14px 18px;transition:transform .3s var(--out),border-color .25s}
.ucard img,.ucard .uph{width:80px;height:80px;border-radius:50%;background:var(--panel2);box-shadow:0 0 0 3px var(--panel),0 0 0 4px var(--line2);transition:box-shadow .3s}
.ucard:hover img{box-shadow:0 0 0 3px var(--panel),0 0 0 5px rgba(139,92,246,.7)}
.ucard .uname{margin-top:12px;font-weight:650;color:var(--tx);font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard .uat{color:var(--dim);font-size:13px;margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ucard:hover,.grpcard:hover,.itemcard:hover,.simcard:hover{transform:translateY(-3px);border-color:var(--edge2)}

.groupcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.grpcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);
  padding:12px;text-align:left;transition:transform .3s var(--out),border-color .25s}
.grpcard img,.grpcard .gph{width:100%;aspect-ratio:1/1;border-radius:11px;background:var(--panel2);object-fit:cover}
.grpcard .gname{margin-top:10px;font-weight:650;color:var(--tx);font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grpcard .gmeta{color:var(--dim);font-size:13px;margin-top:2px}
.grpcard .gown{color:#a9c6ff;font-size:12.5px;margin-top:4px;font-weight:600}
.vbadge{vertical-align:-3px;margin-left:3px}

.simgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.simgrid{grid-template-columns:repeat(2,1fr)}}
.simcard{display:block;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:14px;text-align:center;
  transition:transform .3s var(--out),border-color .25s;color:var(--tx)}
.simcard img,.simcard .simph{width:68px;height:68px;border-radius:16px;background:var(--panel2);display:inline-block;transition:transform .35s var(--spring)}
.simcard:hover img{transform:scale(1.06) rotate(-2deg)}
.simcard .sname{display:block;margin-top:10px;font-size:14px;font-weight:650;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simcard:hover .sname{color:#fff}
.simcard span.sm{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:12.5px;margin-top:3px}

.posgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.poscard{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:14px 16px;transition:border-color .25s}
.poscard:hover{border-color:var(--edge2)}
.poscard .pname{font-size:13px;color:var(--dim);font-weight:550;display:flex;align-items:center}
.poscard .prank{font-size:24px;font-weight:700;color:#fff;margin:4px 0;display:flex;align-items:baseline;gap:8px;letter-spacing:-.01em}
.poscard .pdates{font-size:12px;color:var(--faint)}
.poscard.hidden{display:none}

.itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.itemcard{display:block;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:14px 12px;text-align:center;
  transition:transform .3s var(--out),border-color .25s;color:var(--tx)}
.itemcard img{width:72px;height:72px;border-radius:12px;background:var(--panel2);transition:transform .35s var(--spring)}
.itemcard:hover img{transform:scale(1.06)}
.itemcard .iname{display:block;margin-top:9px;font-size:13.5px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itemcard .iprice{display:block;color:var(--dim);font-size:12.5px;margin-top:3px}
.itemcard .iprice b{color:#6ee7b7}
.itemgrid:not(.showoff) .itemcard.offsale{display:none}
.itemcard.offsale{opacity:.55}

.cfilter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.cfilter button,.cfilter a{display:inline-flex;align-items:center;background:var(--wash);border:1px solid var(--edge);color:var(--tx2);border-radius:999px;
  padding:5px 12px;font:inherit;font-size:13px;font-weight:550;cursor:pointer;transition:all .2s}
.cfilter button:hover,.cfilter a:hover{border-color:var(--edge2);color:#fff}
.cfilter button.on,.cfilter a.on{border-color:transparent;background:rgba(75,141,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(75,141,255,.4)}
.flagimg{width:20px;height:15px;vertical-align:-2px;border-radius:3px;margin-right:7px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}

/* milestones */
.msrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.msrow:last-child{border-bottom:0}
.msrow img{width:30px;height:30px;border-radius:8px;flex:none}
.msbadge{min-width:124px;text-align:center;background:var(--wash);border:1px solid var(--edge);border-radius:10px;padding:5px 11px;font-size:13px;color:var(--tx2)}
.msbadge b{color:#fff;font-size:15px}
.msrow .when{margin-left:auto;color:var(--dim);font-size:12.5px;white-space:nowrap}
.mslist{display:flex;flex-direction:column}
.msitem{position:relative;display:flex;align-items:center;gap:14px;padding:12px 10px;margin:0 -10px;border-radius:12px;border-bottom:1px solid var(--line);
  transition:background .2s}
.msitem:hover{background:var(--wash)}
.msitem img,.msitem .ph{width:44px;height:44px;border-radius:11px;flex:none;background:var(--panel2)}
.msitem .mbody{min-width:0;flex:1}
.msitem .mname{font-weight:650;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.msitem .mname:hover{color:#fff}
.msitem .mkind{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:650}
.msitem .mval{text-align:right;flex:none}
.msitem .mval b{display:block;font-size:20px;font-weight:700;letter-spacing:-.01em}
.msitem .mval span{font-size:12.5px;color:var(--dim)}
.msitem .mwhen{flex:none;width:120px;text-align:right;color:var(--dim);font-size:12.5px}
.msitem.big .mval b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(max-width:620px){.msitem .mwhen{display:none}.msitem{gap:11px}}
.daylabel{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:20px 0 4px}

/* ---------- forms --------------------------------------------------------- */
.toggle{display:inline-flex;align-items:center;gap:10px;color:var(--tx2);font-size:14px;margin:0 18px 14px 0;cursor:pointer;user-select:none}
.toggle input{appearance:none;-webkit-appearance:none;position:relative;width:36px;height:21px;border-radius:999px;margin:0;flex:none;cursor:pointer;
  background:var(--panel3);border:1px solid var(--line2);transition:background .25s,border-color .25s}
.toggle input::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#cfd8ee;
  box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .3s var(--spring),background .25s}
.toggle input:checked{background:var(--acc);border-color:var(--acc)}
.toggle input:checked::after{transform:translateX(15px);background:#fff}
.toggle input:disabled{opacity:.4;cursor:not-allowed}
.field{display:block;color:var(--dim);font-size:12.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.input,.select{background:var(--panel2);border:1px solid var(--line2);color:var(--tx);border-radius:12px;padding:11px 14px;font:inherit;font-size:15px;
  outline:none;transition:border-color .2s,box-shadow .2s}
.input:focus,.select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(75,141,255,.18)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;--c:var(--acc);--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--c) var(--p),var(--panel3) var(--p))}
input[type=range]::-moz-range-track{height:7px;border-radius:99px;background:var(--panel3)}
input[type=range]::-moz-range-progress{height:7px;border-radius:99px;background:var(--c)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent),0 4px 10px rgba(0,0,0,.5);transition:transform .2s var(--spring)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(75,141,255,.35),0 4px 10px rgba(0,0,0,.5)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}

/* ---------- notes, empty states, callouts --------------------------------- */
.note{color:var(--dim);font-size:13px;margin-top:10px;line-height:1.55}
.note b{color:var(--tx2)}
.empty{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:14px;padding:18px;border:1px dashed var(--edge2);border-radius:14px}
.empty svg{width:20px;height:20px;flex:none;opacity:.7}
.panel .empty,.hubside .empty{border:0;background:none;padding:12px 2px}
.callout{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:1px solid var(--edge2);background:var(--panel);margin:0 0 16px;font-size:14px;color:var(--tx2)}
.callout svg{width:19px;height:19px;flex:none;margin-top:1px}
.callout.info{border-color:rgba(75,141,255,.28);background:rgba(75,141,255,.05)}.callout.info svg{color:#7fabff}
.callout.warn{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.05)}.callout.warn svg{color:var(--warn)}
.callout.bad{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.05)}.callout.bad svg{color:var(--down)}
.callout.good{border-color:rgba(52,211,153,.28);background:rgba(52,211,153,.05)}.callout.good svg{color:var(--up)}
.callout b{color:#fff}
.callout code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:5px;color:#e5ecff}

/* ---------- footer -------------------------------------------------------- */
.site-footer{position:relative;z-index:1;border-top:1px solid var(--edge);margin-top:10px}
.fwrap{max-width:1240px;margin:auto;padding:28px 24px 40px;display:flex;flex-wrap:wrap;gap:22px 40px;align-items:flex-start;justify-content:space-between}
.fbrand{max-width:380px}
.fbrand .logo{font-size:17px}
.fbrand p{color:var(--dim);font-size:13.5px;margin:10px 0 0}
.flinks{display:flex;gap:44px;flex-wrap:wrap}
.flinks div{display:flex;flex-direction:column;gap:6px;font-size:14px}
.flinks h4{margin:0 0 4px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:650}
.flinks a{color:var(--dim)}.flinks a:hover{color:#fff}
.fpulse{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:5px 12px;border-radius:999px;border:1px solid var(--edge);
  font-size:12.5px;color:var(--tx2);background:var(--wash)}

/* ---------- motion that stays ----------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}}
@keyframes growY{from{transform:scaleY(0)}}

/* ---------- toasts & modal ------------------------------------------------- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:400;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:11px;max-width:380px;padding:11px 15px 11px 12px;border-radius:13px;
  background:rgba(17,24,38,.97);border:1px solid var(--edge2);color:var(--tx);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:toastIn .4s var(--spring) both}
.toast svg{width:18px;height:18px;flex:none}
.toast.ok svg{color:var(--up)}.toast.bad svg{color:var(--down)}.toast.info svg{color:#7fabff}
.toast.out{animation:toastOut .3s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(24px)}}
.modal-back{position:fixed;inset:0;z-index:350;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,6,11,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .2s both}
.modal{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--edge2);border-radius:18px;padding:22px;
  box-shadow:var(--shadow-lg);animation:popIn .3s var(--spring) both}
.modal h3{margin:0 0 8px;font-size:18px;display:flex;align-items:center;gap:10px}
.modal h3 svg{width:21px;height:21px}
.modal p{color:var(--tx2);margin:0 0 20px;font-size:14.5px}
.modal .acts{display:flex;justify-content:flex-end;gap:10px}

/* ---------- records (gold lives here and nowhere else) -------------------- */
.wrhero{position:relative;background:var(--panel);border:1px solid rgba(245,196,94,.2);border-radius:20px;
  padding:28px 26px 22px;margin-bottom:24px;overflow:hidden}
.wrhero::before{content:'';position:absolute;inset:-40% -20% auto;height:150%;pointer-events:none;
  background:radial-gradient(ellipse at 22% 0,rgba(245,196,94,.13),transparent 58%)}
.wrhero::after{content:'';position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(245,196,94,.75),transparent)}
.wrkicker{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.wrkicker svg{width:16px;height:16px}
.wrvalue{position:relative;font-size:clamp(40px,7vw,68px);font-weight:800;line-height:1.05;margin:10px 0 6px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff7df,#f5c45e 60%,#c98a2c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.wrholder{position:relative;font-size:18px;color:var(--tx)}
.wrholder a{color:var(--gold);font-weight:700}
.wrwhen{position:relative;color:var(--dim);font-size:13.5px;margin-top:4px}
.lineage{position:relative;margin-top:22px;border-top:1px solid var(--line);padding-top:8px}
.lineage h4{margin:10px 0 6px;font-size:12px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.lrow{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow .lv{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tx);min-width:120px}
.lrow .ln{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .ld{margin-left:auto;color:var(--faint);font-size:12.5px;white-space:nowrap}
.lrow .bar{flex:0 0 auto;height:8px;border-radius:5px;background:linear-gradient(90deg,#f5c45e,#b4842f)}
.reccards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.reccards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reccards{grid-template-columns:1fr}}
.reccard{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:18px;transition:border-color .25s}
.reccard .rfoot{margin-top:auto}
.reccard:hover{border-color:rgba(245,196,94,.3)}
.reccard .rt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.reccard .rt svg{width:15px;height:15px;color:var(--gold)}
.reccard .rv{font-size:28px;font-weight:750;color:#fff;margin:8px 0 0;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.reccard .ru{font-size:12.5px;color:var(--dim)}
.reccard .rh{margin-top:10px;font-size:15px}
.reccard .rh a{font-weight:700;color:var(--gold)}
.reccard .rd{color:var(--faint);font-size:12.5px;margin-top:2px}
.reccard .rb{color:var(--dim);font-size:13px;line-height:1.5;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.reccard details{margin-top:10px}
.reccard summary{cursor:pointer;color:var(--dim);font-size:13px;user-select:none;font-weight:550}
.reccard summary:hover{color:#fff}
.reccard .prev{margin-top:6px;font-size:13px;color:var(--dim)}
.reccard .prev div{display:flex;gap:8px;padding:4px 0}
.reccard .prev div span{margin-left:auto;color:var(--faint)}
.srcnote{color:var(--faint);font-size:12px;margin-top:6px}

/* misc page bits */
.ch-title a{display:inline-flex;align-items:center;min-width:0;max-width:100%;color:var(--tx);font-weight:650}
.ch-title a:hover{color:#fff}
.ch-title a .gicon{width:24px;height:24px;margin-right:9px;border-radius:7px}
.ch-head .ch-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msitem .mval span svg{width:13px;height:13px;vertical-align:-2px}
.stat span .rate{color:var(--tx)}
.skel,.skel-line{background:linear-gradient(100deg,var(--panel2) 30%,var(--panel3) 50%,var(--panel2) 70%);background-size:220% 100%;animation:shimmer 1.5s linear infinite}
.skel-line{display:inline-block;height:.9em;border-radius:6px;vertical-align:middle}
.gcard.skel{border:0}
.fillnote{display:inline-flex;align-items:center;gap:10px;margin:4px 0 6px;padding:6px 13px;border-radius:999px;font-size:13px;color:var(--tx2);
  background:rgba(75,141,255,.07);border:1px solid rgba(75,141,255,.22)}
.fillnote svg{width:15px;height:15px}
.pill.fetching{color:#a9c6ff;border-color:rgba(75,141,255,.32);background:rgba(75,141,255,.07)}
.pill .spin{width:12px;height:12px}
.spark.nodata{color:var(--line2)}

/* ---------- discovery hub (Games / Charts / Genres / Trends) --------------- */
.hubtabs{position:relative;display:flex;gap:4px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--edge)}
.hubtabs::-webkit-scrollbar{display:none}
.hubtabs a{position:relative;display:flex;align-items:center;gap:11px;padding:4px 14px 13px 4px;margin-right:12px;font-size:21px;font-weight:700;
  letter-spacing:-.02em;color:var(--faint);white-space:nowrap;transition:color .2s}
.hubtabs a:hover{color:var(--tx2)}
.hubtabs a.on{color:#fff}
.hubtabs:not(.has-slider) a.on::after{content:'';position:absolute;left:4px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--grad)}
.hubtabs .hub-ink{border-width:0 14px 0 4px}
.hubtabs .hti{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--wash);border:1px solid var(--edge);color:var(--dim);
  transition:background .3s,color .3s,transform .35s var(--spring),box-shadow .3s,border-color .3s}
.hubtabs .hti svg{width:19px;height:19px}
.hubtabs a:hover .hti{transform:translateY(-2px)}
.hubtabs a.on .hti{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 22px -10px rgba(139,92,246,.9)}
@media(max-width:620px){.hubtabs a{font-size:17px;gap:9px;padding-right:8px;margin-right:6px}.hubtabs .hti{width:32px;height:32px;border-radius:10px}}
.hubbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.hubbar .seg{margin:0}
.hubbar-r{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.hubhead{margin:20px 0 16px}
.hubhead h1{font-size:clamp(26px,3.2vw,34px);margin:0;letter-spacing:-.025em;font-weight:750}
.hubhead p{color:var(--dim);margin:5px 0 0;font-size:15px}
.hub{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:start}
.hubmain{min-width:0}
.hubside{display:flex;flex-direction:column;gap:28px;position:sticky;top:calc(var(--header-h) + 18px)}
/* the sidebar reads as part of the page, not boxes beside it */
.hubside .panel{background:none;border:0;padding:0}
.hubside .panel h3{font-size:19px;font-weight:700;margin-bottom:8px}
.hubside .panel h3 .phi{display:none}
@media(max-width:1100px){.hub{grid-template-columns:minmax(0,1fr)}.hubside{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}}
@media(max-width:700px){.hubside{grid-template-columns:minmax(0,1fr)}}
.h3sub{font-size:12.5px;font-weight:450;color:var(--faint);margin-left:-2px}
.sidelabel{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:14px 0 4px}
.sideitem{display:flex;align-items:center;gap:11px;min-height:var(--row);padding:7px 8px;margin:0 -8px;border-radius:12px;color:var(--tx2);font-size:13.5px;transition:background .2s}
a.sideitem:hover{background:var(--wash);color:#fff}
.sideitem img,.sideitem .ph{width:36px;height:36px;border-radius:10px;flex:none;background:var(--panel2);object-fit:cover}
.si-body{min-width:0;flex:1;line-height:1.35}
.si-body b{display:block;color:var(--tx);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-body small{display:block;color:var(--faint);font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-val{flex:none;text-align:right;line-height:1.3}
.si-val b{display:block;font-size:14.5px;font-weight:750}
.si-val small{display:block;color:var(--faint);font-size:11.5px}
/* "did it last?": the verdict, over a bar of how much of the peak stayed */
.bo-r{flex:none;width:94px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.bo-bar{display:block;width:100%;height:3px;border-radius:3px;background:var(--panel3);overflow:hidden}
.bo-bar i{display:block;height:100%;border-radius:3px;background:var(--acc)}
.bo-bar i.good{background:var(--up)}.bo-bar i.warn{background:var(--warn)}.bo-bar i.flat{background:var(--faint)}
.bo-tag,.statustag{flex:none;display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.02em;
  color:#a9c6ff;background:rgba(75,141,255,.12)}
.bo-tag.good,.statustag.good{color:#6ee7b7;background:rgba(52,211,153,.12)}
.bo-tag.warn,.statustag.warn{color:#fcd34d;background:rgba(251,191,36,.12)}
.bo-tag.flat{color:var(--dim);background:var(--wash2)}
.statustag.bad{color:#fca5a5;background:rgba(248,113,113,.12)}
.statustag{margin-left:8px;vertical-align:2px}
.flat{color:var(--dim)}
.tag{display:inline-flex;align-items:center;margin-left:7px;padding:1px 6px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.05em;vertical-align:2px}
.tag.new{color:#a9c6ff;background:rgba(75,141,255,.15)}
.tag.upd{color:#c4b5fd;background:rgba(139,92,246,.15)}
.tag.own{color:#fcd34d;background:rgba(251,191,36,.12)}
.tag.dev{color:#a9c6ff;background:rgba(75,141,255,.13)}
.mv{margin-left:6px;font-size:10.5px;font-weight:700;padding:1px 5px;border-radius:5px;vertical-align:2px}
.mv.up{color:#6ee7b7;background:rgba(52,211,153,.12)}.mv.down{color:#fca5a5;background:rgba(248,113,113,.12)}

/* theme chips */
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 0 16px;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border-radius:999px;border:1px solid var(--edge);
  background:var(--wash);color:var(--tx);font-size:13px;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--edge2);color:#fff;background:var(--wash2)}
.chip b{font-weight:650}
.chip .up{font-weight:700;font-size:12px}
.istack{display:inline-flex;flex:none}
.istack img,.istack i{width:var(--s);height:var(--s);border-radius:calc(var(--s) * .3);border:2px solid var(--bg);background:var(--panel2);object-fit:cover;display:block}
.istack>*+*{margin-left:calc(var(--s) * -.35)}
.istack i.ph{display:grid;place-items:center;color:var(--faint)}
.istack i.ph svg{width:55%;height:55%}

/* podium */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:10px}
@media(max-width:760px){.podium{grid-template-columns:1fr}}
.pod{position:relative;display:flex;flex-direction:column;padding:15px 16px 0;border-radius:16px;overflow:hidden;color:var(--tx);
  border:1px solid var(--edge);background:var(--panel);transition:transform .35s var(--out),border-color .25s,box-shadow .35s}
.pod:hover{transform:translateY(-3px);color:var(--tx);box-shadow:0 22px 44px -22px rgba(0,0,0,.9)}
.pod.p1{border-color:rgba(245,196,94,.26);background:linear-gradient(180deg,rgba(245,196,94,.08),transparent 60%),var(--panel)}
.pod.p2{border-color:rgba(174,184,204,.22);background:linear-gradient(180deg,rgba(174,184,204,.07),transparent 60%),var(--panel)}
.pod.p3{border-color:rgba(217,130,74,.24);background:linear-gradient(180deg,rgba(217,130,74,.08),transparent 60%),var(--panel)}
.pod-rank{position:absolute;right:15px;top:8px;font-size:36px;font-weight:800;line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff7df,#f5c45e 60%,#c98a2c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pod.p2 .pod-rank{background:linear-gradient(180deg,#fff,#aeb8cc);-webkit-background-clip:text;background-clip:text}
.pod.p3 .pod-rank{background:linear-gradient(180deg,#ffe2cc,#d9824a);-webkit-background-clip:text;background-clip:text}
.pod-icon{width:50px;height:50px;border-radius:13px;background:var(--panel2);box-shadow:0 10px 24px -10px rgba(0,0,0,.9);transition:transform .4s var(--spring)}
.pod:hover .pod-icon{transform:scale(1.05) rotate(-3deg)}
.pod-name{margin-top:12px;font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px}
.pod-by{color:var(--faint);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-val{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:8px}
.pod-val b{font-size:24px;font-weight:750;letter-spacing:-.02em}
.pod-val small{color:var(--dim);font-size:12.5px;white-space:nowrap}
.pod-spark{display:block;width:calc(100% + 32px);height:52px;margin:6px -16px 0}

/* list rows: on the page, divided by hairlines */
.hlist{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:30px 44px minmax(0,1fr) 120px 104px;align-items:center;gap:13px;padding:10px 8px;margin:0 -8px;
  border-bottom:1px solid var(--line);border-radius:12px;color:var(--tx);transition:background .18s}
.hrow:last-child{border-bottom:0}
.hrow:hover{background:var(--wash);color:var(--tx)}
.hrow:active,.crow:active,a.sideitem:active,.trow:active,.gt-line:active{background:var(--wash2);transition-duration:0s}
.gcard:active,.pod:active,.simcard:active,.ucard:active,.grpcard:active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
.hr-rank{color:var(--faint);font-weight:650;font-variant-numeric:tabular-nums;text-align:center;font-size:14px}
.hr-icon{width:44px;height:44px;border-radius:11px;background:var(--panel2);object-fit:cover;transition:transform .35s var(--spring)}
.hrow:hover .hr-icon{transform:scale(1.05)}
.hr-main{min-width:0}
.hr-name{display:block;font-weight:650;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-sub{display:block;color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.hr-spark .spark{width:120px;height:34px;display:block}
.hr-val{text-align:right;line-height:1.25;font-variant-numeric:tabular-nums}
.hr-val b{display:block;font-size:15.5px;font-weight:700;color:#fff}
.hr-val b.up{color:var(--up)}.hr-val b.down{color:var(--down)}
.hr-val small{display:block;color:var(--dim);font-size:12px;white-space:nowrap}
.arr{color:var(--faint)}
@media(max-width:760px){.hrow{grid-template-columns:24px 40px minmax(0,1fr) 90px;gap:10px;padding:9px 6px;margin:0 -6px}.hr-spark{display:none}.hr-icon{width:40px;height:40px}}
.hlist.compact{margin:0 -6px}
.hlist.compact .hrow{grid-template-columns:22px 34px minmax(0,1fr) 72px auto;gap:10px;min-height:var(--row);padding:6px 6px;margin:0;border:0;border-radius:10px}
.hlist.compact.nospark .hrow{grid-template-columns:22px 34px minmax(0,1fr) auto}
.hlist.compact.nospark .hr-spark{display:none}
.hlist.compact.nospark.norank .hrow{grid-template-columns:34px minmax(0,1fr) auto}
.hlist.norank .hr-rank{display:none}
.hlist.compact .hr-icon{width:34px;height:34px;border-radius:9px}
.hlist.compact .hr-sub{display:none}
.hlist.compact .hr-spark .spark{width:72px;height:26px}
.hlist.compact .hr-val b{font-size:14px}
.hlist.compact .hr-name{font-size:14px;font-weight:600}
.hlist.compact .hrow.me{background:rgba(75,141,255,.09)}
.hlist.compact .rankchip{min-width:20px;height:20px;font-size:11.5px;border-radius:6px}
.competition .hlist.compact .hrow{grid-template-columns:22px 34px minmax(0,1fr) 90px}

/* treemap */
.treemap{position:relative;height:440px;border-radius:14px;overflow:hidden;background:var(--bg2)}
.treemap .tile{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:6px 8px;overflow:hidden;color:#fff;
  border:1.5px solid var(--bg2);border-radius:8px;font-size:11.5px;line-height:1.2;transition:filter .2s}
.treemap .tile:hover{filter:brightness(1.3);z-index:2;color:#fff}
.treemap .tile img{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:9px;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.treemap .tile.xl img{width:46px;height:46px;border-radius:12px}
.treemap .tile b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.treemap .tile.xl b{font-size:14px}
.treemap .tile span{opacity:.9;font-weight:650;white-space:nowrap}

/* charts board */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.cgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.cgrid{grid-template-columns:1fr}}
.ccard{position:relative;padding:14px 14px 10px;border-radius:var(--r);border:1px solid var(--edge);background:var(--panel);transition:border-color .25s}
.ccard:hover{border-color:var(--edge2)}
.cc-head{display:flex;align-items:center;gap:11px;margin:0 0 8px;color:var(--tx)}
.cc-head b{display:block;font-size:15px;color:#fff;font-weight:650}
.cc-head small{display:block;color:var(--faint);font-size:12.5px}
.cc-head:hover{color:var(--tx)}
.cc-go{width:18px;height:18px;margin-left:auto;color:var(--faint);transition:transform .25s var(--out),color .2s}
.cc-head:hover .cc-go{transform:translateX(3px);color:#fff}
.cc-rows{display:flex;flex-direction:column}
.cc-rows.two{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
@media(max-width:760px){.cc-rows.two{grid-template-columns:1fr}}
.crow{display:flex;align-items:center;gap:10px;min-height:var(--row);padding:6px 6px;margin:0 -6px;border-radius:10px;color:var(--tx);transition:background .2s}
.crow:hover{background:var(--wash);color:var(--tx)}
.crow img,.crow .ph{width:34px;height:34px;border-radius:9px;flex:none;background:var(--panel2)}
.cr-rank{width:20px;flex:none;text-align:center;font-weight:700;color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums}
.cr-rank.top{color:var(--gold)}
.cr-main{min-width:0;flex:1}
.cr-name{display:block;font-weight:650;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-by{display:block;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-val{font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;text-align:right;line-height:1.3}
.cr-val small{display:block;font-size:11.5px;font-weight:500;color:var(--faint)}
.cc-more{max-height:0;overflow:hidden;transition:max-height .5s var(--out)}
.cc-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:6px;padding:7px;border:0;border-radius:10px;
  background:var(--wash);color:var(--dim);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.cc-toggle:hover{background:var(--wash2);color:#fff}
.cc-toggle svg{width:15px;height:15px;transition:transform .3s var(--out)}
.ccard.open .cc-toggle svg{transform:rotate(180deg)}
.ccard.wide{padding:10px 18px}

/* genres + trends tables */
.gtable,.ttable{display:flex;flex-direction:column}
.gt-head,.gt-line{display:grid;grid-template-columns:34px minmax(0,1.5fr) minmax(0,1fr) 84px 92px 120px 24px;align-items:center;gap:12px;padding:10px 8px}
.tt-head,.trow{display:grid;grid-template-columns:34px minmax(0,1.6fr) minmax(0,1fr) 78px 86px 84px;align-items:center;gap:12px;padding:10px 8px}
.gt-head,.tt-head{font-size:11.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--edge)}
.grow{border-bottom:1px solid var(--line)}
.grow:last-child{border-bottom:0}
.gt-line{width:100%;border:0;background:none;color:var(--tx);font:inherit;text-align:left;cursor:pointer;border-radius:12px;transition:background .2s}
.gt-line:hover{background:var(--wash)}
.gt-rank,.tt-rank{font-weight:700;color:var(--faint);text-align:center;font-variant-numeric:tabular-nums}
.gt-rank.top,.tt-rank.top{color:var(--gold)}
.gt-name,.tt-name{display:flex;align-items:center;gap:12px;min-width:0}
.gt-name b,.tt-name b{display:block;color:#fff;font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-name small,.tt-name small{display:block;color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-name>span:last-child,.tt-name>span:last-child{min-width:0}
.gt-share{display:flex;align-items:center;gap:10px;font-weight:650;font-variant-numeric:tabular-nums;font-size:13.5px}
.sharebar{flex:1;height:6px;border-radius:5px;background:var(--panel3);overflow:hidden;min-width:30px}
.sharebar i{display:block;height:100%;border-radius:5px;background:var(--grad)}
.gt-sp .spark{width:120px;height:30px;display:block}
.gt-chev svg{width:18px;height:18px;color:var(--faint);transition:transform .3s var(--out)}
.grow.open .gt-chev svg{transform:rotate(180deg)}
.gt-more{max-height:0;overflow:hidden;transition:max-height .5s var(--out)}
.gt-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;padding:4px 8px 14px 54px}
.gt-games a{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;color:var(--tx2);font-size:13.5px}
.gt-games a:hover{background:var(--wash);color:#fff}
.gt-games img{width:30px;height:30px;border-radius:8px}
.gt-games span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-games b{font-size:13px}
.trow{border-bottom:1px solid var(--line);color:var(--tx);border-radius:12px;transition:background .2s}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--wash);color:var(--tx)}
.wkbars{display:flex;align-items:flex-end;gap:3px;height:30px}
.wkbars i{flex:1;max-width:12px;border-radius:3px 3px 1px 1px;background:rgba(75,141,255,.3)}
.wkbars i.now{background:var(--acc)}
@media(max-width:860px){
  .gt-head,.gt-line{grid-template-columns:22px minmax(0,1fr) 60px 76px 18px;gap:10px;padding:10px 6px}
  .gt-head span:nth-child(3),.gt-share,.gt-sp{display:none}
  .tt-head,.trow{grid-template-columns:22px minmax(0,1fr) 54px 70px;gap:10px;padding:10px 6px}
  .tt-head .tt-wk,.trow .tt-wk,.tt-head span:last-child,.trow>span:last-child{display:none}
  .gt-games{padding-left:8px}
  .gt-name .istack>*+*,.tt-name .istack>*+*{display:none}
  .gt-name,.tt-name{gap:10px}
}

/* ---------- game page ------------------------------------------------------ */
.ghead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ghead .gh-icon{width:72px;height:72px;border-radius:18px;flex:none;object-fit:cover;background:var(--panel2);display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 14px 30px -14px rgba(0,0,0,.9)}
.ghead .gh-main{min-width:0;flex:1}
.ghead h1{font-size:clamp(24px,3vw,32px);line-height:1.12;margin:0;letter-spacing:-.025em;font-weight:750;word-break:break-word}
.gh-by{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:6px;color:var(--dim);font-size:14px}
.gh-by a{color:var(--tx2);font-weight:600}
.gh-by a:hover{color:#fff}
.gh-by svg{width:14px;height:14px;opacity:.7}
.gh-by .dotsep{color:var(--faint)}
.ghead .hero-actions{margin-left:auto}
@media(max-width:620px){.ghead .gh-icon{width:60px;height:60px;border-radius:15px}.ghead .hero-actions{margin-left:0;width:100%}.ghead .hero-actions .btn{flex:1}}
.gtop{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start}
@media(max-width:1000px){.gtop{grid-template-columns:minmax(0,1fr)}}
.gfacts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--edge)}
.gfacts>div{min-width:0}
.gfacts span{display:block;font-size:12.5px;color:var(--dim);white-space:nowrap}
.gfacts b{display:block;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.gfacts b sup{font-size:.6em;font-weight:600;color:var(--dim);margin-right:1px}
@media(max-width:620px){.gfacts{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}}
.gside{display:flex;flex-direction:column;gap:14px}
.gart{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--panel2);border:1px solid var(--edge);cursor:zoom-in}
.gart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--out)}
.gart:hover img{transform:scale(1.03)}
.gart.noart{cursor:default}
.gart.noart img{object-fit:contain;padding:22%;opacity:.85}
.gblurb{color:var(--tx2);font-size:14px;line-height:1.5;margin:0}
.gkv{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.gkv span{display:block;font-size:12.5px;color:var(--dim)}
.gkv b{display:block;font-size:14.5px;font-weight:650;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gside .pill{margin:0}
.gside .ids{display:flex;flex-wrap:wrap;gap:6px}
.peaks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.peaks>div{padding:14px 16px;border-left:1px solid var(--edge);min-width:0}
.peaks>div:first-child{border-left:0}
.peaks b{display:block;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.peaks span{display:block;font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.peaks{grid-template-columns:repeat(2,minmax(0,1fr))}.peaks>div:nth-child(3){border-left:0}.peaks>div:nth-child(n+3){border-top:1px solid var(--edge)}}
.momentum .mom-line,.competition .mom-line,.playtimes .mom-line{font-size:16.5px;color:var(--tx2);margin:2px 0 14px}
.momentum .mom-line b,.competition .mom-line b,.playtimes .mom-line b{font-weight:700;color:#fff}
.dbars-label{font-size:12px;color:var(--faint);margin-bottom:6px}
.dbars,.hod{display:flex;align-items:flex-end;gap:5px;height:118px;padding-bottom:18px;position:relative}
.dbars span,.hod span{position:relative;flex:1;height:100%;display:flex;align-items:flex-end}
.dbars i,.hod i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:var(--panel3);transition:background .2s}
.dbars span:hover i,.hod span:hover i{background:var(--line-hi)}
.dbars span.top i,.hod span.top i{background:rgba(139,92,246,.5)}
.dbars span.now i,.hod span.now i{background:var(--acc);box-shadow:0 0 14px rgba(75,141,255,.5)}
.dbars em,.hod em{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-style:normal;font-size:10.5px;color:var(--faint);white-space:nowrap}
.dbars span.now em,.hod span.now em{color:#a9c6ff;font-weight:650}
.hod{height:96px;gap:3px}
.mom-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.mom-stats span{display:block;font-size:12px;color:var(--faint)}
.mom-stats b{display:block;font-size:19px;font-weight:700;color:#fff;letter-spacing:-.01em}
.mom-stats b.up{color:var(--up)}.mom-stats b.down{color:var(--down)}
.mom-stats small{display:block;font-size:11.5px}
/* "when people play": one grid with the hours as its columns -- a row of
   bars for an average day, a row per day of the last week, the hour axis */
.pt-line{min-height:1.5em}
.ptgrid{display:flex;flex-direction:column;gap:3px}
.hrow7{display:grid;grid-template-columns:42px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.hrow7 em{font-style:normal;font-size:11px;color:var(--faint);white-space:nowrap}
.hrow7 i{display:block;height:15px;border-radius:3px;cursor:default;
  background:color-mix(in srgb,#4b8dff calc(var(--k) * 100%),var(--panel3));opacity:calc(.4 + var(--k) * .6)}
.hrow7 i.na{background:none;opacity:1;box-shadow:inset 0 0 0 1px var(--line)}
.hrow7 i.hl{box-shadow:0 0 0 1.5px rgba(238,242,251,.6)}
.hrow7.avg{height:64px;align-items:stretch;margin-bottom:5px}
.hrow7.avg em{align-self:end;line-height:1}
.hrow7.avg span{display:flex;align-items:flex-end}
.hrow7.avg span i{width:100%;height:auto;border-radius:3px 3px 1px 1px;background:var(--panel3);opacity:1;box-shadow:none}
.hrow7.avg span.hl i{background:var(--line-hi)}
.hrow7.avg span.top i{background:rgba(139,92,246,.7)}
.hrow7.avg span.now i{background:var(--acc);box-shadow:0 0 12px rgba(75,141,255,.45)}
.hrow7.axis{margin-top:2px}
.hrow7.axis b{font-weight:500;font-size:10.5px;line-height:14px;color:var(--faint);white-space:nowrap;overflow:visible}
.heat-key{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:11px;color:var(--faint)}
.hk-scale{display:flex;align-items:center;gap:8px}
.heat-key i{width:90px;height:6px;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,#4b8dff 0%,var(--panel3)),#4b8dff)}
/* Momentum and When people play end together: the daily bars take the
   spare height and both cards' numbers sit on one line at the bottom */
.eqrow>.momentum .dbars{flex:1 1 auto;height:auto;min-height:118px}
.eqrow>.panel>.mom-stats{margin-top:auto}
.eqrow>.momentum>:nth-last-child(2),.eqrow>.playtimes>:nth-last-child(2){margin-bottom:16px}
.chartbox.wide{grid-column:1/-1}

/* ---------- user page ------------------------------------------------------- */
.hero-img.ring{box-shadow:0 0 0 3px var(--bg),0 0 0 5px rgba(139,92,246,.7),0 16px 36px -16px rgba(0,0,0,.9)}
.gfacts.ufacts{margin:20px 0 0;padding:14px 0 0}
.uhero .hero-sub b{color:var(--tx)}
.uplayers{margin-top:22px}
.ustats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 18px;margin-top:14px;padding:12px 0 2px;border-top:1px solid var(--edge)}
.ustats>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:6px 0}
.ustats span:first-child{flex-basis:100%;font-size:12px;color:var(--faint)}
.ustats b{font-size:17px;font-weight:700;color:#fff}
.ustats .chg{font-size:11.5px;padding:0 6px}
.ustats .faint{font-size:12px}
.ubio{margin-top:16px;color:var(--tx2);font-size:14px;line-height:1.6}
.trackline{margin:34px 0 8px;font-size:clamp(18px,2.2vw,22px);font-weight:550;color:var(--dim);letter-spacing:-.01em}
.trackline b{color:#fff;font-weight:700}
.trackopts{margin-bottom:6px}
.trsec{margin:18px 0 6px}
.tr-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tr-head img,.tr-ph{width:28px;height:28px;border-radius:8px;background:var(--panel2)}
.tr-head img.round{border-radius:50%}
.tr-head a,.tr-head b{font-weight:700;color:#fff;font-size:16px}
.tr-head a:hover{color:#a9c6ff}
.tr-head .tag{margin-left:0}
.tr-sum{margin-left:auto;color:var(--faint);font-size:13px}
.tr-more{margin-top:12px}
.gc-chips{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:1}
.gc-live,.gc-chg{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff;
  background:rgba(6,8,14,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gc-chg.up{color:#6ee7b7}.gc-chg.down{color:#fca5a5}

/* ---------- home ------------------------------------------------------------ */
.home-hero{margin:4px 0 24px}
h2.sect{font-size:21px;margin:40px 0 14px}
.homemost{padding-bottom:10px}
.lb-side h3{margin-bottom:6px}
.mapgrid{grid-template-columns:2fr 1fr}
@media(max-width:900px){.mapgrid{grid-template-columns:1fr}}
.mapcard .treemap{height:400px}

/* Cards that share a row end together. Every list row is the same height
   (--row), so five rows are as tall in one card as in the next; and each
   card is a column whose list (.fill) stretches over whatever height the
   row's tallest card sets -- the spare space goes into the rows, evenly,
   instead of collecting as a hole under the shorter lists. */
.eqrow>.panel{display:flex;flex-direction:column}
.eqrow>.panel>h3{flex:none}
.eqrow .fill{flex:1 1 auto;display:flex;flex-direction:column}
.eqrow .fill>*{flex:1 1 auto}
.livebox.eqrow{align-items:stretch}
/* the map takes the height the pulse card beside it needs */
.eqrow>.mapcard .treemap{flex:1 1 auto;height:auto;min-height:360px}
@media(max-width:900px){.eqrow>.mapcard .treemap{min-height:320px}}
.slist{display:flex;flex-direction:column}

.pulse-split{display:flex;justify-content:space-between;font-size:15px;margin:4px 0 8px}
.pulse-split b{font-size:28px;font-weight:750;letter-spacing:-.02em;margin-right:4px}
.pulse-bar{display:flex;gap:3px;height:8px;border-radius:6px;overflow:hidden}
.pulse-bar i{display:block;height:100%}
.pulse-bar .u{background:var(--up);border-radius:6px 0 0 6px}.pulse-bar .d{background:var(--down);border-radius:0 6px 6px 0}
.pulse-rows{margin-top:14px}
.pulse-rows div{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:6px 0;border-top:1px solid var(--line);font-size:14px;color:var(--tx2)}
.pulse-rows span{display:flex;align-items:center;gap:9px}
.pulse-rows svg{width:16px;height:16px;color:var(--faint)}
.pulse-rows b{font-size:15.5px;color:#fff}
.pulsecard .sidelabel{margin:12px 0 2px}
/* genres: name, share and change, then the share bar under them */
.gmini{display:flex;flex-direction:column}
.gmini a{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:var(--row);padding:6px 6px;margin:0 -6px;border-radius:10px;color:var(--tx2);font-size:13.5px;transition:background .2s}
.gmini a:hover{background:var(--wash);color:#fff}
.gm-top{display:flex;align-items:baseline;gap:10px}
.gm-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--tx)}
.gmini b{color:#fff;font-size:14px;font-weight:700}
.gmini .gm-top>span:last-child{min-width:54px;text-align:right;font-size:12px;font-weight:650}
.gmini .sharebar{flex:none;width:100%;height:5px}
.homecta .cta{display:flex;align-items:center;gap:12px;min-height:var(--row);padding:7px 8px;margin:0 -8px;border-radius:12px;color:var(--tx)}
.homecta .cta:hover{background:var(--wash);color:#fff}
.homecta .cta b{display:block;font-size:14px}
.homecta .cta small{display:block;color:var(--faint);font-size:12.5px}
.homecta .cta>span:nth-child(2){flex:1}
.homecta .cta>svg{width:16px;height:16px;color:var(--faint);transition:transform .25s var(--out)}
.homecta .cta:hover>svg{transform:translateX(3px)}
.chartbox .ch-head .seg{margin:0;flex:none;flex-wrap:nowrap}

/* ---------- private pages (status / jobs) ---------------------------------- */
.privnav{display:flex;gap:4px;margin-left:8px}
.privnav a{display:flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:10px;color:var(--dim);font-weight:550;font-size:14.5px}
.privnav a svg{width:16px;height:16px}
.privnav a:hover{color:#fff;background:var(--wash)}
.privnav a.on{color:#fff;background:rgba(75,141,255,.12);box-shadow:inset 0 0 0 1px rgba(75,141,255,.3)}
.privtag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);
  padding:3px 9px;border-radius:999px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25)}
.privtag svg{width:12px;height:12px}
@media(max-width:700px){.privnav a span{display:none}.privnav a{padding:0 11px}.hwrap .privtag{display:none}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.card{padding:15px 17px;transition:border-color .25s}
.card:hover{border-color:var(--edge2)}
.card b{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:22px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card>span{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.card small{color:var(--dim);font-size:12px}
.card small.d-up,.card small.d-down{font-size:11.5px;padding:1px 7px}
.ok{color:var(--up)}.bad{color:var(--down);font-weight:650}.run{color:#7fabff}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}
.bar{height:7px;border-radius:5px;background:var(--panel3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;transition:width .6s var(--out)}

/* jobs page */
.runner-hero{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:22px 24px;border-radius:20px;
  border:1px solid var(--edge2);background:var(--panel);overflow:hidden;margin-bottom:18px}
.runner-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.9;transition:background .6s;
  background:radial-gradient(60% 120% at 0% 0%,rgba(52,211,153,.12),transparent 60%)}
.runner-hero.paused::before{background:radial-gradient(60% 120% at 0% 0%,rgba(251,191,36,.11),transparent 60%)}
.runner-hero.offline::before{background:radial-gradient(60% 120% at 0% 0%,rgba(248,113,113,.12),transparent 60%)}
.runner-orb{position:relative;width:60px;height:60px;border-radius:19px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 14px 34px -12px rgba(16,185,129,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.runner-orb svg{width:27px;height:27px}
.runner-orb::after{content:'';position:absolute;inset:-6px;border-radius:23px;border:2px solid rgba(52,211,153,.5);animation:orbPulse 2.4s var(--out) infinite}
.runner-hero.paused .runner-orb{background:linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow:0 14px 34px -12px rgba(245,158,11,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.runner-hero.paused .runner-orb::after{border-color:rgba(251,191,36,.5);animation-duration:3.4s}
.runner-hero.offline .runner-orb{background:linear-gradient(135deg,#ef4444,#f87171);box-shadow:0 14px 34px -12px rgba(239,68,68,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.runner-hero.offline .runner-orb::after{display:none}
@keyframes orbPulse{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.18);opacity:0}}
.runner-state{position:relative;min-width:0}
.runner-state h2{margin:0;font-size:21px}
.runner-state .meta{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--dim);font-size:13.5px;margin-top:6px}
.runner-state .meta b{color:var(--tx2);font-weight:550}
.runner-acts{position:relative;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:860px){.runner-hero{grid-template-columns:auto 1fr}.runner-acts{grid-column:1/-1;justify-content:flex-start}}
.jobgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
@media(max-width:400px){.jobgrid{grid-template-columns:1fr}}
.job{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--r);border:1px solid var(--edge);
  background:var(--panel);transition:border-color .35s,box-shadow .35s,transform .3s var(--out)}
.job:hover{border-color:var(--edge2)}
.job.running{border-color:rgba(75,141,255,.4);box-shadow:0 0 0 1px rgba(75,141,255,.1),0 18px 40px -22px rgba(75,141,255,.5)}
.job.failed{border-color:rgba(248,113,113,.3)}
.job.flash{animation:jobFlash .9s var(--out)}
@keyframes jobFlash{0%{box-shadow:0 0 0 0 rgba(139,92,246,.7)}100%{box-shadow:0 0 0 14px rgba(139,92,246,0)}}
.job-top{display:flex;align-items:center;gap:12px}
.job-ic{position:relative;width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--wash);border:1px solid var(--edge);color:var(--lav);
  transition:background .4s,color .4s,border-color .4s}
.job-ic svg{width:19px;height:19px}
.job.running .job-ic{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 10px 24px -10px rgba(139,92,246,.9)}
.job.running .job-ic::after{content:'';position:absolute;inset:-4px;border-radius:15px;border:2px solid transparent;
  border-top-color:rgba(122,168,255,.9);border-right-color:rgba(167,139,250,.6);animation:spin 1.4s linear infinite}
.job-name{min-width:0;flex:1}
.job-name b{display:block;font-size:16px;color:#fff;font-weight:700;letter-spacing:-.01em}
.job-name code{font-size:12px;color:var(--faint)}
.jstate{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;flex:none;
  border:1px solid var(--edge2);color:var(--dim);background:var(--wash);transition:all .3s}
.jstate.running{color:#a9c6ff;border-color:rgba(75,141,255,.4);background:rgba(75,141,255,.1)}
.jstate.paused{color:#fcd34d;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.jstate.failed{color:#fca5a5;border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}
.jstate.ok{color:#6ee7b7;border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.07)}
.job-about{color:var(--dim);font-size:13.5px;line-height:1.5;margin:-2px 0 0}
.job-rows{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.job-rows dt{color:var(--faint);font-weight:550}
.job-rows dd{margin:0;color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-rows dd.wrap{white-space:normal}
.job-rows dd .okk{color:var(--up);font-weight:650}.job-rows dd .badd{color:var(--down);font-weight:650}
.jprog{height:6px;border-radius:5px;background:var(--panel3);overflow:hidden;position:relative}
.jprog i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--grad);transition:width 1s linear}
.jprog.over i{width:100%!important;background:linear-gradient(90deg,rgba(75,141,255,.25),rgba(139,92,246,.9),rgba(75,141,255,.25));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.job-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:4px}
.job-acts .toggle{margin:0 0 0 auto;font-size:13px}
.logbox{display:none;margin:0;padding:12px 14px;max-height:300px;overflow:auto;border-radius:12px;background:#04060b;border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;line-height:1.55;color:#b9c4dd;white-space:pre-wrap;word-break:break-word}
.job.showlog .logbox{display:block;animation:fadeUp .3s var(--out)}
.logbox .le{color:#fca5a5}.logbox .lw{color:#fcd34d}.logbox .lh{color:#7fabff}
.cmdlist{display:flex;flex-direction:column}
.cmdlist div{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.cmdlist div:last-child{border-bottom:0}
.cmdlist .cw{color:var(--faint);margin-left:auto;font-size:12.5px;white-space:nowrap}
.cmdlist svg{width:15px;height:15px;flex:none}

/* ---------- login ---------------------------------------------------------- */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.login-card{position:relative;width:100%;max-width:380px;background:var(--panel);border:1px solid var(--edge2);border-radius:20px;
  padding:30px 26px 24px;box-shadow:var(--shadow-lg);animation:popIn .45s var(--spring) both}
.login-card .logo{font-size:21px;margin-bottom:18px}
.login-card .sub{color:var(--dim);font-size:14px;margin-bottom:20px}
.login-card .input{width:100%;font-size:16px}
.login-card .btn{width:100%;margin-top:14px;height:44px;font-size:15px}
.login-card .err{display:flex;align-items:center;gap:8px;color:var(--down);font-size:14px;margin-top:12px;animation:shake .35s}
.login-card .err svg{width:16px;height:16px}
.login-card .lnote{color:var(--faint);font-size:12.5px;margin-top:18px;text-align:center}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* ---------- DevEx ---------------------------------------------------------- */
.dx-amount{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dx-amount .input{font-size:24px;font-weight:700;width:260px;letter-spacing:-.01em;padding:12px 16px}
.dx-presets{display:flex;gap:6px;flex-wrap:wrap}
.dx-mix{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:700px){.dx-mix{grid-template-columns:1fr}}
.dx-mix label{display:flex;justify-content:space-between;font-weight:650;margin-bottom:8px;font-size:14.5px}
.dx-bar{display:flex;height:10px;border-radius:8px;overflow:hidden;background:var(--panel3);margin-top:16px}
.dx-bar i{height:100%;transition:width .45s var(--out)}
.dx-out{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.dx-out{grid-template-columns:1fr 1fr}}
.dx-out .stat b{font-size:23px}
.dx-out .total{background:var(--grad-soft),var(--panel);border-color:rgba(139,92,246,.3)}
.dx-out .total b{font-size:27px}
.rate{background:transparent;border:0;border-bottom:1px dashed var(--line2);color:var(--tx);width:62px;font:inherit;font-size:12.5px;text-align:center;padding:1px 0}
.rate:focus{outline:none;border-bottom-color:var(--acc)}

/* ---------- reduced motion ---------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* grid and flex children may shrink below a long nowrap name */
.podium>*,.cgrid>*,.hubmain>*,.simgrid>*,.gamecards>*,.itemgrid>*,.groupcards>*,.usercards>*,.posgrid>*,.reccards>*,.gtop>*,.livebox>*{min-width:0}
@media(max-width:620px){.hero{align-items:flex-start}}

/* ---------- watch button (owner) -------------------------------------------- */
.watchbtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--edge2);
  background:var(--wash);color:var(--tx2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.watchbtn svg{width:16px;height:16px;transition:transform .35s var(--spring),fill .2s}
.watchbtn:hover{background:var(--wash2);color:#fff;border-color:var(--line-hi)}
.watchbtn.on{color:#fcd34d;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.watchbtn.on svg{fill:currentColor}
.watchbtn:active svg{transform:scale(.85)}
.watchbtn.busy{opacity:.6;pointer-events:none}
.watchbtn.icon{width:34px;height:34px;padding:0;justify-content:center;border-radius:10px;background:none;border-color:transparent;color:var(--faint)}
.watchbtn.icon span{display:none}
.watchbtn.icon:hover{background:var(--wash);color:var(--tx2)}
.watchbtn.icon.on{color:#fcd34d;background:none;border-color:transparent}

/* ---------- Scout ------------------------------------------------------------- */
.scout-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.scout-filters .seg{margin:0}
.scout-filters .select{padding:6px 10px;font-size:13px;border-radius:11px;height:36px}
.scoutlist{display:flex;flex-direction:column}
.srow{position:relative;display:grid;grid-template-columns:30px 48px minmax(0,1fr) 100px 58px 80px 112px 34px;align-items:center;gap:13px;
  padding:11px 8px;margin:0 -8px;border-bottom:1px solid var(--line);border-radius:12px;transition:background .2s}
.srow:last-child{border-bottom:0}
.srow:hover{background:var(--wash)}
.srow>a.sr-hit{position:absolute;inset:0;border-radius:12px;z-index:0}
.srow>*:not(.sr-hit){position:relative;z-index:1;pointer-events:none}
.srow .watchbtn{pointer-events:auto}
.sr-rank{color:var(--faint);font-weight:650;font-variant-numeric:tabular-nums;text-align:center;font-size:14px}
.sr-icon{width:48px;height:48px;border-radius:12px;background:var(--panel2);object-fit:cover}
.sr-main{min-width:0;line-height:1.35}
.sr-name{display:flex;align-items:center;min-width:0;font-weight:650;font-size:15px;color:#fff}
.sr-name>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-sub{display:block;color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sr-why{display:flex;gap:6px;height:18px;margin-top:5px;overflow:hidden;white-space:nowrap;
  mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.why{flex:none;display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;
  color:var(--tx2);background:var(--wash2)}
.why.good{color:#86efac;background:rgba(52,211,153,.09)}
.why.warn{color:#fcd34d;background:rgba(251,191,36,.09)}
.why.own{color:#c4b5fd;background:rgba(139,92,246,.11)}
.why.none{color:var(--faint);background:none;padding:0;font-weight:500}
.sr-spark .spark{width:100px;height:34px;display:block}
.sr-val{text-align:right;line-height:1.25;font-variant-numeric:tabular-nums}
.sr-val b{display:block;font-size:15.5px;font-weight:700;color:#fff}
.sr-val small{display:block;color:var(--dim);font-size:12px;white-space:nowrap}
.sr-deal b{color:#fcd34d}
.srow.head{padding-top:0;padding-bottom:8px;font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.srow.head:hover{background:none}
.srow.head .sr-sc{text-align:center}
.srow.head .sr-spark{font-size:11.5px}
.sring{position:relative;width:52px;height:52px;display:grid;place-items:center}
.sring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sring circle{fill:none;stroke-width:4}
.sring .bg{stroke:var(--panel3)}
.sring .fg{stroke-linecap:round}
.sring b{font-size:17px;font-weight:750;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sring.hi .fg{stroke:var(--up)}.sring.mid .fg{stroke:var(--acc)}.sring.lo .fg{stroke:var(--warn)}.sring.min .fg{stroke:var(--faint)}
.sring.big{width:92px;height:92px}.sring.big b{font-size:30px}.sring.big circle{stroke-width:5}
@media(max-width:900px){.srow{grid-template-columns:24px 40px minmax(0,1fr) 52px 34px;gap:10px}.sr-spark,.sr-val,.srow.head{display:none}.sr-icon{width:40px;height:40px}}
.score-key{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;font-size:13px;color:var(--dim);line-height:1.45}
.score-key b{display:block;color:var(--tx);font-size:13.5px}
.record{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 8px}
.record div{padding:10px 12px;border-radius:12px;background:var(--wash);border:1px solid var(--edge)}
.record b{display:block;font-size:22px;font-weight:750;color:#fff;letter-spacing:-.02em}
.record span{display:block;font-size:12px;color:var(--dim);line-height:1.35}
.record .pick b{color:var(--up)}

/* the Scout card on a game page (owner) */
.scoutcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.scoutcard .sc-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sc-bar span{display:flex;justify-content:space-between;font-size:12.5px;color:var(--dim);margin-bottom:6px}
.sc-bar span b{color:#fff;font-weight:700}
.sc-bar i{display:block;height:6px;border-radius:4px;background:var(--panel3);overflow:hidden}
.sc-bar i em{display:block;height:100%;border-radius:4px;background:var(--grad)}
.scoutcard .sr-why{flex-wrap:wrap;height:auto;white-space:normal;mask-image:none;-webkit-mask-image:none;margin-top:14px}
@media(max-width:760px){.scoutcard{grid-template-columns:1fr}.scoutcard .sc-bars{grid-template-columns:1fr 1fr}}

/* ---------- History (game page) ------------------------------------------------ */
.tline{display:flex;flex-direction:column}
.tl-day{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:16px 0 4px}
.tl-day:first-child{margin-top:0}
.tl-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:var(--row);padding:6px 0;border-bottom:1px solid var(--line)}
.tl-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--wash);border:1px solid var(--edge);color:var(--dim)}
.tl-ic svg{width:16px;height:16px}
.tl-row.update .tl-ic{color:#c4b5fd;background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.22)}
.tl-row.milestone .tl-ic,.tl-row.chart .tl-ic{color:#fcd34d;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2)}
.tl-main{min-width:0;line-height:1.35}
.tl-main>b{display:block;color:#fff;font-weight:650;font-size:14px}
.tl-text{display:block;color:var(--tx2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-text b{color:var(--tx);font-weight:600}
.tl-side{text-align:right;font-size:12.5px;color:var(--dim);white-space:nowrap;line-height:1.35}
.tl-side b{display:block;font-size:13.5px}
.hist-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media(max-width:760px){.hist-sum{grid-template-columns:1fr 1fr}}

/* ---------- Watchlist ------------------------------------------------------------ */
.wrow{display:grid;grid-template-columns:48px minmax(0,1fr) 150px 120px 34px;gap:14px;align-items:center;padding:12px 8px;margin:0 -8px;
  border-bottom:1px solid var(--line);border-radius:12px;transition:background .2s}
.wrow:hover{background:var(--wash)}
.wrow:last-child{border-bottom:0}
.wrow>a{display:block;line-height:0}
.wrow .sr-icon{display:block;width:48px;height:48px}
.w-main{min-width:0;line-height:1.35}
.w-main a.w-name{display:block;font-weight:650;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-note{display:block;width:calc(100% + 6px);margin:6px 0 0 -6px;background:transparent;border:1px dashed transparent;border-radius:8px;padding:3px 6px;
  color:var(--tx2);font:inherit;font-size:13px;resize:none;min-height:26px;line-height:1.45;transition:border-color .2s,background .2s}
.w-note::placeholder{color:var(--faint)}
.w-note:hover{border-color:var(--edge2)}
.w-note:focus{outline:none;border-color:var(--acc);background:var(--panel2)}
.w-status{width:100%;padding:7px 10px;font-size:13px;border-radius:10px}
.w-status.s-contacted{border-color:rgba(75,141,255,.4)}.w-status.s-talking{border-color:rgba(139,92,246,.45)}
.w-status.s-bought{border-color:rgba(52,211,153,.45);color:#86efac}.w-status.s-passed{color:var(--faint)}
.w-since{text-align:right;line-height:1.3;font-variant-numeric:tabular-nums}
.w-since b{display:block;font-size:15px;font-weight:700;color:#fff}
.w-since small{display:block;font-size:12px;color:var(--dim);white-space:nowrap}
@media(max-width:900px){.wrow{grid-template-columns:40px minmax(0,1fr) 34px}.wrow .w-st,.wrow .w-since{grid-column:2}.wrow .sr-icon{width:40px;height:40px}}
@media(max-width:620px){.sr-name .statustag{display:none}.scout-filters .seg{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}.scout-filters .seg::-webkit-scrollbar{display:none}}

/* ---------- Deal estimate (game page, owner) ------------------------------------ */
.deal-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.deal-tiles>div{padding:12px 14px;border-radius:12px;background:var(--wash);border:1px solid var(--edge);min-width:0}
.deal-tiles span{display:block;font-size:12.5px;color:var(--dim)}
.deal-tiles b{display:block;font-size:24px;font-weight:750;color:#fff;letter-spacing:-.02em;line-height:1.25}
.deal-tiles b small{font-size:13px;font-weight:600;color:var(--dim);letter-spacing:0}
.deal-tiles em{display:block;font-style:normal;font-size:12px;color:var(--dim);line-height:1.4;margin-top:2px}
.deal-tiles .offers{border-color:rgba(251,191,36,.25);background:rgba(251,191,36,.05)}
.deal-tiles .offers b{color:#fcd34d}
.deal-basis{margin:12px 0 0;font-size:13px;color:var(--dim);line-height:1.5}
.dealcard .sr-why{flex-wrap:wrap;height:auto;white-space:normal;mask-image:none;-webkit-mask-image:none;margin-top:10px}
.deal-calc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.deal-calc label{font-weight:650;color:var(--tx2)}
.deal-calc .input{width:190px;padding:7px 11px;font-size:14px;border-radius:10px}
.deal-calc .deal-out{flex:1 1 280px;min-width:0}
.deal-calc .deal-out b{color:#fff}
.w-deal{color:#fcd34d!important}
@media(max-width:760px){.deal-tiles{grid-template-columns:1fr}}
.deal-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.deal-tiles{grid-template-columns:1fr 1fr}}
.deal-scen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.deal-scen>div{padding:9px 12px;border-radius:11px;border:1px dashed var(--edge2);min-width:0}
.deal-scen>div.on{border-style:solid;border-color:var(--line-hi);background:var(--wash)}
.deal-scen span{display:block;font-size:12px;color:var(--dim)}
.deal-scen b{display:block;font-size:14.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-scen em{display:block;font-style:normal;font-size:12px;color:var(--faint)}
.deal-life{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.deal-life .dl-h{font-size:12.5px;font-weight:650;color:var(--tx2);margin-right:4px}
@media(max-width:760px){.deal-tiles,.deal-scen{grid-template-columns:1fr}}
/* the offer calculator (Deal tab) */
.deal-calc{display:block}
.deal-calc .dc-h{font-size:14px;font-weight:700;color:#fff;margin-bottom:8px}
.deal-calc .dc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:8px}
.deal-calc .dc-row>label{width:72px;font-weight:650;color:var(--tx2)}
.deal-calc .input.sm{width:72px}
.deal-calc .seg{margin:0}
.deal-calc .deal-out{display:block;margin-top:6px;font-size:13.5px;color:var(--tx2);line-height:1.55}
.deal-calc .dc-offer{display:block;margin-top:4px;color:var(--dim)}
.deal-calc .dc-offer b{color:#fcd34d}

/* ---------- Deal tab, simplified (2026-10-22) ---------------------------------- */
.dealcard .dk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:2px 0 18px}
.dealcard .dk>div{min-width:0}
.dealcard .dk span{display:block;font-size:12.5px;color:var(--dim)}
.dealcard .dk b{display:block;font-size:26px;font-weight:750;color:#fff;letter-spacing:-.02em;line-height:1.2}
.dealcard .dk b small{font-size:14px;font-weight:600;color:var(--dim);letter-spacing:0}
.dealcard .dk em{display:block;font-style:normal;font-size:12.5px;color:var(--faint)}
.deal-calc{padding:16px;border-radius:14px;background:var(--wash);border:1px solid var(--edge);margin:0;border-top:1px solid var(--edge)}
.deal-calc .dc-ctl{display:flex;flex-wrap:wrap;gap:14px 26px}
.deal-calc .dc-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.deal-calc .dc-f label{font-size:12.5px;font-weight:650;color:var(--dim);width:auto}
.deal-calc .dc-f:first-child{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.deal-calc .dc-f:first-child label{width:100%}
.deal-calc .input{width:220px;padding:6px 10px;font-size:13.5px;border-radius:10px;height:34px}
.deal-calc .input.sm{width:64px}
.dc-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.dc-ladder>div{padding:10px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--edge)}
.dc-ladder span{display:block;font-size:12.5px;color:var(--dim)}
.dc-ladder b{display:block;font-size:24px;font-weight:750;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dc-ladder .aim{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.06)}
.dc-ladder .aim b{color:#fcd34d}
.deal-calc .dc-note{margin-top:10px;font-size:13px;color:var(--dim);line-height:1.5}
.deal-calc .dc-note b{color:var(--tx)}
.deal-more{margin-top:14px}
.deal-more summary{cursor:pointer;font-size:13.5px;font-weight:650;color:var(--dim);list-style:none;display:inline-flex;align-items:center;gap:6px}
.deal-more summary::-webkit-details-marker{display:none}
.deal-more summary::before{content:'›';display:inline-block;transition:transform .2s var(--out);font-size:16px}
.deal-more[open] summary::before{transform:rotate(90deg)}
.deal-more summary:hover{color:#fff}
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px;font-size:13.5px;color:var(--tx2);line-height:1.5}
.dm-grid h4{margin:0 0 8px;font-size:13.5px}
.dm-grid p{margin:8px 0 0}
.dm-list{list-style:none;margin:0;padding:0}
.dm-list li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);color:var(--dim)}
.dm-list li b{color:var(--tx2);font-weight:600}
.dm-list li.on b,.dm-list li.on span{color:#fff}
.dm-why{list-style:none;margin:10px 0 0;padding:0}
.dm-why li{padding:2px 0}
.dm-why li.up{color:#86efac}.dm-why li.down{color:#fcd34d}
@media(max-width:760px){.dealcard .dk,.dc-ladder,.dm-grid{grid-template-columns:1fr}.deal-calc .input{width:100%}}
.dc-save{display:flex;gap:8px;align-items:center}
.dc-save .btn{height:34px;white-space:nowrap}