:root {
  --fg: #1a1a1a;
  --muted: #666;
  --line: #ccc;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  margin: 1.5rem;
  line-height: 1.4;
}

h1 { margin: 0.2rem 0; }
.teams, .intro { color: var(--muted); margin-top: 0; }

/* --- index --- */
.group-list { list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; }
.group-list a { display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.9rem; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: inherit; }
.group-list a:hover { border-color: #888; background: #fafafa; }
.group-flags { display: flex; gap: 0.85rem; align-items: center; max-width: 100%; }
/* Fixed width (not height) keeps the row's total width deterministic regardless
   of each flag's aspect ratio, so it never escapes the card. */
.group-flags .flag { width: 1.9rem; height: auto; }
.group-status { font-weight: 700; letter-spacing: 0.03em; font-size: 0.95rem; min-height: 1.2em; }

/* --- group page --- */
.topbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.home-link { text-decoration: none; color: var(--muted); }
.group-nav a { display: inline-block; padding: 0.1rem 0.45rem; margin: 0 1px;
  border: 1px solid var(--line); border-radius: 5px; text-decoration: none;
  color: inherit; font-weight: 600; }
.group-nav a.active { background: var(--fg); color: #fff; border-color: var(--fg); }

/* --- scores --- */
.scores { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; }
.scoreline { display: flex; align-items: center; gap: 0.35rem; font-size: 1.2rem; }
.scoreline .team { font-weight: 700; }
.scoreline .num { min-width: 1.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.scores .kickoff { color: var(--muted); font-size: 0.85rem; align-self: center; }
.scores .kickoff.final { font-weight: 700; letter-spacing: 0.05em; color: var(--fg); }

/* --- grid + legend side by side (grid left, legend right) --- */
.board-main { display: flex; align-items: flex-start; gap: 1.5rem; }
.board-main .grid-wrap { order: 0; }
.board-main table.legend { order: 1; flex: none; }

/* --- legend (tabulated) --- */
table.legend { border-collapse: collapse; margin: 0; font-size: 0.9rem; }
table.legend th, table.legend td { border: 1px solid var(--line); padding: 5px 12px; text-align: center; }
table.legend th { background: #f0f0f0; }
table.legend td { font-weight: 600; }
table.legend td.fp { font-weight: 400; font-style: italic; color: #555; }
table.legend .fp-tag { color: #888; font-size: 0.8em; }
table.legend .swatch-cell { padding: 3px 10px; }
table.legend .swatch { display: inline-block; width: 1.4rem; height: 1.4rem;
  border: 1px solid rgba(0,0,0,0.3); border-radius: 3px; vertical-align: middle; }

/* --- grid --- */
.grid-wrap { overflow: auto; }
table.grid { border-collapse: collapse; }
/* Shared so the X (th, in thead) and Y (td, rotated) headers match exactly. */
table.grid th, table.grid td { font-weight: 600; font-size: 0.62rem; color: var(--fg); }
table.grid .corner { font-weight: 400; font-size: 0.62rem; color: var(--muted);
  text-align: left; padding: 2px 5px; border: 1px solid var(--line); background: #fafafa; }
table.grid .band { background: #ececec; border: 1px solid var(--line); padding: 5px 6px;
  text-align: center; vertical-align: middle; font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0.02em; }
table.grid .band-v { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
table.grid .score-h, table.grid .score-v { background: #f7f7f7; border: 1px solid var(--line);
  padding: 3px 4px; text-align: center; vertical-align: middle; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; }
table.grid .cell { width: 24px; height: 24px; border: 1px solid rgba(0,0,0,0.12); padding: 0; }
/* Fair-play outcomes keep their own colour but get a diagonal hatch so they're
   recognisable as "decided by fair play" while staying distinguishable. */
table.grid .cell.fp, table.legend .swatch.fp {
  background-image: repeating-linear-gradient(45deg,
    rgba(0,0,0,0.32) 0, rgba(0,0,0,0.32) 2px, transparent 2px, transparent 6px); }
/* --- third-place page --- */
.thirds-layout { display: flex; flex-wrap: nowrap; gap: 1.5rem; align-items: flex-start; }
.thirds-layout > #thirds-grid { flex: 0 0 auto; }
.thirds-layout > #thirds-status { flex: 0 1 auto; min-width: 0; }
.thirds-status { display: flex; flex-direction: column; gap: 0.7rem; }
.status-bucket .bucket-head { margin: 0 0 0.3rem; font-size: 1rem; padding: 2px 8px;
  border-radius: 5px; color: #fff; display: inline-block; }
.bucket-count { opacity: 0.85; font-weight: 400; }
.team-rows { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start; gap: 4px 0.6rem; }
.team-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0.4rem; padding: 3px 8px;
  width: max-content; max-width: 100%;
  cursor: pointer; border: 1px solid var(--line); border-radius: 6px;
  text-decoration: none; color: inherit; }
.team-row:hover { background: #f4f4f4; border-color: #888; }
.team-row .tr-code { font-weight: 700; }
.team-row .tr-group, .team-row .tr-pts, .team-row .tr-range { color: var(--muted); font-size: 0.8rem; }
.team-row .tr-meta { margin-left: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
.team-rows .empty { color: var(--muted); }
.thirds-legend { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.4rem; }
.can { font-weight: 700; font-size: 0.9rem; line-height: 1; }
.can-clinch { color: #2e8b3d; }
.can-elim { color: #c4163b; }

.thirds-grid-title { margin: 0 0 0.4rem; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; }
.thirds-grid-title .grid-sub { font-size: 0.85rem; font-weight: 400; color: var(--muted); }
.status-key { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.chip { padding: 1px 9px; border-radius: 11px; font-size: 0.8rem; font-weight: 600; color: #fff; }
.st-clinched, .chip.st-clinched { background: #2e8b3d; }
.st-contention, .chip.st-contention { background: #777; }
.st-eliminated, .chip.st-eliminated { background: #c4163b; }
.st-clinched-t { color: #2e8b3d; font-weight: 600; }
.st-contention-t { color: #777; font-weight: 600; }
.st-eliminated-t { color: #c4163b; font-weight: 600; }

/* Status-coloured grid cells. */
table.grid .cell.st-clinched { background-color: #3cb44b; }
table.grid .cell.st-contention { background-color: #9e9e9e; }
table.grid .cell.st-eliminated { background-color: #e6194b; }

/* Bold dividers between the win / draw / win bands on each axis. */
table.grid .band-left { border-left: 3px solid #222; }
table.grid .band-top { border-top: 3px solid #222; }
table.grid .cell.is-current { outline: 3px solid #000; outline-offset: -3px; z-index: 2; position: relative; }
/* The (up to) four cells one goal away from the current state. */
table.grid .cell.is-next { outline: 3px solid #fff; outline-offset: -3px; z-index: 1; position: relative; }

/* --- flags --- */
.flag { height: 1em; width: auto; vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.2); border-radius: 2px; }
.flag-lg { height: 1.5em; }                 /* scores panel */
table.grid .band .flag-band { height: 1.2rem; }   /* grid band headers */
table.legend .flag { height: 1.1rem; margin: 0 1px; }  /* legend cells */
.teams .flag, .group-teams .flag { height: 0.95em; }

/* Rotate the flag to run along the vertical left band, matching the "win" text.
   Extra vertical margin clears the rotated flag's footprint from the text. */
table.grid .band-v .flag { transform: rotate(90deg); margin: 0.5rem 0; }