/* ============================================================
   PACY — FOCUS CARDS
   ------------------------------------------------------------
   Two large cards per row on desktop, one on mobile. Deliberately
   large: the promise is understanding a match in three seconds,
   which a dense table cannot deliver however much it fits.
   ============================================================ */

.match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--s-5);
}
/* Each card is its own height.
   Grid rows stretch to the tallest item by default, which equalised a row
   at the cost of padding shorter cards with blank space. Expanding one card
   then grew its neighbours with it, so opening one match looked like opening
   the three beside it. Doing this only while something is expanded traded
   that for a different surprise — the neighbours visibly shrank the moment
   you clicked. A card is now always the size of what is in it. */
.match-grid { align-items: start; }

/* --- competition grouping ------------------------------------ */
.comp-group + .comp-group { margin-top: var(--s-8); }

/* Long scoreboards stay quick: sections outside the viewport are painted
   only as the user approaches them, while their space remains reserved. */
@supports (content-visibility: auto) {
  .comp-group {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
  }
}

.comp-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--surface-line);
  transition: border-color var(--d-med) var(--ease-out);
}
.comp-head .crest {
  width: 26px; height: 26px; flex: none;
  transition: transform var(--d-med) var(--ease-out),
              filter var(--d-med) var(--ease-out);
}
.comp-head h3 {
  font-size: var(--t-h3);
  font-family: var(--font-display);
}
.comp-head .country {
  font-size: var(--t-meta);
  color: var(--ink-soft);
}
.comp-head .count {
  margin-inline-start: auto;
  font-size: var(--t-meta);
  color: var(--ink-faint);
}

/* --- the card ------------------------------------------------ */
.card {
  position: relative;
  isolation: isolate;
  color-scheme: dark;
  --surface: #102540;
  --surface-sunk: #0b1e34;
  --surface-line: #263d56;
  --surface-line-strong: #385471;
  --ink: #eff5ff;
  --ink-mid: #b4c9e4;
  --ink-soft: #8da9cc;
  --ink-faint: #7291b7;
  --electric: #4886ff;
  --med-blue: #2056dd;
  --navy-300: #88b4e8;
  --blue-050: #173557;
  color: var(--ink);
  border-radius: 20px;
  /* An ambient perspective grid over the surface -- the same texture the
     prediction preview carries -- so the card reads as "alive" at rest, not
     only on hover. Kept very faint so scores and names stay legible. */
  background-color: var(--surface);
  background-image:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--electric) 7%, transparent), transparent 60%),
    linear-gradient(118deg, transparent 49.4%, color-mix(in srgb, var(--electric) 6%, transparent) 50%, transparent 50.6%),
    linear-gradient(28deg, transparent 49.4%, color-mix(in srgb, var(--electric) 6%, transparent) 50%, transparent 50.6%);
  background-size: auto, 62px 62px, 62px 62px;
  border: 1px solid var(--surface-line);
  border-radius: 20px;
  box-shadow: var(--sh-1);
  overflow: hidden;
  /* Grid rows stretch to the tallest card. Without this the extra
     height lands after the footer as dead space; the body absorbs
     it instead and the footer stays pinned to the bottom edge. */
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--d-med) var(--ease-out),
              border-color var(--d-med) var(--ease-out),
              transform var(--d-med) var(--ease-out);
}
[data-theme="dark"] .card {
  background-color: #102540;
  border-color: #263e59;
}
/* Skip rendering a card that is nowhere near the viewport.

   A full board is ~950 cards, and every one of them carried a running
   `cardAmbient` animation over a three-gradient wash -- 956 continuously
   animating layers, on screen or not. Measured on the live board that cost
   16.7% dropped frames while merely sitting still, which on a 60Hz display is
   the stutter readers were reporting. content-visibility lets the browser skip
   style, layout and paint for the ones nobody can see; the intrinsic size
   keeps the scrollbar honest, and `auto` lets it remember each card's real
   height once it has been rendered. */
.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 677px;
}

.card-body { flex: 0 0 auto; }
.card:has(.card-prob) { min-height: 610px; }
.card-foot { margin-top: auto; }
.card:focus-within { border-color: var(--blue-300); }

/* The ambient wash moves behind the content; the narrow sheen follows hover. */
.card-glow,
.card-sheen {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.card-glow {
  inset: -25% -20% 15%;
  opacity: .65;
  background:
    radial-gradient(ellipse at 72% 12%, rgba(55, 125, 255, .28), transparent 52%),
    radial-gradient(ellipse at 20% 35%, rgba(92, 75, 220, .13), transparent 45%),
    radial-gradient(ellipse at 85% 50%, rgba(38, 189, 225, .12), transparent 48%);
  animation: cardAmbient 10s ease-in-out infinite alternate;
}
.card-sheen {
  inset-block: -35%;
  inset-inline-start: -55%;
  width: 42%;
  opacity: 0;
  transform: translate3d(-30%, 0, 0) skewX(-17deg);
  background: linear-gradient(90deg,
    transparent, rgba(86, 151, 255, .12) 28%,
    rgba(255, 255, 255, .48) 50%, rgba(86, 151, 255, .14) 72%, transparent);
  filter: blur(1px);
  transition: opacity 120ms var(--ease-out), transform 680ms var(--ease-out);
}
/* Raise only the permanent structure. Temporary goal/reveal overlays are
   deliberately excluded so their absolute positioning remains untouched. */
.card-top,
.card-body,
.card-expand,
.card-foot { position: relative; z-index: 1; }

@property --circuit-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.card:not(.reveal):not(.pulse)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  --circuit-angle: 135deg;
  opacity: .8;
  background: conic-gradient(from var(--circuit-angle),
    transparent 0 38%, #4d83ff 48%, #a677ee 56%, #ed88b5 62%,
    #f4bc68 69%, #85dcca 77%, #9bd9ff 85%, transparent 97%);
  animation: cardCircuit 9s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@media (hover: hover) and (pointer: fine) {
  .card:not(.reveal):hover {
    transform: perspective(900px) translate3d(0, -8px, 0)
               rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.012);
    box-shadow: 0 22px 52px rgba(1, 15, 35, .2),
                0 0 0 1px rgba(37, 99, 235, .12);
    border-color: color-mix(in srgb, var(--electric) 42%, var(--surface-line-strong));
  }
  .card:hover .card-sheen {
    opacity: .8;
    transform: translate3d(390%, 0, 0) skewX(-17deg);
  }
  .card:hover .competitor .crest { transform: translate3d(0, -1px, 0) scale(1.055); }
  .card:hover .score-value { transform: translate3d(2px, 0, 0); }
  .card:hover .expand-btn[href] svg { transform: translateX(3px); }
  .card:active { transform: translate3d(0, -1px, 0) scale(.998); }
  .comp-group:hover > .comp-head { border-color: var(--blue-300); }
  .comp-group:hover > .comp-head .crest {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 8px rgba(37, 99, 235, .2));
  }
}
@keyframes cardCircuit {
  from { --circuit-angle: 135deg; }
  to { --circuit-angle: 495deg; }
}
@keyframes cardAmbient {
  from { transform: translate3d(-7%, -6%, 0) scale(1); opacity: .5; }
  to { transform: translate3d(9%, 14%, 0) scale(1.08); opacity: .9; }
}
.card:nth-child(3n + 2) { --card-motion-delay: -3s; }
.card:nth-child(3n) { --card-motion-delay: -6s; }
.card .card-glow,
.card:not(.reveal):not(.pulse)::after {
  animation-delay: var(--card-motion-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .card .card-glow,
  .card:not(.reveal):not(.pulse)::after { animation: none; }
}
[data-motion="off"] .card .card-glow,
[data-motion="off"] .card:not(.reveal):not(.pulse)::after { animation: none; }

/* A live card earns one quiet signal: a coloured top edge. Not a
   permanent glow — that would make every live card shout. */
.card[data-status="live"]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--live), #FF7A5C);
  z-index: 3;
}
.card[data-status="postponed"],
.card[data-status="cancelled"],
.card[data-status="suspended"] { background: var(--surface-sunk); }

.card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 18px 14px;
  font-size: var(--t-meta);
  color: var(--ink-soft);
  min-width: 0;
}
.card-top .comp-crest { width: 20px; height: 20px; flex: none; border-radius: 4px; }
.card-top .comp-name {
  font-weight: 600;
  color: var(--ink-mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-top .sep { color: var(--ink-faint); }
.card-model { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--electric); }
.card-model svg { width: 12px; height: 12px; }
.card-top .comp-name { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.card-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-top: 9px; }
.card-state .card-status { font-size: 9px; padding: 3px 6px; background: #173354; color: var(--ink-soft); }
.card-state .badge-live { color: #ff8d88; }
.card-state .scores { display: flex; align-items: center; gap: 8px; }
.card-state .score-value { font-size: 20px; min-width: 0; }
.card-state .score-value + .score-value::before { content: "\2013"; margin-inline-end: 8px; color: var(--ink-faint); }
.card-state .kickoff { display: flex; align-items: baseline; gap: 5px; }
.card-state .kickoff .time { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.card-state .kickoff .tz { font-size: 10px; }
.card-versus { font-size: 11px; color: var(--ink-faint); text-align: center; }

/* --- teams + score ------------------------------------------- */
.card-body { padding: 0 18px 14px; }

.matchup { min-width: 0; }
.competitors { display: grid; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.competitor[data-side="away"] { flex-direction: row-reverse; text-align: end; }

.competitor {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Reserve the crest's height so a one-line and a two-line name
     produce the same row height, keeping the two sides aligned. */
  min-height: 38px;
}
.competitor .crest {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 8px;
  object-fit: contain;
  image-rendering: auto;
  transition: transform var(--d-med) var(--ease-out),
              filter var(--d-med) var(--ease-out);
}
/* Team names wrap rather than truncate. "Golden State Warriors"
   ellipsised to "Golden State Warr…" fails the three-second
   promise, so the name is allowed a second line and the row grows
   instead. Two lines is the ceiling — beyond that the card starts
   losing its shape. */
.competitor .name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.18;
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The loser of a finished match recedes; the winner does not
   need a trophy icon to be obvious. */
.card[data-status="finished"] .competitor:not(.is-winner) .name,
.card[data-status="finished"] .competitor:not(.is-winner) .score-value { color: var(--ink-soft); }
.competitor.is-winner .name { font-weight: 700; }

.competitor .meta {
  font-size: var(--t-meta);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: 2px;
}

/* Serving / possession indicator, shared across sports. */
.poss {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--electric);
  flex: none;
}

.scores {
  display: grid;
  gap: var(--s-3);
  text-align: end;
  justify-items: end;
}
.score-value {
  font-family: var(--font-display);
  font-size: var(--t-score);
  transition: transform var(--d-med) var(--ease-out),
              color var(--d-med) var(--ease-out);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  color: var(--ink);
  /* Reserve the width of two digits so a 9 → 10 change does not
     reflow the row. */
  min-width: 1.6ch;
  text-align: end;
  display: block;
}
.score-value.pending { color: var(--ink-faint); font-size: var(--t-score-sm); }

/* Kickoff time replaces the score before a match starts. */
.kickoff {
  text-align: end;
}
/* A kickoff time is not a score and should not compete with one
   for size — at score scale, "05:52 AM" swallowed half the card
   on mobile. */
.kickoff .time {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  display: block;
  line-height: 1.15;
  white-space: nowrap;
}
.kickoff .tz {
  font-size: var(--t-meta);
  color: var(--ink-soft);
}

/* --- spoiler-protected score --------------------------------- */
.spoiler-hidden .scores,
.spoiler-hidden .sport-module,
.spoiler-hidden .last-event { filter: blur(9px); pointer-events: none; user-select: none; }
.spoiler-reveal {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--s-5);
  transform: translateY(-50%);
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--surface-line-strong);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-meta);
  font-weight: 600;
  min-height: 40px;
  box-shadow: var(--sh-2);
}

/* --- sport module (the per-sport strip) ---------------------- */
.sport-module {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-meta);
  color: var(--ink-mid);
  /* One line of module content, reserved. The server renders this strip
     empty — it knows the match is live but not what the clock reads — and
     the client fills it a moment later. Reserving the line here is what
     keeps that from moving every card below it down the page. */
  min-height: 24px;
}
.mod-item { display: inline-flex; align-items: center; gap: var(--s-2); }
.basketball-state {
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  background: var(--surface-sunk);
}
.basketball-state .period-label {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}
.basketball-state .state-sep { color: var(--ink-faint); }
.mod-item .k {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mod-item .v { font-weight: 600; color: var(--ink); }
.mod-item .v.tnum { font-variant-numeric: tabular-nums; }

.card-prob {
  margin-top: 10px;
  padding-top: 0;
  border-top: 0;
  font-size: var(--t-micro);
  color: var(--ink-mid);
  /* Reserved for the same reason as .sport-module: the server knows this
     match will carry a probability, but not what it is. */
  min-height: 250px;
}
.card-prob-title,
.card-prob-head,
.card-prob-labels { display: flex; align-items: center; }
.card-prob-title { gap: 5px; font-weight: 700; color: var(--electric); }
.card-prob-title svg { width: 12px; height: 12px; }
.card-prob-loading { display: block; margin-top: 6px; color: var(--ink-faint); }
.card-prob-head { justify-content: space-between; gap: var(--s-3); }
.card-prob-score { font-weight: 700; color: var(--ink); }
/* the favourite's win chance, up front */
.card-prob-hero { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.card-prob-hero b {
  font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--electric); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px color-mix(in srgb, var(--electric) 32%, transparent);
}
.card-prob-hero span { font-size: var(--t-meta); color: var(--ink-mid); }
.card-prob-hero span b { font-size: var(--t-meta); color: var(--ink); text-shadow: none; }
.card-prob-bar {
  display: flex; height: 13px; gap: 2px; margin-block: 14px 12px;
  overflow: hidden; border-radius: 999px;
  background: var(--surface-sunk, var(--surface-line));
  box-shadow: inset 0 0 0 1px var(--surface-line);
}
.card-prob-bar i {
  height: 100%; flex: 0 1 0; min-width: 0; border-radius: 0;
}
.card-prob-bar i:first-child { border-radius: 999px 2px 2px 999px; }
.card-prob-bar i:last-child { border-radius: 2px 999px 999px 2px; }
.card-prob-bar i[data-leg="home"] {
  background: linear-gradient(90deg, var(--med-blue), var(--electric));
  box-shadow: 0 0 12px color-mix(in srgb, var(--electric) 55%, transparent);
}
.card-prob-bar i[data-leg="draw"] { background: var(--navy-300); opacity: .55; }
.card-prob-bar i[data-leg="away"] { background: linear-gradient(90deg, var(--navy-300), var(--med-blue)); }
.card-prob-labels { justify-content: space-between; font-weight: 700; gap: 8px; }
.card-prob-labels span {
  max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-prob-labels span:last-child { text-align: end; }

/* the full prediction on the card: legend, chips, form -- matching the centre */
.card-prob-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none;
  margin: 0 0 16px; padding: 0; font-size: 12px;
}
.card-prob-legend li { display: flex; align-items: center; gap: 5px; min-width: 0; }
.card-prob-legend .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.card-prob-legend .dot[data-leg="home"] { background: var(--electric); }
.card-prob-legend .dot[data-leg="draw"] { background: var(--navy-300); }
.card-prob-legend .dot[data-leg="away"] { background: var(--navy-300); }
.card-prob-legend b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.card-prob-legend .who {
  color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-prob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.card-prob-chip {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border-radius: var(--r-2, 10px);
  background: var(--surface-sunk, color-mix(in srgb, var(--electric) 5%, transparent));
  border: 1px solid var(--surface-line);
}
.card-prob-chip .k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-soft);
}
.card-prob-chip .v {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px;
}
.card-prob-chip .meter {
  width: 38px; height: 4px; border-radius: 999px; overflow: hidden;
  background: var(--surface-line-strong, var(--surface-line));
}
.card-prob-chip .meter i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--med-blue), var(--electric));
  box-shadow: 0 0 6px color-mix(in srgb, var(--electric) 45%, transparent);
}
.card-prob-form { display: grid; gap: 5px; }
.card-prob-form-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--t-micro);
}
.card-prob-form-row .who {
  color: var(--ink-mid); font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.card-prob-form-row .pills { display: flex; gap: 3px; flex: none; }
.card-prob-form-row .pills b {
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff; background: var(--navy-300);
}
.card-prob-form-row .pills b[data-r="W"] { background: var(--electric); }
.card-prob-form-row .pills b[data-r="L"] { background: var(--danger); }
.card-prob-form-row .pills b[data-r="D"] { background: var(--navy-300); opacity: .7; }

/* the signature CTA into the match centre -- gradient, glow, hover sweep */
.card-cta {
  position: relative; z-index: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 18px 14px;
  min-height: 44px; padding: 10px 16px; border-radius: var(--r-2, 11px);
  text-decoration: none; font-weight: 800; font-size: var(--t-meta); color: #fff;
  background: linear-gradient(118deg, var(--electric), var(--blue-600));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--electric) 32%, transparent);
  transition: transform var(--d-med) var(--ease-out), box-shadow var(--d-med) var(--ease-out);
}
.card-cta:hover { transform: translateY(-1px); box-shadow: 0 9px 24px color-mix(in srgb, var(--electric) 40%, transparent); }
.card-cta:focus-visible { outline: 2px solid var(--bolt-core); outline-offset: 2px; }
.card-cta svg { width: 15px; height: 15px; flex: none; }
.card-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-130%);
}
.card-cta:hover::after { animation: cardCtaSweep 640ms var(--ease-out); }
@keyframes cardCtaSweep { to { transform: translateX(130%); } }

.clock {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--live);
}

/* --- last event line ----------------------------------------- */
.last-event {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--t-meta);
  color: var(--ink-mid);
  min-width: 0;
}
.last-event .ev-icon { width: 16px; height: 16px; flex: none; }
.last-event .ev-min {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.last-event .ev-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- "why this matters" -------------------------------------- */
/* Only rendered when a match genuinely carries stakes; ordinary
   fixtures are left alone rather than padded with filler. */
.stakes {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--blue-050);
  border-inline-start: 3px solid var(--electric);
  font-size: var(--t-meta);
  color: var(--ink-mid);
  line-height: 1.45;
}
.stakes svg { width: 16px; height: 16px; flex: none; color: var(--electric); margin-top: 2px; }

/* --- card footer --------------------------------------------- */
.card-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--surface-line);
  background: transparent;
  font-size: var(--t-meta);
  color: var(--ink-soft);
  /* Wrap to a clean second row when narrow rather than letting the
     button labels break mid-phrase. */
  flex-wrap: wrap;
}
.card-foot .spacer { margin-inline-start: auto; }

.fav-btn {
  width: var(--tap); height: var(--tap);
  display: inline-grid; place-items: center;
  border-radius: var(--r-md);
  color: var(--ink-faint);
  transition: color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out);
}
.fav-btn:hover { color: var(--electric); background: var(--blue-050); }
.fav-btn[aria-pressed="true"] { color: var(--electric); }
.fav-btn svg { width: 20px; height: 20px; }

.expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink-mid);
  white-space: nowrap;   /* never break a label across lines */
}
.expand-btn:hover { color: var(--ink); background: var(--blue-050); }
.expand-btn svg {
  width: 16px; height: 16px;
  transition: transform var(--d-med) var(--ease-out);
}
.expand-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ============================================================
   LEVEL 2 — INLINE EXPANSION
   Opens in place so the card the user chose stays put.
   ============================================================ */

.card-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--ease-out);
}
.card-expand > .inner { overflow: hidden; }
.card[data-expanded="true"] .card-expand { grid-template-rows: 1fr; }

.expand-pad {
  padding: var(--s-5);
  border-top: 1px solid var(--surface-line);
  display: grid;
  gap: var(--s-5);
}

.expand-cols {
  display: grid;
  /* auto-fit rather than a fixed pair: a row holding one block should use the
     width rather than leave half the panel empty beside it. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
}
.expand-cols + .expand-cols { margin-top: var(--s-5); }

/* --- match facts ---------------------------------------------
   Shown for every match, from data Pacy already holds. */
.fact-list { margin: 0; display: grid; gap: 6px; }
.fact {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  gap: var(--s-3);
  font-size: var(--t-meta);
}
.fact dt { color: var(--ink-faint); }
.fact dd { margin: 0; color: var(--ink); text-wrap: pretty; }

.mini-title {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-3);
}

/* recent events */
.ev-list { display: grid; gap: var(--s-3); }
.ev-row {
  display: grid;
  grid-template-columns: 40px 20px 1fr;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-meta);
}
.ev-row .min { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ev-row .who { color: var(--ink-mid); }
.ev-row .who b { color: var(--ink); font-weight: 600; }

/* three key statistics */
.stat-rows { display: grid; gap: var(--s-4); }
.stat-row { font-size: var(--t-meta); }
.stat-row .stat-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.stat-row .stat-name { color: var(--ink-soft); }
.stat-value { font-weight: 700; color: var(--ink); }
.stat-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-line);
  overflow: hidden;
  display: flex;
}
.stat-bar i {
  display: block;
  height: 100%;
  background: var(--electric);
  transition: width var(--d-slow) var(--ease-out);
}
.stat-bar i + i { background: var(--navy-300); }

/* top performers */
.performers { display: grid; gap: var(--s-3); }
/* Two rows per player: who, then what.
   Name, club and stat line competing for one 440px row truncated the club to
   "Pittsb..." and broke ".307 Batting Average" across three lines. Given a
   row each, nothing needs to be cut. */
.performer {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: 1px;
  align-items: start;
  font-size: var(--t-meta);
}
.performer .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--med-blue);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: var(--t-micro);
  flex: none;
}
.performer .avatar { grid-row: span 2; }
.performer .p-who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}
.performer .p-name { font-weight: 600; color: var(--ink); }
/* The club, so a name is attributable to one of the two sides playing. */
.performer .p-team { font-size: var(--t-micro); color: var(--ink-faint); }
.performer .p-line {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

/* form comparison */
.form-compare { display: grid; gap: var(--s-3); }
.form-row { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-meta); }
.form-row .f-team {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-mid);
}
.form-pips { display: flex; gap: 4px; margin-inline-start: auto; flex: none; }
.pip {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
}
.pip-W { background: var(--good); }
.pip-D { background: var(--ink-faint); }
.pip-L { background: var(--danger); }

.expand-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Model evidence stays below the primary action, as in the card preview. */
.card-record, .card-disclaimer { position: relative; z-index: 1; margin-inline: 18px; }
.card-record { border-top: 1px solid var(--surface-line); padding-top: 22px; font-size: 12px; line-height: 1.6; color: var(--ink-mid); min-height: 72px; }
.card-record b { color: var(--ink); }
.card-record b::after { content: " \2014  "; font-weight: 400; }
.card-disclaimer { color: var(--ink-faint); font-size: 11px; line-height: 1.5; margin-block: 26px 20px; }
.card-prob-empty { display: grid; align-content: center; gap: 10px; min-height: 230px; }
.card-prob-empty b { color: var(--ink-mid); font-size: 20px; }
.card-prob-empty span { color: var(--ink-soft); font-size: 12px; max-width: 30ch; line-height: 1.6; }
.card-verdict { margin-block: 10px; font-size: 12px; font-weight: 700; color: #ff9d99; }
.card-verdict[data-correct="true"] { color: #80deba; }
.spoiler-hidden:not([data-status="upcoming"]) .card-prob { filter: blur(9px); pointer-events: none; user-select: none; }
.card-prob-hero { flex-wrap: wrap; }
.card-prob-hero > span { min-width: 0; overflow-wrap: anywhere; }
.card .card-foot { padding: 4px 12px; }
.card .card-foot .fav-btn { width: 36px; height: 36px; }
.card .card-foot .expand-btn { font-size: 11px; }
.recent-results-notice { margin-block: 0 20px; }
.recent-results-notice h2 { font-size: 20px; margin-block: 0 6px; }
.recent-results-notice p { color: var(--muted); margin: 0; }
.recent-result-date { display: block; color: #aac5e5; font-size: 12px; margin-block-end: 10px; }