/* nfl-hub.css - hub layout classes extracted from leagues/index.html.
 *
 * Those classes (.wc-home-section-*, .wc-today-*, .wc-groups-*, .wc-rd, the
 * hub nav) are defined in a 45KB INLINE <style> block inside
 * leagues/index.html, not in any shared stylesheet. Using the names without
 * the rules is what left the first NFL hub rendering as run-on text.
 *
 * Extracted verbatim rather than reimplemented, so the two hubs stay visually
 * identical, and copied rather than moved so leagues/index.html is untouched
 * and carries zero risk. If these are ever promoted to a shared sheet, delete
 * this file and load that instead.
 */

/* ── Top nav launcher ──────────────────────────────────────────── */
    body.wc-mode .wc-home-accent { color: var(--wc-gold); display: inline-block; }
body.wc-mode .wc-home-nav { margin: clamp(20px, 3vw, 38px) 0 clamp(22px, 3.2vw, 40px); }
body.wc-mode .wc-home-nav-title {
      font-family: var(--font-body);       /* Red Hat Display */
      font-weight: 800;                     /* ExtraBold */
      font-size: clamp(34px, 10.5vw, 54px);
      line-height: 1.02;
      letter-spacing: -0.02em;              /* -20 Illustrator tracking */
      text-transform: none;                 /* sentence case (override base h1) */
      transform: none;                      /* drop the Anton skew (override base h1) */
      color: var(--text-primary);
      margin: 0 0 clamp(8px, 1.2vw, 12px);
    }
/* Brand-red accent - tight core glow + faint halo reads deep, not neon. */
    body.wc-mode .wc-home-nav-title .wc-home-accent {
      color: #ff2740;
      text-shadow: 0 0 9px rgba(255, 39, 64, 0.26), 0 0 22px rgba(255, 39, 64, 0.10);
    }
/* Sub-line under the hero; the arrow bobs to invite the scroll to the tools below. */
    body.wc-mode .wc-home-nav-sub {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: clamp(14px, 1.5vw, 17px);
      letter-spacing: -0.005em;
      color: var(--text-secondary);
      margin: 0 0 clamp(16px, 2.2vw, 24px);
    }
body.wc-mode .wc-home-nav-sub-arrow {
      width: 1.05em; height: 1.05em; flex-shrink: 0;
      color: var(--text-secondary);         /* greyed out, not accent */
      animation: wc-home-sub-bob 1.8s ease-in-out infinite;
    }
@media (prefers-reduced-motion: reduce) {
      body.wc-mode .wc-home-nav-sub-arrow { animation: none; }
    }
body.wc-mode .wc-home-nav-row {
      display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: clamp(11px, 1.3vw, 15px);
    }
/* Streaks-style squads/players search beside the slider. */
    body.wc-mode .wc-home-search-wrap { position: relative; flex: 0 1 300px; min-width: 200px; }
body.wc-mode .wc-home-search {
      display: flex; align-items: center; gap: 8px; padding: 8px 14px;
      background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px;
      transition: border-color 0.2s var(--wc-ease-out), box-shadow 0.2s var(--wc-ease-out); cursor: text;
    }
body.wc-mode .wc-home-search:focus-within { border-color: var(--wc-gold-line); box-shadow: 0 0 0 3px var(--wc-gold-soft); }
body.wc-mode .wc-home-search svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
body.wc-mode .wc-home-search input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-family: var(--font-body); font-size: 13px; min-width: 0; }
body.wc-mode .wc-home-search input::placeholder { color: rgba(255, 255, 255, 0.3); }
body.wc-mode .wc-home-search-results {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
      background: #111318; border: 1px solid var(--wc-streak-tile-border); border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); max-height: 320px; overflow-y: auto; padding: 4px;
      animation: rdMenuIn 160ms var(--wc-ease-out);
    }
body.wc-mode .wc-home-search-results[hidden] { display: none; }
body.wc-mode .wc-home-search-group { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 3px; margin: 0; }
body.wc-mode .wc-home-search-result {
      display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px;
      padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--text-secondary);
    }
body.wc-mode .wc-home-search-result:hover, body.wc-mode .wc-home-search-result.is-active { background: rgba(255, 255, 255, 0.05); }
body.wc-mode .wc-home-search-empty { padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); }
@media (max-width: 720px) { body.wc-mode .wc-home-search-wrap { margin-left: 0; flex-basis: 100%; } }
/* ── Section rhythm ────────────────────────────────────────────── */
    body.wc-mode .wc-home-section { margin-top: clamp(28px, 4vw, 48px); }
body.wc-mode .wc-home-section-head {
      display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
body.wc-mode .wc-home-section-title {
      font-family: var(--font-body);        /* Red Hat Display, match the hero */
      font-weight: 800;                      /* ExtraBold */
      font-size: clamp(20px, 2.6vw, 28px);
      letter-spacing: -0.01em;
      text-transform: none;                  /* sentence case */
      transform: none;                       /* no skew */
      margin: 0;
      color: var(--text-primary);
    }
body.wc-mode .wc-home-section-meta {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
body.wc-mode .wc-empty-row {
      padding: 22px 16px;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      text-align: center;
      border: 1px dashed rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      margin: 0;
    }
/* ── Today's games cards ───────────────────────────────────────── */
    body.wc-mode .wc-today-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
      gap: 12px;
    }
body.wc-mode .wc-today-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: clamp(14px, 2vw, 22px);
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 14px;
      padding: 16px 18px;
      align-self: start;
    }
@media (max-width: 560px) { body.wc-mode .wc-today-card { grid-template-columns: 1fr; } }
/* The 560 above was the right number on the wrong axis.
   A card splits into `info + 22px gap + 1.05 x info`, so its info column only
   reaches the ~260px that a FINISHED game's team row needs (crest, name,
   record, score, three gaps) once the card itself is about 555px wide. The rule
   above measured the VIEWPORT instead, so it never fired on a desktop, where
   two-up and three-up make cards 517-545px: "New England Patriots" was being
   truncated to "New England Patri…" at 1440 (by 26px), 1920 (35px) and 2560
   (25px), and going two-up on an iPad in landscape brought the same 506px card
   and the same cut.

   A card cannot ask about its own width in a media query, so this asks about
   the card: container-type makes each one a query container and the two halves
   span the full row below 560px, which stacks them and hands the team rows the
   card's whole width. Zero truncation at every width measured, at the cost of
   the card growing from 255px to 373px tall wherever it stacks. The viewport
   rule stays as a floor for browsers without container queries. */
body.wc-mode .wc-today-card { container-type: inline-size; }
@container (max-width: 560px) {
  body.wc-mode .wc-today-card-info,
  body.wc-mode .wc-today-card-picks { grid-column: 1 / -1; }
  /* The divider was the boundary between two side-by-side halves; stacked, it
     belongs above the lower one. */
  body.wc-mode .wc-today-card-picks {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
  }
}
body.wc-mode .wc-today-card-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body.wc-mode .wc-today-card-picks { display: flex; flex-direction: column; gap: 8px; min-width: 0; border-left: 1px solid rgba(255, 255, 255, 0.06); padding-left: clamp(14px, 2vw, 22px); }
@media (max-width: 560px) { body.wc-mode .wc-today-card-picks { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 12px; } }
body.wc-mode .wc-today-card-meta {
      display: flex; align-items: center; justify-content: space-between;
      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-today-card-group {
      color: var(--wc-gold);
      padding: 1px 6px; border-radius: 3px;
      background: rgba(255, 39, 64, 0.08); border: 1px solid rgba(255, 39, 64, 0.22);
    }
body.wc-mode .wc-today-card-time { font-variant-numeric: tabular-nums; }
body.wc-mode .wc-today-card-team {
      display: flex; align-items: center; gap: 10px; min-width: 0;
    }
body.wc-mode .wc-today-card-team img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
body.wc-mode .wc-today-card-team span {
      font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
body.wc-mode .wc-today-card-flag-fallback {
      width: 22px; height: 22px; border-radius: 3px; flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255, 255, 255, 0.05);
      font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-secondary);
    }
/* ── Sidebar fixtures rail (lifted from /wc/match) ─────────────── */
    .wc-groups-sidebar-kickoff {
      padding: 18px 16px 12px;
      font-family: var(--font-mono); font-size: 11px; font-weight: 600;
      letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
.wc-groups-sidebar-kickoff strong { color: var(--wc-gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.wc-groups-filter { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 4px; }
.wc-groups-filter-pill {
      appearance: none;
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 32px; min-height: 32px; box-sizing: border-box;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px; padding: 5px 8px;
      font-family: var(--font-mono); font-size: 10px; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
      cursor: pointer;
      transition: background 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
    }
.wc-groups-filter-pill:hover { background: rgba(255, 39, 64, 0.10); color: var(--wc-gold); border-color: rgba(255, 39, 64, 0.30); }
.wc-groups-filter-pill.is-active { background: rgba(255, 39, 64, 0.14); color: var(--wc-gold); border-color: rgba(255, 39, 64, 0.45); }
.wc-groups-fixtures { padding: 4px 8px 8px; display: grid; gap: 6px; }
.wc-groups-fixtures-empty { padding: 14px 16px; font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); text-align: center; }
/* ── Raw-data leaderboard (lifted from /wc/match Raw data tab) ─── */
    .wc-rd {
      display: grid; gap: 14px; padding-top: 4px;
      --rd-tone: var(--wc-gold); --rd-tone-soft: rgba(255, 39, 64, 0.10); --rd-tone-line: rgba(255, 39, 64, 0.32);
    }
.wc-rd[data-tone="def"]  { --rd-tone: var(--wc-streak-blue); --rd-tone-soft: var(--wc-streak-blue-soft); --rd-tone-line: var(--wc-streak-blue-line); }
.wc-rd[data-tone="disc"] { --rd-tone: var(--wc-streak-red);  --rd-tone-soft: var(--wc-streak-red-soft);  --rd-tone-line: var(--wc-streak-red-line); }
.wc-rd-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wc-rd-pills { display: inline-flex; gap: 2px; padding: 4px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wc-rd-pills::-webkit-scrollbar { display: none; }
.wc-rd-pill {
      appearance: none; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
      min-height: 30px; padding: 6px 12px; background: transparent; border: 0; border-radius: 8px;
      color: rgba(255, 255, 255, 0.48); font-family: var(--font-body); font-size: 12px; font-weight: 600;
      letter-spacing: 0.02em; cursor: pointer; white-space: nowrap;
      transition: color 160ms var(--wc-ease-out), background 160ms var(--wc-ease-out), box-shadow 160ms var(--wc-ease-out);
    }
.wc-rd-pill:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.wc-rd-pill:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--rd-tone-line), 0 0 0 2px var(--rd-tone-soft); }
.wc-rd-pill.is-active { color: #fff; background: var(--rd-tone-soft); box-shadow: inset 0 0 0 1px var(--rd-tone-line), 0 0 18px var(--rd-tone-soft); }
.wc-rd-pill.is-disabled, .wc-rd-pill:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
/* The .wc-rd-pills class sets display:inline-flex, which beats the bare
     * [hidden] UA rule - restore hiding so conditional pill groups stay hidden. */
    .wc-rd-pills[hidden] { display: none !important; }
.wc-rd-metric-select { position: relative; }
.wc-rd-metric-btn {
      appearance: none; display: inline-flex; align-items: center; gap: 8px;
      min-height: 38px; padding: 7px 10px 7px 12px;
      background: var(--rd-tone-soft); border: 1px solid var(--rd-tone-line); border-radius: 10px;
      color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
      cursor: pointer; white-space: nowrap;
      transition: background 160ms var(--wc-ease-out), border-color 160ms var(--wc-ease-out);
    }
.wc-rd-metric-btn:hover { background: rgba(255, 255, 255, 0.04); }
.wc-rd-metric-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rd-tone-soft); }
.wc-rd-metric-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--rd-tone); flex-shrink: 0; }
.wc-rd-metric-btn-icon svg { width: 16px; height: 16px; display: block; }
.wc-rd-metric-btn-label { font-weight: 700; }
.wc-rd-metric-btn-chevron { width: 12px; height: 12px; color: rgba(255, 255, 255, 0.55); transition: transform 160ms var(--wc-ease-out); }
.wc-rd-metric-btn[aria-expanded="true"] .wc-rd-metric-btn-chevron { transform: rotate(180deg); color: var(--rd-tone); }
.wc-rd-metric-menu {
      position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; max-width: calc(100vw - 24px);
      padding: 6px; background: #111318; border: 1px solid var(--wc-streak-tile-border); border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 2px; z-index: 60;
      animation: rdMenuIn 160ms var(--wc-ease-out);
    }
.wc-rd-metric-menu[hidden] { display: none; }
.wc-rd-metric-item {
      appearance: none; display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 8px 10px; background: transparent; border: 0; border-radius: 6px;
      color: rgba(255, 255, 255, 0.65); font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
      letter-spacing: 0.02em; text-align: left; cursor: pointer;
      transition: background 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out);
    }
.wc-rd-metric-item:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.wc-rd-metric-item.is-active { background: rgba(255, 255, 255, 0.04); color: #fff; }
.wc-rd-metric-item.is-active::after { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-left: auto; background: var(--rd-tone); box-shadow: 0 0 6px var(--rd-tone-soft); }
.wc-rd-metric-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.wc-rd-metric-item-icon svg { width: 16px; height: 16px; display: block; }
.wc-rd-metric-item.is-active .wc-rd-metric-item-icon { color: var(--rd-tone); }
/* ── League multi-select dropdown ─────────────────────────────── */
    .wc-rd-lgsel { position: relative; }
.wc-rd-lgsel-btn {
      appearance: none; display: inline-flex; align-items: center; gap: 8px;
      min-height: 38px; padding: 7px 10px 7px 14px;
      background: var(--rd-tone-soft); border: 1px solid var(--rd-tone-line); border-radius: 10px;
      color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
      cursor: pointer; white-space: nowrap;
      transition: background 160ms var(--wc-ease-out), border-color 160ms var(--wc-ease-out);
    }
.wc-rd-lgsel-btn:hover { background: rgba(255, 255, 255, 0.04); }
.wc-rd-lgsel-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rd-tone-soft); }
.wc-rd-lgsel-btn-chevron { width: 12px; height: 12px; color: rgba(255, 255, 255, 0.55); transition: transform 160ms var(--wc-ease-out); }
.wc-rd-lgsel-btn[aria-expanded="true"] .wc-rd-lgsel-btn-chevron { transform: rotate(180deg); color: var(--rd-tone); }
.wc-rd-lgsel-menu {
      position: absolute; top: calc(100% + 6px); left: 0; min-width: 244px; max-width: calc(100vw - 24px);
      padding: 6px; background: #111318; border: 1px solid var(--wc-streak-tile-border); border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 1px; z-index: 60;
      max-height: 60vh; overflow-y: auto; animation: rdMenuIn 160ms var(--wc-ease-out);
    }
.wc-rd-lgsel-menu[hidden] { display: none; }
.wc-rd-lgsel-item {
      position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 9px 10px; margin: 0; border-radius: 6px; cursor: pointer;
      color: rgba(255, 255, 255, 0.75); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
      transition: background 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out);
    }
.wc-rd-lgsel-item:hover:not(.is-disabled) { background: rgba(255, 255, 255, 0.04); color: #fff; }
.wc-rd-lgsel-cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.wc-rd-lgsel-check {
      width: 16px; height: 16px; flex-shrink: 0; border-radius: 5px;
      border: 1.5px solid rgba(255, 255, 255, 0.3); background: transparent; position: relative;
      transition: background 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out);
    }
.wc-rd-lgsel-item.is-on .wc-rd-lgsel-check { background: var(--rd-tone); border-color: var(--rd-tone); }
.wc-rd-lgsel-item.is-on .wc-rd-lgsel-check::after {
      content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
      border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    }
.wc-rd-lgsel-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-rd-lgsel-item.is-disabled { cursor: not-allowed; color: rgba(255, 255, 255, 0.32); }
.wc-rd-lgsel-item.is-disabled .wc-rd-lgsel-check { border-color: rgba(255, 255, 255, 0.12); border-style: dashed; }
.wc-rd-lgsel-note { margin-left: auto; padding-left: 10px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.28); white-space: nowrap; }
.wc-rd-table { background: var(--wc-streak-tile-bg); border: 1px solid var(--wc-streak-tile-border); border-radius: 14px; overflow: hidden; }
.wc-rd-head {
      display: grid; grid-template-columns: 72px 44px 1fr 180px; align-items: center; gap: 14px;
      padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--text-muted);
    }
.wc-rd-head .wc-rd-head-cell:nth-child(1) { grid-column: 1 / 2; }
.wc-rd-head .wc-rd-head-cell:nth-child(2) { grid-column: 3 / 4; }
.wc-rd-head .wc-rd-head-stat { grid-column: 4 / 5; color: var(--rd-tone); transition: color 140ms var(--wc-ease-out); }
.wc-rd-list { display: flex; flex-direction: column; }
.wc-rd-loading, .wc-rd-empty {
      padding: 28px 20px; text-align: center; font-family: var(--font-mono);
      font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-muted); margin: 0; line-height: 1.6;
    }
a.wc-rd-row { text-decoration: none; color: inherit; }
.wc-rd-row {
      display: grid; grid-template-columns: 72px 44px 1fr 180px; align-items: center; gap: 14px;
      padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.035);
      position: relative; cursor: pointer; transition: background 140ms var(--wc-ease-out);
    }
.wc-rd-row:last-child { border-bottom: 0; }
.wc-rd-row:hover { background: rgba(255, 255, 255, 0.025); }
.wc-rd-row:focus-visible { outline: none; background: rgba(255, 255, 255, 0.04); }
.wc-rd-row.is-enter { animation: rdRowEnter 280ms var(--wc-ease-out) both; }
.wc-rd-rank {
      font-family: var(--font-mono); font-size: 34px; font-weight: 800; line-height: 1;
      letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.28); font-variant-numeric: tabular-nums;
    }
.wc-rd-row[data-rank="1"] .wc-rd-rank {
      background: linear-gradient(135deg, var(--rd-tone) 0%, #ffffff 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 14px var(--rd-tone-soft));
    }
.wc-rd-row[data-rank="2"] .wc-rd-rank, .wc-rd-row[data-rank="3"] .wc-rd-rank { color: var(--rd-tone); }
.wc-rd-avatar {
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
      overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;
    }
.wc-rd-avatar img { width: 100%; height: 100%; object-fit: cover; background: var(--surface-base); position: relative; z-index: 1; }
.wc-rd-avatar img.is-broken { display: none; }
.wc-rd-avatar-fallback {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 800; font-size: 15px; color: rgba(255, 255, 255, 0.42); z-index: 0;
    }
.wc-rd-subject { min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.wc-rd-name {
      font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.01em;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.wc-rd-row:hover .wc-rd-name { color: var(--rd-tone); }
.wc-rd-meta {
      display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono);
      flex-wrap: wrap; row-gap: 2px; max-width: 100%; min-width: 0;
      font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase;
    }
.wc-rd-team {
      display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono);
      font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.05); padding: 2px 7px 2px 5px; border-radius: 4px;
    }
.wc-rd-team img { width: 12px; height: 12px; object-fit: contain; flex-shrink: 0; }
.wc-rd-pos { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.7); }
.wc-rd-mins { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wc-rd-stat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wc-rd-stat-icon {
      width: 32px; height: 32px; border-radius: 8px; background: var(--rd-tone-soft);
      border: 1px solid var(--rd-tone-line); color: var(--rd-tone);
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
.wc-rd-stat-icon svg { width: 22px; height: 22px; display: block; }
.wc-rd-stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.1; }
.wc-rd-stat-value { font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wc-rd-row[data-rank="1"] .wc-rd-stat-value { color: var(--rd-tone); }
.wc-rd-stat-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); }
/* Expand-on-click detail panel (full-width cell inside the row grid). */
    .wc-rd-row[aria-expanded="true"] { background: rgba(255, 255, 255, 0.035); }
.wc-rd-row-detail {
      grid-column: 1 / -1; margin-top: 10px; padding: 12px 0 2px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px;
      animation: rdDetailIn 220ms var(--wc-ease-out);
    }
.wc-rd-row-detail-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-rd-row-detail-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
.wc-rd-row-detail-line { font-size: 12.5px; color: rgba(255, 255, 255, 0.82); line-height: 1.5; font-variant-numeric: tabular-nums; }
.wc-rd-row-detail-line strong { color: #fff; font-weight: 700; }
.wc-rd-row-detail-line em { font-style: normal; color: var(--rd-tone); font-weight: 600; }
.wc-rd-row-detail-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin-top: 2px; }
.wc-rd-profile-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-tone); text-decoration: none; }
.wc-rd-profile-link:hover { text-decoration: underline; }
@media (max-width: 720px) { .wc-rd-row-detail { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 880px) { .wc-rd-head, .wc-rd-row { grid-template-columns: 64px 44px 1fr 150px; } }
@media (max-width: 720px) {
      .wc-rd-head, .wc-rd-row { grid-template-columns: 56px 40px 1fr 130px; gap: 10px; padding: 12px 14px; }
      .wc-rd-rank { font-size: 26px; }
      .wc-rd-avatar { width: 40px; height: 40px; }
      .wc-rd-stat-value { font-size: 16px; }
    }
@media (max-width: 500px) {
      /* Drop the initials circle + its column and the minutes so the full
         player name shows and the stat still fits (verified at 375px). The
         body.wc-mode prefix + !important beat the higher-specificity base
         rules that otherwise kept the avatar column and scrambled the grid. */
      body.wc-mode .wc-rd-head, body.wc-mode .wc-rd-row { grid-template-columns: 40px 1fr auto !important; gap: 8px; padding: 11px 12px; }
      body.wc-mode .wc-rd-avatar { display: none !important; }
      /* Re-seat the header cells for the 3-column mobile grid: WHO over the
         names, the metric label over the values (right-aligned to match). */
      body.wc-mode .wc-rd-head .wc-rd-head-cell:nth-child(2) { grid-column: 2 / 3; }
      body.wc-mode .wc-rd-head .wc-rd-head-stat { grid-column: 3 / 4; justify-self: end; text-align: right; }
      body.wc-mode .wc-rd-stat { justify-content: flex-end; }
      body.wc-mode .wc-rd-name { font-size: 13.5px; white-space: normal; }
      body.wc-mode .wc-rd-mins { display: none; }
      body.wc-mode .wc-rd-meta { font-size: 10px; gap: 8px; }
      body.wc-mode .wc-rd-rank { font-size: 22px; }
      body.wc-mode .wc-rd-stat { gap: 8px; }
      body.wc-mode .wc-rd-stat-icon { display: none; }
      body.wc-mode .wc-rd-stat-body { align-items: flex-end; }
    }


/* ── Sidebar fixture rows + card link/pick bits ──────────────────────
 * The sidebar row class is .wc-fix, not .wc-groups-fixture. Using the wrong
 * name is what left the rail rendering as underlined run-on link text.
 */
body.wc-mode .wc-today-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
body.wc-mode .wc-today-link {
      font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
      letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
      color: var(--text-secondary);
      padding: 6px 11px; border-radius: 999px;
      background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border-subtle);
      transition: color 0.14s var(--wc-ease-out), border-color 0.14s var(--wc-ease-out), background 0.14s var(--wc-ease-out);
    }
body.wc-mode .wc-today-link:hover { color: var(--wc-gold); border-color: var(--wc-gold-line); background: var(--wc-gold-soft); }
body.wc-mode .wc-today-picks-h { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
body.wc-mode .wc-today-picks-list { display: grid; gap: 6px; }
body.wc-mode .wc-today-loading, body.wc-mode .wc-today-empty {
      font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin: 4px 0; line-height: 1.5;
    }
.wc-fix-day-head {
      font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
      padding: 8px 8px 4px; border-top: 1px solid var(--wc-streak-tile-border); margin-top: 2px;
    }
.wc-fix-day-head:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
.wc-fix-day-head strong { color: var(--text-secondary); font-weight: 700; }
.wc-fix {
      display: grid; grid-template-columns: 1fr; gap: 4px;
      padding: 8px 10px; border-radius: 8px;
      background: rgba(255, 255, 255, 0.018); border: 1px solid transparent;
      text-decoration: none; color: inherit;
      transition: background 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out), transform 140ms var(--wc-ease-out);
    }
.wc-fix:hover { background: rgba(255, 255, 255, 0.045); border-color: var(--wc-streak-tile-border); transform: translateY(-1px); }
.wc-fix.is-live { border-color: rgba(239, 68, 68, 0.30); background: rgba(239, 68, 68, 0.04); }
.wc-fix.is-finished { opacity: 0.65; }
.wc-fix-meta {
      display: flex; justify-content: space-between; align-items: center;
      font-family: var(--font-mono); font-size: 9px; font-weight: 700;
      letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
    }
.wc-fix-meta-group { color: var(--wc-gold); padding: 1px 5px; border-radius: 3px; background: rgba(255, 39, 64, 0.08); border: 1px solid rgba(255, 39, 64, 0.22); }
.wc-fix-meta-time { font-variant-numeric: tabular-nums; }
.wc-fix-teams { display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center; }
.wc-fix-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wc-fix-team-flag {
      width: 18px; height: 18px; border-radius: 3px;
      background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; object-fit: contain;
    }
.wc-fix-team-flag img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.wc-fix-team-flag.is-fallback { font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: var(--text-secondary); }
.wc-fix-team-name {
      font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
.wc-fix-score { font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; padding-left: 6px; }
.wc-fix.is-finished .wc-fix-score, .wc-fix.is-live .wc-fix-score { color: var(--text-primary); }

/* ── Recent-results ticker ───────────────────────────────────────────────
 * Extracted from leagues/index.html. The NFL hub uses the same component so
 * both sports scroll their results identically. */
body.wc-mode .wc-db-main > .wc-ticker {
      margin-top: 0;
      margin-bottom: clamp(14px, 2vw, 20px);
      margin-left: calc(-1 * clamp(20px, 3vw, 40px));
      margin-right: calc(-1 * clamp(20px, 3vw, 40px));
      padding: 2px 0;
      background: rgba(255, 255, 255, 0.015);
    }
body.wc-mode .wc-ticker-track { gap: 0; padding-left: 0; }
body.wc-mode .wc-ticker-chip {
      background: transparent; border: 0; border-radius: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.07);
      padding: 3px 16px; gap: 7px; min-height: 0;
    }
body.wc-mode .wc-ticker-chip:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
body.wc-mode .wc-ticker-flag { width: 17px; height: 12px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
body.wc-mode .wc-ticker-name { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
body.wc-mode .wc-ticker-meta { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; padding-right: 3px; border-right: 1px solid rgba(255, 255, 255, 0.10); }
body.wc-mode .wc-ticker-meta b { color: var(--wc-gold); font-weight: 700; }
body.wc-mode .wc-ticker-score { font-family: var(--font-mono); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wc-gold); padding: 0 2px; transform: none; }
body.wc-mode .wc-ticker-pen { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; color: var(--wc-gold); text-transform: uppercase; }
body.wc-mode .wc-ticker-empty { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 3px 0; white-space: nowrap; }
body.wc-mode .wc-ticker-empty::after { content: '•'; margin: 0 22px; color: var(--wc-gold); opacity: 0.5; }

/* The ticker's edge fades are hardcoded to rgba(10,12,16,1) in wc-streaks.css,
 * which was the old ground. With the page on --surface-base they showed as two
 * dark bands, so they are re-pointed at the current ground. */
body.wc-mode.nfl-mode .wc-ticker::before {
  background: linear-gradient(90deg, var(--surface-base), rgba(11, 13, 18, 0));
}
body.wc-mode.nfl-mode .wc-ticker::after {
  background: linear-gradient(270deg, var(--surface-base), rgba(11, 13, 18, 0));
}
/* The winning side of a result reads as the winning side. */
body.wc-mode .wc-ticker-name.is-won { color: #fff; font-weight: 700; }

/* ── Clickable game cards ────────────────────────────────────────────────
 * The whole card routes to its game page. It already carried a
 * data-fixture-id that nothing used, and every card is a route, so making the
 * reader find a link inside one is a step for nothing.
 */
/* The card WAS one big <a>. It carries a row of section links now, and an
 * anchor inside an anchor is invalid and unclickable, so the teams block is the
 * link and the card is a plain div. .nfl-card-hit keeps the hit area the same
 * size it was. */
body.wc-mode .nfl-card-link { cursor: default; }
body.wc-mode .nfl-card-hit {
  display: grid; gap: inherit;
  text-decoration: none; color: inherit; cursor: pointer;
  border-radius: 10px;
}
body.wc-mode .nfl-card-link:hover {
  border-color: var(--wc-gold-line);
  background: var(--wc-gold-soft);
}
body.wc-mode .nfl-card-link {
  transition: border-color 160ms var(--wc-ease-out), background 160ms var(--wc-ease-out);
}
/* The team name is the thing a reader aims at, so it takes the accent on hover
 * to confirm the block is live. Scoped to the teams link now, not the whole
 * card, because hovering a section button should not imply the teams are what
 * you are about to open. */
body.wc-mode .nfl-card-hit:hover .wc-today-card-team > span:first-of-type { color: #fff; }
body.wc-mode .nfl-card-hit:focus-visible {
  outline: 2px solid var(--wc-gold); outline-offset: 2px;
}

/* ── Ticker links ────────────────────────────────────────────────────────
 * The chips became <a> elements when they gained a route to their game page,
 * which brought the default underline with them across the team names and the
 * score. A results ticker is a row of scores, not a list of links.
 */
/* The NFL ticker is NOT interactive: its chips are settled results, not links.
   Scoped to .nfl-mode on purpose. `cursor: pointer` is set on the shared
   .wc-ticker-chip class in main's wc-streaks.css, and the FOOTBALL ticker's
   chips genuinely are clickable, so an unscoped override would take the
   affordance off a working link on the other hub. (0,3,1) beats main's (0,2,1)
   rather than relying on load order. */
body.wc-mode.nfl-mode .wc-ticker-chip {
  cursor: default;
  text-decoration: none;
  color: inherit;
}
/* No hover response either, or it still reads as something to click. */
body.wc-mode.nfl-mode .wc-ticker-chip:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--wc-streak-tile-border, rgba(255, 255, 255, 0.06));
}

/* ── /nfl/teams: the 32-team index ──────────────────────────────────────
 * The rows themselves are .wc-nation-row from wc-streaks.css, the football club
 * index's own component. What is NOT in a shared sheet is the section header
 * grammar: it lives inline in leagues/squads.html, so it is ported here rather
 * than referenced (see the inline-CSS note at the top of leagues/index.html).
 */
body.wc-mode .wc-league-section { margin-bottom: 28px; }
body.wc-mode .wc-league-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 4px 8px;
  border-bottom: 1px solid var(--border-subtle);
}
body.wc-mode .wc-league-section-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
body.wc-mode .wc-league-section-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
body.wc-mode .wc-league-group-title {
  margin: 14px 4px 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* The two figures on the right of a team row. Numbers in mono with the label
 * under them, which is the tile grammar the rest of the NFL pages use. */
body.wc-mode .nfl-tm-figs { display: flex; align-items: center; gap: 8px; }
body.wc-mode .nfl-tm-fig {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 58px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
body.wc-mode .nfl-tm-fig b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
body.wc-mode .nfl-tm-fig.is-empty {
  min-width: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  /* Two tiles plus a 64px crest do not fit a phone, so the allowed figure
   * drops: points scored is the one a reader came for. */
  body.wc-mode .nfl-tm-fig + .nfl-tm-fig { display: none; }
}

/* ── Sidebar, on the community page's grammar ────────────────────────────
 * The shared rail (leagues/wc-streaks.css) is a mono, uppercase, full-bleed
 * list with a green left-border active state. The community page rebuilt it as
 * inset pills in the body font with a red active fill, and that is the newest
 * and best-looking rail in the product, so the NFL pages take it. Its CSS lives
 * INLINE in leagues/community.html, so this is a port rather than a reference
 * (same trap as the hub and match pages).
 *
 * Declared here rather than in nfl-team.css because every NFL page loads this
 * file, and a rail that changes between the hub and a team page is worse than
 * either version.
 */
body.wc-mode.nfl-mode .wc-db-sidebar-section-title {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 12px 7px;
}
body.wc-mode.nfl-mode .wc-db-sidebar-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--text-muted);
  border: 0;
  border-radius: 9px;
  padding: 8px 11px;
  margin: 1px 6px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  transition: background 160ms var(--wc-ease-out), color 160ms var(--wc-ease-out);
}
body.wc-mode.nfl-mode .wc-db-sidebar-link > svg,
body.wc-mode.nfl-mode .wc-db-sidebar-link > img {
  width: 16px; height: 16px; flex: none; opacity: 0.6; object-fit: contain;
}
body.wc-mode.nfl-mode .wc-db-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}
body.wc-mode.nfl-mode .wc-db-sidebar-link:hover > svg,
body.wc-mode.nfl-mode .wc-db-sidebar-link:hover > img { opacity: 1; }
/* Red, not the football rail's green: this is the NFL surface and the brand
 * accent is the same red the rest of these pages use. */
body.wc-mode.nfl-mode .wc-db-sidebar-link.is-active {
  background: var(--wc-gold-soft);
  color: #fff;
}
body.wc-mode.nfl-mode .wc-db-sidebar-link.is-active .wc-db-sidebar-link-count {
  background: var(--wc-gold-soft);
  color: var(--wc-gold);
}
body.wc-mode.nfl-mode .wc-db-sidebar-link-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 5px;
  flex: none;
}
body.wc-mode.nfl-mode .wc-db-sidebar-section { padding: 14px 4px 12px; }

/* A segmented pill group is a TOOLBAR control. In a 260px rail it keeps its
 * nowrap + overflow-x:auto and the last option is silently clipped with no
 * scrollbar to say so, which is what cut "Allowed" in half on /nfl/teams.
 * Inside the rail it wraps and fills instead. */
body.wc-mode.nfl-mode .wc-db-sidebar .wc-rd-pills {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
  margin: 0 6px;
  width: auto;
}
body.wc-mode.nfl-mode .wc-db-sidebar .wc-rd-pill {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  padding: 6px 9px;
  font-size: 11.5px;
}
body.wc-mode.nfl-mode .wc-db-sidebar .wc-rd-pill-icon { display: none; }
body.wc-mode.nfl-mode .wc-db-sidebar-search { margin: 4px 6px 0; }

/* The right-hand slot of a team row before the season starts: who they play
 * next, in place of an average of nothing. */
body.wc-mode .nfl-tm-next {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
body.wc-mode .nfl-tm-next b {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0; text-transform: none; color: var(--text-primary);
}

/* Search result rows. The wrapper and dropdown are ported above; these are the
 * row internals, which live inline in leagues/index.html. */
body.wc-mode .wc-search-ico {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
body.wc-mode .wc-search-flag img { width: 20px; height: 20px; object-fit: contain; }
body.wc-mode .wc-search-head {
  border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.wc-mode .wc-search-ini {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
body.wc-mode .wc-search-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-search-sub {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}

/* ── Games, grouped by kickoff day ───────────────────────────────────────
 * Sixteen identical cards in one grid is a wall. A heading per day gives the
 * slate its shape back - and on the day itself "Today" and "Tomorrow" are what
 * a reader is actually looking for.
 */
/* No rules between the days.
 *
 * The first version gave every day head a full-width border-bottom, directly
 * under the section head's own. That stacked three horizontal lines within a
 * couple of hundred pixels, and on a single-game day the line ran the full
 * width of the column while the card filled half of it - so the eye was
 * dragged across an empty rule to nothing. Separation comes from SPACE and
 * from the day label being a self-contained marker instead.
 */
body.wc-mode .nfl-day + .nfl-day { margin-top: clamp(26px, 3.4vw, 40px); }
body.wc-mode .nfl-day-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px 2px;
}
body.wc-mode .nfl-day-name {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
/* A dot rather than a rule: it marks the day without drawing a line the
 * content does not reach the end of. */
body.wc-mode .nfl-day-head::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wc-gold);
  flex: none;
}
body.wc-mode .nfl-day-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* Beside the day, not shoved to the far edge: at the far edge it is the
   * thing that made the empty rule look like a mistake. */
  background: rgba(255, 255, 255, 0.045);
  border-radius: 999px;
  padding: 3px 9px;
}
body.wc-mode .nfl-day-more { margin-top: 22px; display: flex; justify-content: center; }
body.wc-mode .nfl-day-more-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 160ms var(--wc-ease-out), border-color 160ms var(--wc-ease-out),
              color 160ms var(--wc-ease-out);
}
body.wc-mode .nfl-day-more-btn:hover {
  background: var(--wc-gold-soft);
  border-color: var(--wc-gold-line);
  color: #fff;
}
body.wc-mode .nfl-day-more-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--wc-gold);
  background: var(--wc-gold-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Bigger cards. At a 460px minimum a 1440 laptop fitted three across and every
 * card had to squeeze its two columns. 520 is the number that fits exactly TWO
 * in the 1100px main column (2 x 520 + 14 gap), and still three on a 1920
 * screen - 560 overshot and collapsed to one 1100px card, which is not bigger,
 * it is a banner. */
body.wc-mode .wc-today-grid {
  /* 500, not 520. Measured across real widths, 520 needed a 1054px grid box to
     fit two cards and an iPad Air 13" in landscape gives 1026: twenty-eight
     pixels short, so the whole slate rendered as single 1026px banner cards,
     which is the exact failure the note above warns about. 500 fits two at 506
     each there, and turns the 1580px desktop grid from two stretched 783px
     cards into three at 517.

     Not lower than 500: at 460 a 1280px laptop gets two 465px cards and
     "Washington Commanders" clips by 19px, because the card's own two-column
     split needs about 500px. A 1280px viewport therefore still shows one card
     per row; fixing that needs the card to collapse on ITS OWN width rather
     than the viewport's, which is a container query, not a number. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr));
  gap: 14px;
}
body.wc-mode .nfl-day .wc-today-card { padding: 18px 20px; }

@media (max-width: 560px) {
  /* On a phone the right-hand slot wraps to its own row, and a two-line
   * next-game block there made every team row 127px tall - 32 of those is a
   * lot of scrolling for one fixture. One line instead. */
  body.wc-mode .nfl-tm-next {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
  }
  body.wc-mode .nfl-tm-next b { font-size: 12px; }
  body.wc-mode .wc-nation-row { padding: 10px 12px; gap: 10px 14px; }
}

/* ── The section buttons on a game card ──────────────────────────────────
 * The football card's own row (.wc-today-links / .wc-today-link, which live
 * inline in leagues/index.html, so this is a port). It is what turns the card
 * from a summary you read into a way in: five routes straight to the part of
 * the game page the reader actually wants.
 */
body.wc-mode .wc-today-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-today-link {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  transition: color 140ms var(--wc-ease-out), border-color 140ms var(--wc-ease-out),
              background 140ms var(--wc-ease-out);
}
body.wc-mode .wc-today-link:hover,
body.wc-mode .wc-today-link:focus-visible {
  color: var(--wc-gold);
  border-color: var(--wc-gold-line);
  background: var(--wc-gold-soft);
  outline: none;
}
/* A button row plus a market panel needs more room than a two-line card did,
 * and most of that is HEIGHT - the row adds a line rather than width. The
 * column minimum stays at 520 (see the note above it): 560 does not fit two in
 * the 1100px main column, so it collapses to one full-width banner, which is
 * not a bigger card. At 520 a 1440 laptop gets two at ~543px, which is already
 * wider than the football card's ~518px. */
body.wc-mode .nfl-day .wc-today-card { padding: 20px 22px; }
@media (max-width: 400px) {
  /* Five pills will not fit two rows at 360, and a third row of buttons is
   * more card than game. The two the reader came for stay. */
  body.wc-mode .wc-today-link:nth-child(n + 4) { display: none; }
}

/* ── The compliance footer's age chip ────────────────────────────────────
 * A text chip rather than a badge: the only age asset in the repo is
 * 18-plus.svg, and an 18+ badge on a US page would be worse than none. Sized
 * to sit level with the logos beside it.
 */
.footer-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
  .footer-age { height: 26px; min-width: 26px; font-size: 11.5px; }
}
/* The shell's main column is a fixed-rail layout, so the footer has to clear
 * the rail or it sits underneath it. */
body.wc-mode.nfl-mode .site-footer {
  margin-left: 260px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 960px) {
  body.wc-mode.nfl-mode .site-footer { margin-left: 0; }
}