/* =========================================================
   STADIUM DAYLIGHT — Match card (shared)
   DESIGN.md §"Match Card (WC26-specific)": two competing
   countries flank a centered score (or kickoff time when the
   match has not started). Status badge above when the match is
   "Gespeeld" or "Uitgesteld"; scheduled is implicit and stays
   un-badged. Meta line (date · venue · local time) sits below
   the hero on its own row.
   Used by /today, /fixtures, /me, and /bracket (scoped further
   in bracket.css for the 5-column tree).
   Tokens: tokens.css. Conventions: BEM, mobile-first.
   ========================================================= */

.match-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* Container query target — the narrow-card override below reacts to
     the card's own inline size, so the same partial behaves correctly
     in full-width /fixtures rows, 3-column /today grids, and 5-column
     bracket cells alike. */
  container-type: inline-size;
}

/* Tournament stage eyebrow (Groepsfase / Zestiende finale / …). Opt-in via
   `with_stage` on the mixed-round list surfaces. Muted uppercase label so it
   labels the card without competing with the team hero below. Rendered above
   the status badge, so it leads the stylesheet too (CSS order mirrors DOM). */
.match-card__stage {
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.match-card__status {
  margin: 0;
  text-align: center;
}

/* Hero row: home flag+name | score-or-time | away name+flag. Three
   columns with `1fr auto 1fr` keep home and away mirrored regardless
   of country-name length. */
.match-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin: 0;
}
.match-card__team {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  color: var(--ink);
  /* Native browser tooltip via `title` attribute on the wrapper shows
     the full country name on hover/focus without adding a JS tooltip
     layer. Cursor hint signals "hoverable". */
  cursor: help;
}
.match-card__team--home { justify-self: end; }
.match-card__team--away { justify-self: start; }
.match-card__team-code {
  font-family: var(--font-mono);
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Centerline holds either the final score or the scheduled kickoff
   time. The typography token (`stat-lg` / `stat-md`) on the element
   handles font + size; we only lock wrapping behavior + colour here. */
.match-card__centerline {
  margin: 0;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.match-card__centerline--date {
  color: var(--ink-soft);
}
/* The centre grid cell: stacks the score and, for a shoot-out, the tally line
   beneath it. Keeping both in one cell preserves the teams grid's three columns
   (home | centre | away) so the away team never gets displaced. */
.match-card__center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Penalty-shootout tally under a finished score ("n.s. 4–3"), so a knockout
   decided on penalties reads clearly as such on the card. The "n.v." marker
   shares the slot and the styling — an extra-time result (no shootout) must
   not read as a plain regulation result either. */
.match-card__shootout,
.match-card__aet {
  margin: 2px 0 0;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--slate);
}
/* Live kickoff countdown (Today only). Keeps the centerline's default ink —
   it's primary information, unlike the muted date it replaces. min-width
   reserves the widest realistic string ("29:13:05", 8 monospace chars) so
   the 1fr auto 1fr teams grid doesn't shift when the hour gains a digit;
   mono + tabular figures come from the stat-md token on the element. */
.match-card__centerline--countdown {
  min-width: 8ch;
}
/* Live overlay: the in-play score reads in terracotta with the running
   minute beneath it. */
.match-card__centerline--live {
  color: var(--terracotta-deep);
}
.match-card__live-minute {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--terracotta);
}

.match-card__meta {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.match-card__kickoff {
  color: var(--slate);
}
.match-card__venue {
  margin: 2px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--slate-soft);
}

/* ----- Prediction block (Today/Fixtures with predictions inline) ---- */

.match-card__predictions {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.match-card__predictions-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}
.match-card__predictions-count {
  margin: 0;
  font-size: 13px;
  color: var(--slate);
}
.match-card__predict-cta {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 8px 12px;
  background: var(--terracotta-soft);
  color: var(--terracotta-deep);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.match-card__predict-cta:hover { filter: brightness(0.97); }

/* Card-as-link wrapper — strips link defaults so the underlying
   article styles stay clean while making the entire card clickable. */
.match-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.match-card-link:hover .match-card {
  border-color: var(--ink-soft);
}

/* Today card: the fixture header (teams/kickoff/stadium) is the link to the
   match details; the predictions strip below stays a separate sibling. Same
   hover as the whole-card link on Fixtures — the card border darkens, no text
   underline. The link is a child of .match-card here (not its wrapper), so
   :has() reflects the hover back onto the card. */
.match-card__fixture-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.match-card:has(.match-card__fixture-link:hover) {
  border-color: var(--ink-soft);
}

/* ----- Prediction row (post-kickoff "Familievoorspellingen" sheet) ---
   Each row reads as a small editorial results entry: name · own-indicator
   on the left, predicted score in mono in the centre, points + payout
   right. The winner row uses the same 4px pitch-deep left bar the group
   standings use to mark advancement — system-wide "this row mattered"
   signal. */

.prediction-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prediction-list__hidden-hint {
  font-style: italic;
  color: var(--slate-soft);
}

.prediction-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-sm) var(--space-md);
  align-items: baseline;
  padding: 10px var(--space-sm);
  border-left: 4px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--ink-soft);
  transition: background-color 120ms ease;
}
.prediction-row:hover { background: var(--border-soft); }

/* Winner row: pitch accent on the left bar + soft pitch background.
   Payout text colour cascades into pitch-deep automatically because
   .prediction-row--winner sits before the payout class in the
   cascade. */
.prediction-row--winner {
  background: var(--pitch-soft);
  border-left-color: var(--pitch-deep);
  color: var(--ink);
}
.prediction-row--winner:hover {
  background: color-mix(in srgb, var(--pitch-soft) 88%, var(--ink));
}

/* "Your prediction" indicator: a small terracotta dot next to the
   name. Subtler than bold + colour-shift, still scannable. */
.prediction-row--user .prediction-row__name {
  font-weight: 600;
  color: var(--ink);
}
.prediction-row__name {
  font-family: var(--font-body);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.prediction-row__own-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

.prediction-row__score {
  /* `.stat-md` token on the element supplies the JetBrains-Mono /
     tabular-nums treatment; this rule only widens the colour and
     tightens the line. */
  color: var(--ink);
  line-height: 1;
}

.prediction-row__points {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--slate);
  letter-spacing: 0.02em;
}

.prediction-row__payout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--pitch-deep);
  padding: 2px 8px;
  background: var(--surface);
  border-radius: var(--radius-full);
  border: 1px solid var(--pitch);
}
.prediction-row--winner .prediction-row__points { color: var(--pitch-deep); }

/* Live "out" group: predictions the live score has already passed. Calm and
   muted — clearly set apart, never alarming. The predicted score is struck
   through so it reads as "can't happen anymore" at a glance. */
.match-card__predictions-out-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin: var(--space-sm) 0 0;
}
.prediction-list--out {
  opacity: 0.65;
}
.prediction-row--out {
  color: var(--slate-soft);
}
.prediction-row--out .prediction-row__name { color: var(--slate); font-weight: 400; }
.prediction-row--out .prediction-row__score {
  color: var(--slate-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* ----- Wider screens ---------------------------------------- */

@media (min-width: 481px) {
  .match-card { padding: var(--space-lg); }
}

/* Narrow card override: when the card's own width drops below ~360px
   (mobile /fixtures full-width, 3-column /today HIERNA grid), shrink
   the flag a notch and tighten the gap. Bracket cells override
   separately in bracket.css for the 5-col tree. */
@container (max-width: 360px) {
  .match-card__team { gap: var(--space-xs); }
  .match-card__team .flag { width: 28px; }
}

/* ----- Own-prediction (bare cards: Fixtures, Today "Hierna") ----------
   Compact, anchor-free strip showing only the viewer's own predicted
   score(s). Distinct from the full .match-card__predictions block (which
   carries the family count + CTA on the Today main list). */
.match-card__own-prediction {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.match-card__own-prediction-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}
.match-card__own-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  /* Left bar carries the outcome colour once the match is finalised;
     transparent (and flush) for upcoming predictions. */
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 3px var(--space-xs) 3px var(--space-sm);
}
.match-card__own-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.match-card__own-crown {
  font-size: 13px;
  line-height: 1;
}
.match-card__own-result {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  white-space: nowrap;
}
.match-card__own-points {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--slate);
}
.match-card__own-payout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--pitch-deep);
  padding: 1px 8px;
  background: var(--surface);
  border: 1px solid var(--pitch);
  border-radius: var(--radius-full);
}
.match-card__own-score {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ----- Outcome states (finalised matches only) -----------------------
   Green for a correct call (strongest on an exact hit), a faint warm
   bar for a miss. The score colour lifts to ink on a scored row. */
.match-card__own-row--exact {
  background: var(--pitch-soft);
  border-left-color: var(--pitch-deep);
}
.match-card__own-row--exact .match-card__own-points,
.match-card__own-row--exact .match-card__own-score { color: var(--ink); }

.match-card__own-row--scored {
  border-left-color: var(--pitch);
}
.match-card__own-row--scored .match-card__own-score { color: var(--ink); }

.match-card__own-row--miss {
  border-left-color: var(--terracotta-soft);
}