/* ============================================
   PITCH26 — RESULTS STYLES v2.1
   Version 1.3 | August 2026 — v1.3 — Player link styles added
   Uses main.css design tokens — no overrides
   ============================================ */

/* ============================================
   NOTE: All CSS custom properties (--ink, --font-*, 
   --fwc-*, etc.) are inherited from main.css.
   Do NOT redefine them here.
   ============================================ */

/* ============================================
   v2.0 — VIBRANCY TOKENS
   Two colors used everywhere below (--fwc-orange,
   --fwc-purple) were referenced but never defined
   anywhere in this file or main.css — every rule
   that pointed to them was silently rendering as
   inherited/default text color instead of orange
   or violet. Defining them here (matched to the
   rgba() values already hard-coded next to them,
   e.g. rgba(249,115,22,...) and rgba(139,92,246,...))
   is what actually turns Goals, Rankings, ToT and
   Records back "on."

   The --nation-* set is new: eight hues spanning the
   confederations so the Confederation Performance
   section and the flag-stripe divider can read as
   genuinely global rather than one house color
   repeated fourteen times. */
:root {
  --fwc-orange: #f97316;
  --fwc-purple: #8b5cf6;

  --nation-1: #ef4360; /* torch red   — CONCACAF/host */
  --nation-2: #f2b705; /* gold        — champions */
  --nation-3: #2bcf9c; /* turf green  — CAF */
  --nation-4: #4cc9f0; /* sky blue    — AFC */
  --nation-5: #8b5cf6; /* violet      — CONMEBOL */
  --nation-6: #f97316; /* orange      — OFC */
  --nation-7: #ec4899; /* pink        — UEFA */
  --nation-8: #14b8a6; /* teal        — wildcard */

  --flag-stripe: linear-gradient(
    90deg,
    var(--nation-1),
    var(--nation-2),
    var(--nation-3),
    var(--nation-4),
    var(--nation-5),
    var(--nation-6),
    var(--nation-7),
    var(--nation-8),
    var(--nation-1)
  );
}

/* ── SHARED RESULTS OVERRIDES (on top of main.css) ── */
.results-hero-title {
  color: var(--true-white);
}
.section--ink {
  background: var(--ink);
  color: var(--ink-text);
}

/* ── Flag stripe — a rotating ribbon of confederation
   colors, standing in for the 48 flags without pulling
   in any real flag art or IP. Used as a divider and,
   thinned down, as a section top-border accent. ── */
.flag-stripe {
  height: 5px;
  width: 100%;
  background: var(--flag-stripe);
  background-size: 200% 100%;
  animation: flag-stripe-drift 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .flag-stripe {
    animation: none;
  }
}
@keyframes flag-stripe-drift {
  to {
    background-position: -200% 0;
  }
}

.awards-subtitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-large);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fwc-amber);
  margin: var(--space-xxl) 0 var(--space-md) 0;
  text-align: center;
}

/* ============================================
   SECTION 1 — HERO
   ============================================ */
.results-hero {
  background: linear-gradient(135deg, #0a0e1a 0%, #101535 40%, #1a2050 100%);
  border-bottom: 1px solid var(--ink-line);
  position: relative;
  overflow: hidden;
  padding-top: 9rem;
  padding-bottom: var(--space-xxl);
}
.results-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(76, 201, 240, 0.08),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(239, 67, 96, 0.06),
      transparent 60%
    );
  pointer-events: none;
}
.results-hero-inner {
  text-align: center;
  position: relative;
  z-index: 1;
}
.results-hero-subtitle {
  font-size: var(--font-size-body);
  color: var(--ink-muted);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  line-height: 1.6;
}

.results-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.hero-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  min-width: 120px;
  text-align: center;
  border-top: 2px solid var(--fwc-sky);
}
.hero-stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--true-white);
  line-height: 1.1;
}
.hero-stat-label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.results-hero-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.podium-card {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  min-width: 140px;
}
.podium-card.gold {
  background: linear-gradient(
    180deg,
    rgba(242, 183, 5, 0.18),
    rgba(242, 183, 5, 0.04)
  );
  border: 2px solid rgba(242, 183, 5, 0.4);
  padding-top: var(--space-xxl);
}
.podium-card.silver {
  background: linear-gradient(
    180deg,
    rgba(192, 192, 192, 0.14),
    rgba(192, 192, 192, 0.03)
  );
  border: 1px solid rgba(192, 192, 192, 0.3);
}
.podium-card.bronze {
  background: linear-gradient(
    180deg,
    rgba(205, 127, 50, 0.14),
    rgba(205, 127, 50, 0.03)
  );
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.podium-flag {
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 0 auto var(--space-sm);
  display: block;
}
.podium-rank {
  font-family: var(--font-display);
  font-size: var(--font-size-display);
  font-weight: 400;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.podium-card.gold .podium-rank {
  color: var(--fwc-amber);
}
.podium-card.silver .podium-rank {
  color: #c0c0c0;
}
.podium-card.bronze .podium-rank {
  color: #cd7f32;
}
.podium-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--true-white);
}
.podium-label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* ============================================
   SECTION 2 — LATEST RESULTS (NEW)
   ============================================ */
.results-latest-section {
  background: linear-gradient(180deg, var(--ink) 0%, #0d1228 100%);
  border-bottom: 1px solid var(--ink-line);
  padding-top: var(--space-xxl);
}
.results-latest-section .eyebrow {
  color: var(--fwc-amber);
}

.latest-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
}

.latest-result-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
}
.latest-result-card:hover {
  transform: translateY(-3px);
  border-color: var(--fwc-amber);
}

.latest-result-round {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fwc-amber);
  font-weight: 700;
}
.latest-result-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.latest-result-team {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-body);
  /* flex item min-width:auto otherwise pushes the card past the
     viewport on narrow screens — allow shrink so names wrap */
  min-width: 0;
  color: var(--true-white);
}
.latest-result-team img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}
.latest-result-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--true-white);
  background: var(--ink-3);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
}
.latest-result-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
}
.latest-result-link {
  font-size: 11px;
  color: var(--fwc-amber);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   SECTION 3 — AWARDS
   ============================================ */
.results-awards-section {
  background: linear-gradient(180deg, var(--ink) 0%, #0d1228 100%);
  border-bottom: 1px solid var(--ink-line);
}
.results-awards-section .eyebrow {
  color: var(--fwc-amber);
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.award-card {
  position: relative;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid var(--award-accent, var(--fwc-amber));
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.award-card:hover {
  transform: translateY(-6px);
  border-color: var(--award-accent, var(--fwc-amber));
  box-shadow:
    0 16px 40px -16px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--award-accent, var(--fwc-amber));
}

/* ── Champion card image area ── */
.award-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}
.award-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.award-card-trophy {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--award-accent, var(--fwc-amber));
}
.award-card-trophy svg {
  width: 20px;
  height: 20px;
  color: var(--award-accent, var(--fwc-amber));
}

/* ── Fallback icon (no image) ── */
.award-card-icon {
  width: 64px;
  height: 64px;
  margin: var(--space-lg) auto var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(242, 183, 5, 0.12);
}
.award-card-icon svg {
  width: 36px;
  height: 36px;
  color: var(--award-accent, var(--fwc-amber));
}

/* ── Card body (below image) ── */
.award-card-body {
  padding: var(--space-lg) var(--space-md) var(--space-lg);
}
.award-card-trophy-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--award-accent, var(--fwc-amber));
  margin-bottom: var(--space-xs);
}
.award-card-winner {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--true-white);
  margin-bottom: 4px;
  line-height: 1.2;
}
.award-card-nation {
  font-size: var(--font-size-small);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: var(--space-sm);
}

/* ── Stats row ── */
.award-stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: var(--space-sm) 0;
}
.award-stat-item {
  text-align: center;
  min-width: 50px;
}
.award-stat-value {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--award-accent, var(--fwc-amber));
}
.award-stat-label {
  display: block;
  font-size: 9px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ── Description ── */
.award-card-detail {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: var(--space-sm);
  line-height: 1.5;
  text-align: left;
  padding: 0 var(--space-xs);
}

.awards-tables-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
}
.awards-table-block {
  text-align: center;
}

.scorers-table {
  max-width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.scorer-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--ink-line);
  transition: background var(--transition-fast);
}
.scorer-row:last-child {
  border-bottom: none;
}
.scorer-row:hover {
  background: rgba(242, 183, 5, 0.04);
}
.scorer-rank {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--fwc-amber);
  min-width: 32px;
  text-align: center;
}
.scorer-flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.scorer-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--true-white);
  flex-grow: 1;
}
.scorer-stat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--true-white);
  min-width: 40px;
  text-align: right;
}
.scorer-meta {
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 60px;
  text-align: right;
}

/* ============================================
   SECTION 4 — STATISTICS
   ============================================ */
.results-stats-section {
  background: var(--ink);
  color: var(--ink-text);
}
.results-stats-section .eyebrow {
  color: var(--fwc-sky);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.stat-tile {
  background: rgba(76, 201, 240, 0.05);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  border-top: 2px solid var(--fwc-sky);
}
.stat-tile-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-xxl);
  color: var(--true-white);
  line-height: 1.1;
}
.stat-tile-label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.round-stats-table {
  max-width: 900px;
  margin: 0 auto var(--space-xl);
  overflow-x: auto;
}
.round-stats-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: var(--font-size-small);
}
.round-stats-row.header {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--ink-line);
}
.round-stats-row:not(.header) {
  color: var(--ink-text);
}
.round-stats-row:not(.header):hover {
  background: rgba(76, 201, 240, 0.03);
}

.scoreline-bars {
  max-width: 700px;
  margin: 0 auto;
}
.scoreline-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.scoreline-label {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 50px;
  color: var(--true-white);
}
.scoreline-track {
  flex-grow: 1;
  height: 24px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.scoreline-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--fwc-sky), var(--fwc-amber));
  border-radius: var(--radius-sm);
  transition: width 0.6s ease-out;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}
.scoreline-count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--true-white);
}
.scoreline-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 40px;
  text-align: right;
}

/* ============================================
   SECTION 5 — GOALS (with iframe support)
   ============================================ */
.results-goals-section {
  background: linear-gradient(180deg, var(--ink) 0%, #120d20 100%);
  border-bottom: 1px solid var(--ink-line);
}
.results-goals-section .eyebrow {
  color: var(--fwc-orange);
}

.goals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.goal-card {
  background: linear-gradient(
    135deg,
    rgba(249, 115, 22, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
}
.goal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fwc-orange), var(--fwc-red));
}
.goal-card:hover {
  transform: translateY(-4px);
  border-color: var(--fwc-orange);
}

.goal-rank {
  font-family: var(--font-display);
  font-size: var(--font-size-xxl);
  color: var(--fwc-orange);
  margin-bottom: var(--space-xs);
  line-height: 1;
}
.goal-scorer {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--true-white);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.goal-scorer img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}
.goal-type {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-top: var(--space-sm);
  background: rgba(249, 115, 22, 0.15);
  color: var(--fwc-orange);
}
.goal-meta {
  font-size: 11px;
  color: var(--fwc-amber);
  margin: var(--space-sm) 0;
}
.goal-minute {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--true-white);
}
.goal-description {
  font-size: var(--font-size-small);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

/* ── YouTube link button (replaces iframes for goals) ── */
.km-youtube-link,
.goal-youtube-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: var(--radius-md);
  color: #ff0000;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}
.km-youtube-link:hover,
.goal-youtube-link:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: #ff0000;
  transform: translateY(-2px);
}
.km-youtube-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Hide old iframe/video containers that are no longer used */
.km-video,
.goal-video {
  display: none !important;
}

/* iframe video embed */
.goal-video {
  margin-top: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ink-line);
}
.goal-video a {
  color: var(--fwc-orange);
}

/* ============================================
   KEY MOMENTS — Stat Leader Sub-Sections
   ============================================ */
.km-subsection {
  margin-bottom: var(--space-xxl);
}
.km-subsection-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-large);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fwc-amber);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--ink-line);
  text-align: left;
}
.km-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}
.km-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: linear-gradient(
    135deg,
    rgba(242, 183, 5, 0.08),
    rgba(255, 255, 255, 0.03)
  );
  border: 1px solid var(--ink-line);
  border-top: 3px solid var(--fwc-amber);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
}
.km-card:hover {
  transform: translateY(-3px);
  border-color: var(--fwc-amber);
}
.km-rank {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--fwc-amber);
  line-height: 1;
}
.km-player {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--true-white);
}
.km-stat {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
}
.km-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(242, 183, 5, 0.15);
  color: var(--fwc-amber);
  align-self: flex-start;
}
.km-description {
  font-size: var(--font-size-small);
  color: var(--ink-text);
  line-height: 1.5;
  margin: 0;
}
.km-video {
  margin-top: var(--space-xs);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--ink-line);
}
.km-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius-sm);
}
.km-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink-3);
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
}
.km-mentions {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-small);
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--fwc-amber);
}
.km-mentions-label {
  font-weight: 700;
  color: var(--fwc-amber);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

/* Mobile */
@media (max-width: 768px) {
  .km-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SECTION 6 — GROUP STAGE
   ============================================ */
.results-groups-section {
  background: var(--ink);
}
.results-groups-section .eyebrow {
  color: var(--fwc-green);
}

.groups-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.group-pill {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  padding: 6px 14px;
  background: var(--ink-3);
  color: var(--ink-text);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 36px;
}
.group-pill:hover {
  border-color: var(--fwc-green);
  color: var(--fwc-green);
}
.group-pill.active {
  background: var(--fwc-green);
  color: var(--ink);
  border-color: var(--fwc-green);
}

.groups-content {
  max-width: 900px;
  margin: 0 auto;
}
.group-standings {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xl);
}
.group-standings th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  border-bottom: 2px solid var(--ink-line);
}
.group-standings th:first-child {
  text-align: left;
}
.group-standings td {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--ink-text);
  border-bottom: 1px solid var(--ink-line);
}
.group-standings td:first-child {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
}
.group-standings tr.advanced td {
  color: var(--true-white);
}
.group-standings tr.advanced td:first-child {
  border-left: 3px solid var(--fwc-green);
}
.group-standings-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}
.group-standings-pts {
  color: var(--fwc-amber);
  font-weight: 700;
}

.group-matches {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.group-match {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(43, 207, 156, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.group-match:hover {
  background: rgba(43, 207, 156, 0.08);
}
.group-match-date {
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 80px;
  font-family: var(--font-mono);
}
.group-match-teams {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.group-match-team {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.group-match-team img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}
.group-match-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--true-white);
  min-width: 50px;
  text-align: center;
  background: var(--ink-3);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
}
.group-match-link {
  font-size: 11px;
  color: var(--fwc-green);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   SECTION 7 — KNOCKOUT
   ============================================ */
.results-bracket-section {
  background: linear-gradient(180deg, var(--ink) 0%, #1a0d15 100%);
  border-bottom: 1px solid var(--ink-line);
}
.results-bracket-section .eyebrow {
  color: var(--fwc-red);
}

.bracket-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.bracket-pill {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  padding: 6px 16px;
  background: var(--ink-3);
  color: var(--ink-text);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 36px;
}
.bracket-pill:hover {
  border-color: var(--fwc-red);
  color: var(--fwc-red);
}
.bracket-pill.active {
  background: var(--fwc-red);
  color: var(--true-white);
  border-color: var(--fwc-red);
}

.bracket-content {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.bracket-match {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(239, 67, 96, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
}
.bracket-match:hover {
  transform: translateX(4px);
  border-color: var(--fwc-red);
}
.bracket-match-venue {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  min-width: 90px;
}
.bracket-match-teams {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bracket-team-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
}
.bracket-team-row img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}
.bracket-team-row.winner {
  color: var(--true-white);
  font-weight: 700;
}
.bracket-team-row.loser {
  color: var(--ink-muted);
}
.bracket-team-score {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-left: auto;
  min-width: 24px;
  text-align: right;
}
.bracket-match-link {
  font-size: 11px;
  color: var(--fwc-red);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
}

/* ============================================
   SECTION 8 — POWER RANKINGS
   ============================================ */
.results-rankings-section {
  background: var(--ink);
}
.results-rankings-section .eyebrow {
  color: var(--fwc-purple);
}

.rankings-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(139, 92, 246, 0.04);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--fwc-purple);
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-fast),
    border-left-color var(--transition-fast);
}
.ranking-row:hover {
  transform: translateX(4px);
  border-left-color: var(--fwc-amber);
}
.ranking-row.top-5 {
  border-left-width: 4px;
}
.ranking-number {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--fwc-purple);
  min-width: 40px;
  text-align: center;
}
.ranking-row.top-5 .ranking-number {
  color: var(--fwc-amber);
}
.ranking-flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.ranking-info {
  flex-grow: 1;
  min-width: 0;
}
.ranking-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--true-white);
}
.ranking-meta {
  font-size: 11px;
  color: var(--ink-muted);
}
.ranking-stats {
  display: flex;
  gap: var(--space-md);
  font-family: var(--font-mono);
}
.ranking-stat {
  text-align: center;
}
.ranking-stat-value {
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--true-white);
}
.ranking-stat-label {
  font-size: 9px;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.ranking-rating {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--fwc-amber);
  padding: 2px 10px;
  background: rgba(242, 183, 5, 0.1);
  border-radius: var(--radius-full);
}
.ranking-reason {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-top: var(--space-xs);
  flex-basis: 100%;
  padding-left: 68px;
}

/* ============================================
   SECTION 9 — TEAM OF THE TOURNAMENT
   ============================================ */
.results-tot-section {
  background: linear-gradient(180deg, var(--ink) 0%, #0d1a25 100%);
  border-bottom: 1px solid var(--ink-line);
}
.results-tot-section .eyebrow {
  color: var(--fwc-sky);
}

/* ── Formation pitch ── */
.tot-formation-display {
  max-width: 580px;
  margin: 0 auto var(--space-xl);
  position: relative;
}
.tot-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 620px;
  background: linear-gradient(180deg, #0d2a1a 0%, #0a1f14 50%, #061a10 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(43, 207, 156, 0.25);
  overflow: hidden;
  box-shadow:
    0 12px 40px -16px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(0, 0, 0, 0.3);
}
/* Pitch lines */
.tot-pitch-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}
.tot-pitch-line--center {
  top: 50%;
}
.tot-pitch-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.tot-pitch-box {
  position: absolute;
  left: 20%;
  right: 20%;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.tot-pitch-box--top {
  top: 0;
  border-top: none;
}
.tot-pitch-box--bottom {
  bottom: 0;
  border-bottom: none;
}

/* ── Player markers on the pitch ── */
.tot-player {
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast);
  cursor: pointer;
  z-index: 2;
}
.tot-player:hover {
  transform: translate(-50%, -50%) scale(1.12);
  z-index: 10;
}
.tot-player-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--ink-2);
  border: 3px solid var(--pos-color, var(--fwc-amber));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--true-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--transition-fast);
}
.tot-player:hover .tot-player-circle {
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.7),
    0 0 0 2px var(--pos-color, var(--fwc-amber));
}
.tot-player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.tot-player-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.tot-player-pos-badge {
  position: absolute;
  top: -4px;
  right: 50%;
  transform: translateX(28px);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  background: var(--pos-color, var(--fwc-amber));
  color: #0a0e1a;
  letter-spacing: 0.04em;
}
.tot-player-name {
  font-size: 11px;
  color: var(--true-white);
  margin-top: 6px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.tot-player-rating {
  font-size: 10px;
  color: var(--fwc-amber);
  font-family: var(--font-mono);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ── Substitutes ── */
.tot-subs {
  max-width: 700px;
  margin: 0 auto;
}
.tot-subs-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: var(--space-md);
}
.tot-subs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
}
.tot-sub-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}
.tot-sub-card:hover {
  transform: translateY(-2px);
  border-color: var(--pos-color, var(--fwc-amber));
  background: rgba(255, 255, 255, 0.08);
}
.tot-sub-photo-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--pos-color, var(--fwc-amber));
  background: var(--ink-2);
}
.tot-sub-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.tot-sub-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--true-white);
}
.tot-sub-info {
  flex: 1;
  min-width: 0;
}
.tot-sub-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--true-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tot-sub-meta {
  font-size: 10px;
  color: var(--ink-muted);
}

/* ════════════════════════════════════════════════════════
   PLAYER CARD MODAL (tpm = tot player modal)
   ════════════════════════════════════════════════════════ */
.tpm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: tpm-fade-in 0.2s ease;
}
.tpm-overlay.tpm-closing {
  animation: tpm-fade-out 0.2s ease forwards;
}
@keyframes tpm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tpm-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.tpm-modal {
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0d1228 0%, #0a0e1a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.8);
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.tpm-modal::-webkit-scrollbar {
  width: 6px;
}
.tpm-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.tpm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--true-white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.tpm-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Modal header ── */
.tpm-header {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg) var(--space-md);
  background: linear-gradient(180deg, rgba(43, 207, 156, 0.06), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tpm-photo-wrap {
  width: 90px;
  height: 90px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--fwc-sky);
  background: var(--ink-2);
}
.tpm-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.tpm-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--fwc-sky);
}
.tpm-header-info {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.tpm-name {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--true-white);
  margin-bottom: 4px;
  line-height: 1.1;
}
.tpm-nation {
  font-size: var(--font-size-small);
  color: var(--ink-text);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.tpm-position {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(76, 201, 240, 0.15);
  color: var(--fwc-sky);
  margin-bottom: 4px;
}
.tpm-club {
  font-size: 12px;
  color: var(--ink-muted);
}
.tpm-tot-reason {
  font-size: 12px;
  color: var(--fwc-amber);
  margin-top: 6px;
  line-height: 1.4;
  font-style: italic;
}

/* ── Stat tiles ── */
.tpm-stats-row,
.tpm-physical-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
}
.tpm-physical-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tpm-stat-tile {
  text-align: center;
  min-width: 70px;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  flex: 1;
}
.tpm-stat-value {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--fwc-amber);
}
.tpm-stat-label {
  display: block;
  font-size: 9px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* ── Section blocks ── */
.tpm-section-block {
  padding: var(--space-sm) var(--space-lg);
}
.tpm-section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fwc-sky);
  margin-bottom: var(--space-sm);
}
.tpm-playing-style {
  font-size: 13px;
  color: var(--ink-text);
  line-height: 1.5;
}
.tpm-quote {
  padding: 0 var(--space-lg) var(--space-sm);
  font-size: 13px;
  color: var(--fwc-amber);
  font-style: italic;
  line-height: 1.4;
}

/* ── Match log ── */
.tpm-match-log {
  padding: var(--space-sm) var(--space-lg);
}
.tpm-match-log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tpm-match-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}
.tpm-match-opp {
  flex: 1;
  font-size: 12px;
  color: var(--ink-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tpm-match-info {
  font-size: 10px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.tpm-match-stats {
  font-size: 11px;
  color: var(--ink-text);
  white-space: nowrap;
}
.tpm-match-rating {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  min-width: 32px;
  text-align: center;
}
.tpm-rating-high {
  color: var(--fwc-green);
}
.tpm-rating-mid {
  color: var(--fwc-amber);
}
.tpm-rating-low {
  color: var(--fwc-red);
}

/* ── Achievements ── */
.tpm-achievements {
  padding: var(--space-sm) var(--space-lg);
}
.tpm-ach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tpm-ach-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(242, 183, 5, 0.08);
  border: 1px solid rgba(242, 183, 5, 0.2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--ink-text);
}
.tpm-ach-icon {
  font-size: 12px;
}

/* ── Career timeline ── */
.tpm-career {
  padding: var(--space-sm) var(--space-lg);
}
.tpm-career-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tpm-career-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.tpm-career-club {
  font-weight: 600;
  color: var(--ink-text);
  min-width: 140px;
}
.tpm-career-years {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  min-width: 70px;
}
.tpm-career-stats {
  font-size: 10px;
  color: var(--ink-muted);
}

/* ── Wiki link ── */
.tpm-wiki-link {
  display: block;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  font-size: 12px;
  color: var(--fwc-sky);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}
.tpm-wiki-link:hover {
  color: var(--fwc-amber);
}

/* ── Profile link ── */
.tpm-profile-link {
  display: block;
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: 13px;
  color: var(--fwc-green);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--transition-fast);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-md);
}
.tpm-profile-link:hover {
  color: var(--fwc-amber);
}

/* ── Modal responsive ── */
@media (max-width: 580px) {
  .tpm-modal {
    max-width: 100%;
    max-height: 90vh;
  }
  .tpm-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg) var(--space-md) var(--space-sm);
  }
  .tpm-photo-wrap {
    width: 80px;
    height: 80px;
  }
  .tpm-name {
    font-size: var(--font-size-large);
  }
  .tpm-stats-row,
  .tpm-physical-row {
    padding: var(--space-sm);
    gap: 6px;
  }
  .tpm-stat-tile {
    min-width: 60px;
    padding: 4px 6px;
  }
  .tpm-stat-value {
    font-size: var(--font-size-body);
  }
  .tpm-match-row {
    flex-wrap: wrap;
  }
  .tpm-match-opp {
    width: 100%;
  }
}

/* ============================================
   SECTION 10 — UPSETS
   ============================================ */
.results-upsets-section {
  background: var(--ink);
}
.results-upsets-section .eyebrow {
  color: var(--fwc-red);
}

.upsets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
}
.upset-card {
  background: linear-gradient(
    135deg,
    rgba(239, 67, 96, 0.06),
    rgba(249, 115, 22, 0.03)
  );
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
}
.upset-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fwc-red), var(--fwc-orange));
}
.upset-card:hover {
  transform: translateY(-4px);
  border-color: var(--fwc-red);
}
.upset-rank {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--fwc-red);
  text-transform: uppercase;
}
.upset-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--true-white);
  margin: var(--space-xs) 0;
}
.upset-meta {
  font-size: 12px;
  color: var(--fwc-amber);
  margin-bottom: var(--space-sm);
}
.upset-description {
  font-size: var(--font-size-small);
  color: var(--ink-muted);
  line-height: 1.5;
}
.upset-shock-meter {
  margin-top: var(--space-md);
}
.upset-shock-label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.upset-shock-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.upset-shock-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--fwc-amber), var(--fwc-red));
  border-radius: var(--radius-sm);
}

/* ============================================
   SECTION 11 — TIMELINE
   ============================================ */
.results-timeline-section {
  background: linear-gradient(180deg, var(--ink) 0%, #0a1428 100%);
  border-bottom: 1px solid var(--ink-line);
}
.results-timeline-section .eyebrow {
  color: var(--fwc-sky);
}
.timeline-track {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
}
.timeline-track::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--fwc-sky),
    var(--fwc-amber),
    var(--fwc-red)
  );
}
.timeline-entry {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  position: relative;
}
.timeline-dot {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--ink-2);
  border: 3px solid var(--fwc-sky);
  flex-shrink: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fwc-sky);
}
.timeline-entry:nth-child(odd) .timeline-dot {
  border-color: var(--fwc-sky);
  color: var(--fwc-sky);
}
.timeline-entry:nth-child(even) .timeline-dot {
  border-color: var(--fwc-amber);
  color: var(--fwc-amber);
}
.timeline-entry:last-child .timeline-dot {
  border-color: var(--fwc-red);
  color: var(--fwc-red);
}
.timeline-content {
  flex-grow: 1;
  padding-top: var(--space-xs);
}
.timeline-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fwc-sky);
  margin-bottom: 4px;
}
.timeline-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--true-white);
  margin-bottom: var(--space-xs);
}
.timeline-desc {
  font-size: var(--font-size-small);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ============================================
   SECTION 12 — KEY MOMENTS (with iframe support)
   ============================================ */
.results-moments-section {
  background: var(--ink);
}
.results-moments-section .eyebrow {
  color: var(--fwc-amber);
}

.moments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
}
.moment-card {
  background: linear-gradient(
    135deg,
    rgba(242, 183, 5, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
  overflow: hidden;
  position: relative;
}
.moment-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fwc-red), var(--fwc-amber));
}
.moment-card:hover {
  transform: translateY(-4px);
  border-color: var(--fwc-amber);
}
.moment-category {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}
.moment-category--hat_trick {
  background: rgba(242, 183, 5, 0.15);
  color: var(--fwc-amber);
}
.moment-category--upset {
  background: rgba(239, 67, 96, 0.15);
  color: var(--fwc-red);
}
.moment-category--dramatic_finish {
  background: rgba(76, 201, 240, 0.15);
  color: var(--fwc-sky);
}
.moment-category--heartbreak {
  background: rgba(239, 67, 96, 0.15);
  color: var(--fwc-red);
}
.moment-category--fastest_goal {
  background: rgba(43, 207, 156, 0.15);
  color: var(--fwc-green);
}
.moment-category--dominant_win {
  background: rgba(242, 183, 5, 0.15);
  color: var(--fwc-amber);
}
.moment-category--record {
  background: rgba(139, 92, 246, 0.15);
  color: var(--fwc-purple);
}
.moment-category--penalties {
  background: rgba(76, 201, 240, 0.15);
  color: var(--fwc-sky);
}
.moment-category--save {
  background: rgba(43, 207, 156, 0.15);
  color: var(--fwc-green);
}
.moment-category--milestone {
  background: rgba(249, 115, 22, 0.15);
  color: var(--fwc-orange);
}
.moment-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--true-white);
  margin-bottom: var(--space-xs);
}
.moment-match {
  font-size: 12px;
  color: var(--fwc-amber);
  margin-bottom: var(--space-sm);
}
.moment-minute {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--true-white);
}
.moment-description {
  font-size: var(--font-size-small);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

/* iframe video embed for moments */
.moment-video {
  margin-top: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ink-line);
}
.moment-video iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  display: block;
}
.moment-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--ink-3);
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================
   SECTION 13 — RECORDS
   ============================================ */
.results-records-section {
  background: linear-gradient(180deg, var(--ink) 0%, #120e22 100%);
  border-bottom: 1px solid var(--ink-line);
}
.results-records-section .eyebrow {
  color: var(--fwc-purple);
}
.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  max-width: 900px;
  margin: 0 auto;
}
.record-card {
  background: rgba(139, 92, 246, 0.04);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--fwc-purple);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.record-label {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.record-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--true-white);
}
.record-detail {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ============================================
   SECTION 14 — CONFEDERATIONS
   ============================================ */
.results-confederations-section {
  background: var(--ink);
}
.results-confederations-section .eyebrow {
  color: var(--fwc-green);
}
.confederations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  max-width: 1000px;
  margin: 0 auto;
}
.confederation-card {
  background: linear-gradient(
    135deg,
    rgba(43, 207, 156, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}
.confederation-name {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 400;
  color: var(--true-white);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}
.confederation-best {
  font-size: 11px;
  color: var(--fwc-amber);
  margin-bottom: var(--space-md);
  font-weight: 600;
}
.confederation-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  font-family: var(--font-mono);
}
.conf-stat {
  text-align: center;
}
.conf-stat-value {
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--true-white);
}
.conf-stat-label {
  font-size: 9px;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* ============================================
   MATCH DETAIL VIEW
   ============================================ */
.match-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-lg);
}
.match-detail-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.match-detail-round {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fwc-amber);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.match-detail-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-display);
  color: var(--true-white);
  margin: var(--space-md) 0;
}
.match-detail-teams {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
}
.match-detail-team {
  text-align: center;
}
.match-detail-team img {
  width: 40px;
  height: 28px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}
.match-detail-team-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--true-white);
}
.match-detail-back {
  display: inline-block;
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-lg);
  background: var(--fwc-amber);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-size-small);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.match-detail-back:hover {
  background: var(--fwc-red);
  color: var(--true-white);
}
.match-detail-placeholder {
  text-align: center;
  padding: var(--space-xxxl) var(--space-lg);
}
.match-detail-placeholder h2 {
  font-family: var(--font-display);
  color: var(--true-white);
  margin-bottom: var(--space-md);
}
.match-detail-placeholder p {
  color: var(--ink-muted);
  margin-bottom: var(--space-lg);
}

/* ============================================
   DATA FRESHNESS
   ============================================ */
.data-freshness-bar {
  background: var(--ink-2);
  padding: var(--space-sm) 0;
  text-align: center;
}
.data-freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  color: var(--true-white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.1);
  letter-spacing: 0.04em;
}
.data-freshness-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--fwc-red);
  box-shadow: 0 0 4px var(--fwc-amber);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 979px) {
  .results-hero-stats {
    gap: var(--space-sm);
  }
  .hero-stat {
    min-width: 100px;
    padding: var(--space-sm) var(--space-md);
  }
  .results-hero-podium {
    flex-wrap: wrap;
  }
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .group-standings th:nth-child(n + 5),
  .group-standings td:nth-child(n + 5) {
    display: none;
  }
  .bracket-match-venue {
    display: none;
  }
  .round-stats-row {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    font-size: 10px;
  }
  .round-stats-row > :nth-child(n + 5) {
    display: none;
  }
  .awards-tables-wrapper {
    grid-template-columns: 1fr;
  }
  .ranking-reason {
    padding-left: 0;
  }
  .latest-results-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .section {
    padding-top: var(--space-xxl);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .scorers-table {
    font-size: var(--font-size-small);
  }
  .scorer-meta {
    display: none;
  }
  .performers-grid,
  .moments-grid,
  .upsets-grid,
  .goals-grid {
    grid-template-columns: 1fr;
  }
  .confederations-grid {
    grid-template-columns: 1fr;
  }
  .ranking-stats {
    gap: var(--space-sm);
  }
  .tot-formation-display {
    max-width: 100%;
  }
  .tot-pitch {
    max-height: 480px;
  }
  .tot-player-circle {
    width: 44px;
    height: 44px;
    font-size: 13px;
  }
  .tot-player-name {
    font-size: 9px;
  }
  .tot-player-rating {
    font-size: 8px;
  }
  .ranking-reason {
    display: none;
  }
}

/* ============================================
   v1.2 — CONTRAST FIXES (dark text on dark bg)
   ============================================ */

/* Fix: .section-subtitle in main.css is dark text (#2a2f42)
   which is invisible on dark backgrounds. Add a dark-bg variant. */
.section-subtitle--dark {
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--font-size-large);
  margin-bottom: var(--space-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Fix: .section-title.dark is dark text — keep it light on every
   dark-background section. This list intentionally excludes
   .results-groups-section and .results-records-section: those two
   are now genuine light "paper" sections (see the v2.0 rhythm
   pass near the end of this file) and use the real .dark variant
   from main.css instead, the same way index.html's Quick Access
   section does. */
.results-hero .section-title,
.results-latest-section .section-title,
.results-awards-section .section-title,
.results-stats-section .section-title,
.results-goals-section .section-title,
.results-bracket-section .section-title,
.results-rankings-section .section-title,
.results-tot-section .section-title,
.results-upsets-section .section-title,
.results-timeline-section .section-title,
.results-moments-section .section-title,
.results-confederations-section .section-title {
  color: var(--ink-text);
}

.dark-text {
  color: var(--fwc-blue) !important;
}

/* ============================================
   v1.2 — MATCH DETAIL PAGE (9 FotMob-inspired sections)
   All sections use dark backgrounds with light text
   ============================================ */

/* ── Match Detail Container ──
   v2.3 — ELEVATION PASS: was a flat stack of full-bleed
   sections separated only by hairline borders. Switched to a
   gapped column so each .md-section can read as its own
   raised card (FotMob/SofaScore both present match-detail
   content as distinct panels, not one continuous sheet). */
.md-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* ── Match Detail Section Base ── */
.md-section {
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid var(--ink-line);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
  transition: border-color var(--transition-fast);
}

.md-section.dark-bg {
  background: linear-gradient(180deg, #0a0e1a 0%, #101535 100%) !important;
}

.md-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.md-section-header-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 201, 240, 0.1);
  color: var(--fwc-sky);
  border: 1px solid rgba(76, 201, 240, 0.25);
  box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.05) inset;
}
.md-section-header-icon svg {
  width: 18px;
  height: 18px;
}
.md-section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-text);
}
.md-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fwc-sky);
  margin-bottom: var(--space-sm);
}

/* ============================================
   MD SECTION 1 — MATCH HEADER (Score Board)
   Inspiration: FotMob's clean score header with
   team crests, big score, and match metadata
   ============================================ */
.md-header {
  background: linear-gradient(135deg, #0a0e1a 0%, #101535 40%, #1a2050 100%);
  padding: var(--space-xxl) var(--space-lg) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.md-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(76, 201, 240, 0.08),
    transparent 70%
  );
  pointer-events: none;
}
.md-header-content {
  position: relative;
  z-index: 1;
}

.md-round-badge {
  display: inline-block;
  padding: 4px 16px;
  background: rgba(242, 183, 5, 0.12);
  color: var(--fwc-amber);
  border: 1px solid rgba(242, 183, 5, 0.3);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.md-score-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}
.md-team-block {
  text-align: center;
  min-width: 140px;
}
.md-team-flag {
  width: 80px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: 0 auto var(--space-sm);
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.md-team-name {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  color: var(--true-white);
  letter-spacing: 0.04em;
}
.md-team-tla {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.md-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 64px;
  color: var(--true-white);
  line-height: 1;
  /* Never let the score wrap — under flex pressure it otherwise
     collapses to single-character width and stacks vertically. */
  white-space: nowrap;
}
.md-score-ht {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: var(--space-xs);
}

.md-result-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  background: rgba(76, 201, 240, 0.12);
  color: var(--fwc-sky);
  border: 1px solid rgba(76, 201, 240, 0.3);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-lg);
}

.md-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  max-width: 700px;
  margin: 0 auto;
}
.md-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
}
.md-meta-label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.md-meta-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-small);
  color: var(--ink-text);
}

/* ============================================
   MD SECTION 2 — MATCH SUMMARY
   Inspiration: FotMob's match summary with
   narrative, three stars, and key moment
   ============================================ */
.md-summary-narrative {
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--ink-text);
  margin-bottom: var(--space-xl);
}
.md-summary-narrative p {
  margin-bottom: var(--space-md);
}

.md-key-moment {
  padding: var(--space-md) var(--space-lg);
  background: rgba(242, 183, 5, 0.06);
  border-left: 3px solid var(--fwc-amber);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xl);
}
.md-key-moment-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fwc-amber);
  font-weight: 700;
  margin-bottom: 4px;
}
.md-key-moment-text {
  font-size: var(--font-size-body);
  color: var(--ink-text);
  font-style: italic;
}

.md-stars {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.md-star-card {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  min-width: 200px;
  position: relative;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.md-star-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5);
  border-color: rgba(76, 201, 240, 0.4);
}
.md-star-card.first:hover {
  border-color: rgba(242, 183, 5, 0.6);
}
.md-star-card.first {
  border-color: rgba(242, 183, 5, 0.4);
  background: rgba(242, 183, 5, 0.06);
}
.md-star-rank {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  background: var(--ink-3);
  color: var(--ink-muted);
  border: 2px solid var(--ink-line);
}
.md-star-card.first .md-star-rank {
  background: var(--fwc-amber);
  color: var(--ink);
  border-color: var(--fwc-amber);
}
.md-star-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--true-white);
  margin-top: var(--space-xs);
}
.md-star-team {
  font-size: 11px;
  color: var(--fwc-sky);
  margin-bottom: var(--space-xs);
}
.md-star-rating {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-large);
  color: var(--fwc-amber);
}
.md-star-reason {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ============================================
   MD SECTION 3 — MATCH STATS COMPARISON
   Inspiration: FotMob's stat comparison bars
   ============================================ */
.md-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.md-stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.md-stat-home,
.md-stat-away {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--true-white);
  min-width: 50px;
  text-align: center;
}
.md-stat-label {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 140px;
  text-align: center;
}
.md-stat-bars {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 2px;
}
.md-stat-bar-home,
.md-stat-bar-away {
  height: 8px;
  border-radius: var(--radius-sm);
  transition: width 0.4s ease-out;
}
.md-stat-bar-home {
  background: var(--fwc-sky);
}
.md-stat-bar-away {
  background: var(--fwc-red);
}

/* ============================================
   MD SECTION 4 — MOMENTUM & xG TIMELINE
   Inspiration: FotMob's momentum graph and
   xG cumulative chart
   ============================================ */
.md-momentum-container {
  position: relative;
  margin-bottom: var(--space-xl);
}
.md-momentum-svg {
  width: 100%;
  height: 120px;
  display: block;
}
.md-momentum-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  padding: 0 4px;
}

.md-xg-container {
  margin-top: var(--space-xl);
}
.md-xg-svg {
  width: 100%;
  height: 160px;
  display: block;
}
.md-xg-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}
.md-xg-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-muted);
}
.md-xg-legend-dot {
  width: 12px;
  height: 3px;
  border-radius: 2px;
}

/* ============================================
   MD SECTION 5 — EVENT TIMELINE
   Inspiration: FotMob's vertical event timeline
   with icons for goals, cards, and subs
   ============================================ */
.md-timeline {
  position: relative;
  padding-left: 48px;
}
.md-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ink-line);
}
.md-event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  position: relative;
}
.md-event-dot {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  position: absolute;
  left: -48px;
  background: var(--ink-2);
  border: 2px solid var(--ink-line);
}
.md-event-dot svg {
  width: 18px;
  height: 18px;
}
.md-event-dot--goal {
  border-color: var(--fwc-amber);
  background: rgba(242, 183, 5, 0.1);
}
.md-event-dot--goal svg {
  color: var(--fwc-amber);
}
.md-event-dot--yellow {
  border-color: var(--fwc-amber);
}
.md-event-dot--yellow svg {
  color: var(--fwc-amber);
}
.md-event-dot--red {
  border-color: var(--fwc-red);
  background: rgba(239, 67, 96, 0.1);
}
.md-event-dot--red svg {
  color: var(--fwc-red);
}
.md-event-dot--sub {
  border-color: var(--fwc-green);
  background: rgba(43, 207, 156, 0.08);
}
.md-event-dot--sub svg {
  color: var(--fwc-green);
}
.md-event-dot--halftime {
  border-color: var(--ink-muted);
  background: var(--ink-3);
}
.md-event-dot--halftime svg {
  color: var(--ink-muted);
}

.md-event-content {
  flex-grow: 1;
  padding-top: var(--space-xs);
}
.md-event-minute {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--fwc-sky);
  margin-bottom: 2px;
}
.md-event-type-label {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-right: var(--space-xs);
}
.md-event-type-label--goal {
  background: rgba(242, 183, 5, 0.15);
  color: var(--fwc-amber);
}
.md-event-type-label--card {
  background: rgba(239, 67, 96, 0.15);
  color: var(--fwc-red);
}
.md-event-type-label--sub {
  background: rgba(43, 207, 156, 0.15);
  color: var(--fwc-green);
}
.md-event-desc {
  font-size: var(--font-size-small);
  color: var(--ink-text);
  margin-top: 2px;
  line-height: 1.4;
}
.md-event-player {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--true-white);
}
.md-event-assist {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.md-event-team-tag {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================
   MD SECTION 6 — LINEUPS & FORMATIONS
   Inspiration: FotMob's formation pitch display
   ============================================ */
.md-lineups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
@media (max-width: 768px) {
  .md-lineups {
    grid-template-columns: 1fr;
  }
}

.md-lineup-team {
}
.md-lineup-team-header {
  text-align: center;
  margin-bottom: var(--space-md);
}
.md-lineup-team-name {
  font-family: var(--font-display);
  font-size: var(--font-size-large);
  color: var(--true-white);
}
.md-lineup-formation {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fwc-sky);
  margin-top: 2px;
}
.md-lineup-manager {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.md-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, #0d2a1a, #0a1f12);
  border-radius: var(--radius-md);
  border: 1px solid rgba(43, 207, 156, 0.2);
  margin-bottom: var(--space-md);
  min-height: 280px;
}
/* Pitch markings via CSS */
.md-pitch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(43, 207, 156, 0.15);
}
.md-pitch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 1px solid rgba(43, 207, 156, 0.15);
  border-radius: var(--radius-full);
}

.md-pitch-player {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: transform var(--transition-fast);
}
.md-pitch-player:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 10;
}
.md-pitch-player-circle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  margin: 0 auto;
  background: var(--ink-2);
  border: 2px solid var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--true-white);
}
.md-pitch-player--gk .md-pitch-player-circle {
  border-color: var(--fwc-sky);
}
.md-pitch-player--def .md-pitch-player-circle {
  border-color: var(--fwc-green);
}
.md-pitch-player--mid .md-pitch-player-circle {
  border-color: var(--fwc-purple);
}
.md-pitch-player--fwd .md-pitch-player-circle {
  border-color: var(--fwc-amber);
}
.md-pitch-player-name {
  font-size: 9px;
  color: var(--true-white);
  margin-top: 2px;
  white-space: nowrap;
  font-weight: 600;
}
.md-pitch-player-rating {
  font-size: 8px;
  color: var(--fwc-amber);
  font-family: var(--font-mono);
  font-weight: 700;
}

.md-subs-list {
  margin-top: var(--space-md);
}
.md-subs-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.md-sub-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.md-sub-item:last-child {
  border-bottom: none;
}
.md-sub-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.md-sub-minute {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fwc-green);
  min-width: 32px;
}
.md-sub-name {
  font-size: var(--font-size-small);
  color: var(--ink-text);
  font-weight: 600;
}
.md-sub-replaced {
  font-size: 10px;
  color: var(--ink-muted);
}

/* ============================================
   MD SECTION 7 — PLAYER RATINGS
   Inspiration: FotMob's player ratings with
   MOTM highlight and sortable stats
   ============================================ */
.md-ratings-toggle {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.md-rating-pill {
  padding: 6px 16px;
  background: var(--ink-3);
  color: var(--ink-text);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
}
.md-rating-pill:hover {
  border-color: var(--fwc-sky);
  color: var(--fwc-sky);
}
.md-rating-pill.active {
  background: var(--fwc-sky);
  color: var(--ink);
  border-color: var(--fwc-sky);
}

.md-ratings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.md-rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.md-rating-row:hover {
  border-color: var(--fwc-sky);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
.md-rating-row--motm {
  border-color: rgba(242, 183, 5, 0.4);
  background: rgba(242, 183, 5, 0.04);
}

.md-rating-shirt {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--ink-muted);
  min-width: 28px;
  text-align: center;
}
.md-rating-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--true-white);
  flex-grow: 1;
  /* flex item min-width:auto otherwise forces the whole rating row
     wider than the viewport — truncate long names instead. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-rating-pos {
  font-size: 11px;
  color: var(--ink-muted);
  margin-right: var(--space-sm);
}
.md-rating-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  min-width: 30px;
}
.md-rating-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-body);
  min-width: 48px;
  text-align: center;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}
.md-rating-value--high {
  background: rgba(43, 207, 156, 0.15);
  color: var(--fwc-green);
}
.md-rating-value--mid {
  background: rgba(242, 183, 5, 0.15);
  color: var(--fwc-amber);
}
.md-rating-value--low {
  background: rgba(239, 67, 96, 0.15);
  color: var(--fwc-red);
}
.md-rating-motm-icon {
  color: var(--fwc-amber);
  font-size: 14px;
}

/* ============================================
   MD SECTION 8 — HEAD-TO-HEAD
   Inspiration: FotMob's H2H record display
   ============================================ */
.md-h2h-record {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  text-align: center;
}
.md-h2h-record-item {
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.md-h2h-record-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
  border-color: var(--fwc-sky);
}
.md-h2h-record-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-xxl);
  color: var(--true-white);
}
.md-h2h-record-label {
  font-size: 10px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.md-h2h-record-team {
  font-size: 11px;
  color: var(--fwc-sky);
  font-weight: 600;
}

.md-h2h-meetings {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.md-h2h-meeting {
  display: grid;
  grid-template-columns: 100px 1fr 80px 80px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.md-h2h-meeting:hover {
  border-color: var(--fwc-sky);
}
.md-h2h-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}
.md-h2h-competition {
  font-size: var(--font-size-small);
  color: var(--ink-text);
}
.md-h2h-result {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-small);
  color: var(--true-white);
  text-align: center;
}
.md-h2h-winner {
  font-size: 10px;
  color: var(--fwc-amber);
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
}

.md-form-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.md-form-team {
  text-align: center;
}
.md-form-team-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  color: var(--true-white);
  margin-bottom: var(--space-sm);
}
.md-form-badges {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.md-form-badge {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
}
.md-form-badge--W {
  background: rgba(43, 207, 156, 0.2);
  color: var(--fwc-green);
}
.md-form-badge--D {
  background: rgba(242, 183, 5, 0.2);
  color: var(--fwc-amber);
}
.md-form-badge--L {
  background: rgba(239, 67, 96, 0.2);
  color: var(--fwc-red);
}

/* ============================================
   MD SECTION 9 — MATCH CONTEXT
   Inspiration: FotMob's match context with
   tournament info, quotes, and broadcasting
   ============================================ */
.md-context-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.md-context-card {
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}
.md-context-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
  border-color: rgba(20, 184, 166, 0.4);
}
.md-context-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fwc-sky);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.md-context-value {
  font-size: var(--font-size-small);
  color: var(--ink-text);
  line-height: 1.5;
}

.md-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.md-quote {
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--fwc-amber);
  border-radius: var(--radius-md);
  transition:
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}
.md-quote:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
}
.md-quote-text {
  font-size: var(--font-size-body);
  color: var(--ink-text);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.md-quote-author {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-small);
  color: var(--true-white);
}
.md-quote-role {
  font-size: 11px;
  color: var(--fwc-sky);
}

/* ============================================
   MD — BACK BUTTON & PLACEHOLDER
   ============================================ */
.md-back-bar {
  padding: var(--space-md) var(--space-lg);
  background: var(--ink-2);
  border-bottom: 1px solid var(--ink-line);
}
.md-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--fwc-amber);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-size-small);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.md-back-link:hover {
  background: var(--fwc-red);
  color: var(--true-white);
}

.md-placeholder {
  text-align: center;
  padding: var(--space-xxxl) var(--space-lg);
}
.md-placeholder h2 {
  font-family: var(--font-display);
  color: var(--true-white);
  margin-bottom: var(--space-md);
}
.md-placeholder p {
  color: var(--ink-muted);
  margin-bottom: var(--space-lg);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ============================================
   MD — RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .md-score {
    font-size: 48px;
  }
  .md-team-block {
    min-width: 100px;
  }
  .md-team-flag {
    width: 60px;
    height: 42px;
  }
  .md-team-name {
    font-size: var(--font-size-body);
  }
  .md-stat-label {
    min-width: 100px;
    font-size: 10px;
  }
  .md-h2h-record {
    grid-template-columns: 1fr;
  }
  .md-form-guide {
    grid-template-columns: 1fr;
  }
  .md-context-info {
    grid-template-columns: 1fr;
  }
  .md-stars {
    flex-direction: column;
    align-items: center;
  }
  .md-star-card {
    min-width: 260px;
  }
}

/* ============================================================
   v2.0 — VIBRANCY & RHYTHM OVERHAUL
   ------------------------------------------------------------
   Everything below this line is new. It does three things:

   1. Gives each of the 14 index-view sections a genuinely
      distinct background instead of the same flat --ink slab
      repeated fourteen times — each one is built from the
      accent color that section's eyebrow already used, so the
      page gains a color story without inventing new meaning.

   2. Converts Group Stage Results and Records & Milestones into
      real light "paper" sections (same --paper token index.html
      uses for its Quick Access cards), so the page actually
      alternates dark/light the way index.html's chapters do —
      and pairs every one of those sections' text rules with a
      .dark-appropriate color so nothing goes invisible.

   3. Extends that same rhythm into the slug / match-detail view,
      which previously had zero background variation across its
      eight stacked sections, plus a rainbow "flag-stripe" motif
      (see the --nation-* tokens up top) used sparingly at the
      two places it earns its keep: under the results hero, and
      framing Confederation Performance, the one section that's
      explicitly about all six confederations at once.
   ============================================================ */

/* ── Hero: layer in the wider nation palette on top of the
   existing sky/red radials, so the opening section reads as
   "48 nations" rather than "two brand colors." ── */
.results-hero::before {
  background:
    radial-gradient(
      ellipse at 20% 15%,
      rgba(76, 201, 240, 0.1),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 10%,
      rgba(242, 183, 5, 0.09),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 30% 85%,
      rgba(43, 207, 156, 0.08),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 75% 80%,
      rgba(239, 67, 96, 0.08),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(139, 92, 246, 0.05),
      transparent 60%
    );
}

/* ── Latest Results: cool ocean-blue wash (host-nation coastline) ── */
.results-latest-section {
  background:
    radial-gradient(
      ellipse 70% 50% at 15% 0%,
      rgba(76, 201, 240, 0.07),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #0d1f2e 100%);
}

/* ── Awards: intensified gold spotlight — this is the trophy room ── */
.results-awards-section {
  background:
    radial-gradient(
      ellipse 65% 60% at 50% 0%,
      rgba(242, 183, 5, 0.14),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #1a1408 100%);
  border-top: 1px solid rgba(242, 183, 5, 0.15);
}

/* ── Statistics: electric sky-blue, matching its own stat-tiles ── */
.results-stats-section {
  background:
    radial-gradient(
      ellipse 70% 55% at 85% 100%,
      rgba(76, 201, 240, 0.09),
      transparent 60%
    ),
    linear-gradient(180deg, #0d1a28 0%, var(--ink) 100%);
}

/* ── Goals: fire — sunset red/orange, goals are the hottest moments ── */
.results-goals-section {
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 100%,
      rgba(249, 115, 22, 0.1),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #1f1208 100%);
}

/* ── Group Stage: dark green gradient — matching the green
   eyebrow heading, keeping the dark theme consistent ── */
.results-groups-section {
  background:
    radial-gradient(
      ellipse 65% 55% at 50% 0%,
      rgba(43, 207, 156, 0.1),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #0a1f16 100%);
  border-top: 3px solid var(--fwc-green);
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink-text);
}
.results-groups-section .eyebrow {
  color: var(--fwc-green);
}
.results-groups-section .section-title.dark {
  color: var(--ink-text);
}
.group-pill {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-text);
  border-color: var(--ink-line);
}
.group-pill:hover {
  border-color: var(--fwc-green);
  color: var(--fwc-green);
}
.group-pill.active {
  background: var(--fwc-green);
  color: var(--true-white);
  border-color: var(--fwc-green);
}
.group-standings th {
  color: var(--ink-muted);
  border-bottom-color: var(--ink-line);
}
.group-standings td {
  color: var(--ink-text);
  border-bottom-color: var(--ink-line);
}
.group-standings tr.advanced td {
  color: var(--fwc-green);
  font-weight: 700;
}
.group-match {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-line);
}
.group-match:hover {
  background: rgba(43, 207, 156, 0.08);
}
.group-match-date {
  color: var(--ink-muted);
}
.group-match-score {
  color: var(--true-white);
  background: rgba(255, 255, 255, 0.08);
}
.group-match-link {
  color: var(--fwc-green);
}
.results-groups-section .group-standings-pts {
  color: var(--fwc-amber);
}

/* ── Knockout Stage: violet/crimson floodlit tunnel —
   the drama of sudden death ── */
.results-bracket-section {
  background:
    radial-gradient(
      ellipse 60% 60% at 50% 0%,
      rgba(139, 92, 246, 0.08),
      transparent 55%
    ),
    linear-gradient(180deg, var(--ink) 0%, #1a0d15 100%);
}

/* ── Power Rankings: violet, matching its own left-border cards ── */
.results-rankings-section {
  background:
    radial-gradient(
      ellipse 60% 50% at 15% 100%,
      rgba(139, 92, 246, 0.09),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #150e28 100%);
}

/* ── Team of the Tournament: the pitch itself — turf green,
   echoing the formation diagram it frames ── */
.results-tot-section {
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 100%,
      rgba(43, 207, 156, 0.08),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #0a1f16 100%);
}

/* ── Upsets: a red pulse — shock results ── */
.results-upsets-section {
  background:
    radial-gradient(
      ellipse 65% 55% at 50% 0%,
      rgba(239, 67, 96, 0.1),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #1f0d12 100%);
}

/* ── Moments: warm amber glow, same family as the Hall of Fame ── */
.results-moments-section {
  background:
    radial-gradient(
      ellipse 65% 55% at 85% 0%,
      rgba(242, 183, 5, 0.08),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #1a1608 100%);
}

/* ── Records & Milestones: dark purple gradient — matching
   the purple eyebrow heading, consistent dark theme ── */
.results-records-section {
  background:
    radial-gradient(
      ellipse 65% 55% at 50% 100%,
      rgba(139, 92, 246, 0.09),
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink) 0%, #120e22 100%);
  border-top: 3px solid var(--fwc-purple);
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink-text);
}
.results-records-section .eyebrow {
  color: var(--fwc-purple);
}
.results-records-section .section-title.dark {
  color: var(--ink-text);
}
.record-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ink-line);
  border-left-color: var(--fwc-purple);
}
.record-label {
  color: var(--ink-muted);
}
.record-value {
  color: var(--ink-text);
}
.record-detail {
  color: var(--ink-muted);
}

/* ── Confederation Performance: the whole-world section — framed
   top and bottom by the flag-stripe, and each card takes its
   accent from the eight-color nation palette in rotation rather
   than a single house color, so six confederations read as six
   distinct identities. ── */
.results-confederations-section {
  position: relative;
  background:
    radial-gradient(
      ellipse 70% 70% at 50% 50%,
      rgba(43, 207, 156, 0.05),
      transparent 65%
    ),
    var(--ink);
  border-top: 3px solid transparent;
  border-image: var(--flag-stripe) 1;
}
.confederation-card {
  border-top: 3px solid var(--nation-1);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.015)
  );
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast);
}
.confederation-card:hover {
  transform: translateY(-3px);
}
.confederation-card:nth-child(6n + 1) {
  border-top-color: var(--nation-1);
}
.confederation-card:nth-child(6n + 2) {
  border-top-color: var(--nation-7);
}
.confederation-card:nth-child(6n + 3) {
  border-top-color: var(--nation-3);
}
.confederation-card:nth-child(6n + 4) {
  border-top-color: var(--nation-4);
}
.confederation-card:nth-child(6n + 5) {
  border-top-color: var(--nation-5);
}
.confederation-card:nth-child(6n + 6) {
  border-top-color: var(--nation-6);
}

/* ── Card accents that were missing entirely — every other grid
   on the page (goals, upsets, moments) already had a colored
   top-border on hover/always; these three didn't. ── */
.award-card {
  border-top: 3px solid var(--fwc-amber);
}
.latest-result-card {
  border-left: 3px solid var(--fwc-amber);
}
.stat-tile {
  border-top: 2px solid var(--fwc-sky);
}

/* ============================================================
   SLUG VIEW (match detail) — same rhythm treatment
   ============================================================ */

/* v2.2 — FIXED: results.js's renderMD_Header() also emits a
   <section> tag (class="md-header") ahead of the eight
   .md-section blocks. nth-of-type counts by TAG, not class, so
   every rule below was silently landing one section later than
   intended — the paper treatment was hitting Player Ratings
   (which has an inline style="background: var(--ink-2)" that
   wins over any CSS background, but does NOT block the CSS
   `color` override), producing dark-charcoal text on a dark
   navy background. Head-to-Head, the section actually meant to
   go light, got the Match Context teal wash instead and never
   went light at all.

   Replaced with :has() targeting each section by a class unique
   to its own content, so this can't drift again regardless of
   how many sibling <section>s precede it. Match Statistics,
   Event Timeline, and Match Context already get their own flat
   background from an inline style in results.js — a CSS
   background here would be a no-op for those, so they're left
   alone rather than carrying a dead rule. */
.md-container > .md-section:has(.md-summary-narrative) {
  background: linear-gradient(180deg, rgba(76, 201, 240, 0.05), transparent);
}
.md-container > .md-section:has(.md-momentum-container) {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.05), transparent);
}
.md-container > .md-section:has(.md-lineups) {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.05), transparent);
}

/* v2.3 — ELEVATION PASS: per-section accent, reusing the hue
   each section already carries elsewhere on the page (its wash
   above, or a dominant color from its own content) rather than
   inventing new ones. Applied to the icon badge + a 3px top edge
   on the card so each section reads as visually distinct at a
   glance, the way FotMob/SofaScore color-code their panels.
   Only overrides border-top (not the full border set on
   .md-section) and the icon, so it layers cleanly regardless of
   whether the section also has an inline background or a wash
   above. */
.md-container > .md-section:has(.md-momentum-container) {
  border-top: 3px solid var(--fwc-purple);
}
.md-container
  > .md-section:has(.md-momentum-container)
  .md-section-header-icon {
  background: rgba(139, 92, 246, 0.12);
  color: var(--fwc-purple);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.06) inset;
}
.md-container > .md-section:has(.md-lineups) {
  border-top: 3px solid var(--fwc-orange);
}
.md-container > .md-section:has(.md-lineups) .md-section-header-icon {
  background: rgba(249, 115, 22, 0.12);
  color: var(--fwc-orange);
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.06) inset;
}
/* Timeline's dominant color on the page is already the goal-dot
   amber; carried up to the section itself. */
.md-container > .md-section:has(.md-timeline) {
  border-top: 3px solid var(--fwc-amber);
}
.md-container > .md-section:has(.md-timeline) .md-section-header-icon {
  background: rgba(242, 183, 5, 0.12);
  color: var(--fwc-amber);
  border-color: rgba(242, 183, 5, 0.3);
  box-shadow: 0 0 0 3px rgba(242, 183, 5, 0.06) inset;
}
/* Ratings' dominant color is the high-rating green tier. */
.md-container > .md-section:has(.md-ratings-list) {
  border-top: 3px solid var(--fwc-green);
}
.md-container > .md-section:has(.md-ratings-list) .md-section-header-icon {
  background: rgba(43, 207, 156, 0.12);
  color: var(--fwc-green);
  border-color: rgba(43, 207, 156, 0.3);
  box-shadow: 0 0 0 3px rgba(43, 207, 156, 0.06) inset;
}
/* Match Context already washes teal above; carried to the edge too. */
.md-container > .md-section:has(.md-context-info) {
  border-top: 3px solid #14b8a6;
}
.md-container > .md-section:has(.md-context-info) .md-section-header-icon {
  background: rgba(20, 184, 166, 0.12);
  color: #14b8a6;
  border-color: rgba(20, 184, 166, 0.3);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.06) inset;
}

/* Head-to-Head becomes the slug view's own light "paper" break —
   same principle as Groups/Records above, applied to the
   match-detail page so it isn't left out of the light/dark
   alternation the rest of the site now has. */
.md-container > .md-section:has(.md-h2h-record) {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--fwc-dark-charcoal);
}
.md-container > .md-section:has(.md-h2h-record) .md-section-title,
.md-container > .md-section:has(.md-h2h-record) .md-eyebrow {
  color: var(--fwc-dark-charcoal);
}
.md-container > .md-section:has(.md-h2h-record) .md-form-team-name {
  color: var(--fwc-dark-charcoal);
}
.md-container > .md-section:has(.md-h2h-record) .md-h2h-record-item {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--paper-line);
}
.md-container > .md-section:has(.md-h2h-record) .md-h2h-record-value {
  color: var(--fwc-dark-charcoal);
}
.md-container > .md-section:has(.md-h2h-record) .md-h2h-record-label {
  color: rgba(42, 47, 66, 0.55);
}
.md-container > .md-section:has(.md-h2h-record) .md-h2h-record-team {
  /* --fwc-sky is a bright cyan tuned for dark backgrounds; on paper
     it drops well under readable contrast, so it's darkened here
     rather than reused as-is. */
  color: #0f7a94;
}

.md-container > .md-section:has(.md-h2h-record) .md-h2h-meeting {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--paper-line);
}
.md-container > .md-section:has(.md-h2h-record) .md-h2h-date,
.md-container > .md-section:has(.md-h2h-record) .md-h2h-competition {
  color: rgba(42, 47, 66, 0.65);
}
.md-container > .md-section:has(.md-h2h-record) .md-h2h-result {
  color: var(--fwc-dark-charcoal);
}
.md-container > .md-section:has(.md-h2h-record) .md-h2h-winner {
  /* Same problem as .md-h2h-record-team: --fwc-amber is a light
     gold meant to pop on --ink, not sit on --paper. Darkened so the
     "Winner" label stays legible instead of washing into the page. */
  color: #8a5f08;
}

.md-container > .md-section:has(.md-h2h-record) .md-form-badge--D {
  color: #8a5f08;
  background: rgba(242, 183, 5, 0.22);
}
/* The W/L badges were missed in the original pass above — same
   problem as the D badge: --fwc-green/--fwc-red are tuned bright
   for the dark theme and lose contrast on this section's light
   paper background, so they're darkened here the same way. */
.md-container > .md-section:has(.md-h2h-record) .md-form-badge--W {
  color: #0d7a54;
  background: rgba(43, 207, 156, 0.22);
}
.md-container > .md-section:has(.md-h2h-record) .md-form-badge--L {
  color: #b91c3c;
  background: rgba(239, 67, 96, 0.22);
}

/* Match Context — kept for when/if the inline ink-2 background in
   results.js is ever removed; currently masked by that inline
   style, same as Match Statistics and Event Timeline above. */
.md-container > .md-section:has(.md-context-info) {
  background: linear-gradient(180deg, rgba(20, 184, 166, 0.06), transparent);
}

/* Flag-stripe placement: a single divider under the hero. Kept
   out of every other section so it stays a landmark, not wallpaper. */
.results-hero + .flag-stripe {
  display: block;
}

@media (max-width: 767px) {
  .flag-stripe {
    height: 4px;
  }
}

/* ============================================
   v1.3 — PLAYER LINK STYLES
   ============================================ */
.md-player-link {
  color: var(--fwc-sky, #4cc9f0);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast, 0.2s);
  border-bottom: 1px dotted rgba(76, 201, 240, 0.4);
}
.md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
  border-bottom-color: var(--fwc-amber, #f2b705);
}
.md-player-name-text {
  font-weight: 600;
  color: inherit;
}

/* Player links in awards section */
.award-card-winner .md-player-link {
  color: var(--true-white, #fff);
}
.award-card-winner .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}

/* Player links in scorer tables */
.scorer-name .md-player-link {
  color: var(--true-white, #fff);
}
.scorer-name .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}

/* Player links in rankings */
.ranking-name .md-player-link {
  color: var(--true-white, #fff);
}
.ranking-name .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}

/* Player links in match detail sections */
.md-rating-name .md-player-link {
  color: var(--true-white, #fff);
}
.md-rating-name .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}
.md-event-player .md-player-link {
  color: var(--true-white, #fff);
}
.md-event-player .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}
.md-pitch-player-name .md-player-link {
  color: var(--true-white, #fff);
  font-size: 9px;
}
.md-pitch-player-name .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}
.md-star-name .md-player-link {
  color: var(--true-white, #fff);
}
.md-star-name .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}
.md-sub-name .md-player-link {
  color: var(--ink-text, #eef1fb);
}
.md-sub-name .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}
.md-quote-author .md-player-link {
  color: var(--true-white, #fff);
}
.md-quote-author .md-player-link:hover {
  color: var(--fwc-amber, #f2b705);
}

.md-pitch-player-rating.high {
  background: #2bcf9c;
  color: #0b0f1e;
}
.md-pitch-player-rating.mid {
  background: #f2b705;
  color: #0b0f1e;
}
.md-pitch-player-rating.low {
  background: #ef4360;
  color: #fff;
}

/* Scroll offset so anchored sections aren't hidden behind sticky nav */
[id^="md-"],
[id^="results-"] {
  scroll-margin-top: 80px;
}

/* Match Detail Section Nav */
.md-section-nav {
  position: sticky;
  top: 72px;
  z-index: var(--z-sticky);
  background: rgba(11, 15, 30, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-line) transparent;
}
.md-section-nav::-webkit-scrollbar {
  height: 4px;
}
.md-section-nav::-webkit-scrollbar-thumb {
  background: var(--ink-line);
  border-radius: var(--radius-full);
}
.md-section-nav-container {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}
.md-section-nav-link {
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 2px solid transparent;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
  text-decoration: none;
}
.md-section-nav-link.active {
  color: var(--fwc-amber);
  border-bottom-color: var(--fwc-amber);
}
.md-section-nav-link:hover {
  color: var(--ink-text);
}

/* Results Index Section Nav */
.results-section-nav {
  position: sticky;
  top: 72.5px;
  z-index: var(--z-sticky);
  background: rgba(11, 15, 30, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-line) transparent;
}
.results-section-nav::-webkit-scrollbar {
  height: 4px;
}
.results-section-nav::-webkit-scrollbar-thumb {
  background: var(--ink-line);
  border-radius: var(--radius-full);
}
.results-section-nav-container {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}
.results-section-nav-link {
  font-family: var(--font-heading);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 2px solid transparent;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
  text-decoration: none;
}
.results-section-nav-link.active {
  color: var(--fwc-amber);
  border-bottom-color: var(--fwc-amber);
}
.results-section-nav-link:hover {
  color: var(--ink-text);
}

/* Mobile */
@media (max-width: 768px) {
  .results-section-nav,
  .md-section-nav {
    top: 81px;
  }
  .md-section-nav-container,
  .results-section-nav-container {
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
  .md-section-nav-link,
  .results-section-nav-link {
    padding: var(--space-xs) var(--space-xs);
    font-size: 11px;
  }
}

/* ════════════════════════════════════════════════════════
   ENHANCED BRACKET STYLES (v2)
   ════════════════════════════════════════════════════════ */

.bracket-match-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  flex-shrink: 0;
}

.bracket-match-date {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  white-space: nowrap;
}

.bracket-match-extra {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--fwc-red);
  background: rgba(239, 67, 96, 0.1);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

.bracket-team-name {
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bracket-team-row.winner .bracket-team-name {
  font-weight: 700;
}

/* Champion match highlight */
.bracket-content .bracket-match:last-child:not(:only-child) {
  border-color: var(--fwc-gold, #f2b705);
  background: rgba(242, 183, 5, 0.04);
}

/* ── H2H section: ensure dark background (backup for dark-bg class) ── */
.md-section#md-h2h {
  background: linear-gradient(180deg, #0a0e1a 0%, #101535 100%) !important;
}

/* ============================================
   MD — NARROW MOBILE FIXES (<480px)
   Fixes horizontal overflow on match-detail
   pages at 360-450px viewports.
   ============================================ */
@media (max-width: 480px) {
  /* Rating rows: drop the G/A/KP micro-stats, keep shirt + name + rating */
  .md-rating-row {
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
  .md-rating-stat {
    display: none;
  }
  .md-rating-value {
    min-width: 44px;
    padding: 4px 8px;
  }
  /* H2H meeting rows: the fixed 100px/1fr/80px/80px grid cannot fit
     below ~410px — switch to a wrapping flex layout instead */
  .md-h2h-meeting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
  }
  .md-h2h-competition {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .md-h2h-result,
  .md-h2h-winner {
    flex: 0 0 auto;
  }
}

@media (max-width: 450px) {
  /* Compact score header so flag + score + flag fits comfortably */
  .md-score-display {
    gap: var(--space-md);
  }
  .md-team-block {
    min-width: 84px;
  }
  .md-team-flag {
    width: 48px;
    height: 34px;
  }
  .md-team-name {
    font-size: var(--font-size-small);
  }
  .md-score {
    font-size: 40px;
  }
}

/* ============================================
   RESULTS INDEX — NARROW MOBILE FIXES (<480px)
   Latest-result cards / group matches / ranking
   rows overflow 360-414px viewports.
   ============================================ */
@media (max-width: 480px) {
  .latest-result-card {
    padding: var(--space-md);
  }
  .latest-result-teams {
    gap: var(--space-sm);
  }
  .latest-result-score {
    padding: 6px 12px;
  }
  .group-match {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
  .group-match-date,
  .group-match-score {
    white-space: nowrap;
  }
  .ranking-row {
    gap: var(--space-sm);
    padding: var(--space-md);
  }
  .ranking-stat-label {
    font-size: 9px;
  }
}

/* ============================================
   KNOCKOUT BRACKET — NARROW MOBILE FIXES (<480px)
   The date/venue columns + "View" link forced the
   card ~40px past the viewport, leaking the page.
   ============================================ */
@media (max-width: 480px) {
  .bracket-match {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    padding: var(--space-md);
  }
  .bracket-match-meta {
    min-width: 0;
  }
  .bracket-match-venue {
    min-width: 0;
    flex: 1 1 auto;
  }
  .bracket-match-teams {
    flex: 1 0 100%;
    order: 3;
    margin-top: 2px;
  }
  .bracket-match-link {
    margin-left: auto;
    padding: 6px 10px;
  }
}

/* ============================================
   LATEST RESULTS — ULTRA-NARROW FIXES (<380px)
   Long single-word team names ("Switzerland")
   made the card's min-content wider than a
   320px viewport. Wrap the score under the teams.
   ============================================ */
@media (max-width: 380px) {
  .latest-result-teams {
    flex-wrap: wrap;
    justify-content: center;
  }
  .latest-result-score {
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
  .latest-result-team {
    flex: 0 1 auto;
  }
}