/* =========================================================
   WK 2026 Poule Dashboard — Stylesheet
   Sjiek + strak, oranje signature, gedoseerd festief
   ========================================================= */

/* -----------------------------
   Tokens
   ----------------------------- */
:root {
  /* Colors — light */
  --bg: #FAFAF7;
  --card: #FFFFFF;
  --border: #E8E6E0;
  --border-strong: #D8D5CC;
  --text: #0F1419;
  --text-muted: #6B7280;
  --text-soft: #9CA3AF;

  /* Brand */
  --orange: #FF6B00;
  --orange-deep: #E04E00;
  --orange-soft: #FFF4EC;
  --orange-glow: rgba(255, 107, 0, 0.16);

  /* Vlag accenten */
  --nl-red: #AE1C28;
  --nl-blue: #21468B;

  /* Special */
  --gold: #D4A017;
  --green: #10B981;
  --red: #DC2626;
  --purple: #8B5CF6;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04), 0 1px 3px rgba(15, 20, 25, 0.06);
  --shadow-md: 0 1px 3px rgba(15, 20, 25, 0.08), 0 4px 12px rgba(255, 107, 0, 0.04);
  --shadow-lg: 0 4px 6px rgba(15, 20, 25, 0.05), 0 10px 24px rgba(255, 107, 0, 0.06);
  --shadow-hover: 0 1px 3px rgba(15, 20, 25, 0.08), 0 8px 20px rgba(255, 107, 0, 0.10);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Spacing scale (8px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Type scale */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-display: 80px;

  /* Layout */
  --container: 1200px;
  --topbar-h: 64px;
  --bottomnav-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* Background patterns */
  --hero-gradient: linear-gradient(135deg, #FF6B00 0%, #FFA552 60%, #FFD7A8 100%);
  --hero-gradient-soft: linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(255, 165, 82, 0.04) 100%);
}

[data-theme="dark"] {
  --bg: #0E0F12;
  --card: #16181D;
  --border: #252830;
  --border-strong: #2F333D;
  --text: #F2F3F5;
  --text-muted: #9CA3AF;
  --text-soft: #6B7280;
  --orange-soft: rgba(255, 107, 0, 0.12);
  --orange-glow: rgba(255, 107, 0, 0.24);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(255, 107, 0, 0.08);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.30), 0 10px 24px rgba(255, 107, 0, 0.10);
  --shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.40), 0 8px 20px rgba(255, 107, 0, 0.16);
  --hero-gradient: linear-gradient(135deg, #B14B00 0%, #FF6B00 60%, #FF9F4A 100%);
  --hero-gradient-soft: linear-gradient(135deg, rgba(255, 107, 0, 0.16) 0%, rgba(255, 165, 82, 0.06) 100%);
}

/* Your.Online theme — based on official Y.O. deck system tokens
   (forest #014023 primary, mint #23FB98 + lime #CCFF33 accents, Manrope font) */
[data-theme="yo"] {
  --bg: #F3F1EA;              /* cream-2: warm neutral */
  --card: #FFFFFF;            /* paper */
  --border: #DCD8C9;          /* rule: subtle on cream */
  --border-strong: #B4AB8D;   /* tan mid */
  --text: #0D0C13;            /* ink */
  --text-muted: #43414E;      /* ink-soft */
  --text-soft: #80775E;       /* tan-dark */
  --orange: #014023;          /* forest = primary accent */
  --orange-deep: #002914;     /* forest-dark = hover */
  --orange-soft: #E5F9EE;     /* very light mint tint = soft highlight bg */
  --orange-glow: rgba(35, 251, 152, 0.24);
  --gold: #CCFF33;            /* lime = podium / champion */
  --green: #2FAE5E;           /* pos */
  --red: #C7372F;             /* neg */
  --nl-red: #AE1C28;
  --nl-blue: #21468B;
  --shadow-sm: 0 1px 2px rgba(1, 64, 35, 0.04), 0 1px 3px rgba(13, 12, 19, 0.06);
  --shadow-md: 0 1px 3px rgba(1, 64, 35, 0.08), 0 4px 12px rgba(35, 251, 152, 0.05);
  --shadow-lg: 0 4px 6px rgba(1, 64, 35, 0.06), 0 10px 24px rgba(35, 251, 152, 0.08);
  --shadow-hover: 0 1px 3px rgba(1, 64, 35, 0.10), 0 8px 20px rgba(35, 251, 152, 0.14);
  --hero-gradient: linear-gradient(135deg, #014023 0%, #014023 50%, #23FB98 100%);
  --hero-gradient-soft: linear-gradient(135deg, rgba(1, 64, 35, 0.08) 0%, rgba(35, 251, 152, 0.04) 100%);
}

[data-theme="yo"] body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
[data-theme="yo"] h1, [data-theme="yo"] h2, [data-theme="yo"] h3, [data-theme="yo"] h4 {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.018em;
}
[data-theme="yo"] .tnum, [data-theme="yo"] .num {
  font-family: 'Manrope', system-ui, sans-serif;
  font-feature-settings: "tnum";
}
[data-theme="yo"] .brand-mark {
  background: var(--orange);  /* forest */
  box-shadow: 0 2px 6px rgba(35, 251, 152, 0.28);
}
[data-theme="yo"] .badge.gold {
  background: var(--gold);
  color: #002914;
  border-color: var(--gold);
  font-weight: 700;
}

/* -----------------------------
   Reset
   ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
a { color: var(--orange); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--orange-deep); }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.2; margin: 0; font-weight: 600; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* -----------------------------
   App shell
   ----------------------------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  height: var(--topbar-h);
  padding: 0 var(--s-5);
  display: flex; align-items: center; gap: var(--s-5);
}
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text);
  flex-shrink: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 36px; height: 36px;
  background: var(--orange);
  color: white;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.04em;
  box-shadow: 0 2px 6px var(--orange-glow);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-title { font-weight: 600; font-size: var(--fs-md); letter-spacing: -0.02em; }
.brand-subtitle { font-size: var(--fs-xs); color: var(--text-muted); }

.topnav {
  display: flex; gap: 2px;
  flex: 1;
  margin-left: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  position: relative;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}
.topnav a:hover { color: var(--text); background: var(--orange-soft); }
.topnav a.active { color: var(--orange); background: var(--orange-soft); }

.topbar-actions { display: flex; gap: var(--s-2); align-items: center; }
.icon-btn {
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-soft); }
.icon-btn .icon-moon, .icon-btn .icon-yo { display: none; }
[data-theme="dark"] .icon-btn .icon-sun, [data-theme="dark"] .icon-btn .icon-yo { display: none; }
[data-theme="dark"] .icon-btn .icon-moon { display: block; }
[data-theme="yo"] .icon-btn .icon-sun, [data-theme="yo"] .icon-btn .icon-moon { display: none; }
[data-theme="yo"] .icon-btn .icon-yo { display: block; color: #014023; }

.topbar-model-select {
  appearance: none; -webkit-appearance: none;
  height: 38px;
  padding: 0 28px 0 12px;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FF6B00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  max-width: 160px;
  transition: border-color var(--t-fast) var(--ease);
}
.topbar-model-select:hover { border-color: var(--orange); }
.topbar-model-select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.topbar-model-select.is-hidden { display: none; }

@media (max-width: 768px) {
  .topbar-model-select { max-width: 110px; font-size: var(--fs-xs); padding: 0 24px 0 8px; }
}

.bookies-toggle-btn { position: relative; }

.data-freshness {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--card);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: border-color var(--t-fast) var(--ease);
}
.data-freshness::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}
.data-freshness:hover { border-color: var(--border-strong); }
[data-theme="dark"] .data-freshness { background: var(--card); color: var(--text-muted); }

@media (max-width: 1100px) {
  .data-freshness { display: none; }
}
.bookies-toggle-btn::after {
  content: ""; position: absolute; right: 6px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--card);
}
.bookies-toggle-btn.is-off { opacity: 0.55; }
.bookies-toggle-btn.is-off::after { background: var(--text-soft); }

/* Vlag-streep accent */
.flag-strip {
  height: 3px; display: flex; width: 100%;
}
.flag-strip-r { flex: 1; background: var(--nl-red); }
.flag-strip-w { flex: 1; background: #FFFFFF; }
.flag-strip-b { flex: 1; background: var(--nl-blue); }
[data-theme="dark"] .flag-strip-w { background: #E5E7EB; }

/* -----------------------------
   Main page
   ----------------------------- */
.page {
  flex: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
  animation: pageIn var(--t-base) var(--ease) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Section header */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p { color: var(--text-muted); margin: 4px 0 0; font-size: var(--fs-sm); }
.section-head-meta { color: var(--text-muted); font-size: var(--fs-sm); }

/* -----------------------------
   Cards
   ----------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card.is-clickable { cursor: pointer; }
.card.is-clickable:hover {
  border-color: color-mix(in srgb, var(--orange) 50%, var(--border));
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--orange-soft);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.card-header h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.card-header .meta { color: var(--text-muted); font-size: var(--fs-xs); }
.card-body { padding: var(--s-5); }
.card-footer {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* -----------------------------
   Hero (Home)
   ----------------------------- */
.hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: var(--s-7) var(--s-6);
  background: var(--hero-gradient);
  color: white;
  margin-bottom: var(--s-6);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.18);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.hero-content { position: relative; max-width: 720px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 6px 12px; border-radius: 99px;
  margin-bottom: var(--s-4);
  backdrop-filter: blur(8px);
}
.hero h1 {
  font-size: clamp(40px, 7vw, var(--fs-display));
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0;
}
.hero p { font-size: var(--fs-lg); opacity: 0.92; margin: var(--s-3) 0 var(--s-5); max-width: 540px; }

.countdown {
  display: flex; gap: var(--s-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.countdown-cell {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  min-width: 80px;
  text-align: center;
}
.countdown-cell .num {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
}
.countdown-cell .label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  opacity: 0.86;
}

/* -----------------------------
   Live indicator + banner
   ----------------------------- */
.live-banner {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  position: relative;
  animation: livePulse 1.6s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255, 107, 0, 0); }
}
.live-text { color: var(--text-muted); }
.live-text strong { color: var(--text); font-weight: 600; }

/* -----------------------------
   Leaderboard
   ----------------------------- */
.leaderboard {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row:hover { background: var(--orange-soft); }
.leaderboard-row.bookies { background: color-mix(in srgb, var(--text) 4%, transparent); }
.leaderboard-row.you { background: var(--orange-soft); }

.lb-rank {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-align: center;
}
.lb-rank.top1 { color: var(--gold); }
.lb-rank.top2 { color: #94A3B8; }
.lb-rank.top3 { color: #C2734A; }

.lb-name {
  display: flex; align-items: center; gap: var(--s-3);
  font-weight: 500;
  min-width: 0;
}
.lb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--orange-soft);
  flex-shrink: 0;
}
.lb-name-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name-meta { color: var(--text-muted); font-size: var(--fs-xs); }

.lb-points {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
}
.lb-trend {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 32px; text-align: right;
}
.lb-trend.up { color: var(--green); }
.lb-trend.down { color: var(--red); }

/* -----------------------------
   Match card
   ----------------------------- */
.match-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base) var(--ease);
  position: relative;
}
.match-card.is-clickable { cursor: pointer; }
.match-card.is-clickable:hover {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--border));
  box-shadow: var(--shadow-md);
}
.match-card.live {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-glow), var(--shadow-sm);
}
.match-card .team {
  display: flex; align-items: center; gap: var(--s-3);
}
/* team-link: inherits .team-name styles, no browser link decoration */
/* team-link / team-flag-link: no browser decoration, inherits context styling */
a.team-link, a.team-flag-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  display: contents;
}
a.team-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.match-card .team-name {
  font-weight: 600;
  font-size: var(--fs-md);
}
.match-card .team-name.tbd { color: var(--text-soft); font-weight: 500; }
.match-card .team-flag {
  width: 28px; height: 22px;
  border-radius: 3px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
/* Fallback grey box only when team has no flag class */
.match-card .team-flag:not(.fi) {
  background-color: var(--border);
}
.match-card .team.away { justify-content: flex-end; }
.match-card .team.away .team-flag { order: 2; }
.match-card .team.away .team-name { order: 1; text-align: right; }

.match-card .vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  min-width: 92px;
}
.match-card .score {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.match-card .score-vs {
  margin: 0 6px;
  color: var(--text-soft);
  font-weight: 500;
}
/* Predicted score: muted, dashed border hint */
.match-card .vs-predicted { opacity: 0.72; }
.match-card .score-predicted {
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1.5px dashed var(--border);
  padding-bottom: 2px;
}
.match-card .meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.match-card .live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--orange);
  color: white;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-card .odds-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border);
}
.odds-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px; border-radius: var(--r-sm);
  background: var(--bg);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.odds-cell .pct {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700; font-size: var(--fs-md); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.odds-cell.fav .pct { color: var(--orange); }

.odds-source {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 10px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* -----------------------------
   Stat tile
   ----------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}
.stat-tile .label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.stat-tile .value {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-tile .sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
}
.stat-tile .sub.up { color: var(--green); }
.stat-tile .sub.down { color: var(--red); }

/* -----------------------------
   Buttons & filters
   ----------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}
.btn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-soft); }
.btn.is-active { background: var(--orange); color: white; border-color: var(--orange); }
.btn-primary {
  background: var(--orange); color: white; border-color: var(--orange);
}
.btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); color: white; }

.filter-row {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.pool-pill-bar {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.pool-pill {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--card); color: var(--text-muted); font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.pool-pill:hover { border-color: var(--orange); color: var(--orange); }
.pool-pill.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }

/* -----------------------------
   Tabs
   ----------------------------- */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 16px;
  border: none; background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--orange); border-bottom-color: var(--orange); }

/* -----------------------------
   Badges
   ----------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--orange-soft);
  color: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 20%, transparent);
}
.badge.gold { background: rgba(212, 160, 23, 0.12); color: var(--gold); border-color: rgba(212, 160, 23, 0.3); }
.badge.purple { background: rgba(139, 92, 246, 0.12); color: var(--purple); border-color: rgba(139, 92, 246, 0.3); }
.badge.green { background: rgba(16, 185, 129, 0.12); color: var(--green); border-color: rgba(16, 185, 129, 0.3); }
.badge.muted { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
.badge.orange { background: var(--orange-soft); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 30%, transparent); }

.badge-tile {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base) var(--ease);
}
.badge-tile.unlocked {
  animation: badgePop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.badge-tile.locked { opacity: 0.45; filter: grayscale(0.8); }
@keyframes badgePop {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}
.badge-tile .icon {
  font-size: 40px;
  margin-bottom: var(--s-2);
  filter: drop-shadow(0 2px 4px var(--orange-glow));
}
.badge-tile .name {
  font-weight: 600;
  margin-bottom: 2px;
}
.badge-tile .desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.badge-tile .rarity {
  margin-top: var(--s-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.badge-tile .rarity.common { color: var(--text-muted); }
.badge-tile .rarity.rare { color: var(--orange); }
.badge-tile .rarity.epic { color: var(--purple); }
.badge-tile .rarity.legendary { color: var(--gold); }

/* -----------------------------
   Two-sided Bracket
   ----------------------------- */
.bracket-two-sided {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: stretch;
  overflow-x: auto;
  padding: var(--s-3) 0;
  max-width: 100%;
}
.bracket-half {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  align-items: stretch;
}
.bracket-half-left { direction: ltr; }
.bracket-half-right { direction: ltr; }
.bracket-half .bracket-round {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--s-2);
}
.bracket-half .bracket-round h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
  text-align: center;
}
.bracket-half .bracket-match {
  padding: 8px 10px;
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}
.bracket-half .bracket-match .text-muted.fs-xs {
  font-size: 10px;
  margin-bottom: 4px;
}
.bracket-half .bracket-match .team-row {
  padding: 2px 0;
  font-size: var(--fs-xs);
  gap: 4px;
}
.bracket-final {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  max-width: 240px;
  padding: var(--s-4);
  background: linear-gradient(135deg, rgba(212,160,23,0.06) 0%, var(--card) 70%);
  border: 1px solid rgba(212, 160, 23, 0.4);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.10);
}
.bracket-final h4 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-3);
}
.bracket-final .bracket-match { width: 100%; }
.bracket-empty {
  padding: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

@media (max-width: 1024px) {
  .bracket-two-sided {
    grid-template-columns: 1fr;
  }
  .bracket-half {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    overflow-x: auto;
  }
  .bracket-final { max-width: none; }
}

/* -----------------------------
   Bracket V2 — shared by Forecast and Toernooi knock-out tabs
   CSS Grid with FIFA-pairing aligned cards
   ----------------------------- */
.bv2-winner-hero {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  background: linear-gradient(135deg, rgba(255,107,0,0.10) 0%, rgba(212,160,23,0.06) 50%, var(--card) 100%);
  border: 1px solid rgba(212, 160, 23, 0.40);
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.12);
}
.bv2-winner-hero-icon { font-size: 38px; line-height: 1; }
.bv2-winner-hero-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bv2-winner-hero-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-muted); font-weight: 700; }
.bv2-winner-hero-team { display: flex; align-items: center; gap: var(--s-2); margin: 2px 0; }
.bv2-winner-hero-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold); }
.bv2-winner-hero-stats { display: flex; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text); flex-wrap: wrap; }
.bv2-winner-hero-stats strong { color: var(--orange); font-variant-numeric: tabular-nums; }

.bracket-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-3);
  align-items: stretch;
  padding: var(--s-4) 0;
  overflow-x: auto;
  --bv2-row-h: 96px;
  --bv2-card-min: 130px;
}
.bv2-half {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bv2-headers {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--bv2-card-min), 1fr));
  gap: 0 var(--s-3);
  margin-bottom: var(--s-2);
}
.bv2-headers > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-align: center;
  font-weight: 700;
}
.bv2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--bv2-card-min), 1fr));
  grid-template-rows: repeat(8, var(--bv2-row-h));
  gap: 6px var(--s-3);
}
.bv2-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  position: relative;
}
.bv2-cell > .bv2-match {
  width: 100%;
}

/* Center column with SFs + Final, 8-row grid for vertical alignment with QFs */
.bv2-center {
  display: grid;
  grid-template-rows: auto repeat(8, var(--bv2-row-h));
  gap: 0;
  min-width: 220px;
  align-items: center;
}
.bv2-center-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  text-align: center;
  font-weight: 700;
  grid-row: 1;
  margin-bottom: var(--s-2);
}
.bv2-sf {
  display: flex;
  align-items: center;
}
.bv2-sf > .bv2-match { width: 100%; }
.bv2-sf-top { grid-row: 3 / span 2; }     /* aligns with center of QFs (rows 1-4) */
.bv2-final-wrap { grid-row: 5 / span 2; align-self: center; }
.bv2-sf-bot { grid-row: 7 / span 2; }     /* aligns with center of QFs (rows 5-8) */
.bv2-final-wrap {
  background: linear-gradient(135deg, rgba(212,160,23,0.10) 0%, var(--card) 70%);
  border: 1.5px solid var(--gold);
  border-radius: var(--r-md);
  padding: var(--s-3);
  box-shadow: 0 6px 20px rgba(212, 160, 23, 0.14);
}
.bv2-final-label {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: var(--s-2);
}
.bv2-final-wrap .bv2-match {
  border: 1px solid var(--gold);
  background: var(--card);
}

/* Match card */
.bv2-match {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.bv2-match:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-sm);
}
.bv2-match-skel {
  border-style: dashed;
  opacity: 0.5;
  text-align: center;
  padding: 12px 10px;
}
.bv2-match-num {
  position: absolute;
  top: -7px;
  left: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 99px;
  z-index: 1;
}
.bv2-match-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
  gap: 4px;
}
.bv2-match-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.bv2-match-venue { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; max-width: 50%; }
.bv2-team-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0;
  font-size: var(--fs-xs);
  min-width: 0;
  cursor: default;
  border-radius: 4px;
  transition: background var(--t-fast) var(--ease);
}
.bv2-team-row[data-team] { cursor: pointer; }
.bv2-team-row[data-team]:hover { background: var(--orange-soft); }
.bv2-team-cell {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
}
.bv2-team-name {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* TBD source labels (e.g. "Winnaar Poule A", "Beste #3 (E/F)") — wrap on 2 lines, smaller font */
.bv2-team-row.is-tbd .bv2-team-name {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 500;
  font-size: 10.5px;
  white-space: normal;
  line-height: 1.25;
  overflow: visible;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* When team-name wraps an <em.text-muted> (predicted-mode TBD fallback), let it wrap */
.bv2-team-name:has(em.text-muted) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 10.5px;
  line-height: 1.25;
}
.bv2-team-name em.text-muted {
  font-style: italic;
  font-weight: 500;
  color: var(--text-muted);
  display: block;
  white-space: normal;
}
.bv2-team-row.winner {
  font-weight: 700;
  color: var(--orange);
}
.bv2-team-row.winner .bv2-team-name { font-weight: 800; }
.bv2-team-row.is-route-highlighted {
  background: var(--orange-soft);
  color: var(--orange);
  font-weight: 700;
}
.bv2-score {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--text);
  min-width: 18px;
  text-align: right;
}
.bv2-team-row.winner .bv2-score { color: var(--orange); }
.bv2-match-prob {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  font-size: 10px;
  text-align: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.bv2-occurrence {
  display: inline-block;
  padding: 0 6px;
  font-size: 9px;
  color: var(--orange);
  background: var(--orange-soft);
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .bracket-v2 {
    grid-template-columns: 1fr;
    gap: var(--s-4);
    --bv2-row-h: 86px;
  }
  .bv2-half { overflow-x: auto; }
  .bv2-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--s-3);
    padding-top: 0;
  }
  .bv2-center-header { display: none; }
  .bv2-sf-top, .bv2-sf-bot, .bv2-final-wrap { grid-row: auto; }
  .bv2-final-wrap { flex: 1; max-width: 320px; }
  .bv2-headers, .bv2-grid { min-width: 480px; }
}

/* Legacy v1 bracket styles below (kept for backwards-compat with other pages) */
.forecast-bracket {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: var(--s-4) 0;
  gap: 0;
  min-height: 720px;
}
.forecast-half {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.forecast-half-right {
  flex-direction: row-reverse;
}
.forecast-round {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0;
  position: relative;
}
.forecast-round h4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
  font-weight: 700;
  margin: 0 0 var(--s-2);
}
.forecast-round .forecast-match { margin: 4px 8px; }

/* The match card itself — compact */
.forecast-match {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  transition: border-color var(--t-fast) var(--ease);
}
.forecast-match:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-sm);
}
.forecast-match-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
  gap: 4px;
}
.forecast-match-date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forecast-team-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0;
  font-size: var(--fs-xs);
  min-width: 0;
}
.forecast-team-cell {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
}
.forecast-team-code {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.forecast-team-row.winner {
  font-weight: 700;
  color: var(--orange);
}
.forecast-team-row.winner .forecast-team-code { font-weight: 800; }
.forecast-pred-score-inline {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--text);
  min-width: 18px;
  text-align: right;
}
.forecast-team-row.winner .forecast-pred-score-inline { color: var(--orange); }
.forecast-match-prob {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  font-size: 10px;
  text-align: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.forecast-occurrence {
  display: inline-block;
  padding: 0 6px;
  font-size: 9px;
  color: var(--orange);
  background: var(--orange-soft);
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Final card centerpiece */
.forecast-final {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-width: 200px;
  max-width: 240px;
  padding: var(--s-5) var(--s-3);
  background: linear-gradient(135deg, rgba(212,160,23,0.08) 0%, var(--card) 70%);
  border: 1px solid rgba(212, 160, 23, 0.4);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(212, 160, 23, 0.10);
  margin: 0 var(--s-3);
  align-self: center;
  flex: 0 0 auto;
}
.forecast-final h4 {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: var(--s-3);
  text-align: center;
}
.forecast-final .forecast-match {
  border: 1.5px solid var(--gold);
  background: var(--card);
}

/* CONNECTOR LINES — left half */
.forecast-half-left .forecast-round:not(:last-child) .forecast-match::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--border-strong, var(--border));
}
.forecast-half-left .forecast-round:not(:last-child) .forecast-match:nth-child(odd)::before {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  height: calc(50% + 8px);
  width: 1px;
  background: var(--border-strong, var(--border));
}
.forecast-half-left .forecast-round:not(:last-child) .forecast-match:nth-child(even)::before {
  content: '';
  position: absolute;
  right: -9px;
  bottom: 50%;
  height: calc(50% + 8px);
  width: 1px;
  background: var(--border-strong, var(--border));
}

/* CONNECTOR LINES — right half (mirrored: lines extend to LEFT) */
.forecast-half-right .forecast-round:not(:last-child) .forecast-match::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--border-strong, var(--border));
}
.forecast-half-right .forecast-round:not(:last-child) .forecast-match:nth-child(odd)::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  height: calc(50% + 8px);
  width: 1px;
  background: var(--border-strong, var(--border));
}
.forecast-half-right .forecast-round:not(:last-child) .forecast-match:nth-child(even)::before {
  content: '';
  position: absolute;
  left: -9px;
  bottom: 50%;
  height: calc(50% + 8px);
  width: 1px;
  background: var(--border-strong, var(--border));
}

@media (max-width: 1024px) {
  .forecast-bracket {
    flex-direction: column;
    min-height: auto;
  }
  .forecast-half-right { flex-direction: row; }
  .forecast-final { margin: var(--s-3) auto; }
}

/* Legacy column-bracket (kept for backwards-compat with non-knockout pages) */
.bracket {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  padding: var(--s-3) 0;
}
.bracket-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--s-3);
  min-width: 220px;
}
.bracket-round h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.bracket-match {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.bracket-match:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-sm);
}
.bracket-match .team-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0;
}
.bracket-match .team-row.winner { font-weight: 600; color: var(--orange); }

/* -----------------------------
   Group standings
   ----------------------------- */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
}
.group-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--orange-soft);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.group-table th, .group-table td {
  padding: 8px 12px;
  text-align: left;
}
.group-table th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.group-table td { border-bottom: 1px solid var(--border); }
.group-table tr:last-child td { border-bottom: none; }
.group-table tr.qualified td { background: var(--orange-soft); }
.group-table .team-cell {
  display: flex; align-items: center; gap: 8px;
}
.group-table .pts {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.group-table .num {
  font-variant-numeric: tabular-nums;
  text-align: center;
  width: 32px;
}

/* -----------------------------
   Probabilities
   ----------------------------- */
.prob-bar {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  margin: 6px 0;
}
.prob-bar > span {
  display: block; height: 100%;
}
.prob-bar .home { background: var(--orange); }
.prob-bar .draw { background: var(--text-soft); }
.prob-bar .away { background: var(--nl-blue); }

.winner-row {
  display: grid;
  grid-template-columns: 36px 28px 1fr 60px 80px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.winner-row:last-child { border-bottom: none; }
.winner-row .rank {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.winner-row .pct {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.winner-row .bar-cell {
  height: 6px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}
.winner-row .bar-cell > span {
  display: block; height: 100%;
  background: var(--hero-gradient);
}

/* -----------------------------
   Predictions list (per persoon detail)
   ----------------------------- */
.pred-list {
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.pred-row {
  display: grid;
  grid-template-columns: 80px 1fr 60px 60px 1fr 80px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pred-row .date { color: var(--text-muted); font-size: var(--fs-xs); }
.pred-row .team-h, .pred-row .team-a {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
}
.pred-row .team-a { justify-content: flex-end; }
.pred-row .pred {
  text-align: center;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.pred-row .actual {
  text-align: center;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pred-row .actual.tbd { color: var(--text-soft); }
.pred-row .pts {
  text-align: right;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--orange);
}
.pred-row.exact { border-color: color-mix(in srgb, var(--orange) 50%, var(--border)); background: var(--orange-soft); }
.pred-row.locked .pred { filter: blur(4px); }

/* -----------------------------
   Lock notice
   ----------------------------- */
.lock-notice {
  text-align: center;
  padding: var(--s-7);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text-muted);
}
.lock-notice .icon { font-size: 40px; margin-bottom: var(--s-3); }
.lock-notice h3 { color: var(--text); margin-bottom: 6px; }

/* Pre-tournament lock page */
.lock-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: 12px;
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.lock-placeholder-icon { font-size: 48px; }
.lock-placeholder h2 { margin: 0; color: var(--text); }
.lock-placeholder p { margin: 0; }
.lock-placeholder-days { color: var(--orange); font-weight: 600; }

/* Locked nav items (pre-tournament) */
.nav-locked { opacity: 0.45; }
.subnav-item.is-locked { opacity: 0.45; }

/* -----------------------------
   Skeleton loader
   ----------------------------- */
.loading-skeleton { display: flex; flex-direction: column; gap: var(--s-3); }
.skeleton {
  background: linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--orange-soft) 50%, var(--card)) 50%, var(--card) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.skeleton-hero { height: 240px; }
.skeleton-row { height: 60px; }
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -----------------------------
   Score-update flash
   ----------------------------- */
.flash {
  animation: flash 800ms var(--ease);
}
@keyframes flash {
  0%, 100% { background: var(--card); }
  20% { background: var(--orange-soft); }
}

/* -----------------------------
   Footer
   ----------------------------- */
.appfoot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.appfoot-inner { max-width: var(--container); margin: 0 auto; }
.appfoot-content {
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
}
.dot { color: var(--text-soft); }

/* -----------------------------
   Bottom nav (mobile)
   ----------------------------- */
.bottomnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  height: var(--bottomnav-h);
}
.bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; padding: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  transition: color var(--t-fast) var(--ease);
}
.bn-item.active { color: var(--orange); }
.bn-item:hover { color: var(--text); }

.more-sheet {
  position: fixed; inset: 0;
  z-index: 70;
  background: rgba(15, 20, 25, 0.4);
  display: none;
  align-items: flex-end;
}
.more-sheet[aria-hidden="false"] { display: flex; animation: fadeIn var(--t-base) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.more-sheet-content {
  background: var(--card);
  width: 100%;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 12px var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  animation: slideUp var(--t-base) var(--ease);
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: none; }
}
.more-sheet-handle {
  width: 36px; height: 4px;
  border-radius: 99px;
  background: var(--border);
  margin: 0 auto var(--s-4);
}
.more-sheet h3 { margin-bottom: var(--s-3); font-size: var(--fs-md); }
.more-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
}
.more-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-xs);
}
.more-tile-icon { font-size: 24px; }

/* -----------------------------
   Model selector (Forecast page)
   ----------------------------- */
.model-selector-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-sm);
}
.model-selector-row {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
}
.model-selector-label {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 220px; cursor: pointer;
}
.model-selector-icon { font-size: 24px; }
.model-selector-title {
  display: block; font-weight: 700; font-size: var(--fs-md);
  letter-spacing: -0.01em;
}
.model-selector-sub {
  display: block; font-size: var(--fs-xs); color: var(--text-muted);
  margin-top: 2px;
}
.model-dropdown {
  appearance: none; -webkit-appearance: none;
  padding: 10px 36px 10px 14px;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF6B00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  min-width: 180px;
  transition: border-color var(--t-fast) var(--ease);
}
.model-dropdown:hover { border-color: var(--orange); }
.model-dropdown:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }

/* -----------------------------
   Podium grid (Forecast page)
   ----------------------------- */
.podium-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 960px) {
  .podium-grid {
    grid-template-columns: 1fr 1fr 1.2fr 1.4fr;
  }
}
@media (max-width: 768px) {
  .podium-grid { grid-template-columns: 1fr; }
}
.podium-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base) var(--ease);
}
.podium-card.podium-winner {
  border-color: rgba(212, 160, 23, 0.5);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--card) 70%);
  box-shadow: 0 1px 3px rgba(212, 160, 23, 0.20), 0 4px 16px rgba(212, 160, 23, 0.10);
}
.podium-card.podium-runner-up {
  border-color: rgba(148, 163, 184, 0.45);
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.06) 0%, var(--card) 70%);
}
.podium-card.podium-sf {
  border-color: rgba(255, 107, 0, 0.30);
}
.podium-rank {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.podium-winner .podium-rank { color: var(--gold); }
.podium-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px;
}
.podium-item:hover { background: var(--orange-soft); border-radius: var(--r-sm); }
.podium-card.podium-winner .podium-item .fw-700 { color: var(--gold); font-size: var(--fs-lg); }

/* -----------------------------
   Sub-navigation (in-page tabs)
   ----------------------------- */
.subnav {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--s-5);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 18px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.subnav-item:hover { color: var(--text); }
.subnav-item.is-active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  font-weight: 600;
}
@media (max-width: 768px) {
  .subnav-item { padding: 10px 12px; font-size: var(--fs-xs); }
}

/* -----------------------------
   Team players section
   ----------------------------- */
.player-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px;
  gap: 2px;
}
.player-toggle-btn {
  padding: 6px 14px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.player-toggle-btn:hover:not(.is-disabled):not(:disabled) {
  color: var(--text);
}
.player-toggle-btn.is-active {
  background: var(--card);
  color: var(--orange);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.player-toggle-btn.is-disabled, .player-toggle-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.injured-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.injured-item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.injured-item:last-child { border-bottom: none; }
.injured-severity {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.injured-severity.major {
  color: var(--red);
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.injured-severity.minor {
  color: #c47600;
  background: rgba(196, 118, 0, 0.10);
  border: 1px solid rgba(196, 118, 0, 0.25);
}

/* -----------------------------
   Confetti canvas
   ----------------------------- */
#confetti-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 80;
}

/* -----------------------------
   NL Win-prob sticker (sticky)
   ----------------------------- */
.nl-sticker {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 16px;
  z-index: 55;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-sm);
  transition: all var(--t-fast) var(--ease);
  min-width: 132px;
}
.nl-sticker:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-hover);
  color: var(--text);
  transform: translateY(-1px);
}
.nl-sticker-flag {
  display: inline-block;
  width: 28px; height: 21px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.nl-sticker-text { display: flex; flex-direction: column; line-height: 1.05; gap: 2px; }
.nl-sticker-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
.nl-sticker-pct {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .nl-sticker {
    top: auto;
    bottom: calc(var(--bottomnav-h) + 12px);
    right: 12px;
    padding: 8px 10px;
    min-width: 100px;
  }
  .nl-sticker-flag { width: 22px; height: 16px; }
  .nl-sticker-pct { font-size: 15px; }
  .nl-sticker-label { font-size: 9px; }
}

/* NL nav highlight */
.nav-nl {
  background: var(--orange-soft);
  color: var(--orange) !important;
  font-weight: 600;
}
.nav-nl:hover { background: color-mix(in srgb, var(--orange) 18%, transparent) !important; }
.nav-nl.active { background: var(--orange) !important; color: white !important; }

/* -----------------------------
   NL page-specific
   ----------------------------- */
.nl-hero {
  position: relative;
  background: linear-gradient(135deg, #FF6B00 0%, #C8102E 50%, #21468B 100%);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-6);
  color: white;
  margin-bottom: var(--s-6);
  overflow: hidden;
}
.nl-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
}
.nl-hero-content { position: relative; max-width: 760px; }
.nl-hero h1 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: var(--s-2) 0;
}
.nl-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.nl-hero-stat {
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.nl-hero-stat .num {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1;
}
.nl-hero-stat .lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  opacity: 0.86;
}

@media (max-width: 768px) {
  .nl-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .nl-hero { padding: var(--s-5) var(--s-4); }
}

.nl-stage-bar {
  display: flex;
  width: 100%;
  height: 36px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}
.nl-stage-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: white;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.path-stage {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.path-stage-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.path-stage-head h4 { font-size: var(--fs-md); margin: 0; }
.path-opp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--r-sm);
}
.path-opp:hover { background: var(--orange-soft); }
.path-opp .left { display: flex; align-items: center; gap: 8px; }
.path-opp .pct {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}

.strength-breakdown {
  display: grid; grid-template-columns: 80px 1fr 50px; gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.strength-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.strength-bar > span {
  display: block;
  height: 100%;
  background: var(--hero-gradient);
  border-radius: 99px;
}
.strength-bar.negative > span { background: linear-gradient(90deg, var(--text-muted) 0%, var(--text-soft) 100%); }
.strength-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.strength-value { font-family: 'Inter Tight','Inter',sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-xs); text-align: right; }
/* Strength meter — full gradient track with position marker */
.strength-meter {
  height: 4px;
  background: linear-gradient(90deg, var(--border) 0%, var(--text-muted) 30%, var(--orange) 100%);
  border-radius: 99px;
  position: relative;
}
.strength-meter-dot {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  background: var(--orange);
  border-radius: 50%;
  border: 2px solid var(--bg);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* -----------------------------
   Utility
   ----------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.text-muted { color: var(--text-muted); }
.text-orange { color: var(--orange); }
.tnum { font-variant-numeric: tabular-nums; font-family: 'Inter Tight', 'Inter', sans-serif; }
.fw-700 { font-weight: 700; }
.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }
.divider { height: 1px; background: var(--border); margin: var(--s-5) 0; }
.empty {
  text-align: center; padding: var(--s-7);
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}

/* -----------------------------
   Responsive
   ----------------------------- */
@media (max-width: 960px) {
  .topnav { display: none; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  body { padding-bottom: calc(var(--bottomnav-h) + 8px); }
  .bottomnav { display: flex; }
  .page { padding: var(--s-4) var(--s-3); }
  .hero { padding: var(--s-5) var(--s-4); }
  .hero p { font-size: var(--fs-md); }
  .countdown-cell { min-width: 64px; padding: var(--s-2) var(--s-3); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .match-card { grid-template-columns: 1fr auto 1fr; gap: var(--s-2); padding: var(--s-3); }
  .match-card .vs { min-width: 70px; }
  .match-card .score { font-size: var(--fs-xl); }
  .pred-row { grid-template-columns: 1fr 60px 60px 1fr; }
  .pred-row .date, .pred-row .pts { display: none; }
  .winner-row { grid-template-columns: 28px 24px 1fr 50px 60px; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }
}
@media (max-width: 480px) {
  h1 { font-size: var(--fs-2xl); }
  .hero h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* -----------------------------
   Predictions form wizard
   ----------------------------- */
.predictions-form {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-3);
}
.form-progress { margin-bottom: var(--s-4); }
.form-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.form-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%);
  transition: width 0.3s var(--ease);
}
.form-progress-text {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--text-muted);
  margin-top: 6px;
}
.form-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.form-step h2 { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--s-2); letter-spacing: -0.02em; }
.form-step h3 { font-size: var(--fs-md); font-weight: 600; margin-top: var(--s-3); margin-bottom: var(--s-2); }
.form-step .mt-4 { margin-top: var(--s-4); }
.form-field { margin: var(--s-3) 0; }
.form-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 4px;
}
.form-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}
.form-field input[type="text"]:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.10);
}
.form-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  padding: var(--s-3) 0;
}
.btn-primary {
  padding: 12px 24px;
  background: var(--orange);
  color: white;
  border: none;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.btn-primary:hover { background: var(--orange-deep); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  padding: 12px 20px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: var(--fs-md);
  cursor: pointer;
}
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
.submit-btn { width: 100%; padding: 16px; font-size: var(--fs-lg); }

/* Group tabs */
.group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--s-3) 0;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.group-tab {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-weight: 600;
  font-size: var(--fs-xs);
  cursor: pointer;
  color: var(--text-muted);
}
.group-tab.active {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
.group-pane { display: none; }
.group-pane.active { display: block; }
.group-progress { margin-bottom: var(--s-2); }

/* Score-picker */
.score-picker-row {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: var(--s-2);
  background: var(--bg);
}
.score-picker-meta {
  display: flex;
  gap: var(--s-2);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.score-picker-body {
  display: grid;
  grid-template-columns: 1fr auto 16px auto 1fr;
  align-items: center;
  gap: 6px;
}
.score-picker-team {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  font-weight: 600;
}
.score-picker-team-away { justify-content: flex-end; }
.score-picker-team-name {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: var(--fs-sm);
}
.score-pick {
  padding: 8px 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  text-align: center;
  min-width: 48px;
  cursor: pointer;
}
.score-pick:focus { outline: none; border-color: var(--orange); }
.score-picker-vs { color: var(--text-muted); text-align: center; }

/* ===== Group standings step ===== */
.gs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.gs-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.gs-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--card-bg, var(--bg));
  border-bottom: 1px solid var(--border);
}
.gs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.gs-table th {
  padding: 4px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.gs-table th:nth-child(2) { text-align: left; }
.gs-table td {
  padding: 5px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.gs-table tr:last-child td { border-bottom: none; }
.gs-table td:nth-child(2) { text-align: left; }
.gs-rank { font-weight: 700; font-size: 12px; color: var(--text-muted); width: 20px; }
.gs-team { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; max-width: 130px; }
.gs-row-1 td { background: rgba(var(--orange-rgb, 255,107,0), 0.07); }
.gs-row-2 td { background: rgba(var(--orange-rgb, 255,107,0), 0.04); }
.gs-row-3 td { }
.gs-row-4 td { opacity: 0.45; }
.gs-thirds-table { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.gs-thirds-table th { background: var(--bg); }
.gs-third-advances td { }
.gs-third-out td { opacity: 0.5; }
.gs-third-advances:nth-child(8) td { border-bottom: 2px solid var(--orange) !important; }
.badge-green { background: rgba(34,197,94,.15); color: #16a34a; font-size: 11px; padding: 2px 7px; border-radius: 20px; font-weight: 600; }
.badge-orange { background: rgba(255,107,0,.15); color: var(--orange); font-size: 11px; padding: 2px 7px; border-radius: 20px; font-weight: 600; }

/* KO match cards */
.ko-match-card {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  margin-bottom: var(--s-3);
  background: var(--bg);
}
.ko-match-header { margin-bottom: var(--s-2); }

/* KO winner-chip row */
.ko-winner-chips {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-2) 0;
}
.ko-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
  min-height: 56px;
  text-align: center;
}
.ko-chip:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
}
.ko-chip.is-selected {
  border-color: var(--orange);
  background: var(--orange-soft);
  box-shadow: 0 0 0 2px rgba(255,107,0,0.20);
  color: var(--orange-deep);
}
.ko-chip-name { flex: 1; }
.ko-chip-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.ko-chip-vs {
  color: var(--text-muted);
  font-weight: 700;
  flex-shrink: 0;
}
.ko-chip-confirm {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--green, #16a34a);
  margin-top: 4px;
}
.ko-chip-prompt {
  font-size: var(--fs-xs);
  margin-top: 4px;
}
.ko-progress-label { margin-bottom: var(--s-3); }

/* ===== Filter bar (Tussenstand team/segment filter) ===== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  align-items: center;
}
.filter-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--s-1);
}
.filter-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1.4;
}
.filter-chip:hover { border-color: var(--orange); color: var(--orange); }
.filter-chip.is-active {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
  font-weight: 600;
}

/* Two-column grid (used for Team & Segment ranking side-by-side) */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (max-width: 640px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

/* ===== Score matrix (scores per wedstrijd per deelnemer) ===== */
.score-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
}
.score-matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 600px;
  font-size: var(--fs-sm);
}
.score-matrix thead th {
  background: var(--card);
  border-bottom: 2px solid var(--border);
  padding: 6px 8px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.score-matrix .sm-match-col {
  min-width: 200px;
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 3;
  border-right: 1px solid var(--border);
}
.score-matrix .sm-result-col {
  min-width: 64px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.score-matrix .sm-p-col {
  min-width: 72px;
  max-width: 90px;
  text-align: center;
  padding: 6px 4px;
}
.sm-avatar { font-size: 18px; line-height: 1.2; }
.sm-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  margin: 0 auto;
}
.score-matrix tbody tr { border-bottom: 1px solid var(--border-subtle, var(--border)); }
.score-matrix tbody tr:hover { background: var(--bg); }
.score-matrix tbody .sm-match-col {
  padding: 6px 10px;
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 1;
  border-right: 1px solid var(--border);
}
.sm-match-info {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  font-size: var(--fs-xs);
}
.sm-team-name { white-space: nowrap; }
.sm-score { font-size: var(--fs-sm); }
.score-matrix .sm-cell {
  text-align: center;
  padding: 4px 2px;
  vertical-align: middle;
}
.sm-pts {
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sm-pred {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap;
}
/* Score-type cell colors */
.sc-exact  { background: color-mix(in srgb, var(--orange) 18%, transparent); }
.sc-exact .sm-pts { color: var(--orange-deep, #E04E00); }
.sc-part   { background: color-mix(in srgb, var(--orange) 7%, transparent); }
.sc-part .sm-pts { color: var(--orange); }
.sc-miss .sm-pts { color: var(--text-soft); }
.sm-best   { box-shadow: inset 0 0 0 2px var(--orange); border-radius: 4px; }

/* Totals row */
.sm-totals { border-top: 2px solid var(--border); background: var(--orange-soft); }
.sm-totals .sm-match-col {
  position: sticky;
  left: 0;
  background: var(--orange-soft);
  border-right: 1px solid var(--border);
}
.sm-total-cell { color: var(--orange-deep, #E04E00); font-size: var(--fs-sm); }

/* Bonus picks table */
.bonus-picks-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bonus-picks-table tr:last-child td { border-bottom: none; }
.bonus-picks-table .sc-exact td { background: color-mix(in srgb, var(--orange) 10%, transparent); }
.bonus-picks-table .sc-miss td  { color: var(--text-muted); }

/* Leaderboard subtotals */
.lb-subtotals {
  display: inline-flex;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.lb-sub {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.lb-sub-label {
  font-weight: 500;
  opacity: 0.7;
  margin-left: 1px;
  font-size: 9px;
}
.lb-sub-group {
  background: rgba(107,114,128,0.1);
  color: var(--text-muted);
}
.lb-sub-ko {
  background: rgba(33,70,139,0.1);
  color: var(--nl-blue);
}
.lb-sub-bonus {
  background: rgba(16,185,129,0.12);
  color: #059669;
}
.dark .lb-sub-group { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.dark .lb-sub-ko    { background: rgba(33,70,139,0.25);   color: #93c5fd; }
.dark .lb-sub-bonus { background: rgba(16,185,129,0.2);   color: #34d399; }

/* Match scorers */
.match-scorers {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 6px;
  padding: 8px 12px;
  background: var(--orange-soft);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.dark .match-scorers { background: rgba(255,107,0,0.06); }
/* When only one side has events, span the full width and center */
.match-scorers.home-only,
.match-scorers.away-only {
  grid-template-columns: 1fr;
}
.match-scorers.home-only .scorer-divider,
.match-scorers.home-only .scorer-side.away,
.match-scorers.away-only .scorer-divider,
.match-scorers.away-only .scorer-side.home { display: none; }
.scorer-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scorer-side.home { text-align: right; align-items: flex-end; }
.scorer-side.away { text-align: left;  align-items: flex-start; }
.match-scorers.home-only .scorer-side.home,
.match-scorers.away-only .scorer-side.away {
  text-align: left;
  align-items: flex-start;
}
.scorer-entry {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  line-height: 1.4;
}
.scorer-icons { font-size: 11px; }
.scorer-divider {
  background: var(--border);
  width: 1px;
  align-self: stretch;
}

/* Score matrix bonus row */
.sm-bonus-row { background: rgba(16,185,129,0.06); }
.sm-bonus-row .sm-match-col {
  position: sticky;
  left: 0;
  background: rgba(16,185,129,0.06);
  border-right: 1px solid var(--border);
  color: #059669;
  font-size: var(--fs-xs);
}
.sm-bonus-cell {
  color: #059669;
  font-size: var(--fs-sm);
  padding: 4px 6px;
  text-align: center;
}
.dark .sm-bonus-row { background: rgba(16,185,129,0.08); }
.dark .sm-bonus-row .sm-match-col { background: rgba(16,185,129,0.08); color: #34d399; }
.dark .sm-bonus-cell { color: #34d399; }

/* Per-match bonus indicator inside a cell */
.sm-match-bonus {
  color: #059669;
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
  line-height: 1.2;
}
.dark .sm-match-bonus { color: #34d399; }

/* Bonus total in column header */
.sm-bonus-header {
  color: #059669;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.dark .sm-bonus-header { color: #34d399; }

/* Form two-column row */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } }

/* Scoring explanation grid */
.scoring-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 640px) { .scoring-grid { grid-template-columns: 1fr; } }
.scoring-section h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: 0 0 var(--s-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.scoring-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--fs-sm);
}
.scoring-row strong { white-space: nowrap; color: var(--orange); }

/* Team-picker grid */
.team-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.team-picker-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  font-size: var(--fs-xs);
  text-align: left;
  min-width: 0;
}
.team-picker-tile:hover { border-color: var(--orange); background: var(--orange-soft); }
.team-picker-tile.is-selected {
  border-color: var(--orange);
  background: var(--orange);
  color: white;
  font-weight: 700;
}
.team-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Player picker / search */
.player-picker { margin: var(--s-2) 0; }
.player-picker-input-wrap { position: relative; }
.player-picker-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  background: var(--card);
  color: var(--text);
}
.player-picker-search:focus { outline: none; border-color: var(--orange); }
.player-picker-suggestions {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 10;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.player-picker-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-sm);
}
.player-picker-suggestion:hover { background: var(--orange-soft); }
.player-picker-empty { padding: 8px 12px; color: var(--text-muted); font-size: var(--fs-sm); }
.player-picker-manual-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 10px 12px; border: none; background: none; cursor: pointer;
  font-size: 13px; color: var(--orange); text-align: left;
  border-top: 1px solid var(--border);
}
.player-picker-manual-btn:hover { background: var(--orange-soft); }
.player-manual-form {
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
}
.player-manual-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.player-manual-name, .player-manual-team {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; background: var(--bg); color: var(--text);
}
.player-manual-name:focus, .player-manual-team:focus { outline: none; border-color: var(--orange); }
.player-chip-manual { border-color: var(--orange) !important; background: var(--orange-soft) !important; }
.player-chip-manual-badge {
  font-size: 10px; font-weight: 600; color: var(--orange); background: rgba(255,107,0,.15);
  padding: 1px 5px; border-radius: 10px; text-transform: uppercase;
}
.player-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-2);
}
.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--orange-soft);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.player-chip-rank {
  display: inline-block;
  background: var(--orange);
  color: white;
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
}
.player-chip-team { font-size: 10px; }
.player-chip-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.player-chip-remove:hover { color: var(--orange); }
.player-picker-help { margin-top: 6px; }

/* Review summary */
.review-summary {
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin: var(--s-3) 0;
}
.review-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.review-row:last-child { border-bottom: none; }
.review-row strong { color: var(--orange); }

/* Special pick grid (outsider / underdog) */
.special-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: var(--s-3);
}
.special-pick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.special-pick-btn:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
}
.special-pick-btn.is-selected {
  border-color: var(--orange);
  background: var(--orange-soft);
  font-weight: 600;
}
.special-pick-name { flex: 1; line-height: 1.3; }
.special-pick-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--orange-soft);
  border: 1px solid var(--orange);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.btn-link {
  background: none;
  border: none;
  color: var(--orange);
  cursor: pointer;
  font-size: var(--fs-xs);
  text-decoration: underline;
  padding: 0;
}

/* Locked state */
.form-locked {
  max-width: 560px;
  margin: 80px auto;
  padding: 40px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.form-locked h2 { color: var(--orange); margin-bottom: var(--s-3); }

/* Review-step instructions */
.review-instructions {
  background: var(--orange-soft);
  border: 1px solid var(--orange);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin: var(--s-3) 0;
}
.review-instructions h3 { color: var(--orange); font-size: var(--fs-md); margin-bottom: var(--s-2); }
.review-instructions ol { margin: 0; padding-left: 20px; }
.review-instructions li { margin: 6px 0; }

.download-success {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid #22c55e;
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin: var(--s-3) 0;
}
.download-success strong { color: #16a34a; font-size: var(--fs-md); }
.download-success p { margin: 8px 0 0 0; }
.download-success code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Inter Tight', monospace;
  font-size: var(--fs-xs);
  word-break: break-all;
}

/* Home page CTA banner */
.form-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  background: linear-gradient(135deg, var(--orange-soft) 0%, rgba(255,107,0,0.04) 100%);
  border: 1px solid var(--orange);
  border-radius: var(--r-md);
}
.form-cta-banner-text { display: flex; flex-direction: column; gap: 2px; }
.form-cta-banner-text strong { font-size: var(--fs-md); }

@media (max-width: 720px) {
  .form-step { padding: var(--s-3); }
  .score-picker-body { grid-template-columns: 1fr auto auto auto 1fr; gap: 4px; }
  .ko-winner-chips { flex-wrap: wrap; }
  .ko-chip { min-width: calc(50% - 20px); }
  .team-picker-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* -----------------------------
   Predictions viewer
   ----------------------------- */
.viewer-dropzone {
  border: 2px dashed var(--border-strong, var(--border));
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background: var(--bg);
  margin-bottom: var(--s-4);
  transition: all var(--t-fast) var(--ease);
}
.viewer-dropzone.is-dragover {
  border-color: var(--orange);
  background: var(--orange-soft);
  transform: scale(1.01);
}
.viewer-dropzone-icon { font-size: 48px; margin-bottom: var(--s-2); }
.viewer-dropzone h3 { margin-bottom: var(--s-2); }
.viewer-dropzone p { margin: 4px 0; }
.viewer-pick-btn {
  background: transparent;
  border: none;
  color: var(--orange);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}
.viewer-imports-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid #22c55e;
  border-radius: var(--r-sm);
  padding: 10px var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
}

.viewer-submission {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.viewer-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-3);
}
.viewer-header-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.viewer-header-name { font-size: var(--fs-lg); font-weight: 700; }
.viewer-header-actions { display: flex; align-items: center; gap: var(--s-2); }

.viewer-section { margin-top: var(--s-4); }
.viewer-section h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--s-3); }

.viewer-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}
.viewer-extra-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3);
}
.viewer-extra-card.viewer-champion {
  background: linear-gradient(135deg, rgba(212,160,23,0.10) 0%, var(--card) 70%);
  border-color: var(--gold);
}
.viewer-extra-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.viewer-extra-value {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-md);
}
.viewer-extra-value-list {
  display: flex; flex-direction: column; gap: 4px;
}

.viewer-player-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs);
}
.viewer-player-rank {
  background: var(--orange);
  color: white;
  border-radius: 99px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
}

.viewer-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-2);
}
.viewer-group-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
}
.viewer-group-card h4 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; }

.viewer-match-row, .viewer-ko-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  font-family: 'Inter Tight', 'Inter', sans-serif;
}
.viewer-match-team { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.viewer-match-team-away { justify-content: flex-end; text-align: right; }
.viewer-match-team.is-winner { color: var(--orange); font-weight: 700; }
.viewer-match-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 36px;
}

.viewer-ko-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
}
.viewer-ko-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
}
.viewer-ko-section h5 {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Local-imports banner (Home) */
.local-imports-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 107, 0, 0.08);
  border: 1px solid var(--orange);
  border-radius: var(--r-sm);
  padding: 10px var(--s-3);
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
}

.viewer-pending-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 107, 0, 0.10);
  border: 1px solid var(--orange);
  border-radius: var(--r-sm);
  padding: 10px var(--s-3);
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
}