:root {
  --bg: #0d0f13;
  --panel: #181b22;
  --panel-2: #1f242d;
  --line: #2b313c;
  --text: #e7eaf0;
  --muted: #9aa3b2;
  --accent: #38bdf8;
  --accent-2: #818cf8;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 10px;
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
/* A faint cyan glow behind the top of the page for a little depth. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 480px at 50% -8%, rgba(56, 189, 248, .07),
                    transparent 70%);
}

a { color: var(--accent); text-decoration: none; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
}
.brand {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  font-weight: 700; font-size: 1.1rem; white-space: nowrap;
  letter-spacing: -.01em;
}
.brand-mark { width: 1.25rem; height: 1.25rem; flex: none; }
/* League name shown beside the brand on /l/<slug>/* pages, so you always
   know which pool you are looking at; truncates on narrow screens. */
.crumb {
  color: var(--text); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 48vw;
}
.crumb::before {
  content: "\203A"; color: var(--muted); font-weight: 400;
  margin-right: .55rem;
}
.topbar-right { display: flex; align-items: center; gap: .8rem; }
.who { color: var(--muted); }
.inline { display: inline; margin: 0; }
button.link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font: inherit; padding: 0;
}

/* Hamburger: hidden on desktop, shown below the nav breakpoint. The checkbox
   is the pure-CSS toggle state; the label is the visible three-bar button
   that morphs into an X when open. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 9px; cursor: pointer;
  border-radius: 8px; flex: none;
}
.nav-burger:hover { background: var(--panel-2); }
.nav-burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--text); transition: transform .2s ease, opacity .2s ease;
}

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }

/* Mobile: collapse the nav into a drop-down drawer under the top bar. */
@media (max-width: 760px) {
  .nav-burger { display: flex; }
  /* …but not when there is no menu to open (e.g. the landing page). */
  .topbar:has(.topbar-right:empty) .nav-burger { display: none; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .topbar .topbar-right {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .25s ease;
  }
  .nav-toggle:checked ~ .topbar-right {
    max-height: 80vh; overflow-y: auto; visibility: visible;
  }
  .topbar .nav {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }
  .topbar .nav a {
    padding: .85rem 1.1rem; border-top: 1px solid var(--line);
    text-align: left;
  }
  .topbar .topbar-right > .who {
    padding: .85rem 1.1rem; border-top: 1px solid var(--line);
  }
  .topbar .topbar-right > .inline { padding: .6rem 1.1rem .85rem; }
}

/* Landing */
.landing { max-width: 560px; margin: 2.5rem auto; padding: 0 .25rem; }
.landing-hero { text-align: center; margin-bottom: 1.8rem; }
.landing-hero h1 {
  font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.12; margin: 0;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-hero .tagline {
  color: var(--muted); margin: .9rem auto 0; max-width: 46ch;
}
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.identify { display: flex; flex-direction: column; gap: .8rem; }
.identify.card { padding: 1.3rem 1.4rem; }
.identify h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.identify label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); }
.identify input, .goal {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: .55rem;
}
.identify input:focus, .goal:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}
.identify button, .lock-btn {
  background: var(--accent); color: #04212e; border: none; border-radius: 6px;
  padding: .65rem 1rem; font-weight: 600; cursor: pointer;
}
.identify button:hover, .lock-btn:hover { filter: brightness(1.06); }
.fineprint { color: var(--muted); font-size: .8rem; margin: .1rem 0 0; }
.error { color: var(--bad); }

/* Landing: how-it-works */
.how {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .9rem;
}
.how li { display: flex; gap: .8rem; align-items: flex-start; }
.how-step {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  color: var(--accent); background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .35);
}
.how strong { display: block; }
.how p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }

/* Reusable button (links styled as buttons) */
.btn {
  display: inline-block; padding: .5rem .95rem; border-radius: 8px;
  font-weight: 600; font-size: .9rem; cursor: pointer; line-height: 1.2;
  background: var(--accent); color: #04212e; border: 1px solid var(--accent);
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: rgba(56, 189, 248, .1); filter: none; }

/* Home: your leagues */
.home h1 { margin-bottom: 1rem; }
.league-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.league-card {
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .15s ease, transform .15s ease;
}
.league-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.league-name { margin: 0; font-size: 1.15rem; }
.league-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.empty-state { padding: 1.4rem 1.5rem; max-width: 560px; }
.empty-title { margin: 0 0 .3rem; font-weight: 600; font-size: 1.05rem; }
.home-links {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.6rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}

/* Lock panel */
.lock-panel {
  position: sticky; top: 52px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .8rem 1rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.progress strong { color: var(--accent); }
.locked-msg { margin: 0; }
.deadline {
  margin: 0; font-size: .85rem; font-weight: 600;
  color: var(--muted); width: 100%;
}
.deadline.past { color: var(--bad); }

/* Feeling-lucky autofill */
.lucky-bar { margin-bottom: 1rem; }
.lucky-bar form { display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; }
.lucky-btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .5rem .9rem; font-weight: 600; cursor: pointer;
}
.lucky-btn:hover { border-color: var(--accent); color: var(--accent); }
.lucky-hint { color: var(--muted); font-size: .8rem; }
.not-ready-head { color: var(--warn); font-weight: 600; }
.issues { margin: .3rem 0 0; padding-left: 1.1rem; max-height: 7rem; overflow-y: auto; }
.issues li { color: var(--warn); }

/* Standings */
.standings-panel {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem; margin: 1rem 0 1.5rem;
}
@media (max-width: 760px) {
  .standings-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* One column on phones so the table gets the full width: team names stop
   wrapping and the GF column no longer clips off the right edge. */
@media (max-width: 560px) {
  .standings-panel { grid-template-columns: 1fr; }
}
table.standings {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  font-size: .82rem;
}
table.standings caption {
  text-align: left; font-weight: 600; padding: .35rem .5rem; background: var(--panel-2);
}
table.standings.decided caption { color: var(--good); }
.standings th, .standings td { padding: .25rem .5rem; text-align: right; }
.standings th:nth-child(2), .standings td.team { text-align: left; }
.standings tr.adv td { color: var(--good); }          /* top two qualify */
.standings tr.adv.third td { color: var(--warn); }    /* best-third qualifier */

/* Groups + matches */
.groups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: .8rem;
}
.group-card, .ko-round {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .8rem;
}
.group-card h3, .ko-round h3 { margin: .2rem 0 .5rem; }
.count { font-size: .75rem; font-weight: 500; color: var(--muted);
  margin-left: .35rem; }
.count.all-done { color: var(--good); }
.legend { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  color: var(--muted); font-size: .8rem; margin: .2rem 0 .8rem; }
.legend .swatch { display: inline-block; width: .8rem; height: .8rem;
  border-radius: 3px; vertical-align: middle; margin-right: .35rem;
  border: 1px solid var(--line); }
.legend .swatch.todo { background: rgba(251, 191, 36, .25);
  border-color: rgba(251, 191, 36, .55); }
.legend .swatch.bad { background: rgba(248, 113, 113, .3);
  border-color: var(--bad); }
.legend .swatch.done { background: transparent; border-color: var(--good); }
.match-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr 2.6rem .6rem 2.6rem 1fr;
  align-items: center; gap: .3rem; margin: 0; padding: .15rem 0;
}
.match-row.ko { grid-template-columns: 1.4rem 1fr 2.6rem .6rem 2.6rem 1fr auto; }
.num { color: var(--muted); font-size: .75rem; }
.team { font-size: .85rem; }
.team.away { text-align: right; }
.flag { width: 18px; height: 13px; vertical-align: -2px; margin-right: .4rem;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  object-fit: cover; }
.flag-blank { display: inline-block; width: 18px; height: 13px;
  vertical-align: -2px; margin-right: .4rem; border-radius: 2px;
  background: var(--panel-2); box-shadow: 0 0 0 1px var(--line); }
.match-row.ko .team.away { text-align: left; }
.goal { width: 100%; text-align: center; padding: .3rem; }
/* Live fill-state cues (update as you type, no re-render needed):
   empty = still to fill (amber), out of 0-20 = invalid (red),
   filled & valid = done (green). */
.goal:placeholder-shown {
  background: rgba(251, 191, 36, .10);
  border-color: rgba(251, 191, 36, .55);
}
.goal:not(:placeholder-shown):valid { border-color: var(--good); }
.goal:invalid {
  background: rgba(248, 113, 113, .18);
  border-color: var(--bad);
}
.dash { text-align: center; color: var(--muted); }
.match-row.entered .num { color: var(--accent); }
.adv-pick { display: flex; align-items: center; gap: .25rem; cursor: pointer; }
.adv-hint { color: var(--warn); font-size: .75rem; }
.needs-advancer { outline: 1px solid var(--warn); border-radius: 6px; }
.locked-note { color: var(--muted); font-size: .75rem; text-align: center; }
.is-locked-slot { opacity: .8; }

/* Knockout */
.bracket-panel { margin-top: 1.5rem; }
.bracket-panel .ko-round { margin-bottom: .8rem; }
.champion { color: var(--good); font-size: 1.05rem; }

.sheet.is-locked input, .sheet.is-locked button { pointer-events: none; }

/* Read-only centered wall-chart bracket. Full-bleed to the *visible* width
   (100vw minus the scrollbar width in --sbw, set by a small script in
   base.html) so the wide chart can use the whole window without adding a
   page scrollbar. When it is still wider than that (narrow screens), the
   panel scrolls; the row's auto side-margins centre it when it fits and go
   flush-left when it overflows so the far edge stays reachable. */
.bracket-view {
  margin: 1.5rem 0;
  width: calc(100vw - var(--sbw, 0px));
  position: relative;
  left: 50%;
  margin-left: calc(-50vw + var(--sbw, 0px) / 2);
  padding: 0 1rem;
}
.wallchart { display: flex; overflow-x: auto; padding-bottom: .5rem; }
.wallchart-row { display: flex; align-items: center; margin-inline: auto; }
.wc-side, .wc-final { display: flex; align-items: center; }

/* one tree node: its two feeders (.bn-kids) and its own box (.bn-self) */
.bn { display: flex; align-items: center; }
.bn-kids { display: flex; flex-direction: column; justify-content: center;
  position: relative; }
.bn-self { position: relative; padding: .25rem .62rem; }

.bmatch { width: 132px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; font-size: .72rem; }
.bmatch.pending { opacity: .4; }
.bteam { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; }
.bteam + .bteam { border-top: 1px solid var(--line); }
.bteam .bname { flex: 1; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.bteam .bscore { font-variant-numeric: tabular-nums; min-width: 1.2ch;
  text-align: right; color: var(--muted); }
.bteam.win { color: var(--good); font-weight: 600; }
.bteam.win .bscore { color: var(--good); }
/* mark the centre box as the final (title match) */
.bn-final .bmatch { border-color: rgba(251, 191, 36, .6);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, .3); }

/* connector colour for every stub/joiner */
.bn-self::before, .bn-self::after,
.bn-kids::before, .bn-kids::after { background: rgba(154, 163, 178, .5); }

/* LEFT half: feeders left, box right -> connectors go right */
.wc-left .bn-self::after { content: ""; position: absolute; right: 0;
  top: 50%; width: .62rem; height: 2px; }
.wc-left .bn-kids::after { content: ""; position: absolute; right: 0;
  top: 25%; width: 2px; height: 50%; }
.wc-left .bn-parent::before { content: ""; position: absolute; left: 0;
  top: 50%; width: .62rem; height: 2px; }

/* RIGHT half: mirrored */
.wc-right .bn-self::before { content: ""; position: absolute; left: 0;
  top: 50%; width: .62rem; height: 2px; }
.wc-right .bn-kids::before { content: ""; position: absolute; left: 0;
  top: 25%; width: 2px; height: 50%; }
.wc-right .bn-parent::after { content: ""; position: absolute; right: 0;
  top: 50%; width: .62rem; height: 2px; }

/* FINAL (centre): a stub each side toward the two semi-final winners */
.wc-final .bn-final::before { content: ""; position: absolute; left: 0;
  top: 50%; width: .62rem; height: 2px; }
.wc-final .bn-final::after { content: ""; position: absolute; right: 0;
  top: 50%; width: .62rem; height: 2px; }

.bracket-footer { display: flex; gap: 2rem; align-items: center;
  flex-wrap: wrap; margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--line); }
.bchamp { font-size: 1rem; }
.bchamp strong { color: var(--good); }
.bthird { color: var(--muted); }
.muted { color: var(--muted); }
.hint { color: var(--muted); }

/* Top-bar navigation */
.nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; }
/* Keep each label intact: a crowded bar wraps whole items to a new line
   rather than breaking a label like "My sheet" mid-word. */
.nav a { color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--accent); }

/* Leaderboard */
.board { max-width: 900px; margin: 0 auto; }
/* Wide tables stay swipeable on phones instead of squishing every column;
   the essential left-most columns (rank/name/points) show first. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.leaderboard { margin-top: 1rem; }
table.leaderboard {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  margin-top: 1rem;
}
@media (max-width: 640px) {
  .table-scroll table.leaderboard { min-width: 540px; }
  .leaderboard td.player, .leaderboard th.player { white-space: nowrap; }
  .leaderboard th, .leaderboard td { padding: .45rem .5rem; }
}
.leaderboard th, .leaderboard td {
  padding: .45rem .6rem; text-align: right;
  border-bottom: 1px solid var(--line);
}
.leaderboard tbody tr:last-child td { border-bottom: none; }
.leaderboard th {
  background: var(--panel-2); color: var(--muted); font-weight: 600;
  font-size: .82rem;
}
.leaderboard th.player, .leaderboard td.player { text-align: left; }
.leaderboard th.rank, .leaderboard td.rank {
  text-align: center; color: var(--muted); width: 2.2rem;
}
.leaderboard th.total, .leaderboard td.total {
  font-weight: 700; color: var(--accent);
}
.leaderboard tr.leader td { background: rgba(56, 189, 248, .08); }
.leaderboard tr.leader td.rank { color: var(--warn); font-weight: 700; }
.leaderboard tbody tr:hover td { background: rgba(255, 255, 255, .03); }

/* Per-participant detail */
.detail { max-width: 760px; margin: 0 auto; }
.backlink { margin: 0 0 .6rem; }
.detail h1 .grand {
  color: var(--accent); font-size: 1rem; margin-left: .6rem;
}
.cat-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .9rem; margin-bottom: .9rem;
}
.cat-card h3 {
  margin: .1rem 0 .5rem; display: flex; align-items: baseline;
  gap: .6rem; flex-wrap: wrap;
}
.cat-total { color: var(--accent); font-size: .9rem; }
.cat-counts { color: var(--muted); font-size: .8rem; font-weight: 400; }
.cat-counts .ok { color: var(--good); }
.cat-counts .bad { color: var(--bad); }
table.items { width: 100%; border-collapse: collapse; font-size: .85rem; }
.items th, .items td {
  padding: .25rem .4rem; text-align: left;
  border-bottom: 1px solid var(--line);
}
.items th.pts, .items td.pts { text-align: right; }
.items tr.hit td:first-child { box-shadow: inset 2px 0 0 var(--good); }
.items tr.miss td:first-child { box-shadow: inset 2px 0 0 var(--bad); }
.items tr.hit td.pts { color: var(--good); font-weight: 600; }

/* Admin results grid (reuses .match-row from the sheet) */
.results-progress {
  position: sticky; top: 52px; z-index: 5; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem 1rem; margin-bottom: 1rem;
}
.results-progress strong { color: var(--accent); }
.result-section { margin-bottom: 1.2rem; }
.result-section h3 { margin: .2rem 0 .5rem; color: var(--muted); }
.result-matches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0 1.2rem;
}

/* Projection (reuses table.leaderboard) */
.stale {
  color: var(--warn); font-size: .85rem; margin: -.3rem 0 .4rem;
}
.projection h2 { margin: 1.4rem 0 .2rem; color: var(--muted); }
.projection td.prob { position: relative; white-space: nowrap; }
.prob-bar {
  display: inline-block; height: .5rem; width: var(--p, 0%);
  vertical-align: middle; border-radius: 3px;
  background: var(--accent); opacity: .85;
}
.prob-bar.team { background: var(--good); }
.prob-val { margin-left: .45rem; font-variant-numeric: tabular-nums; }
.projection.teams { max-width: 480px; }

/* Merged dashboard + time-series charts */
:root {
  --c0: #38bdf8; --c1: #fbbf24; --c2: #34d399; --c3: #f87171;
  --c4: #a78bfa; --c5: #fb923c; --c6: #22d3ee; --c7: #f472b6;
}
.board-wide { max-width: 1100px; margin: 0 auto; }
.charts { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
figure.chart-fig {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .9rem; margin: 0;
}
figure.chart-fig figcaption {
  color: var(--muted); font-size: .85rem; margin-bottom: .2rem;
}
svg.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: .7rem; }
.chart .ln {
  fill: none; stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round;
}
.chart .ln.dim { stroke: var(--muted); opacity: .22; stroke-width: 1; }
.chart .ln.s0 { stroke: var(--c0); }
.chart .ln.s1 { stroke: var(--c1); }
.chart .ln.s2 { stroke: var(--c2); }
.chart .ln.s3 { stroke: var(--c3); }
.chart .ln.s4 { stroke: var(--c4); }
.chart .ln.s5 { stroke: var(--c5); }
.chart .ln.s6 { stroke: var(--c6); }
.chart .ln.s7 { stroke: var(--c7); }
.chart .endlbl { font-size: .72rem; }
.chart .endlbl.s0 { fill: var(--c0); }
.chart .endlbl.s1 { fill: var(--c1); }
.chart .endlbl.s2 { fill: var(--c2); }
.chart .endlbl.s3 { fill: var(--c3); }
.chart .endlbl.s4 { fill: var(--c4); }
.chart .endlbl.s5 { fill: var(--c5); }
.chart .endlbl.s6 { fill: var(--c6); }
.chart .endlbl.s7 { fill: var(--c7); }
/* Pure-CSS spotlight: hover the chart to dim all, hover a line to lift it. */
svg.chart:hover .ln { opacity: .15; }
svg.chart .ln:hover { opacity: 1; stroke-width: 2.8; }
.chart-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  padding: 0; margin: .4rem 0 0; font-size: .8rem; color: var(--text);
}
.chart-legend li { display: flex; align-items: center; }
.chart-legend .swatch {
  display: inline-block; width: .8rem; height: .8rem;
  border-radius: 2px; margin-right: .35rem;
}
.chart-legend .swatch.s0 { background: var(--c0); }
.chart-legend .swatch.s1 { background: var(--c1); }
.chart-legend .swatch.s2 { background: var(--c2); }
.chart-legend .swatch.s3 { background: var(--c3); }
.chart-legend .swatch.s4 { background: var(--c4); }
.chart-legend .swatch.s5 { background: var(--c5); }
.chart-legend .swatch.s6 { background: var(--c6); }
.chart-legend .swatch.s7 { background: var(--c7); }
.chart-legend .swatch.dim { background: var(--muted); opacity: .4; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); }
.leaderboard th.proj-start, .leaderboard td.proj-start {
  border-left: 1px solid var(--line);
}

/* Team page: per-team knockout matchup cards */
.matchup-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .8rem; margin-bottom: .7rem;
}
.matchup-card h3 {
  margin: .1rem 0 .3rem; font-size: 1rem;
  display: flex; align-items: baseline; gap: .5rem;
}
.matchup-card h3 .title-odd { color: var(--accent); font-size: .85rem; }
.matchup-round {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  padding: .3rem 0; border-top: 1px solid var(--line);
}
.matchup-round .rnd {
  color: var(--muted); font-size: .78rem; width: 3.2rem; flex: none;
}
.matchup-opp {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .82rem; white-space: nowrap;
}
.matchup-opp .obar {
  display: inline-block; height: .45rem; border-radius: 2px;
  background: var(--good); opacity: .8;
}
.matchup-opp .oval {
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Admin: dashboard hub links */
.admin-links { display: flex; gap: 1rem; margin: 0 0 1.6rem; }

/* Admin: per-league management */
.admin-league { max-width: 760px; margin: 0 auto; }
.admin-league h2 { margin: 1.6rem 0 .4rem; color: var(--muted); font-size: 1rem; }
.admin-league .identify { max-width: 420px; }
.members .ok { color: var(--good); }
.member-actions { white-space: nowrap; text-align: right; }
.member-actions .inline + .inline { margin-left: .8rem; }
button.danger-link { color: var(--bad); }
.danger-head { color: var(--bad) !important; }
.danger-zone {
  border: 1px solid var(--bad); border-radius: 8px;
  padding: .8rem 1rem; margin-top: .4rem;
}
.danger-zone p { margin-top: 0; color: var(--muted); }
button.danger {
  background: var(--bad); color: #2a0707; border: none; border-radius: 6px;
  padding: .6rem 1rem; font-weight: 600; cursor: pointer;
}

/* ===== Nations: the index of all 48 teams ===== */
.nations h2, .nation h2 {
  margin: 1.5rem 0 .3rem; color: var(--muted); font-size: 1rem;
}
.mini-legend { margin: .8rem 0 .4rem; }
.mini-key { font-weight: 600; }
.mini-key.out { color: var(--muted); }
.mini-key.ko { color: var(--accent); }
.mini-key.fin { color: var(--good); }

.nation-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.group-card { padding: .7rem .9rem; }
.group-card h2 {
  margin: 0 0 .5rem; color: var(--text); font-size: .95rem;
  letter-spacing: .02em;
}
.nation-list { list-style: none; margin: 0; padding: 0; }
.nation-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: .5rem;
  padding: .3rem 0; border-top: 1px solid var(--line);
}
.nation-row:first-child { border-top: none; }
.nation-link {
  display: flex; align-items: center; gap: .45rem;
  color: var(--text); min-width: 0;
}
.nation-link:hover .nname { color: var(--accent); }
.nname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntitle {
  color: var(--muted); font-variant-numeric: tabular-nums;
  font-size: .85rem; min-width: 3rem; text-align: right;
}
.mini {
  display: inline-flex; width: 90px; height: .5rem; flex: none;
  border-radius: 3px; overflow: hidden; background: var(--line);
}
.mini .seg { height: 100%; }
.mini .seg.out { background: var(--panel-2); }
.mini .seg.ko { background: var(--accent); opacity: .85; }
.mini .seg.fin { background: var(--good); }

/* ===== A single nation's page ===== */
.back { display: inline-block; margin-bottom: .6rem; color: var(--muted); }
.back:hover { color: var(--accent); }
.nation-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem; padding: 1rem 1.2rem;
}
.nation-id { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.nation-id .flag {
  width: 3rem; height: auto; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line);
}
.nation-id h1 { margin: 0; font-size: 1.5rem; }
.nation-facts { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }
.status {
  font-size: .82rem; font-weight: 600; padding: .3rem .7rem;
  border-radius: 999px; white-space: nowrap;
}
.status.alive { background: rgba(52, 211, 153, .12); color: var(--good); }
.status.out { background: rgba(248, 113, 113, .12); color: var(--bad); }

.nation-odds { display: flex; gap: 1rem; margin: 1rem 0 .2rem; }
.odd {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem 1rem; min-width: 7rem;
}
.odd-val {
  display: block; font-size: 1.4rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.odd-lbl { color: var(--muted); font-size: .8rem; }

/* Group standings: finish-position odds bar */
.group-standings td.finish, .group-standings th.finish { min-width: 130px; }
.posbar {
  display: flex; width: 130px; height: .55rem;
  border-radius: 3px; overflow: hidden; background: var(--line);
}
.posbar .seg { height: 100%; }
.posbar .seg.p1 { background: var(--good); }
.posbar .seg.p2 { background: var(--accent); }
.posbar .seg.p3 { background: var(--warn); }
.posbar .seg.p4 { background: var(--muted); opacity: .5; }
.finish-legend { display: flex; gap: .8rem; align-items: center; }
.finish-legend .key { display: inline-flex; align-items: center; }
.finish-legend .key::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 2px;
  margin-right: .3rem; display: inline-block;
}
.finish-legend .key.p1::before { background: var(--good); }
.finish-legend .key.p2::before { background: var(--accent); }
.finish-legend .key.p3::before { background: var(--warn); }
.finish-legend .key.p4::before { background: var(--muted); opacity: .5; }

/* The nation's three group fixtures */
.fixtures {
  list-style: none; padding: 0; margin: .8rem 0 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.fixture {
  display: flex; align-items: center; gap: .7rem;
  padding: .35rem .6rem; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 6px; font-size: .9rem;
}
.fixture.w { border-left-color: var(--good); }
.fixture.d { border-left-color: var(--warn); }
.fixture.l { border-left-color: var(--bad); }
.fx-day { color: var(--muted); font-size: .75rem; width: 2.4rem; flex: none; }
.fx-opp {
  display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 0;
}
.fx-ha { color: var(--muted); }
.fx-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-kick { color: var(--muted); font-size: .8rem; }

/* ===== Knockout matchup funnel ===== */
.funnel { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0; }
.funnel-round { display: flex; flex-direction: column; gap: .2rem; }
.fr-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem;
}
.fr-label { color: var(--text); font-weight: 600; }
.fr-reach { color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-bar {
  display: flex; gap: 1px; width: 100%; height: 1.6rem;
  border-radius: 5px; overflow: hidden; background: var(--line);
}
.fr-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  background: var(--accent); opacity: .85;
}
.fr-seg .flag { width: 18px; height: auto; }
.fr-seg.others { background: var(--panel-2); opacity: 1; }

/* Index: league champion-pick badge */
.champ-badge {
  font-size: .72rem; color: var(--warn); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== A nation's "your pool" block (league context) ===== */
.pool {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .8rem 1rem; margin-top: .3rem;
}
.pool-stats {
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin-bottom: .8rem;
}
.pool-stat { display: flex; flex-direction: column; }
.ps-pool {
  font-size: 1.3rem; font-weight: 700; color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.ps-pool small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.ps-lbl { color: var(--text); font-size: .82rem; }
.ps-model { color: var(--muted); font-size: .76rem; }
.pool-bar {
  display: flex; width: 100%; height: .6rem; border-radius: 3px;
  overflow: hidden; background: var(--line);
}
.pool-bar .seg { height: 100%; }
.pool-bar .seg.out { background: var(--panel-2); }
.pool-bar .seg.ko { background: var(--accent); opacity: .85; }
.pool-bar .seg.fin { background: var(--good); }
.pool-backers { margin: .6rem 0 0; font-size: .9rem; }

/* ===== Tournament pages: bracket + group tables ===== */
.section-links {
  display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 .4rem;
  font-size: .85rem;
}
/* Linked nation names in tables/fixtures stay text-coloured, lift on hover. */
.nlink { color: inherit; }
.nlink:hover { color: var(--accent); }
/* Advancing rows on the group tables. */
.group-standings tr.adv td.rank { color: var(--good); font-weight: 700; }
.group-standings tr.adv td { background: rgba(52, 211, 153, .06); }

/* Bracket boxes: linked team + the source rule for empty slots. */
.bteam .blink {
  display: flex; align-items: center; gap: .3rem; flex: 1; min-width: 0;
  color: inherit;
}
.bteam .blink:hover .bname { color: var(--accent); }
.bname.slot-rule { color: var(--muted); font-style: italic; }

/* ===== Survival curve (charts.py survival_chart) ===== */
.surv-area { fill: var(--accent); opacity: .12; }
.surv-line {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.surv-dot { fill: var(--accent); }
.surv-val {
  fill: var(--text); font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

/* ===== Rules / how-it-works page ===== */
.rules-page h2 { margin: 1.8rem 0 .4rem; }
.rules-page > .hint { margin-bottom: 1.4rem; }
.rules-scope { font-size: .85rem; margin: 0 0 1rem; }
.rules-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rule-card { padding: .9rem 1.1rem 1rem; }
.rule-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.rule-rows { list-style: none; margin: 0; padding: 0; }
.rule-rows li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .35rem 0; border-top: 1px solid var(--line);
}
.rule-rows li:first-child { border-top: none; }
.rule-text { flex: 1; min-width: 0; }
.rule-pts {
  flex: none; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rule-note { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); }
.rules-caveats {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.rules-caveats li {
  padding: .6rem .8rem; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; font-size: .9rem;
}
.rules-cta { margin-top: 1.6rem; }

/* Collapsible "how to fill" helper on the prediction sheet. */
.fill-help {
  margin: 0 0 1.2rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .2rem .9rem;
}
.fill-help > summary {
  cursor: pointer; padding: .55rem 0; font-weight: 600; color: var(--accent);
  list-style-position: inside;
}
.fill-help[open] > summary { border-bottom: 1px solid var(--line); }
.fill-help ul {
  margin: .7rem 0 .8rem; padding-left: 1.1rem;
  display: flex; flex-direction: column; gap: .45rem;
  font-size: .9rem; color: var(--muted);
}
.fill-help ul strong { color: var(--text); font-weight: 600; }

/* ===== Banter stats ===== */
.banter h2 { margin: 1.6rem 0 .2rem; }
.award-grid {
  display: grid; gap: .9rem; margin: .7rem 0 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.award { padding: .95rem 1.05rem; }
.award h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.award-blurb { margin: 0 0 .65rem; font-size: .8rem; line-height: 1.35; }
.award-winner {
  margin: 0; font-size: 1.05rem; display: flex; align-items: center;
  gap: .4rem;
}
.award-detail { margin: .3rem 0 0; font-size: .88rem; color: var(--text); }
.award-pending { margin: 0; font-size: .88rem; font-style: italic; }