/* ============================================================= *
 *  World Cup 2026 Tracker — theme & layout
 * ============================================================= */
:root {
  --pitch-900: #04140c;
  --pitch-800: #07291a;
  --pitch-700: #0a3a24;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(12, 34, 24, 0.55);
  --glass-2: rgba(9, 26, 18, 0.72);
  --text: #eaf4ee;
  --muted: #8fb6a3;
  --muted-2: #5f8472;
  --accent: #25e07f;       /* pitch green */
  --accent-soft: rgba(37, 224, 127, 0.14);
  --gold: #ffcf4d;
  --amber: #ffae3b;
  --seed-2: #4fb6f0;       /* runner-up seed — vivid blue, not the muted draw-gray */
  --live: #ff4d5e;
  --win: #25e07f;
  --draw: #c9d4cf;
  --loss: #ff6b76;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --font-display: "Arial Narrow", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* No-JS / first-wave crawler fallbacks: the <noscript> block (index.html) and the
   server-rendered #groupsGrid standings summary. JS users get the live UI, which
   replaces #groupsGrid on first render, so these are only ever briefly visible. */
.noscript-seo { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; color: var(--text); line-height: 1.7; }
.noscript-seo h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 12px; }
.noscript-seo a { color: var(--accent); }
.noscript-seo ul { margin: 12px 0 0 1.2em; }
.seo-standings h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 4px 0 14px; color: var(--muted); }
.seo-group { margin: 0 0 14px; }
.seo-group h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 6px; }
.seo-group ol { margin: 0 0 0 1.4em; padding: 0; }
.seo-group li span { color: var(--muted); }

/* ---- Light theme ---------------------------------------------------- */
:root[data-theme="light"] {
  --pitch-900: #e7f2ea;
  --pitch-800: #eef6f0;
  --pitch-700: #e1eee6;
  --line: rgba(6, 38, 24, 0.12);
  --line-strong: rgba(6, 38, 24, 0.22);
  --glass: rgba(255, 255, 255, 0.74);
  --glass-2: rgba(255, 255, 255, 0.88);
  --text: #0a2016;
  --muted: #3f6151;
  --muted-2: #6c8c7d;
  --accent: #0fa85c;
  --accent-soft: rgba(15, 168, 92, 0.15);
  --gold: #b07d08;
  --amber: #c4730a;
  --seed-2: #1f88c9;       /* runner-up seed — vivid blue, not the muted draw-gray */
  --live: #e0304a;
  --win: #0fa85c;
  --draw: #5e7568;
  --loss: #e0304a;
  --shadow: 0 16px 44px rgba(20, 50, 35, 0.14);
}
:root[data-theme="light"] .pitch-bg {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(37, 224, 127, 0.22), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(37, 224, 127, 0.12), transparent 55%),
    linear-gradient(160deg, #eef7f1, #ddeee3 70%);
}
:root[data-theme="light"] .pitch-bg::before {
  background: repeating-linear-gradient(
    105deg, rgba(0, 0, 0, 0.02) 0 60px, rgba(0, 0, 0, 0) 60px 120px);
}
:root[data-theme="light"] .pitch-bg::after { border-color: rgba(6, 38, 24, 0.10); }
:root[data-theme="light"] .live-badge {
  color: var(--live); background: rgba(224, 48, 74, 0.10); border-color: rgba(224, 48, 74, 0.35);
}
:root[data-theme="light"] .bracket-links line { stroke: rgba(6, 38, 24, 0.18); }
:root[data-theme="light"] .match-card { box-shadow: 0 8px 22px rgba(20, 50, 35, 0.10); }
:root[data-theme="light"] .team-pop,
:root[data-theme="light"] .settings-panel { box-shadow: 0 22px 56px rgba(20, 50, 35, 0.22); }
:root[data-theme="light"] .loader { background: rgba(231, 242, 234, 0.86); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--pitch-900);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 60px;
}

/* ---- Pitch background ------------------------------------------------ */
.pitch-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(37, 224, 127, 0.16), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(13, 90, 56, 0.35), transparent 55%),
    linear-gradient(160deg, var(--pitch-800), var(--pitch-900) 70%);
}
.pitch-bg::before {
  /* mowed-grass stripes */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.018) 0 60px,
    rgba(0, 0, 0, 0.018) 60px 120px
  );
}
.pitch-bg::after {
  /* faint centre circle + halfway line */
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translateX(-50%);
  border: 2px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 1px transparent;
  opacity: 0.5;
}

/* ---- Top bar -------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px clamp(16px, 4vw, 48px) 14px;
  max-width: 1320px;
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-text { min-width: 0; }
.brand-ball {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  animation: spin-in 0.9s cubic-bezier(.2,.8,.2,1) both;
}
.brand-text h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2.5px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
}
.brand-text .year {
  background: linear-gradient(90deg, var(--accent), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hosts { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 15px; }
.hosts-label { color: var(--muted); font-size: 12px; letter-spacing: .5px; margin-left: 6px; }

.status-cluster { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta-chip {
  font-size: 12px;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.meta-chip.updated { color: var(--text); }
#sourceChip { display: inline-flex; align-items: center; gap: 7px; }
#sourceChip .src-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted-2); }
#sourceChip .src-name { color: var(--text); font-weight: 600; }
#sourceChip .src-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 5px;
}
.source-live .src-dot { background: var(--accent); box-shadow: 0 0 8px rgba(37, 224, 127, .8); }
.source-live .src-tag { background: var(--accent-soft); color: var(--accent); }
.source-live { border-color: rgba(37, 224, 127, .35); }
.source-fallback .src-dot { background: var(--amber); }
.source-fallback .src-tag { background: rgba(255, 174, 59, .14); color: var(--amber); }
.live-badge {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255, 77, 94, 0.14);
  border: 1px solid rgba(255, 77, 94, 0.4);
  color: #ffd2d6;
  font-weight: 700; font-size: 12px; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 999px;
}
.live-badge { cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.live-badge:hover { background: rgba(255, 77, 94, 0.22); transform: translateY(-1px); }
.live-badge[aria-expanded="true"] { background: rgba(255, 77, 94, 0.24); border-color: rgba(255, 77, 94, 0.6); }
.live-badge:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.7);
  animation: pulse 1.4s infinite;
}

/* ---- Live-matches popover ------------------------------------------ */
.live-pop {
  position: fixed; z-index: 85;
  width: min(340px, calc(100vw - 24px));
  background: var(--glass-2);
  border: 1px solid rgba(255, 77, 94, 0.4);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  color: var(--text);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left;
  pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  overflow: hidden;
}
.live-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.live-pop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 15px 11px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  font-size: 12px; color: var(--live);
  background: linear-gradient(90deg, rgba(255, 77, 94, 0.14), transparent);
  border-bottom: 1px solid var(--line);
}
.live-pop-list { padding: 9px; display: flex; flex-direction: column; gap: 7px; max-height: 60vh; overflow-y: auto; }
.live-pop-note {
  padding: 9px 15px 12px; border-top: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.4; color: var(--muted-2);
}
/* Estimated match minute riding inside the LIVE badges (schedule, popover,
   bracket, dossier). Tabular figures so the count-up doesn't jitter the layout. */
.live-min { font-variant-numeric: tabular-nums; opacity: .85; }
.lvm {
  background: rgba(255, 77, 94, 0.05);
  border: 1px solid var(--line); border-left: 3px solid var(--live);
  border-radius: 11px; padding: 9px 11px;
}
.lvm-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.lvm-no {
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px;
  color: var(--muted-2); background: rgba(255, 255, 255, .06); padding: 1px 5px; border-radius: 5px;
}
.lvm-stage { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.lvm-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .5px;
  color: var(--live); background: rgba(255, 77, 94, .16); padding: 2px 8px; border-radius: 6px;
}
.lvm-tag .live-dot { width: 6px; height: 6px; }
.lvm-teams { display: flex; align-items: center; gap: 10px; }
.lvm-side { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; }
.lvm-side.right { justify-content: flex-end; text-align: right; }
.lvm-side .flag-emoji, .lvm-side .crest, .lvm-side .monogram { width: 21px; height: 21px; font-size: 18px; }
.lvm-tn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvm-side.lead .lvm-tn { font-weight: 800; color: var(--text); }
.lvm-mid { flex: none; display: flex; align-items: center; gap: 6px; font-family: var(--font-display); }
.lvm-sc { font-weight: 800; font-size: 18px; color: var(--live); font-variant-numeric: tabular-nums; }
.lvm-dash { color: var(--muted-2); }
.lvm-venue { display: flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 10px; color: var(--muted-2); }
.lvm-venue .pin { flex: none; opacity: .85; }
.refresh-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(37, 224, 127, 0.35);
  color: var(--accent);
  cursor: pointer;
  transition: transform .25s, background .25s;
}
.refresh-btn:hover { background: rgba(37, 224, 127, 0.22); transform: translateY(-1px); }
.js-refresh.spinning svg { animation: spin 0.8s linear infinite; }

/* LIVE chip lands here, centered above the tabs, on phones (see placeLiveBadge).
   Empty (chip in the topbar, or no live matches) it collapses to nothing. */
.live-row { display: flex; justify-content: center; }
.live-row .live-badge { margin: 2px 0 14px; }

/* ---- Tabs ----------------------------------------------------------- */
.tabs {
  position: relative;
  display: flex;
  gap: 4px;
  width: max-content;
  margin: 6px auto 26px;
  padding: 5px;
  background: var(--glass-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.tab {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: 1px;
  font-size: 14px;
  color: var(--muted);
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 26px; border-radius: 999px;
  transition: color .3s;
}
.tab.active { color: #04140c; }
.tab-pill {
  position: absolute; z-index: 0;
  top: 5px; bottom: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #4dffa0);
  box-shadow: 0 6px 18px rgba(37, 224, 127, 0.4);
  transition: transform .35s cubic-bezier(.5,.05,.2,1), width .35s cubic-bezier(.5,.05,.2,1);
}

/* ---- Views ---------------------------------------------------------- */
main { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.view { display: none; animation: fade-up .45s ease both; }
.view.active { display: block; }

/* ---- Groups grid ---------------------------------------------------- */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.group-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: fade-up .5s ease both;
}
@media (hover: hover) { .group-card:hover { border-color: var(--line-strong); } }
.group-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(37,224,127,0.10), transparent);
}
.group-head h3 {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 1.5px; font-weight: 700;
}
.group-head .group-tag {
  font-size: 11px; letter-spacing: 1.5px; color: var(--muted-2);
  text-transform: uppercase;
}

table.standings { width: 100%; border-collapse: collapse; font-size: 15px; }
table.standings thead th {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: .5px;
  color: var(--muted-2); font-size: 12px; text-transform: uppercase;
  padding: 12px 8px; text-align: center;
}
table.standings thead th.team-col { text-align: left; padding-left: 22px; }
/* Abbreviated headers spell themselves out via a small tooltip on hover (desktop)
   or tap (touch). A faint dotted underline + help cursor signals they explain. */
.col-hint {
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dotted var(--line-strong);
}
.hint-pop {
  position: fixed; z-index: 90;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px; border-radius: 8px;
  background: var(--glass-2); border: 1px solid var(--line-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.hint-pop.show { opacity: 1; transform: translateY(0); }
table.standings tbody td { padding: 13px 8px; text-align: center; }
table.standings tbody tr { border-top: 1px solid var(--line); transition: background .2s; }
@media (hover: hover) { table.standings tbody tr:hover { background: rgba(255, 255, 255, 0.03); } }
.team-cell { display: flex; align-items: center; gap: 12px; text-align: left; padding-left: 16px; }
.pos {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; border-radius: 7px;
  color: var(--muted); background: rgba(255,255,255,0.05);
}
.crest, .monogram {
  width: 26px; height: 26px; flex: none; border-radius: 6px;
  object-fit: contain;
}
.monogram {
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #04140c; background: linear-gradient(135deg, var(--accent), #1aa862);
}
.flag-emoji { font-size: 22px; line-height: 1; flex: none; width: 26px; text-align: center; }
.team-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
/* Provisional-standing marker: a live game is folded into this row's totals. */
.prov-live { flex: none; margin-left: -4px; }
.pts { font-weight: 800; color: var(--text); }
.gd-pos { color: var(--accent); }
.gd-neg { color: var(--loss); }
td.dim { color: var(--muted); }

/* qualification accents on the position chip */
tr.q-top .pos { background: var(--accent); color: #04140c; }
tr.q-third .pos { background: var(--amber); color: #2a1700; }
tr.q-out { opacity: .72; }

/* ---- Best third-placed --------------------------------------------- */
.third-section {
  margin: 30px 0 10px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.third-head { padding: 16px 20px 6px; }
.third-head h2 { font-family: var(--font-display); letter-spacing: 1px; font-size: 18px; }
.third-head p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.third-table { padding: 8px 12px 16px; }
.third-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 50px 50px 50px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 18px;
  border-radius: 12px;
  font-size: 13px;
}
.third-row.qualifies { background: var(--accent-soft); }
.third-row .rk { font-weight: 800; color: var(--muted); text-align: center; }
.third-row.qualifies .rk { color: var(--accent); }
.third-row .num { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.third-row .num b { color: var(--text); }
.third-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.third-team .team-name { max-width: none; min-width: 0; }
.third-group { font-weight: 700; }
.third-head-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 50px 50px 50px; gap: 8px;
  padding: 4px 10px 4px 18px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted-2); font-family: var(--font-display);
}
.third-head-row span:not(:nth-child(2)) { text-align: center; }
.qbar {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 4px;
  height: 28px;
  border-radius: 4px;
  background: transparent;
  transform: translateY(-50%);
}
.third-row.qualifies .qbar { background: var(--accent); }

/* ---- Title odds (market-implied win probability) -------------------- */
.odds-section {
  margin: 8px 0 10px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.odds-head { padding: 16px 20px 6px; }
.odds-head h2 { font-family: var(--font-display); letter-spacing: 1px; font-size: 18px; }
.odds-head p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.odds-list { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.odds-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px 26px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
}
/* The proportional bar is an absolute background fill; lift the row content above it. */
.odds-row > :not(.odds-bar) { position: relative; z-index: 1; }
.odds-bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  width: 0; border-radius: 12px;
  background: var(--accent-soft);
}
.odds-row.leader .odds-bar { background: var(--accent); opacity: .22; }
.odds-row .rk {
  font-weight: 800; color: var(--muted);
  text-align: center; font-variant-numeric: tabular-nums;
}
.odds-row.leader .rk { color: var(--accent); }
.odds-pct {
  text-align: right; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.odds-row:hover { background: rgba(127, 127, 127, .06); }
.odds-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.odds-asof {
  padding: 12px 16px 2px; text-align: right;
  color: var(--muted-2); font-size: 11px;
  letter-spacing: .3px; font-variant-numeric: tabular-nums;
}
.odds-empty { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* Dossier headline: market-implied title chance, between header and record. */
.tp-odds {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.tp-odds b {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1;
}
.tp-odds span {
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2);
}
/* The favourite's bar can animate its width; honour reduced-motion preferences. */
@media (prefers-reduced-motion: no-preference) {
  .odds-bar { transition: width .5s cubic-bezier(.5, .05, .2, 1); }
}

/* ---- The Cup Daily CTA (between groups and best third-placed) -------- */
.blog-cta {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 4px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(37, 224, 127, 0.12), rgba(37, 224, 127, 0.03));
  border: 1px solid rgba(37, 224, 127, 0.30);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.blog-cta:hover {
  border-color: rgba(37, 224, 127, 0.55);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.blog-cta-icon {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}
.blog-cta-body { flex: 1 1 auto; min-width: 0; }
.blog-cta-title {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: .5px; color: var(--text);
}
.blog-cta-text {
  display: block;
  font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px;
}
.blog-cta-action {
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: #04140c; background: var(--accent);
  padding: 9px 14px; border-radius: 10px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .blog-cta { padding: 12px 14px; gap: 12px; }
  .blog-cta-action { display: none; }
}

/* ---- Bracket -------------------------------------------------------- */
.projection-banner {
  display: flex; align-items: center; gap: 12px;
  max-width: 760px; margin: 0 auto 16px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(255,174,59,0.12), rgba(255,174,59,0.04));
  border: 1px solid rgba(255, 174, 59, 0.32);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}
.projection-banner .proj-tag {
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 1.5px;
  color: #2a1700; background: var(--amber);
  padding: 4px 9px; border-radius: 6px;
}
.projection-banner .proj-text { font-size: 13px; color: var(--muted); line-height: 1.45; }
.projection-banner .proj-text b { color: var(--text); }

.bracket-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 14px;
}
.bracket-hint { color: var(--muted); font-size: 12.5px; letter-spacing: .3px; }
.nav-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--line);
  color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px); transition: background .2s, transform .2s;
}
.nav-arrow:hover { background: var(--accent-soft); transform: translateY(-1px); }
.nav-arrow:disabled { opacity: .3; cursor: default; transform: none; }

.bracket-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  cursor: grab;
  /* No CSS scroll-snap — it resists at the start of a gesture and snaps
     abruptly. Scrolling is free; JS glides to the nearest round once it
     settles (see setupBracketNav), for a smooth, non-fighting snap. */
}
.bracket-scroll.dragging { cursor: grabbing; }
.bracket-scroll::-webkit-scrollbar { height: 8px; }
.bracket-scroll::-webkit-scrollbar-thumb { background: rgba(37,224,127,.4); border-radius: 8px; }
.bracket-rounds { position: relative; display: flex; gap: 40px; min-width: max-content; align-items: stretch; }
.bracket-links {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible;
}
.bracket-links line { stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; transition: stroke .2s, opacity .2s; }
.bracket-links line.on-path { stroke: var(--accent); stroke-width: 3; }
#bracketRounds.has-path .bracket-links line:not(.on-path) { opacity: .3; }
.bracket-col { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 248px; }
.bracket-col h4 {
  font-family: var(--font-display); letter-spacing: 1.5px; text-transform: uppercase;
  font-size: 13px; color: var(--muted); text-align: center;
  min-height: 50px; padding: 8px 0 12px; position: sticky; left: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.bracket-col.final h4 { color: var(--gold); }
.col-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 16px; }

.match-card {
  background: var(--glass-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: border-color .2s, transform .2s, opacity .2s;
  animation: fade-up .5s ease both;
}
@media (hover: hover) { .match-card:hover { border-color: var(--line-strong); transform: translateY(-2px); } }
/* Road to the final: dim everything off the highlighted team's path. */
#bracketRounds.has-path .match-card:not(.on-path) { opacity: .34; }
#bracketRounds.has-path .match-card.on-path {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 26px rgba(0,0,0,.35);
}
.match-card.is-final { border-color: rgba(255, 207, 77, .4); }
.match-card.is-live { border-color: rgba(255, 77, 94, .5); }
.mc-team {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px; font-size: 13px;
}
.mc-team + .mc-team { border-top: 1px solid var(--line); }
.mc-team .nm { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-team .nm.placeholder { color: var(--muted-2); font-weight: 500; font-style: italic; }
.mc-team .sc { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.seed-chip {
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 5px;
  color: #04140c; background: rgba(255,255,255,.14);
}
.seed-chip.s1 { background: var(--accent); }
.seed-chip.s2 { background: var(--seed-2); }
.seed-chip.s3 { background: var(--amber); color: #2a1700; }

/* projected first round */
.bracket-col.is-projected h4 { color: var(--amber); }
.col-proj-tag {
  display: block; margin-top: 4px;
  font-size: 9px; letter-spacing: 1.5px; color: var(--amber);
  opacity: .85;
}
.match-card.is-projected {
  border-color: rgba(255, 174, 59, .32);
  border-style: dashed;
}
.mc-team.winner { background: var(--accent-soft); }
.mc-team.winner .sc { color: var(--accent); }
.mc-team.loser { opacity: .6; }
.mc-team .mc-pens {
  flex: none; font-family: var(--font-display); font-weight: 700;
  font-size: 9.5px; letter-spacing: .3px; white-space: nowrap;
  padding: 1px 6px; border-radius: 20px;
  color: var(--accent); border: 1px solid var(--line);
}
.mc-foot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 6px 7px; font-size: 10.5px; letter-spacing: .4px; color: var(--muted-2);
  text-align: center;
}
.mc-foot .lv { color: var(--live); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.mc-when {
  font-weight: 700; letter-spacing: .5px; color: var(--muted); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mc-no {
  font-family: var(--font-display); font-weight: 700;
  font-size: 9.5px; letter-spacing: .5px; color: var(--muted-2);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px; border-radius: 5px; margin-right: 7px;
}
.mc-venue {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; letter-spacing: .2px; color: var(--muted-2);
  line-height: 1.25; max-width: 100%; min-width: 0;
}
.mc-venue .pin { flex: none; opacity: .85; }
/* Keep every card the same height: one venue line, ellipsised when long.
   Uniform card heights are what let space-around line each match up with
   its feeders (and the connector lines) across the bracket. */
.mc-venue-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- Settings button + panel --------------------------------------- */
.icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer;
  text-decoration: none;
  transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.icon-btn svg, .refresh-btn svg { width: 22px; height: 22px; }
.icon-btn:hover {
  background: var(--accent-soft); color: var(--accent);
  border-color: rgba(37, 224, 127, .3); transform: translateY(-1px);
}
.icon-btn[aria-expanded="true"] {
  background: var(--accent-soft); color: var(--accent); border-color: rgba(37, 224, 127, .35);
}

.settings-panel {
  position: fixed; z-index: 90;
  width: min(304px, calc(100vw - 24px));
  background: var(--glass-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(18px);
  padding: 6px;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.settings-panel.show { opacity: 1; transform: none; pointer-events: auto; }
.sp-head {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; font-size: 12px; color: var(--muted);
  padding: 10px 10px 11px;
}
.sp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 10px; border-top: 1px solid var(--line);
}
.sp-row.col { flex-direction: column; align-items: stretch; gap: 9px; }
.sp-label { font-size: 13px; font-weight: 600; color: var(--text); }
.seg {
  display: flex; gap: 3px; padding: 3px;
  background: rgba(127, 127, 127, .12); border: 1px solid var(--line); border-radius: 11px;
}
.seg-btn {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
  padding: 6px 13px; border-radius: 8px; transition: background .2s, color .2s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--accent); color: #04140c; }
/* stacked rows (Language, Time zone): let the control span the full width */
.sp-row.col .seg { width: 100%; }
.sp-row.col .seg .seg-btn { flex: 1; text-align: center; }
.sp-select {
  width: 100%; font-family: var(--font-body); font-size: 13px; color: var(--text);
  background: var(--glass); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 9px 10px; cursor: pointer; appearance: none;
  background-image: 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='%238fb6a3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px;
}
.sp-select:focus { outline: none; border-color: var(--accent); }
/* In-settings actions (phones only — matching topbar icons are hidden there). */
.sp-blog-row,
.sp-refresh-row { display: none; }
.sp-action {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  text-decoration: none;
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.sp-refresh {
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid rgba(37, 224, 127, 0.35); border-radius: 10px;
  padding: 10px;
}
.sp-refresh:hover { background: rgba(37, 224, 127, 0.22); }
.sp-blog-link {
  color: var(--text); background: rgba(127, 127, 127, .12);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px;
}
.sp-blog-link:hover { color: var(--accent); border-color: rgba(37, 224, 127, .3); }

/* ---- Footer -------------------------------------------------------- */
.footbar {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 30px 16px 14px;
}
.footbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.updated-rel { font-size: 12px; color: var(--muted); letter-spacing: .2px; white-space: nowrap; }
.updated-rel.chip-error { color: var(--live); font-weight: 600; }
.foot-copy { font-size: 11px; color: var(--muted-2); letter-spacing: .4px; text-align: center; opacity: .85; }
.foot-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.foot-links a { font-size: 12px; color: var(--muted); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--accent); }

/* ---- Team dossier popover ------------------------------------------ */
/* interactive hint on any hoverable/tappable team */
.team-trigger { cursor: pointer; }
@media (hover: hover) {
  .team-cell.team-trigger:hover .team-name,
  .mc-team.team-trigger:hover .nm,
  .sch-side.team-trigger:hover .sch-tn { color: var(--accent); }
}
.team-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.team-trigger.tt-active .team-name,
.team-trigger.tt-active .nm,
.team-trigger.tt-active .sch-tn { color: var(--accent); }

.team-pop {
  position: fixed; z-index: 80;
  width: min(344px, calc(100vw - 24px));
  background: var(--glass-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px);
  color: var(--text);
  opacity: 0; transform: translateY(6px) scale(.985); transform-origin: top left;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  overflow: hidden;
}
.team-pop.show { opacity: 1; transform: none; pointer-events: auto; }

.tp-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 13px;
  background: linear-gradient(90deg, rgba(37, 224, 127, 0.13), transparent);
  border-bottom: 1px solid var(--line);
}
.tp-head .flag-emoji, .tp-head .crest, .tp-head .monogram {
  width: 36px; height: 36px; font-size: 32px; border-radius: 8px;
}
.tp-id { min-width: 0; }
.tp-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; letter-spacing: .5px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-sub { color: var(--muted); font-size: 11.5px; margin-top: 3px; letter-spacing: .3px; }

.tp-rec { display: flex; border-bottom: 1px solid var(--line); }
.tp-rec-cell {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 2px;
}
.tp-rec-cell + .tp-rec-cell { border-left: 1px solid var(--line); }
.tp-rec-cell b {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tp-rec-cell b.win { color: var(--win); }
.tp-rec-cell b.loss { color: var(--loss); }
.tp-rec-cell span {
  font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2);
}

.tp-list {
  max-height: 344px; overflow-y: auto;
  padding: 9px; display: flex; flex-direction: column; gap: 7px;
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.tp-list::-webkit-scrollbar { width: 7px; }
.tp-list::-webkit-scrollbar-thumb { background: rgba(37, 224, 127, .4); border-radius: 8px; }

.tpm {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 11px; padding: 9px 11px;
}
.tpm.r-W { border-left-color: var(--win); }
.tpm.r-L { border-left-color: var(--loss); }
.tpm.r-D { border-left-color: var(--draw); }
/* Live games colour the bar by the current score (r-W/L/D above); the LIVE
   pill is the live cue, so don't force the bar red here. */

.tpm-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.tpm-no {
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px;
  color: var(--muted-2); background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px; border-radius: 5px;
}
.tpm-stage {
  font-size: 10px; letter-spacing: .4px; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.tpm-when { margin-left: auto; font-size: 10.5px; color: var(--muted-2); white-space: nowrap; }
.tpm-badge {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  min-width: 20px; text-align: center; padding: 2px 7px; border-radius: 6px;
  letter-spacing: .5px;
}
.tpm-badge.win { background: var(--accent-soft); color: var(--accent); }
.tpm-badge.loss { background: rgba(255, 107, 118, .16); color: var(--loss); }
.tpm-badge.draw { background: rgba(201, 212, 207, .15); color: var(--draw); }
.tpm-badge.sched { background: rgba(255, 255, 255, .06); color: var(--muted); }
.tpm-badge.today { background: var(--gold); color: #2a1700; box-shadow: 0 0 14px rgba(255, 207, 77, .35); }
.tpm-badge.tomorrow { background: rgba(255, 207, 77, .16); color: var(--gold); }
.tpm-badge.live {
  background: rgba(255, 77, 94, .16); color: var(--live);
  display: inline-flex; align-items: center; gap: 4px;
}
.tpm-badge.live .live-dot { width: 6px; height: 6px; }

.tpm-match { display: flex; align-items: center; gap: 8px; }
.tpm-side { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; }
.tpm-side.right { justify-content: flex-end; text-align: right; }
.tpm-side .flag-emoji, .tpm-side .crest, .tpm-side .monogram {
  width: 20px; height: 20px; font-size: 17px; border-radius: 4px;
}
.tpm-tn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpm-side.sel .tpm-tn { color: var(--text); font-weight: 800; }
.tpm-center { flex: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0 5px; font-family: var(--font-display); }
.tpm-sc { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.tpm-dash { color: var(--muted-2); }
.tpm-pens { flex-basis: 100%; text-align: center; font-size: 10px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.tpm-vs { color: var(--muted-2); font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.tpm-venue {
  display: flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 10px; color: var(--muted-2); line-height: 1.25;
}
.tpm-venue .pin { flex: none; opacity: .85; }
.tp-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 12px; }

/* ---- Schedule ------------------------------------------------------- */
/* The schedule owns a fixed slice of the viewport; the city filter is a fixed
   header and the match list scrolls beneath it (so the bar never scrolls away). */
#view-schedule.active {
  display: flex; flex-direction: column;
  height: calc(100vh - 230px); min-height: 340px;
}

.sch-filter {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 820px; margin: 2px auto 9px; padding: 0 4px;
}
.sch-filter[hidden] { display: none; }
.sch-filter-pin { display: inline-flex; flex: none; color: var(--accent); }
.sch-filter-select {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--glass); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 8px 32px 8px 12px; cursor: pointer; appearance: none;
  background-image: 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='%238fb6a3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .2s;
}
.sch-filter-select:hover,
.sch-filter-select:focus { outline: none; border-color: var(--accent); }
.sch-filter-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; font-size: 13px;
  color: var(--muted); background: var(--glass); border: 1px solid var(--line); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.sch-filter-clear:hover { color: var(--text); border-color: var(--line-strong); }
.sch-filter-clear[hidden] { display: none; }

.sch-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 2px 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.sch-scroll::-webkit-scrollbar { width: 9px; }
.sch-scroll::-webkit-scrollbar-thumb { background: rgba(37, 224, 127, .4); border-radius: 8px; }
.sch-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

.sch-day {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 2px; padding: 7px 6px;
}
.sch-day:first-child { margin-top: 2px; }
.sch-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sch-day-label {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 1px;
  font-size: 13px; color: var(--muted); text-transform: uppercase; white-space: nowrap;
}
.sch-day.is-today .sch-day-label { color: var(--gold); }
.sch-day.is-today::after { background: linear-gradient(90deg, rgba(255, 207, 77, .5), transparent); }
.sch-day.is-past .sch-day-label { color: var(--muted-2); }

.sch-divider {
  display: flex; align-items: center; gap: 12px; margin: 12px 2px;
}
.sch-divider::before, .sch-divider::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.sch-divider-label {
  flex: none;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 1.5px;
  font-size: 11px; text-transform: uppercase; color: var(--accent);
  background: var(--accent-soft); padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 0 16px rgba(37, 224, 127, .25);
}

.sch-row {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 14px;
  transition: border-color .2s, opacity .2s;
}
.sch-row:hover { border-color: var(--line-strong); }
.sch-row.is-past { opacity: .5; }
.sch-row.is-past:hover { opacity: .85; }
.sch-row.is-live {
  border-color: rgba(255, 77, 94, .5);
  background: linear-gradient(90deg, rgba(255, 77, 94, .08), var(--glass));
}

.sch-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sch-no {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  color: var(--muted-2); background: rgba(255, 255, 255, .06);
  padding: 1px 6px; border-radius: 5px;
}
.sch-stage {
  font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.sch-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sch-status {
  margin-left: auto;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .5px;
  padding: 2px 9px; border-radius: 6px;
}
.sch-status.done { background: rgba(255, 255, 255, .06); color: var(--muted); }
.sch-status.today { background: var(--gold); color: #2a1700; box-shadow: 0 0 14px rgba(255, 207, 77, .35); }
.sch-status.tomorrow { background: rgba(255, 207, 77, .16); color: var(--gold); }
.sch-status.upcoming { background: rgba(255, 255, 255, .06); color: var(--muted); }
.sch-status.live {
  background: rgba(255, 77, 94, .16); color: var(--live);
  display: inline-flex; align-items: center; gap: 5px;
}
.sch-status.live .live-dot { width: 6px; height: 6px; }

.sch-teams { display: flex; align-items: center; gap: 12px; }
.sch-side { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; }
.sch-side.away { justify-content: flex-end; text-align: right; }
.sch-side .flag-emoji, .sch-side .crest, .sch-side .monogram { width: 22px; height: 22px; font-size: 19px; }
.sch-tn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-side.win .sch-tn { font-weight: 800; color: var(--text); }
.sch-side.lose .sch-tn { color: var(--muted); }
.sch-mid {
  flex: none; min-width: 66px; justify-content: center;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; font-family: var(--font-display);
}
.sch-sc { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.sch-dash { color: var(--muted-2); }
.sch-pens { flex-basis: 100%; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted-2); white-space: nowrap; }
.sch-vs { color: var(--muted-2); font-size: 12px; font-weight: 600; letter-spacing: .5px; }
.sch-foot { margin-top: 7px; }
.sch-venue { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted-2); }
.sch-venue .pin { flex: none; opacity: .85; }

/* ---- Loader / empty / footer --------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: rgba(4, 20, 12, .82); backdrop-filter: blur(4px);
  color: var(--muted); font-size: 14px; letter-spacing: .5px;
  transition: opacity .4s;
}
.loader.hidden { opacity: 0; pointer-events: none; }
.loader-ball { font-size: 46px; animation: bounce 1s infinite; }

.empty {
  text-align: center; color: var(--muted); padding: 60px 20px;
  background: var(--glass); border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty .big { font-size: 40px; display: block; margin-bottom: 10px; }

.footnote {
  text-align: center; color: var(--muted-2); font-size: 11.5px;
  padding: 28px 16px 10px; letter-spacing: .3px;
}

/* ---- Animations ----------------------------------------------------- */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(255, 77, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-in { from { transform: rotate(-220deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 860px) {
  .groups-grid { grid-template-columns: 1fr; }
}
/* The standings table has 9 columns and won't fit a phone. Rather than clip
   it (cards are overflow:hidden) or force a sideways scroll, drop the least
   essential columns as width shrinks — keeping the decisive GD + Pts. The full
   goals breakdown stays one tap away in the team dossier. */
@media (max-width: 520px) {
  /* The dossier is centred in the viewport on phones (see positionPop), so
     scale it in from its centre rather than the desktop top-left anchor. */
  .team-pop { transform-origin: center; }
  /* Four tabs are tight on a phone. Compact them, keep each label on one line,
     and let the row scroll horizontally rather than wrap (which would break the
     sliding pill) if the condensed display font is unavailable on the device.
     Padding stays 5px so the JS pill offset (hardcoded to 5) stays aligned. */
  .tabs { gap: 2px; padding: 5px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 9px 12px; font-size: 12.5px; letter-spacing: .3px; white-space: nowrap; flex: 0 0 auto; }
  .odds-list { padding: 8px 8px 12px; }
  .odds-row { grid-template-columns: 26px 24px minmax(0, 1fr) 46px; gap: 8px; padding: 9px 10px; }
  .topbar { flex-wrap: nowrap; gap: 10px; }
  .brand { flex: 1 1 auto; gap: 10px; }
  .brand-ball { width: 48px; height: 48px; border-radius: 12px; }
  .brand-text { max-width: min(230px, calc(100vw - 192px)); }
  .brand-text h1 {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    letter-spacing: 0;
  }
  .hosts-label { display: none; }
  .status-cluster { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; }
  table.standings { font-size: 13px; }
  table.standings thead th, table.standings tbody td { padding: 11px 6px; }
  .team-name { max-width: 120px; }
  .third-head { padding: 16px 16px 4px; }
  .third-table { padding: 8px 8px 14px; }
  .third-row,
  .third-head-row {
    grid-template-columns: 28px minmax(0, 1fr) 36px 42px 42px;
    gap: 6px;
  }
  .third-row {
    padding: 9px 8px 9px 14px;
    border-radius: 10px;
    font-size: 13px;
  }
  .third-head-row { padding: 4px 8px 4px 14px; }
  .third-row .qbar { left: 8px; }
  .third-team { gap: 8px; }
  .third-team .flag-emoji,
  .third-team .crest,
  .third-team .monogram {
    width: 24px;
    height: 24px;
    font-size: 20px;
  }
  .third-team .team-name { max-width: none; }
  /* Topbar keeps two icons everywhere: the section toggle (The Cup Daily on the
     tracker, the trophy on content pages) plus settings — mirroring each other.
     Only refresh collapses into the settings panel; the LIVE chip moves to its
     own centered row above the tabs. */
  .refresh-btn { display: none; }
  .sp-refresh-row { display: flex; }
}
@media (max-width: 480px) {
  .col-gf, .col-ga { display: none; }
}
@media (max-width: 360px) {
  .team-cell { gap: 8px; padding-left: 12px; }
  .team-name { max-width: 92px; }
  .third-row,
  .third-head-row {
    grid-template-columns: 26px minmax(0, 1fr) 32px 38px 38px;
    gap: 5px;
  }
  .third-team { gap: 6px; }
  .third-team .flag-emoji,
  .third-team .crest,
  .third-team .monogram {
    width: 22px;
    height: 22px;
    font-size: 19px;
  }
  .third-team .team-name { max-width: none; }
}
.hidden { display: none !important; }

/* ---- Footer links --------------------------------------------------- */
.footnote .foot-links { display: block; margin-top: 8px; }
.footnote .foot-links a,
.footnote a { color: var(--muted); text-decoration: none; }
.footnote .foot-links a:hover,
.footnote a:hover { color: var(--accent); text-decoration: underline; }

/* ---- Cookie consent banner ----------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 80;
  width: min(720px, calc(100vw - 28px));
  transform: translate(-50%, 160%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--glass-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.cookie-banner.show { transform: translate(-50%, 0); }
.cookie-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
}
.cookie-text {
  flex: 1 1 320px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.cookie-text a { color: var(--accent); text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3px;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.cookie-btn:hover { border-color: var(--accent); }
.cookie-btn:active { transform: translateY(1px); }
.cookie-btn.accept {
  background: var(--accent);
  color: var(--pitch-900);
  border-color: var(--accent);
}
.cookie-btn.accept:hover { background: #43e892; }
@media (max-width: 520px) {
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; }
}

/* ---- Legal / policy pages ------------------------------------------ */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 32px) 40px;
  line-height: 1.65;
}
.legal-back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.legal-back:hover { color: var(--accent); }
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 40px);
  letter-spacing: 0.5px;
}
.legal-updated { color: var(--muted-2); font-size: 13px; margin-bottom: 24px; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 28px 0 10px;
  color: var(--text);
}
.legal p { color: var(--muted); margin-bottom: 12px; }
.legal ul { color: var(--muted); margin: 0 0 14px 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--text); }
.legal .footnote { margin-top: 36px; border-top: 1px solid var(--line); }