/* AnkerGames Trending Page Styles */

.lb-root{
  --lb-bg:#f5f8fc; --lb-panel:#ffffff; --lb-line:rgba(12,22,38,.10); --lb-line2:rgba(12,22,38,.17);
  --lb-text:#0e1622; --lb-muted:#586576; --lb-muted2:#8996a8;
  --lb-heat:#e0701f; --lb-heat2:#c15f16; --lb-gold:#bd8f2a; --lb-up:#1c9c55;
  --pc:var(--primary-color); --ink:#03121b;
  position:relative;isolation:isolate;color:var(--lb-text);
}
.dark .lb-root{
  --lb-bg:#070a0f; --lb-panel:#0d1220; --lb-line:rgba(255,255,255,.07); --lb-line2:rgba(255,255,255,.12);
  --lb-text:#e9eef6; --lb-muted:#93a0b3; --lb-muted2:#5f6d82;
  --lb-heat:#ff8a3d; --lb-heat2:#ffb673; --lb-gold:#f5c451; --lb-up:#43d489;
}
.dark .lb-root::before{content:"";position:absolute;inset:0 0 auto;height:900px;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 82% -6%,color-mix(in srgb,var(--pc) 20%,transparent),transparent 46%),
  radial-gradient(70% 50% at 3% 2%,color-mix(in srgb,var(--lb-heat) 7%,transparent),transparent 42%)}
.lb-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dark .lb-grain{opacity:.05}

.lb-display{font-family:'MOONTANK','Inter',sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:400}
.lb-tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* section label */
/* The site container runs to 2048px on a 2K screen, which leaves a chart row with
   a 1200px void between its title and its numbers. Cap the reading width. */
.lb-root .container{max-width:1680px}

.lb-seo{margin-top:52px;border:1px solid var(--lb-line);border-radius:18px;padding:32px;background:color-mix(in srgb,var(--lb-panel) 55%,transparent)}
.lb-seo > h2{font-family:'MOONTANK',sans-serif;text-transform:uppercase;font-size:25px;margin:0 0 12px;color:var(--lb-text)}
.lb-seo > p{color:var(--lb-muted);max-width:78ch;font-size:14.5px;margin:0 0 14px}
.lb-seo .faq-block{margin-top:40px;padding-top:32px;border-top:1px solid var(--lb-line)}
@media(max-width:640px){.lb-seo{padding:22px}}

.lb-slab{display:flex;align-items:baseline;gap:14px;margin:40px 0 18px}
.lb-slab h2{font-size:15px;letter-spacing:.13em;margin:0;color:var(--lb-text)}
.lb-slab .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--lb-line2),transparent)}
.lb-slab .note{font-size:11.5px;color:var(--lb-muted2);letter-spacing:.04em}

/* controls */
/* Sticky bar needs an opaque-enough backdrop or page text reads through it. */
.lb-controls{position:sticky;top:0;z-index:30;margin-top:28px;padding:13px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--lb-bg) 88%,transparent);
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.lb-chips{display:flex;gap:8px;flex-wrap:wrap}
.lb-chip{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--lb-line2);color:var(--lb-muted);background:transparent;cursor:pointer;transition:all .16s;white-space:nowrap}
.lb-chip:hover{color:var(--lb-text);border-color:var(--lb-muted2)}
.lb-chip.on{background:var(--pc);border-color:var(--pc);color:var(--ink)}
.lb-rgroup{display:flex;align-items:center;gap:14px}
.lb-sortwrap{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--lb-muted2)}
.lb-seg{display:inline-flex;border:1px solid var(--lb-line2);border-radius:10px;overflow:hidden}
.lb-seg button{padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--lb-muted);background:transparent;border:0;cursor:pointer;transition:all .16s}
.lb-seg button.on{background:color-mix(in srgb,var(--lb-text) 8%,transparent);color:var(--lb-text)}
.lb-seg button.on.acc{background:var(--pc);color:var(--ink)}
.lb-seg button svg{width:15px;height:15px;vertical-align:-3px}

/* tier band */
.lb-tier{display:flex;align-items:center;gap:12px}
.lb-tier .dm{font-family:'MOONTANK',sans-serif;font-size:13px;letter-spacing:.06em;color:var(--lb-text)}
.lb-tier .th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lb-muted2)}
.lb-tier .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--lb-line),transparent)}
.lb-tier .di{width:9px;height:9px;transform:rotate(45deg);border-radius:2px}

/* chart + rows — single flat container so JS can show/hide/reorder cleanly */
.lb-board{display:flex;flex-direction:column}
.lb-chart{display:flex;flex-direction:column;border:1px solid var(--lb-line);border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--lb-panel) 55%,transparent)}
.lb-chart .lb-tier{padding:16px 16px 8px;background:color-mix(in srgb,var(--lb-text) 2.5%,transparent)}
.lb-chart .lb-tier + .lb-row{border-top:0}
.lb-hide{display:none!important}
.lb-row{display:grid;grid-template-columns:56px 128px 1fr 190px 128px 80px 50px;align-items:center;gap:15px;
  padding:11px 16px 11px 6px;border-top:1px solid var(--lb-line);position:relative;transition:background .2s;color:inherit}
.lb-row:first-child{border-top:0}
.lb-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc);transform:scaleY(0);transform-origin:bottom;transition:transform .22s}
.lb-row:hover{background:color-mix(in srgb,var(--lb-text) 3%,transparent)}
.lb-row:hover::before{transform:scaleY(1)}
.lb-rank-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.lb-rank{font-family:'MOONTANK',sans-serif;font-size:25px;text-align:center;color:var(--lb-muted2);transition:color .2s;line-height:1}
.lb-row:hover .lb-rank{color:var(--pc)}
/* Real movement vs the last weekly snapshot — never shown without a snapshot. */
.lb-move{font-size:9.5px;font-weight:750;letter-spacing:.02em;line-height:1;padding:2px 4px;border-radius:5px;white-space:nowrap}
.lb-move.up{color:var(--lb-up);background:color-mix(in srgb,var(--lb-up) 14%,transparent)}
.lb-move.down{color:#e5484d;background:color-mix(in srgb,#e5484d 13%,transparent)}
.lb-move.new{color:var(--pc);background:color-mix(in srgb,var(--pc) 15%,transparent);font-size:8.5px;letter-spacing:.06em}
.lb-move.same{color:var(--lb-muted2);background:transparent;font-size:12px;padding:0}
.lb-thumb{width:128px;aspect-ratio:16/9;border-radius:11px;overflow:hidden;position:relative;border:1px solid var(--lb-line);
  box-shadow:0 6px 18px -12px rgba(0,0,0,.7);transition:transform .3s,box-shadow .3s;isolation:isolate;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 20%,var(--lb-panel)),var(--lb-panel))}
.lb-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lb-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 45%,rgba(6,9,14,.45))}
.lb-row:hover .lb-thumb{transform:scale(1.035);box-shadow:0 10px 24px -12px rgba(0,0,0,.85)}
.lb-main .ct{display:block;font-weight:680;font-size:15px;letter-spacing:-.01em;line-height:1.18;color:var(--lb-text);text-decoration:none;transition:color .16s}
.lb-main .ct:hover{color:var(--pc)}
.lb-main .cg{font-size:11px;color:var(--lb-muted2);letter-spacing:.03em;margin-top:3px;text-transform:uppercase}
.lb-bars .bar{height:7px;border-radius:6px;background:color-mix(in srgb,var(--lb-text) 8%,transparent);overflow:hidden}
.lb-bars .bar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 50%,#2b5f9e),var(--pc));transform-origin:left;animation:lbgrow 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes lbgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lb-bars .num,.lb-week .num{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:6px}
.lb-bars .num b{font-weight:750;letter-spacing:-.01em;color:var(--lb-text)}
.lb-lab{font-size:9.5px;color:var(--lb-muted2);letter-spacing:.1em;text-transform:uppercase}
.lb-week .wbar{height:7px;border-radius:6px;background:color-mix(in srgb,var(--lb-text) 8%,transparent);overflow:hidden}
.lb-week .wbar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--lb-heat) 55%,#7a3d1a),var(--lb-heat2));transform-origin:left;animation:lbgrow 1.2s cubic-bezier(.2,.8,.2,1) both}
.lb-week .num b{color:var(--lb-heat);font-weight:750}
/* Weekly mode (Trending): the amber "this week" bar leads, all-time recedes. */
.lb-bars.weekly .bar span{background:linear-gradient(90deg,color-mix(in srgb,var(--lb-heat) 55%,#7a3d1a),var(--lb-heat2))}
.lb-week .wbar.alt span{background:color-mix(in srgb,var(--lb-text) 22%,transparent)}
.lb-week .num b.alt{color:var(--lb-muted)}
.lb-csz{text-align:right;font-size:12.5px;color:var(--lb-muted)}
.lb-csz .y{color:var(--lb-muted2);font-size:11px;margin-top:2px}
.lb-get{display:flex;justify-content:flex-end}
.lb-get .g{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;border:1px solid var(--lb-line2);color:var(--lb-muted);transition:all .18s}
.lb-get .g svg{width:16px;height:16px}
.lb-row:hover .lb-get .g{border-color:var(--pc);color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,transparent)}
.lb-chip-hot{display:inline-flex;align-items:center;gap:4px;font-size:11px}

/* ---- weekly chart row (Trending) — shared by x-ui.chart-row mode="weekly" ---- */
/* the signature: a rank transition, set as type */
.tw-tr{display:inline-flex;align-items:baseline;gap:9px;font-family:'MOONTANK','Inter',sans-serif;line-height:1}
/* Last week's position, struck through. The rule is sized in em so it stays in
   proportion as the numerals scale with the size of the move, and it is drawn at
   full strength: at 1.5px and half opacity it read as a hairline smudge rather
   than as a number that has been crossed out. */
.tw-tr .from{font-size:.62em;color:var(--lb-muted2);position:relative}
.tw-tr .from::after{content:'';position:absolute;left:-.09em;right:-.09em;top:50%;
  height:max(2px,.1em);transform:translateY(-50%);border-radius:1px;background:currentColor;opacity:.95}
.tw-tr .arw{font-size:.5em;color:var(--lb-muted2)}
.tw-tr .to{font-size:1em;color:var(--lb-text)}
.tw-tr.climbing .to{color:var(--lb-up)}
.tw-tr.slipping .to{color:var(--tw-down)}
.tw-tr.added .to{color:var(--pc)}
.tw-tr.rediscovered .to{color:var(--tw-redis)}
.tw-head .tw-tr{font-size:60px}
.tw-gain{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tw-gain.climbing,.tw-gain.up{color:var(--lb-up)}
.tw-gain.slipping{color:var(--tw-down)}
.tw-gain.added{color:var(--pc)}
.tw-gain.rediscovered{color:var(--tw-redis)}
/* the board */
.tw-board{display:flex;flex-direction:column;border:1px solid var(--lb-line);border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--lb-panel) 55%,transparent);margin-top:20px}
.tw-band{display:flex;align-items:center;gap:12px;padding:22px 16px 9px;background:color-mix(in srgb,var(--lb-text) 2.5%,transparent)}
.tw-band .di{width:9px;height:9px;transform:rotate(45deg);border-radius:2px}
.tw-band .dm{font-family:'MOONTANK','Inter',sans-serif;font-size:14px;letter-spacing:.06em}
.tw-band .th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lb-muted2)}
.tw-band .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--lb-line),transparent)}
.tw-row{display:grid;grid-template-columns:158px 132px minmax(0,1fr) 190px 92px 116px;gap:16px;align-items:center;padding:13px 16px;border-top:1px solid var(--lb-line);text-decoration:none;color:inherit;transition:background .16s}
.tw-band + .tw-row{border-top:0}
.tw-row:hover{background:color-mix(in srgb,var(--pc) 7%,transparent)}
.tw-row .tw-tr{font-size:calc(24px + var(--mag,0) * 22px)}
.tw-row .po{position:relative;display:block;width:132px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--lb-line)}
.tw-row .po img{width:100%;height:100%;object-fit:cover;display:block}
.tw-row h3{margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.tw-row .gn{font-size:11.5px;color:var(--lb-muted2);margin-top:3px}
.tw-meta{display:flex;gap:18px;justify-content:flex-end;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lb-muted2);white-space:nowrap}
.tw-meta b{display:block;font-size:13px;letter-spacing:0;text-transform:none;color:var(--lb-text);font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums}
.tw-gainw{text-align:right}
.tw-qty{text-align:right}
.tw-qty .n{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.tw-qty .bar{height:3px;border-radius:2px;background:var(--lb-line);margin-top:6px;overflow:hidden}
.tw-qty .bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--pc) 45%,transparent),var(--pc))}
/* Steam corroborates this one */
.tw-steamy{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 34%,transparent);background:color-mix(in srgb,var(--pc) 10%,transparent);border-radius:6px;padding:3px 7px;margin-left:9px;vertical-align:middle}

/* the unchanged half of the board, folded away by default */
.tw-fold{display:none}
.tw-board.tw-open .tw-fold{display:grid}
.tw-fold-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lb-muted2);background:transparent;border:1px solid var(--lb-line2);border-radius:999px;padding:5px 11px;
  cursor:pointer;transition:.16s}
.tw-fold-btn:hover{color:var(--lb-text);border-color:var(--lb-muted2)}
.tw-fold-btn svg{width:13px;height:13px;transition:transform .2s}
.tw-fold-btn .hide{display:none}
.tw-board.tw-open .tw-fold-btn .show{display:none}
.tw-board.tw-open .tw-fold-btn .hide{display:inline}
.tw-board.tw-open .tw-fold-btn svg{transform:rotate(180deg)}

@media(max-width:768px){
.tw-row{grid-template-columns:104px 92px minmax(0,1fr);gap:12px}
.tw-row .po{width:92px}
.tw-row .tw-meta,.tw-row .tw-qty,.tw-row .tw-gainw{display:none}
.tw-row .tw-tr{font-size:22px}
}

/* grid view (art-forward ranked posters) */
.lb-grid{display:none;grid-template-columns:repeat(2,1fr);gap:24px}
@media(min-width:640px){.lb-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.lb-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.lb-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1280px){.lb-grid{grid-template-columns:repeat(6,1fr)}}
/* Matches the sitewide grid's 8-column step. The chart lists 24 games, which fills
   whole rows at 8 (and at 6, 4, 2) — 7 would leave a ragged final row. */
@media(min-width:1536px){.lb-grid{grid-template-columns:repeat(8,1fr);gap:20px}}
/* Sitewide poster card + chart rank badge. */
.lb-ranked{position:relative}
.lb-ranked-no{position:absolute;z-index:20;top:-6px;left:-4px;font-size:30px;line-height:1;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 22px color-mix(in srgb,var(--pc) 55%,transparent);pointer-events:none}
.lb-grid.on{display:grid}
.lb-board.hide{display:none}
.lb-card{position:relative;border-radius:14px;overflow:hidden;isolation:isolate;aspect-ratio:3/4;border:1px solid var(--lb-line);display:flex;align-items:flex-end;transition:transform .25s,box-shadow .25s;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 20%,var(--lb-panel)),var(--lb-panel))}
.lb-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.lb-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(0,0,0,.8)}
.lb-card:hover img{transform:scale(1.07)}
.lb-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,9,14,.94),rgba(6,9,14,.1) 55%,rgba(6,9,14,.4));z-index:-1}
.lb-card .gr{position:absolute;left:10px;top:2px;font-family:'MOONTANK',sans-serif;font-size:34px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.lb-card .gin{position:relative;padding:13px;width:100%}
.lb-card .gt{font-weight:720;font-size:14px;line-height:1.14;letter-spacing:-.01em;color:#fff}
.lb-card .gm{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px}
.lb-card .gm .d{font-weight:750;color:#fff}
.lb-card .gm .h{color:var(--lb-heat2);font-weight:700;font-size:11px}
.lb-card .gm .u{color:#7fe3ad;font-weight:700;font-size:11px}
.lb-empty{display:none;padding:48px;text-align:center;color:var(--lb-muted2);font-size:14px;border:1px dashed var(--lb-line2);border-radius:16px}

/* FAQ accordion now lives in the universal ui.faq component. */

.lb-rise{opacity:0;transform:translateY(16px);animation:lbrise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lbrise{to{opacity:1;transform:none}}

@media (max-width:980px){
  .lb-grid{grid-template-columns:repeat(3,1fr)}
  .lb-row{grid-template-columns:40px 104px 1fr 150px 84px;gap:14px}
  .lb-thumb{width:104px}
  .lb-csz,.lb-get{display:none}
}
@media (max-width:560px){
  .lb-grid{grid-template-columns:repeat(2,1fr)}
  .lb-row{grid-template-columns:30px 82px 1fr 96px;gap:11px}
  .lb-thumb{width:82px}
  .lb-week{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lb-root *{animation-duration:.001ms!important;transition:none!important}
}


        /* ---- Trending chrome (.tw-*) ---- */
        :root{--tw-redis:#7c5cff;--tw-down:#c8322f}
        .dark{--tw-redis:#a78bfa;--tw-down:#ff6b68}

        .tw-mast{padding:52px 0 24px;display:grid;grid-template-columns:1fr 380px;gap:38px;align-items:end}
        .tw-kick{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--lb-muted)}
        .tw-kick b{color:var(--pc);font-weight:600}
        .tw-dot{width:7px;height:7px;border-radius:50%;background:var(--pc)}
        .tw-mast h1{margin:16px 0 0;font-size:clamp(42px,5.6vw,74px);line-height:.92}
        .tw-lede{margin:16px 0 0;max-width:56ch;color:var(--lb-muted);font-size:15px;line-height:1.65}
        .tw-lede b{color:var(--lb-text);font-weight:600}
        .tw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lb-line);border:1px solid var(--lb-line);border-radius:14px;overflow:hidden}
        .tw-stat{background:var(--lb-panel);padding:16px 15px}
        .tw-stat .v{font-family:'MOONTANK','Inter',sans-serif;font-size:27px;line-height:1.1}
        .tw-stat .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--lb-muted2);margin-top:5px}
        .tw-stat.up .v{color:var(--lb-up)}
        .tw-stat.new .v{color:var(--pc)}

        /* headline (the mover) + throne (the constant) */
        .tw-duo{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;margin-top:14px}
        .tw-head{position:relative;border:1px solid var(--lb-line);border-radius:20px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:290px;isolation:isolate;background:var(--lb-panel);
            text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
        .tw-head:hover{border-color:color-mix(in srgb,var(--pc) 45%,transparent);box-shadow:0 18px 44px -28px rgba(0,0,0,.9)}
        .tw-head:focus-visible{outline:2px solid var(--pc);outline-offset:3px}
        .tw-head .art img{transition:transform .5s cubic-bezier(.4,0,.2,1)}
        .tw-head:hover .art img{transform:translateY(-4px) scale(1.03)}
        .tw-cta{display:inline-flex;align-items:center;gap:7px;margin-left:4px;font-size:12.5px;font-weight:700;
            letter-spacing:.03em;color:var(--pc);white-space:nowrap}
        .tw-cta svg{width:15px;height:15px;transition:transform .2s}
        .tw-head:hover .tw-cta svg{transform:translateX(3px)}
        .tw-head .bg{position:absolute;inset:0;z-index:0}
        .tw-head .bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.15);filter:blur(3px) saturate(1.15)}
        .tw-head .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(96deg,var(--lb-panel) 26%,color-mix(in srgb,var(--lb-panel) 78%,transparent) 52%,transparent)}
        .tw-head .body{position:relative;z-index:1;padding:32px 36px;display:flex;flex-direction:column;justify-content:center}
        .tw-tag{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--pc);font-weight:600}
        .tw-tag::before{content:'';width:30px;height:1px;background:var(--pc)}
        .tw-head h2{margin:12px 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.04;letter-spacing:-.025em;font-weight:800}
        .tw-head .say{margin:14px 0 0;color:var(--lb-muted);font-size:14.5px;line-height:1.6;max-width:46ch}
        .tw-head .say b{color:var(--lb-text)}
        .tw-head .jump{margin-top:20px;display:flex;align-items:center;gap:16px}
        .tw-head .art{position:relative;z-index:1;display:grid;place-items:center;padding:24px}
        .tw-head .art img{width:100%;max-width:176px;aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.45)}

        .tw-throne{position:relative;border:1px solid var(--lb-line);border-radius:20px;overflow:hidden;background:var(--lb-panel);isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;text-decoration:none;color:inherit}
        .tw-throne .bg{position:absolute;inset:0;z-index:0}
        .tw-throne .bg img{width:100%;height:100%;object-fit:cover}
        .tw-throne .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--lb-panel) 14%,color-mix(in srgb,var(--lb-panel) 62%,transparent) 58%,transparent)}
        .tw-throne .in{position:relative;z-index:1}
        .tw-throne .crown{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lb-gold);font-weight:600}
        .tw-throne h3{margin:9px 0 0;font-size:21px;font-weight:750;letter-spacing:-.02em}
        .tw-throne .st{margin-top:9px;font-size:12.5px;color:var(--lb-muted)}
        .tw-throne .st b{color:var(--lb-text)}
        .tw-throne .hold{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--lb-gold);border:1px solid color-mix(in srgb,var(--lb-gold) 32%,transparent);background:color-mix(in srgb,var(--lb-gold) 8%,transparent);border-radius:8px;padding:7px 11px}

        
        /* how to read this page, said before the page */
        .tw-how{margin-top:34px;padding:20px 22px;border:1px solid var(--lb-line);border-radius:16px;
            background:color-mix(in srgb,var(--lb-panel) 55%,transparent)}
        .tw-how-p{margin:0;color:var(--lb-muted);font-size:14.5px;line-height:1.6;max-width:82ch}
        .tw-how-p b{color:var(--lb-text);font-weight:650}
        .tw-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;padding-top:15px;border-top:1px solid var(--lb-line)}
        .tw-key-i{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--lb-muted2)}
        .tw-key-i .tw-tr{font-size:20px}
        .tw-key-i b{color:var(--lb-text);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

        /* the board is a table, so it gets a table's headings */
        .tw-thead{display:grid;grid-template-columns:158px 132px minmax(0,1fr) 190px 92px 116px;gap:16px;
            padding:0 17px 10px;margin-top:20px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
            color:var(--lb-muted2)}
        .tw-thead .r{text-align:right}
        .tw-board{margin-top:0}
        /* The rows collapse to three columns on mobile, so the six-column header
           would both mislead and overflow the viewport. The key above stays. */
        @media(max-width:768px){
            .tw-thead{display:none}
            .tw-key{gap:10px 16px}
        }

        /* controls */
        .tw-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:32px}
        .tw-ctrl .sp{flex:1}
        .tw-cd{font-size:11.5px;color:var(--lb-muted2);letter-spacing:.04em}
        .tw-sep{width:1px;height:22px;background:var(--lb-line2);margin:0 4px}
        .tw-genre .tw-gc-n{opacity:.55;font-size:11px;margin-left:3px}
        .tw-empty{margin:28px 0 0;padding:26px;text-align:center;color:var(--lb-muted);font-size:14px;
            border:1px dashed var(--lb-line2);border-radius:14px}
        .tw-cd b{color:var(--lb-text)}

        
        
        /* the week's casualties */
        .tw-gone{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
        .tw-gc{display:flex;gap:14px;align-items:center;padding:14px;border:1px dashed var(--lb-line2);border-radius:14px;text-decoration:none;color:inherit;transition:.16s;background:color-mix(in srgb,var(--lb-panel) 40%,transparent)}
        .tw-gc:hover{border-style:solid;border-color:var(--tw-down)}
        .tw-gc img{width:52px;aspect-ratio:2/3;object-fit:cover;border-radius:5px;filter:grayscale(1) brightness(.78)}
        .tw-gc:hover img{filter:none}
        .tw-gc h3{margin:0;font-size:14px;font-weight:650}
        .tw-gc .fell{margin-top:6px;font-size:13px;color:var(--lb-muted2);font-family:'MOONTANK','Inter',sans-serif}
        .tw-gc .fell b{color:var(--tw-down)}
        .tw-gc .gn2{font-size:11px;color:var(--lb-muted2);margin-top:4px}

        .tw-sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;align-items:start}
        /* Below 2K only 12 of the 16 are shown, so every row stays full: 3, 4 or 6
           across. A 2K screen shows all 16 as two rows of 8. */
        .tw-sgrid > *:nth-child(n+13){display:none}
        @media(min-width:640px){.tw-sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
        @media(min-width:1024px){.tw-sgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
        @media(min-width:1600px){
            .tw-sgrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:13px}
            .tw-sgrid > *:nth-child(n+13){display:block}
        }

        .tw-hide{display:none !important}

        @media (max-width:1024px){
            .tw-mast{grid-template-columns:1fr}
            .tw-duo{grid-template-columns:1fr}
            .tw-head{grid-template-columns:1fr}
            .tw-head .art{display:none}
            .tw-gone{grid-template-columns:1fr}
        }
        @media (max-width:768px){
            .tw-head .tw-tr{font-size:40px}
        }
    

            /* One smooth motion via grid-template-rows 0fr->1fr — no JS height math,
               no reflow jank, and the panel stays in the DOM for crawlers. */
            .faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
            .faq-panel.is-open{grid-template-rows:1fr}
            .faq-panel > div{overflow:hidden;min-height:0}
            @media (prefers-reduced-motion:reduce){.faq-panel{transition:none!important}}