@layer components {
  /* On wood, loose text reads cream; anything on a cream surface switches back to ink. */
  [data-edition="vintage"] .page { --ink: #f6ecd6; --ink-muted: #e0cfae; --link: #ffd98a; color: var(--ink); }
  [data-edition="vintage"] :is(.panel, .data-table, .leader-board, .division, .game-card, .filters, .score-chip, .team-banner) {
    --ink: #2c2017;
    --ink-muted: #6f5b46;
    --link: #9b2a22;
    color: var(--ink);
  }

  .eyebrow {
    font: 700 0.8rem/1.2 var(--label-font);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon);
  }

  [data-edition="vintage"] .eyebrow { color: #ffd98a; letter-spacing: 0.1em; }

  .display-title {
    font-size: clamp(2.2rem, 5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }

  [data-edition="modern"] .display-title {
    background: linear-gradient(100deg, #fff 30%, var(--neon) 70%, var(--neon-hot));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: skewX(-6deg);
    transform-origin: left;
  }

  [data-edition="vintage"] .display-title { text-shadow: 3px 3px 0 rgb(0 0 0 / 0.35); }

  .lede { font-size: 1.25rem; color: var(--ink-muted); max-width: 42ch; margin-top: var(--space-3); }

  .page-header { margin-bottom: var(--space-6); }
  .page-header--split { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); flex-wrap: wrap; }

  .section { margin-top: var(--space-7); }
  .section__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
  .section__title {
    font-size: 1.75rem;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  [data-edition="modern"] .section__title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, var(--neon), transparent);
  }

  @media (pointer: coarse) {
    .section__link { display: inline-block; padding-block: 0.5rem; }
  }
  .section__link { white-space: nowrap; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
  .section--vintage { --ink: #f6ecd6; }

  .empty-state { color: var(--ink-muted); font-size: 1.15rem; padding-block: var(--space-5); }
  .result-count { color: var(--ink-muted); margin-bottom: var(--space-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--ink);
    font: 700 1rem/1 var(--body-font);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
  }

  /* Hover lifts only where there's a real hover: a tap would leave them stuck on. */
  @media (hover: hover) {
    .button:hover { transform: translateY(-1px); }
  }
  .button--ghost { background: transparent; margin-top: var(--space-5); }

  /* Chrome foil, the same stock as the pack wrapper. */
  .button--foil {
    border: 0;
    color: #0a0f1f;
    background:
      linear-gradient(115deg, transparent 20%, rgb(255 255 255 / 0.85) 40%, transparent 60%) -200% 0 / 250% 100% no-repeat,
      linear-gradient(135deg, #b9bfcf, #f6f8ff 25%, #8e94a8 50%, #eef1fa 75%, #a6acc0);
    box-shadow: 0 6px 24px rgb(57 243 255 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.9);
    transition: background-position 0.8s ease, transform 0.15s ease;
  }

  .button--foil:hover { background-position: 200% 0, 0 0; }

  [data-edition="vintage"] .button--foil {
    background: var(--neon);
    color: #fbf3df;
    box-shadow: 0 4px 0 #7b1f19, 0 10px 18px rgb(0 0 0 / 0.35);
    font-family: var(--font-collegiate);
  }

  .panel {
    padding: var(--space-5);
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
  }

  [data-edition="vintage"] .panel {
    border-radius: 4px;
    background: var(--noise-light), var(--surface);
    border: 3px double rgb(70 45 20 / 0.45);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
  }

  .panel__title { font-size: 1.6rem; text-transform: uppercase; margin-bottom: var(--space-3); }
  .panel__note { color: var(--ink-muted); margin-bottom: var(--space-4); }

  .explainer {
    margin-top: var(--space-5);
    border-top: 1px solid var(--line);
    padding-top: var(--space-2);
    color: var(--ink-muted);
  }

  .explainer summary { padding-block: 0.6rem; cursor: pointer; color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .explainer p { margin-top: var(--space-3); max-width: 70ch; }

  .grade-scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
  .grade-scale li { display: flex; gap: var(--space-2); align-items: baseline; }
  .grade-scale b { font: 900 1.2rem/1 var(--label-font); color: var(--ink); min-width: 1.8rem; }
  .grade-scale span { font-size: 0.85rem; }

  .table-scroll { overflow-x: auto; margin-top: var(--space-4); }

  .data-table { width: 100%; font-variant-numeric: tabular-nums; }
  .data-table th, .data-table td { padding: 0.45rem 0.6rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
  .data-table :is(th, td):first-child { text-align: left; }
  .data-table thead th { font: 700 0.75rem/1.2 var(--label-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  .data-table tbody tr:hover { background: rgb(127 233 255 / 0.05); }
  .data-table__wide { width: 30%; }
  [data-edition="vintage"] .data-table { background: var(--surface); }

  .score-bar { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; justify-content: flex-end; }
  .score-bar__value { min-width: 3ch; }

  /* Meters: the attribute bars and Game Score bars. */
  meter { appearance: none; height: 0.55rem; width: 100%; max-width: 12rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); border: 0; }
  meter::-webkit-meter-bar { background: rgb(127 140 180 / 0.18); border: 0; border-radius: 999px; height: 0.55rem; }
  meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--team-accent), var(--neon)); border-radius: 999px; }
  meter::-webkit-meter-suboptimum-value { background: linear-gradient(90deg, #8aa0ff, var(--team-accent)); border-radius: 999px; }
  meter::-webkit-meter-even-less-good-value { background: #6c7899; border-radius: 999px; }
  meter::-moz-meter-bar { background: linear-gradient(90deg, var(--team-accent), var(--neon)); border-radius: 999px; }
  [data-edition="vintage"] meter::-webkit-meter-bar { background: rgb(70 45 20 / 0.15); }
  [data-edition="vintage"] meter::-webkit-meter-optimum-value,
  [data-edition="vintage"] meter::-webkit-meter-suboptimum-value { background: var(--team-vintage, var(--neon)); }
  [data-edition="vintage"] meter::-moz-meter-bar { background: var(--team-vintage, var(--neon)); }

  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
  }

  .filters__field { display: grid; gap: var(--space-1); }
  .filters__field--grow { flex: 1 1 16rem; }
  .filters label { font: 700 0.7rem/1 var(--label-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
  .filters :is(input, select) {
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface-raised);
    min-width: 10rem;
  }

  /* Phones: the name search spans the row and the selects pair up below it. Three across cut the
     options off mid-word ("All positi…"). */
  @media (max-width: 640px) {
    .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); }
    .filters__field--grow { grid-column: 1 / -1; }
    .filters :is(input, select) { min-width: 0; width: 100%; padding-inline: 0.5rem; }
  }

  /* Never wraps: on a phone the seasons scroll sideways inside the pill instead. */
  .segmented { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
  .segmented__option { flex: none; white-space: nowrap; padding: 0.4rem 1rem; border-radius: 999px; color: var(--ink-muted); text-decoration: none; font-weight: 700; }
  .segmented__option.is-active { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--neon); }
  [data-edition="vintage"] .segmented { --ink: #2c2017; --ink-muted: #6f5b46; }
  /* The season binder's neighboring seasons, between the header and the filters. */
  .season-switcher { margin-bottom: var(--space-4); }

  /* The binder's "Load more" link, clicked by autoclick as it nears the viewport. */
  /* Never a scroll anchor (nor the footer): scrolled to the very bottom, the browser would hold them in
     place and add the new page of cards above the viewport, leaving the next "Load more" on screen to
     fire again, page after page. Anchored to the cards instead, a new page lands below. */
  .binder-more { display: flex; justify-content: center; margin-top: var(--space-6); min-height: 3rem; overflow-anchor: none; }

  .score-chip {
    display: grid;
    gap: 0.2rem;
    min-width: 9.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  .score-chip:hover { border-color: var(--neon); }
  .score-chip__team { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-weight: 600; }
  .score-chip__team.is-winner { color: var(--ink); font-weight: 800; }
  .score-chip__logo { width: 1.6rem; height: 1.6rem; }
  .score-chip__score { font: 800 1.1rem/1 var(--label-font); }
  .score-chip__status { font: 700 0.7rem/1 var(--label-font); letter-spacing: 0.12em; color: var(--neon); text-transform: uppercase; margin-top: 0.2rem; }
  .scoreboard-strip { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; }
}