/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --radius: 12px; --radius-sm: 6px; }

[data-theme="dark"] {
  --bg:         #0b0f1a;
  --surface:    #111827;
  --surface2:   #1a2235;
  --border:     rgba(255,255,255,0.07);
  --border2:    rgba(255,255,255,0.13);
  --text:       #e2e8f4;
  --muted:      #6b7a99;
  --accent:     #4dc97a;
  --accent-dim: rgba(77,201,122,0.10);
  --accent-text:#0b0f1a;
  --gold:       #f0c500;
  --gold-dim:   rgba(240,197,0,0.12);
  --red:        #f07a5a;
  --teal:       #4dd9c0;
  --shadow:     0 4px 24px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg:         #f0f4fb;
  --surface:    #ffffff;
  --surface2:   #e8eef8;
  --border:     rgba(0,0,0,0.08);
  --border2:    rgba(0,0,0,0.14);
  --text:       #0f172a;
  --muted:      #5a6a88;
  --accent:     #1a9e4f;
  --accent-dim: rgba(26,158,79,0.10);
  --accent-text:#ffffff;
  --gold:       #c9a800;
  --gold-dim:   rgba(201,168,0,0.10);
  --red:        #e05a3a;
  --teal:       #0aab8a;
  --shadow:     0 4px 24px rgba(0,0,0,0.10);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
}

/* ── Font Awesome baseline fix ───────────────────────────────────────────── */
i.fa-solid, i.fa-regular, i.fa-brands { vertical-align: -0.125em; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(11,15,26,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 56px;
  transition: background 0.3s;
}
[data-theme="light"] nav.site-nav { background: rgba(240,244,251,0.90); }

.nav-logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--accent);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo span {
  font-weight: 300;
  color: var(--muted);
  font-size: 13px;
  margin-left: 6px;
}

.nav-links {
  display: flex;
  gap: 0;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 0 14px;
  height: 56px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-links a.active { color: var(--accent); }

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: all 0.15s;
  flex-shrink: 0;
  font-size: 16px;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
[data-theme="light"] .theme-toggle { color: #f0c500; border-color: rgba(240,197,0,0.35); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding: 72px 2rem 56px;
  max-width: 760px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent-dim);
  border: 1px solid rgba(77,201,122,0.25);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 24px;
}
[data-theme="light"] .hero-tag { border-color: rgba(26,158,79,0.25); }

.hero h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 20px;
}
.hero h1 span { color: var(--accent); }

.hero p {
  font-size: 16px;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.section {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 2rem 72px;
}

.section--no-top-pad { padding-top: 0; }

.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.section-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
  max-width: 760px;
  line-height: 1.65;
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 auto 60px;
  max-width: 716px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.card-sm {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.card h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--text);
}

.card .card-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ── Metric tiles ────────────────────────────────────────────────────────── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.metric-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.metric-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.metric-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* ── Info grid (homepage) ────────────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 0;
}

.info-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s;
}
.info-tile:hover { border-color: var(--border2); }

.info-tile .tile-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 12px;
}
.info-tile .tile-icon i { color: var(--accent); }

.info-tile h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.info-tile p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover { opacity: 0.88; }

.btn-gold {
  background: var(--gold);
  color: #0b0f1a;
}
.btn-gold:hover { opacity: 0.9; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
}
.btn-outline:hover { color: var(--text); border-color: var(--accent); }

.btn-danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
}
.btn-danger:hover { background: rgba(240,122,90,0.1); }

.btn-sm { padding: 5px 12px; font-size: 12px; }

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.tab-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.tab-btn:hover { color: var(--text); border-color: var(--accent); }
.tab-label-short { display: none; }
.tab-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* ── Round heading ───────────────────────────────────────────────────────── */
.round-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.round-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  order: 1;   /* sit between label (0) and lock-list (2) */
}
.round-label { flex-shrink: 0; /* default order: 0 */ }
/* Lock times: stacked column, right-aligned (desktop and mobile) */
.round-lock-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
  gap: 2px;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  order: 2;   /* pushed to right edge by the flex:1 ::after before it */
}
.round-lock-list span { white-space: nowrap; }
.lock-list-label { opacity: 0.6; }

/* ── Match row ───────────────────────────────────────────────────────────── */
.match-list { display: flex; flex-direction: column; gap: 6px; }

.match-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: border-color 0.15s;
}
.match-row:hover { border-color: var(--border2); }
.match-row.round-locked .score-input { opacity: 0.45; }
.match-row.has-predictions { cursor: pointer; }
.match-row.has-predictions:hover { border-color: var(--accent); }

.match-meta {
  flex: 0 0 110px;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
}
.match-note {
  font-size: 9px;
  color: var(--muted);
  opacity: 0.7;
  font-style: italic;
  line-height: 1.4;
}
.match-meta sup {
  font-size: 8px;
  color: var(--accent);
}
/* Desktop: each timezone on its own line inside the 110px meta column */
.match-tz { display: block; }
.match-num {
  display: block;
  font-size: 9px;
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}

.team-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.team-name.right { justify-content: flex-end; text-align: right; }

.flag { font-size: 1.1rem; line-height: 1; flex-shrink: 0; border-radius: 2px; }

.score-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
.slot-hint {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  opacity: 0.6;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.ko-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 0 0 160px;
}

.score-input input[type="text"] {
  width: 42px; height: 36px;
  flex: 0 0 42px;
  min-width: 0;
  max-width: 42px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
}
.score-input input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.score-input input[type="text"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.score-input input[type="text"].saved {
  background: var(--accent-dim);
  border-color: rgba(77,201,122,0.35);
  color: var(--accent);
  cursor: default;
  pointer-events: none;
}
[data-theme="light"] .score-input input[type="text"].saved {
  background: rgba(26,158,79,0.08);
  border-color: rgba(26,158,79,0.30);
}

.score-sep {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.9rem;
}

.lock-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}
/* Reserve the badge's width on unlocked rows too, so the score column lines up
   between locked and unlocked matches instead of shifting with the flex-grow split. */
.lock-badge.lock-badge-hidden {
  visibility: hidden;
}

/* ── Group layout ────────────────────────────────────────────────────────── */
.group-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 20px;
  align-items: start;
}
/* predictions page: single-column after table removal — centre the card */
.group-layout.predictions-layout {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .group-layout { grid-template-columns: 1fr; }
  .table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Subtle hint that content is scrollable */
    border-radius: var(--radius-sm);
  }
}

/* ── Standings table ─────────────────────────────────────────────────────── */
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.standings-table th {
  text-align: center;
  padding: 7px 8px;
  background: var(--surface2);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border2);
}
.standings-table th.team-col { text-align: left; }

.standings-table td {
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.standings-table td.team-col {
  text-align: left;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.standings-table tr.qualifies td:first-child { border-left: 2px solid var(--accent); }
.standings-table tr.third-place td:first-child { border-left: 2px solid var(--gold); }

.standings-table td.pts {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--accent);
}
.standings-table td.pos {
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
}
.standings-table td.pos-gd { color: var(--accent); font-family: 'JetBrains Mono', monospace; }
.standings-table td.neg-gd { color: var(--red); font-family: 'JetBrains Mono', monospace; }

.table-legend {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  display: flex;
  gap: 14px;
  align-items: center;
  letter-spacing: 0.04em;
}
.dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dot.qualify { background: var(--accent); }
.dot.third   { background: var(--gold); }

/* ── Predicted table header ──────────────────────────────────────────────── */
.table-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Result row ──────────────────────────────────────────────────────────── */
.result-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.result-row:hover { border-color: var(--border2); }
.result-row.has-predictions { cursor: pointer; }
.result-row.has-predictions:hover { border-color: var(--accent); }

.pred-chevron {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.scoreline {
  flex: 0 0 76px; /* width in group-stage row; overridden when inside .ko-score-col */
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.result-row.not-played .scoreline {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ko-score-col .scoreline { flex: none; }

/* ── Comparison panel ────────────────────────────────────────────────────── */
.comparison-panel {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.comparison-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.comparison-panel th {
  background: var(--surface2);
  color: var(--muted);
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--border2);
}
.comparison-panel th:first-child { text-align: left; }
.comparison-panel td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.comparison-panel td:first-child { text-align: left; font-weight: 600; }
.comparison-panel tr:last-child td { border-bottom: none; }
.comparison-panel td.pred-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

/* ── Points badges ───────────────────────────────────────────────────────── */
.pts-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.pts-5 { background: rgba(77,201,122,0.18); color: var(--accent); }
.pts-3 { background: rgba(77,217,192,0.15); color: var(--teal); }
.pts-0 { background: var(--border); color: var(--muted); }

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
#leaderboardContent { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
  min-width: 900px;
}
.leaderboard-table th,
.leaderboard-table td { white-space: nowrap; }
.leaderboard-table td.col-total {
  background: rgba(240, 197, 0, 0.08);
}
[data-theme="light"] .leaderboard-table td.col-total {
  background: rgba(180, 140, 0, 0.08);
}
/* Row colour takes priority over col-total tint */
.leaderboard-table tr.row-gold      td.col-total,
.leaderboard-table tr.row-silver    td.col-total,
.leaderboard-table tr.row-bronze    td.col-total,
.leaderboard-table tr.row-top-score td.col-total { background: inherit; }
/* Highest total-score cell — darker shade of its row colour */
.leaderboard-table td.col-total-max                      { background: rgba(240, 197,   0, 0.22); }
.leaderboard-table tr.row-gold      td.col-total-max     { background: rgba(240, 197,   0, 0.35); }
.leaderboard-table tr.row-silver    td.col-total-max     { background: rgba(180, 190, 200, 0.35); }
.leaderboard-table tr.row-bronze    td.col-total-max     { background: rgba(180, 110,  50, 0.35); }
.leaderboard-table tr.row-top-score td.col-total-max     { background: rgba( 77, 201, 122, 0.30); }
.leaderboard-table th {
  background: var(--surface2);
  color: var(--muted);
  padding: 8px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--border2);
}
.leaderboard-table th:nth-child(2) { text-align: left; }
.leaderboard-table th[data-col] { cursor: pointer; user-select: none; }
.leaderboard-table th[data-col]:hover { color: var(--text); }
.leaderboard-table th[data-col].sort-asc .sort-arrow::after  { content: ' ▲'; }
.leaderboard-table th[data-col].sort-desc .sort-arrow::after { content: ' ▼'; }
.leaderboard-table th[data-col] .sort-arrow::after { content: ' ⇅'; opacity: 0.35; }
.leaderboard-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.leaderboard-table td:nth-child(2) { text-align: left; font-weight: 600; }
.leaderboard-table tr.row-gold   td { background: rgba(240, 197,   0, 0.13); }
.leaderboard-table tr.row-silver td { background: rgba(180, 190, 200, 0.13); }
.leaderboard-table tr.row-bronze td { background: rgba(180, 110,  50, 0.13); }
.leaderboard-table tr.row-top-score td { background: rgba(77, 201, 122, 0.10); }
[data-theme="light"] .leaderboard-table tr.row-gold   td { background: rgba(240, 197,   0, 0.18); }
[data-theme="light"] .leaderboard-table tr.row-silver td { background: rgba(140, 160, 180, 0.18); }
[data-theme="light"] .leaderboard-table tr.row-bronze td { background: rgba(160,  90,  30, 0.13); }
[data-theme="light"] .leaderboard-table tr.row-top-score td { background: rgba(26, 158, 79, 0.10); }
/* Light-mode overrides for highest-score cell — must come after row rules */
[data-theme="light"] .leaderboard-table td.col-total-max                      { background: rgba(240, 197,   0, 0.32); }
[data-theme="light"] .leaderboard-table tr.row-gold      td.col-total-max     { background: rgba(240, 197,   0, 0.45); }
[data-theme="light"] .leaderboard-table tr.row-silver    td.col-total-max     { background: rgba(140, 160, 180, 0.45); }
[data-theme="light"] .leaderboard-table tr.row-bronze    td.col-total-max     { background: rgba(160,  90,  30, 0.35); }
[data-theme="light"] .leaderboard-table tr.row-top-score td.col-total-max     { background: rgba( 26, 158,  79, 0.28); }
.leaderboard-table td.rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.pos-move {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
  vertical-align: middle;
}
.pos-up   { color: #3dba6e; }
.pos-down { color: #e05252; }

/* ── Tournament Stats Card ───────────────────────────────────────────────── */
.stats-card {
  background: linear-gradient(135deg, #0f1923 0%, #1a2a3a 100%);
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
}
.stats-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stats-card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.stats-card-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-family: 'JetBrains Mono', monospace;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stats-box {
  background: rgba(255,255,255,0.03);
  padding: 16px 12px;
  text-align: center;
}
.stats-icon { font-size: 18px; margin-bottom: 6px; }
.stats-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 4px;
}
.stats-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stats-highlights {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-highlight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 10px 12px;
}
.stats-hl-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.stats-hl-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}
.stats-hl-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

.leaderboard-table td.total-pts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
}

/* ── Admin panel ─────────────────────────────────────────────────────────── */
/* WC26 used .admin-panel for a small gold-tinted box. Here it's a full-width
   page section, so it carries no background or border of its own — the rows
   and bars inside provide the structure. */
/* ── Tie Breaker team select ─────────────────────────────────────────────── */
.tb-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.tb-select:focus { border-color: var(--accent); }
.tb-select option { background: var(--surface); color: var(--text); }

.score-entry { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.score-entry input[type="number"] {
  width: 50px; height: 36px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  -moz-appearance: textfield;
}
.score-entry input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}

.modal h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.modal p { font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.6; }

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  transition: border-color 0.15s;
}
.form-group input:focus { outline: none; border-color: var(--accent); }
.form-group small { font-size: 11px; color: var(--muted); margin-top: 4px; display: block; }

.error-msg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--red);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(240,122,90,0.08);
  border: 1px solid rgba(240,122,90,0.2);
  border-radius: var(--radius-sm);
}

/* ── Save bar ─────────────────────────────────────────────────────────────── */
.save-bar {
  position: sticky;
  bottom: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  margin-top: 20px;
  z-index: 100;
}
.save-bar-left {
  display: flex;
  flex: 1;
  gap: 8px;
  align-items: center;
}
/* Desktop: save-bar-left flex:1 fills space, pushing edit/save to the far right */
.save-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  min-width: 130px;
  text-align: center;
}

/* ── All tables grid ─────────────────────────────────────────────────────── */
.all-tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

/* ── Admin bar ───────────────────────────────────────────────────────────── */
.admin-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.admin-bar .admin-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.admin-backup {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-danger {
  border-color: var(--red) !important;
  color: var(--red) !important;
}
.btn-danger:hover {
  background: var(--red) !important;
  color: #fff !important;
}

/* ── Coming soon ─────────────────────────────────────────────────────────── */
.coming-soon {
  text-align: center;
  padding: 80px 2rem;
  max-width: 560px;
  margin: 0 auto;
}
.coming-soon .big-icon { font-size: 56px; display: block; margin-bottom: 20px; }
.coming-soon h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.coming-soon p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 12px; }
.coming-soon .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

.bracket-preview {
  max-width: 760px;
  margin: 0 auto 60px;
  padding: 0 2rem;
  opacity: 0.4;
  pointer-events: none;
  filter: blur(1px);
}
.bracket-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  text-align: center;
}
.bracket-col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.bracket-slot {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.bracket-slot.final {
  background: var(--gold-dim);
  border-color: rgba(240,197,0,0.3);
  color: var(--gold);
  font-weight: 700;
}

/* ── Deadlines table ─────────────────────────────────────────────────────── */
.deadlines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.deadlines-table th:first-child,
.deadlines-table td:first-child { width: 36%; word-break: break-word; }
.deadlines-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.deadlines-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.deadlines-table tr:last-child td { border-bottom: none; }
.deadline-day   { display: block; font-weight: 500; white-space: nowrap; }
.deadline-month { display: block; font-weight: 400; white-space: nowrap; }
.deadline-time  { display: block; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--accent); margin-top: 2px; white-space: nowrap; }
.deadline-note { font-size: 11px; color: var(--muted); }
.deadline-past td { opacity: 0.45; }
.deadline-past td:first-child::after { content: ' · 🔒'; }

/* ── Utility classes ─────────────────────────────────────────────────────── */
.btn-full        { width: 100%; justify-content: center; }
.text-center     { text-align: center; }
.hidden          { display: none; }

.section--no-bottom  { padding-bottom: 0; }
.section--no-top     { padding-top: 0; }
.section--flush      { padding-top: 0; padding-bottom: 0; }
.section--slim       { padding-top: 20px; }
.section--slim-top   { padding-top: 16px; padding-bottom: 0; }
.section--wide       { max-width: 1100px; }

.modal-actions   { display: flex; gap: 8px; }
.divider--spaced { margin-top: 2rem; }

/* ── Loading ─────────────────────────────────────────────────────────────── */
.loading-state {
  text-align: center;
  padding: 60px 2rem;
  color: var(--muted);
  font-size: 13px;
}
.loading-state p { margin-top: 10px; }
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 32px 2rem 20px;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ── Member nav link ─────────────────────────────────────────────────────── */
.nav-member-link { color: var(--accent) !important; display: inline-flex; align-items: center; gap: 6px; }

/* ── Knockout round label ────────────────────────────────────────────────── */
.bracket-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.bracket-half-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.bracket-half-list { display: flex; flex-direction: column; gap: 6px; }

.ko-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ko-round-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.ko-lock-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 1px;
}
.tbd-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--gold);
  border: 1px solid rgba(240,197,0,0.35);
  border-radius: 3px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ── Hamburger button ────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 6px;
  transition: color 0.15s, border-color 0.15s;
}
.nav-hamburger:hover { color: var(--text); border-color: var(--accent); }

/* ── Mobile nav drawer ───────────────────────────────────────────────────── */
.nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 300;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-drawer-overlay.open { display: block; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--surface);
  border-left: 1px solid var(--border2);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nav-drawer-logo {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--accent);
  text-decoration: none;
}
.nav-drawer-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.nav-drawer-close:hover { color: var(--text); }

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
}
.nav-drawer-links a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-drawer-links a:hover,
.nav-drawer-links a.active {
  color: var(--accent);
  background: var(--accent-dim);
  border-left-color: var(--accent);
}
.nav-drawer-links a.nav-member-link { color: var(--accent); }

.nav-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nav-drawer-footer a {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: block;
  padding: 4px 0;
}

/* ── Responsive · 640px and below ────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Nav: hide links, show hamburger */
  nav.site-nav { padding: 0 1rem; gap: 0.5rem; }
  .nav-links > a { display: none; }
  .nav-links > button.btn { display: none; } /* hide desktop logout/signin */
  .nav-logo span { display: none; }
  .nav-hamburger { display: flex; }

  /* Sections */
  .hero         { padding: 48px 1rem 40px; }
  .section      { padding-left: 1rem; padding-right: 1rem; }

  /* Grids */
  .info-grid       { grid-template-columns: 1fr 1fr; }
  .metric-grid     { grid-template-columns: repeat(2, 1fr); }
  .all-tables-grid { grid-template-columns: 1fr; }
  .bracket-grid    { grid-template-columns: repeat(2, 1fr); }

  /* Tab bar: horizontal scroll, no wrap */
  .tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; }

  /* Sticky group tab bar on predictions page */
  #gwTabsWrap {
    position: sticky;
    top: 56px;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }
  #gwTabsWrap .tab-bar {
    margin-bottom: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
  }
  #gwTabsWrap .tab-bar::-webkit-scrollbar { display: none; }

  /* Show short label only on mobile */
  .tab-label-long  { display: none; }
  .tab-label-short { display: inline; }

  /* Compact square buttons */
  /* WC26 used single-letter group tabs, so these were fixed 34px squares.
     Gameweek labels are words — let them size to their content and scroll. */
  #gwTabsWrap .tab-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    width: auto;
    white-space: nowrap;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
  }

  /* Hide intro description on predictions page on mobile */
  .predictions-intro-desc { display: none; }

  /* Match meta */
  .match-meta { display: none; }

  /* Save bar: compact one-line layout on mobile */
  .save-bar { flex-wrap: nowrap; gap: 4px; padding: 8px 12px; align-items: stretch; }
  .save-status { display: none; }
  /* display:contents makes save-bar-left transparent to flexbox —
     all its children participate directly in the save-bar's equal-width layout */
  .save-bar-left { display: contents; }
  .save-bar .btn {
    flex: 1 1 0;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding: 5px 4px;
    font-size: 11px;
    min-width: 0;
    align-items: center;
    justify-content: center;
  }

  /* Round heading on mobile: centre label vertically, hide the ::after line */
  .round-heading { align-items: center; justify-content: space-between; gap: 8px; }
  .round-heading::after { display: none; }

  /* Round heading: tighten top margin on mobile */
  .round-heading { margin-top: 12px; }

  /* Comparison panel: scrollable on mobile instead of clipping */
  .comparison-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-panel table { min-width: 260px; }


  /* Deadline times: slightly smaller on mobile to prevent wrapping */
  .deadline-time { font-size: 11px; }

  /* Footer */
  footer { flex-direction: column; gap: 6px; text-align: center; padding: 20px 1rem; }

  /* Card padding */
  .card { padding: 16px; }
}

/* ── Responsive · 480px and below ────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Match rows: stack home / score / away vertically */
  .match-row {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 12px;
    gap: 4px;
  }
  .match-row .team-name,
  .match-row .team-name.right {
    flex: none;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .match-row .match-meta {
    order: 0;
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    font-size: 9px;
    gap: 2px;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border);
  }
  .match-row .match-meta .match-num  { display: none; }
  .match-row .match-meta .match-times {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .match-row .match-meta .match-tz { display: inline; }
  .match-row .team-name:not(.right) { order: 1; }
  .match-row .score-input           { order: 2; flex: none; }
  .match-row .team-name.right       { order: 3; }
  .match-row .lock-badge,
  .match-row .tbd-badge             { order: 4; }
  .match-row .pred-chevron          { order: 5; width: 100%; text-align: center; margin-left: 0; }

  /* Result rows: same stacking */
  .result-row {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 12px;
    gap: 4px;
  }
  .result-row .team-name,
  .result-row .team-name.right {
    flex: none;
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .result-row .team-name:not(.right) { order: 1; }
  .result-row .scoreline             { order: 2; flex: none; }
  .result-row .team-name.right       { order: 3; }
  .result-row .pred-chevron          { order: 4; width: 100%; text-align: center; margin-left: 0; }

  /* Slightly larger touch targets for score inputs */
  .score-input input[type="text"] {
    width: 44px; height: 44px;
    flex: 0 0 44px; max-width: 44px;
    font-size: 1.1rem;
  }

  /* Single-column info grid on very small screens */
  .info-grid { grid-template-columns: 1fr; }
}

/* ── Group tabs: keep all 12 on one row on wide screens ──────────────────── */
/* At ≥1024px the section inner width is 960px+. Reducing horizontal padding  */
/* from 14px→10px and gap from 6px→4px brings 12 buttons to ~949px total.    */
/* On desktop the wrap is just normal flow with section-style padding */
#gwTabsWrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 0;
}

@media (min-width: 1024px) {
  #gwTabs { flex-wrap: nowrap; gap: 4px; }
  #gwTabs .tab-btn { padding: 6px 10px; }
}

/* ── PremPick240: fixtures grid ───────────────────────────────────────────── */

.fixture-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.fixture-row {
  display: grid;
  grid-template-columns: 44px 1fr auto 1fr 96px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.fixture-row:hover { border-color: var(--border2); }
.fixture-row.played { background: var(--surface2); }

.fixture-comp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 3px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  color: var(--muted);
}
.fixture-comp.comp-pl { color: var(--teal);   border-color: var(--teal);   background: rgba(13,171,138,0.08); }
.fixture-comp.comp-ch { color: var(--gold);   border-color: var(--gold);   background: var(--gold-dim); }
.fixture-comp.comp-cup { color: var(--red); border-color: var(--red); background: rgba(224,90,58,0.08); }

.fixture-date {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.fixture-team { font-weight: 600; font-size: 14px; }
.fixture-team.home { text-align: right; }
.fixture-team.away { text-align: left; }

.fixture-scores { display: flex; align-items: center; gap: 6px; }
.fixture-v { color: var(--muted); font-size: 12px; }

.fixture-actual {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: var(--muted);
}

.pred-outcome { font-size: 11px; font-weight: 600; text-align: right; }
.pred-outcome.hit  { color: var(--accent); }
.pred-outcome.miss { color: var(--muted); }

/* ── Lock notice ─────────────────────────────────────────────────────────── */

.lock-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 1rem;
  font-size: 13px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--muted);
}
.lock-notice.locked { border-color: var(--gold); background: var(--gold-dim); color: var(--text); }
.lock-notice i { color: var(--accent); }
.lock-notice.locked i { color: var(--gold); }

.save-status.ok   { color: var(--accent); }
.save-status.warn { color: var(--gold); }
.save-status.err  { color: var(--red); }

/* ── Ranking table ───────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin-bottom: 2rem; }

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.ranking-table th {
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border2);
  white-space: nowrap;
}
.ranking-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.ranking-table tbody tr:hover { background: var(--surface); }
.ranking-table tr.is-me { background: var(--accent-dim); }

.ranking-table .col-pos { width: 44px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.ranking-table .col-pts,
.ranking-table .col-num { text-align: center; font-family: 'JetBrains Mono', monospace; }
.ranking-table .col-pts.strong { font-weight: 700; font-size: 16px; color: var(--accent); }
.ranking-table .col-player a { color: var(--text); text-decoration: none; font-weight: 600; }
.ranking-table .col-player a:hover { color: var(--accent); }
.ranking-table .muted { color: var(--muted); }
.ranking-table .empty { text-align: center; color: var(--muted); padding: 2rem; }

.perfect-badge {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold-dim);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
}

/* ── Praise ──────────────────────────────────────────────────────────────── */

.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.5rem; }

.stat-tile {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat-tile .stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}
.stat-tile .stat-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.praise-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.5rem; }

.praise-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
}
.praise-row.won    { border-left: 3px solid var(--accent); }
.praise-row.rolled { border-left: 3px solid var(--gold); }
.praise-gw { font-weight: 600; }
.praise-winners { display: flex; flex-wrap: wrap; gap: 6px; }
.praise-amount {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
}
.praise-row .muted { color: var(--muted); }

.winner-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
}

.subsection-title {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
}
.section-note { font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .fixture-row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "comp date date"
      "home score away";
    gap: 8px;
  }
  .fixture-comp    { grid-area: comp; justify-self: start; padding: 3px 10px; }
  .fixture-date    { grid-area: date; text-align: right; }
  .fixture-team.home { grid-area: home; }
  .fixture-scores  { grid-area: score; }
  .fixture-team.away { grid-area: away; }

  .praise-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "gw amount" "winners winners";
  }
  .praise-gw      { grid-area: gw; }
  .praise-amount  { grid-area: amount; }
  .praise-winners { grid-area: winners; }
}

.stat-tile.highlight { border-color: var(--gold); background: var(--gold-dim); }
.stat-tile.highlight .stat-value { color: var(--gold); }

/* ── Admin page ──────────────────────────────────────────────────────────── */

.admin-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-bar label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.admin-bar select {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--text);
}
.admin-hint { font-size: 12px; color: var(--muted); margin-left: auto; }

.admin-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.25rem; }
.admin-grid .form-group { flex: 1 1 200px; margin-bottom: 0; }

.admin-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }

.admin-row {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 52px auto 52px minmax(0,1fr) 74px 58px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-row.done { border-left: 3px solid var(--accent); }
.admin-row.edit { grid-template-columns: 76px 1fr auto 1fr 140px 200px; }
.admin-row.edit.admin-row-head {
  background: none;
  border: none;
  padding: 0 14px;
  margin-bottom: -2px;
}
.admin-row-head span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.admin-row-comp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-align: center;
  padding: 3px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  color: var(--muted);
}
.admin-row-comp.comp-pl  { color: var(--teal); border-color: var(--teal); }
.admin-row-comp.comp-ch  { color: var(--gold); border-color: var(--gold); }
.admin-row-comp.comp-cup { color: var(--red);  border-color: var(--red);  }

.admin-row-team { font-weight: 600; font-size: 14px; }
.admin-row-team.home { text-align: right; }
.admin-row-state { font-size: 11px; color: var(--muted); text-align: right; }
.admin-row.done .admin-row-state { color: var(--accent); }

.admin-row input[type="text"],
.admin-row input[type="date"],
.admin-row select {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--text);
  width: 100%;
}

.btn-xs { font-size: 11px; padding: 4px 9px; }

/* ── Everyone's predictions grid ─────────────────────────────────────────── */

.preds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
.preds-table th {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 6px;
  border-bottom: 1px solid var(--border2);
  text-align: center;
  vertical-align: bottom;
}
.preds-table th.col-player { text-align: left; }
.preds-table th.col-fx span { display: block; line-height: 1.25; }
.preds-table th.col-fx .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.preds-table td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.preds-table td.col-player {
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
.preds-table tr.is-me { background: var(--accent-dim); }
.preds-table tr.actual-row td {
  font-weight: 700;
  border-top: 2px solid var(--border2);
  background: var(--surface2);
}
.preds-table td.col-fx.hit   { color: var(--accent); }
.preds-table td.col-fx.exact { color: var(--accent); background: var(--accent-dim); font-weight: 700; }
.preds-table td.col-fx.miss  { color: var(--muted); }
.preds-table td.col-pts.strong { font-weight: 700; color: var(--accent); }
.preds-table td.muted { color: var(--muted); }

@media (max-width: 720px) {
  /* Grid columns don't survive the narrow width — fall back to a wrapping
     flex row so the two score boxes stay beside their teams. */
  .admin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .admin-row-comp  { flex: 0 0 auto; padding: 3px 10px; }
  .admin-row-team  { flex: 1 1 26%; font-size: 13px; }
  .admin-row .score-input { flex: 0 0 auto; width: 46px; }
  .admin-row-state { flex: 1 1 100%; order: 90; text-align: left; }
  .admin-row .btn-xs { order: 91; }

  .admin-row.edit             { flex-direction: column; align-items: stretch; }
  .admin-row.edit .fixture-v  { display: none; }
  .admin-row.edit select,
  .admin-row.edit input       { width: 100%; }

  .admin-bar        { gap: 8px; }
  .admin-hint       { flex: 1 1 100%; margin-left: 0; }
}

/* Own prediction, shown in place of the inputs once a week has locked. */
.fixture-mypick {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg);
  white-space: nowrap;
}
.fixture-mypick.none { color: var(--muted); font-weight: 400; }

/* ── Row width ───────────────────────────────────────────────────────────── */
/* The fixture and admin rows sit in a 1100px section so the predictions table
   has room. Left to fill it, the two score boxes get pushed to opposite ends
   of the row with a large gap between them. Cap the rows themselves instead —
   the wide table keeps the full width. */

.fixture-grid,
.admin-rows,
.admin-bar,
.admin-grid,
#lockBanner,
#fixturesApp .save-bar,
#adminApp .save-bar,
#praisePreview,
#gwTabs,
#adminTabs {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Slightly tighter team columns so the scores sit closer to the middle.
   Scoped to desktop: these rules live after the mobile media queries, so
   without the min-width guard they'd override the stacked mobile layout and
   collide the team names with the score boxes. */
@media (min-width: 721px) {
  /* The last two tracks hold the actual score and the hit/miss badge, which
     only exist once a result is in. Sizing them `auto` lets them collapse to
     nothing beforehand instead of reserving 160px of empty space on the right.
     The tracks before them stay fixed, so the date column still lines up
     across rows whether or not a result has been entered. */
  .fixture-row { grid-template-columns: 44px minmax(0,1fr) auto minmax(0,1fr) 92px; }
  .admin-row   { grid-template-columns: 46px minmax(0,1fr) 52px auto 52px minmax(0,1fr) 74px 58px; }
}

@media (max-width: 900px) {
  .fixture-grid, .admin-rows, .admin-bar, .admin-grid,
  #lockBanner, #fixturesApp .save-bar, #adminApp .save-bar, #praisePreview {
    max-width: none;
  }
}

/* The sticky tab wrapper's desktop padding (2rem) is declared after the mobile
   block, so it wins at every width and leaves the tabs inset further than the
   1rem used by .section on mobile. Re-assert the mobile padding here so the
   tab, deadline banner and rows share a left edge on phones too. */
@media (max-width: 720px) {
  #gwTabsWrap { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Score inputs: no spinners ───────────────────────────────────────────── */
/* type="number" keeps the numeric keypad on mobile, but the desktop stepper
   arrows are noise for a 0–9 scoreline and easy to nudge by accident. */
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.score-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Intro blocks align with the content below ───────────────────────────── */
/* .section is 760px wide *including* its 2rem padding, while the rows below
   are capped at 760px of actual content. Widen the intro by that padding so
   both start on the same left edge. */
@media (min-width: 721px) {
  #fixturesApp > .section,
  #rankingApp  > .section,
  #adminApp    > .section {
    max-width: calc(760px + 4rem);
  }
}

/* ── Score inputs ────────────────────────────────────────────────────────── */
/* The older .score-input rules target input[type="text"] and never matched
   these type="number" fields, so they had no styling at all. */

input.score-input {
  display: inline-block;
  width: 48px;
  height: 40px;
  padding: 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input.score-input:hover  { border-color: var(--accent); }
input.score-input:focus  {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
input.score-input:disabled { opacity: 0.5; }

/* The competition badge only renders for non-PL fixtures now; keep an empty
   cell so the grid columns still line up across rows. */
.fixture-comp-none { display: block; }

/* ── Gameweek strip: tabs + deadline ─────────────────────────────────────── */

.gw-strip .lock-notice { margin-bottom: 0; }

/* Full sentence on desktop, terse version in the mobile strip. */
.lock-short { display: none; }
@media (max-width: 720px) {
  .lock-full  { display: none; }
  .lock-short { display: block; white-space: nowrap; }
  .lock-short .lock-left { display: block; opacity: 0.75; font-weight: 400; }
}

@media (min-width: 721px) {
  .gw-strip .lock-notice { margin-top: 12px; }
}

@media (max-width: 720px) {
  /* Tabs and deadline share one row, and the deadline drops its card so the
     pair reads as a single strip rather than two crowded blocks. */
  .gw-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  /* Tabs shrink and scroll; the deadline keeps its width. Over a 40-week
     season the tab bar grows well past the viewport, and sizing it the other
     way round would push the deadline off screen. */
  .gw-strip .tab-bar { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
  .gw-strip .lock-notice {
    flex: 0 0 auto;
    justify-content: flex-end;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    text-align: right;
  }
  .gw-strip .lock-notice i { display: none; }

  /* Bigger targets — on a phone these boxes are the whole point of the page. */
  input.score-input {
    width: 62px;
    height: 54px;
    font-size: 22px;
    border-width: 2px;
    border-radius: 10px;
  }
  .fixture-scores { gap: 10px; }
  .fixture-v      { font-size: 13px; }
  .fixture-row    { padding: 16px; }
}

/* ── Save bar and sticky-strip spacing fixes ─────────────────────────────── */

/* Push the primary action to the right edge of the bar, away from the status
   text sitting on the left. */
#adminApp .save-bar .btn { margin-left: auto; }

/* The bar is sticky-bottom, so give the panel room to breathe underneath. */
#adminApp .admin-panel { padding-bottom: 8px; }

@media (max-width: 720px) {
  /* The gameweek strip is sticky with a drop shadow, and the fixture list
     butts straight up against it — the first card's top edge was being
     clipped. Give it clearance. */
  #fixtureList { padding-top: 14px; }

  /* Slightly smaller than the first pass: still a comfortable thumb target,
     but no longer dominating the row. */
  input.score-input {
    width: 54px;
    height: 46px;
    font-size: 19px;
  }
}

/* ── Touch reliability ───────────────────────────────────────────────────── */
/* Removes the tap delay some mobile browsers apply while they wait to see if
   a tap is a double-tap-to-zoom. Without it a single tap on Save can be
   swallowed. */
.btn, .tab-btn, input.score-input, .theme-toggle, .nav-hamburger {
  touch-action: manipulation;
}

@media (max-width: 720px) {
  /* Keep the sticky bar clear of the iPhone home indicator, and give the
     status message room so it isn't hidden under the bar. */
  #fixturesApp .save-bar {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
  }
  #fixturesApp .save-bar .save-status {
    flex: 1 1 100%;
    order: -1;
    font-size: 12px;
  }
}

/* Confirmation flash on the save button itself. */
.btn.btn-saved {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
  transform: scale(1.02);
  transition: transform 0.15s;
}

/* ── Gameweek strip breathing room ───────────────────────────────────────── */
/* The desktop #gwTabsWrap rule sets `padding: 0 2rem 0`, so the tab button's
   top edge sat flush against the strip's boundary while the bottom had space
   from sibling margins. Give it even vertical padding at both breakpoints. */
#gwTabsWrap {
  padding-top: 14px;
  padding-bottom: 14px;
}

@media (max-width: 720px) {
  #gwTabsWrap { padding-top: 12px; padding-bottom: 12px; }
  .gw-strip { align-items: center; }
}

/* The tab bar carries a 6px bottom padding (scrollbar clearance from the WC26
   layout). Inside the strip that made the bar taller than the button in it, so
   the button sat flush against the top with dead space underneath — which read
   as uneven padding. */
.gw-strip .tab-bar { padding-bottom: 0; }

/* Spacing between the Your stats / Overall stats groups. */
#praiseSummary .subsection-title { margin-top: 1.25rem; }
#praiseSummary .subsection-title:first-child { margin-top: 0; }
#praiseSummary .stat-row { margin-bottom: 0; }

/* Give the weekly praise ledger (and its empty state) room to breathe between
   the Overall stats cards above and the footer rule below. */
#praiseWeekly { margin-top: 1.75rem; margin-bottom: 2.5rem; }
#praiseWeekly .empty { margin: 0; }

/* ── Logo page ───────────────────────────────────────────────────────────── */

.logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* the banner is shorter than the squares */
  gap: 16px;
  margin-bottom: 1.5rem;
}

.logo-card {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.logo-card canvas {
  display: block;
  width: 100%;
  height: auto;
}
.logo-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.logo-card-name {
  display: block;
  font-weight: 600;
  font-size: 13px;
}
.logo-card-note {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.logo-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.logo-controls label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.logo-controls select {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--text);
}