/* ──────────────────────────────────────────────────────────────────────
 * wc-streaks.css - design primitives lifted from the live Streaks page
 * at betbuilder.gambling.com/streaks.html. Goal: bring the WC pages into
 * visual parity with the BetBuilderAI product family.
 *
 * Patterns:
 *   .wc-streak-podium       3-tile top-3 row with HUGE skewed Anton numbers,
 *                           photo top-right, name + meta + opponent chip
 *                           below. First tile is gold-gradient + glow; the
 *                           other two are mono-coloured (#34d399 green by
 *                           default, configurable per surface via the
 *                           --wc-streak-podium-tone variable).
 *   .wc-streak-tab-strip    Large display-font tabs with underline accent
 *                           (gold for active, green for "all"). Horizontal-
 *                           scroll on narrow viewports.
 *   .wc-streak-filter-row   Count-badged pill toggles (All/Players/Teams)
 *                           + threshold pill group (1+ / 2+ / 3+) + stat
 *                           dropdown + search + sort. The pill-with-badge
 *                           is the headline pattern.
 *   .wc-streak-row          Data-row primitive: HUGE green Anton number on
 *                           the left, photo, name + small team chip, stat
 *                           icon pill, opponent chip on the right.
 *   .wc-module-tile         Dashboard 2×2 grid tile - small coloured-dot
 *                           eyebrow + HUGE coloured Anton number + name +
 *                           meta line. Photo top-right.
 *   .wc-meta-strip-right    Hero-meta one-liner aligned right: green dot +
 *                           "389 ACTIVE STREAKS · 2025-26 PL" pattern.
 *
 * Tokens defined under body.wc-mode so they cascade onto WC pages only.
 * ──────────────────────────────────────────────────────────────────── */

body.wc-mode {
  /* Streaks palette - green is the active/streak number tone */
  --wc-streak-green:        #34d399;
  --wc-streak-green-soft:   rgba(52, 211, 153, 0.12);
  --wc-streak-green-line:   rgba(52, 211, 153, 0.34);
  --wc-streak-red:          #ef4444;
  --wc-streak-red-soft:     rgba(239, 68, 68, 0.10);
  --wc-streak-red-line:     rgba(239, 68, 68, 0.34);
  --wc-streak-blue:         #4ea1ff;
  --wc-streak-blue-soft:    rgba(78, 161, 255, 0.12);
  --wc-streak-blue-line:    rgba(78, 161, 255, 0.34);
  --wc-streak-tile-bg:      rgba(255, 255, 255, 0.02);
  --wc-streak-tile-border:  rgba(255, 255, 255, 0.06);
  --wc-streak-tile-radius:  18px;
  --wc-streak-number-fs:    clamp(64px, 14vw, 160px);
  --wc-streak-row-fs:       clamp(40px, 7vw, 64px);
}

/* ── Podium 3-tile row ───────────────────────────────────────────────
 * One gold gradient tile + two solid-coloured tiles. Photo top-right of
 * each. Name + meta + opponent chip below the giant number.
 */
body.wc-mode .wc-streak-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 16px);
  margin-top: 16px;
}
@media (max-width: 720px) {
  body.wc-mode .wc-streak-podium { grid-template-columns: 1fr; }
}

body.wc-mode .wc-streak-tile {
  position: relative;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: var(--wc-streak-tile-radius);
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  min-height: clamp(220px, 28vw, 280px);
  display: flex; flex-direction: column;
  gap: clamp(6px, 1vw, 12px);
}
body.wc-mode .wc-streak-tile-rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: 0.02em;
  color: var(--wc-streak-green);
  margin: 0;
}
body.wc-mode .wc-streak-tile:nth-child(1) .wc-streak-tile-rank { color: var(--wc-gold); }

body.wc-mode .wc-streak-tile-photo {
  position: absolute;
  top: clamp(14px, 2.4vw, 22px);
  right: clamp(14px, 2.4vw, 22px);
  width: clamp(48px, 7vw, 64px);
  height: clamp(48px, 7vw, 64px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1a1a1a;
}

body.wc-mode .wc-streak-tile-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--wc-streak-number-fs);
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: var(--wc-streak-green);
  margin: 0;
}
/* First tile: gold gradient that mimics Streaks' #1 visual */
body.wc-mode .wc-streak-tile:nth-child(1) .wc-streak-tile-number {
  background: linear-gradient(180deg, #ff5c6b 0%, #ff2740 55%, #c00d1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 30px rgba(255, 39, 64, 0.18));
}
/* Second + third tiles: solid white-ish so the eye reads "lower rank" */
body.wc-mode .wc-streak-tile:nth-child(2) .wc-streak-tile-number,
body.wc-mode .wc-streak-tile:nth-child(3) .wc-streak-tile-number {
  color: rgba(255, 255, 255, 0.88);
}

body.wc-mode .wc-streak-tile-number-suffix {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 6px;
  display: inline-block;
}

body.wc-mode .wc-streak-tile-name {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
body.wc-mode .wc-streak-tile-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-streak-tile-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  border: 1px solid var(--wc-streak-green-line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.wc-mode .wc-streak-tile-chip-icon { font-size: 13px; }

/* ── Tab strip - large display-font with underline accent ────────────
 * Active gets a gold underline. The "all" tab gets a green underline.
 */
body.wc-mode .wc-streak-tab-strip {
  display: flex;
  gap: clamp(18px, 3.5vw, 36px);
  align-items: end;
  border-bottom: 1px solid var(--border-subtle);
  margin: clamp(20px, 3vw, 32px) 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
body.wc-mode .wc-streak-tab-strip::-webkit-scrollbar { display: none; }
body.wc-mode .wc-streak-tab {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 10px 0 12px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  transition: color 160ms var(--wc-ease-out), border-color 160ms var(--wc-ease-out);
}
body.wc-mode .wc-streak-tab:hover { color: var(--text-primary); }
body.wc-mode .wc-streak-tab.is-all {
  color: var(--wc-streak-green);
  border-bottom-color: var(--wc-streak-green);
}
body.wc-mode .wc-streak-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--wc-gold);
}
body.wc-mode .wc-streak-tab-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 26px;
  background: var(--border-subtle);
  align-self: end;
  margin: 0 6px 12px;
  transform: none;
}

/* ── Filter row - count-badged pills + threshold pills + search + sort */
/* The filter row was a full-width rounded capsule with its own background
 * and border, which made a third framed object on a page that already has
 * two stat bands. It is a toolbar for the table beneath it, so it reads as
 * one now: no capsule, a hairline under it, and it sits directly above the
 * rows it filters. */
body.wc-mode .wc-streak-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0 0 14px;
}
body.wc-mode .wc-streak-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 999px;
}
body.wc-mode .wc-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-streak-pill:hover { color: var(--text-primary); }
body.wc-mode .wc-streak-pill.is-active {
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
}
body.wc-mode .wc-streak-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 7px;
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
body.wc-mode .wc-streak-pill.is-active .wc-streak-pill-badge {
  background: rgba(0, 0, 0, 0.32);
  color: var(--wc-streak-green);
}

/* Mobile: tame the filter row - drop the 999px pill radius (it balloons into a
 * blob once the controls wrap to multiple rows) and give the position pills their
 * own full-width row that scrolls horizontally so the last pill is never clipped. */
@media (max-width: 640px) {
  body.wc-mode .wc-streak-filter-row { padding: 0 2px 10px; gap: 8px; }
  body.wc-mode .wc-streak-pill-group {
    flex: 1 1 100%;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.wc-mode .wc-streak-pill-group::-webkit-scrollbar { display: none; }
  body.wc-mode .wc-streak-pill { flex-shrink: 0; padding: 7px 10px; font-size: 11px; letter-spacing: 0.04em; }
  body.wc-mode .wc-streak-pill-badge { min-width: 20px; padding: 2px 5px; }
}

body.wc-mode .wc-streak-search {
  flex: 1 1 200px;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 40px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 999px;
  color: var(--text-secondary);
}
body.wc-mode .wc-streak-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
}
body.wc-mode .wc-streak-search input::placeholder { color: var(--text-muted); }
body.wc-mode .wc-streak-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-streak-sort select {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 6px 28px 6px 12px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
}

/* ── Row primitive - huge number on the left, photo, name, chips ──── */
body.wc-mode .wc-streak-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}
body.wc-mode .wc-streak-row {
  display: grid;
  grid-template-columns: clamp(70px, 9vw, 110px) auto 1fr auto auto;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  padding: 14px clamp(8px, 1.6vw, 16px);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
body.wc-mode .wc-streak-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--wc-streak-green-line);
  opacity: 0;
  transition: opacity 140ms var(--wc-ease-out);
}
body.wc-mode .wc-streak-row:hover::before { opacity: 1; }
body.wc-mode .wc-streak-row-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--wc-streak-row-fs);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--wc-streak-green);
}
body.wc-mode .wc-streak-row-photo {
  width: clamp(36px, 5vw, 44px);
  height: clamp(36px, 5vw, 44px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #1a1a1a;
}
body.wc-mode .wc-streak-row-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.wc-mode .wc-streak-row-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-streak-row-team-abbr {
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  font-weight: 700;
}
body.wc-mode .wc-streak-row-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
body.wc-mode .wc-streak-row-stat-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--wc-streak-green-soft);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--wc-streak-green);
  font-size: 11px;
  font-weight: 700;
}
body.wc-mode .wc-streak-row-stat-value {
  padding: 1px 6px;
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  border-radius: 3px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
body.wc-mode .wc-streak-row-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-streak-green);
}
body.wc-mode .wc-streak-row-next-logo {
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a1a;
}

@media (max-width: 720px) {
  body.wc-mode .wc-streak-row {
    grid-template-columns: clamp(56px, 14vw, 72px) auto 1fr;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }
  body.wc-mode .wc-streak-row-stat,
  body.wc-mode .wc-streak-row-next {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

/* ── Hero meta right-aligned strip (Streaks pattern) ───────────────── */
/* `display: inline-flex` beats the hidden ATTRIBUTE, so a hidden meta strip
 * stayed on screen. Anything carrying [hidden] means it. */
body.wc-mode .wc-meta-strip-right[hidden] { display: none; }
body.wc-mode .wc-meta-strip-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-meta-strip-right::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wc-streak-green);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}

/* ── Module tile (Dashboard 2×2 grid pattern) ───────────────────────
 * Small coloured-dot eyebrow + huge coloured Anton number + name + meta.
 * Photo top-right. Use modifier classes to set the colour family:
 * .is-tone-red / .is-tone-green / .is-tone-blue / .is-tone-gold.
 */
body.wc-mode .wc-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
}
@media (max-width: 720px) {
  body.wc-mode .wc-module-grid { grid-template-columns: 1fr; }
}
body.wc-mode .wc-module-tile {
  --wc-module-tone:       var(--wc-streak-green);
  --wc-module-tone-soft:  var(--wc-streak-green-soft);
  position: relative;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 12px;
  padding: 14px 18px;
  overflow: hidden;
  min-height: 110px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 4px 14px;
}
body.wc-mode .wc-module-tile.is-tone-red    { --wc-module-tone: var(--wc-streak-red);   --wc-module-tone-soft: var(--wc-streak-red-soft); }
body.wc-mode .wc-module-tile.is-tone-blue   { --wc-module-tone: var(--wc-streak-blue);  --wc-module-tone-soft: var(--wc-streak-blue-soft); }
body.wc-mode .wc-module-tile.is-tone-gold   { --wc-module-tone: var(--wc-gold);         --wc-module-tone-soft: var(--wc-gold-soft); }

body.wc-mode .wc-module-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wc-module-tone);
  grid-column: 1;
}
body.wc-mode .wc-module-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wc-module-tone);
}
body.wc-mode .wc-module-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 6vw, 56px);
  line-height: 0.92;
  color: var(--wc-module-tone);
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
}
body.wc-mode .wc-module-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  grid-column: 1;
}
body.wc-mode .wc-module-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  grid-column: 1;
}
body.wc-mode .wc-module-photo {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #1a1a1a;
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

/* ── Fixture filter banner ("Filter by fixture · pill") ────────────── */
body.wc-mode .wc-fixture-filter-banner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 6px;
}
body.wc-mode .wc-fixture-filter-banner-pill {
  padding: 6px 12px;
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  border: 1px solid var(--wc-streak-green-line);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.10em;
}

/* ── Dashboard 2-column shell (sticky sidebar + main) ──────────────── */
body.wc-mode .wc-dash-shell {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  padding: 0 clamp(16px, 3vw, 64px);
  margin-top: clamp(12px, 2vw, 16px);
}
@media (max-width: 900px) {
  body.wc-mode .wc-dash-shell { grid-template-columns: 1fr; padding: 0 16px; gap: 16px; }
}
body.wc-mode .wc-dash-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;
}
@media (max-width: 900px) {
  body.wc-mode .wc-dash-sidebar { position: relative; top: auto; max-height: none; padding-right: 0; }
}
body.wc-mode .wc-dash-sidebar::-webkit-scrollbar { width: 6px; }
body.wc-mode .wc-dash-sidebar::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }

body.wc-mode .wc-dash-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 10px;
  margin-bottom: 12px;
}
body.wc-mode .wc-dash-sidebar-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex; align-items: baseline; gap: 8px;
}
body.wc-mode .wc-dash-sidebar-date strong { color: var(--text-primary); font-weight: 700; }
body.wc-mode .wc-dash-sidebar-nav { display: inline-flex; gap: 4px; }
body.wc-mode .wc-dash-sidebar-nav button {
  width: 28px; height: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
body.wc-mode .wc-dash-sidebar-nav button:hover { color: var(--wc-gold); border-color: var(--wc-gold-line); }
body.wc-mode .wc-dash-sidebar-nav button:disabled { opacity: 0.3; cursor: not-allowed; }

body.wc-mode .wc-dash-sidebar-group {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
}
body.wc-mode .wc-dash-sidebar-group strong {
  color: var(--wc-gold);
  font-weight: 700;
  letter-spacing: 0.12em;
}
body.wc-mode .wc-dash-sidebar-group-count {
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
}

body.wc-mode .wc-dash-sidebar-fixture {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  transition: background 140ms var(--wc-ease-out);
}
body.wc-mode .wc-dash-sidebar-fixture:hover {
  background: var(--wc-streak-green-soft);
}
body.wc-mode .wc-dash-sidebar-fixture-teams {
  font-weight: 600;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
}
body.wc-mode .wc-dash-sidebar-fixture-vs {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.wc-mode .wc-dash-sidebar-fixture-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
body.wc-mode .wc-dash-sidebar-fixture-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.wc-mode .wc-dash-sidebar-fixture-status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wc-streak-green);
  margin-right: 4px;
  vertical-align: middle;
}
body.wc-mode .wc-dash-sidebar-empty {
  padding: 18px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

/* ── Results ticker - sliding fixture chips across the top ─────────── */
body.wc-mode .wc-ticker {
  position: relative;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  padding: 10px 0;
  margin-bottom: clamp(16px, 3vw, 24px);
}
body.wc-mode .wc-ticker::before,
body.wc-mode .wc-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 64px;
  pointer-events: none;
  z-index: 2;
}
body.wc-mode .wc-ticker::before {
  left: 0;
  background: linear-gradient(90deg, rgba(10, 12, 16, 1), rgba(10, 12, 16, 0));
}
body.wc-mode .wc-ticker::after {
  right: 0;
  background: linear-gradient(270deg, rgba(10, 12, 16, 1), rgba(10, 12, 16, 0));
}
body.wc-mode .wc-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  animation: wcTickerScroll 80s linear infinite;
  animation-play-state: running;
  white-space: nowrap;
  padding-left: 14px;
  will-change: transform;
}
body.wc-mode .wc-ticker:hover .wc-ticker-track,
body.wc-mode .wc-ticker:focus-within .wc-ticker-track {
  animation-play-state: paused;
}
body.wc-mode .wc-ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: border-color 140ms var(--wc-ease-out), background 140ms var(--wc-ease-out);
}
body.wc-mode .wc-ticker-chip:hover {
  border-color: var(--wc-streak-green);
  background: var(--wc-streak-green-soft);
}
body.wc-mode .wc-ticker-chip-meta {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}
body.wc-mode .wc-ticker-chip-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  padding: 0 4px;
}
body.wc-mode .wc-ticker-chip-team {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
}
body.wc-mode .wc-ticker-chip-pen {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
}
@keyframes wcTickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.wc-mode .wc-ticker-track {
    animation: none;
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* ── Ticker drilldown dialog ───────────────────────────────────────── */
body.wc-mode .wc-ticker-dialog {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-base);
  color: var(--text-primary);
  padding: 0;
  width: min(640px, 94vw);
  max-height: 86vh;
  overflow: auto;
  /* Explicit centring: the panel was rendering flush to the top-left in some
     states when it fell back to non-modal [open]. Fixed + margin:auto centres
     it on both axes for the modal and the fallback alike. */
  position: fixed;
  inset: 0;
  margin: auto;
  /* Gold tone for the reused Raw-data metric dropdown (wc-rd-metric-*). */
  --rd-tone: var(--wc-gold);
  --rd-tone-soft: rgba(255, 39, 64, 0.10);
  --rd-tone-line: rgba(255, 39, 64, 0.32);
}
body.wc-mode .wc-ticker-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}
/* Slim sticky bar holding just the close control - the scoreline below
   already identifies the fixture, so the old display-font title is gone. */
body.wc-mode .wc-ticker-dialog-head {
  display: flex; justify-content: flex-end;
  padding: 12px 12px 0;
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(var(--surface-base) 72%, transparent);
}
body.wc-mode .wc-ticker-dialog-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
body.wc-mode .wc-ticker-dialog-close:hover { color: var(--text-primary); border-color: var(--wc-gold); background: rgba(255, 255, 255, 0.06); }
body.wc-mode .wc-ticker-dialog-close svg { width: 13px; height: 13px; }
body.wc-mode .wc-ticker-dialog-body {
  padding: 4px 22px 22px;
}
body.wc-mode .wc-md-loading {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
  padding: 32px 0;
}

/* ── Scoreline header ── */
body.wc-mode .wc-md-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
body.wc-mode .wc-md-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.wc-mode .wc-md-crest {
  width: 40px; height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}
body.wc-mode .wc-md-team-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}
body.wc-mode .wc-md-scoreline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
body.wc-mode .wc-md-goals {
  font-size: 38px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
body.wc-mode .wc-md-sep { color: var(--text-muted); font-size: 24px; }
body.wc-mode .wc-md-meta {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* ── Team totals with home-share bars ── */
body.wc-mode .wc-md-totals {
  margin-top: 18px;
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
body.wc-mode .wc-md-total {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 12px;
}
body.wc-mode .wc-md-total-h,
body.wc-mode .wc-md-total-a {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
}
body.wc-mode .wc-md-total-h { color: var(--wc-gold); text-align: right; }
body.wc-mode .wc-md-total-a { color: var(--wc-streak-green); text-align: left; }
body.wc-mode .wc-md-total-mid { display: grid; gap: 5px; }
body.wc-mode .wc-md-total-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
body.wc-mode .wc-md-total-bar {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--wc-streak-green-soft);
  overflow: hidden;
}
body.wc-mode .wc-md-total-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--wc-gold);
  border-radius: 2px;
}

/* ── Sections + goal timeline ── */
body.wc-mode .wc-md-section { margin-top: 20px; }
body.wc-mode .wc-md-h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: var(--wc-streak-green);
}
body.wc-mode .wc-md-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.wc-mode .wc-md-tl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
}
body.wc-mode .wc-md-tl-item .wc-md-crest { width: 20px; height: 20px; }
body.wc-mode .wc-md-tl-min {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-gold);
  min-width: 34px;
}
body.wc-mode .wc-md-tl-name em { color: var(--text-muted); font-style: normal; font-size: 11px; }
body.wc-mode .wc-md-tl-assist {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: 6px;
}

/* ── Metric switcher - reuses the Raw-data dropdown (.wc-rd-metric-*);
   only the panel-local spacing lives here. ── */
body.wc-mode .wc-md-metric-select { margin-bottom: 12px; }

/* ── Ranked player list ── */
body.wc-mode .wc-md-list { display: grid; gap: 6px; }
body.wc-mode .wc-md-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0;
}
body.wc-mode .wc-md-player {
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 10px;
  background: var(--wc-streak-tile-bg);
  overflow: hidden;
}
body.wc-mode .wc-md-player.is-open { border-color: rgba(255, 255, 255, 0.14); }
body.wc-mode .wc-md-player-row {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr auto 14px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
body.wc-mode .wc-md-player-row .wc-md-crest { width: 22px; height: 22px; }
body.wc-mode .wc-md-player-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
body.wc-mode .wc-md-player-pos {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
body.wc-mode .wc-md-player-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 800;
  color: var(--wc-gold);
}
body.wc-mode .wc-md-player-chev { color: var(--text-muted); display: inline-flex; transition: transform 0.18s; }
body.wc-mode .wc-md-player-chev svg { width: 12px; height: 12px; }
body.wc-mode .wc-md-player.is-open .wc-md-player-chev { transform: rotate(180deg); }

/* ── Expanded player detail ── */
body.wc-mode .wc-md-detail {
  padding: 4px 12px 14px;
  display: grid;
  gap: 12px;
  animation: wcMdDetailIn 0.18s ease;
}
@keyframes wcMdDetailIn { from { transform: translateY(-4px); } to { transform: translateY(0); } }
body.wc-mode .wc-md-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.wc-mode .wc-md-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--wc-streak-tile-border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-md-chip b {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
body.wc-mode .wc-md-chip--min b { color: var(--wc-streak-green); }
body.wc-mode .wc-md-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.wc-mode .wc-md-times-ic { display: inline-flex; color: var(--text-muted); }
body.wc-mode .wc-md-times-ic svg { width: 15px; height: 15px; }
body.wc-mode .wc-md-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-gold);
}
body.wc-mode .wc-md-card-dot {
  width: 8px; height: 11px;
  border-radius: 1.5px;
  display: inline-block;
  background: var(--wc-gold);
}
body.wc-mode .wc-md-time--yel { color: var(--text-secondary); }
body.wc-mode .wc-md-time--yel .wc-md-card-dot { background: var(--wc-gold); }
body.wc-mode .wc-md-time--red .wc-md-card-dot,
body.wc-mode .wc-md-time--sy .wc-md-card-dot { background: var(--wc-streak-red); }
body.wc-mode .wc-md-time--red,
body.wc-mode .wc-md-time--sy { color: var(--wc-streak-red); }

/* ── Featured leaderboard - auto-cycling #1 pull-out + Top 10 list ─── */
body.wc-mode .wc-feature-leaderboard {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.6fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(20px, 3vw, 32px);
}
@media (max-width: 900px) {
  body.wc-mode .wc-feature-leaderboard { grid-template-columns: 1fr; }
}
body.wc-mode .wc-feature-headline {
  position: relative;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: var(--wc-streak-tile-radius);
  padding: clamp(18px, 2.5vw, 28px);
  overflow: hidden;
  min-height: 240px;
  display: flex; flex-direction: column;
  gap: 8px;
}
body.wc-mode .wc-feature-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wc-streak-green);
}
body.wc-mode .wc-feature-eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wc-streak-green);
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.4);
}
body.wc-mode .wc-feature-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--wc-streak-green);
  margin: 4px 0 0;
}
body.wc-mode .wc-feature-name {
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--text-primary);
}
body.wc-mode .wc-feature-meta {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-feature-photo {
  position: absolute;
  top: clamp(16px, 2vw, 22px);
  right: clamp(16px, 2vw, 22px);
  width: clamp(56px, 7vw, 72px);
  height: clamp(56px, 7vw, 72px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #1a1a1a;
}
body.wc-mode .wc-feature-cycle-status {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
body.wc-mode .wc-feature-cycle-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wc-streak-green);
  animation: wcCyclePulse 1.6s ease-in-out infinite;
}
body.wc-mode .wc-feature-cycle-status.is-paused::before { animation: none; opacity: 0.4; }
@keyframes wcCyclePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Featured side: tab strip + top-N rows */
body.wc-mode .wc-feature-side {
  display: flex; flex-direction: column;
  gap: 12px;
}
body.wc-mode .wc-feature-tab-row {
  display: flex; flex-wrap: wrap;
  gap: 6px;
}
body.wc-mode .wc-feature-tab {
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
body.wc-mode .wc-feature-tab.is-active {
  color: var(--wc-streak-green);
  background: var(--wc-streak-green-soft);
}
body.wc-mode .wc-feature-list {
  display: flex; flex-direction: column;
}
body.wc-mode .wc-feature-list .wc-streak-row {
  padding: 10px 8px;
  grid-template-columns: clamp(48px, 6vw, 64px) auto 1fr auto;
}
body.wc-mode .wc-feature-list .wc-streak-row-number {
  font-size: clamp(28px, 4vw, 38px);
}
body.wc-mode .wc-feature-list .wc-streak-row-stat,
body.wc-mode .wc-feature-list .wc-streak-row-next { display: none; }
@media (min-width: 720px) {
  body.wc-mode .wc-feature-list .wc-streak-row-stat { display: inline-flex; }
}

/* ── Quick-nav tool grid + Today's games + categorised sections ───── */
body.wc-mode .wc-quick-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: clamp(16px, 3vw, 24px) 0;
}
body.wc-mode .wc-quick-nav a {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 140ms var(--wc-ease-out), background 140ms var(--wc-ease-out), transform 140ms var(--wc-ease-out);
}
body.wc-mode .wc-quick-nav a:hover {
  border-color: var(--wc-streak-green);
  background: var(--wc-streak-green-soft);
  transform: translateY(-1px);
}
body.wc-mode .wc-quick-nav-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0.02em;
}
body.wc-mode .wc-quick-nav-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Today's games - fixture card with action buttons */
body.wc-mode .wc-fixture-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 18px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 14px;
  margin-bottom: 12px;
}
body.wc-mode .wc-fixture-card-headline {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
body.wc-mode .wc-fixture-card-teams {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
body.wc-mode .wc-fixture-card-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-fixture-card-actions {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: end;
}
body.wc-mode .wc-fixture-action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-fixture-action:hover { border-color: var(--wc-streak-green); color: var(--wc-streak-green); }
body.wc-mode .wc-fixture-action.is-primary {
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  border-color: var(--wc-streak-green-line);
}

/* Categorised tools section - DATA / PICKS split */
body.wc-mode .wc-section-cluster {
  margin-top: clamp(28px, 4vw, 48px);
}
body.wc-mode .wc-section-cluster-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 12px;
}
body.wc-mode .wc-section-cluster-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
}
body.wc-mode .wc-section-cluster-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Player detail panel - heat-mapped stat cards ──────────────────
 * Sits inside `.wc-player-detail` on /wc/squad.html. Each player has
 * 3-5 grouped sections (Attack / Creation / Defence / Discipline /
 * Workload), each rendered as a `.wc-stat-group`. Inside, every
 * `.wc-stat-card` carries an icon + label + skewed Anton value + a
 * comparative rank chip. The tier modifier (.is-elite / .is-strong /
 * .is-mid / .is-weak / .is-poor) paints the background + value colour.
 */
body.wc-mode .wc-stat-group {
  display: grid;
  gap: 10px;
}
body.wc-mode .wc-stat-group + .wc-stat-group {
  margin-top: 16px;
}
body.wc-mode .wc-stat-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-stat-group-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0;
}
body.wc-mode .wc-stat-group-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-stat-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  body.wc-mode .wc-stat-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.wc-mode .wc-stat-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-areas:
    "icon  label"
    "value value"
    "rank  rank";
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px 8px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 140ms var(--wc-ease-out), background 140ms var(--wc-ease-out);
}
body.wc-mode .wc-stat-card-icon {
  grid-area: icon;
  width: 22px; height: 22px;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-stat-card-icon svg { width: 100%; height: 100%; display: block; }
body.wc-mode .wc-stat-card-label {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-stat-card-value {
  grid-area: value;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-top: 2px;
}
body.wc-mode .wc-stat-card-rank {
  grid-area: rank;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
body.wc-mode .wc-stat-card-rank::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}

/* Tier tones. Background sits at ~6-10% alpha so cards stay calm in
 * a grid of 12-20 tiles. Value picks up the same hue. */
body.wc-mode .wc-stat-card.is-elite {
  background: linear-gradient(180deg, rgba(255, 39, 64, 0.10) 0%, rgba(255, 39, 64, 0.04) 100%);
  border-color: rgba(255, 39, 64, 0.34);
}
body.wc-mode .wc-stat-card.is-elite .wc-stat-card-value {
  background: linear-gradient(180deg, #ff5c6b 0%, #ff2740 55%, #c00d1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(255, 39, 64, 0.20));
}
body.wc-mode .wc-stat-card.is-elite .wc-stat-card-icon { color: var(--wc-gold); }
body.wc-mode .wc-stat-card.is-elite .wc-stat-card-rank { color: var(--wc-gold); }

body.wc-mode .wc-stat-card.is-strong {
  background: rgba(52, 211, 153, 0.06);
  border-color: var(--wc-streak-green-line);
}
body.wc-mode .wc-stat-card.is-strong .wc-stat-card-value { color: var(--wc-streak-green); }
body.wc-mode .wc-stat-card.is-strong .wc-stat-card-icon { color: var(--wc-streak-green); }
body.wc-mode .wc-stat-card.is-strong .wc-stat-card-rank { color: var(--wc-streak-green); }

body.wc-mode .wc-stat-card.is-mid {
  /* Default tone - keeps the existing tile-bg/border */
}
body.wc-mode .wc-stat-card.is-mid .wc-stat-card-value { color: var(--text-primary); }

body.wc-mode .wc-stat-card.is-weak {
  background: rgba(255, 165, 0, 0.05);
  border-color: rgba(255, 165, 0, 0.22);
}
body.wc-mode .wc-stat-card.is-weak .wc-stat-card-value { color: #f59e0b; }
body.wc-mode .wc-stat-card.is-weak .wc-stat-card-icon { color: #f59e0b; }
body.wc-mode .wc-stat-card.is-weak .wc-stat-card-rank { color: #f59e0b; }

body.wc-mode .wc-stat-card.is-poor {
  background: var(--wc-streak-red-soft);
  border-color: var(--wc-streak-red-line);
}
body.wc-mode .wc-stat-card.is-poor .wc-stat-card-value { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-card.is-poor .wc-stat-card-icon { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-card.is-poor .wc-stat-card-rank { color: var(--wc-streak-red); }

/* No-rank tiles (e.g. minutes / apps when percentile data unavailable)
 * - keep neutral but still legible */
body.wc-mode .wc-stat-card.is-unranked .wc-stat-card-rank { opacity: 0.55; }

/* Detail-panel head + summary chips */
body.wc-mode .wc-player-detail-head-v2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-player-detail-head-v2 strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: 0.02em;
  display: inline-block;
}
body.wc-mode .wc-player-detail-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}
body.wc-mode .wc-player-detail-chip.is-green {
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  border: 1px solid var(--wc-streak-green-line);
}
body.wc-mode .wc-player-detail-chip.is-blue {
  background: rgba(78, 161, 255, 0.10);
  color: #4ea1ff;
  border: 1px solid rgba(78, 161, 255, 0.28);
}
body.wc-mode .wc-player-detail-chip.is-gold {
  background: var(--wc-gold-soft);
  color: var(--wc-gold);
  border: 1px solid var(--wc-gold-line);
}
body.wc-mode .wc-player-detail-chip.is-amber {
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.28);
}
body.wc-mode .wc-player-detail-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-streak-green);
  text-decoration: none;
}
body.wc-mode .wc-player-detail-link:hover { text-decoration: underline; }

/* ── Slim detail v5 - value chips with hover rank ─────────────────
 * Every stat is visible. Each `.wc-stat-chip` carries an icon + a
 * tiny mono label + the value in Red Hat Mono (not Anton - Anton is
 * reserved for podium / hero / streak moments, not for a 30-stat
 * grid). Tier colour paints the background + value text. Hover any
 * chip and a popover reveals the rank context ("TOP 2 IN GK", "TOP
 * 5% IN ATT"). Grouped per category with a small left-side eyebrow.
 */
body.wc-mode .wc-stat-chip-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}
@media (max-width: 480px) {
  body.wc-mode .wc-stat-chip-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
body.wc-mode .wc-stat-chip-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
body.wc-mode .wc-stat-chip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.wc-mode .wc-stat-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: transform 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
  white-space: nowrap;
  min-height: 30px;
}
body.wc-mode .wc-stat-chip:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }
body.wc-mode .wc-stat-chip:focus-visible {
  outline: 2px solid var(--wc-streak-green);
  outline-offset: 2px;
}
body.wc-mode .wc-stat-chip-icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}
body.wc-mode .wc-stat-chip-icon svg { width: 100%; height: 100%; display: block; }
body.wc-mode .wc-stat-chip-label {
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-stat-chip-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--text-primary);
}
/* Tier tints - subtle backgrounds, value picks up the hue */
body.wc-mode .wc-stat-chip.is-elite {
  background: rgba(255, 39, 64, 0.08);
  border-color: rgba(255, 39, 64, 0.36);
  color: var(--wc-gold);
}
body.wc-mode .wc-stat-chip.is-elite .wc-stat-chip-value,
body.wc-mode .wc-stat-chip.is-elite .wc-stat-chip-label { color: var(--wc-gold); }
body.wc-mode .wc-stat-chip.is-strong {
  background: rgba(52, 211, 153, 0.08);
  border-color: var(--wc-streak-green-line);
  color: var(--wc-streak-green);
}
body.wc-mode .wc-stat-chip.is-strong .wc-stat-chip-value,
body.wc-mode .wc-stat-chip.is-strong .wc-stat-chip-label { color: var(--wc-streak-green); }
body.wc-mode .wc-stat-chip.is-mid {
  /* default token */
}
body.wc-mode .wc-stat-chip.is-weak {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.26);
  color: #f59e0b;
}
body.wc-mode .wc-stat-chip.is-weak .wc-stat-chip-value,
body.wc-mode .wc-stat-chip.is-weak .wc-stat-chip-label { color: #f59e0b; }
body.wc-mode .wc-stat-chip.is-poor {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.28);
  color: var(--wc-streak-red);
}
body.wc-mode .wc-stat-chip.is-poor .wc-stat-chip-value,
body.wc-mode .wc-stat-chip.is-poor .wc-stat-chip-label { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-chip.is-zero {
  opacity: 0.42;
}

/* Hover popover - JUST the rank context. Stat label + value are
 * already on the chip, so the popover just adds the cohort framing. */
body.wc-mode .wc-stat-chip-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-base);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 6px 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--wc-ease-out);
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50);
}
body.wc-mode .wc-stat-chip:hover .wc-stat-chip-pop,
body.wc-mode .wc-stat-chip:focus-visible .wc-stat-chip-pop { opacity: 1; }
body.wc-mode .wc-stat-chip-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.14);
}
body.wc-mode .wc-stat-chip.is-elite .wc-stat-chip-pop { color: var(--wc-gold); }
body.wc-mode .wc-stat-chip.is-strong .wc-stat-chip-pop { color: var(--wc-streak-green); }
body.wc-mode .wc-stat-chip.is-weak .wc-stat-chip-pop { color: #f59e0b; }
body.wc-mode .wc-stat-chip.is-poor .wc-stat-chip-pop { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-chip-pop.is-flip-right { left: auto; right: 0; transform: none; }
body.wc-mode .wc-stat-chip-pop.is-flip-right::after { left: auto; right: 14px; transform: none; }
body.wc-mode .wc-stat-chip-pop.is-flip-left { left: 0; right: auto; transform: none; }
body.wc-mode .wc-stat-chip-pop.is-flip-left::after { left: 14px; right: auto; transform: none; }

/* v9 - Streaks-row per key stat. Each row in the squad detail panel
 * mirrors the production Streaks row shape (big skewed Anton number,
 * stat label, rank pill). Constrained to a curated 4-5 key stats per
 * role; everything else lives on /wc/players/[id]. The full player
 * page is the deep-dive surface - this panel is the highlight reel. */
body.wc-mode .wc-stat-streak-row {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 88px) 1fr auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  padding: 8px clamp(8px, 1.4vw, 14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body.wc-mode .wc-stat-streak-row:last-of-type { border-bottom: 0; }
body.wc-mode .wc-stat-streak-row.is-empty { display: none; }
body.wc-mode .wc-stat-streak-empty {
  padding: 24px 8px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  margin: 0;
}

/* Sort dropdown - single trigger button + popover with stat-icon
 * options. Replaces the older inline row of icon pills (too wide).
 * Built on <details>/<summary> for keyboard accessibility + no
 * extra open/close JS. Mirrors the Streaks page filter pattern. */
body.wc-mode .wc-sort-dropdown {
  position: relative;
}
body.wc-mode .wc-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
  min-height: 38px;
}
body.wc-mode .wc-sort-trigger::-webkit-details-marker { display: none; }
body.wc-mode .wc-sort-trigger:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.18);
}
body.wc-mode .wc-sort-dropdown[open] .wc-sort-trigger {
  background: var(--wc-streak-green-soft);
  border-color: var(--wc-streak-green-line);
  color: var(--wc-streak-green);
}
body.wc-mode .wc-sort-trigger-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}
body.wc-mode .wc-sort-trigger-icon svg {
  width: 100%; height: 100%; display: block;
}
body.wc-mode .wc-sort-trigger-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  gap: 1px;
}
body.wc-mode .wc-sort-trigger-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
body.wc-mode .wc-sort-dropdown[open] .wc-sort-trigger-eyebrow {
  color: var(--wc-streak-green);
  opacity: 0.85;
}
body.wc-mode .wc-sort-trigger-value {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: currentColor;
}
body.wc-mode .wc-sort-trigger-chevron {
  font-size: 11px;
  color: currentColor;
  opacity: 0.7;
  transition: transform 160ms var(--wc-ease-out);
}
body.wc-mode .wc-sort-dropdown[open] .wc-sort-trigger-chevron {
  transform: rotate(-180deg);
}
body.wc-mode .wc-sort-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 6px;
  min-width: 240px;
  background: var(--surface-base);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50);
}
/* View header inside the sort popover. Anchors the Total | Per 90
 * toggle to the stat list it actually filters, so the toggle reads
 * in context rather than floating in the filter row. */
body.wc-mode .wc-sort-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-sort-popover-header-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* On mobile the sort trigger sits on the right of the filter row, so anchor the
 * popover to the trigger's right edge (extends leftward, on-screen) and cap its
 * width to the viewport so the menu can never spill off either edge. */
@media (max-width: 540px) {
  body.wc-mode .wc-sort-popover {
    left: auto;
    right: 0;
    max-width: calc(100vw - 24px);
  }
}

/* Nation sidebar row - flag image left, name fills, confirm-dot
 * right. Replaces the inline-styled markup the old version emitted. */
body.wc-mode .wc-nation-sidebar-link {
  display: grid !important;
  grid-template-columns: 24px 1fr 8px;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  text-decoration: none;
  letter-spacing: 0.04em;
}
body.wc-mode .wc-nation-sidebar-flag {
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 2px;
  display: block;
  flex-shrink: 0;
}
body.wc-mode .wc-nation-sidebar-flag.is-empty {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.05), rgba(2, 87, 255, 0.05));
}
body.wc-mode .wc-nation-sidebar-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-nation-sidebar-link.is-active .wc-nation-sidebar-name {
  color: var(--wc-streak-green);
}
body.wc-mode .wc-nation-sidebar-link.is-active .wc-nation-sidebar-flag {
  border-color: var(--wc-streak-green);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}
body.wc-mode .wc-nation-sidebar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: block;
}
body.wc-mode .wc-nation-sidebar-dot.is-confirmed { background: var(--wc-streak-green); }
body.wc-mode .wc-nation-sidebar-dot.is-pending   { background: rgba(255, 255, 255, 0.18); }

/* ── Squad Leaders strip - sits above the player rows on the squad
 * detail page. One card per category: most cards / fouls committed /
 * fouls won / tackles / saves. Card is a link → player page. */
/* The leaders board, in the same frame as the team stats above it. It was
 * five separate rounded cards with tinted borders, which made two stat
 * bands in two visual languages stacked on one page. One frame, hairline
 * dividers, body font: the club's numbers and the squad's leaders now read
 * as one idea with two rows. */
body.wc-mode .wc-squad-leaders { margin: 0 0 16px; }
body.wc-mode .wc-squad-leaders-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-muted);
  margin: 0 0 8px 2px;
}
body.wc-mode .wc-squad-leaders-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 10px;
  background: var(--wc-streak-tile-bg);
  overflow: hidden;
}
body.wc-mode .wc-squad-leader-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 0;
  border-left: 1px solid var(--wc-streak-tile-border);
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 140ms var(--wc-ease-out);
}
body.wc-mode .wc-squad-leader-card:first-child { border-left: 0; }
body.wc-mode .wc-squad-leader-card:hover { background: rgba(255, 255, 255, 0.035); }
/* The category icon went with the cards: five icons across a single row read
 * as decoration, and the label already says which category it is. */
body.wc-mode .wc-squad-leader-icon { display: none; }
body.wc-mode .wc-squad-leader-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.wc-mode .wc-squad-leader-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-squad-leader-name {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-squad-leader-value {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}
@media (max-width: 1200px) {
  body.wc-mode .wc-squad-leaders-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.wc-mode .wc-squad-leader-card:nth-child(3n + 1) { border-left: 0; }
  body.wc-mode .wc-squad-leader-card:nth-child(n + 4) { border-top: 1px solid var(--wc-streak-tile-border); }
}
@media (max-width: 560px) {
  body.wc-mode .wc-squad-leaders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.wc-mode .wc-squad-leader-card:nth-child(3n + 1) { border-left: 1px solid var(--wc-streak-tile-border); }
  body.wc-mode .wc-squad-leader-card:nth-child(odd) { border-left: 0; }
  body.wc-mode .wc-squad-leader-card:nth-child(n + 3) { border-top: 1px solid var(--wc-streak-tile-border); }
}
/* The tone survives as the VALUE's colour, which is the part that carries
 * meaning at a glance: red for cards, amber for fouls committed, green for
 * the good ones. The tinted card borders went with the cards. */
body.wc-mode .wc-squad-leader-card.is-red   .wc-squad-leader-value { color: #ef4444; }
body.wc-mode .wc-squad-leader-card.is-amber .wc-squad-leader-value { color: #f59e0b; }
body.wc-mode .wc-squad-leader-card.is-green .wc-squad-leader-value { color: var(--wc-streak-green); }
body.wc-mode .wc-squad-leader-card.is-gold  .wc-squad-leader-value { color: var(--wc-gold); }
body.wc-mode .wc-squad-leader-card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
body.wc-mode .wc-squad-leader-card:focus-visible {
  outline: 2px solid var(--wc-streak-green);
  outline-offset: 2px;
}

/* Brief flash on the roster row when a leader card is clicked.
 * Highlights the row the user just sorted to in the list. */
@keyframes wc-row-flash {
  0%   { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.55); background: rgba(52, 211, 153, 0.10); }
  100% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0);    background: transparent; }
}
body.wc-mode .wc-roster-row.is-flash {
  animation: wc-row-flash 1.4s ease-out;
}
body.wc-mode .wc-sort-opt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-sort-opt:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
body.wc-mode .wc-sort-opt.is-active {
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
}
body.wc-mode .wc-sort-opt-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
  flex-shrink: 0;
}
body.wc-mode .wc-sort-opt-icon svg {
  width: 100%; height: 100%; display: block;
}

/* Per-row sort-stat callout - when a sort is active, show the value
 * for that stat above the mins/apps meta on each roster row. */
body.wc-mode .wc-roster-stat {
  display: grid;
  gap: 0;
  text-align: right;
  margin-bottom: 4px;
}
body.wc-mode .wc-roster-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--wc-streak-green);
}
body.wc-mode .wc-roster-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Slim squads-page hero - title + right-aligned count on one row.
 * Replaces the older two-column hero with subtitle paragraph. */
body.wc-mode .wc-hero.wc-squads-hero {
  padding-top: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(16px, 2vw, 24px);
}
body.wc-mode .wc-squads-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
body.wc-mode .wc-squads-hero-row h1 {
  margin: 0;
  flex: 0 1 auto;
}
body.wc-mode .wc-squads-hero-row .wc-meta-strip-right {
  margin: 0;
  flex: 0 0 auto;
}

/* ── Nation rows for /wc/squads.html ──────────────────────────────
 * Softer card-row primitive than .wc-streak-row - drops the huge
 * Anton number on the left, uses the real nation badge image, and
 * gives the row a generous hover state. Pending/unconfirmed rows
 * pick up a small amber chip on the right; confirmed rows stay
 * clean (no count noise). */
body.wc-mode .wc-nation-rows {
  display: grid;
  gap: 6px;
}
body.wc-mode .wc-nation-row {
  display: grid;
  grid-template-columns: clamp(48px, 5.5vw, 64px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: 14px clamp(12px, 1.6vw, 18px);
  background: rgba(255, 255, 255, 0.014);
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--wc-ease-out), border-color 160ms var(--wc-ease-out), transform 160ms var(--wc-ease-out);
}
body.wc-mode .wc-nation-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.10);
}
body.wc-mode .wc-nation-row.is-pending {
  background: rgba(255, 255, 255, 0.008);
  border-color: rgba(255, 255, 255, 0.025);
}
body.wc-mode .wc-nation-row.is-pending:hover {
  background: rgba(255, 255, 255, 0.018);
}
body.wc-mode .wc-nation-row-flag {
  width: clamp(48px, 5.5vw, 64px);
  height: clamp(48px, 5.5vw, 64px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  object-fit: contain;
  padding: 6px;
}
body.wc-mode .wc-nation-row-flag.is-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0;
}
body.wc-mode .wc-nation-row-body {
  display: grid; gap: 4px; min-width: 0;
}
body.wc-mode .wc-nation-row-name {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-nation-row.is-pending .wc-nation-row-name {
  color: var(--text-secondary);
}
body.wc-mode .wc-nation-row-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.wc-mode .wc-nation-row-confed {
  color: var(--text-secondary);
  font-weight: 600;
}
body.wc-mode .wc-nation-row-right {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
}
body.wc-mode .wc-nation-row-coach {
  text-transform: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
body.wc-mode .wc-nation-row-coach-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 11px;
}
body.wc-mode .wc-nation-row-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
body.wc-mode .wc-nation-row-state.is-host {
  background: var(--wc-gold-soft);
  color: var(--wc-gold);
  border: 1px solid var(--wc-gold-line);
}
body.wc-mode .wc-nation-row-state.is-pending {
  background: rgba(245, 158, 11, 0.06);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.22);
}
@media (max-width: 720px) {
  body.wc-mode .wc-nation-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }
  body.wc-mode .wc-nation-row-right {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ── Dashboard shell for WC list pages (squads / players / etc) ──
 * Mirrors the /index.html .db-shell pattern: 260px sticky left
 * sidebar + 1fr main. The site-wide .nav (theme.css, position:fixed)
 * sits above this shell; the sidebar sticks at top:80px so it never
 * scrolls past the nav. On narrow viewports the sidebar drops to a
 * static block above the main. */
body.wc-mode .wc-db-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 80px);
  position: relative;
}
body.wc-mode .wc-db-sidebar {
  position: sticky; top: 80px; height: calc(100vh - 80px);
  overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  /* Match the body's dark-blue hue (rgb 10,12,20), not a greyer tint, so the
     frosted rail reads as the same brand blue as the page behind it. */
  background: rgba(11, 13, 18, 0.62);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}
body.wc-mode .wc-db-sidebar::-webkit-scrollbar { width: 4px; }
body.wc-mode .wc-db-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 2px; }
body.wc-mode .wc-db-sidebar-head {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(10, 11, 15, 0.95);
  backdrop-filter: blur(12px);
}
body.wc-mode .wc-db-sidebar-title {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
body.wc-mode .wc-db-sidebar-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
body.wc-mode .wc-db-sidebar-section {
  padding: 12px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body.wc-mode .wc-db-sidebar-section:last-child { border-bottom: 0; }
body.wc-mode .wc-db-sidebar-section-title {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 12px 8px;
}
body.wc-mode .wc-db-sidebar-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  cursor: pointer;
  background: transparent;
  border-top: 0; border-right: 0; border-bottom: 0;
  width: 100%; text-align: left;
  transition: background 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-db-sidebar-link:hover { background: rgba(255, 255, 255, 0.025); color: var(--text-primary); }
body.wc-mode .wc-db-sidebar-link.is-active {
  background: rgba(52, 211, 153, 0.06);
  border-left-color: var(--wc-streak-green);
  color: var(--wc-streak-green);
}
body.wc-mode .wc-db-sidebar-link-count {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px; border-radius: 4px;
}
body.wc-mode .wc-db-sidebar-link.is-active .wc-db-sidebar-link-count {
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
}
body.wc-mode .wc-db-sidebar-search {
  margin: 4px 12px 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  display: flex; align-items: center;
}
body.wc-mode .wc-db-sidebar-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
}
body.wc-mode .wc-db-sidebar-search input::placeholder { color: var(--text-muted); }

body.wc-mode .wc-db-main {
  /* 72px top clears the fixed BetBuilderAI nav (theme.css positions it
   * at top:0 with ~80px height); the sidebar already docks at top:80px
   * via the sticky rule above. Per-page overrides can still narrow it
   * if a hero is designed to butt up against the nav. */
  padding: 72px clamp(20px, 3vw, 40px) 24px;
  min-width: 0;
  overflow-x: hidden;
}
/* At <=768px the global nav drops into normal flow (theme.css), so the 72px
 * fixed-nav clearance above turns into dead headroom on top of the in-flow
 * nav. Trim it to a modest gap below the nav at those widths. (The match
 * page sets its own !important version of this.) */
@media (max-width: 768px) {
  body.wc-mode .wc-db-main { padding-top: 16px; }
}
/* Heroes inside the dashboard shell already inherit padding from
 * .wc-db-main - drop the wc-pad-x left/right padding the base
 * .wc-hero applies so the hero sits flush with the rest of main. */
body.wc-mode .wc-db-main > .wc-hero {
  padding-left: 0;
  padding-right: 0;
}
/* Reset .wc-hero's default 1.4fr/1fr grid for heroes inside the
 * dashboard shell - each hero (.wc-squads-hero, .wc-squad-hero)
 * brings its own row layout. */
body.wc-mode .wc-db-main > .wc-hero {
  display: block;
}
body.wc-mode .wc-db-main > .wc-hero::before,
body.wc-mode .wc-db-main > .wc-hero::after { content: none; }
/* The shell rail (fixtures / filters / nation-nav) becomes an off-canvas
 * pop-out DRAWER on narrow viewports - opened by a floating button - so it
 * never stacks on top of (or buries) the page's primary content. The FAB +
 * backdrop are injected by /wc/wc-drawer.js (home + match wire an identical
 * drawer inline). Desktop keeps the sticky side rail, so every shell page
 * behaves like the home / match fixtures drawer. */
body.wc-mode .wc-drawer-toggle,
body.wc-mode .wc-drawer-backdrop { display: none; }
@media (max-width: 960px) {
  body.wc-mode .wc-db-shell { grid-template-columns: 1fr; }
  body.wc-mode .wc-db-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(86vw, 300px); height: 100dvh; z-index: 1001;
    transform: translateX(-100%);
    transition: transform 0.28s var(--wc-ease-out);
    border-right: 1px solid rgba(255, 255, 255, 0.10); border-bottom: 0;
    background: var(--surface-base); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); will-change: transform;
  }
  body.wc-mode.wc-drawer-open .wc-db-sidebar { transform: translateX(0); }
  body.wc-mode .wc-drawer-toggle.wc-drawer-toggle--float {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; left: 14px; bottom: 18px; z-index: 1002;
    padding: 11px 16px; border: 1px solid var(--wc-gold-line); border-radius: 999px;
    background: var(--wc-gold); color: #fff;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  body.wc-mode .wc-drawer-toggle svg { width: 15px; height: 15px; }
  body.wc-mode .wc-drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none;
    transition: opacity 0.28s var(--wc-ease-out);
  }
  body.wc-mode.wc-drawer-open .wc-drawer-backdrop { opacity: 1; pointer-events: auto; }
}

/* ── Player-page primitives (wc/player.html) ──────────────────────
 * The deep-dive surface that the squad panel CTA links to. Owns its
 * own hero (photo + name + nation + club + chips), section dividers,
 * dense-grid stat chips, competitions table, hit-rate bars, fitness
 * strip. Reuses .wc-stat-chip, .wc-stat-streak-row from above for
 * the highlight reel + dense grids. */
body.wc-mode .wc-hero.wc-player-hero {
  display: grid;
  grid-template-columns: clamp(120px, 14vw, 160px) 1fr auto;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
}
/* wc-site.css's display:grid otherwise overrides the [hidden]
 * attribute on the hero containers. Restore the expected behaviour. */
body.wc-mode .wc-hero[hidden] { display: none; }
/* wc-site.css forces grid-column:1 on every .wc-hero direct child.
 * Override so auto-placement lays the three children across the
 * three columns. */
body.wc-mode .wc-hero.wc-player-hero > * { grid-column: auto; }
@media (max-width: 720px) {
  body.wc-mode .wc-hero.wc-player-hero {
    grid-template-columns: clamp(96px, 22vw, 120px) 1fr;
    gap: 16px;
  }
  body.wc-mode .wc-player-hero-club-block { display: none; }
}
body.wc-mode .wc-player-hero-photo {
  width: clamp(120px, 14vw, 160px);
  height: clamp(120px, 14vw, 160px);
  border-radius: 50%;
  object-fit: cover;
  background: #1a1a1a;
  border: 2px solid rgba(255, 255, 255, 0.08);
}
body.wc-mode .wc-player-hero-photo.is-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 56px);
  color: var(--wc-streak-green);
  background: var(--wc-streak-green-soft);
  border-color: var(--wc-streak-green-line);
}
body.wc-mode .wc-player-hero-body { display: grid; gap: 8px; min-width: 0; }
/* Eyebrow - Red Hat body font in normal case. Mono was overused.
 * Nation strong (gold/green), role + shirt in muted weight. Middot
 * separator between bits comes from the ::before pseudo so the
 * markup stays clean. */
body.wc-mode .wc-player-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  margin: 0;
  flex-wrap: wrap;
  line-height: 1.4;
}
body.wc-mode .wc-player-hero-eyebrow > span + span::before,
body.wc-mode .wc-player-hero-eyebrow strong + span::before {
  content: '·';
  color: rgba(255, 255, 255, 0.20);
  margin-right: 6px;
}
body.wc-mode .wc-player-hero-eyebrow .wc-player-hero-eyebrow-flag {
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
body.wc-mode .wc-player-hero-eyebrow strong {
  color: var(--wc-streak-green);
  font-weight: 700;
}
/* Meta row - club pill + chips on the same flex row, both vertically
 * centered. Replaces the prior "club pill above, chips below" stack
 * which read as unbalanced. */
body.wc-mode .wc-player-hero-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
body.wc-mode .wc-player-hero-meta-row .wc-player-hero-chips {
  margin-top: 0;
}
body.wc-mode .wc-player-hero-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin: 0;
}
body.wc-mode .wc-player-hero-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
body.wc-mode .wc-player-hero-club-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 12px;
  min-width: 160px;
}
body.wc-mode .wc-player-hero-club-badge {
  width: 56px; height: 56px;
  object-fit: contain;
}
body.wc-mode .wc-player-hero-club-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
body.wc-mode .wc-player-hero-league {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Section divider - used between each top-level player-page block */
body.wc-mode .wc-player-section {
  margin-top: clamp(28px, 4vw, 44px);
}
body.wc-mode .wc-player-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-player-section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
}
body.wc-mode .wc-player-section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Dense stat grid - auto-fit value chips for per-90 / totals dump */
body.wc-mode .wc-dense-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

/* Competitions table - clean dark table with team badge + league name */
body.wc-mode .wc-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}
body.wc-mode .wc-comp-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.wc-mode .wc-comp-table thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
body.wc-mode .wc-comp-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}
body.wc-mode .wc-comp-table tbody td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}
body.wc-mode .wc-comp-table tbody tr:last-child td { border-bottom: 0; }
body.wc-mode .wc-comp-league {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.wc-mode .wc-comp-league-logo {
  width: 18px; height: 18px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}
body.wc-mode .wc-comp-league-name {
  color: var(--text-primary);
  font-weight: 600;
}
/* Campaign band. The competitions table is split by season, and this row both
 * names the campaign and carries its OWN totals, so a season reads as a unit
 * without the reader adding the rows beneath it up. Tinted and mono so it
 * cannot be mistaken for one of the competition rows it heads. */
body.wc-mode .wc-comp-table tbody tr.wc-comp-season td {
  background: rgba(255, 255, 255, 0.035);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 9px;
  padding-bottom: 9px;
  color: var(--text-primary);
}
body.wc-mode .wc-comp-table tbody tr.wc-comp-season:first-child td { border-top: 0; }
body.wc-mode .wc-comp-season-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wc-gold);
}
/* The band's own numbers sit quieter than a competition row's: they are a
 * subtotal, not a stat line to read across. */
body.wc-mode .wc-comp-table tbody tr.wc-comp-season td.num {
  font-size: 12px;
  color: var(--text-secondary);
}
/* Indent the competition rows under their band so the grouping is visible
 * even when the band scrolls out of view on a narrow screen. */
body.wc-mode .wc-comp-table tbody tr.wc-comp-season ~ tr:not(.wc-comp-season) .wc-comp-league {
  padding-left: 10px;
}

/* Hit-rate row - label + visual bar + percent */
body.wc-mode .wc-hit-rate-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
body.wc-mode .wc-hit-rate-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
body.wc-mode .wc-hit-rate-track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
}
body.wc-mode .wc-hit-rate-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--wc-streak-green-soft) 0%, var(--wc-streak-green) 100%);
  border-radius: 999px;
}
body.wc-mode .wc-hit-rate-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--wc-streak-green);
}
body.wc-mode .wc-hit-rate-row.is-empty .wc-hit-rate-value {
  color: var(--text-muted);
  font-weight: 500;
}

/* Fitness flag strip */
body.wc-mode .wc-fitness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
body.wc-mode .wc-fitness-flag {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 10px;
}
body.wc-mode .wc-fitness-flag.is-on {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.30);
}
body.wc-mode .wc-fitness-flag.is-good {
  background: var(--wc-streak-green-soft);
  border-color: var(--wc-streak-green-line);
}
body.wc-mode .wc-fitness-flag-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}
body.wc-mode .wc-fitness-flag.is-on .wc-fitness-flag-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.10); }
body.wc-mode .wc-fitness-flag.is-good .wc-fitness-flag-dot { background: var(--wc-streak-green); box-shadow: 0 0 0 4px rgba(52,211,153,0.10); }
body.wc-mode .wc-fitness-flag-body {
  display: grid; gap: 2px;
}
body.wc-mode .wc-fitness-flag-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-fitness-flag-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Empty section placeholder */
body.wc-mode .wc-player-empty {
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

body.wc-mode .wc-stat-streak-number {
  /* Red Hat Display 800, tabular nums, no skew. Sized for an inline
   * highlight reel - not as dominant as the production Streaks "32"
   * which carries the whole row, since our row also has a stat label
   * + rank pill drawing attention. */
  font-family: var(--font-body);
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  color: var(--wc-streak-green);
  margin: 0;
  white-space: nowrap;
  transform: none;
}
body.wc-mode .wc-stat-streak-row.is-elite .wc-stat-streak-number {
  color: var(--wc-gold);
}
body.wc-mode .wc-stat-streak-row.is-weak .wc-stat-streak-number { color: #f59e0b; }
body.wc-mode .wc-stat-streak-row.is-poor .wc-stat-streak-number { color: var(--wc-streak-red); }

body.wc-mode .wc-stat-streak-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body.wc-mode .wc-stat-streak-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wc-streak-green);
  flex-shrink: 0;
  opacity: 0.8;
}
body.wc-mode .wc-stat-streak-icon svg { width: 100%; height: 100%; display: block; }
body.wc-mode .wc-stat-streak-row.is-elite .wc-stat-streak-icon { color: var(--wc-gold); }
body.wc-mode .wc-stat-streak-row.is-weak .wc-stat-streak-icon { color: #f59e0b; }
body.wc-mode .wc-stat-streak-row.is-poor .wc-stat-streak-icon { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-streak-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
}

/* Rank pill mirrors the Streaks "1+ tackle" pill shape */
body.wc-mode .wc-stat-streak-rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
  border: 1px solid var(--wc-streak-green-line);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.wc-mode .wc-stat-streak-row.is-elite .wc-stat-streak-rank {
  background: var(--wc-gold-soft);
  color: var(--wc-gold);
  border-color: var(--wc-gold-line);
}
body.wc-mode .wc-stat-streak-row.is-mid .wc-stat-streak-rank {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.10);
}
body.wc-mode .wc-stat-streak-row.is-weak .wc-stat-streak-rank {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.28);
}
body.wc-mode .wc-stat-streak-row.is-poor .wc-stat-streak-rank {
  background: var(--wc-streak-red-soft);
  color: var(--wc-streak-red);
  border-color: var(--wc-streak-red-line);
}

/* Phones: tighten the comparison rows in the player accordion so long labels
 * ("Goals conceded", "Shots on target") sit on one line - smaller number column,
 * label + rank pill, so nothing wraps and the panel reads clean. */
@media (max-width: 640px) {
  body.wc-mode .wc-stat-streak-row { grid-template-columns: 40px 1fr auto; gap: 8px; padding: 9px 11px; }
  body.wc-mode .wc-stat-streak-number { font-size: 21px; }
  body.wc-mode .wc-stat-streak-label { font-size: 12px; line-height: 1.2; }
  body.wc-mode .wc-stat-streak-rank { font-size: 8.5px; padding: 4px 7px; gap: 4px; letter-spacing: 0.05em; }
  body.wc-mode .wc-stat-streak-icon { width: 13px; height: 13px; }
  body.wc-mode .wc-stat-streak-meta { gap: 6px; }
}

/* Prominent "open full player page" CTA at the bottom of the panel.
 * Signals that this surface is the highlight reel and the full page
 * is where the deep data lives. */
body.wc-mode .wc-stat-streak-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--wc-streak-green-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--wc-streak-green);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
  width: auto;
  align-self: flex-start;
  justify-self: flex-start;
}
body.wc-mode .wc-stat-streak-cta:hover {
  background: var(--wc-streak-green-soft);
  border-color: var(--wc-streak-green);
}
body.wc-mode .wc-stat-streak-cta-text {
  display: inline-flex; align-items: baseline; gap: 6px;
}
body.wc-mode .wc-stat-streak-cta-title {
  font-size: 11px;
  font-weight: 700;
}
/* Hide the sub-text - the title alone reads cleanly now that
 * the CTA is a slim pill rather than a full-width bordered card. */
body.wc-mode .wc-stat-streak-cta-sub { display: none; }
body.wc-mode .wc-stat-streak-cta-arrow {
  font-size: 14px;
  line-height: 1;
}

/* v8 Hero block - Streaks-pattern focal point. One big Anton number
 * for the player's best-ranked stat, sitting at the top of the
 * panel so the chip rows below can recede into supporting role. */
body.wc-mode .wc-stat-hero-block {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body.wc-mode .wc-stat-hero-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 6vw, 72px);
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: var(--wc-streak-green);
  margin: 0;
  flex-shrink: 0;
}
body.wc-mode .wc-stat-hero-block.is-elite .wc-stat-hero-number {
  background: linear-gradient(180deg, #ff5c6b 0%, #ff2740 55%, #c00d1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 18px rgba(255, 39, 64, 0.20));
}
body.wc-mode .wc-stat-hero-block.is-weak .wc-stat-hero-number { color: #f59e0b; }
body.wc-mode .wc-stat-hero-block.is-poor  .wc-stat-hero-number { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.wc-mode .wc-stat-hero-icon-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--wc-streak-green);
}
body.wc-mode .wc-stat-hero-block.is-elite .wc-stat-hero-icon-row { color: var(--wc-gold); }
body.wc-mode .wc-stat-hero-block.is-weak  .wc-stat-hero-icon-row { color: #f59e0b; }
body.wc-mode .wc-stat-hero-block.is-poor  .wc-stat-hero-icon-row { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-hero-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
body.wc-mode .wc-stat-hero-icon svg { width: 100%; height: 100%; display: block; }
body.wc-mode .wc-stat-hero-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
}
body.wc-mode .wc-stat-hero-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: currentColor;
}

/* v6 Total | Per 90 toggle - CSS-only filter. Container carries
 * .is-view-totals or .is-view-per90; chips have data-period of
 * total / per90 / universal. Universal (Workload) always shows. */
/* "Ranks vs all data" marker in the glance head. Deliberately quiet: it
 * is a scope note, not a warning. */
body.wc-mode .wc-player-rank-scope {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 8px;
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 999px;
  white-space: nowrap;
}
body.wc-mode .wc-player-rank-scope[hidden] { display: none; }

/* ── Player profile: season view bar ───────────────────────────────
 * Sits at the top of the profile and governs every stat section below
 * it. Full-width row of its own rather than a control tucked into one
 * section head, because it changes what the WHOLE page is counting. */
body.wc-mode .wc-player-seasonbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 12px;
}
body.wc-mode .wc-player-seasonbar-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-player-seasonbar-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}
body.wc-mode .wc-player-seasonbar-note[hidden] { display: none; }
/* The season buttons carry a year, so they need a touch more room than
 * the two-word Total / Per 90 toggle they inherit from. */
body.wc-mode .wc-season-toggle button { padding: 5px 14px; }
@media (max-width: 480px) {
  body.wc-mode .wc-player-seasonbar { gap: 8px; padding: 9px 11px; }
  body.wc-mode .wc-season-toggle { width: 100%; justify-content: space-between; }
  body.wc-mode .wc-season-toggle button { flex: 1; padding: 6px 8px; }
}

body.wc-mode .wc-stat-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
body.wc-mode .wc-stat-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  /* Strong custom ease-out - Emil curve. Built-in CSS easings are too
   * weak for press feedback. */
  transition:
    background 180ms cubic-bezier(0.23, 1, 0.32, 1),
    color 180ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
  min-height: 24px;
  will-change: transform;
}
body.wc-mode .wc-stat-toggle button:hover { color: var(--text-primary); }
body.wc-mode .wc-stat-toggle button:active { transform: scale(0.97); }
body.wc-mode .wc-stat-toggle button.is-active {
  background: var(--wc-streak-green-soft);
  color: var(--wc-streak-green);
}

/* Slim bar inside .wc-player-detail - cohort meta on the left,
 * Total | Per 90 toggle on the right. Replaces the old
 * .wc-player-detail-head-v2 which duplicated the roster row. */
body.wc-mode .wc-player-detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body.wc-mode .wc-player-detail-cohort {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-player-detail.is-view-totals .wc-stat-chip[data-period="per90"] { display: none; }
body.wc-mode .wc-player-detail.is-view-per90  .wc-stat-chip[data-period="total"] { display: none; }
/* If toggle filtering empties a row, hide the eyebrow too. */
body.wc-mode .wc-stat-chip-row.is-empty { display: none; }

/* v4 legacy fingerprint - keep selector resolving but unused. */
/* v4 hides the hero row entirely - pips carry the load. The CSS
 * below stays as dead code so any legacy reference still resolves
 * gracefully; the JS no longer emits .wc-stat-hero-row. */
body.wc-mode .wc-stat-hero-row { display: none; }
body.wc-mode .wc-stat-hero-row--legacy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
body.wc-mode .wc-stat-hero {
  padding: 14px 16px 12px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-areas:
    "icon  label"
    "value value"
    "rank  rank";
  gap: 6px 10px;
  overflow: hidden;
}
body.wc-mode .wc-stat-hero .wc-stat-card-icon {
  grid-area: icon;
  width: 24px; height: 24px;
  color: var(--text-muted);
}
body.wc-mode .wc-stat-hero .wc-stat-card-label {
  grid-area: label;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-stat-hero .wc-stat-card-value {
  grid-area: value;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-top: 2px;
}
body.wc-mode .wc-stat-hero .wc-stat-card-rank {
  grid-area: rank;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-stat-hero .wc-stat-card-rank::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.65;
}
/* Apply the same tier tones to heroes (background + colour) */
body.wc-mode .wc-stat-hero.is-elite {
  background: linear-gradient(180deg, rgba(255, 39, 64, 0.10) 0%, rgba(255, 39, 64, 0.04) 100%);
  border-color: rgba(255, 39, 64, 0.34);
}
body.wc-mode .wc-stat-hero.is-elite .wc-stat-card-value {
  background: linear-gradient(180deg, #ff5c6b 0%, #ff2740 55%, #c00d1c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(255, 39, 64, 0.20));
}
body.wc-mode .wc-stat-hero.is-elite .wc-stat-card-icon,
body.wc-mode .wc-stat-hero.is-elite .wc-stat-card-rank { color: var(--wc-gold); }

body.wc-mode .wc-stat-hero.is-strong {
  background: rgba(52, 211, 153, 0.06);
  border-color: var(--wc-streak-green-line);
}
body.wc-mode .wc-stat-hero.is-strong .wc-stat-card-value,
body.wc-mode .wc-stat-hero.is-strong .wc-stat-card-icon,
body.wc-mode .wc-stat-hero.is-strong .wc-stat-card-rank { color: var(--wc-streak-green); }

body.wc-mode .wc-stat-hero.is-weak {
  background: rgba(255, 165, 0, 0.05);
  border-color: rgba(255, 165, 0, 0.22);
}
body.wc-mode .wc-stat-hero.is-weak .wc-stat-card-value,
body.wc-mode .wc-stat-hero.is-weak .wc-stat-card-icon,
body.wc-mode .wc-stat-hero.is-weak .wc-stat-card-rank { color: #f59e0b; }

body.wc-mode .wc-stat-hero.is-poor {
  background: var(--wc-streak-red-soft);
  border-color: var(--wc-streak-red-line);
}
body.wc-mode .wc-stat-hero.is-poor .wc-stat-card-value,
body.wc-mode .wc-stat-hero.is-poor .wc-stat-card-icon,
body.wc-mode .wc-stat-hero.is-poor .wc-stat-card-rank { color: var(--wc-streak-red); }

/* Fingerprint - one continuous flex-wrap strip of every stat as a
 * tier-coloured icon pip. Drop the per-category labels (the icons
 * + the colour are enough). Tighter padding, smaller pips. */
body.wc-mode .wc-stat-fingerprint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-stat-pip {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
  padding: 0;
}
body.wc-mode .wc-stat-pip:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); }
body.wc-mode .wc-stat-pip svg { width: 17px; height: 17px; display: block; }
body.wc-mode .wc-stat-pip.is-elite { background: rgba(255, 39, 64, 0.16); border-color: rgba(255, 39, 64, 0.44); color: var(--wc-gold); }
body.wc-mode .wc-stat-pip.is-strong { background: rgba(52, 211, 153, 0.16); border-color: var(--wc-streak-green-line); color: var(--wc-streak-green); }
body.wc-mode .wc-stat-pip.is-mid { color: rgba(255,255,255,0.55); }
body.wc-mode .wc-stat-pip.is-weak { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.34); color: #f59e0b; }
body.wc-mode .wc-stat-pip.is-poor { background: var(--wc-streak-red-soft); border-color: var(--wc-streak-red-line); color: var(--wc-streak-red); }
body.wc-mode .wc-stat-pip.is-zero { opacity: 0.35; }

/* Pip tooltip - pure CSS, no JS. Sits above the pip with a small
 * caret. Renders the stat name, value, and rank chip on hover. */
body.wc-mode .wc-stat-pip-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-base);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 160px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--wc-ease-out);
  z-index: 50;
  text-align: left;
  display: grid;
  gap: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.50);
}
body.wc-mode .wc-stat-pip:hover .wc-stat-pip-pop,
body.wc-mode .wc-stat-pip:focus-visible .wc-stat-pip-pop {
  opacity: 1;
}
body.wc-mode .wc-stat-pip-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.14);
}
body.wc-mode .wc-stat-pip-pop-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-stat-pip-pop-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  display: inline-block;
}
body.wc-mode .wc-stat-pip.is-elite .wc-stat-pip-pop-value { color: var(--wc-gold); }
body.wc-mode .wc-stat-pip.is-strong .wc-stat-pip-pop-value { color: var(--wc-streak-green); }
body.wc-mode .wc-stat-pip.is-weak .wc-stat-pip-pop-value { color: #f59e0b; }
body.wc-mode .wc-stat-pip.is-poor .wc-stat-pip-pop-value { color: var(--wc-streak-red); }
body.wc-mode .wc-stat-pip-pop-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-stat-pip.is-elite .wc-stat-pip-pop-rank { color: var(--wc-gold); }
body.wc-mode .wc-stat-pip.is-strong .wc-stat-pip-pop-rank { color: var(--wc-streak-green); }
body.wc-mode .wc-stat-pip.is-weak .wc-stat-pip-pop-rank { color: #f59e0b; }
body.wc-mode .wc-stat-pip.is-poor .wc-stat-pip-pop-rank { color: var(--wc-streak-red); }

/* Hover popover near the right edge - flip the tooltip so it doesn't
 * clip outside the panel. JS toggles `.is-flip-right` on touch / focus. */
body.wc-mode .wc-stat-pip-pop.is-flip-right { left: auto; right: 0; transform: none; }
body.wc-mode .wc-stat-pip-pop.is-flip-right::after { left: auto; right: 14px; transform: none; }
body.wc-mode .wc-stat-pip-pop.is-flip-left { left: 0; right: auto; transform: none; }
body.wc-mode .wc-stat-pip-pop.is-flip-left::after { left: 14px; right: auto; transform: none; }

/* ── Player page v2 - dashboard shell + bigger hero + grouped hits ─
 * Wraps /wc/players/[id] in the same .wc-db-shell pattern the squad
 * detail pages use. Sidebar lists the player's nation roster grouped
 * by position; main column gets a left-rail photo hero, a Form
 * sparkline placeholder, grouped hit-rate panels, then the existing
 * dense grids and tables.
 */
body.wc-mode .wc-player-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.wc-mode .wc-player-back-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-player-back-link:hover { color: var(--wc-streak-green); }
body.wc-mode .wc-db-sidebar-section-count {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
body.wc-mode .wc-player-sidebar-roster-link {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 5px 12px;
}
body.wc-mode .wc-player-sidebar-photo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: block;
  flex-shrink: 0;
}
/* Initials fallback dropped from the sidebar roster to free width for the
   name (player photos are gated off by default, so this is the common case).
   Collapse the photo column when the entry has no real photo. */
body.wc-mode .wc-player-sidebar-photo.is-placeholder { display: none; }
body.wc-mode .wc-player-sidebar-roster-link:has(.wc-player-sidebar-photo.is-placeholder) {
  grid-template-columns: 1fr;
}
body.wc-mode .wc-player-sidebar-roster-link.is-active .wc-player-sidebar-photo {
  border-color: var(--wc-streak-green);
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.20);
}
body.wc-mode .wc-player-sidebar-name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-player-sidebar-roster-link.is-active .wc-player-sidebar-name { color: var(--wc-streak-green); }

/* New hero - left-rail photo + body. Bumps the photo to ~3-4x the
 * original size so the player anchors the page. The legacy
 * .wc-player-hero rules above stay in place for any other consumer;
 * .wc-player-hero-v2 overrides only what changes. */
body.wc-mode .wc-hero.wc-player-hero-v2 {
  /* Source headshot is 200x200 native. Cap the rail well under
   * that so the browser only ever downscales - upscaling at any
   * factor blurs the head. 190px max gives a small (~5%) downscale
   * that renders sharper than the 1:1 native. */
  grid-template-columns: clamp(140px, 14vw, 190px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
  /* Push the whole hero block down off the navigation bar so it has
   * breathing room rather than sitting flush. */
  margin-top: clamp(16px, 2vw, 28px);
}
/* Body column inside the hero - vertical-center its content vs the
 * photo rail so name + eyebrow + club + chips read as a single block
 * instead of falling to the rail's bottom edge. */
body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-body {
  align-content: center;
  gap: 10px;
}
/* Stop grid stretch on the inline club pill - without this the
 * pill widens to fill the entire body column instead of hugging
 * "Lyon · LIGUE 1". */
body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-club-inline,
body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-chips {
  justify-self: start;
  max-width: 100%;
}
body.wc-mode .wc-hero.wc-player-hero-v2 > * { grid-column: auto; }
body.wc-mode .wc-player-photo-rail {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 16px;
  overflow: hidden;
}
body.wc-mode .wc-player-photo-v2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  border-radius: 10px;
  /* Keep the image at native pixel density - the browser otherwise
   * smooths a 200x200 source up to 220px with visible blur. Cap the
   * upscale at no more than 10% (handled by the rail clamp) and let
   * the browser's default bicubic do the rest. */
  background: rgba(255, 255, 255, 0.02);
}
body.wc-mode .wc-player-photo-v2.is-placeholder {
  width: 78%;
  height: 78%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 72px);
  color: var(--wc-streak-green);
  background: var(--wc-streak-green-soft);
  border: 1px solid var(--wc-streak-green-line);
  border-radius: 12px;
}
/* Photos compliance-off (the default): drop the avatar rail so the identity
 * block spans the full hero width - the same shape the phone layout already
 * uses. Toggled by the photo flag on the hero (render-player.js SSR +
 * renderHero client). The extra class outranks the 2-column base + tablet
 * rules, so it holds at every breakpoint. */
body.wc-mode .wc-hero.wc-player-hero-v2.is-photoless {
  grid-template-columns: 1fr;
}
body.wc-mode .wc-hero.wc-player-hero-v2.is-photoless .wc-player-photo-rail {
  display: none;
}
body.wc-mode .wc-player-hero-club-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 999px;
  margin-top: 4px;
}
/* The `display: inline-flex` above outspecifies the default [hidden] rule, so
   without this the club block shows as an empty pill when a player has no club
   on record (e.g. a player with only national-team data). */
body.wc-mode .wc-player-hero-club-inline[hidden] { display: none; }
body.wc-mode .wc-player-hero-club-badge-inline {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
body.wc-mode .wc-player-hero-club-inline .wc-player-hero-club-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}
body.wc-mode .wc-player-hero-club-inline .wc-player-hero-league {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-player-hero-club-inline .wc-player-hero-league::before { content: '· '; color: var(--text-muted); }

@media (max-width: 720px) {
  body.wc-mode .wc-hero.wc-player-hero-v2 {
    grid-template-columns: clamp(120px, 30vw, 160px) 1fr;
    gap: 16px;
  }
}

/* Phones: stack the hero as photo | name / country·position / club·league - 
 * reorder the body so the name leads, top-align, and shrink the photo + name so
 * it reads as one tidy block instead of the scattered centred layout. */
@media (max-width: 640px) {
  body.wc-mode .wc-hero.wc-player-hero-v2 {
    /* Drop the initials/photo box on phones - full-width identity block. */
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px 16px;
  }
  body.wc-mode .wc-player-photo-rail { display: none; }
  body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-body { align-content: start; gap: 5px; }
  body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-name { order: 1; font-size: 25px; line-height: 1.04; }
  body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-eyebrow { order: 2; }
  body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-meta-row { order: 3; }
  body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-hero-club-inline { margin-top: 0; padding: 5px 10px; }
}

/* Grouped hit-rate panels */
body.wc-mode .wc-hits-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
body.wc-mode .wc-hits-group {
  padding: 14px 16px 12px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 14px;
}
body.wc-mode .wc-hits-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body.wc-mode .wc-hits-group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
body.wc-mode .wc-hits-group-empty {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-hits-group-rows {
  display: grid;
  gap: 4px;
}
/* The label column inside grouped panels is narrower than the standalone
 * .wc-hit-rate-row used elsewhere - tighten the grid so 1+ markers
 * read cleanly inside a 280px card. */
body.wc-mode .wc-hits-group-rows .wc-hit-rate-row {
  grid-template-columns: 1fr 1fr 50px;
  gap: 10px;
  padding: 5px 0;
}
body.wc-mode .wc-hits-group-rows .wc-hit-rate-label {
  font-size: 12.5px;
}

/* Form sparkline - placeholder rail today, real dots once the
 * per-fixture aggregator lands. Each dot carries a <title> tooltip
 * with opponent + scoreline + minute load. */
body.wc-mode .wc-form-sparkline {
  padding: 14px 16px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 14px;
}
body.wc-mode .wc-form-empty {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
}
body.wc-mode .wc-form-empty-copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
}
body.wc-mode .wc-form-sparkline-svg {
  width: 100%;
  height: 100px;
  display: block;
  color: var(--text-muted);
}
body.wc-mode .wc-form-sparkline-svg.is-placeholder { height: 80px; }
body.wc-mode .wc-form-baseline {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
body.wc-mode .wc-form-dot.is-flat   { fill: rgba(255, 255, 255, 0.18); }
body.wc-mode .wc-form-dot.is-assist { fill: #0257ff; }
body.wc-mode .wc-form-dot.is-goal   { fill: var(--wc-streak-green); }
body.wc-mode .wc-form-dot { cursor: help; transition: r 140ms var(--wc-ease-out); }
body.wc-mode .wc-form-dot:hover { filter: drop-shadow(0 0 6px currentColor); }

/* ── Player page v3 - statpacks-port sections ─────────────────────
 * "Season at a Glance" stat-card grid + "Last 10" opp-logo matrix +
 * "Season Hit Rates" colour bars. All three use a shared c-* tier
 * palette ported from /statpacks.html so the player page reads in
 * the same visual language as the live match-day surface. */

/* Shared cell-tier palette - verbatim from statpacks .pm-cell.c-*
 * but namespaced .wc-pl-tier so the player page can adopt without
 * touching the statpacks surface. Used by both .wc-pl-stat (Season
 * cards), .wc-pl-matrix-cell (Last 10), and .wc-pl-hit (Hit rates).
 */
body.wc-mode .wc-pl-tier-c-bright-green,
body.wc-mode .wc-pl-stat.c-bright-green,
body.wc-mode .wc-pl-matrix-cell.c-bright-green,
body.wc-mode .wc-pl-hit.c-bright-green {
  background: rgba(52, 211, 153, 0.18);
  border-color: rgba(52, 211, 153, 0.35);
  color: #34d399;
}
body.wc-mode .wc-pl-stat.c-green,
body.wc-mode .wc-pl-matrix-cell.c-green,
body.wc-mode .wc-pl-hit.c-green {
  background: rgba(52, 211, 153, 0.10);
  border-color: rgba(52, 211, 153, 0.20);
  color: #34d399;
}
body.wc-mode .wc-pl-stat.c-amber,
body.wc-mode .wc-pl-matrix-cell.c-amber,
body.wc-mode .wc-pl-hit.c-amber {
  background: rgba(255, 182, 39, 0.10);
  border-color: rgba(255, 182, 39, 0.20);
  color: #ffb627;
}
body.wc-mode .wc-pl-stat.c-red,
body.wc-mode .wc-pl-matrix-cell.c-red,
body.wc-mode .wc-pl-hit.c-red {
  background: rgba(255, 61, 87, 0.10);
  border-color: rgba(255, 61, 87, 0.20);
  color: #ff3d57;
}
body.wc-mode .wc-pl-stat.c-low,
body.wc-mode .wc-pl-matrix-cell.c-low,
body.wc-mode .wc-pl-hit.c-low {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
body.wc-mode .wc-pl-stat.c-dim,
body.wc-mode .wc-pl-matrix-cell.c-dim,
body.wc-mode .wc-pl-hit.c-dim {
  background: rgba(107, 114, 128, 0.015);
  border-color: rgba(107, 114, 128, 0.03);
  color: rgba(148, 163, 184, 0.30);
}
body.wc-mode .wc-pl-matrix-cell.c-na {
  background: transparent;
  border: 1px solid rgba(107, 114, 128, 0.04);
  color: rgba(148, 163, 184, 0.18);
}

/* Season at a Glance - compact 3-col card grid. Larger value, soft
 * /90 rate underneath, group label across the top. Wraps to 2 cols
 * around 720px, 1 col on mobile. */
body.wc-mode .wc-pl-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
body.wc-mode .wc-pl-stat {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}
body.wc-mode .wc-pl-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-pl-stat.c-bright-green .wc-pl-stat-label,
body.wc-mode .wc-pl-stat.c-green .wc-pl-stat-label,
body.wc-mode .wc-pl-stat.c-amber .wc-pl-stat-label,
body.wc-mode .wc-pl-stat.c-red .wc-pl-stat-label {
  color: currentColor;
  opacity: 0.70;
}
body.wc-mode .wc-pl-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.0;
}
body.wc-mode .wc-pl-stat.c-bright-green .wc-pl-stat-value,
body.wc-mode .wc-pl-stat.c-green .wc-pl-stat-value,
body.wc-mode .wc-pl-stat.c-amber .wc-pl-stat-value,
body.wc-mode .wc-pl-stat.c-red .wc-pl-stat-value {
  color: currentColor;
}

/* ── Season-at-a-glance rank tooltips ────────────────────────────
 * Each ranked tier card carries a hidden mini-card showing the
 * player's rank vs the position cohort (the same per-90 ranking the
 * heat-map colour reflects). Hover / focus on desktop, tap on mobile
 * (.is-tip-open, toggled in player.html). The rank inherits the
 * card's currentColor so it matches the tier; #1 gets a gold flourish.
 */
body.wc-mode .wc-pl-stat.has-rank { cursor: help; }
body.wc-mode .wc-pl-stat.has-rank::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
body.wc-mode .wc-pl-stat.has-rank:hover::after,
body.wc-mode .wc-pl-stat.has-rank:focus-within::after,
body.wc-mode .wc-pl-stat.has-rank.is-tip-open::after { opacity: 0.7; }

body.wc-mode .wc-pl-stat-tip {
  position: absolute;
  /* Anchored to the card (left:0;right:0) at every width so the tip is
   * exactly as wide as its card and can never clip off-screen - the
   * card is always on-screen. */
  left: 0;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 60;
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 0;
  padding: 10px 14px 12px;
  border-radius: 12px;
  /* Was #0c1322, a cast of twenty-two - the bluest surface in the sheets, and
     it floats over a de-blued card. Rides the shared elevated step instead. */
  background: var(--surface-elevated);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.75);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
body.wc-mode .wc-pl-stat-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--surface-elevated);
}
body.wc-mode .wc-pl-stat.has-rank:hover .wc-pl-stat-tip,
body.wc-mode .wc-pl-stat.has-rank:focus-within .wc-pl-stat-tip,
body.wc-mode .wc-pl-stat.has-rank.is-tip-open .wc-pl-stat-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body.wc-mode .wc-pl-stat-tip-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-pl-stat-tip-rank {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: currentColor;
}
body.wc-mode .wc-pl-stat-tip-cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--text-primary);
  opacity: 0.72;
}
body.wc-mode .wc-pl-stat-tip.is-top .wc-pl-stat-tip-rank { color: #ff2740; }
body.wc-mode .wc-pl-stat-tip.is-top .wc-pl-stat-tip-cap { color: #ff2740; opacity: 0.9; }

@media (max-width: 640px) {
  body.wc-mode .wc-pl-stat-tip { padding: 9px 12px 11px; }
  body.wc-mode .wc-pl-stat-tip-rank { font-size: 24px; }
}
body.wc-mode .wc-pl-stat-rate {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 1px;
}
/* Workload variant - Appearances + Minutes. No cohort tier, slightly
 * more compact, and gets a subtle "neutral context" treatment so it
 * doesn't compete with the heat-tinted performance cards. */
body.wc-mode .wc-pl-stat.is-workload {
  background: rgba(255, 255, 255, 0.015);
  border-color: rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-pl-stat.is-workload .wc-pl-stat-value { color: var(--text-primary); }

/* Section head accommodates an optional inline toggle to the right of
 * the meta. Keep the title hard-left, meta + toggle pushed right. */
body.wc-mode .wc-player-section-head {
  flex-wrap: wrap;
}
body.wc-mode .wc-player-section-head .wc-stat-toggle {
  margin-left: auto;
}

/* Last 10 matrix - opp-logo header + mins row + per-stat rows. The
 * .wc-pl-matrix-wrap permits horizontal scroll on narrow viewports
 * so the table never collapses or wraps. */
body.wc-mode .wc-pl-matrix-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.wc-mode .wc-pl-empty-note {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 60ch;
}
body.wc-mode .wc-pl-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px 4px;
  table-layout: fixed;
  min-width: 540px;
  /* theme.css turns EVERY table into `display: block; white-space: nowrap`
   * under 768px to give plain content tables a horizontal scroll. That kills
   * `table-layout: fixed` here: the block box still honours min-width, but the
   * columns inside collapse to their content, so the grid used ~240px of a
   * 470px box and the wrap scrolled into empty space. This table brings its
   * own scroller (.wc-pl-matrix-wrap), so opt out and stay a real table at
   * every width. */
  display: table;
  white-space: normal;
}
body.wc-mode .wc-pl-matrix th,
body.wc-mode .wc-pl-matrix td { padding: 0; }
body.wc-mode .wc-pl-matrix-opp {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-bottom: 6px;
}
body.wc-mode .wc-pl-matrix-opp.is-placeholder { color: rgba(148, 163, 184, 0.18); }
/* Column date. The ten-game window is a RECENCY window and spans the season
 * boundary, so a crest plus three letters is not enough to identify a game:
 * two fixtures against the same club a season apart look identical without
 * this. Sits under the opponent code, quieter than it, tabular so the dates
 * line up down the row. */
body.wc-mode .wc-pl-matrix-date {
  display: block;
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.55);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* First column of an older campaign: mark where the season changes so the
 * boundary is visible in the grid, not just inferable from the dates. */
body.wc-mode .wc-pl-matrix-opp.is-season-break {
  border-left: 1px solid rgba(148, 163, 184, 0.28);
}
body.wc-mode .wc-pl-matrix-opp.is-season-break .wc-pl-matrix-date {
  color: rgba(148, 163, 184, 0.85);
}
body.wc-mode .wc-pl-matrix-logo {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 3px;
  object-fit: contain;
}
body.wc-mode .wc-pl-matrix-rl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding-left: 4px;
  white-space: nowrap;
  width: 88px;
}
body.wc-mode .wc-pl-matrix-cell {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.wc-mode .wc-pl-matrix-mins {
  width: 100%;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
body.wc-mode .wc-pl-matrix-mins.is-partial { color: #ffb627; }
body.wc-mode .wc-pl-matrix-mins.is-full    { color: var(--text-primary); }
body.wc-mode .wc-pl-matrix-mins.is-zero    { color: rgba(148, 163, 184, 0.30); }
body.wc-mode .wc-pl-matrix-mins.is-empty   { color: rgba(148, 163, 184, 0.18); }

/* Mobile: keep the Last-10 cells readable and let the wrap do its job:
 * the matrix holds a comfortable minimum width (labels 60px + ten ~38px
 * game columns) and scrolls horizontally inside .wc-pl-matrix-wrap on
 * anything narrower. Squeezing all ten columns into a 360-430px viewport
 * (the old min-width: 0 override) crushed the chips and let the mins row
 * collide with itself on real phones. */
@media (max-width: 640px) {
  /* Keep the desktop fill-and-scroll model (width:100% + table-layout:fixed
   * from the base rule): the table always grows to fill its container, and the
   * ten game columns share the space evenly. Only a mobile-sized min-width
   * floor is lowered here (smaller label + tighter fonts) so the table stops
   * shrinking and scrolls once the columns would get cramped, instead of
   * sizing to its content and leaving empty space on the right between ~460px
   * and 640px. */
  body.wc-mode .wc-pl-matrix { min-width: 470px; border-spacing: 2px 4px; }
  body.wc-mode .wc-pl-matrix-rl { width: 60px; font-size: 9px; padding-left: 2px; }
  body.wc-mode .wc-pl-matrix-opp { font-size: 8.5px; }
  body.wc-mode .wc-pl-matrix-date { font-size: 7.5px; margin-top: 1px; }
  body.wc-mode .wc-pl-matrix-logo { width: 18px; height: 18px; }
  body.wc-mode .wc-pl-matrix-cell { font-size: 11px; }
  /* Right-edge fade signals there is more to swipe. */
  body.wc-mode .wc-pl-matrix-wrap {
    -webkit-mask-image: linear-gradient(90deg, #000 94%, rgba(0,0,0,0.3));
            mask-image: linear-gradient(90deg, #000 94%, rgba(0,0,0,0.3));
  }
}

/* Season hit-rate rows - same colour palette, single bar per row,
 * left label / track / right percent. Tier driven by the percentage
 * threshold (see hitTierClass in player.html). */
body.wc-mode .wc-pl-hits-grid {
  display: grid;
  gap: 6px;
}
body.wc-mode .wc-pl-hit {
  display: grid;
  grid-template-columns: 22px 170px 1fr 56px;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
}
body.wc-mode .wc-pl-hit-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.85;
}
body.wc-mode .wc-pl-hit-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
body.wc-mode .wc-pl-hit.c-na {
  background: rgba(107, 114, 128, 0.02);
  border-color: rgba(107, 114, 128, 0.05);
  color: rgba(148, 163, 184, 0.40);
}
body.wc-mode .wc-pl-hit-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
}
body.wc-mode .wc-pl-hit.c-bright-green .wc-pl-hit-label,
body.wc-mode .wc-pl-hit.c-green        .wc-pl-hit-label,
body.wc-mode .wc-pl-hit.c-amber        .wc-pl-hit-label,
body.wc-mode .wc-pl-hit.c-red          .wc-pl-hit-label { color: currentColor; }
body.wc-mode .wc-pl-hit.c-na           .wc-pl-hit-label { color: rgba(148, 163, 184, 0.55); }
body.wc-mode .wc-pl-hit-track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
}
body.wc-mode .wc-pl-hit-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: currentColor;
  opacity: 0.55;
  border-radius: 999px;
}
body.wc-mode .wc-pl-hit-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: currentColor;
}
body.wc-mode .wc-pl-hit.is-empty .wc-pl-hit-value { color: rgba(148, 163, 184, 0.40); font-weight: 500; }
@media (max-width: 560px) {
  body.wc-mode .wc-pl-hit { grid-template-columns: 20px 1fr 1.2fr 44px; gap: 8px; padding: 8px 10px; }
  body.wc-mode .wc-pl-hit-label { font-size: 12px; }
  body.wc-mode .wc-pl-hit-icon { width: 16px; height: 16px; }
}

/* ── FAQ block: shared by match pages and player pages ────────────────────
 * MOVED HERE FROM wc-match.css, 2026-09-28. Player pages do not load that
 * stylesheet, so the player FAQ rendered completely unstyled - the same
 * class of surprise as the leagues CSS living inline in index.html. Both
 * pages load this file, and match.html loads it BEFORE wc-match.css, so
 * nothing about the match page's cascade changes.
 * The selectors keep their wc-match-faq names: the markup is shared too,
 * and renaming it would touch both generators for no gain. */
/* ── FAQ block (render-match.js + lg-match-faq.js) ─────────────────────────
 * The page had nine H2s, all generic market labels identical across 236
 * fixtures, and almost no prose. This is where the questions people type
 * alongside a fixture get answered and where the tool's USPs get stated.
 *
 * <details> rather than a JS toggle: the answers stay in the HTML whether
 * open or shut, so a crawler reads all of it, and it is keyboard accessible
 * for free. Collapsed by default because six open blocks at the foot of a
 * dossier this long is clutter. */
body.wc-mode .wc-match-faq {
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.wc-mode .wc-match-faq-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin: 0 0 6px;
  text-wrap: balance;
}
body.wc-mode .wc-match-faq-q { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
body.wc-mode .wc-match-faq-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 4px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  transition: background .14s ease;
}
body.wc-mode .wc-match-faq-q > summary::-webkit-details-marker { display: none; }
body.wc-mode .wc-match-faq-q > summary:hover { background: rgba(255, 255, 255, 0.03); }
body.wc-mode .wc-match-faq-q > summary h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
  transition: color .14s ease;
}
body.wc-mode .wc-match-faq-q[open] > summary h3,
body.wc-mode .wc-match-faq-q > summary:hover h3 { color: var(--text-primary); }
body.wc-mode .wc-match-faq-q > summary:focus-visible {
  outline: 2px solid var(--wc-gold, #ff2740);
  outline-offset: 2px;
}
/* Chevron, drawn in CSS so there is no icon dependency. */
body.wc-mode .wc-match-faq-q > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease, border-color .14s ease;
}
body.wc-mode .wc-match-faq-q[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--wc-gold, #ff2740);
}
body.wc-mode .wc-match-faq-a { padding: 0 4px 20px; }
body.wc-mode .wc-match-faq-p {
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
  max-width: 74ch;
}
body.wc-mode .wc-match-faq-a .wc-match-faq-p + .wc-match-faq-p { margin-top: 14px; }
body.wc-mode .wc-match-faq-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 78ch;
}
body.wc-mode .wc-match-faq-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
body.wc-mode .wc-match-faq-list li strong { color: var(--text-secondary); font-weight: 700; }
body.wc-mode .wc-match-faq-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wc-gold, #ff2740);
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  body.wc-mode .wc-match-faq-q > summary::after { transition: none; }
}

/* ── Next fixtures: the hero's right column ──────────────────────────────
 * Josh, 2026-09-28: stacked cards on the right of the hero, not a row of
 * chips under it. Three rounded cards in a column, each one crest, club,
 * date and H/A, sized so the column sits beside the club name rather than
 * competing with it. */
body.wc-mode .wc-club-fixtures {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 232px;
}
body.wc-mode .wc-club-fixtures-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}
body.wc-mode .wc-club-fixture {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  text-decoration: none;
  color: inherit;
  transition: background 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-club-fixture:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--rd-tone-line, rgba(255, 255, 255, 0.18));
}
body.wc-mode .wc-club-fixture-crest { width: 22px; height: 22px; object-fit: contain; }
body.wc-mode .wc-club-fixture-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.wc-mode .wc-club-fixture-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-club-fixture-when {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
body.wc-mode .wc-club-fixture-venue {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  body.wc-mode .wc-club-fixtures { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.wc-mode .wc-club-fixture { transition: none; }
}

/* ── Page sections ───────────────────────────────────────────────────────
 * Josh's sketch: hero, then TEAM STATS with its own filter, then PLAYER
 * STATS with its own, then the FAQ, each separated by a rule. The header is
 * a title on the left and that section's controls on the right, and it
 * wraps rather than crushing when the controls are wide. */
body.wc-mode .wc-club-section {
  border-top: 1px solid var(--wc-streak-tile-border);
  padding-top: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(14px, 1.8vw, 20px);
}
body.wc-mode .wc-club-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
body.wc-mode .wc-club-section-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}
/* A section's controls sit on the title's line and take the room they need,
 * wrapping under it when they cannot. The player section's bar is long: a
 * season toggle, five position pills, a search field and a sort menu. */
/* The toolbar takes the whole second line of the header: at 1440px with the
 * fixed sidebar there is ~1100px for a title plus a 990px bar, so forcing
 * them onto one line only pushed the sort menu into a ragged second row.
 * Two tidy rows beat one crowded one. */
body.wc-mode .wc-club-section-head > .wc-streak-filter-row {
  flex: 1 1 100%;
  justify-content: flex-start;
  margin: 2px 0 0;
}
/* The search grows to fill whatever is left by default, which pushed the
 * sort menu onto a second line inside the bar and left the title floating
 * against it. On a section header it takes what it needs and no more. */
body.wc-mode .wc-club-section-head > .wc-streak-filter-row .wc-streak-search {
  flex: 1 1 200px;
  min-width: 140px;
}
/* The sort menu to the far right of that line, away from the pills. */
body.wc-mode .wc-club-section-head > .wc-streak-filter-row #sort-dropdown { margin-left: auto; }


body.wc-mode .wc-club-section-sub {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 6px;
}

/* ── Team stats on a club page ────────────────────────────────────────────
 * ONE ROW IN ONE FRAME, not nine rounded cards (Josh, 2026-09-28: "less
 * rounded boxes here, more like stats in a one row grid"). The cells are
 * divided by hairlines inside a single 10px-radius frame, so the numbers
 * read as one set of facts about the club.
 *
 * Red Hat throughout, mono nowhere: the mono face is this site's label
 * voice and at nine cells in a row it turned the panel into furniture. */
body.wc-mode .wc-club-form { margin: 0; }

body.wc-mode .wc-club-form-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 10px;
  background: var(--wc-streak-tile-bg);
  overflow: hidden;
}
body.wc-mode .wc-club-form-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border-left: 1px solid var(--wc-streak-tile-border);
}
body.wc-mode .wc-club-form-tile:first-child { border-left: 0; }
body.wc-mode .wc-club-form-tile.is-empty { opacity: 0.45; }
body.wc-mode .wc-club-form-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wc-mode .wc-club-form-value {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}

/* Nine across needs about 90px a cell, and the fixed sidebar takes ~300px
 * before the content column starts: measured at 1000px the cells were 47px
 * and "Conceded" and "On target" both clipped. So the wrap point is the
 * viewport width where the content column can still hold nine, not where
 * the viewport alone could. */
@media (max-width: 1200px) {
  body.wc-mode .wc-club-form-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.wc-mode .wc-club-form-tile:nth-child(5n + 1) { border-left: 0; }
  body.wc-mode .wc-club-form-tile:nth-child(n + 6) { border-top: 1px solid var(--wc-streak-tile-border); }
}
@media (max-width: 560px) {
  body.wc-mode .wc-club-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.wc-mode .wc-club-form-tile { padding: 9px 11px; }
  body.wc-mode .wc-club-form-tile:nth-child(5n + 1) { border-left: 1px solid var(--wc-streak-tile-border); }
  body.wc-mode .wc-club-form-tile:nth-child(3n + 1) { border-left: 0; }
  body.wc-mode .wc-club-form-tile:nth-child(n + 4) { border-top: 1px solid var(--wc-streak-tile-border); }
  body.wc-mode .wc-club-form-value { font-size: 16px; }
}