/* =============================================================================
   team-hub.css — the game-mode build hubs (/arena-teams/, /guild-boss/,
   /cookie-alliance/; the community-team-list hosts adopt it later)
   -----------------------------------------------------------------------------
   Built on design-system.css, which a hub page links first: the tokens, the
   page and shell re-skin, the .th root, the atoms (buttons, tags, switch,
   segmented control, votes, avatars, cookie faces), the season band heads and
   strips, the empty state, Show more and the toasts all live there. This file
   is the hubs' own components only.

   One page design, two densities. A Compact / Comfy switch changes only the
   build list and the team rendering:
     COMPACT  list rows; an opened build = team bar + spec rows
     COMFY    art cards; an opened build = plate grid + team plate
   The markup is written by assets/js/team-hub-view.js (pure string renderers;
   its header documents every class and data attribute this file reads).

   SCOPE. Everything lives under the root class `.th` (the hub root, or any
   future host of a team rendering) and `.th-page` (on <body>, page-level
   rules only). Every class is `th-` prefixed and every rule leads with `.th`,
   so a page-level element rule (feature-page.css's `h1, h2, h3`) cannot reach
   in.

   ONE MARKUP, RESPONSIVE. No separate phone markup: container queries on three
   roots decide the treatment, so a team rendering placed in a narrow column
   (a future guide TEAM block) gets the phone treatment by its OWN width.
     th       the hub root           header, toolbar, bands, rows, cards
     th-ob    an opened build        its header
     th-team  one team rendering     spec rows / plates / loadout
   Container queries measure the container's CONTENT box. Containment also
   makes each root a stacking context and a containing block: `.th-ob` is
   given z-index 4 so a treasure popover hanging out of it paints over the
   cards after it.

   THEMES. Dark is the default and is INK: a neutral near-black page on which
   the mode, gold, element and rarity colours do all the colouring; all text is
   neutral. Light is the site's light palette. Every colour a component paints
   is a `--th-*` token (design-system.css), so the light theme here is only the
   literal overrides of these components (section L3), each leading with
   :root[data-theme="light"] and NEVER changing a border width (CLAUDE.md,
   light theme).

   SECTIONS (0-4, 7, 16, L1 and L2 are in design-system.css)
      5  Hub header: what the hubs draw INSIDE the framed header's panels
         (season progress, featured cookies, rotation, last season's core);
         the frame itself is design-system.css section 5 since 2026-10-26
      6  Toolbar: cookie filter (chips + type-ahead), switches, count, sort, view
     6b  The boss bar (a mode with destinations inside it)
      8  COMPACT list rows
      9  COMFY card grid
     10  Opened build shell: head, actions, Share menu, credit, notes,
         multi-team groups, the FOCUS that steps the page back around it
     11  Team atoms: recipe, beascuit, gems, ranks, alternates, crown, treasures
     12  COMPACT team: team bar + spec rows (desktop / mid / phone)
     13  COMFY team: plates (desktop / mid) + strips (phone) + team plate
     14  Loadout (leader + treasures) in both densities
     15  Treasure detail popover
     17  The live page: controller states, the pinned shared build, the baked
         link list
     L3  Light theme: literal overrides of the components above
   ========================================================================== */

/* ---------- 5 · hub header: the panels' contents ---------- */
/* The frame, copy, emblem and panel shell moved to design-system.css
   (section 5) when the tier lists became their second user. */
.th .th-hub-panel--core.is-empty .th-face--hole { opacity: 0.55; }
.th .th-progress { margin-top: 12px; height: 7px; border-radius: 99px; background: var(--th-track); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); overflow: hidden; }
.th .th-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--th-m2), var(--th-m1)); box-shadow: 0 0 10px rgba(var(--th-m-rgb), 0.8); }
.th .th-progress-legend { margin-top: 6px; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--th-ink-3); }
.th .th-feat { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.th .th-feat-slots, .th .th-feat-faces { display: flex; gap: 5px; }
.th .th-feat-coming-soon { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 42px; flex-shrink: 0; color: var(--th-ink-3); font-size: 10px; line-height: 1.1; text-align: center; }
.th .th-feat-coming-soon img { border: 1px dashed var(--th-gold-line); border-radius: 8px; background: var(--th-wash); }
.th .th-feat-slots i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1.5px dashed var(--th-gold-line); background: var(--th-wash); font-style: normal; font-size: 13px; font-weight: 700; color: var(--th-ink-3); }
.th .th-feat-tx { display: flex; flex-direction: column; line-height: 1.2; font-size: 12.5px; color: var(--th-ink-3); }
.th .th-feat-tx b { font-size: 13px; color: var(--th-ink-2); font-weight: 600; }
/* the season record's extras (Alliance's waves, Guild Boss's weekly bosses) */
.th .th-xrow { margin-top: 12px; }
.th .th-xk { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-ink-3); }
.th .th-waves-list { display: flex; flex-direction: column; gap: 5px; }
.th .th-wave { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.th .th-wave-n { flex: none; min-width: 52px; font-size: 12px; font-weight: 700; color: var(--th-ink-3); }
.th .th-wave-fx { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--th-m-ink); overflow-wrap: anywhere; }
.th a.th-wave-fx:hover { text-decoration: underline; }
.th .th-wave-faces { display: flex; gap: 3px; flex: none; }
.th .th-rot-wk { padding: 0 7px; height: 19px; display: inline-flex; align-items: center; border-radius: 6px; letter-spacing: 0.04em; color: var(--th-m-ink); border: 1px solid rgba(var(--th-m-rgb), 0.45); background: rgba(var(--th-m-rgb), 0.12); }
/* the pair stacks: two boss names side by side do not fit a 318px panel */
.th .th-rot-pair { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.th .th-rot-plus { display: none; }
.th .th-boss { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 2px 12px 2px 2px; border-radius: 999px; border: 1px solid transparent; background: var(--th-btn-bg); font-size: 13px; font-weight: 700; color: var(--th-ink); text-align: left; }
.th button.th-boss:hover { background: var(--th-btn-hover); }
.th .th-boss-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
.th .th-boss-mono { display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: #fff; background: linear-gradient(160deg, rgba(var(--th-m-rgb), 0.85), rgba(var(--th-m-rgb), 0.4)); }
.th .th-rot-all { margin-top: 7px; }
.th .th-rot-all summary { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; font-size: 12.5px; font-weight: 600; color: var(--th-link); cursor: pointer; list-style: none; }
.th .th-rot-all summary::-webkit-details-marker { display: none; }
.th .th-rot-all summary svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.th .th-rot-all[open] summary svg { transform: rotate(180deg); }
.th .th-rot-weeks { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.th .th-rot-week { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 6px; border-radius: 7px; font-size: 12.5px; color: var(--th-ink-2); }
.th .th-rot-week.is-current { background: rgba(var(--th-m-rgb), 0.12); color: var(--th-ink); }
.th .th-rot-id { flex: none; min-width: 34px; font-weight: 700; color: var(--th-ink-3); }
.th .th-rot-bosses { flex: 1 1 auto; min-width: 0; }
.th .th-rot-now { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-m-ink); }
/* a mode flag beside a build's destination (Trial Grounds' Trial of Glory):
   the mode's ink as an outline, so it reads as qualifying the tag before it */
.th .th-tag--flag { color: var(--th-m-ink); border-color: rgba(var(--th-m-rgb), 0.7); background: transparent; letter-spacing: 0.02em; }
.th .th-tag--flag.th-tag--onart { background: var(--th-on-art-chip); }
/* Cake Towers: the floor a build is for. Filled in the mode's accent so the
   number reads first, with figures that line up down a list. */
.th .th-tag--floor { color: var(--th-ink); border-color: rgba(var(--th-m-rgb), 0.7); background: rgba(var(--th-m-rgb), 0.24); font-weight: 700; font-variant-numeric: tabular-nums; }
.th .th-tag--floor.th-tag--onart { background: var(--th-on-art-chip); color: var(--th-ink); }
/* a season's team format and rules (Arcade Arena's rounds) */
.th .th-fmt-label { font-size: 14px; font-weight: 700; color: var(--th-heading); }
.th .th-fmt-facts { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.th .th-fmt-fact { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; color: var(--th-ink-2); background: var(--th-btn-bg); }
.th .th-fmt-fact b { font-size: 14px; color: var(--th-m-ink); }
.th .th-rules-list { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; list-style: disc; font-size: 13px; line-height: 1.45; color: var(--th-ink-2); }
.th .th-rules-note { margin-top: 6px; font-size: 12px; line-height: 1.4; font-style: italic; color: var(--th-ink-3); }
/* the Nether Realm's recommended types: each in its own element's colour */
.th .th-els-list { display: flex; flex-wrap: wrap; gap: 6px; }
.th .th-els-item { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 11px 2px 3px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--th-ink); background: rgba(var(--th-el), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--th-el), 0.42); }
.th .th-els-ic { width: 24px; height: 24px; flex: none; }
/* Trial Grounds' Trial of Glory: this week's trial, then the cycle */
.th .th-glory { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; max-width: 100%; padding: 3px 14px 3px 3px; border-radius: 999px; border: 1px solid transparent; background: var(--th-btn-bg); text-align: left; color: var(--th-ink); }
.th button.th-glory:hover { background: var(--th-btn-hover); }
.th .th-glory .th-face { border-radius: 50%; }
.th .th-glory-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.th .th-glory-tx b { font-size: 13.5px; font-weight: 700; }
.th .th-glory-tx span { font-size: 12px; color: var(--th-ink-3); }
.th .th-rot-note { margin-top: 6px; font-size: 12px; color: var(--th-ink-3); }
.th .th-feat + .th-hub-panel-foot, .th .th-core + .th-hub-panel-foot, .th .th-xrow + .th-hub-panel-foot { margin-top: 12px; }
.th .th-core-head { display: flex; flex-direction: column; }
.th .th-core { margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.th .th-core li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.th .th-core-n { font-size: 13px; font-weight: 700; color: var(--th-ink); }
.th .th-core-n span { font-weight: 500; color: var(--th-ink-3); }
.th .th-core-bar { width: 100%; height: 3px; border-radius: 2px; background: var(--th-track); overflow: hidden; }
.th .th-core-bar i { display: block; height: 100%; background: var(--th-gold); }
/* in the panel's flow the link sits under the cookies (order 3); the phone
   puts it on the title line instead */
.th .th-core-link { order: 3; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--th-link); }
.th .th-core-link svg { width: 14px; height: 14px; }
.th .th-hub-panel--core { display: flex; flex-direction: column; }
.th .th-hub-panel--core .th-core-head { display: contents; }
.th .th-hub-panel--core .th-hub-panel-k { order: 1; }
.th .th-hub-panel--core .th-hub-panel-sub { order: 2; margin-top: 6px; }
.th .th-hub-panel--core .th-core { order: 2; }
.th .th-hub-panel--core .th-core-link { margin-top: 10px; }
.th .th-hub-panel--core .th-hub-panel-foot { order: 4; }

@container th (max-width: 1180px) {
  /* no core panel (too few builds last season): the season panel takes the row */
  .th .th-hub-panel--season:last-child { grid-column: 1 / -1; }
}
@container th (max-width: 700px) {
  .th .th-core-link .th-label-long, .th .th-ctx .th-label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .th .th-core-link .th-label-short, .th .th-ctx .th-label-short { display: inline; }
  .th .th-progress-legend { font-size: 13px; }
  .th .th-feat-tx { font-size: 13px; }
  .th .th-feat-tx b { font-size: 13.5px; }
  /* core panel: the title and the filter link share one line */
  .th .th-hub-panel--core .th-core-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; order: 1; }
  .th .th-hub-panel--core .th-core-head .th-hub-panel-k { order: 0; }
  .th .th-hub-panel--core .th-core-link { order: 1; margin-top: 0; min-height: 32px; align-self: center; flex: none; }
  .th .th-core { margin-top: 10px; gap: 6px; }
  .th .th-core-n { font-size: 13.5px; }
}

/* ---------- 6 · toolbar ---------- */
.th .th-toolbar { position: sticky; top: var(--th-sticky-top); z-index: 20; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 9px 10px; border-radius: 16px; background: var(--th-surface-1); border: 1px solid var(--th-line-2); box-shadow: var(--th-shadow-1); }
.th .th-cf { position: relative; display: flex; align-items: center; gap: 7px; flex: 0 1 360px; min-width: 240px; min-height: 38px; padding: 3px 8px 3px 14px; border-radius: 19px; border: 1px solid transparent; background: var(--th-btn-track); color: var(--th-ink-3); }
.th .th-cf:focus-within { border-color: transparent; box-shadow: 0 0 0 3px var(--th-btn-focus); }
.th .th-cf-ic { display: inline-flex; }
.th .th-cf-ic svg { width: 16px; height: 16px; }
.th .th-cf input { flex: 1; min-width: 80px; height: 30px; border: 0; outline: 0; background: none; font-size: 14px; color: var(--th-ink); }
.th .th-cf input::placeholder { color: var(--th-ink-3); }
.th .th-cf input:focus-visible { outline: 0; }
.th .th-fchips { display: flex; flex-wrap: wrap; gap: 5px; }
.th .th-fchips:empty { display: none; }
.th .th-fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 3px; border-radius: 999px; background: rgba(240, 205, 126, 0.12); border: 1px solid var(--th-gold-line); color: var(--th-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.th .th-fchip img { width: 20px; height: 20px; border-radius: 50%; }
.th .th-fchip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--th-gold); }
.th .th-fchip button svg { width: 13px; height: 13px; stroke-width: 2.4; }
.th .th-cf-list { position: absolute; z-index: 40; top: calc(100% + 6px); left: -1px; right: -1px; max-height: 320px; overflow-y: auto; padding: 5px; border-radius: 12px; background: var(--th-surface-1); border: 1px solid var(--th-line-3); box-shadow: var(--th-shadow-pop); }
.th .th-cf-list[hidden] { display: none; }
.th .th-cf-opt { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 4px 8px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--th-ink); cursor: pointer; }
.th .th-cf-opt img { width: 26px; height: 26px; border-radius: 6px; }
.th .th-cf-opt:hover, .th .th-cf-opt.is-active { background: var(--th-surface-3); }
.th .th-tb-switches { display: flex; align-items: center; gap: 6px; }
.th .th-tb-sep { width: 1px; height: 24px; background: var(--th-line-2); flex: none; }
.th .th-tb-count { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--th-ink-3); white-space: nowrap; }
.th .th-tb-count b { color: var(--th-ink); font-weight: 700; }
.th .th-tb-clear { padding: 0; border: 0; background: none; font-size: 13.5px; font-weight: 600; color: var(--th-link); }
.th .th-tb-clear:hover { text-decoration: underline; }

@container th (max-width: 1240px) {
  /* two rows: filter, switches, count / Sort ........ View */
  .th .th-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "cf cf sw count" "sort . . view"; }
  .th .th-cf { grid-area: cf; min-width: 0; }
  .th .th-tb-switches { grid-area: sw; }
  .th .th-tb-count { grid-area: count; margin-left: 0; }
  .th .th-tb-sep { display: none; }
  .th .th-seg-group--sort { grid-area: sort; }
  .th .th-seg-group--view { grid-area: view; justify-self: end; }
}
@container th (max-width: 700px) {
  /* three rows: cookie filter / Sort + View / switches + count. Every pressable
     44 px. NOT sticky: three rows would eat a fifth of a phone screen. */
  .th .th-toolbar { position: relative; top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cf cf" "sort view" "sw count"; align-items: center; gap: 8px; margin-top: 14px; padding: 8px; }
  .th .th-cf { grid-area: cf; min-width: 0; min-height: 46px; padding: 4px 8px 4px 14px; border-radius: 23px; }
  .th .th-cf input { font-size: 15px; height: 36px; }
  .th .th-fchip { height: 32px; padding: 0 2px 0 3px; font-size: 14px; }
  .th .th-fchip img { width: 24px; height: 24px; }
  .th .th-fchip button { width: 30px; height: 30px; }
  .th .th-fchip button svg { width: 14px; height: 14px; }
  .th .th-seg-group--sort { grid-area: sort; margin-left: 0; }
  .th .th-seg-group--view { grid-area: view; justify-self: end; }
  .th .th-seg-group .th-label { display: none; }
  .th .th-seg { padding: 2px; }
  .th .th-seg button { height: 44px; padding: 0 14px; font-size: 14px; }
  .th .th-seg--density button { gap: 6px; padding: 0 11px 0 9px; }
  /* wraps: a mode flag adds a second switch (Trial Grounds' "Trial of Glory
     only"), and the pair is wider than a 320px phone */
  .th .th-tb-switches { grid-area: sw; flex-wrap: wrap; gap: 0 14px; min-width: 0; }
  .th .th-switch { height: 44px; padding: 0 2px; font-size: 14px; gap: 8px; }
  .th .th-tb-count { grid-area: count; margin-left: 0; justify-self: end; flex-direction: column; align-items: flex-end; gap: 0; font-size: 13px; line-height: 1.25; }
  .th .th-tb-clear { min-height: 24px; font-size: 13.5px; }
  .th .th-cf-opt { min-height: 44px; }
  /* two switches (a mode flag's beside Spotlight) are wider than the room
     beside the count, so they take their own row and the count the one below */
  .th .th-toolbar--flag { grid-template-areas: "cf cf" "sort view" "sw sw" "count count"; }
}
@container th (max-width: 340px) {
  /* Top/New and Compact/Comfy no longer fit one row: the view toggle keeps its
     icons, its words stay its accessible name */
  .th .th-seg--density button { position: relative; padding: 0 12px; }
  .th .th-seg--density button span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- 6b · the boss bar (a mode with destinations inside it) ---------- */
.th .th-ctxbar { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.th .th-ctxbar-k { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-gold); }
/* position: the chips' visually-hidden long labels are absolute, so without a
   containing block here they escape the phone's scrolling row and widen the page */
.th .th-ctx-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.th .th-ctx { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 14px 3px 3px; border-radius: 999px; border: 1px solid transparent; background: var(--th-btn-bg); box-shadow: none; font-size: 14px; font-weight: 700; color: var(--th-ink-2); }
.th .th-ctx--all, .th .th-ctx--text { padding-left: 16px; }
.th .th-ctx:hover { background: var(--th-btn-hover); color: var(--th-ink); }
.th .th-ctx.is-on { color: var(--th-heading); border-color: transparent; background: linear-gradient(180deg, rgba(var(--th-m-rgb), 0.36), rgba(var(--th-m-rgb), 0.2)); box-shadow: 0 0 18px -6px rgba(var(--th-m-rgb), 0.6); }
.th .th-ctx.is-legacy:not(.is-on) .th-ctx-ic { filter: grayscale(0.7); opacity: 0.75; }
.th .th-ctx-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.th .th-ctx-name { white-space: nowrap; }
.th .th-ctx-mark { height: 18px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-ink-3); border: 1px dashed var(--th-line-3); }
.th .th-ctx-mark.is-week { color: var(--th-m-ink); border: 1px solid rgba(var(--th-m-rgb), 0.5); background: rgba(var(--th-m-rgb), 0.14); }
.th .th-ctx-n { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--th-ink-2); background: var(--th-surface-3); }
.th .th-ctx.is-on .th-ctx-n { color: var(--th-on-gold); background: var(--th-gold-fill); }
@container th (max-width: 700px) {
  /* one swipeable row under the header: four bosses do not fit a phone, and
     wrapping them would push the list a screen down */
  .th .th-ctxbar { margin-top: 12px; flex-direction: column; align-items: stretch; gap: 6px; }
  .th .th-ctx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px 2px 4px; scroll-snap-type: x proximity; }
  .th .th-ctx-chips::-webkit-scrollbar { display: none; }
  .th .th-ctx { flex: none; scroll-snap-align: start; }
}


/* ---------- 8 · COMPACT list rows ---------- */
/* .th-cols labels the columns once; each run of rows sits in a .th-rows panel.
   An opened build splits the panel: .th-rows + .th-ob + .th-rows. */
.th .th-cols, .th .th-row { display: grid; grid-template-columns: 70px 228px minmax(0, 1fr) 126px 104px 34px; column-gap: 18px; align-items: center; padding: 0 12px 0 18px; }
.th .th-cols { height: 34px; margin-top: 4px; }
.th .th-cols span { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-ink-3); }
.th .th-rows { border-radius: var(--th-radius); background: var(--th-surface-1); border: 1px solid var(--th-line-2); box-shadow: var(--th-shadow-1); }
.th .th-rows + .th-ob, .th .th-ob + .th-rows { margin-top: 12px; }
.th .th-row { position: relative; min-height: 66px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--th-line); cursor: pointer; }
.th .th-row:first-child { border-top: 0; border-radius: var(--th-radius) var(--th-radius) 0 0; }
.th .th-row:last-child { border-radius: 0 0 var(--th-radius) var(--th-radius); }
.th .th-row:only-child { border-radius: var(--th-radius); }
.th .th-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.th .th-row:hover { background: var(--th-surface-2); }
.th .th-row:hover::before { background: var(--th-line-3); }
.th .th-row--spot { background: radial-gradient(560px 90px at 0% 50%, rgba(240, 190, 90, 0.1), rgba(0, 0, 0, 0) 70%); }
.th .th-row--spot::before, .th .th-row--spot:hover::before { background: linear-gradient(180deg, #ffe7a3, #e2a849); box-shadow: 0 0 10px rgba(240, 190, 90, 0.6); }
.th .th-row.is-open { background: var(--th-surface-2); }
.th .th-score { display: flex; flex-direction: column; }
.th .th-score-up { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; color: var(--th-ink); }
.th .th-score-up svg { width: 12px; height: 12px; fill: var(--th-up); stroke: var(--th-up); stroke-width: 1; }
.th .th-score-dn { padding-left: 18px; font-size: 12px; color: var(--th-ink-3); }
.th .th-score.is-zero .th-score-up { color: var(--th-ink-3); }
.th .th-score.is-zero .th-score-up svg { fill: var(--th-ink-3); stroke: var(--th-ink-3); }
.th .th-row-team { display: flex; align-items: center; gap: 5px; }
.th .th-row-team[data-count="6"] .th-face { width: 34px; height: 34px; }
.th .th-row-team[data-count="7"] .th-face { width: 28px; height: 28px; border-radius: 7px; }
.th .th-more-teams { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--th-gold); border: 1px solid transparent; background: var(--th-gold-faint); }
.th .th-row-main { min-width: 0; }
.th .th-row-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.th .th-row-title { min-width: 0; font-size: 16.5px; line-height: 1.25; }
.th .th-row-title button { display: block; max-width: 100%; padding: 0; border: 0; background: none; font: 700 16.5px/1.25 "CookieRun KR", "Outfit", sans-serif; color: var(--th-heading); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--th-text-on-art); }
.th .th-row-tags { display: flex; gap: 6px; flex: none; }
.th .th-row-tags:empty { display: none; }
.th .th-row-sub { margin-top: 3px; display: flex; align-items: center; min-width: 0; font-size: 13px; color: var(--th-ink-3); white-space: nowrap; }
.th .th-row-sub .th-by { flex: none; max-width: 45%; }
.th .th-row-date { display: none; }
.th .th-row-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--th-ink-2); }
.th .th-row-note::before { content: "\00b7"; padding: 0 6px; color: var(--th-ink-faint); }
.th .th-row-note.is-lineup { color: var(--th-ink-3); }
.th .th-row-note q { quotes: "\201C" "\201D"; }
.th .th-trio { display: flex; align-items: center; gap: 4px; }
.th .th-row .th-tr-ic { width: 32px; height: 36px; }
.th .th-tr-hole { display: inline-block; width: 28px; height: 32px; border-radius: 8px; border: 1.5px dashed var(--th-line-3); }
.th .th-posted { font-size: 13.5px; color: var(--th-ink-2); line-height: 1.3; }
.th .th-posted small { display: block; font-size: 12px; color: var(--th-ink-3); }
.th .th-chev { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; color: var(--th-ink-3); }
.th .th-row:hover .th-chev { border-color: var(--th-line-3); background: var(--th-surface-3); color: var(--th-ink); }

@container th (max-width: 1080px) {
  .th .th-cols, .th .th-row { grid-template-columns: 58px 220px minmax(0, 1fr) 118px 34px; column-gap: 14px; }
  .th .th-cols span:nth-child(5), .th .th-posted { display: none; }
  .th .th-row-sub .th-row-date { display: inline; }
  .th .th-row-date::before { content: "\00b7"; padding: 0 6px; color: var(--th-ink-faint); }
  .th .th-row-note { display: none; }
}
@container th (max-width: 860px) {
  /* the row re-laid on a grid:
       score | title, author · date, tags, note excerpt | chevron
       score | five faces                               | treasures
     The whole row is the tap target (the chevron only shows state). */
  .th .th-cols { display: none; }
  .th .th-rows { border-radius: 14px; }
  .th .th-row { grid-template-columns: 36px minmax(0, 1fr) auto 30px; grid-template-areas: "score main main chev" "score team trio trio"; column-gap: 10px; row-gap: 9px; align-items: start; min-height: 0; padding: 12px 10px 12px 13px; }
  .th .th-row .th-score { grid-area: score; padding-top: 1px; }
  .th .th-row-main { grid-area: main; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); grid-template-areas: "title title" "by date" "tags tags" "note note"; align-items: center; }
  .th .th-row-head, .th .th-row-sub { display: contents; }
  .th .th-row-title { grid-area: title; }
  .th .th-row-sub .th-by { grid-area: by; max-width: none; margin-top: 4px; font-size: 13px; color: var(--th-ink-3); }
  .th .th-row-sub .th-row-date { grid-area: date; display: block; margin-top: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--th-ink-3); }
  .th .th-row-tags { grid-area: tags; margin-top: 6px; }
  .th .th-row-tags .th-tag { height: 21px; padding: 0 8px; font-size: 11px; }
  .th .th-row-note { grid-area: note; display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.35; white-space: nowrap; }
  .th .th-row-note::before { content: none; }
  .th .th-row-note.is-lineup { display: none; }
  .th .th-row-team { grid-area: team; align-self: center; }
  .th .th-row .th-face { width: 32px; height: 32px; border-radius: 8px; }
  .th .th-row-team[data-count="6"] .th-face { width: 28px; height: 28px; }
  .th .th-row-team[data-count="7"] .th-face { width: 24px; height: 24px; }
  .th .th-row .th-trio { grid-area: trio; justify-self: end; align-self: center; gap: 2px; }
  .th .th-row .th-tr-ic { width: 27px; height: 30px; }
  .th .th-row .th-chev { grid-area: chev; width: 30px; height: 30px; margin-top: -3px; }
  .th .th-row .th-posted { display: none; }
  .th .th-score-dn { padding-left: 0; font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
  .th .th-row--spot::before { top: 12px; bottom: 12px; }
}

/* ---------- 9 · COMFY card grid ---------- */
/* dense packing: an opened build is written straight after its card and spans
   the row; the cards that follow backfill the row it left. */
.th .th-cards { --th-cols: 3; display: grid; grid-template-columns: repeat(var(--th-cols), minmax(0, 1fr)); grid-auto-flow: row dense; gap: 20px; align-items: start; }
.th .th-card { position: relative; border-radius: 18px; background: linear-gradient(180deg, var(--th-card-1), var(--th-card-2)); border: 1px solid rgba(240, 205, 126, 0.3); box-shadow: inset 0 0 0 3px rgba(var(--th-card-ring-rgb), 0.5), inset 0 0 0 4px rgba(240, 205, 126, 0.1), 0 14px 30px -16px rgba(0, 0, 0, 0.8); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; }
.th .th-card-band { position: relative; height: 86px; border-radius: 17px 17px 0 0; background-image: linear-gradient(180deg, rgba(var(--th-m-rgb), 0.2), rgba(var(--th-card-veil-rgb), 0.25) 45%, rgba(var(--th-card-veil-rgb), 0.97) 100%), var(--th-m-art); background-size: auto, 165% auto; background-position: 0 0, var(--th-bp, 50% 34%); border-bottom: 1px solid rgba(240, 205, 126, 0.18); }
.th .th-ribbon { position: absolute; top: 10px; left: 0; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 14px 0 13px; font-size: 11.5px; font-weight: 800; color: #3a2208; background: linear-gradient(90deg, #ffe7a3, #e2a849); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); }
.th .th-ribbon svg { width: 12px; height: 12px; fill: currentColor; stroke-width: 2; }
/* A Spotlight's credit rides on its ribbon: the creator's face, then the
   Creator seal saying whose face it is, then the label. The byline under the
   title is the member who posted the build. */
.th .th-ribbon--credit { top: 8px; height: 26px; gap: 6px; padding-left: 4px; }
.th .th-ribbon .th-av { width: 20px; height: 20px; font-size: 10.5px; color: #3a2208; background: #fff1cb; border: 1.5px solid #fff6dc; box-shadow: 0 0 0 1px rgba(58, 34, 8, 0.45); }
.th .th-ribbon .th-av-ini { color: #3a2208; }
.th .th-seal--onribbon { height: 16px; padding: 0 5px; border-radius: 5px; font-size: 9.5px; letter-spacing: 0.07em; color: #3a2208; border-color: rgba(58, 34, 8, 0.42); background: rgba(255, 255, 255, 0.32); }
/* the Compact row's Spotlight tag: the creator's face in place of the star */
.th .th-tag--credit { padding-left: 3px; }
.th .th-tag--credit .th-av { width: 16px; height: 16px; font-size: 9px; color: #3a2208; background: #fff1cb; border: 1px solid #fff6dc; box-shadow: 0 0 0 1px rgba(58, 34, 8, 0.4); }
.th .th-tag--credit .th-av-ini { color: #3a2208; }
.th .th-card-marks { position: absolute; top: 9px; right: 10px; display: flex; gap: 6px; }
.th .th-fan { position: absolute; left: 20px; bottom: -26px; z-index: 2; display: flex; }
.th .th-fan-head { position: relative; width: 54px; height: 54px; margin-left: -12px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid #f3d590; background: var(--th-surface-3); box-shadow: 0 0 0 2px var(--th-card-2), 0 6px 10px rgba(0, 0, 0, 0.5); }
.th .th-fan-head:first-child { margin-left: 0; }
.th .th-fan-head > img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.th .th-fan-head.has-art-focus > img { transform-origin: var(--th-fx) var(--th-fy); transform: translate(calc(50% - var(--th-fx)), calc(50% - var(--th-fy))) scale(var(--th-fz)); }
.th .th-fan-head:has(img.is-missing) .th-face-ini { visibility: visible; }
.th .th-fan-head.is-filter-match { border-color: #fff; box-shadow: 0 0 0 2px var(--th-card-2), 0 0 0 4px var(--th-match), 0 6px 10px rgba(0, 0, 0, 0.5); }
.th .th-fan-dark { background: radial-gradient(circle at 50% 42%, rgba(var(--th-el), 1) 0%, rgba(var(--th-el), 0.5) 45%, var(--th-dark-art-fan) 100%); }
.th .th-fan-dark > img { position: absolute; width: 250%; height: auto; max-width: none; left: 50%; top: 50%; transform: translate(calc(-1 * var(--th-hx, 50%)), calc(-1 * var(--th-hy, 30%))); filter: drop-shadow(0 0 1px rgba(236, 228, 255, 0.9)); }
.th .th-fan > :nth-child(1) { transform: translateY(3px) rotate(-7deg); }
.th .th-fan > :nth-child(2) { transform: translateY(-2px) rotate(-3deg); }
.th .th-fan > :nth-child(3) { transform: translateY(-5px); }
.th .th-fan > :nth-child(4) { transform: translateY(-2px) rotate(3deg); }
.th .th-fan > :nth-child(5) { transform: translateY(3px) rotate(7deg); }
.th .th-fan > :nth-child(6) { transform: translateY(5px) rotate(10deg); }
.th .th-fan > :nth-child(7) { transform: translateY(8px) rotate(13deg); }
.th .th-fan[data-count="6"] .th-fan-head, .th .th-fan[data-count="7"] .th-fan-head { width: 46px; height: 46px; margin-left: -14px; }
.th .th-fan[data-count="6"] .th-fan-head:first-child, .th .th-fan[data-count="7"] .th-fan-head:first-child { margin-left: 0; }
.th .th-medal { position: absolute; right: 14px; bottom: -22px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #3a1d05; background: radial-gradient(circle at 35% 28%, #fff6d2 0%, #f6cf78 38%, #cf9137 78%, #a86b20 100%); box-shadow: 0 0 0 2px var(--th-card-2), 0 0 0 3.5px rgba(240, 205, 126, 0.75), 0 8px 14px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(110, 60, 10, 0.35); }
.th .th-medal svg { width: 14px; height: 14px; margin-bottom: -2px; fill: currentColor; stroke-width: 1; }
.th .th-medal b { font-family: "CookieRun KR", sans-serif; font-size: 17px; line-height: 1; }
.th .th-medal.is-zero { color: #44331f; background: radial-gradient(circle at 35% 28%, #f3eadb 0%, #cdbfa5 45%, #9a8b70 100%); }
.th .th-card-body { padding: 33px 16px 14px 18px; }
.th .th-card-h { font-size: 19px; }
.th .th-card-title { display: block; width: 100%; padding: 0; border: 0; background: none; font: 700 19px/1.2 "CookieRun KR", "Outfit", sans-serif; color: var(--th-heading); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--th-text-on-art); }
.th .th-card-row { margin-top: 7px; display: flex; align-items: center; gap: 10px; }
.th .th-card-meta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--th-ink-3); white-space: nowrap; }
.th .th-card-meta .th-dot { padding: 0; }
.th .th-card .th-trio { display: inline-flex; gap: 1px; flex: none; }
.th .th-card .th-tr-ic { width: 32px; height: 36px; filter: var(--th-art-drop); }
.th .th-card--spot { border-color: #f0cf7f; background: radial-gradient(420px 160px at 100% 100%, rgba(240, 190, 90, 0.14), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, var(--th-card-spot-1), var(--th-card-spot-2)); box-shadow: inset 0 0 0 3px var(--th-card-spot-ring), inset 0 0 0 4.5px rgba(240, 207, 127, 0.75), 0 0 0 1px rgba(240, 207, 127, 0.18), 0 0 34px -6px rgba(240, 190, 90, 0.35), 0 14px 30px -16px rgba(0, 0, 0, 0.8); }
.th .th-card--spot .th-card-band { border-bottom-color: rgba(240, 205, 126, 0.5); }
.th .th-card:hover { transform: translateY(-3px); border-color: rgba(240, 205, 126, 0.7); }
.th .th-card:hover .th-card-band { filter: brightness(1.12); }
.th .th-card.is-open, .th .th-card.is-open:hover { transform: none; border-color: rgba(var(--th-m-rgb), 0.9); box-shadow: inset 0 0 0 3px rgba(var(--th-card-ring-rgb), 0.5), inset 0 0 0 4px rgba(var(--th-m-rgb), 0.35), 0 0 0 3px rgba(var(--th-m-rgb), 0.18), 0 0 30px -4px rgba(var(--th-m-rgb), 0.45); }
.th .th-card-state { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--th-m-btn1), var(--th-m-btn2)); border: 1px solid rgba(var(--th-m-rgb), 0.8); }
.th .th-card-state svg { width: 13px; height: 13px; stroke-width: 2.4; }
.th .th-card-hint { display: none; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--th-gold); background: var(--th-on-art-chip); border: 1px solid var(--th-gold-line); }
.th .th-card-hint svg { width: 13px; height: 13px; }
.th .th-card:is(:hover, :focus-within) .th-card-hint { display: inline-flex; }

@container th (max-width: 1060px) {
  .th .th-cards { --th-cols: 2; gap: 16px; }
}
@container th (max-width: 620px) {
  .th .th-cards { --th-cols: 1; gap: 14px; }
  .th .th-card-band { height: 80px; background-size: auto, 230% auto; }
  .th .th-fan { left: 16px; bottom: -24px; }
  .th .th-fan-head { width: 52px; height: 52px; }
  .th .th-medal { right: 12px; bottom: -21px; width: 50px; height: 50px; }
  .th .th-card-body { padding: 30px 14px 13px 16px; }
  .th .th-card-title { font-size: 18.5px; }
  .th .th-card-row { margin-top: 6px; gap: 8px; }
  .th .th-card .th-tr-ic { width: 28px; height: 31px; }
  .th .th-card-meta { gap: 5px; }
  .th .th-ribbon { top: 9px; }
  .th .th-ribbon--credit { top: 8px; }
  .th .th-card:hover { transform: none; }
}

/* ---------- 10 · opened build shell ---------- */
/* Same shell in both densities: .th-ob > .th-ob-head + [credit] + [notes] +
   the team(s). Comfy: in the card grid, spanning every column, with a caret
   pointing at its card (--th-caret-i = the card's index in its run; the
   column is that modulo the grid's --th-cols). Compact: in place of its row. */
.th .th-ob { container: th-ob / inline-size; position: relative; z-index: 4; scroll-margin-top: calc(var(--th-sticky-top) + 70px); border-radius: 20px; background: radial-gradient(900px 240px at 50% 0%, rgba(var(--th-m-rgb), 0.1), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, var(--th-ob-1), var(--th-ob-2)); border: 1px solid var(--th-gold-line); box-shadow: inset 0 0 0 4px rgba(var(--th-abyss-rgb), 0.5), inset 0 0 0 5px var(--th-gold-faint), 0 30px 60px -26px rgba(0, 0, 0, 0.9); }
.th .th-ob:focus { outline: none; }
.th .th-ob:focus-visible { outline: 2px solid var(--th-focus-color); outline-offset: 3px; }
.th .th-cards > .th-ob { grid-column: 1 / -1; margin-top: 6px; }
.th .th-ob--caret::before { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); background: var(--th-ob-1); border-left: 1px solid var(--th-gold-line); border-top: 1px solid var(--th-gold-line); }
@supports (width: calc(mod(5, 3) * 1px)) {
  .th .th-ob--caret::before { left: calc((mod(var(--th-caret-i, 1), var(--th-cols, 3)) + 0.5) / var(--th-cols, 3) * 100%); }
}

/* FOCUS. An opened build is the same kind of thing as the cards around it -
   cookie plates the size of a collapsed card, in a grid of collapsed cards -
   so on its own it reads as one more card in the wall. While a build is open
   the controller puts data-build-open on the hub root and everything the
   reader is NOT looking at steps back: dimmed, desaturated and slightly out of
   focus, a depth of field with the open card and its build as the subject.
   Nothing is hidden or disabled - a dimmed card is still one press from
   opening, and it comes back into focus under the pointer or keyboard, which
   is what says so. The toolbar and the boss bar are controls and stay sharp;
   the hub header is information and steps back with the list.
   data-focus-shift ("in"/"out") is set for one beat when the state CHANGES, so
   only opening and closing animate: switching from one build to another
   re-renders the list into the same state and must not flash. */
.th { --th-focus-dim: 0.4; --th-focus-filter: saturate(0.3) blur(2px); --th-focus-dim-text: 0.5; --th-focus-filter-text: saturate(0.4) blur(0.6px); }
.th[data-build-open] :is(.th-cards > .th-card:not(.is-open), .th-rows, .th-season-empty) { opacity: var(--th-focus-dim); filter: var(--th-focus-filter); transition: opacity 0.18s ease, filter 0.18s ease, transform 0.15s ease, border-color 0.15s ease; }
.th[data-build-open] :is(.th-hub-head, .th-band-head, .th-band-label, .th-more) { opacity: var(--th-focus-dim-text); filter: var(--th-focus-filter-text); transition: opacity 0.18s ease, filter 0.18s ease; }
.th[data-build-open] :is(.th-cards > .th-card:not(.is-open), .th-rows, .th-season-empty, .th-band-head, .th-band-label, .th-more):is(:hover, :focus-within) { opacity: 0.9; filter: none; }
/* the subject: the open build lifts off the page on a ring of its mode colour */
.th[data-build-open] .th-ob { box-shadow: inset 0 0 0 4px rgba(var(--th-abyss-rgb), 0.5), inset 0 0 0 5px var(--th-gold-faint), 0 0 0 1px rgba(var(--th-m-rgb), 0.35), 0 0 46px -8px rgba(var(--th-m-rgb), 0.38), 0 30px 60px -26px rgba(0, 0, 0, 0.9); }
@keyframes th-focus-out { from { opacity: 1; filter: none; } }
@keyframes th-focus-out-text { from { opacity: 1; filter: none; } }
@keyframes th-focus-back { from { opacity: var(--th-focus-dim); filter: var(--th-focus-filter); } }
@keyframes th-focus-back-text { from { opacity: var(--th-focus-dim-text); filter: var(--th-focus-filter-text); } }
.th[data-build-open][data-focus-shift="in"] :is(.th-cards > .th-card:not(.is-open), .th-rows, .th-season-empty) { animation: th-focus-out 0.26s ease both; }
.th[data-build-open][data-focus-shift="in"] :is(.th-hub-head, .th-band-head, .th-band-label, .th-more) { animation: th-focus-out-text 0.26s ease both; }
/* data-focus-was marks the card that was the subject: it never stepped back,
   so it must not fade back in */
.th[data-focus-shift="out"]:not([data-build-open]) :is(.th-cards > .th-card:not([data-focus-was]), .th-rows, .th-season-empty) { animation: th-focus-back 0.22s ease both; }
.th[data-focus-shift="out"]:not([data-build-open]) :is(.th-hub-head, .th-band-head, .th-band-label, .th-more) { animation: th-focus-back-text 0.22s ease both; }
.th .th-ob-head { position: relative; display: flex; align-items: center; gap: 18px; padding: 12px 16px 11px 22px; border-radius: 19px 19px 0 0; border-bottom: 1px solid var(--th-gold-faint); }
.th .th-ob-head-art { position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(90deg, rgb(var(--th-veil-rgb)) 0%, rgba(var(--th-veil-rgb), 0.94) 46%, rgba(var(--th-veil-rgb), 0.6) 68%, rgba(var(--th-veil-rgb), 0.9) 86%), var(--th-m-art); background-size: auto, cover; background-position: 0 0, 50% 28%; opacity: 0.9; pointer-events: none; }
.th .th-ob-head > :not(.th-ob-head-art) { position: relative; }
/* the phone head turns its wrappers into display:contents, so the items
   themselves are lifted over the art (no z-index: the Share menu must stay in
   the opened build's own stacking context, above the team bar) */
.th .th-ob-head :is(.th-ob-title, .th-ob-k, .th-ob-meta, .th-votes, .th-ob-bar, .th-ob-close) { position: relative; }
.th .th-ob-id { min-width: 0; flex: 1 1 auto; }
.th .th-ob-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.th .th-ob-title { min-width: 0; font-size: 26px; line-height: 1.08; text-shadow: var(--th-heading-shadow), 0 0 26px rgba(var(--th-m-rgb), 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .th-ob-title a { color: inherit; }
.th .th-ob-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.th .th-ob-title-ext { display: none; }
.th .th-ob-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.th .th-ob-meta { margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; row-gap: 2px; font-size: 13.5px; color: var(--th-ink-3); }
.th .th-ob-meta .th-by-name { color: var(--th-ink); }
.th .th-ob-meta .th-dot { padding: 0 6px; }
.th .th-mode-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-gold); }
.th .th-ob-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.th .th-ob-bar { display: flex; align-items: center; gap: 8px; }
.th .th-share { position: relative; }
.th .th-menu { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 210px; padding: 5px; border-radius: 12px; background: var(--th-surface-1); border: 1px solid var(--th-line-3); box-shadow: var(--th-shadow-pop); }
.th .th-menu[hidden] { display: none; }
.th .th-menu > :is(button, a) { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 14px; font-weight: 600; color: var(--th-ink); text-align: left; }
.th .th-menu > :is(button, a):hover, .th .th-menu > :is(button, a):focus-visible { background: var(--th-surface-3); }
.th .th-menu svg { width: 16px; height: 16px; color: var(--th-gold); }
/* the Spotlight credit strip */
.th .th-ob-credit { display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 22px; border-bottom: 1px solid var(--th-line-2); background: radial-gradient(420px 90px at 0% 50%, rgba(240, 190, 90, 0.12), rgba(0, 0, 0, 0) 70%); }
.th .th-ob-credit p { display: flex; flex-direction: column; line-height: 1.25; }
.th .th-ob-credit-tx { font-size: 14px; color: var(--th-ink-2); }
.th .th-ob-credit-tx :is(a, b) { color: var(--th-heading); font-weight: 700; }
.th .th-ob-credit-tx a:hover { text-decoration: underline; }
.th .th-ob-video { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 3px 14px 3px 3px; border-radius: 999px; border: 1px solid transparent; background: var(--th-btn-bg); font-size: 13px; font-weight: 600; color: var(--th-ink); transition: background-color 0.15s ease; }
.th .th-ob-video:hover { background: var(--th-btn-hover); }
.th .th-ob-video img { width: 60px; height: 34px; border-radius: 999px; object-fit: cover; }
.th .th-ob-video span { display: inline-flex; align-items: center; gap: 5px; }
.th .th-ob-video svg { width: 14px; height: 14px; fill: currentColor; color: var(--th-m1); }
/* the build's own notes */
.th .th-ob-notes { display: flex; gap: 10px; padding: 9px 16px 10px 22px; border-bottom: 1px solid var(--th-line-2); font-size: 14px; line-height: 1.5; color: var(--th-ink-2); }
.th .th-ob-notes svg { width: 15px; height: 15px; margin-top: 3px; color: var(--th-gold); }
.th .th-ob-notes p { white-space: pre-line; overflow-wrap: anywhere; }
/* a Cookie Alliance build's Beacon of Valor (round 3's guide design): the
   game's own two colours, purple Condition then blue Effect, white text on
   both themes - so neither theme re-points them */
.th .th-ob-beacon { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 22px; border-bottom: 1px solid var(--th-line-2); }
.th .th-ob-beacon-k { flex: none; width: 92px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--th-gold); }
.th .th-bv-pair { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; max-width: 760px; }
.th .th-bv { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 14px 6px 6px; border-radius: 13px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 10px 18px -12px rgba(0, 0, 0, 0.9); }
.th .th-bv-pair.is-single .th-bv { flex: 0 1 auto; }
.th .th-bv--cond { background: linear-gradient(180deg, #9853ec 0%, #6c33cc 100%); }
.th .th-bv--eff { background: linear-gradient(180deg, #2d84ea 0%, #1b58c2 100%); }
.th .th-bv-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.28) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.35); }
.th .th-bv-ic svg { width: 19px; height: 19px; color: #fff; stroke-width: 2; }
.th .th-bv-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.th .th-bv-k { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); }
.th .th-bv-v { margin-top: 2px; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.th .th-bv-arrow { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; color: var(--th-gold); border: 1px solid var(--th-gold-line); background: var(--th-surface-sunk); }
.th .th-bv-arrow svg { width: 15px; height: 15px; stroke-width: 2.4; }
/* a multi-team build: one disclosure per team */
.th .th-tgroup + .th-tgroup { border-top: 1px solid var(--th-line-2); }
.th .th-tgroup-h { font: inherit; text-shadow: none; }
.th .th-tgroup-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 6px 16px 6px 22px; border: 0; background: linear-gradient(90deg, rgba(var(--th-m-rgb), 0.16), rgba(var(--th-m-rgb), 0) 60%); text-align: left; }
.th .th-tgroup-k { font: 700 17px/1.2 "CookieRun KR", "Outfit", sans-serif; color: var(--th-heading); text-shadow: var(--th-heading-shadow); }
.th .th-tgroup-faces { display: flex; gap: 4px; }
.th .th-tgroup-toggle .th-chev { margin-left: auto; border-color: var(--th-line-2); }
.th .th-tgroup-notes { padding: 8px 16px 8px 22px; font-size: 13.5px; color: var(--th-ink-2); white-space: pre-line; border-top: 1px solid var(--th-line); }
.th .th-tgroup-body { border-top: 1px solid var(--th-line); }
.th .th-tgroup:last-child:not(.is-open) .th-tgroup-toggle { border-radius: 0 0 19px 19px; }

.th .th-wide-only { display: inline; }
@container th-ob (max-width: 980px) {
  .th .th-ob-head { flex-wrap: wrap; row-gap: 10px; }
  .th .th-ob-actions { margin-left: 0; width: 100%; }
}
@container th-ob (max-width: 820px) {
  /* the phone head:
       [season tag] [Team only]           [close]
       title ↗                        [▲1 | ▼0]
       by author · date · update
       [ Make it yours ] [Share] [⚑]                 */
  .th .th-ob-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "k k close" "title votes votes" "meta meta meta" "bar bar bar"; align-items: center; gap: 0 8px; padding: 8px 8px 11px 15px; border-radius: 17px 17px 0 0; }
  .th .th-ob-head-art { background-image: linear-gradient(180deg, rgba(var(--th-veil-rgb), 0.74) 0%, rgba(var(--th-veil-rgb), 0.9) 50%, rgb(var(--th-veil-rgb)) 100%), var(--th-m-art); background-size: auto, 260% auto; background-position: 0 0, 62% 22%; }
  .th .th-ob-id, .th .th-ob-title-row, .th .th-ob-actions { display: contents; }
  .th .th-ob-k { grid-area: k; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .th .th-ob-close { grid-area: close; justify-self: end; width: 40px; height: 40px; background: var(--th-sunk-on-art); }
  .th .th-ob-title { grid-area: title; margin-top: 2px; font-size: 25px; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
  .th .th-ob-title a { display: inline; }
  .th .th-ob-title-ext { display: inline-block; width: 17px; height: 17px; margin-left: 7px; color: var(--th-gold); stroke-width: 2.2; vertical-align: 1px; }
  .th .th-votes { grid-area: votes; justify-self: end; align-self: end; height: 44px; margin-top: 4px; }
  .th .th-votes button { padding: 0 10px 0 9px; font-size: 15px; }
  .th .th-ob-meta { grid-area: meta; margin-top: 4px; font-size: 13px; line-height: 1.4; }
  .th .th-ob-meta .th-dot { padding: 0 5px; }
  .th .th-mode-k { display: none; }
  .th .th-mode-k + .th-dot { display: none; }
  .th .th-wide-only { display: none; }
  .th .th-wide-only + .th-dot, .th .th-dot:has(+ .th-wide-only) { display: none; }
  .th .th-ob-bar { grid-area: bar; margin-top: 10px; margin-right: 2px; flex-wrap: wrap; }
  .th .th-ob-bar [data-action="toggle-spotlight"] { order: 1; flex-basis: 100%; }
  .th .th-ob-bar .th-btn { height: 44px; padding: 0 18px; font-size: 15px; }
  .th .th-ob-bar .th-btn--icon { width: 44px; padding: 0; }
  .th .th-ob-bar .th-btn--gold { flex: 1; min-width: 0; }
  .th .th-ob-bar .th-share .th-btn { width: auto; }
  .th .th-ob-credit { padding: 9px 12px 9px 15px; flex-wrap: wrap; }
  .th .th-ob-video { margin-left: 0; }
  .th .th-ob-notes { padding: 9px 12px 10px 15px; font-size: 15px; }
  /* the Beacon stacks: its label over the pair, the pair one above the other */
  .th .th-ob-beacon { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 12px 15px; }
  .th .th-ob-beacon-k { width: auto; }
  .th .th-bv-pair { flex-direction: column; align-items: stretch; gap: 6px; max-width: none; }
  .th .th-bv { flex: none; min-height: 48px; }
  .th .th-bv-arrow { align-self: center; width: 24px; height: 24px; }
  .th .th-bv-arrow svg { transform: rotate(90deg); }
  .th .th-tgroup-toggle { padding: 6px 12px 6px 15px; }
  .th .th-tgroup-k { white-space: nowrap; font-size: 16px; }
  .th .th-tgroup-faces { min-width: 0; overflow: hidden; gap: 3px; }
  .th .th-tgroup-faces .th-face { width: 24px; height: 24px; border-radius: 6px; }
  .th .th-tgroup-notes { padding: 8px 12px 8px 15px; font-size: 14px; }
}

/* ---------- 11 · team atoms ---------- */
/* the leader crown beside a cookie's name */
.th .th-crown { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; vertical-align: -3px; background: radial-gradient(circle at 36% 30%, #fff5cc 0%, #f3c862 52%, #b9782a 100%); box-shadow: 0 0 0 1.5px var(--th-crown-edge), 0 0 10px rgba(240, 190, 90, 0.6); }
.th .th-crown svg { width: 11px; height: 11px; color: #3a2208; fill: #fff0b8; stroke-width: 2; }

/* recipe: topping tiles with ×N badges + the tart tile + the words */
.th .th-recipe { display: flex; align-items: center; min-width: 0; }
.th .th-recipe-tiles { display: flex; align-items: center; flex: none; }
.th .th-tpt { position: relative; flex: none; width: 34px; height: 34px; }
.th .th-tpt img { width: 100%; height: 100%; border-radius: 8px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
.th .th-tpt b { position: absolute; right: -6px; bottom: -5px; min-width: 21px; height: 17px; padding: 0 4px; border-radius: 9px; font: 800 11px/17px "Outfit", sans-serif; text-align: center; color: #3a2208; background: linear-gradient(180deg, #ffeaa9, #e2a849); box-shadow: 0 0 0 1.5px var(--th-plate-2); }
.th .th-tpt + .th-tpt { margin-left: 8px; }
.th .th-tpt--tart img { border-radius: 9px; box-shadow: 0 0 0 1.5px #f3d590, 0 0 8px rgba(240, 205, 126, 0.45); }
.th .th-recipe-plus { margin: 0 3px 0 7px; font-size: 14px; font-weight: 800; color: var(--th-gold); }
.th .th-recipe-tx { margin-left: 10px; display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; line-height: 1.16; font-weight: 600; color: var(--th-ink); }
.th .th-recipe-tx span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .th-recipe-tart, .th .th-recipe-gap { font-weight: 500; color: var(--th-ink-3); }
.th .th-recipe-tart.is-missing { font-style: italic; }
.th .th-recipe--sm .th-tpt { width: 28px; height: 28px; }
.th .th-recipe--sm .th-tpt b { min-width: 19px; height: 15px; font-size: 11px; line-height: 15px; right: -5px; bottom: -4px; box-shadow: 0 0 0 1.5px var(--th-surface-2); }
.th .th-recipe--sm .th-tpt + .th-tpt { margin-left: 7px; }
.th .th-recipe--sm .th-recipe-plus { display: none; }
.th .th-recipe--sm .th-tpt--tart { margin-left: 10px; }
.th .th-recipe--sm .th-recipe-tx { font-size: 13px; }

/* beascuit: icon + short name + tier word (+ grouped effect gems in Compact) */
.th .th-bea { display: flex; align-items: center; gap: 9px; min-width: 0; }
.th .th-bea-ic { width: 36px; height: 36px; flex: none; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, rgba(var(--th-el), 0.32), rgba(var(--th-el), 0) 70%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); }
.th .th-bea-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.th .th-bea-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.th .th-bea-name { font-size: 13.5px; font-weight: 700; color: var(--th-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .th-bea-r { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-gold); white-space: nowrap; }
.th .th-bea-r.is-tainted { color: #c9a6ff; }
.th .th-bea--stacked .th-bea-line { flex-direction: column; align-items: flex-start; gap: 0; }

/* gems: one chip per distinct effect, grouped ("ATK ×3") */
.th .th-gems { display: flex; flex-wrap: wrap; gap: 5px; }
.th .th-gem { --th-g: 200, 200, 210; display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 8px 0 7px; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 1; color: var(--th-ink); white-space: nowrap; background: linear-gradient(180deg, rgba(var(--th-g), 0.2), rgba(var(--th-g), 0.09)); border: 1px solid rgba(var(--th-g), 0.5); }
.th .th-gem::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #fff 0%, rgb(var(--th-g)) 50%, rgba(var(--th-g), 0.65) 100%); box-shadow: 0 0 6px rgba(var(--th-g), 0.85); }
.th .th-gem b { margin-left: -2px; font-weight: 800; color: var(--th-gold); }
.th .th-gems--sm .th-gem { height: 21px; font-size: 11.5px; padding: 0 7px 0 6px; gap: 5px; }
.th .th-gems--sm .th-gem::before { width: 8px; height: 8px; }
.th .th-gem--el { --th-g: var(--th-el); }
.th .th-gem--atk { --th-g: 255, 88, 88; }
.th .th-gem--hp { --th-g: 90, 214, 140; }
.th .th-gem--cd { --th-g: 110, 180, 255; }
.th .th-gem--crit { --th-g: 255, 170, 77; }
.th .th-gem--spd { --th-g: 255, 224, 102; }
.th .th-gem--res { --th-g: 160, 180, 205; }
.th .th-gem--byp { --th-g: 192, 132, 252; }
.th .th-gem--amp { --th-g: 244, 114, 182; }
.th .th-gem--def { --th-g: 150, 170, 190; }
.th .th-gem--critres { --th-g: 255, 196, 140; }
.th .th-gem--debres { --th-g: 140, 220, 210; }

/* ranks: ranked stat targets */
.th .th-ranks { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.th .th-ranks li { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; max-width: 100%; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--th-ink); }
.th .th-rank-target { min-width: 0; overflow-wrap: anywhere; }
.th .th-ranks i { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 800; color: var(--th-gold); background: rgba(240, 205, 126, 0.14); border: 1px solid var(--th-gold-line); }
.th .th-ranks li:first-child i { color: var(--th-on-gold); background: var(--th-gold); border-color: var(--th-gold); }
.th .th-ranks small { font-size: 11.5px; font-weight: 500; color: var(--th-ink-3); margin-left: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* alternates: substitute portraits with short names */
.th .th-alts { display: flex; flex-direction: column; gap: 3px; }
.th .th-alts li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.2; color: var(--th-ink-2); }

/* treasure icon (the hexagon art is ~0.9 aspect) */
.th .th-tr-ic { flex: none; width: 32px; height: 36px; object-fit: contain; filter: var(--th-art-drop); }
.th .th-tr-ic--40 { width: 40px; height: 44px; }
.th .th-tr-ic--42 { width: 42px; height: 47px; }

.th .th-rar { color: var(--th-rc-ink, var(--th-rc, var(--th-ink-2))); font-weight: 700; }
.th .th-ti { display: inline-flex; align-items: center; gap: 4px; }
.th .th-ti img { width: 15px; height: 15px; object-fit: contain; }
.th .th-ti img.th-pos-ic { width: 18px; height: 13px; }

/* ---------- 12 · COMPACT team: team bar + spec rows ---------- */
.th .th-team { container: th-team / inline-size; position: relative; }
.th .th-teambar { position: relative; z-index: 3; display: flex; align-items: center; min-height: 50px; padding: 5px 14px 5px 18px; border-bottom: 1px solid var(--th-line-2); background: var(--th-wash); }
.th .th-teambar-k { display: none; }
.th .th-teambar-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.th .th-spec-head, .th .th-ck { display: grid; grid-template-columns: var(--th-spec-cols); }
.th .th-spec { --th-spec-cols: minmax(0, 340fr) minmax(0, 300fr) minmax(0, 360fr); }
.th .th-spec[data-has-stats="true"] { --th-spec-cols: minmax(0, 318fr) minmax(0, 262fr) minmax(0, 336fr) minmax(0, 300fr); }
.th .th-spec[data-has-alts="true"] { --th-spec-cols: minmax(0, 318fr) minmax(0, 262fr) minmax(0, 336fr) minmax(0, 250fr); }
.th .th-spec[data-has-stats="true"][data-has-alts="true"] { --th-spec-cols: minmax(0, 300fr) minmax(0, 266fr) minmax(0, 328fr) minmax(0, 274fr) minmax(0, 174fr); }
.th .th-spec-head { min-height: 30px; align-items: center; background: var(--th-surface-sunk); border-bottom: 1px solid var(--th-line-2); }
.th .th-spec-head span { padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-ink-3); white-space: nowrap; }
.th .th-spec-head span:first-child { padding-left: 18px; }
.th .th-ck { position: relative; align-items: center; }
.th .th-ck + .th-ck { border-top: 1px solid var(--th-line); }
.th .th-ck::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgba(var(--th-el), 0.85); }
.th .th-ck.is-empty::before { background: var(--th-line-2); }
.th .th-spec-rows > .th-ck:last-child::before { border-bottom-left-radius: 3px; }
.th .th-ck-sum { display: none; }
.th .th-ck-who { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 12px 6px 18px; }
.th .th-ck-tx { min-width: 0; }
.th .th-ck-name { display: block; font: 700 14.5px/1.2 "CookieRun KR", "Outfit", sans-serif; color: var(--th-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .th-ck-name--empty { color: var(--th-ink-3); font-family: "Outfit", sans-serif; font-style: italic; font-weight: 500; }
/* a cookie's name in its own cell is never cut short: the awakened forms
   ("Pure Vanilla Cookie (Compassionate)") wrap to a second line instead of
   ellipsizing, the row having the height to spare */
.th .th-ck-who .th-ck-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.th .th-ck-sub { margin-top: 3px; display: flex; align-items: center; gap: 0; font-size: 12.5px; color: var(--th-ink-2); white-space: nowrap; overflow: hidden; }
.th .th-ck-sub .th-sep { padding: 0 5px; }
.th .th-ck-body { display: contents; }
.th .th-kv { min-width: 0; padding: 6px 12px; }
.th .th-kv-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.th .th-kv-v { min-width: 0; }
.th .th-kv--bea .th-gems { margin-top: 4px; flex-wrap: nowrap; }
.th .th-kv--note { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 10px; padding-top: 0; padding-bottom: 8px; margin-top: -3px; }
.th .th-kv--note .th-kv-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-gold); flex: none; }
.th .th-note-text { font-size: 13px; color: var(--th-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.th .th-ck.is-filter-match .th-ck-who .th-ck-name { color: var(--th-heading); }

/* MID WIDTH: three columns, the optional cells (stat targets, alternates) move
   to a second line under toppings and beascuit, labelled. */
@container th-team (max-width: 1080px) {
  .th .th-spec, .th .th-spec[data-has-stats="true"], .th .th-spec[data-has-alts="true"], .th .th-spec[data-has-stats="true"][data-has-alts="true"] { --th-spec-cols: minmax(0, 330fr) minmax(0, 290fr) minmax(0, 380fr); }
  .th .th-spec-head span:nth-child(n + 4) { display: none; }
  .th .th-kv--st { grid-column: 2; grid-row: 2; }
  .th .th-kv--alt { grid-column: 3; grid-row: 2; }
  .th .th-kv--st, .th .th-kv--alt { display: flex; align-items: center; gap: 10px; padding-top: 0; }
  .th .th-kv--st .th-kv-k, .th .th-kv--alt .th-kv-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-ink-3); flex: none; }
  .th .th-kv--st.is-empty, .th .th-kv--alt.is-empty { display: none; }
  .th .th-kv--note { grid-row: 3; }
  .th .th-alts { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .th .th-ck-who { grid-row: 1 / span 3; align-self: start; padding-top: 9px; }
  .th .th-teambar { flex-wrap: wrap; row-gap: 4px; }
}

/* PHONE: each cookie a one-line summary; ONE expanded (.is-open) as label /
   value rows. Optional rows that are empty are not shown. */
@container th-team (max-width: 760px) {
  .th .th-spec-head { display: none; }
  .th .th-ck, .th .th-ck.is-empty { display: block; }
  .th .th-ck::before { top: 8px; bottom: 8px; border-radius: 0 3px 3px 0; }
  .th .th-ck-who { display: none; }
  .th .th-ck.is-empty .th-ck-who { display: flex; min-height: 54px; padding: 7px 12px 7px 15px; }
  .th .th-ck.is-empty .th-face--44 { width: 40px; height: 40px; }
  .th .th-ck-sum { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; column-gap: 12px; width: 100%; min-height: 54px; padding: 7px 12px 7px 15px; border: 0; background: none; text-align: left; }
  .th .th-ck-sum-tx { display: block; min-width: 0; }
  .th .th-ck-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .th .th-ck-line .th-ck-name { min-width: 0; font-size: 15px; }
  /* the one expanded cookie names itself in full; a collapsed summary keeps
     its one line */
  .th .th-ck.is-open .th-ck-line .th-ck-name { white-space: normal; overflow-wrap: anywhere; }
  .th .th-ck-recipe { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; line-height: 1.2; font-weight: 600; color: var(--th-ink); white-space: nowrap; overflow: hidden; }
  .th .th-ck-recipe img { width: 20px; height: 20px; flex: none; border-radius: 5px; }
  .th .th-ck-recipe .th-sum-tart { margin-left: 2px; box-shadow: 0 0 0 1.5px #f3d590; }
  .th .th-ck-recipe .th-sum-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .th .th-ck-recipe .th-sum-t.is-empty { color: var(--th-ink-3); font-style: italic; font-weight: 500; }
  .th .th-ck-recipe .th-sum-gap { width: 4px; flex: none; }
  .th .th-ck-sub--open { display: none; margin-top: 4px; font-size: 13px; }
  .th .th-ck-chev { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: var(--th-btn-bg); color: var(--th-ink-3); transition: transform 0.15s ease; }
  .th .th-ck-chev svg { width: 16px; height: 16px; }
  .th .th-ck-body { display: none; padding: 0 12px 12px 15px; }
  /* the tapped (open) cookie */
  .th .th-ck.is-open { border-top-color: rgba(var(--th-el), 0.45); background: linear-gradient(180deg, rgba(var(--th-el), 0.16), rgba(var(--th-el), 0.04) 42%, rgba(0, 0, 0, 0) 100%), var(--th-surface-2); box-shadow: inset 0 1px 0 rgba(var(--th-el), 0.35), inset 0 -1px 0 rgba(var(--th-el), 0.3); }
  .th .th-ck.is-open + .th-ck { border-top-color: rgba(var(--th-el), 0.3); }
  .th .th-ck.is-open::before { top: 0; bottom: 0; border-radius: 0; }
  .th .th-ck.is-open .th-ck-sum { grid-template-columns: 44px minmax(0, 1fr) 32px; min-height: 62px; }
  .th .th-ck.is-open .th-ck-sum-face { width: 44px; height: 44px; border-radius: 10px; }
  .th .th-ck.is-open .th-ck-recipe { display: none; }
  .th .th-ck.is-open .th-ck-sub--open { display: flex; }
  .th .th-ck.is-open .th-ck-chev { transform: rotate(180deg); color: var(--th-sel-ink); border-color: transparent; background: var(--th-sel-bg); }
  .th .th-ck.is-open .th-ck-body { display: block; }
  .th .th-kv, .th .th-kv--note, .th .th-kv--st, .th .th-kv--alt { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 6px 0; margin: 0; border-top: 1px dashed var(--th-line-2); }
  .th .th-kv .th-kv-k, .th .th-kv--note .th-kv-k, .th .th-kv--st .th-kv-k, .th .th-kv--alt .th-kv-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-ink-3); }
  .th .th-kv.is-empty { display: none; }
  .th .th-kv--bea .th-bea-ic { width: 38px; height: 38px; }
  .th .th-kv--bea .th-gems { margin-top: 5px; flex-wrap: wrap; }
  .th .th-kv--st .th-ranks { gap: 4px 9px; }
  .th .th-kv--st .th-ranks li { font-size: 13px; }
  .th .th-alts { flex-direction: column; }
  .th .th-alts li { font-size: 13.5px; }
  .th .th-kv--note { display: block; padding-top: 8px; }
  .th .th-kv--note .th-kv-k { display: inline; margin-right: 8px; color: var(--th-gold); }
  .th .th-kv--note .th-note-text { display: inline; font-size: 15px; line-height: 1.42; }
}

/* ---------- 13 · COMFY team: plates + strips + team plate ---------- */
/* .th-board is the plate grid's ground; each cookie is an .th-pi item holding
   its phone strip (hidden on desktop) and its plate. A plate = art stage |
   body, over a foot rail that ALWAYS exists (it carries the beascuit effects;
   stat targets and the note join it). Plates in a row stretch; only the foot
   rail grows, so no plate shows dead space under its build. */
.th .th-board { position: relative; padding: 14px; }
.th .th-plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.th .th-pi { display: flex; min-width: 0; }
.th .th-pi > .th-plate { flex: 1; min-width: 0; }
.th .th-strip { display: none; }
.th .th-plate { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); grid-template-rows: auto 1fr; border-radius: 16px; border: 1px solid var(--th-plate-edge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 32%),
    linear-gradient(118deg, rgba(var(--th-el), 0.32) 0%, rgba(var(--th-el), 0.1) 34%, rgba(var(--th-el), 0) 62%),
    linear-gradient(180deg, var(--th-plate-1), var(--th-plate-2));
  box-shadow: inset 0 0 0 3px rgba(var(--th-plate-ring-rgb), 0.5), inset 0 0 0 4px rgba(var(--th-el), 0.26), 0 12px 24px -12px rgba(0, 0, 0, 0.75); }
.th .th-plate::before, .th .th-plate::after { content: ""; position: absolute; z-index: 4; width: 7px; height: 7px; transform: rotate(45deg); background: var(--th-gold); box-shadow: 0 0 0 1.5px var(--th-plate-gem-edge); }
.th .th-plate::before { top: -4px; right: 26px; }
.th .th-plate::after { bottom: -4px; left: 26px; }
.th .th-plate.is-filter-match { border-color: var(--th-match); }
.th .th-plate-stage { position: relative; grid-row: 1; grid-column: 1; min-height: 118px; border-radius: 15px 0 0 0; clip-path: inset(-34px 0 0 0); border-right: 1px solid rgba(var(--th-el), 0.3);
  background: radial-gradient(78% 55% at 50% 74%, rgba(var(--th-el), 0.55), rgba(var(--th-el), 0) 72%), linear-gradient(180deg, rgba(var(--th-el), 0.12), rgba(var(--th-stage-floor-rgb), 0.42)); }
.th .th-plate-stage::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 5px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); }
/* the art's placement: --th-ax is its centre across the stage, --th-ay moves it
   down (or up, negative) by a share of its own height and --th-as scales it
   about its feet. Set per cookie from HERO_ART_FOCUS, on .th-plate. */
.th .th-plate-art { position: absolute; bottom: 3px; left: var(--th-ax, 50%); height: calc(100% + 18px); width: auto; transform-origin: 50% 100%; transform: translate(-50%, var(--th-ay, 0%)) scale(var(--th-as, 1)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.th .th-plate-art.is-missing { display: none; }
.th .th-plate--leader { border-color: #f3d590; box-shadow: inset 0 0 0 3px rgba(var(--th-plate-ring-rgb), 0.5), inset 0 0 0 4.5px rgba(240, 205, 126, 0.55), 0 0 22px -6px var(--th-gold-glow), 0 12px 24px -12px rgba(0, 0, 0, 0.75); }
.th .th-plate-crown { position: absolute; top: 4px; right: 4px; z-index: 2; }
.th .th-plate-crown img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
/* near-black art (Time Shadow): element glow + rim light so the silhouette reads */
.th .th-plate.is-dark-art .th-plate-stage { background: radial-gradient(70% 60% at 50% 60%, rgba(var(--th-el), 0.95), rgba(var(--th-el), 0.25) 60%, rgba(var(--th-el), 0) 80%), linear-gradient(180deg, rgba(var(--th-el), 0.28), rgba(var(--th-dark-stage-rgb), 0.3)); }
.th .th-plate.is-dark-art .th-plate-art { filter: drop-shadow(0 0 1px rgba(236, 228, 255, 0.95)) drop-shadow(0 0 1px rgba(236, 228, 255, 0.7)) drop-shadow(0 0 10px rgba(var(--th-el), 0.9)) brightness(1.18); }
/* the element badges stand in the stage's BOTTOM-left corner, the cookie's
   first element lowest and any others stacked upward: the top-left is where
   most cookies' faces are. The stack is bounded by the stage, so a cookie with
   more elements than fit (Agar Agar has five) wraps into a second column
   rather than climbing out of the frame. With alternates it sits above that
   chip. */
.th .th-plate-badges { position: absolute; top: 7px; bottom: 7px; left: 7px; display: flex; flex-direction: column-reverse; flex-wrap: wrap; align-content: flex-start; gap: 3px; pointer-events: none; }
.th .th-plate-stage:has(> .th-plate-alt) > .th-plate-badges { bottom: 46px; }
.th .th-plate-badges img { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
/* five elements (Agar Agar, the one cookie with more than three) stay ONE
   column: the stack does not wrap, each icon is capped at a fifth of the
   column's height instead (owner's call on the art board, 2026-10-26). The
   column is a size container so the cap can read that height; it is given
   the icons' width, which size containment would otherwise take to 0. */
.th .th-plate-badges[data-elements="5"] { flex-wrap: nowrap; container-type: size; width: 24px; }
.th .th-plate-badges[data-elements="5"] img { max-width: calc((100cqh - 12px) / 5); max-height: calc((100cqh - 12px) / 5); }
.th .th-plate-alt { position: absolute; left: 6px; bottom: 6px; z-index: 2; display: inline-flex; align-items: center; padding: 2px 3px 2px 7px; border-radius: 999px; background: var(--th-on-art-chip); border: 1px solid var(--th-gold-line); }
.th .th-plate-alt > span { margin-right: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--th-gold); }
.th .th-plate-alt img { width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; border: 1.5px solid var(--th-parch); }
.th .th-plate-alt span + img { margin-left: 0; }
.th .th-plate-alt em { margin: 0 4px 0 3px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--th-ink-2); }
.th .th-plate-body { grid-row: 1; grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 12px 10px 0; }
.th .th-plate-name { margin-right: -1px; padding: 6px 12px 5px; border-radius: 0 14px 0 0; font-size: 15.5px; line-height: 1.12; text-shadow: var(--th-text-on-art); background: linear-gradient(90deg, rgba(var(--th-el), var(--th-el-band)), rgba(var(--th-el), 0.12) 70%, rgba(var(--th-el), 0)); border-bottom: 1px solid rgba(240, 205, 126, 0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .th-plate-sub, .th .th-plate-body > .th-recipe, .th .th-plate-body > .th-bea, .th .th-plate-body > .th-nil { margin-left: 12px; }
.th .th-plate-sub { margin-top: -2px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--th-ink-2); white-space: nowrap; overflow: hidden; }
.th .th-rar-banner { height: 15px; width: auto; flex: none; }
.th .th-plate-sub .th-ti img { width: 16px; height: 16px; }
.th .th-plate-sub .th-ti img.th-pos-ic { width: 18px; height: 13px; }
.th .th-plate-foot { grid-row: 2; grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 36px; padding: 6px 12px 7px; border-top: 1px solid rgba(240, 205, 126, 0.2); border-radius: 0 0 15px 15px; background: var(--th-sunk-on-art); }
.th .th-pf-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.th .th-pf-main .th-gems { flex-wrap: wrap; }
.th .th-pf-main .th-ranks { margin-left: auto; gap: 4px 8px; justify-content: flex-end; }
.th .th-pf-main .th-ranks li { font-size: 12px; }
.th .th-pf-k { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-gold); }
.th .th-pf-alts { display: none; flex-wrap: wrap; row-gap: 6px; }
.th .th-pf-alt { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 3px; border-radius: 999px; background: var(--th-on-art-chip); border: 1px solid var(--th-gold-line); font-size: 13px; font-weight: 600; color: var(--th-ink); white-space: nowrap; }
.th .th-pf-alt img { width: 23px; height: 23px; border-radius: 50%; border: 1.5px solid var(--th-parch); }
.th .th-pf-note { display: flex; align-items: flex-start; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--th-ink-2); }
.th .th-pf-note svg { width: 14px; height: 14px; margin-top: 2px; color: var(--th-gold); }
.th .th-pf-note p { min-width: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; }
.th .th-pf-note.is-open p { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.th .th-pf-more { flex: none; align-self: flex-end; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 700; color: var(--th-link); }
.th .th-plate-x { display: none; }
.th .th-plate--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; border-style: dashed; border-color: var(--th-line-3); background: var(--th-wash); box-shadow: none; color: var(--th-ink-3); font-size: 13.5px; font-style: italic; }
.th .th-plate--empty::before, .th .th-plate--empty::after { display: none; }
.th .th-plate-hole { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--th-line-3); }

/* the team plate: the team's shared loadout, in the MODE's tint */
.th .th-plate--team { display: flex; flex-direction: column; background: radial-gradient(360px 200px at 100% 0%, rgba(var(--th-m-rgb), 0.28), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, var(--th-team-plate-1), var(--th-team-plate-2)); box-shadow: inset 0 0 0 3px rgba(var(--th-plate-ring-rgb), 0.5), inset 0 0 0 4px rgba(var(--th-m-rgb), 0.3), 0 12px 24px -12px rgba(0, 0, 0, 0.75); }
.th .th-team-hd { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px 4px 14px; border-bottom: 1px solid rgba(240, 205, 126, 0.32); border-radius: 15px 15px 0 0; background: linear-gradient(90deg, rgba(var(--th-m-rgb), 0.38), rgba(var(--th-m-rgb), 0.08) 70%, rgba(0, 0, 0, 0)); }
.th .th-team-hd h5 { min-width: 0; font-size: 15.5px; text-shadow: var(--th-text-on-art); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .th-team-hd-acts { margin-left: auto; display: flex; gap: 5px; }
.th .th-team-hd .th-btn { height: 28px; padding: 0 11px; font-size: 12.5px; background: var(--th-sunk-on-art); gap: 5px; }
.th .th-team-hd .th-btn svg { width: 14px; height: 14px; }

@container th-team (max-width: 1000px) {
  .th .th-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* PHONE: each cookie a short art strip; ONE (.is-open) drawn as the full plate */
@container th-team (max-width: 680px) {
  .th .th-board { padding: 10px; }
  .th .th-plates { display: flex; flex-direction: column; gap: 6px; }
  .th .th-pi { display: block; position: relative; }
  .th .th-pi:not(.is-open):not(.th-pi--team):not(.is-empty) > .th-plate { display: none; }
  .th .th-pi.is-open { margin-top: 18px; }
  .th .th-pi.is-open > .th-strip { display: none; }
  .th .th-pi--team { margin-top: 6px; }
  .th .th-strip { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: stretch; width: 100%; min-height: 58px; padding: 0; border-radius: 14px; border: 1px solid rgba(240, 205, 126, 0.38); text-align: left; overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%),
      linear-gradient(100deg, rgba(var(--th-el), 0.3) 0%, rgba(var(--th-el), 0.1) 36%, rgba(var(--th-el), 0) 64%),
      linear-gradient(180deg, var(--th-plate-1), var(--th-plate-2));
    box-shadow: inset 0 0 0 3px rgba(var(--th-plate-ring-rgb), 0.45), inset 0 0 0 4px rgba(var(--th-el), 0.22), 0 10px 18px -12px rgba(0, 0, 0, 0.7); }
  .th .th-strip-stage { position: relative; overflow: hidden; border-right: 1px solid rgba(var(--th-el), 0.32);
    background: radial-gradient(80% 70% at 50% 85%, rgba(var(--th-el), 0.6), rgba(var(--th-el), 0) 72%), linear-gradient(180deg, rgba(var(--th-el), 0.14), rgba(var(--th-stage-floor-rgb), 0.4)); }
  /* the same three properties as the plate's, on .th-strip-stage; the strip
     shows the top of the art, so it scales about the head */
  .th .th-strip-art { position: absolute; top: -3px; left: var(--th-ax, 50%); height: 170%; width: auto; transform-origin: 50% 0; transform: translate(-50%, var(--th-ay, 0%)) scale(var(--th-as, 1)); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
  .th .th-strip-art.is-missing { display: none; }
  .th .th-strip-el { position: absolute; bottom: 5px; left: 5px; width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
  .th .th-pi.is-dark-art .th-strip-stage { background: radial-gradient(70% 70% at 50% 62%, rgba(var(--th-el), 0.95), rgba(var(--th-el), 0.25) 62%, rgba(var(--th-el), 0) 82%), linear-gradient(180deg, rgba(var(--th-el), 0.3), rgba(var(--th-dark-stage-rgb), 0.3)); }
  .th .th-pi.is-dark-art .th-strip-art { filter: drop-shadow(0 0 1px rgba(236, 228, 255, 0.95)) drop-shadow(0 0 1px rgba(236, 228, 255, 0.7)) drop-shadow(0 0 8px rgba(var(--th-el), 0.9)) brightness(1.18); }
  .th .th-strip-body { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; min-width: 0; padding: 0 0 5px; }
  .th .th-strip-name { display: block; padding: 4px 10px 3px 11px; border-radius: 0 13px 0 0; font: 700 15px/1.15 "CookieRun KR", "Outfit", sans-serif; color: var(--th-heading); text-shadow: var(--th-text-on-art); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(90deg, rgba(var(--th-el), var(--th-el-band)), rgba(var(--th-el), 0.1) 75%, rgba(var(--th-el), 0)); border-bottom: 1px solid rgba(240, 205, 126, 0.26); }
  .th .th-strip-sum { display: flex; align-items: center; min-width: 0; margin-left: 11px; margin-right: 8px; }
  .th .th-strip-tiles { display: flex; align-items: center; flex: none; }
  .th .th-strip-sum .th-tpt { width: 24px; height: 24px; }
  .th .th-strip-sum .th-tpt img { border-radius: 7px; }
  .th .th-strip-sum .th-tpt b { right: -5px; bottom: -4px; min-width: 19px; height: 15px; font-size: 11px; line-height: 15px; box-shadow: 0 0 0 1.5px var(--th-plate-2); }
  .th .th-strip-sum .th-tpt + .th-tpt { margin-left: 7px; }
  .th .th-strip-sum .th-tpt--tart { margin-left: 9px; }
  .th .th-strip-tx { margin: 0 8px 0 10px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--th-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .th .th-strip-chev { margin-left: auto; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--th-sunk-on-art); border: 1px solid transparent; color: var(--th-gold); }
  .th .th-strip-chev svg { width: 15px; height: 15px; }
  .th .th-pi.is-leader .th-strip { border-color: #f3d590; box-shadow: inset 0 0 0 3px rgba(var(--th-plate-ring-rgb), 0.45), inset 0 0 0 4.5px rgba(240, 205, 126, 0.5), 0 0 16px -6px var(--th-gold-glow), 0 10px 18px -12px rgba(0, 0, 0, 0.7); }
  .th .th-strip-crown { position: absolute; right: 3px; bottom: 3px; z-index: 1; }
  .th .th-strip-crown img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
  /* the expanded strip = the desktop plate, re-laid for the narrow width */
  .th .th-plate { grid-template-columns: 80px minmax(0, 1fr); border-radius: 15px; }
  .th .th-plate::before { right: 54px; }
  .th .th-plate-stage { border-radius: 14px 0 0 0; min-height: 0; }
  .th .th-plate-art { height: calc(100% + 16px); }
  .th .th-plate-badges img { width: 22px; height: 22px; }
  .th .th-plate-alt { display: none; }
  .th .th-plate-stage:has(> .th-plate-alt) > .th-plate-badges { bottom: 7px; }
  .th .th-plate-body { gap: 7px; padding: 0 10px 10px 0; }
  .th .th-plate-name { padding: 7px 44px 6px 11px; border-radius: 0 13px 0 0; }
  .th .th-plate-sub, .th .th-plate-body > .th-recipe, .th .th-plate-body > .th-bea { margin-left: 11px; }
  .th .th-plate-sub { flex-wrap: wrap; gap: 2px 6px; font-size: 13px; white-space: normal; }
  .th .th-plate-sub .th-rar-banner { height: 14px; }
  .th .th-plate-body .th-recipe .th-tpt b { box-shadow: 0 0 0 1.5px var(--th-plate-1); }
  .th .th-plate-body .th-recipe-tx { margin-left: 9px; font-size: 12.5px; }
  .th .th-plate-body .th-recipe .th-tpt { width: 28px; height: 28px; }
  .th .th-plate-body .th-recipe-plus { display: none; }
  .th .th-plate-body .th-recipe .th-tpt--tart { margin-left: 10px; }
  .th .th-plate-body .th-bea-ic { width: 34px; height: 34px; }
  .th .th-plate-foot { gap: 6px; padding: 8px 11px 9px; border-radius: 0 0 14px 14px; }
  .th .th-pf-row { flex-wrap: wrap; row-gap: 6px; }
  .th .th-pf-main .th-ranks { margin-left: 0; justify-content: flex-start; }
  .th .th-pf-main .th-ranks li { font-size: 13px; }
  .th .th-pf-alts { display: flex; }
  .th .th-pf-note { font-size: 15px; line-height: 1.42; }
  .th .th-pf-note svg { margin-top: 3px; }
  .th .th-pf-note p { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .th .th-pf-more { display: none; }
  .th .th-plate-x { position: absolute; z-index: 3; top: 4px; right: 5px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid transparent; color: var(--th-sel-ink); background: var(--th-sel-bg); }
  .th .th-plate-x svg { width: 16px; height: 16px; }
  .th .th-plate--empty { min-height: 58px; flex-direction: row; border-radius: 14px; }
  .th .th-plate--empty .th-plate-hole { width: 32px; height: 32px; }
  .th .th-plate--team { display: block; border-radius: 16px; }
  .th .th-team-hd { min-height: 44px; padding: 4px 6px 4px 14px; }
  .th .th-team-hd h5 { font-size: 16px; }
  .th .th-team-hd .th-btn { height: 36px; padding: 0 13px; font-size: 13px; }
}

/* ---------- 14 · loadout: leader + treasures ---------- */
/* DESKTOP Compact (.th-teambar): one line - LEADER [head] name | TREASURES
   [chip] [chip] [chip] - and the actions on the right. DESKTOP Comfy (the team
   plate, .th-loadout--plate): the leader as a row, the treasures as tiles.
   PHONE (both): the game's own team header - the leader tile LEFT of the
   treasure tiles. */
.th .th-loadout { position: relative; display: flex; align-items: center; min-width: 0; }
.th .th-lead { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--th-line-2); }
.th .th-lead-art { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.th .th-lead-art > img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; }
.th .th-lead-art > .th-lead-head { width: 86%; height: 86%; }
.th .th-lead-name { font-size: 13.5px; font-weight: 600; color: var(--th-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .th-lead:not(.is-set) .th-lead-name { color: var(--th-ink-3); font-weight: 500; font-style: italic; }
.th .th-lead:not(.is-set) .th-lead-art { opacity: 0.6; }
.th .th-trs { display: flex; align-items: center; gap: 10px; min-width: 0; }
.th .th-trs-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.th .th-trs-item { position: relative; display: flex; }
.th .th-tr { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px 0 5px; border-radius: 10px; border: 1px solid transparent; background: none; font-size: 13.5px; font-weight: 600; color: var(--th-ink); white-space: nowrap; text-align: left; }
.th button.th-tr:hover { border-color: var(--th-line-3); }
.th .th-tr .th-tr-ic { width: 28px; height: 31px; }
.th .th-tr.is-open, .th button.th-tr.is-open:hover { border-color: var(--th-parch-line); background: rgba(240, 205, 126, 0.12); box-shadow: 0 0 0 3px rgba(240, 205, 126, 0.1); }
.th .th-tr--empty { color: var(--th-ink-3); font-style: italic; font-weight: 500; }
.th .th-tr--empty .th-tr-hole { width: 26px; height: 29px; }

/* the Comfy team plate */
.th .th-loadout--plate { display: flex; flex-direction: column; align-items: stretch; flex: 1; }
.th .th-loadout--plate .th-lead { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art k" "art name"; column-gap: 10px; align-items: center; min-height: 0; margin: 9px 12px 0; padding: 3px 10px 3px 6px; border: 1px solid rgba(240, 205, 126, 0.18); border-radius: 11px; background: rgba(240, 205, 126, 0.05); }
.th .th-loadout--plate .th-lead-k { grid-area: k; color: var(--th-gold); line-height: 1.2; }
.th .th-loadout--plate .th-lead-art { grid-area: art; width: 32px; height: 32px; }
.th .th-loadout--plate .th-lead-name { grid-area: name; line-height: 1.2; }
.th .th-loadout--plate .th-trs { display: block; flex: 1; }
.th .th-loadout--plate .th-trs-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.th .th-loadout--plate .th-trs-list { position: relative; display: grid; grid-template-columns: repeat(var(--th-tr-count, 3), minmax(0, 1fr)); align-items: stretch; gap: 6px; margin: 8px 10px 9px; }
.th .th-loadout--plate .th-trs-item { display: flex; }
.th .th-loadout--plate .th-tr { flex: 1; flex-direction: column; justify-content: flex-start; gap: 3px; height: auto; padding: 5px 4px 6px; border-radius: 12px; text-align: center; white-space: normal; }
.th .th-loadout--plate .th-tr-name { font-size: 12.5px; line-height: 1.18; }
.th .th-loadout--plate .th-tr .th-tr-ic { width: 42px; height: 47px; }
.th .th-loadout--plate .th-tr.is-open { background: linear-gradient(180deg, rgba(251, 239, 214, 0.16), rgba(251, 239, 214, 0.05)); box-shadow: 0 0 0 3px rgba(240, 205, 126, 0.12); }
.th .th-loadout--plate .th-tr--empty .th-tr-hole { width: 38px; height: 43px; }

@container th-team (max-width: 1080px) {
  .th .th-teambar .th-loadout { flex-wrap: wrap; row-gap: 4px; }
}
@container th-team (max-width: 760px) {
  /* Compact skin: label row + loadout row */
  .th .th-teambar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k acts" "lo lo"; align-items: center; row-gap: 8px; min-height: 0; padding: 9px 12px 12px 15px; border-top: 1px solid var(--th-line-2); border-bottom: 0; order: 2; }
  /* the cookies first, the loadout after them (the inner wrapper: a
     container query can never style its own container) */
  .th .th-team--compact > .th-team-in { display: flex; flex-direction: column; }
  .th .th-team--compact .th-spec { order: 1; }
  .th .th-teambar-k { display: block; grid-area: k; }
  .th .th-teambar-acts { grid-area: acts; margin-left: 0; gap: 6px; }
  .th .th-teambar-acts .th-label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .th .th-teambar-acts .th-label-short { display: inline; }
  .th .th-teambar .th-loadout { grid-area: lo; }
}
@container th-team (max-width: 760px) {
  .th .th-loadout, .th .th-loadout--plate { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: stretch; gap: 7px; flex-wrap: nowrap; }
  .th .th-lead, .th .th-loadout--plate .th-lead { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 0; margin: 0; padding: 7px 4px 6px; border: 1px dashed rgba(240, 205, 126, 0.3); border-radius: 12px; background: rgba(240, 205, 126, 0.04); text-align: center; }
  .th .th-lead-k, .th .th-loadout--plate .th-lead-k { order: 0; font-size: 11px; color: var(--th-gold); }
  .th .th-lead-art, .th .th-loadout--plate .th-lead-art { order: 1; width: 36px; height: 36px; }
  .th .th-lead-name, .th .th-loadout--plate .th-lead-name { order: 2; font-size: 12.5px; line-height: 1.15; white-space: normal; }
  .th .th-lead.is-set { border-style: solid; border-color: var(--th-gold-line); background: rgba(240, 205, 126, 0.08); }
  .th .th-trs, .th .th-loadout--plate .th-trs { display: block; min-width: 0; }
  .th .th-trs-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .th .th-trs-list, .th .th-loadout--plate .th-trs-list { display: grid; grid-template-columns: repeat(var(--th-tr-count, 3), minmax(0, 1fr)); gap: 6px; margin: 0; }
  .th .th-trs-item { position: static; display: flex; min-width: 0; }
  .th .th-tr, .th .th-loadout--plate .th-tr { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; height: auto; min-height: 72px; padding: 5px 3px 6px; border-radius: 12px; text-align: center; white-space: normal; }
  .th .th-tr-name, .th .th-loadout--plate .th-tr-name { font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--th-ink); overflow-wrap: anywhere; }
  /* four or five treasures (Arcade Arena) wrap to rows of three rather than
     squeezing five names into a phone's width */
  .th .th-trs-list:is([data-count="4"], [data-count="5"]), .th .th-loadout--plate .th-trs-list:is([data-count="4"], [data-count="5"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th .th-teambar .th-tr { border: 1px solid var(--th-line-2); background: var(--th-field-bg); }
  .th .th-tr .th-tr-ic { width: 32px; height: 36px; }
  .th .th-loadout--plate .th-tr .th-tr-ic { width: 37px; height: 41px; }
  .th .th-loadout--plate { margin: 10px 9px; }
  .th .th-tr.is-open, .th .th-loadout--plate .th-tr.is-open { position: relative; border-color: var(--th-parch-line); background: linear-gradient(180deg, rgba(251, 239, 214, 0.18), rgba(251, 239, 214, 0.06)); box-shadow: 0 0 0 3px rgba(240, 205, 126, 0.12); }
  /* a notch under the open tile joins it to the detail below */
  .th .th-tr.is-open::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); z-index: 41; background: var(--th-parch); border-left: 1.5px solid var(--th-parch-line); border-top: 1.5px solid var(--th-parch-line); }
}

/* ---------- 15 · treasure detail popover ---------- */
/* Parchment; grows to any length (Great Sage's Gem is 430 characters).
   FLOAT (the hub): absolutely placed against the open treasure - above it in a
   Compact team bar, below it on a Comfy team plate, and on a phone hanging from
   the loadout row across the whole team. INLINE (guide flows): in the
   document, pushing content down. */
.th .th-tip { position: absolute; z-index: 40; width: 400px; padding: 13px 16px 11px; border-radius: 14px; text-align: left; white-space: normal; color: var(--th-parch-ink); background: linear-gradient(180deg, var(--th-parch), var(--th-parch-2)); border: 1.5px solid var(--th-parch-line); box-shadow: var(--th-shadow-pop); cursor: auto; }
.th .th-tip::before { content: ""; position: absolute; width: 13px; height: 13px; transform: rotate(45deg); background: var(--th-parch); }
.th .th-team--compact .th-tip--float { bottom: calc(100% + 12px); left: -8px; }
.th .th-team--compact .th-tip--float::before { bottom: -8px; left: 26px; background: var(--th-parch-2); border-right: 1.5px solid var(--th-parch-line); border-bottom: 1.5px solid var(--th-parch-line); }
.th .th-team--comfy .th-tip--float { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.th .th-team--comfy .th-tip--float::before { top: -8px; left: calc(50% - 6px); border-left: 1.5px solid var(--th-parch-line); border-top: 1.5px solid var(--th-parch-line); }
.th .th-team--comfy .th-trs-item:last-child .th-tip--float { left: auto; right: -10px; transform: none; }
.th .th-team--comfy .th-trs-item:last-child .th-tip--float::before { left: auto; right: 30%; }
.th .th-tip--inline { position: relative; z-index: 1; width: auto; margin-top: 10px; box-shadow: 0 0 0 3px rgba(var(--th-ground-rgb), 0.55), 0 14px 26px -14px rgba(0, 0, 0, 0.8); }
.th .th-tip--inline::before { display: none; }
.th .th-tip-h { display: flex; align-items: center; gap: 11px; }
.th .th-tip-title { min-width: 0; flex: 1; }
.th .th-tip-h b { display: block; font: 700 16px/1.15 "CookieRun KR", sans-serif; color: #3a1d0a; }
.th .th-tip-h small { display: block; margin-top: 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--th-parch-ink-2); }
.th .th-tip-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: rgba(255, 255, 255, 0.45); color: #6d3a07; align-self: flex-start; }
.th .th-tip-x svg { width: 14px; height: 14px; stroke-width: 2.2; }
.th .th-tip-x:focus-visible { outline-color: #8a5210; }
.th .th-tip-body { margin-top: 9px; font-size: 13.5px; line-height: 1.5; font-weight: 500; color: var(--th-parch-ink); }
.th .th-tip-body b { font-weight: 800; color: #6d3a07; }
.th .th-tip-tag { display: inline-flex; align-items: center; height: 19px; margin-right: 4px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: #8a5210; vertical-align: 1px; }
.th .th-tip-f { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(138, 82, 16, 0.25); display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: #6e5032; }
.th .th-tip-f a { color: #8a5210; font-weight: 700; }
.th .th-tip-f a:hover { text-decoration: underline; }
.th .th-tip-f a:focus-visible { outline-color: #8a5210; }

@container th-team (max-width: 760px) {
  .th .th-team .th-tip--float { position: absolute; top: calc(100% + 9px); bottom: auto; left: -6px; right: -6px; width: auto; transform: none; padding: 10px 13px 12px; border-radius: 16px; box-shadow: 0 0 0 3px rgba(var(--th-ground-rgb), 0.92), 0 26px 44px -10px rgba(0, 0, 0, 0.9); }
  .th .th-team .th-tip--float::before { display: none; }
  .th .th-team .th-trs-item:last-child .th-tip--float { left: -6px; right: -6px; }
  .th .th-tip-h .th-tr-ic { width: 28px; height: 31px; }
  .th .th-tip-h b { font-size: 15.5px; }
  .th .th-tip-body { margin-top: 7px; font-size: 15px; line-height: 1.45; }
}

/* motion: nothing here animates more than a hover lift and a knob slide, and
   both go for a reader who asked for less (design-system.css drops every
   transition under .th; this adds the hub's own movements) */
@media (prefers-reduced-motion: reduce) {
  .th .th-card:hover { transform: none; }
  /* the focus still dims, it just does not fade */
  .th[data-focus-shift] * { animation: none !important; }
}
@media (max-width: 700px) {
  /* the toolbar is not sticky on a phone, so an opened build scrolled into view
     only has to clear the site header */
  .th .th-ob { scroll-margin-top: calc(var(--th-sticky-top) + 12px); }
}


/* ---------- 17 · the live page: controller states, the page around the hub ----------
   What assets/js/team-hub.js draws beyond team-hub-view.js's components, and
   the page chrome a hub page needs now that it no longer loads feature-page.css
   or team-surface.css. */

/* LAYOUT-SHIFT RESERVATION (CLAUDE.md, "Content drawn by script into an empty
   box reserves its space until it is drawn"). The list host ships empty in the
   static page and the controller marks it data-pending until the first load
   lands, so the baked link list and the footer start a screen down and nothing
   visible moves when the bands arrive. The loading line inside it is an
   interim state, which is why this keys on the attribute and not on :empty. */
.th .th-list[data-pending] { min-height: 100vh; min-height: 100svh; }
/* The same for the hub ROOT, before the controller has drawn anything at all:
   the page ships it empty, so on first paint the baked link list below it sat
   at the top of the screen and the hub's arrival pushed it a screen down
   (CLS ~0.9 at 390px on every hub). One screen until the controller runs. */
.th[data-hub-state="pending"] { min-height: 100vh; min-height: 100svh; }
/* padding, not margin: a top margin collapses through the list and holds it
   30px low until the bands replace this line, which then moves the page */
.th .th-loading { margin: 0 2px; padding-top: 30px; font-size: 14.5px; color: var(--th-ink-3); }
/* the facts line while the builds load: same box, quieter */
.th .th-hub-facts.is-loading { color: var(--th-ink-3); }
.th .th-hub-facts-wait { font-size: 13.5px; }
.th .th-hub-panel--core.is-loading .th-core-bar { opacity: 0.5; }


/* the shared build a ?teamBuild= link pinned above the list */
.th .th-pinned { margin-top: 26px; }
.th .th-pinned-label svg { fill: none; stroke-width: 2.1; }


/* THE BAKED LINK LIST. www/scripts/bake-community-builds.mjs writes it between
   the COMMUNITY_TEAM_PAGES markers (a .premium-glass section of .tbs-era headed
   lists) and owns that markup; the hub page styles it here, off the shell's
   --tcb-* tokens (re-pointed to ink on a dark .th-page above, the site's light
   palette in light), so it reads as part of the page in both themes. The link
   colour is the one thing the bake writes inline. */
body.th-page .community-team-pages { box-sizing: border-box; max-width: calc(var(--th-wrap, 1392px) - 48px); margin: 36px auto 0; padding: 20px 24px 22px; border-radius: 18px; border: 1px solid var(--tcb-line); background: var(--tcb-surface); box-shadow: 0 3px 0 var(--tcb-ledge, transparent), 0 14px 30px -18px rgba(0, 0, 0, 0.6); color: var(--tcb-ink); }
body.th-page .community-team-pages h2 { margin: 0 0 4px; font: 700 21px/1.2 "CookieRun KR", "Outfit", sans-serif; color: var(--tcb-ink); }
body.th-page .community-team-pages > p { margin: 0 0 12px; max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--tcb-ink-soft); }
body.th-page .community-team-pages ul { margin: 0; padding-left: 1.2rem; font-size: 15px; line-height: 1.9; }
body.th-page .community-team-pages li > span { font-size: 0.88em; color: var(--tcb-ink-soft); }
body.th-page .community-team-pages .tbs-era { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 12px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--tcb-line); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--tcb-ink); }
body.th-page .community-team-pages .tbs-era-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; min-width: 0; }
body.th-page .community-team-pages .tbs-era-title { font: 700 16px/1.25 "CookieRun KR", "Outfit", sans-serif; }
body.th-page .community-team-pages :is(.tbs-era-sub, .tbs-era-dates) { font-size: 12.5px; font-weight: 500; color: var(--tcb-ink-soft); white-space: nowrap; }
body.th-page .community-team-pages .tbs-era-badge { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #10121f; background: #f0cd7e; }
body.th-page .community-team-pages .tbs-era.is-untracked { border-bottom-style: dashed; color: var(--tcb-ink-soft); }
@media (max-width: 700px) {
  body.th-page .community-team-pages { margin: 30px 16px 0; padding: 16px 16px 18px; border-radius: 16px; }
}


/* ============================================================================
   L · LIGHT THEME
   ----------------------------------------------------------------------------
   The site's light palette (shared-shell.css): a lilac ground, white cards on a
   lavender ledge (a solid 3px offset), grape ink, the violet brand for every
   SELECTED and interactive state, jam as the second accent, gold kept as
   ORNAMENT (frames, gems, medallions, Spotlight, the primary button) with a
   deeper gold for gold TEXT. The Comfy team is a LIGHT game card carrying its
   cookie's element. Every rule leads with :root[data-theme="light"]; none
   changes a border width.
   ========================================================================== */


/* ---------- L3 · literal overrides (the hub components above) ---------- */
:root[data-theme="light"] .th .th-medal { box-shadow: 0 0 0 2px var(--th-card-2), 0 0 0 3.5px rgba(206, 146, 48, 0.8), 0 6px 12px rgba(90, 45, 10, 0.3), inset 0 -3px 0 rgba(110, 60, 10, 0.35); }
/* hub header panels' contents (the frame's light rules are in design-system.css) */
:root[data-theme="light"] .th .th-progress { box-shadow: inset 0 1px 2px rgba(60, 30, 120, 0.16); }
:root[data-theme="light"] .th .th-progress i { box-shadow: 0 0 8px rgba(var(--th-m-rgb), 0.45); }
:root[data-theme="light"] .th .th-core-bar i { background: var(--th-gold-2); }
/* toolbar */
:root[data-theme="light"] .th .th-fchip { background: rgba(106, 63, 220, 0.08); border-color: rgba(106, 63, 220, 0.42); }
:root[data-theme="light"] .th .th-fchip button { color: #6a3fdc; }
/* Compact rows: hover marker violet; Spotlight keeps its gold */
:root[data-theme="light"] .th .th-row:hover::before { background: rgba(106, 63, 220, 0.5); }
:root[data-theme="light"] .th .th-row--spot { background: radial-gradient(560px 90px at 0% 50%, rgba(240, 180, 70, 0.16), rgba(255, 255, 255, 0) 70%); }
:root[data-theme="light"] .th .th-row--spot::before, :root[data-theme="light"] .th .th-row--spot:hover::before { background: linear-gradient(180deg, #ffe7a3, #e2a849); box-shadow: 0 0 8px rgba(226, 168, 73, 0.55); }
:root[data-theme="light"] .th .th-row--spot.is-open, :root[data-theme="light"] .th .th-row--spot:hover { background: var(--th-surface-2); }
/* Comfy cards: the body turns white; band, heads, medallion and ribbon are
   unchanged artwork. Frame = a soft gold edge + white inner ring + the
   mode-tinted ledge. */
:root[data-theme="light"] .th .th-card { border-color: var(--th-card-edge); box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(200, 140, 30, 0.12), var(--th-card-mode-ledge), 0 12px 26px -14px rgba(76, 40, 150, 0.3); }
:root[data-theme="light"] .th .th-card-band { border-bottom-color: rgba(196, 140, 40, 0.38); }
:root[data-theme="light"] .th .th-fan-head { box-shadow: 0 0 0 2px var(--th-card-2), 0 5px 9px rgba(60, 25, 100, 0.34); }
:root[data-theme="light"] .th .th-fan-head.is-filter-match { box-shadow: 0 0 0 2px var(--th-card-2), 0 0 0 4px var(--th-match), 0 5px 9px rgba(60, 25, 100, 0.34); }
:root[data-theme="light"] .th .th-card--spot { border-color: #e2b25a; box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4.5px rgba(226, 168, 73, 0.7), 0 0 0 1px rgba(226, 168, 73, 0.3), 0 3px 0 #d3a24a, 0 0 28px -6px rgba(240, 170, 60, 0.5), 0 12px 26px -14px rgba(76, 40, 150, 0.3); }
:root[data-theme="light"] .th .th-card:hover { border-color: rgba(206, 146, 48, 0.65); box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(200, 140, 30, 0.2), 0 0 0 3px rgba(226, 168, 73, 0.2), 0 6px 0 rgba(var(--th-m-rgb), 0.3), 0 22px 32px -16px rgba(76, 40, 150, 0.38); }
:root[data-theme="light"] .th .th-card.is-open, :root[data-theme="light"] .th .th-card.is-open:hover { border-color: rgba(var(--th-m-rgb), 0.9); box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(var(--th-m-rgb), 0.3), 0 0 0 3px rgba(var(--th-m-rgb), 0.16), 0 3px 0 rgba(var(--th-m-rgb), 0.5), 0 0 28px -6px rgba(var(--th-m-rgb), 0.45); }
/* opened build: a white card; the mode art calmer through its header */
:root[data-theme="light"] .th .th-ob { background: radial-gradient(900px 240px at 50% 0%, rgba(var(--th-m-rgb), 0.06), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--th-ob-1), var(--th-ob-2)); box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 5px var(--th-gold-faint), 0 3px 0 var(--th-ledge), 0 30px 54px -30px rgba(76, 40, 150, 0.45); }
:root[data-theme="light"] .th .th-ob-head-art { background-image: linear-gradient(90deg, rgb(var(--th-veil-rgb)) 0%, rgba(var(--th-veil-rgb), 0.96) 46%, rgba(var(--th-veil-rgb), 0.66) 64%, rgba(var(--th-veil-rgb), 0.92) 84%), var(--th-m-art); }
:root[data-theme="light"] .th .th-ob-title { text-shadow: none; }
:root[data-theme="light"] .th .th-tgroup-toggle { background: linear-gradient(90deg, rgba(var(--th-m-rgb), 0.1), rgba(var(--th-m-rgb), 0) 60%); }
/* team atoms */
:root[data-theme="light"] .th .th-tpt img { filter: var(--th-art-drop); }
:root[data-theme="light"] .th .th-tpt--tart img { box-shadow: 0 0 0 1.5px #d9a648, 0 0 7px rgba(240, 180, 70, 0.45); }
:root[data-theme="light"] .th .th-bea-ic { filter: var(--th-art-drop); }
:root[data-theme="light"] .th .th-bea-r.is-tainted { color: #7a3fc0; }
:root[data-theme="light"] .th .th-gem { background: linear-gradient(180deg, rgba(var(--th-g), 0.17), rgba(var(--th-g), 0.07)); border-color: rgba(var(--th-g), 0.6); }
:root[data-theme="light"] .th .th-gem::before { box-shadow: 0 0 0 1px rgba(40, 20, 70, 0.22), 0 0 5px rgba(var(--th-g), 0.7); }
:root[data-theme="light"] .th .th-gem b { color: #6e4500; }
:root[data-theme="light"] .th .th-ranks li:first-child i { color: #2a1206; background: var(--th-gold-gem); border-color: #c4862a; }
:root[data-theme="light"] .th .th-crown { box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 2.5px rgba(176, 116, 20, 0.5), 0 2px 6px rgba(196, 134, 42, 0.4); }
:root[data-theme="light"] .th .th-tr.is-open, :root[data-theme="light"] .th button.th-tr.is-open:hover { border-color: #d9a648; background: #fff6e2; box-shadow: 0 0 0 3px rgba(240, 190, 90, 0.22); }
/* the Comfy board: a faint lilac well inside the shell, so the white plates
   stand on a surface the way the site's white cards stand on its ground */
:root[data-theme="light"] .th .th-board { background: linear-gradient(180deg, #f6f2fd, #f1ebfb); border-radius: 0 0 15px 15px; margin: 0 5px 5px; box-shadow: inset 0 1px 0 rgba(176, 116, 20, 0.14); }
:root[data-theme="light"] .th .th-tgroup-body .th-board { border-radius: 0; }
/* the plate: a white card on its element ledge */
:root[data-theme="light"] .th .th-plate { border-color: var(--th-el-edge);
  background:
    linear-gradient(118deg, rgba(var(--th-el), 0.16) 0%, rgba(var(--th-el), 0.05) 34%, rgba(var(--th-el), 0) 62%),
    linear-gradient(180deg, var(--th-plate-1), var(--th-plate-2));
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(var(--th-el), 0.2), 0 3px 0 var(--th-el-ledge), 0 14px 24px -16px rgba(60, 30, 110, 0.32); }
:root[data-theme="light"] .th .th-plate::before, :root[data-theme="light"] .th .th-plate::after { background: var(--th-gold-gem); box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 2.5px rgba(176, 116, 20, 0.6); }
:root[data-theme="light"] .th .th-plate.is-filter-match { border-color: #6a3fdc; }
:root[data-theme="light"] .th .th-plate-stage { border-right-color: rgba(var(--th-el), 0.42); background: radial-gradient(80% 58% at 50% 74%, rgba(var(--th-el), 0.6), rgba(var(--th-el), 0) 72%), linear-gradient(180deg, rgba(var(--th-el), 0.1), rgba(var(--th-el), 0.28)); }
:root[data-theme="light"] .th .th-plate-stage::before { background: radial-gradient(closest-side, rgba(var(--th-stage-floor-rgb), 0.34), rgba(var(--th-stage-floor-rgb), 0)); }
:root[data-theme="light"] .th .th-plate-art { filter: drop-shadow(0 5px 7px rgba(60, 30, 110, 0.3)); }
:root[data-theme="light"] .th .th-plate-badges img { filter: drop-shadow(0 1px 2px rgba(60, 30, 110, 0.4)); }
:root[data-theme="light"] .th .th-plate-name { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.72) 100%), linear-gradient(rgba(var(--th-el), var(--th-el-band-a)), rgba(var(--th-el), var(--th-el-band-a))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); border-bottom-color: rgba(176, 116, 20, 0.4); }
:root[data-theme="light"] .th .th-plate-foot { background: linear-gradient(180deg, rgba(var(--th-el), 0.1), rgba(var(--th-el), 0.06)), #fdfcff; border-top-color: rgba(var(--th-el), 0.3); }
:root[data-theme="light"] .th .th-plate-alt { box-shadow: 0 2px 6px rgba(60, 30, 110, 0.22); }
:root[data-theme="light"] .th .th-plate-alt img, :root[data-theme="light"] .th .th-pf-alt img { border-color: #ffffff; box-shadow: 0 0 0 1px rgba(176, 116, 20, 0.45); }
:root[data-theme="light"] .th .th-plate--leader { border-color: #cf9636; box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4.5px rgba(218, 160, 60, 0.78), 0 0 0 1.5px rgba(226, 168, 73, 0.38), 0 3px 0 #cf9a3e, 0 0 30px -5px rgba(240, 170, 60, 0.62), 0 14px 24px -16px rgba(60, 30, 110, 0.32); }
:root[data-theme="light"] .th .th-plate-crown img { filter: drop-shadow(0 2px 3px rgba(90, 45, 10, 0.35)); }
:root[data-theme="light"] .th .th-plate.is-dark-art .th-plate-stage { background: radial-gradient(70% 60% at 50% 60%, rgba(var(--th-el), 0.95), rgba(var(--th-el), 0.4) 60%, rgba(var(--th-el), 0.14) 82%), linear-gradient(180deg, rgba(var(--th-el), 0.18), rgba(var(--th-el), 0.34)); }
:root[data-theme="light"] .th .th-plate--empty { border-color: var(--th-line-3); background: rgba(255, 255, 255, 0.6); box-shadow: none; }
:root[data-theme="light"] .th .th-plate--team { border-color: var(--th-card-edge); background: radial-gradient(360px 200px at 100% 0%, rgba(var(--th-m-rgb), 0.09), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--th-team-plate-1), var(--th-team-plate-2)); box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(var(--th-m-rgb), 0.22), var(--th-card-mode-ledge), 0 14px 24px -16px rgba(60, 30, 110, 0.32); }
:root[data-theme="light"] .th .th-team-hd { border-bottom-color: rgba(176, 116, 20, 0.4); background: linear-gradient(90deg, rgba(var(--th-m-rgb), 0.32), rgba(var(--th-m-rgb), 0.12) 62%, rgba(var(--th-m-rgb), 0.04)); }
:root[data-theme="light"] .th .th-team-hd h5 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
:root[data-theme="light"] .th .th-team-hd .th-btn { background: #ffffff; }
:root[data-theme="light"] .th .th-loadout--plate .th-lead { border-color: var(--th-line-2); background: var(--th-surface-sunk); }
:root[data-theme="light"] .th .th-loadout--plate .th-tr.is-open { border-color: #d9a648; background: #fff6e2; }
:root[data-theme="light"] .th .th-tip { border-color: #d9a648; }
/* the phone's opened-build head on light: the veil runs top to bottom (the
   framed header's own phone veil is in design-system.css section L) */
@container th-ob (max-width: 820px) {
  :root[data-theme="light"] .th .th-ob-head-art { background-image: linear-gradient(180deg, rgba(var(--th-veil-rgb), 0.78) 0%, rgba(var(--th-veil-rgb), 0.92) 50%, rgb(var(--th-veil-rgb)) 100%), var(--th-m-art); }
}
/* the phone strips and loadout tiles on light */
@container th-team (max-width: 680px) {
  :root[data-theme="light"] .th .th-strip { border-color: var(--th-el-edge); background: linear-gradient(100deg, rgba(var(--th-el), 0.16) 0%, rgba(var(--th-el), 0.05) 40%, rgba(var(--th-el), 0) 66%), linear-gradient(180deg, var(--th-plate-1), var(--th-plate-2)); box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4px rgba(var(--th-el), 0.18), 0 3px 0 var(--th-el-ledge); }
  :root[data-theme="light"] .th .th-strip-stage { border-right-color: rgba(var(--th-el), 0.42); background: radial-gradient(80% 70% at 50% 85%, rgba(var(--th-el), 0.62), rgba(var(--th-el), 0) 72%), linear-gradient(180deg, rgba(var(--th-el), 0.1), rgba(var(--th-el), 0.26)); }
  :root[data-theme="light"] .th .th-strip-name { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.72) 100%), linear-gradient(rgba(var(--th-el), var(--th-el-band-a)), rgba(var(--th-el), var(--th-el-band-a))); border-bottom-color: rgba(176, 116, 20, 0.4); }
  :root[data-theme="light"] .th .th-strip-chev { background: #ffffff; border-color: transparent; color: #855400; }
  :root[data-theme="light"] .th .th-strip-art { filter: drop-shadow(0 4px 6px rgba(60, 30, 110, 0.3)); }
  :root[data-theme="light"] .th .th-pi.is-leader .th-strip { border-color: #cf9636; box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 4.5px rgba(218, 160, 60, 0.7), 0 3px 0 #cf9a3e; }
}
@container th-team (max-width: 760px) {
  :root[data-theme="light"] .th .th-lead { border-color: var(--th-line-3); background: var(--th-surface-sunk); }
  :root[data-theme="light"] .th .th-lead.is-set { border-color: #d9a648; background: #fffaf0; }
  :root[data-theme="light"] .th .th-teambar .th-tr { border-color: var(--th-line-2); background: #ffffff; }
  :root[data-theme="light"] .th .th-tr.is-open, :root[data-theme="light"] .th .th-loadout--plate .th-tr.is-open { border-color: #d9a648; background: #fff6e2; }
  :root[data-theme="light"] .th .th-ck.is-open { background: linear-gradient(180deg, rgba(var(--th-el), 0.14), rgba(var(--th-el), 0.04) 42%, rgba(255, 255, 255, 0) 100%), #ffffff; }
  :root[data-theme="light"] .th .th-team .th-tip--float { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 26px 44px -10px rgba(46, 22, 96, 0.45); }
}
/* the live page on light (section 17): the baked list's per-kind link colour is
   tuned for the dark ground (#ff8fa0 is 2.3:1 on white), so it takes the
   site's light link violet; the preview-clock tag takes a deep amber */
:root[data-theme="light"] body.th-page .community-team-pages a { color: #6a3fdc; }
:root[data-theme="light"] body.th-page .community-team-pages .tbs-era-badge { color: #ffffff; background: #6a3fdc; }
/* the boss bar and the season extras on light */
:root[data-theme="light"] .th .th-ctx { background: var(--th-btn-bg); box-shadow: none; }
:root[data-theme="light"] .th .th-ctx.is-on { background: rgba(var(--th-m-rgb), 0.2); box-shadow: none; }