/* =================================================================
   World Cup 2026 — Group Stage Predictor + Bracket  (light theme)
   ================================================================= */

:root {
  --bg: #f5f7fc;
  --bg-2: #ffffff;
  --card: #ffffff;
  --ink: #16223b;
  --muted: #6a7790;
  --line: #e1e6f0;
  --line-strong: #cdd5e4;

  --red: #c8102e;
  --red-dark: #9c0c24;
  --green: #18a05a; /* qualify */
  --amber: #e0a008; /* third place */
  --blue: #d8a43a;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Inter", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  /* Tiled flag mosaic of all 48 nations behind everything (a light wash
     keeps content readable); shows through group-stage & knockout gaps. */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(244, 246, 251, 0.85), rgba(244, 246, 251, 0.9)),
    url("images/flag-mosaic.png");
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  background-size: cover, 360px auto;
  background-attachment: fixed, fixed;
  min-height: 100vh;
  line-height: 1.5;
}

/* ================= Header / hero ================= */
/* Pure-CSS recreation of the trophy poster: deep red field, sweeping
   white swoosh arcs, and a gold trophy (the ::after element).        */
.site-header {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #0c1220; /* fallback */
  /* Layers: dark tint -> trophy photo (right) -> tiled flag mosaic behind */
  background-image:
    linear-gradient(100deg, rgba(8, 12, 24, 0.92) 0%, rgba(8, 12, 24, 0.62) 48%, rgba(8, 12, 24, 0.5) 100%),
    url("images/trophy.jpg"),
    url("images/flag-mosaic.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center, right center, center;
  background-size: cover, auto 120%, 150px auto;
  box-shadow: 0 8px 28px rgba(12, 18, 32, 0.35);
}

/* real trophy photo is the hero background now — emoji no longer needed */
.site-header::after {
  content: none;
}

.header-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 2.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.kicker {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 0.3rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.title-block h1 {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 0.95;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.tagline {
  margin: 0.55rem 0 0;
  color: rgba(255, 255, 255, 0.95);
  max-width: 52ch;
  font-size: 0.95rem;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ---- input-mode segmented toggle ---- */
.mode-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}

.mode-opt {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.88rem;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.mode-opt:hover {
  background: rgba(255, 255, 255, 0.18);
}

.mode-opt.active {
  background: #fff;
  color: var(--red-dark);
}

.mode-opt.active:hover {
  background: #fff;
}

/* view toggle (Main Game / Second Chance) shares the segmented look */
.view-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.mode-opt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mode-opt:disabled:hover {
  background: transparent;
}

/* ---- header countdowns (sit in the space above the toggles) ---- */
.countdowns {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.cd {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.cd-label {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cd-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fff;
}
.cd-lead .cd-label {
  font-size: 0.74rem;
  color: #ffd23f;
}
.cd-lead .cd-time {
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.cd-sub .cd-label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.72);
}
.cd-sub .cd-time {
  font-size: 0.78rem;
}
@media (max-width: 640px) {
  .countdowns { align-items: flex-start; }
}

.btn {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: var(--red-dark);
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.btn:active {
  transform: translateY(0);
}

.btn.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ---- sub nav ---- */
.subnav {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem 1rem;
  display: flex;
  gap: 1.5rem;
}

.subnav a {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.subnav a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ================= Layout ================= */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.edit-hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 1.25rem;
}

/* JS masonry: a flex row of columns. Cards are distributed (shortest-column
   first, in A→L order) so A,B,C stay across the top while shorter cards pack
   tightly with no empty space below taller neighbours. */
.groups-grid {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.groups-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ================= Group card ================= */
.group-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 8px 22px rgba(22, 34, 59, 0.07);
}

.group-head {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.group-tag {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.15rem;
  padding: 0.15rem 0.7rem;
  border-radius: 8px;
  background: linear-gradient(120deg, var(--red), var(--red-dark));
  color: #fff;
}

.matches {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.9rem;
}

.match {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.4rem;
  border-radius: 9px;
  background: #f7f9fc;
}

/* officially-confirmed matches get a lock badge */
.match-lock {
  position: absolute;
  top: 1px;
  right: 19px;
  font-size: 0.66rem;
  line-height: 1;
  opacity: 0.6;
  display: none;
  pointer-events: none;
}

.match.confirmed {
  background: #eef2f9;
}

.match.confirmed .match-lock {
  display: block;
}

.match:hover {
  background: #eef2f9;
}

.team {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.9rem;
}

.team.home {
  justify-content: flex-end;
  text-align: right;
}

.flag {
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
}

.tname {
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12ch;
}

.mid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 5.6rem;
}

.score {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dash {
  color: var(--muted);
  font-weight: 700;
}

/* ---- Win / Draw / Loss (1·X·2) control ---- */
.result {
  display: none; /* shown only in result mode (body.mode-result) */
  gap: 0.22rem;
}

.res-btn {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.res-btn:hover {
  border-color: var(--blue);
  color: var(--ink);
}

.res-btn.sel {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* mode switch */
body.mode-result .score {
  display: none;
}

body.mode-result .result {
  display: inline-flex;
}

.goal {
  width: 2.4rem;
  text-align: center;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 0.25rem 0;
  -moz-appearance: textfield;
}

.goal::-webkit-outer-spin-button,
.goal::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.goal:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(216, 164, 58, 0.2);
}

/* ================= Tables ================= */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

thead th {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding: 0.4rem 0.3rem;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

tbody td {
  text-align: center;
  padding: 0.4rem 0.3rem;
  border-bottom: 1px solid var(--line);
}

tbody tr:last-child td {
  border-bottom: none;
}

.col-pos {
  width: 1.6rem;
  color: var(--muted);
}

.col-team {
  text-align: left;
  white-space: nowrap;
}

.col-team .flag {
  margin-right: 0.4rem;
  vertical-align: -2px;
}

td.pts {
  font-weight: 700;
  color: var(--ink);
}

tbody tr.qualified {
  background: rgba(24, 160, 90, 0.1);
  box-shadow: inset 3px 0 0 var(--green);
}

tbody tr.third {
  background: rgba(224, 160, 8, 0.12);
  box-shadow: inset 3px 0 0 var(--amber);
}

tbody tr.eliminated {
  color: var(--muted);
}

/* ================= Section heads ================= */
.section-head {
  margin-bottom: 0.85rem;
}

.section-head h2 {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.7rem;
  margin: 0;
  color: var(--ink);
}

.section-head p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 70ch;
}

/* ================= Thirds ================= */
.thirds {
  margin-top: 2.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 22px rgba(22, 34, 59, 0.07);
}

#thirds-table .col-team {
  min-width: 9rem;
}

/* ================= Bracket ================= */
.bracket-section {
  margin-top: 2.5rem;
  padding: 1.25rem 1.25rem 1.75rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  /* knockout stage sits on the trophy-on-flags photo (light wash for
     readability); group stage keeps the tiled flag mosaic */
  background-image:
    linear-gradient(rgba(248, 250, 253, 0.66), rgba(248, 250, 253, 0.72)),
    url("images/wc-flags-trophy.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  box-shadow: 0 10px 26px rgba(22, 34, 59, 0.12);
}

.bracket-scroll {
  overflow-x: auto;
  padding: 0.5rem 0 1rem;
  -webkit-overflow-scrolling: touch;
}

.bracket {
  display: flex;
  align-items: stretch;
  gap: 1.1rem;
  min-width: 1100px;
}

/* Two-sided West/East layout meets at the Final in the centre. Nine columns
   (R32→SF · Final · SF→R32), so it needs more width — the .bracket-scroll
   wrapper keeps it swipeable on narrow screens. */
.bracket.two-sided {
  min-width: 1500px;
  gap: 0.7rem;
}
.bracket.two-sided .round { min-width: 150px; }
.bracket.two-sided .final-col { min-width: 200px; }

/* ---- view switch: Second-chance lives in its own tab; hidden otherwise ---- */
#second-section { display: none; }
body.view-second #second-section { display: block; }
body.view-second #official-bracket-section,
body.view-second #schedule-section,
body.view-second #groups,
body.view-second #thirds-section,
body.view-second #bracket-section,
body.view-second #wc-history,
body.view-second #leaderboard-section,
body.view-second .stars-banner { display: none; }

/* ---- official bracket status pill ---- */
.official-pill {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--cond);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  vertical-align: middle;
}
.official-pill.is-temp { background: rgba(245, 181, 10, 0.22); color: #b8860b; border: 1px solid rgba(245, 181, 10, 0.6); }
.official-pill.is-official { background: rgba(24, 160, 90, 0.18); color: #0f7a45; border: 1px solid rgba(24, 160, 90, 0.55); }

/* ---- Official Group Standings (real results, under the official bracket) ---- */
.official-standings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0.6rem;
}
.official-standings-head h3 {
  margin: 0;
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffd23f;
  font-size: 1rem;
}
.os-legend { font-size: 0.72rem; color: rgba(255, 255, 255, 0.78); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.os-legend b { color: #fff; }
.os-key { padding: 0 0.35rem; border-radius: 4px; }
.os-key.adv { background: rgba(24, 160, 90, 0.3); color: #d6ffe6; }
.os-key.out { background: rgba(239, 47, 80, 0.28); color: #ffd9df; text-decoration: line-through; }

.official-standings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 0.6rem;
}
.os-group {
  background: rgba(12, 18, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 0.45rem 0.55rem 0.5rem;
}
.os-gtitle {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.25rem;
}
.os-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; color: #eaf0fb; }
.os-table th {
  font-weight: 600;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 0 0.15rem 0.15rem;
}
.os-table td { text-align: center; padding: 0.13rem 0.15rem; }
.os-table .op { color: rgba(255, 255, 255, 0.5); width: 1.1rem; }
.os-table .oc { text-align: left; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.os-table .oc .flag { font-size: 0.95rem; }
.os-table .ocode { font-weight: 700; letter-spacing: 0.02em; }
.os-table .opts { font-weight: 800; }
.os-table tr.qualified td { background: rgba(24, 160, 90, 0.14); }
.os-table tr.qualified .op { color: #5be59a; }
.os-table tr.adv td { background: rgba(24, 160, 90, 0.1); }
.os-table tr.adv .ocode { color: #7ef0ab; }
.os-table tr.out td { background: rgba(239, 47, 80, 0.1); }
.os-table tr.out .ocode { color: #ff9aab; text-decoration: line-through; text-decoration-color: rgba(239, 47, 80, 0.9); }
.os-x, .os-y {
  font-weight: 800;
  font-size: 0.66rem;
  margin-left: 0.15rem;
  padding: 0 0.2rem;
  border-radius: 3px;
}
.os-x { background: #ffd23f; color: #1b1300; }     /* clinched 1st */
.os-y { background: rgba(255, 255, 255, 0.85); color: #15233f; } /* clinched 2nd */

/* clinched-slot ✓ in the (provisional) official bracket */
.bm-clinch { margin-left: auto; color: #5be59a; font-weight: 800; font-size: 0.8rem; }
.bm-row.clinched .bm-name { color: #d6ffe6; }

/* ---- Eliminated 3rd-place teams under the Second-Chance bracket ---- */
.second-eliminated { margin: 0.8rem 0 0.2rem; }
.elim-head {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: #ff9aab;
  margin-bottom: 0.4rem;
}
.elim-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.elim-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(239, 47, 80, 0.12);
  border: 1px solid rgba(239, 47, 80, 0.45);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  color: #ffd9df;
}
.elim-chip .elim-code { font-weight: 700; text-decoration: line-through; text-decoration-color: rgba(239, 47, 80, 0.9); }
.elim-chip .elim-grp { font-size: 0.66rem; opacity: 0.7; }
.elim-none { color: rgba(255, 255, 255, 0.5); }

/* "knockout begun — bracket locked" banner (green, not the red warn) */
.bracket-warn.locked-note {
  background: rgba(24, 160, 90, 0.16);
  border-color: rgba(24, 160, 90, 0.55);
  color: #d6ffe6;
}
.bracket-warn.locked-note strong { color: #fff; }

.second-section .bracket-section { margin-top: 0; }
.second-section .submit-bar { margin-top: 1rem; align-items: center; }
.seed-toggle { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.seed-label { font-size: 0.85rem; opacity: 0.75; margin-right: 0.1rem; }

/* read-only / not-yet-open bracket rows shouldn't look clickable */
.bm-row:disabled { cursor: default; }
.bm-row:disabled:hover { background: transparent; }
.bm-row.sel:disabled:hover { background: rgba(24, 160, 90, 0.16); }

/* ---- Missing-entry warning (editor bracket) ---- */
.bracket-warn {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 9px;
  background: rgba(239, 47, 80, 0.12);
  border: 1px solid rgba(239, 47, 80, 0.5);
  color: #ffd9df;
  font-size: 0.84rem;
  line-height: 1.4;
}
.bracket-warn .bw-icon { font-size: 1.05rem; line-height: 1.2; }
.bracket-warn strong { color: #fff; }
/* Flex child must be allowed to shrink below its content width, otherwise the
   nowrap pills below push it (and the whole page) wider than a phone screen. */
.bw-text { min-width: 0; }
.bw-list { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin-top: 0.35rem; }
.bw-grp {
  background: rgba(239, 47, 80, 0.22);
  border-radius: 5px;
  padding: 0.05rem 0.4rem;
  font-weight: 600;
  color: #fff;
  /* Pills list full match names; a single group's list can exceed a phone's
     width, so let it wrap rather than force horizontal page scroll. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ---- Missing-entry highlight on the offending group match ---- */
.match.missing-entry {
  background: rgba(239, 47, 80, 0.08);
  border-radius: 7px;
  box-shadow: inset 3px 0 0 #ef2f50;
}
.match.missing-entry .goal {
  border-color: #ef2f50;
  box-shadow: 0 0 0 2px rgba(239, 47, 80, 0.28);
  animation: missing-pulse 1.6s ease-in-out infinite;
}
@keyframes missing-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239, 47, 80, 0.28); }
  50%      { box-shadow: 0 0 0 2px rgba(239, 47, 80, 0.7); }
}

.round {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 170px;
}

.round-title {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--red-dark);
  text-align: center;
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--line);
}

.round-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.5rem;
}

.bm {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(22, 34, 59, 0.06);
}

.bm-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease;
}

.bm-row:last-child {
  border-bottom: none;
}

.bm-row:hover {
  background: #f2f5fb;
}

.bm-row.sel {
  background: rgba(24, 160, 90, 0.16);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--green);
}

.bm-row .flag {
  font-size: 1rem;
}

.bm-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-name.ph {
  color: var(--muted);
  font-style: italic;
  font-size: 0.78rem;
}

/* Provisional seed: shown from current standings but not yet locked (a group
   match is still unscored). Dashed underline + a "~" so it reads as tentative. */
.bm-name.prov {
  font-style: italic;
  opacity: 0.82;
  text-decoration: underline dotted rgba(255, 255, 255, 0.4);
  text-underline-offset: 2px;
}
.bm-prov {
  font-style: normal;
  margin-left: 2px;
  color: #f5b50a;
  font-weight: 700;
}
.mb-team.prov { opacity: 0.8; }
.mb-team.prov .mb-code { font-style: italic; }

/* Knockout match that has kicked off — its winner pick is frozen so brackets
   can't be edited to match real results as teams are eliminated. */
.bm {
  position: relative;
}
/* locked = a subtle frosted highlight on the dark glass (never white) */
.bm.ko-locked {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
.bm.ko-locked .bm-row {
  cursor: default;
}
.bm.ko-locked .bm-row:hover {
  background: transparent;
}
.bm.ko-locked .bm-row.sel,
.bm.ko-locked .bm-row.sel:hover {
  background: rgba(24, 160, 90, 0.26);
}
.bm-lock {
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 0.66rem;
  line-height: 1;
  opacity: 0.6;
  pointer-events: none;
}

.bm.is-final {
  border-color: var(--amber);
  box-shadow: 0 6px 16px rgba(224, 160, 8, 0.25);
}

.bm.is-final .bm-row {
  font-size: 0.9rem;
  padding: 0.55rem;
}

.bm.is-final .bm-row.sel {
  background: rgba(224, 160, 8, 0.2);
  box-shadow: inset 3px 0 0 var(--amber);
}

.final-col .round-body {
  justify-content: center;
  gap: 1rem;
}

/* champion + third place */
.champion {
  text-align: center;
  background: linear-gradient(160deg, #fff6e0, #ffe9b8);
  border: 1px solid var(--amber);
  border-radius: 12px;
  padding: 0.9rem 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.champion .trophy {
  font-size: 2rem;
}

.champion .champ-flag {
  font-size: 1.4rem;
}

.champion .champ-name {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--red-dark);
}

.champion .champ-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.champion.empty .champ-label {
  max-width: 16ch;
}

.tp-block h4 {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 0.4rem;
}

/* ================= Footer ================= */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ================= Responsive ================= */
@media (max-width: 720px) {
  .header-inner {
    align-items: flex-start;
  }
  .site-header::after {
    /* hide the decorative trophy where it would crowd wrapped content */
    opacity: 0.16;
    right: -2%;
    font-size: 8rem;
  }
  .tname {
    max-width: 9ch;
  }
}

/* ================= Flags & visual polish ================= */
.flag-img {
  height: 0.95em;
  width: auto;
  max-width: 1.7em;
  vertical-align: -0.14em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

.flag-fallback {
  font-size: 0.95em;
}

/* group cards: one-time entrance + hover lift */
.group-card {
  animation: cardIn 0.5s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.group-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(22, 34, 59, 0.13);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* champion celebration */
.champion:not(.empty) {
  animation: champGlow 2.4s ease-in-out infinite;
}

.champion:not(.empty) .trophy {
  display: inline-block;
  animation: trophyBounce 2.4s ease-in-out infinite;
}

@keyframes champGlow {
  0%, 100% { box-shadow: 0 0 0 1px var(--amber), 0 6px 18px rgba(224, 160, 8, 0.25); }
  50% { box-shadow: 0 0 0 1px var(--amber), 0 12px 34px rgba(224, 160, 8, 0.55); }
}

@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

/* hero trophy gentle float */
.site-header::after {
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(-48%); }
  50% { transform: translateY(-54%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .group-card:hover { transform: none; }
}

/* ================= Stars banner ================= */
.stars-banner {
  margin: 0 0 1.5rem;
}

.stars-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(22, 34, 59, 0.14);
}

/* ================= Leaderboard ================= */
.leaderboard {
  margin-top: 2.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 22px rgba(22, 34, 59, 0.07);
}

.submit-bar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}

#username {
  flex: 1 1 220px;
  max-width: 320px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
}

#username:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(216, 164, 58, 0.2);
}

#leaderboard-table .col-team {
  min-width: 8rem;
  font-weight: 600;
}

#leaderboard-table td.pts {
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 700;
}

#leaderboard-table .col-breakdown {
  white-space: nowrap;
}

#leaderboard-table .muted {
  color: var(--muted);
  font-size: 0.8rem;
}

#leaderboard-table tr.leader {
  background: rgba(224, 160, 8, 0.12);
  box-shadow: inset 3px 0 0 var(--amber);
}

#leaderboard-table tr.leader td.pts {
  color: var(--red-dark);
}

.empty-row {
  color: var(--muted);
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

.lb-actions {
  white-space: nowrap;
  text-align: right;
}

.lb-view,
.lb-del {
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 7px;
  padding: 0.2rem 0.5rem;
  color: var(--ink);
}

.lb-view:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.lb-del {
  color: var(--muted);
}

.lb-del:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ---- scorecard (red/green highlighting) ---- */
.scorecard:empty {
  display: none;
}

.scorecard {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.sc-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sc-name {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.3rem;
}

.sc-total {
  font-weight: 700;
  color: var(--red-dark);
}

.sc-sub {
  color: var(--muted);
  font-size: 0.85rem;
}

.sc-close {
  margin-left: auto;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
}

.sc-close:hover {
  color: var(--ink);
}

.sc-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.6rem 0 1rem;
}

.sc-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.6rem 1rem;
}

.sc-grp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sc-grp-tag {
  font-family: var(--cond);
  font-weight: 700;
  width: 1.4rem;
  color: var(--red-dark);
}

.sc-chips {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.sc-chip {
  min-width: 1.9rem;
  padding: 0.18rem 0.3rem;
  border-radius: 6px;
  text-align: center;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: default;
}

/* Exact scoreline = gold, correct result = green, miss = red. Saturated, full
   strength — every played match you predicted earns its points. */
.sc-chip.exact {
  background: #f5b50a;
  color: #1a1400;
  border: 1px solid #c98f08;
}

.sc-chip.outcome {
  background: #11a85f;
  color: #ffffff;
  border: 1px solid #0a7a43;
}

.sc-chip.miss {
  background: #ef2f50;
  color: #ffffff;
  border: 1px solid #c01a37;
}

/* Not played, OR played but you made no prediction → neutral grey (never a
   red/green/gold without an actual guess behind it). */
.sc-chip.pending,
.sc-chip.none {
  background: #eef1f7;
  color: #98a3b8;
  border: 1px solid var(--line);
}

/* Already played when this entry was last submitted. It still scores, so we no
   longer dim it — just a subtle ring to note it. */
.sc-chip.was-locked {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(12, 18, 32, 0.18) inset;
}

/* Unfilled entry that blocks the bracket from seeding → red "!" chip. */
.sc-chip.missing {
  background: #ef2f50;
  color: #fff;
  border: 1px solid #c01a37;
  font-weight: 800;
  box-shadow: 0 0 0 2px rgba(239, 47, 80, 0.3);
}
.sc-grp.has-missing .sc-grp-tag {
  background: #ef2f50;
  color: #fff;
}

/* Banner summarising which entries are missing in a viewed bracket. */
.sc-warn {
  margin: 0.1rem 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: rgba(239, 47, 80, 0.12);
  border: 1px solid rgba(239, 47, 80, 0.5);
  color: #b11030;
  font-size: 0.8rem;
  line-height: 1.4;
}
.sc-warn strong { color: #8c0c25; }

/* ---- Mini knockout bracket inside a leaderboard entry ---- */
.sc-ko {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.sc-ko-title {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
/* Mini official-style bracket: flex columns + an SVG overlay of elbow lines. */
.mb-wrap {
  overflow-x: auto;
  padding: 0.15rem 0 0.1rem;
}
.mini-bracket {
  position: relative;
  display: flex;
  min-width: 40rem;
  height: 26rem;
}
/* Six-column variant (adds the Round of 32, 16 matches) — wider + taller so the
   R32 boxes don't overlap, and slightly tighter boxes to fit the extra column. */
.mini-bracket.has-r32 {
  min-width: 54rem;
  height: 42rem;
}
.mini-bracket.has-r32 .mb-team {
  width: 84%;                /* = 14% of the bracket → matches the 6-col SVG geometry */
  font-size: 0.62rem;
  padding: 1px 4px;
  gap: 3px;
}
.mini-bracket.has-r32 .r-r32 .mb-team {
  font-size: 0.56rem;
  padding: 1px 3px;
}
.mb-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.mb-round {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.mb-match {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;       /* centre boxes so connector lines get clean gutters */
  gap: 2px;
  padding: 0;
}
.mb-team {
  width: 75%;                /* = 15% of the bracket → matches the SVG elbow geometry */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1.25;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.42);
  overflow: hidden;
  white-space: nowrap;
}
.mb-team .mb-flag {
  display: inline-flex;
  flex: 0 0 auto;
}
.mb-team .flag-img {
  width: 15px;
  height: 11px;
  border-radius: 2px;
  object-fit: cover;
}
.mb-team .mb-dot { width: 15px; text-align: center; }
.mb-team .mb-code { letter-spacing: 0.02em; }
/* Your picked winner is opaque; the other side is dimmed. */
.mb-team.pick {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.4);
}
.mb-team.pick.pending {
  background: rgba(244, 191, 63, 0.22);
  border-color: #f4bf3f;
  color: #ffe6a6;
}
.mb-team.pick.correct {
  background: rgba(65, 209, 138, 0.22);
  border-color: #41d18a;
  color: #b9f3d4;
}
.mb-team.pick.wrong {
  background: rgba(255, 117, 145, 0.2);
  border-color: #ff7591;
  color: #ffc2cd;
}
.mb-team.champ { font-size: 0.74rem; }
.mb-team.champ.pending {
  background: rgba(255, 210, 63, 0.28);
  border-color: #ffd23f;
  color: #fff0bf;
}
.mb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.5rem;
  font-family: var(--cond);
  font-size: 0.72rem;
  color: var(--muted);
}
.mb-key { display: inline-flex; align-items: center; }
.mb-key::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  margin-right: 0.32rem;
  border: 1px solid;
}
.mb-key.correct::before { background: rgba(65, 209, 138, 0.5); border-color: #41d18a; }
.mb-key.wrong::before { background: rgba(255, 117, 145, 0.45); border-color: #ff7591; }
.mb-key.pending::before { background: rgba(244, 191, 63, 0.5); border-color: #f4bf3f; }

.board-scope {
  align-self: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: auto;
}

/* =================================================================
   Richer, less-white theme + comic leaderboard (overrides)
   ================================================================= */

/* page backdrop: flowing navy→red wash over the flag mosaic (was near-white) */
body {
  background-color: #0c1124;
  background-image:
    linear-gradient(180deg, rgba(10, 16, 40, 0.62) 0%, rgba(52, 12, 32, 0.55) 45%, rgba(116, 16, 46, 0.5) 100%),
    url("images/flag-mosaic.png");
}

/* text that sits directly on the (now dark) backdrop */
.edit-hint {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.site-footer {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.site-footer p {
  color: rgba(255, 255, 255, 0.72);
}

/* content cards: lightly translucent so the backdrop tints them (less stark white) */
.group-card,
.thirds {
  background: rgba(255, 255, 255, 0.94);
}

/* ---- Leaderboard: dark comic podium panel ---- */
.leaderboard {
  color: #eaf0fb;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: #0c1030;
  background-image:
    linear-gradient(rgba(8, 10, 28, 0.82), rgba(26, 6, 18, 0.86)),
    url("images/podium.svg");
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.leaderboard .section-head h2 {
  color: #fff;
}

.leaderboard .section-head p {
  color: rgba(255, 255, 255, 0.82);
}

.leaderboard .section-head p strong {
  color: #ffd23f;
}

#leaderboard-table thead th {
  color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

#leaderboard-table tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: #eaf0fb;
}

#leaderboard-table td.pts {
  color: #fff;
}

#leaderboard-table .muted {
  color: rgba(255, 255, 255, 0.55);
}

#leaderboard-table tr.leader {
  background: rgba(255, 210, 63, 0.16);
}

#leaderboard-table tr.leader td.pts {
  color: #ffd23f;
}

.leaderboard .col-pos {
  color: rgba(255, 255, 255, 0.6);
}

.leaderboard .empty-row {
  color: rgba(255, 255, 255, 0.72);
}

.leaderboard .board-scope {
  color: rgba(255, 255, 255, 0.62);
}

/* ---- Pool (group leaderboard) tabs + join panel ---- */
.board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.9rem;
}
.board-tab {
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.board-tab:hover {
  background: rgba(255, 255, 255, 0.16);
}
.board-tab.active {
  color: #16223b;
  background: #ffd23f;
  border-color: #ffd23f;
}
.board-tab .bt-count {
  opacity: 0.7;
  font-size: 0.82em;
  margin-left: 0.15rem;
}
.board-tab.active .bt-count {
  opacity: 0.85;
}
.board-tab.join {
  background: transparent;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.7);
}

.join-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}
/* `hidden` attr must win over the flex display above (equal specificity). */
.join-panel[hidden] {
  display: none;
}
.join-panel input {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: #16223b;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.join-title {
  width: 100%;
  font-family: var(--cond);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffd23f;
  font-size: 1rem;
}
.join-msg {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

.pool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.3rem 0 0.9rem;
}
.pool-actions:empty {
  margin: 0;
}

/* scorecard on the dark panel */
.scorecard {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.leaderboard .sc-total {
  color: #ffd23f;
}

.leaderboard .sc-sub,
.leaderboard .sc-legend,
.leaderboard .sc-close {
  color: rgba(255, 255, 255, 0.78);
}

.leaderboard .sc-grp-tag {
  color: #ffd23f;
}

.leaderboard .sc-ko {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.leaderboard .sc-ko-title,
.leaderboard .ko-rnd {
  color: rgba(255, 255, 255, 0.78);
}

/* =================================================================
   Full dark-glass theme (group / thirds), comic section backgrounds,
   and the leaderboard scoring legend
   ================================================================= */

/* ---- Group cards: translucent dark glass with light text ---- */
.group-card {
  background: rgba(12, 18, 40, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: #eaf0fb;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.group-card .match { background: rgba(255, 255, 255, 0.06); }
.group-card .match:hover { background: rgba(255, 255, 255, 0.11); }
.group-card .match.confirmed { background: rgba(255, 255, 255, 0.04); }
.group-card .dash { color: rgba(255, 255, 255, 0.55); }
.group-card .tname { color: #eaf0fb; }

.group-card .goal {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}

.group-card .standings thead th {
  color: rgba(255, 255, 255, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.group-card .standings tbody td { border-bottom-color: rgba(255, 255, 255, 0.1); }
.group-card .standings td.pts { color: #fff; }
.group-card .standings .col-pos { color: rgba(255, 255, 255, 0.55); }
.group-card .standings tbody tr.qualified { background: rgba(24, 160, 90, 0.24); }
.group-card .standings tbody tr.third { background: rgba(224, 160, 8, 0.22); }

/* ---- Best Thirds: champagne comic background, dark glass ---- */
.thirds {
  color: #eaf0fb;
  border-color: rgba(255, 255, 255, 0.12);
  background-color: #0c1030;
  background-image:
    linear-gradient(rgba(8, 10, 28, 0.7), rgba(22, 8, 30, 0.78)),
    url("images/champagne.jpg");
  background-size: cover;
  background-position: center;
}

.thirds .section-head h2 { color: #fff; }
.thirds .section-head p { color: rgba(255, 255, 255, 0.82); }
.thirds .section-head p strong { color: #ffd23f; }
#thirds-table thead th { color: rgba(255, 255, 255, 0.62); border-bottom-color: rgba(255, 255, 255, 0.18); }
#thirds-table tbody td { border-bottom-color: rgba(255, 255, 255, 0.1); color: #eaf0fb; }
#thirds-table td.pts { color: #fff; }
#thirds-table .col-pos { color: rgba(255, 255, 255, 0.55); }
#thirds-table tbody tr.qualified { background: rgba(24, 160, 90, 0.24); }
#thirds-table tbody tr.eliminated { color: rgba(255, 255, 255, 0.5); }

/* ---- Knockout: Batman "ZOK!" comic background ---- */
.bracket-section {
  background-image:
    linear-gradient(rgba(8, 10, 26, 0.74), rgba(10, 8, 24, 0.8)),
    url("images/ko-batman.jpg");
  border-color: rgba(255, 255, 255, 0.12);
}
.bracket-section .section-head h2 { color: #fff; }
.bracket-section .section-head p { color: rgba(255, 255, 255, 0.82); }
.bracket-section .section-head p strong { color: #ffd23f; }
.round-title { color: #ffd23f; border-bottom-color: rgba(255, 255, 255, 0.18); }

/* ---- Leaderboard scoring legend ---- */
.legend {
  width: auto;
  margin: 0.5rem 0 0.85rem;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.legend th {
  text-align: left;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  padding: 0.22rem 1.1rem 0.22rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.legend td {
  text-align: right;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1rem;
  color: #ffd23f;
  padding: 0.22rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Group stage panel: trophy-on-flags photo (the previous knockout background) */
#groups {
  padding: 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-image:
    linear-gradient(rgba(8, 10, 26, 0.55), rgba(14, 8, 26, 0.62)),
    url("images/wc-flags-trophy.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

/* Stars banner: same dark-glass effect as the group stage */
.stars-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.stars-banner img {
  border-radius: 0;
  box-shadow: none;
}

.stars-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 40, 0.42);
  pointer-events: none;
}

/* Knockout & Best-Thirds: fit the whole image (contain), dark fill, static */
.bracket-section,
.thirds {
  background-size: cover, contain;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-attachment: scroll;
  background-color: #0c1030;
}

/* Make the stars banner genuinely see-through (translucent image) + dark glass tint */
.stars-banner {
  background: rgba(12, 18, 40, 0.5);
}
.stars-banner::after {
  display: none; /* drop the opaque-image overlay approach */
}
.stars-banner img {
  opacity: 0.5; /* see-through: backdrop shows through the glass */
}

/* Best-Thirds: fill with the cropped (bottom-4-panel) champagne graphic */
.thirds {
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Knockout: fill the section with Batman, centered on the punch */
.bracket-section {
  background-size: cover, cover;
  background-position: center, 35% 50%;
  background-repeat: no-repeat, no-repeat;
}

/* Feather the hero trophy so its edge blends (no rectangular border/seam) */
.site-header {
  background-image:
    linear-gradient(100deg, rgba(8, 12, 24, 0.92) 0%, rgba(8, 12, 24, 0.62) 48%, rgba(8, 12, 24, 0.5) 100%),
    url("images/flag-mosaic.png");
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  background-size: cover, 150px auto;
}

/* Trophy is painted as a header background layer (below) for reliable
   cross-browser rendering; the masked ::before overlay is no longer used. */
.site-header::before { content: none; }

/* =================================================================
   Polish pass — #5 calmer backdrop, #4 consistent panels,
   #6 typographic rhythm, #3 warm palette
   ================================================================= */

/* #5: quiet the backdrop — blurred flags, deeper wash, center vignette */
body {
  background-color: #0a0e20;
  background-image:
    radial-gradient(125% 95% at 50% 28%, transparent 42%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(8, 12, 30, 0.76) 0%, rgba(40, 8, 24, 0.72) 55%, rgba(92, 12, 40, 0.68) 100%),
    url("images/flag-mosaic-blur.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center, center, center;
  background-size: cover, cover, 460px auto;
  background-attachment: fixed, fixed, fixed;
}

/* hero backdrop: deep tint (fades right) -> trophy photo (right) -> blurred
   flag mosaic. Plain background layers so it renders reliably everywhere. */
.site-header {
  background-image:
    linear-gradient(100deg, rgba(8, 12, 24, 0.94) 0%, rgba(8, 12, 24, 0.72) 46%, rgba(8, 12, 24, 0.5) 100%),
    url("images/trophy.jpg"),
    url("images/flag-mosaic-blur.png");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center, right center, center;
  background-size: cover, auto 120%, 300px auto;
}

/* #4: one consistent treatment for every content panel */
#groups,
.thirds,
.bracket-section,
.leaderboard {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

#groups {
  background-image: linear-gradient(rgba(8, 10, 26, 0.72), rgba(16, 8, 26, 0.78)), url("images/wc-flags-trophy.jpg");
  background-attachment: scroll;
}
.thirds {
  background-image: linear-gradient(rgba(8, 10, 26, 0.72), rgba(16, 8, 26, 0.78)), url("images/champagne.jpg");
}
.bracket-section {
  background-image: linear-gradient(rgba(8, 10, 26, 0.72), rgba(16, 8, 26, 0.78)), url("images/ko-batman.jpg");
}
.leaderboard {
  background-image: linear-gradient(rgba(8, 10, 26, 0.72), rgba(16, 8, 26, 0.78)), url("images/podium.svg");
}

/* #6: consistent section headers + rhythm */
.thirds,
.bracket-section,
.leaderboard {
  margin-top: 2rem;
}

.section-head {
  margin-bottom: 1rem;
}

.section-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}

.section-head p {
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 64ch;
}

/* ================= #3 Schedule strip ================= */
.schedule {
  margin: 0 0 1.5rem;
}
.schedule-title {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 0.6rem;
}
.schedule-strip {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
}
.sch-card {
  flex: 0 0 auto;
  min-width: 12rem;
  scroll-snap-align: start;
  background: rgba(12, 18, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sch-card.done { opacity: 0.72; }
.sch-meta {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--amber);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sch-info {
  margin-left: auto;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffd98a;
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.sch-info:hover { background: rgba(255, 210, 63, 0.25); transform: scale(1.1); }
.sch-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
  color: #eaf0fb;
  font-size: 0.85rem;
}
.sch-team { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.sch-team.away { justify-content: flex-end; }
.sch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-score { font-family: var(--cond); font-weight: 700; color: #fff; }
.sch-v { color: var(--muted); font-weight: 700; }
.sch-wx {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 0.9rem;
  color: #cdd7ec;
  font-size: 0.8rem;
}
.sch-wx:empty { display: none; }
.wx-emoji { font-size: 0.95rem; line-height: 1; }
.wx-temp { font-family: var(--cond); font-weight: 600; letter-spacing: 0.02em; }

/* ================= #2 Prediction vs actual ================= */
.match-grade {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}
.match-grade.exact { color: var(--amber); }
.match-grade.ok { color: #41d18a; }
.match-grade.miss { color: #ff7591; }

.bm-row.correct { box-shadow: inset 3px 0 0 #2fae6e; }
.bm-row.wrong { box-shadow: inset 3px 0 0 #e0556f; }
.bm-mark { margin-left: auto; font-weight: 700; font-size: 0.82rem; }
.bm-mark.ok { color: #41d18a; }
.bm-mark.no { color: #ff7591; }

/* ================= #1 Your entry ================= */
#leaderboard-table tr.mine {
  background: rgba(216, 164, 58, 0.14);
  box-shadow: inset 3px 0 0 var(--amber);
}
.you {
  font-family: var(--cond);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  color: #0c1330;
  background: var(--amber);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  vertical-align: middle;
}

/* ================= Match venue (stadium · city, country) ================= */
.match-venue {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.66rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-venue:empty { display: none; }

.bm-venue {
  font-size: 0.62rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 0.15rem 0.4rem 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-edit {
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 7px;
  padding: 0.2rem 0.5rem;
  color: var(--ink);
}
.lb-edit:hover {
  border-color: var(--amber);
  color: var(--red-dark);
}

/* ================= Mobile (PWA) pass ================= */
@media (max-width: 560px) {
  .header-inner { padding: 2rem 1rem 1.4rem; }
  .site-header { background-size: cover, 110px auto; }
  .subnav { overflow-x: auto; gap: 1rem; -webkit-overflow-scrolling: touch; padding-bottom: 0.7rem; }
  .subnav a { white-space: nowrap; }
  .container { padding: 1rem 0.85rem 2.5rem; }
  #groups, .thirds, .bracket-section, .leaderboard {
    padding: 0.9rem;
    border-radius: 12px;
  }
  .section-head h2 { font-size: 1.5rem; }
  .controls { width: 100%; }
  .mode-toggle { flex: 1 1 100%; }
  .mode-opt { flex: 1; text-align: center; }
  .btn { flex: 1 1 auto; }
  .submit-bar { flex-wrap: wrap; }
  #username { flex: 1 1 100%; max-width: none; }
  .board-scope { margin-left: 0; }
  .sch-card { min-width: 10.5rem; }
  .legend { font-size: 0.8rem; }
}

/* locked (already-played) match inputs are not editable */
.goal:disabled,
.res-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Knockout cards: dark glass (no white) to match the theme */
.bm {
  background: rgba(12, 18, 40, 0.62);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.bm-row {
  color: #eaf0fb;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.bm-row:hover {
  background: rgba(255, 255, 255, 0.07);
}
.bm-name.ph {
  color: rgba(255, 255, 255, 0.55);
}

/* bracket description spans the full width (was bunched at 64ch) */
.bracket-section .section-head p {
  max-width: none;
}

/* "Act." row: official scoreline in black, under the prediction boxes */
.match-actual {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  margin-top: 0.12rem;
}
.match-actual:empty {
  display: none;
}
.act-label {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 0.15rem;
}
.act-box {
  min-width: 1.4rem;
  padding: 0.04rem 0.25rem;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: #000;
  border-radius: 4px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.25;
}
.act-dash {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

/* center the score digits */
.goal { text-align: center; }

/* guess vs actual: gold (exact) / green (right result) / red (wrong) on the boxes */
.match.guess-exact .goal { background: #f5b50a; color: #1a1400; border-color: #c98f08; opacity: 1; }
.match.guess-ok    .goal { background: #11a85f; color: #ffffff; border-color: #0a7a43; opacity: 1; }
.match.guess-miss  .goal { background: #ef2f50; color: #ffffff; border-color: #c01a37; opacity: 1; }

/* ACT. label in black (on a light chip so it stays readable on the dark cards) */
.act-label {
  color: #000;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.03rem 0.28rem;
  border-radius: 3px;
}

/* softer off-white behind ACT label + actual-score boxes (less harsh on dark cards) */
.act-box {
  background: #e6eaf2;
  color: #0c1330;
}
.act-label {
  background: #e6eaf2;
  color: #0c1330;
}

/* in-play scoreline (no official result yet) — pulsing red "Live" chip */
.act-label.act-live {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #2a0d14;
  color: #ff8a98;
}
.act-min {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.62rem;
  color: #ffb3ac;
  margin-left: 0.3rem;
}


/* played match with no guess -> neutral grey box */
.match.guess-none .goal {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.14);
  opacity: 1;
}

/* locked (kicked off / finished) but you never predicted it -> blue highlight */
.match.guess-locked { background: rgba(47, 111, 237, 0.12); }
.match.guess-locked .goal {
  background: #2f6fed;
  color: #fff;
  border-color: #2f6fed;
  opacity: 1;
}

/* signed-in indicator */
.whoami {
  align-self: center;
  font-size: 0.85rem;
  color: #eaf0fb;
  font-weight: 600;
}

/* submit button confirmation: green "✓ Submitted" once locked */
.btn.submitted {
  background: #18a05a;
  color: #fff;
}
.btn.submitted:hover {
  background: #15894e;
}

/* =================================================================
   Title / sign-in screen
   ================================================================= */
body.title-active { overflow: hidden; }

.title-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    linear-gradient(180deg, rgba(6, 10, 28, 0.45) 0%, rgba(6, 10, 28, 0.62) 100%),
    #0a1024 url("images/Title Screen.jpg") center / cover no-repeat;
}
.title-screen.hidden { display: none; }

.title-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 440px;
  text-align: center;
}

.title-game {
  margin: 0;
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  color: #ffd23f; /* gold — picks up the flame + yellow accents on the poster */
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.title-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem 1.4rem;
  border-radius: 18px;
  background: rgba(8, 12, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.title-sub {
  margin: 0 0 0.3rem;
  color: rgba(234, 240, 251, 0.82);
  font-size: 0.92rem;
}

.title-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.title-btn.google {
  background: #fff;
  color: #1f2430;
  border-color: #dfe3ea;
}
.title-btn.google:hover { background: #f3f5f9; }
.title-btn.ghost {
  background: transparent;
  color: #eaf0fb;
  border-color: rgba(255, 255, 255, 0.32);
}
.title-btn.ghost:hover { border-color: #ffd23f; color: #ffd23f; }

.title-or {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(234, 240, 251, 0.55);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.title-or::before,
.title-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.title-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
}
.title-input::placeholder { color: rgba(234, 240, 251, 0.5); }
.title-input:focus {
  outline: none;
  border-color: #ffd23f;
  box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.25);
}

/* ================= Match info modal (lineups · H2H · squad stats) ========= */
.mi-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  background: rgba(8, 12, 24, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.mi-overlay[hidden] { display: none; }
body.mi-open { overflow: hidden; }
.mi-dialog {
  position: relative;
  width: min(880px, 100%);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(12, 18, 32, 0.45);
  margin: auto 0;
}
.mi-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
}
.mi-close:hover { background: var(--red); color: #fff; border-color: var(--red); }
.mi-body { padding: 1.25rem 1.25rem 1.5rem; }

.mi-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--cond);
  font-size: 1.35rem;
  font-weight: 700;
  padding: 0.25rem 2rem 0.9rem;
  text-align: center;
}
.mi-side { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.mi-side.away { justify-content: flex-end; }
.mi-header .flag-img { width: 28px; height: 20px; border-radius: 3px; object-fit: cover; }
.mi-v { color: var(--muted); font-size: 0.95rem; font-weight: 600; }

.mi-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.mi-tab {
  border: none;
  background: none;
  padding: 0.55rem 0.85rem;
  font-family: var(--cond);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.mi-tab:hover { color: var(--ink); }
.mi-tab.active { color: var(--red); border-bottom-color: var(--red); font-weight: 700; }

.mi-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  background: var(--bg);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}

/* --- Lineups --- */
.mi-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--green);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}
.mi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(24, 160, 90, 0.2); }
.mi-last { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.8rem; font-style: italic; }
.mi-xis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mi-xi { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem; }
.mi-xi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mi-team { font-family: var(--cond); font-weight: 700; font-size: 1.05rem; }
.mi-form { font-size: 0.78rem; color: var(--red); font-weight: 700; letter-spacing: 0.04em; }
.mi-coach { font-size: 0.78rem; color: var(--muted); margin: 0.15rem 0 0.5rem; }
.mi-players { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.mi-players li { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--line); }
.mi-players li:last-child { border-bottom: none; }
.mi-num { flex: 0 0 1.5rem; text-align: center; font-family: var(--cond); font-weight: 700; color: var(--muted); }
.mi-pname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-ppos { flex: 0 0 auto; font-size: 0.72rem; color: var(--muted); }
.mi-subs-h { margin-top: 0.7rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.mi-players.subs li { opacity: 0.78; }

/* --- Head-to-head --- */
.mi-h2h-sub { color: var(--muted); font-size: 0.9rem; text-align: center; margin: 0 0 0.75rem; }
.mi-h2h-bar { display: flex; height: 1.4rem; border-radius: 7px; overflow: hidden; background: var(--line); margin-bottom: 1rem; }
.mi-h2h-bar span { display: block; height: 100%; }
.hb-home { background: var(--red); }
.hb-draw { background: var(--muted); }
.hb-away { background: var(--green); }
.mi-h2h-table { width: 100%; border-collapse: collapse; text-align: center; }
.mi-h2h-table th { font-size: 0.78rem; color: var(--muted); font-weight: 600; padding: 0.3rem; }
.mi-h2h-table td { padding: 0.5rem; }
.mi-h2h-table strong { font-family: var(--cond); font-size: 1.6rem; display: block; }
.mi-h2h-table td:first-child strong { color: var(--red); }
.mi-h2h-table td:last-child strong { color: var(--green); }
.mi-pct { font-size: 0.85rem; color: var(--muted); }

/* --- Squad stats --- */
.mi-note { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.6rem; line-height: 1.45; }
.mi-note strong { color: var(--ink); }
.mi-legend { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.mi-key { padding: 0.05rem 0.4rem; border-radius: 5px; font-weight: 600; color: #fff; }
.mi-key.g { background: var(--green); }
.mi-key.a { background: #2f6fed; }
.mi-key.f { background: var(--amber); color: var(--ink); }
.mi-squads { display: grid; gap: 1.25rem; }
/* Grid item must be allowed to shrink below the table's min-width, otherwise it
   stretches the dialog instead of letting .mi-table-wrap scroll horizontally. */
.mi-squad { min-width: 0; }
.mi-squad h4 { font-family: var(--cond); font-size: 1.1rem; margin: 0 0 0.5rem; display: flex; align-items: baseline; gap: 0.5rem; }
.mi-season { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.mi-table-wrap { overflow-x: auto; }
.mi-stats { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 540px; }
.mi-stats th, .mi-stats td { padding: 0.35rem 0.45rem; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mi-stats thead th { color: var(--muted); font-weight: 600; font-size: 0.74rem; position: sticky; top: 0; background: var(--card); }
.mi-stats th.mi-pl, .mi-stats td.mi-pl { text-align: left; }
.mi-stats td.mi-pl { display: flex; align-items: center; gap: 0.4rem; }
.mi-photo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--line); flex: 0 0 auto; }
.mi-pos { color: var(--muted); }
.mi-yc { color: #b7900a; font-weight: 600; }
.mi-rc { color: var(--red); font-weight: 600; }
.mi-stats td.mi-top { font-weight: 800; border-radius: 4px; }
.mi-stats td.mi-g.mi-top { background: rgba(24, 160, 90, 0.16); color: var(--green); }
.mi-stats td.mi-a.mi-top { background: rgba(47, 111, 237, 0.16); color: #2f6fed; }
.mi-stats td.mi-f.mi-top { background: rgba(224, 160, 8, 0.18); color: #9a6e00; }

/* Sortable column headings */
.mi-stats th[data-sortable] { cursor: pointer; -webkit-user-select: none; user-select: none; }
.mi-stats th[data-sortable]:hover { color: var(--ink); }
.mi-stats th[data-dir] { color: var(--red); }
.mi-sarr { display: inline-block; width: 0.7em; font-size: 0.62em; vertical-align: middle; }
.mi-stats th[data-dir="desc"] .mi-sarr::after { content: "▼"; }
.mi-stats th[data-dir="asc"] .mi-sarr::after { content: "▲"; }

/* Goalkeepers sub-table */
.mi-gk-head { font-family: var(--cond); font-size: 0.95rem; color: var(--muted); margin: 1rem 0 0.4rem; }

@media (max-width: 620px) {
  .mi-xis { grid-template-columns: 1fr; }
  .mi-header { font-size: 1.1rem; }
}

/* --- Lineup pitch view --- */
.mi-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 68 / 90;
  margin-top: 0.5rem;
  border-radius: 10px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, #2e8b4f 0 11.11%, #2a8049 11.11% 22.22%);
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.12);
}
/* halfway line + centre circle */
.mi-pitch::before {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: 50%;
  height: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.35);
}
.mi-pitch::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}
.pp {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 4.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
}
.pp-shirt {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #0c1220;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.pp-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* In-circle number is hidden when a headshot loads; shown big only as a
   fallback when the photo 404s. */
.pp-fallnum { display: none; }
.pp-shirt.pp-noimg .pp-fallnum {
  display: block;
  color: #fff;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.pp-name {
  max-width: 100%;
  font-size: 0.66rem;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pp-no {
  display: inline-block;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.6rem;
  line-height: 0.92rem;
  min-width: 0.9rem;
  padding: 0 2px;
  margin-right: 2px;
  color: #0c1220;
  background: #ffd23f;
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
  text-shadow: none;
}
.pp-nm { font-weight: 600; vertical-align: middle; }

/* World Cup goal/assist columns (grouped tint) */
.mi-stats th[title^="World Cup"], .mi-stats td.mi-wc {
  background: rgba(200, 16, 46, 0.06);
  font-weight: 700;
}
.mi-stats td.mi-wc { color: var(--ink); }

/* Info button on each group match row (lineups · H2H · squad stats) */
.match-info {
  position: absolute;
  top: 0;
  right: 2px;
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  z-index: 3;
  transition: opacity 0.15s, color 0.15s, transform 0.15s;
}
.match-info:hover { opacity: 1; color: var(--red); transform: scale(1.15); }

/* ================= Champion flag confetti ================= */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  overflow: hidden;
}
.confetti-flag {
  position: absolute;
  top: -10vh;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, -12vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(var(--sway, 0), 112vh) rotate(var(--rot, 360deg)); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-flag { display: none; }
}

/* ================= All-time World Cup history leaderboards ================= */
.wc-history {
  position: relative;
  margin: 1.25rem 0 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgba(12, 18, 32, 0.3);
  background-color: #0a0e20;
  background-image:
    linear-gradient(
      to bottom,
      rgba(8, 12, 24, 0.78) 0%,
      rgba(8, 12, 24, 0.88) 32%,
      #0a0e20 58%,
      #0a0e20 100%
    ),
    url("images/Last Dance.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center top;
  /* Zoomed out a touch from "cover" so Neymar (left) and Messi (right) read
     clearly; the gradient fades the image fully into the base colour by ~58%,
     leaving the lower half dark so the Walk image below can fade up into it. */
  background-size: cover, 108%;
}
/* "Walk.jpg" — the stars walking toward the trophy — fills the dark lower half
   of the records panel. A top-edge mask fades it up out of the same #0a0e20
   the Last Dance image fades down into, so the two meet in a dark, low-contrast
   band with no visible seam. */
.wc-history::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 14, 32, 0.55), rgba(10, 14, 32, 0.32)),
    url("images/Walk.jpg") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 30%,
    #000 55%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.5) 30%,
    #000 55%
  );
}
/* Keep the heading + leaderboard cards above the Walk backdrop. */
.wch-overlay {
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.25rem 1.75rem;
}
.wch-head { margin-bottom: 0.25rem; }
.wch-head h2 { color: #fff; margin: 0 0 0.3rem; }
.wch-note {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  max-width: 70ch;
  margin: 0;
}
.wch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}
.wch-card {
  background: rgba(12, 18, 40, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.85rem 0.9rem 0.7rem;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.wch-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wch-card-head h3 {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wch-icon { font-size: 1.05rem; flex: 0 0 auto; }
.wch-approx {
  flex: 0 0 auto;
  color: #ffd98a;
  font-weight: 700;
  cursor: help;
}
.wch-list { list-style: none; margin: 0; padding: 0; }
.wch-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.26rem 0;
  font-size: 0.85rem;
  color: #eaf0fb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wch-row:last-child { border-bottom: none; }
.wch-rank {
  flex: 0 0 1.2rem;
  text-align: center;
  font-family: var(--cond);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.wch-row.lead .wch-rank { color: #ffd23f; }
.wch-flag { flex: 0 0 auto; display: inline-flex; }
.wch-flag .flag-img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.wch-name { flex: 1 1 auto; min-width: 0; }
.wch-nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wch-sub { display: block; font-size: 0.68rem; color: rgba(255, 255, 255, 0.5); }
.wch-val {
  flex: 0 0 auto;
  min-width: 1.6rem;
  text-align: right;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.wch-card-note {
  margin: 0.55rem 0 0;
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Match report: ratings on pitch, goals summary, performance table --- */
.pp-rating {
  position: absolute;
  top: -0.7rem; left: -0.7rem; /* sits in the corner, clear of the round photo */
  width: 1.2rem;
  height: 1.2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.6rem;
  border-radius: 50%;
  color: #fff;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.pp-rating.r-good { background: #11a85f; }            /* green: 7.0+ */
.pp-rating.r-ok   { background: #e0a008; color: #1a1400; } /* yellow: 6.0–6.9 */
.pp-rating.r-bad  { background: #d23b3b; }            /* red: < 6.0 */

/* Live event badges on a player chip (goals top-right, card bottom-right). */
.pp-ev {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cond);
  font-weight: 800;
  font-size: 0.58rem;
  line-height: 1;
}
.pp-ev.goal {
  top: -0.55rem; right: -0.55rem;
  min-width: 1.1rem; height: 1.1rem;
  padding: 0 2px;
  background: #0c1220;
  color: #fff;
  border: 1.5px solid #fff;
  border-radius: 0.6rem;
}
.pp-ev.card {
  bottom: -0.4rem; right: -0.4rem;
  width: 0.6rem; height: 0.82rem;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.4);
}
.pp-ev.card.yellow { background: #f5c518; }
.pp-ev.card.red { background: #e23b3b; }

.mi-final { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.7rem; }
.mi-goals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}
.mi-goals-team { font-family: var(--cond); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; }
.mi-goals ul { list-style: none; margin: 0; padding: 0; }
.mi-goals li { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-size: 0.82rem; padding: 0.12rem 0; }
.mi-goals .mi-ball { font-size: 0.85rem; }
.mi-goals .mi-scorer { font-weight: 600; }
.mi-goals .mi-min { color: var(--muted); font-size: 0.76rem; }
.mi-goals .mi-assist { color: var(--muted); font-size: 0.76rem; width: 100%; padding-left: 1.15rem; }
.mi-goals .mi-nogoal { color: var(--muted); }

.mi-perf td.mi-rt { font-weight: 800; border-radius: 4px; }
.mi-perf td.mi-rt.r-good { color: #11a85f; }
.mi-perf td.mi-rt.r-ok   { color: #b7900a; }
.mi-perf td.mi-rt.r-bad  { color: var(--red); }
.mi-src { color: var(--muted); font-size: 0.72rem; font-style: italic; }

/* Live 2026 additions on the all-time boards + the live tournament card */
.wch-val { display: inline-flex; align-items: baseline; gap: 0.25rem; }
.wch-live {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  color: #34d27b;
  background: rgba(24, 160, 90, 0.18);
  border-radius: 4px;
  padding: 0 3px;
}
/* provisional in-play goal bump (parsed live from the scoreboard) */
.wch-prov {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 800;
  color: #ff5a3c;
  background: rgba(255, 90, 60, 0.16);
  border-radius: 4px;
  padding: 0 4px;
  white-space: nowrap;
  animation: wch-prov-pulse 1.4s ease-in-out infinite;
}
@keyframes wch-prov-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.wch-card-live { border-color: rgba(255, 99, 71, 0.4); box-shadow: 0 0 0 1px rgba(255, 99, 71, 0.25) inset; }
.wch-livebadge {
  flex: 0 0 auto;
  font-family: var(--cond);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: #e0463c;
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}
.wch-empty { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; font-style: italic; }

/* ================= Live in-play scores (schedule strip) ================= */
.sch-card.live {
  border-color: rgba(224, 70, 60, 0.6);
  box-shadow: 0 0 0 1px rgba(224, 70, 60, 0.4) inset, 0 0 14px rgba(224, 70, 60, 0.25);
}
.sch-livetag {
  color: #ff6b5e;
  font-weight: 700;
  letter-spacing: 0.04em;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.sch-livebox { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.sch-livescore { font-family: var(--cond); font-weight: 700; font-size: 1.05rem; color: #fff; }
.sch-min {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.66rem;
  color: #ffb3ac;
  font-weight: 600;
}
.sch-livedot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5247;
  animation: live-pulse 1.2s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Rename-your-bracket pencil (next to the signed-in name) */
.rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.15rem 0.25rem;
  border-radius: 6px;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.15s;
}
.rename-btn:hover { opacity: 1; transform: scale(1.12); }

/* ===================================================================
   News — team/player/match headlines scanned from ESPN
   =================================================================== */
.news-section {
  margin-top: 28px;
  padding: 22px 24px 26px;
  border-radius: 16px;
  color: #eaf0fb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* "Walk.jpg" — the stars walking toward the trophy, same image that fills the
     lower half of the records panel — sits behind this section. A dark gradient
     is layered over it so the headlines stay legible. */
  background:
    linear-gradient(180deg, rgba(12, 18, 44, 0.82), rgba(18, 14, 36, 0.86)),
    url("images/Walk.jpg") center bottom / cover no-repeat;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
}
.news-section .section-head h2 { color: #fff; }
.news-section .section-head p { color: rgba(255, 255, 255, 0.78); }
.news-head h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.news-updated {
  font: 600 0.72rem/1 var(--sans);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.news-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 14px 0 18px;
}
.news-search-wrap { position: relative; flex: 1 1 240px; min-width: 200px; max-width: 340px; }
.news-search-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.news-search {
  width: 100%; box-sizing: border-box;
  padding: 9px 14px 9px 33px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 500 0.86rem/1 var(--sans);
}
.news-search::placeholder { color: var(--muted); }
.news-search:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12); }

.news-sel {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 0.82rem/1 var(--sans); color: var(--ink);
}
.news-sel .nts-label {
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.7rem; color: var(--muted);
}
.news-sel select {
  appearance: none; -webkit-appearance: none;
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236a7790' stroke-width='1.6'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  color: var(--ink);
  font: 600 0.82rem/1 var(--sans);
  cursor: pointer;
}
.news-sel select:hover { border-color: var(--red); }

.news-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.news-count {
  font: 700 0.78rem/1 var(--sans); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.news-link {
  border: none; background: none; cursor: pointer;
  font: 700 0.82rem/1 var(--sans); color: var(--red);
  padding: 2px 0;
}
.news-link:hover { text-decoration: underline; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.news-card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 16px rgba(12, 18, 32, 0.06);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(12, 18, 32, 0.14); }
.news-card.kind-injury      { border-left-color: var(--red); }
.news-card.kind-offfield    { border-left-color: #8a4fff; }
.news-card.kind-celebration { border-left-color: var(--green); }
.news-card.kind-preview     { border-left-color: var(--amber); }

/* Featured lead — first of the "top stories", spans the row. */
.news-card--lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.news-card--lead .news-thumb { aspect-ratio: auto; width: 44%; max-width: 380px; flex: none; }
.news-card--lead .news-body { justify-content: center; gap: 9px; padding: 18px 22px; }
.news-card--lead .news-headline { font-size: 1.32rem; line-height: 1.22; }
.news-card--lead .news-desc { -webkit-line-clamp: 3; font-size: 0.92rem; }
@media (max-width: 640px) {
  .news-card--lead { flex-direction: column; }
  .news-card--lead .news-thumb { width: 100%; aspect-ratio: 16 / 9; }
  .news-card--lead .news-headline { font-size: 1.12rem; }
}

.news-thumb { aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; }
.news-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.news-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 0.68rem/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
}
.tag-injury      { background: rgba(200, 16, 46, 0.10); color: var(--red-dark); }
.tag-offfield    { background: rgba(138, 79, 255, 0.12); color: #6a32d6; }
.tag-celebration { background: rgba(24, 160, 90, 0.12); color: #0f7a42; }
.tag-preview     { background: rgba(224, 160, 8, 0.16); color: #9a6e02; }
.news-time { font: 600 0.72rem/1 var(--sans); color: var(--muted); white-space: nowrap; }

.news-headline { margin: 0; font: 700 1.02rem/1.28 var(--cond); letter-spacing: 0.01em; }
.news-desc {
  margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.news-team {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 0.74rem/1 var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  padding: 3px 8px 3px 5px; border-radius: 999px;
}
.news-team .flag-img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; }
.news-player {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 0.74rem/1 var(--sans); color: #4338a8;
  background: rgba(99, 102, 241, 0.10); border: 1px solid rgba(99, 102, 241, 0.22);
  padding: 3px 9px; border-radius: 999px;
}
.news-player::before { content: "\1F464"; font-size: 0.78em; }
.news-empty { color: var(--muted); padding: 12px 2px; }

/* ---- Dark-panel theme: translucent blue cards/controls, light text ---- */
.news-search {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  color: #eaf0fb;
}
.news-search::placeholder { color: rgba(255, 255, 255, 0.55); }
.news-search-ic { color: rgba(255, 255, 255, 0.55); }
.news-search:focus { border-color: #ff8095; box-shadow: 0 0 0 3px rgba(255, 128, 149, 0.18); }
.news-sel { color: #eaf0fb; }
.news-sel .nts-label { color: rgba(255, 255, 255, 0.6); }
.news-sel select {
  color: #eaf0fb;
  border-color: rgba(255, 255, 255, 0.20);
  background-color: rgba(255, 255, 255, 0.08);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23aab4cc' stroke-width='1.6'/%3E%3C/svg%3E");
}
.news-sel select option { color: #16223b; } /* native menu stays light */
.news-sel select:hover { border-color: #ff8095; }

.news-count { color: rgba(255, 255, 255, 0.62); }
.news-link { color: #ff8095; }

.news-card {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.10);
  border-left-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.news-card:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.40); }
.news-thumb { background: rgba(255, 255, 255, 0.05); }
.news-headline { color: #f4f7ff; }
.news-desc { color: rgba(255, 255, 255, 0.66); }
.news-time { color: rgba(255, 255, 255, 0.5); }

.news-tag { background: rgba(255, 255, 255, 0.09); color: rgba(255, 255, 255, 0.7); }
.tag-injury      { background: rgba(255, 90, 110, 0.20); color: #ffb3bf; }
.tag-offfield    { background: rgba(150, 110, 255, 0.22); color: #d9c8ff; }
.tag-celebration { background: rgba(40, 200, 120, 0.20); color: #9be9bf; }
.tag-preview     { background: rgba(240, 185, 60, 0.22); color: #ffd98a; }

.news-team {
  color: #eaf0fb;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}
.news-player {
  color: #c7ccff;
  background: rgba(120, 130, 255, 0.18);
  border-color: rgba(120, 130, 255, 0.32);
}
.news-empty { color: rgba(255, 255, 255, 0.6); }