/* =============================================================================
   team-build-page.css — the baked team build pages
   (/arena-teams/builds/{slug}/ and every sibling written by
   www/scripts/bake-community-builds.mjs)
   -----------------------------------------------------------------------------
   Linked after shared-shell.css, design-system.css and team-hub.css: the page
   is the hub's design (its framed header, tags, buttons, band heads and
   alternating strips, the cookie recipe / beascuit / stat-target pieces) with
   ONE piece of its own, THE FORMATION: round 1's direction E ("Battle Plan"),
   kept for these pages at the owner's request. A team is drawn as a battle
   line-up - the cookies standing on lit platforms over the mode's art, grouped
   into Rear / Middle / Front lanes and facing the enemy on the right - with the
   leader and treasures on a plaque to its left and each cookie's build on a
   strip under it. The markup is renderFormation() in
   assets/js/team-hub-view.js.

   Everything here is under .th (or body.th-page), reads the --th-* tokens and
   is made responsive by container queries: on .th for the page, on .th-fm
   (named th-fm) for the formation, so a team keeps its own layout by its own
   width. Every light rule leads with :root[data-theme="light"].

   The generator owns the pages: a change here needs only this file's ?v= tag
   (a hand-kept literal in www/scripts/lib/baked-build-pieces.mjs) bumped and
   the pages re-baked in the same commit.
   ========================================================================== */

/* ---------- page ---------- */
.th.th-bp { padding-bottom: 40px; }
.th .th-bp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 18px 2px 0; font-size: 13px; color: var(--th-ink-3); }
.th .th-bp-crumbs a { color: var(--th-ink-2); }
.th .th-bp-crumbs a:hover { color: var(--th-link); text-decoration: underline; text-underline-offset: 3px; }
.th .th-bp-crumbs [aria-current] { color: var(--th-ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.th .th-bp-crumbs .th-sep { padding: 0; }

/* the hero: the hub's framed header (team-hub.css) with a build's copy in it */
.th .th-bp-head { margin-top: 12px; }
@container th (min-width: 1181px) {
  .th .th-bp-head .th-hub-copy { max-width: min(780px, calc(100% - 250px)); }
  .th .th-bp-head .th-hub-head-in[data-panels="1"] .th-hub-copy { max-width: none; }
}
.th .th-bp-head .th-hub-title { font-size: 46px; line-height: 1.04; overflow-wrap: anywhere; }
.th .th-bp-head .th-hub-title.is-long { font-size: 36px; }
.th .th-bp-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; font-size: 14px; color: var(--th-ink-2); }
.th .th-bp-by .th-av { width: 34px; height: 34px; }
.th .th-bp-by b, .th .th-bp-by a.th-bp-by-name { color: var(--th-ink); font-weight: 700; }
.th .th-bp-by a.th-bp-by-name:hover { color: var(--th-link); }
.th .th-bp-by .th-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--th-link); }
.th .th-bp-by .th-link svg { width: 14px; height: 14px; }
.th .th-bp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.th .th-bp-facts { margin-top: 10px; font-size: 13px; color: var(--th-ink-3); }
.th .th-bp-facts b { color: var(--th-ink-2); font-weight: 600; }
.th .th-bp-head .th-hub-cta { margin-top: 18px; }

/* a multi-team build's overview panel: one row per team, each a jump link */
.th .th-bp-teams-panel { gap: 0; }
.th .th-bp-teams-panel h2 { margin-top: 6px; font-size: 21px; }
.th .th-bp-teams { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.th .th-bp-teams a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--th-line-2); background: var(--th-wash); }
.th .th-bp-teams a:hover { border-color: var(--th-gold-line); background: var(--th-gold-faint); }
.th .th-bp-teams b { font-size: 14px; font-weight: 700; color: var(--th-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th .th-bp-teams .th-bp-teams-faces { grid-column: 1 / -1; display: flex; gap: 4px; }
.th .th-bp-teams .th-face { width: 30px; height: 30px; border-radius: 8px; }
.th .th-bp-teams svg { width: 15px; height: 15px; color: var(--th-ink-3); }

/* the author's notes, under the hero (round 3's "Note by" block) */
.th .th-bp-note { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; margin: 26px 0 0; padding: 0 2px; }
.th .th-bp-note-gem { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--th-gold-line); background: radial-gradient(circle, rgba(240, 205, 126, 0.16), rgba(240, 205, 126, 0) 70%); box-shadow: inset 0 0 0 4px rgba(var(--th-abyss-rgb), 0.5); }
.th .th-bp-note-gem::before { content: ""; width: 16px; height: 16px; transform: rotate(45deg); border-radius: 3px; background: var(--th-gold-gem); box-shadow: 0 0 10px var(--th-gold-glow); }
.th .th-bp-note-k { font-size: 13px; color: var(--th-ink-3); }
.th .th-bp-note-k b { color: var(--th-ink); font-weight: 700; }
.th .th-bp-note-tx { margin-top: 6px; max-width: 78ch; font-size: 16px; line-height: 1.62; color: var(--th-ink-2); white-space: pre-line; overflow-wrap: anywhere; }

/* the Beacon of Valor (Cookie Alliance), as the hub draws it, framed */
.th .th-bp-beacon .th-ob-beacon { margin-top: 18px; border: 1px solid var(--th-line-2); border-radius: 16px; background: var(--th-surface-1); }

/* bands: the hub's band heads and alternating strips (design-system.css) */
.th .th-bp-bands { margin-top: 18px; }
.th .th-bp-bands > .th-band { scroll-margin-top: calc(var(--th-sticky-top) + 12px); }
.th .th-bp-team-notes { max-width: 80ch; margin: -2px 2px 14px; font-size: 15px; line-height: 1.55; color: var(--th-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.th .th-bp-band-link { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13.5px; font-weight: 600; color: var(--th-link); white-space: nowrap; }
.th .th-bp-band-link svg { width: 15px; height: 15px; }

/* the source video (a Community Spotlight) */
.th .th-bp-video { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 26px; align-items: center; padding: 12px; border-radius: 20px; border: 1px solid var(--th-gold-line); background: linear-gradient(180deg, var(--th-card-1), var(--th-card-2)); box-shadow: inset 0 0 0 3px rgba(var(--th-abyss-rgb), 0.45), var(--th-shadow-1); }
.th .th-bp-video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden; background: var(--th-surface-sunk); border: 1px solid var(--th-line-2); }
.th .th-bp-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.th .th-bp-video-thumb .th-bp-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; color: #fff; background: #e1271f; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.8); }
.th .th-bp-video-thumb .th-bp-play svg { width: 24px; height: 24px; fill: currentColor; }
.th .th-bp-video-thumb:hover .th-bp-play { filter: brightness(1.08); }
.th .th-bp-video-tx { padding: 6px 12px 6px 0; }
.th .th-bp-video-tx h3 { margin-top: 8px; font-size: 26px; }
.th .th-bp-video-tx p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--th-ink-2); }
.th .th-bp-video-tx .th-bp-by { margin-top: 10px; }
.th .th-bp-video-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* more builds: the hub's cards (static: each links to its page) + two CTAs */
.th .th-bp-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.th .th-bp-ctas { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.th .th-card--link { cursor: default; }
.th .th-card--link .th-card-title { text-decoration: none; }
.th .th-card--link .th-card-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.th .th-card--link .th-card-title:focus-visible { outline: none; }
.th .th-card--link:has(.th-card-title:focus-visible) { outline: 2px solid var(--th-focus-color); outline-offset: 3px; }
.th .th-bp-cta { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-areas: "art h btn" "art p btn"; align-items: center; column-gap: 14px; row-gap: 2px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1px dashed var(--th-line-3); background: var(--th-wash); }
.th .th-bp-cta-art { grid-area: art; width: 54px; height: 54px; object-fit: contain; filter: var(--th-art-drop); }
.th .th-bp-cta h3 { grid-area: h; align-self: end; font-size: 17px; }
.th .th-bp-cta p { grid-area: p; align-self: start; font-size: 13.5px; line-height: 1.4; color: var(--th-ink-2); }
.th .th-bp-cta .th-btn { grid-area: btn; }
/* a mode with no emblem: the copy takes the art's column */
.th .th-bp-cta:not(:has(.th-bp-cta-art)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h btn" "p btn"; padding-left: 18px; }

/* the page's foot: canonical note, Report, disclaimer */
.th .th-bp-foot { margin-top: 30px; padding: 16px 2px 0; border-top: 1px solid var(--th-line); font-size: 12.5px; line-height: 1.6; color: var(--th-ink-3); }
.th .th-bp-foot a { color: var(--th-ink-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.th .th-bp-foot p + p { margin-top: 8px; }
/* Report: quiet on purpose (a safety valve, not a call to action). Emitted
   hidden; assets/js/community-build-report.js unhides it. */
.th .page-report { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: 10px; }
.th .page-report[hidden] { display: none; }
.th .page-report-button { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent; background: var(--th-btn-bg); color: var(--th-ink-2); font: inherit; font-size: 12px; cursor: pointer; transition: background-color 0.15s ease; }
.th .page-report-button:hover:not(:disabled) { background: var(--th-btn-hover); color: var(--th-ink); }
.th .page-report-button:disabled { cursor: default; opacity: 0.6; }
.th .page-report-status:empty { display: none; }

@container th (max-width: 1080px) {
  .th .th-bp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th .th-bp-ctas { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th .th-bp-video { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .th .th-bp-video-tx { padding: 0 8px 8px; }
}
@container th (max-width: 1180px) {
  /* the hub's tablet header (team-hub.css), with the teams panel across the
     row and no emblem beside a multi-team build's copy */
  .th .th-bp-head .th-hub-head-in[data-panels="1"] .th-hub-copy { padding-right: 0; min-height: 0; }
  .th .th-bp-head .th-bp-teams-panel { grid-column: 1 / -1; }
  .th .th-bp-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@container th (max-width: 700px) {
  .th .th-bp-crumbs { margin-top: 14px; font-size: 12.5px; }
  .th .th-bp-crumbs [aria-current] { max-width: 22ch; }
  .th .th-bp-head .th-hub-title, .th .th-bp-head .th-hub-title.is-long { font-size: 32px; line-height: 1.06; }
  .th .th-bp-head .th-hub-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .th .th-bp-note { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; }
  .th .th-bp-note-gem { display: none; }
  .th .th-bp-note-tx { font-size: 15px; }
  /* the Beacon stacks, as it does in a narrow opened build (team-hub.css
     keys that on the opened build's own container, which this page has not) */
  .th .th-bp-beacon .th-ob-beacon { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 12px 15px; }
  .th .th-bp-beacon .th-ob-beacon-k { width: auto; }
  .th .th-bp-beacon .th-bv-pair { flex-direction: column; align-items: stretch; gap: 6px; max-width: none; }
  .th .th-bp-beacon .th-bv { flex: none; min-height: 48px; }
  .th .th-bp-beacon .th-bv-arrow { align-self: center; width: 24px; height: 24px; }
  .th .th-bp-beacon .th-bv-arrow svg { transform: rotate(90deg); }
  .th .th-bp-more { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .th .th-bp-ctas { grid-template-columns: minmax(0, 1fr); }
  .th .th-bp-cta { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "art h" "art p" "btn btn"; row-gap: 4px; }
  .th .th-bp-cta-art { width: 46px; height: 46px; }
  .th .th-bp-cta .th-btn { justify-self: start; margin-top: 8px; }
  .th .th-bp-cta:not(:has(.th-bp-cta-art)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p" "btn"; }
  .th .th-bp-video-tx h3 { font-size: 22px; }
  .th .page-report { margin: 8px 0 0; display: flex; }
}

/* ---------- THE FORMATION ---------- */
/* The three lanes take the game's own position colours: blue rear, gold
   middle, red front. They are edges and glows on the art, never text. */
.th .th-fm {
  container: th-fm / inline-size;
  --th-fm-kit: 184px;
  --th-fm-gap: 10px;
  --th-fm-stage-h: 236px;
  --th-lane-rear: 82, 170, 255;
  --th-lane-middle: 255, 204, 64;
  --th-lane-front: 255, 88, 102;
  --th-lane: var(--th-lane-middle);
}
.th .th-fm .lane-rear { --th-lane: var(--th-lane-rear); }
.th .th-fm .lane-middle { --th-lane: var(--th-lane-middle); }
.th .th-fm .lane-front { --th-lane: var(--th-lane-front); }
.th .th-fm-in { display: grid; grid-template-columns: var(--th-fm-kit) repeat(var(--th-fm-n, 5), minmax(0, 1fr)); grid-template-rows: var(--th-fm-stage-h) repeat(4, auto); column-gap: var(--th-fm-gap); }

/* the plaque: leader, then treasures (each a native <details>) */
.th .th-fm-kit { grid-column: 1; grid-row: 1 / -1; align-self: start; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 12px; padding: 12px 10px 12px; border-radius: 18px; border: 1px solid var(--th-gold-line); background: linear-gradient(180deg, var(--th-team-plate-1), var(--th-team-plate-2)); box-shadow: inset 0 0 0 3px rgba(var(--th-abyss-rgb), 0.4), inset 0 0 0 4px var(--th-gold-faint), var(--th-shadow-1); }
.th .th-fm-kit .th-label { display: block; padding: 0 4px; }
.th .th-fm-lead-row { display: flex; align-items: center; gap: 9px; min-height: 48px; margin-top: 5px; padding: 5px 8px 5px 6px; border-radius: 12px; border: 1px solid var(--th-gold-line); background: var(--th-gold-faint); }
.th .th-fm-lead:not(.is-set) .th-fm-lead-row { border-style: dashed; border-color: var(--th-line-3); background: var(--th-wash); }
.th .th-fm-lead .th-lead-art { width: 36px; height: 36px; }
.th .th-fm-lead:not(.is-set) .th-lead-art { opacity: 0.55; }
.th .th-fm-lead-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.th .th-fm-lead-tx b { font-size: 13.5px; font-weight: 700; color: var(--th-ink); }
.th .th-fm-lead:not(.is-set) .th-fm-lead-tx b { color: var(--th-ink-3); font-weight: 500; font-style: italic; }
.th .th-fm-lead-tx small { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--th-gold); }
.th .th-fm-tr-list { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.th .th-fm-tr { position: relative; }
.th .th-fm-tr details { position: static; }
.th .th-fm-tr-sum { display: grid; grid-template-columns: 32px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 46px; padding: 4px 8px 4px 5px; border-radius: 12px; border: 1px solid transparent; background: var(--th-field-bg); list-style: none; cursor: pointer; }
.th .th-fm-tr-sum::-webkit-details-marker { display: none; }
.th .th-fm-tr-sum:hover { border-color: var(--th-line-3); }
.th .th-fm-tr-sum .th-tr-ic { width: 32px; height: 36px; object-fit: contain; filter: var(--th-art-drop); }
.th .th-fm-tr-name { min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.18; color: var(--th-ink); }
.th .th-fm-tr-chev svg { width: 14px; height: 14px; color: var(--th-ink-3); transition: transform 0.15s ease; }
.th .th-fm-tr details[open] > .th-fm-tr-sum { border-color: var(--th-gold-line); background: var(--th-gold-faint); box-shadow: 0 0 0 3px var(--th-gold-faint); }
.th .th-fm-tr details[open] > .th-fm-tr-sum .th-fm-tr-chev svg { transform: rotate(180deg); }
.th .th-fm-tr.is-empty .th-fm-tr-sum { cursor: default; grid-template-columns: 32px minmax(0, 1fr); background: none; border: 1px dashed var(--th-line-2); }
.th .th-fm-tr.is-empty .th-tr-hole { width: 26px; height: 30px; margin-left: 3px; }
.th .th-fm-tr.is-empty .th-fm-tr-name { color: var(--th-ink-3); font-style: italic; font-weight: 500; }

/* the parchment: floats over the field beside the plaque on a wide team, sits
   inline under its treasure on a narrow one */
.th .th-fm-tip { position: absolute; z-index: 8; left: calc(100% + 16px); top: -8px; width: min(340px, 70cqw); padding: 12px 14px 12px; border-radius: 14px; border: 1px solid var(--th-parch-line); background: linear-gradient(180deg, var(--th-parch), var(--th-parch-2)); color: var(--th-parch-ink); box-shadow: var(--th-shadow-pop); }
.th .th-fm-tip::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--th-parch); border-left: 1px solid var(--th-parch-line); border-bottom: 1px solid var(--th-parch-line); }
.th .th-fm-tip-k { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-parch-ink-2); }
.th .th-fm-tip-k span { font-weight: 600; letter-spacing: 0.04em; text-transform: none; opacity: 0.85; }
.th .th-fm-tip-body { margin-top: 6px; font-size: 13.5px; line-height: 1.48; }
.th .th-fm-tip-body b { color: #6b3a07; }
.th .th-fm-tip .th-tip-tag { display: inline-block; margin: 0 6px 0 0; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #fff7e6; background: #8a5210; vertical-align: 1px; }
.th .th-fm-tip-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--th-parch-ink-2); }
.th .th-fm-tip-link svg { width: 14px; height: 14px; }
.th .th-fm-tip-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the field: the mode's art behind lit lane plates */
.th .th-fm-stage { grid-column: 2 / -1; grid-row: 1; position: relative; isolation: isolate; display: grid; grid-template-columns: subgrid; grid-template-rows: minmax(0, 1fr); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); background: #17131f; box-shadow: inset 0 -30px 40px rgba(0, 0, 0, 0.28), var(--th-shadow-1); }
.th .th-fm-stage::before { content: ""; position: absolute; inset: -12px; z-index: -2; background: var(--th-fm-art, var(--th-m-art)) center 62% / cover no-repeat; filter: blur(2.5px) saturate(1.1); }
.th .th-fm-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 12, 26, 0.8) 0%, rgba(16, 12, 26, 0.34) 42%, rgba(16, 12, 26, 0.6) 100%), radial-gradient(120% 90% at 50% 125%, rgba(var(--th-m-rgb), 0.34), rgba(var(--th-m-rgb), 0) 62%); }
.th .th-fm-lane { grid-row: 1; align-self: end; position: relative; z-index: 1; height: 86px; margin: 0 8px 12px; border-radius: 16px; transform: skewX(-14deg); background: linear-gradient(180deg, rgba(var(--th-lane), 0.03), rgba(var(--th-lane), 0.26)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 34px); border: 2px solid rgba(var(--th-lane), 0.82); box-shadow: inset 0 -14px 26px rgba(var(--th-lane), 0.22), 0 5px 0 rgba(0, 0, 0, 0.3); }
.th .th-fm-lane-k { grid-row: 1; align-self: start; justify-self: start; position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 25px; margin: 12px 0 0 12px; padding: 0 10px 0 6px; border-radius: 8px; font: 700 12.5px/1 "CookieRun KR", "Outfit", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(12, 9, 24, 0.66); border-bottom: 2px solid rgb(var(--th-lane)); }
.th .th-fm-lane-k img { width: 24px; height: 17px; object-fit: contain; }
.th .th-fm-unit { grid-row: 1; position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 28px; }
.th .th-fm-hero { position: relative; z-index: 2; height: 148px; width: auto; max-width: 118%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
.th .th-fm-unit.is-back { padding-bottom: 46px; }
.th .th-fm-unit.is-back .th-fm-hero { height: 128px; }
.th .th-fm-plat { position: absolute; z-index: 1; left: 50%; bottom: 13px; width: min(128px, 94%); height: 30px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(var(--th-lane), 0.75) 38%, rgba(var(--th-lane), 0.18) 78%, rgba(var(--th-lane), 0) 100%); box-shadow: 0 0 0 2px rgba(var(--th-lane), 0.9), 0 0 22px 4px rgba(var(--th-lane), 0.45); }
.th .th-fm-unit.is-back .th-fm-plat { bottom: 31px; width: min(114px, 86%); height: 27px; }
.th .th-fm-badge { position: absolute; z-index: 3; bottom: 2px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 7px; border-radius: 999px; background: rgba(12, 9, 24, 0.86); border: 1px solid rgba(var(--th-lane), 0.72); }
.th .th-fm-unit.is-back .th-fm-badge { bottom: 20px; }
.th .th-fm-badge img { width: 16px; height: 16px; object-fit: contain; }
.th .th-fm-crown { position: absolute; z-index: 4; top: 46px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 34px; height: 27px; border-radius: 9px; color: #4a2a00; background: linear-gradient(180deg, #ffe58f, #ffb92e); box-shadow: 0 3px 0 #b07410, 0 0 0 3px rgba(18, 12, 38, 0.55); }
.th .th-fm-crown svg { width: 19px; height: 19px; fill: #fff0b8; stroke-width: 2; }
.th .th-fm-unit.is-back .th-fm-crown { top: 58px; }
.th .th-fm-unit-face { display: none; }
.th .th-fm-unit.is-dark-art .th-fm-hero { filter: drop-shadow(0 0 1px rgba(var(--th-el), 0.9)) drop-shadow(0 0 14px rgba(var(--th-el), 0.6)) drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }

/* the strips: one per cookie, under its place on the field, rows aligned
   across the team (subgrid) */
.th .th-fm-strips { grid-column: 2 / -1; grid-row: 2 / span 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin-top: 12px; }
.th .th-fm[data-extras="false"] .th-fm-strips { grid-row: 2 / span 3; }
.th .th-fm-strip { grid-row: 1 / -1; position: relative; display: grid; grid-template-rows: subgrid; row-gap: 11px; min-width: 0; padding: 11px 12px 12px; border-radius: 14px; border: 1px solid var(--th-line-2); border-top: 3px solid rgb(var(--th-lane)); background: linear-gradient(180deg, var(--th-plate-1), var(--th-plate-2)); box-shadow: var(--th-shadow-1); }
.th .th-fm-strip-h { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.th .th-fm-strip-face { display: none; }
.th .th-fm-strip-id { min-width: 0; }
.th .th-fm-name { font-size: 15px; line-height: 1.2; text-shadow: none; }
.th .th-fm-name a { color: var(--th-heading); }
.th .th-fm-name a:hover { color: var(--th-link); text-decoration: underline; text-underline-offset: 3px; }
.th .th-fm-name .th-crown { margin-left: 2px; vertical-align: -2px; }
.th .th-fm-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 5px; font-size: 12px; color: var(--th-ink-3); }
.th .th-fm-sub .th-sep { padding: 0 5px; }
.th .th-fm-cell { min-width: 0; }
.th .th-fm-cell-k { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.th .th-fm-cell--tp .th-recipe { flex-wrap: wrap; row-gap: 8px; }
.th .th-fm-cell--tp .th-recipe-tx { flex: 1 1 120px; }
.th .th-fm-cell--tp .th-recipe-tx span { white-space: normal; }
.th .th-fm-cell--bea .th-bea { align-items: flex-start; }
.th .th-fm-cell--bea .th-bea-line { flex-wrap: wrap; column-gap: 7px; row-gap: 0; }
.th .th-fm-cell--bea .th-bea-name { white-space: normal; }
.th .th-fm-cell--bea .th-gems { margin-top: 6px; }
.th .th-fm-cell--bea .th-gem { height: auto; min-height: 21px; padding-block: 2px; white-space: normal; line-height: 1.2; }
.th .th-fm-cell--x { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--th-line-2); }
.th .th-fm-cell--x.is-empty { justify-content: flex-start; }
.th .th-fm-x .th-label { display: block; margin-bottom: 5px; font-size: 10.5px; }
.th .th-fm-targets .th-ranks li { white-space: normal; }
.th .th-fm-targets .th-ranks small { max-width: none; }
.th .th-fm-alts ul { display: flex; flex-wrap: wrap; gap: 5px; }
.th .th-fm-alts li > a, .th .th-fm-alts li > .th-face { display: inline-flex; }
.th .th-fm-alts a, .th .th-fm-alts li { align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--th-ink); }
.th .th-fm-alts a { padding: 2px 9px 2px 2px; border-radius: 999px; border: 1px solid var(--th-line-2); background: var(--th-surface-3); }
.th .th-fm-alts a:hover { border-color: var(--th-gold-line); }
.th .th-fm-alts .th-face { width: 24px; height: 24px; border-radius: 50%; }
.th .th-fm-note { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--th-ink-2); }
.th .th-fm-note svg { width: 15px; height: 15px; margin-top: 2px; color: var(--th-gold); }
.th .th-fm-note p { white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- formation: plaque above the field ---------- */
/* When the strips would get too narrow beside the plaque, the plaque becomes
   a bar across the top. A wider team (Arcade Arena's 6v6 and 7v7) makes the
   switch at a wider width; the rules are the same three. */
@container th-fm (max-width: 1100px) {
  .th .th-fm .th-fm-in { grid-template-columns: repeat(var(--th-fm-n, 5), minmax(0, 1fr)); grid-template-rows: auto var(--th-fm-stage-h) repeat(4, auto); }
  .th .th-fm .th-fm-kit { grid-column: 1 / -1; grid-row: 1; flex-direction: row; align-items: stretch; gap: 14px; margin-bottom: 12px; padding: 9px 10px; }
  .th .th-fm .th-fm-stage { grid-column: 1 / -1; grid-row: 2; }
  .th .th-fm .th-fm-strips { grid-column: 1 / -1; grid-row: 3 / span 4; }
  .th .th-fm[data-extras="false"] .th-fm-strips { grid-row: 3 / span 3; }
}
@container th-fm (min-width: 1101px) and (max-width: 1400px) {
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-in { grid-template-columns: repeat(var(--th-fm-n, 5), minmax(0, 1fr)); grid-template-rows: auto var(--th-fm-stage-h) repeat(4, auto); }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-kit { grid-column: 1 / -1; grid-row: 1; flex-direction: row; align-items: stretch; gap: 14px; margin-bottom: 12px; padding: 9px 10px; }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-stage { grid-column: 1 / -1; grid-row: 2; }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-strips { grid-column: 1 / -1; grid-row: 3 / span 4; }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"])[data-extras="false"] .th-fm-strips { grid-row: 3 / span 3; }
}
/* the bar's contents, at whichever width it is a bar */
@container th-fm (max-width: 1100px) {
  .th .th-fm .th-fm-lead { flex: none; }
  .th .th-fm .th-fm-trs { flex: 1 1 auto; min-width: 0; }
  .th .th-fm .th-fm-tr-list { flex-direction: row; flex-wrap: wrap; }
  .th .th-fm .th-fm-tr { flex: 1 1 170px; max-width: 280px; }
  .th .th-fm .th-fm-tip { left: 0; top: calc(100% + 10px); width: min(380px, 92cqw); }
  .th .th-fm .th-fm-tip::before { left: 22px; top: -7px; border-left: 1px solid var(--th-parch-line); border-top: 1px solid var(--th-parch-line); border-bottom: 0; }
}
@container th-fm (min-width: 1101px) and (max-width: 1400px) {
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-lead { flex: none; }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-trs { flex: 1 1 auto; min-width: 0; }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-tr-list { flex-direction: row; flex-wrap: wrap; }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-tr { flex: 1 1 170px; max-width: 280px; }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-tip { left: 0; top: calc(100% + 10px); width: min(380px, 92cqw); }
  .th .th-fm:is([data-team-size="6"], [data-team-size="7"]) .th-fm-tip::before { left: 22px; top: -7px; border-left: 1px solid var(--th-parch-line); border-top: 1px solid var(--th-parch-line); border-bottom: 0; }
}
/* a narrower field: smaller art, so a cookie still fits its column */
@container th-fm (max-width: 980px) {
  .th .th-fm { --th-fm-stage-h: 214px; }
  .th .th-fm-hero { height: 132px; }
  .th .th-fm-unit.is-back .th-fm-hero { height: 116px; }
  .th .th-fm-lane-k { margin: 10px 0 0 8px; padding: 0 8px 0 5px; font-size: 11.5px; }
}

/* ---------- formation: the phone ---------- */
/* The field becomes a strip of faces on the three lane plates, the plaque a
   2 x 2 of tiles under it, and each cookie a full-width card with its lane's
   colour down the left edge (round 1's E phone board). */
@container th-fm (max-width: 720px) {
  .th .th-fm .th-fm-in { display: flex; flex-direction: column; gap: 12px; }
  .th .th-fm .th-fm-stage { order: 1; display: grid; grid-template-columns: repeat(var(--th-fm-n, 5), minmax(0, 1fr)); height: 132px; border-radius: 16px; }
  .th .th-fm .th-fm-lane { align-self: stretch; height: auto; margin: 36px 3px 10px; border-radius: 12px; transform: skewX(-10deg); }
  .th .th-fm .th-fm-lane-k { margin: 7px 0 0 6px; height: 21px; padding: 0 7px 0 4px; font-size: 10.5px; gap: 4px; }
  .th .th-fm .th-fm-lane-k img { width: 18px; height: 13px; }
  .th .th-fm .th-fm-hero, .th .th-fm .th-fm-plat, .th .th-fm .th-fm-badge { display: none; }
  .th .th-fm .th-fm-unit, .th .th-fm .th-fm-unit.is-back { justify-content: center; padding: 34px 0 10px; }
  .th .th-fm .th-fm-unit-face { display: inline-grid; width: min(46px, 90%); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--th-lane), 0.95), 0 0 14px rgba(var(--th-lane), 0.5); }
  .th .th-fm .th-fm-unit-face .th-face-img, .th .th-fm .th-fm-unit-face .th-face-crop { border-radius: 50%; }
  .th .th-fm .th-fm-crown, .th .th-fm .th-fm-unit.is-back .th-fm-crown { top: auto; bottom: 4px; width: 24px; height: 19px; border-radius: 7px; }
  .th .th-fm .th-fm-crown svg { width: 14px; height: 14px; }
  .th .th-fm .th-fm-stage { padding-right: 16px; }

  .th .th-fm .th-fm-kit { order: 2; align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .th .th-fm .th-fm-trs, .th .th-fm .th-fm-tr-list { display: contents; }
  .th .th-fm .th-fm-trs > .th-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .th .th-fm .th-fm-lead { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 10px 6px 8px; border-radius: 13px; border: 1px solid var(--th-gold-line); background: var(--th-gold-faint); }
  .th .th-fm .th-fm-lead:not(.is-set) { border-style: dashed; border-color: var(--th-line-3); background: var(--th-wash); }
  .th .th-fm .th-fm-lead > .th-label { padding: 0; font-size: 10px; }
  .th .th-fm .th-fm-lead .th-fm-lead-row, .th .th-fm .th-fm-lead:not(.is-set) .th-fm-lead-row { margin: 2px 0 0; padding: 0; min-height: 0; border: 0; background: none; }
  .th .th-fm .th-fm-lead .th-lead-art { width: 28px; height: 28px; }
  .th .th-fm .th-fm-tr { max-width: none; }
  .th .th-fm .th-fm-tr-sum { min-height: 52px; border: 1px solid var(--th-line-2); background: var(--th-surface-1); }
  .th .th-fm .th-fm-tr:has(details[open]) { grid-column: 1 / -1; }
  .th .th-fm .th-fm-tip { position: relative; left: auto; top: auto; width: auto; margin-top: 10px; }
  .th .th-fm .th-fm-tip::before { left: 26px; top: -7px; border-left: 1px solid var(--th-parch-line); border-top: 1px solid var(--th-parch-line); border-bottom: 0; }

  .th .th-fm .th-fm-strips { order: 3; display: flex; flex-direction: column; gap: 10px; margin: 0; }
  .th .th-fm .th-fm-strip { display: flex; flex-direction: column; gap: 12px; padding: 12px 13px 13px 14px; border-top: 1px solid var(--th-line-2); border-left: 4px solid rgb(var(--th-lane)); }
  .th .th-fm .th-fm-strip-face { display: inline-grid; width: 44px; height: 44px; }
  .th .th-fm .th-fm-strip-h { align-items: center; }
  .th .th-fm .th-fm-name { font-size: 16.5px; }
  .th .th-fm .th-fm-cell-k { position: static; width: auto; height: auto; margin: 0 0 5px; overflow: visible; clip: auto; display: block; font-size: 10.5px; }
  .th .th-fm .th-fm-cell--x.is-empty { display: none; }
}
/* a tablet: the cards two abreast */
@container th-fm (min-width: 560px) and (max-width: 720px) {
  .th .th-fm .th-fm-strips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- light theme ---------- */
/* The field stays dark in both themes: it is the mode's art under a veil, and
   the lane labels and badges are drawn for it. Everything around it
   reads the light tokens. */
:root[data-theme="light"] .th .th-fm-stage { border-color: rgba(60, 30, 110, 0.28); box-shadow: inset 0 -30px 40px rgba(0, 0, 0, 0.28), 0 10px 24px -14px rgba(60, 30, 110, 0.45); }
:root[data-theme="light"] .th .th-fm-kit { box-shadow: 0 2px 0 var(--th-ledge), 0 10px 24px -16px rgba(60, 30, 110, 0.35); }
:root[data-theme="light"] .th .th-fm-strip { box-shadow: 0 2px 0 var(--th-ledge); }
:root[data-theme="light"] .th .th-fm-tip-body b { color: #6b3a07; }
:root[data-theme="light"] .th .th-bp-note-gem { box-shadow: none; }
:root[data-theme="light"] .th .th-bp-video { box-shadow: 0 2px 0 var(--th-ledge); }
:root[data-theme="light"] .th .th-bp-cta { background: rgba(255, 255, 255, 0.6); }
@container th-fm (max-width: 720px) {
  :root[data-theme="light"] .th .th-fm .th-fm-kit { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .th .th-fm-tr-chev svg { transition: none; }
}