/* World Cup GDS Fantasy — picker styles.
   Implements the GDS Fantasy design system (navy scoreboard, blue selection,
   full-width formation pitch, Barlow display type). Tokens inlined so the app
   stays a single static folder with no extra CSS file to host. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Barlow+Semi+Condensed:wght@600;700;800&display=swap');

:root {
  /* Navy (brand) */
  --navy-950:#07142a; --navy-900:#0b1f3a; --navy-800:#13294b; --navy-700:#1d3a63; --navy-600:#2b4f7e; --navy-500:#3d6699;
  /* Blue (interaction / selection) */
  --blue-700:#1746a8; --blue-600:#1d5fd4; --blue-500:#2b6fe0; --blue-300:#9cc0f5; --blue-100:#e6f0ff; --blue-50:#f3f7ff;
  /* Green (positive / points) */
  --green-700:#15683a; --green-600:#1f8a4d; --green-100:#d9f3e2; --green-tint-dark:#b3ffcc;
  /* Danger */
  --red-600:#d92d20; --red-100:#fde4e2; --red-tint-dark:#ffb3b3;
  /* Gold (rank) */
  --gold-500:#d9a521; --gold-100:#f6eccf;
  /* Neutrals / ink */
  --ink-900:#111; --ink-700:#3a3f47; --ink-500:#555; --ink-400:#6b7280;
  --line-300:#ccc; --line-200:#e5e7eb; --placeholder:#eee;
  /* Surfaces */
  --surface:#fff; --surface-muted:#f7f9fc; --surface-sunken:#eef2f8; --overlay-scrim:rgba(7,20,42,.55);
  /* Foreground roles */
  --fg1:var(--ink-900); --fg2:var(--ink-500); --fg3:var(--ink-400); --fg-on-navy:#fff; --fg-on-navy-dim:#b9c6da;
  /* Type */
  --font-display:"Barlow", system-ui, sans-serif;
  --font-condensed:"Barlow Semi Condensed","Barlow", system-ui, sans-serif;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Radii */
  --radius-sm:2px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-full:9999px;
  /* Rings & shadows */
  --ring-hairline:0 0 0 1px rgba(0,0,0,.12);
  --ring-focus:0 0 0 3px rgba(29,95,212,.35);
  --shadow-sm:0 1px 2px rgba(7,20,42,.06), 0 1px 1px rgba(7,20,42,.04);
  --shadow-md:0 4px 12px rgba(7,20,42,.10);
  --shadow-lg:0 12px 32px rgba(7,20,42,.16);
  /* Motion */
  --ease-standard:cubic-bezier(.2,.7,.3,1); --dur-fast:120ms; --dur-base:180ms;
}

* { box-sizing: border-box; }
/* The `hidden` attribute must win over the flex/grid display rules below
   (otherwise hidden auth bars/forms still render). */
[hidden] { display: none !important; }
html, body { margin: 0; }
/* Never scroll sideways: keeps the sticky navy header full-width (no white strip
   above the pitch) and contains any too-wide child. `clip` (not hidden) so it
   doesn't break position:sticky. */
html { overflow-x: clip; }
body { font-family: var(--font-body); color: var(--fg1); background: var(--surface-muted); max-width: 100%; }

/* ---- Header (sticky navy band) ----------------------------------------- */
header {
  background: var(--navy-900); color: var(--fg-on-navy);
  position: sticky; top: 0; z-index: 20; padding: 16px 24px 14px; box-shadow: var(--shadow-md);
}
.hdr-inner { max-width: 1180px; margin: 0 auto; }
.hdr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mark { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.01em; line-height: 1; white-space: nowrap; margin: 0; }
.mark .b { color: var(--blue-300); }
.mark .sub { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--fg-on-navy-dim); margin-left: 12px; }
.lock { font-size: 12px; color: var(--fg-on-navy-dim); }
.lock b { color: #fff; font-weight: 600; }

.controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.controls label { font-size: 12px; color: var(--fg-on-navy-dim); display: flex; flex-direction: column; gap: 4px; }
.field {
  font-family: var(--font-body); font-size: 15px; padding: 9px 11px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: rgba(255,255,255,.1); color: #fff;
}
.field::placeholder { color: rgba(255,255,255,.5); }
.field:focus { outline: none; background: #fff; color: var(--ink-900); box-shadow: var(--ring-focus); }
select.field option { color: var(--ink-900); }
.spacer { flex: 1; }

.btn { font-family: var(--font-body); font-size: 15px; font-weight: 600; border-radius: var(--radius-md);
  padding: 9px 18px; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: var(--blue-500); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-ghost { background: var(--surface-sunken); color: var(--ink-700); border-color: var(--line-300); padding: 8px 12px; font-size: 13px; }
.btn-ghost:hover { background: #e3e9f2; }

.count { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Auth bar ----------------------------------------------------------- */
.authbar { display: flex; align-items: center; }
.auth-side { display: flex; align-items: center; gap: 8px; }
.auth-side .who { font-size: 13px; color: var(--fg-on-navy-dim); }
.auth-side .who b { color: #fff; font-weight: 700; }
.auth-side a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.auth-forms { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px;
  padding: 12px; background: rgba(255,255,255,.06); border-radius: var(--radius-md); }
.auth-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.auth-form .field { min-width: 140px; }
.req { font-size: 12px; color: var(--fg-on-navy-dim); align-self: center; }

/* ---- Status ------------------------------------------------------------- */
.status { margin: 10px 0 0; min-height: 1.2em; font-size: 13.5px; }
.status.ok { color: var(--green-tint-dark); }
.status.err { color: var(--red-tint-dark); }
.status.loading { color: var(--fg-on-navy-dim); }
.status .link { color: #fff; text-decoration: underline; font-family: var(--font-mono); font-size: 12px; word-break: break-all; }

/* ---- Layout ------------------------------------------------------------- */
main { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding: 22px 24px; }
.panel { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 18px; }
.panel-hd { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.panel-hd h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 0; white-space: nowrap; }

/* ---- Split: persistent left pitch · scrollable right pool --------------- */
.split { display: grid; grid-template-columns: minmax(420px, 1fr) 1fr; gap: 20px; align-items: start; }
/* grid/flex children default to min-width:auto, which lets their content push the
   column wider than the page — force them to shrink instead */
.split > * { min-width: 0; }
/* left column sticks under the header as the right side scrolls */
.squad-col { position: sticky; top: 92px; }
/* filters row */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter { padding: 8px 10px; font-size: 13px; background: var(--surface); color: var(--ink-900);
  border: 1px solid var(--line-300); border-radius: var(--radius-md); flex: 1 1 auto; min-width: 120px; }
.filter:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--ring-focus); }

/* ---- Squad formation: XI on the pitch (max 4 wide) + bench below -------- */
.pitch {
  position: relative; height: calc(100vh - 220px); min-height: 500px; max-height: 720px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: repeating-linear-gradient(180deg, #2f9b54 0 55px, #2c9350 55px 110px);
  box-shadow: var(--ring-hairline);
}
.pitch::before { content: ""; position: absolute; inset: 11px; border: 2px solid rgba(255,255,255,.7); border-radius: 3px; }
.pmid { position: absolute; left: 11px; right: 11px; top: 50%; height: 2px; background: rgba(255,255,255,.7); transform: translateY(-1px); }
.pcircle { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; transform: translate(-50%,-50%); }
.pbox { position: absolute; left: 50%; transform: translateX(-50%); width: 230px; height: 54px; border: 2px solid rgba(255,255,255,.7); }
.pbox.t { top: 11px; border-top: 0; }
.pbox.b { bottom: 11px; border-bottom: 0; }
.pformation { position: absolute; inset: 11px; display: flex; flex-direction: column; justify-content: space-evenly; padding: 6px 8px; }
/* rows are max 4 wide; cells share width equally so empty == filled (no shift) */
.pline { display: flex; align-items: stretch; justify-content: center; gap: 7px; }
.pline > * { flex: 1 1 0; min-width: 0; max-width: 104px; }

/* ---- Bench (under the pitch) -------------------------------------------- */
.bench { margin-top: 12px; }
.bench-label { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 11px; color: var(--fg2); margin: 0 2px 6px; }
.bench-row { display: flex; gap: 6px; }
.bench-row > * { flex: 1 1 0; min-width: 0; max-width: 110px; }
.bench .fcard { background: var(--surface-muted); }
.bench .fcard.empty { background: var(--surface-sunken); border: 1.5px dashed var(--line-300); }
.bench .fcard.empty .fcard-pos { color: var(--fg3); }

/* ---- Vertical squad card: photo+score, surname, crest+club, flag+pos+opp - */
.fcard { background: #fff; border: 1px solid var(--line-300); border-radius: var(--radius-md);
  padding: 7px 6px 6px; box-shadow: var(--shadow-md); position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; overflow: hidden; }
.fcard.filled { cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-standard); }
.fcard.filled:hover { box-shadow: var(--shadow-lg); }
/* top row: larger photo on the left, round score on the right */
.fcard-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.fcard-head .photo-sm, .fcard-head .mono-sm { width: 44px; height: 44px; }
.fcard-head .mono-sm { font-size: 16px; }
.fcard-score { min-width: 26px; padding: 3px 8px; border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--navy-900); font-family: var(--font-display);
  font-weight: 800; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.fcard-name { font-weight: 700; font-size: 13px; line-height: 1.1; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* bottom row: club crest · nation flag · position */
.fcard-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; max-width: 100%; }
.fcard-pos-tag { font-family: var(--font-condensed); font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--fg2); }
/* opponent flag(s) for this stage ("v" + their flag — all 3 in the group) */
.fcard-opp { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-condensed);
  font-weight: 700; font-size: 10px; letter-spacing: .03em; color: var(--fg3); }
.fcard-opp .flag-sm { width: 18px; height: 12px; }
.fcard-x { position: absolute; top: 3px; right: 4px; width: 17px; height: 17px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; background: var(--red-600); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1; opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); z-index: 2; }
.fcard.filled:hover .fcard-x { opacity: 1; }
.fcard.empty { background: rgba(255,255,255,.12); border: 1.5px dashed rgba(255,255,255,.85);
  box-shadow: none; min-height: 92px; justify-content: center; }
/* when the round is locked the squad is read-only: no remove button, no pointer */
.squad-locked .fcard-x { display: none; }
.squad-locked .fcard.filled { cursor: default; }
.fcard-meta .crest { width: 18px; height: 18px; }
.fcard-pos { font-family: var(--font-condensed); font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.92); font-size: 13px; }

/* ---- Pool / cards ------------------------------------------------------- */
.pool-search { position: relative; margin-bottom: 14px; }
.pool-search .field { width: 100%; background: var(--surface); color: var(--ink-900); border: 1px solid var(--line-300); padding-left: 34px; }
.pool-search .field:focus { border-color: var(--blue-600); }
.pool-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg3); }
/* larger pool cards: roomier grid + bigger headshot */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line-300); border-radius: var(--radius-lg); padding: 14px; cursor: pointer; background: #fff;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
.card:hover { border-color: var(--navy-900); }
.card.picked { background: var(--blue-100); border-color: var(--navy-900); }
.card.disabled { opacity: .4; cursor: not-allowed; }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pos { font-family: var(--font-condensed); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--fg2); margin-left: auto; }
.card-pts { font-family: var(--font-display); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--navy-900); background: var(--surface-sunken); border-radius: var(--radius-md); padding: 1px 7px; }
/* daily comp: player already burned in another round */
.card-used { font-family: var(--font-condensed); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--red-tint-dark, #b3271e); background: var(--red-tint, #fde4e2);
  border-radius: var(--radius-md); padding: 1px 7px; }
.pname { font-weight: 600; line-height: 1.2; font-size: 15.5px; }
.nat { color: var(--fg2); font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.check { margin-left: auto; color: var(--blue-600); flex: none; }
/* opponent flags on a pool card ("vs" + this stage's opponents) */
.card-opp { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--line-200); }
.card-opp .lbl { font-family: var(--font-condensed); font-weight: 700; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }
.card-opp .flag-sm { width: 20px; height: 14px; }

/* ---- Imagery: photo (with monogram fallback), flag, crest -------------- */
/* pool-card photo is larger; .photo-sm keeps the pitch cards compact */
.photo { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-full); flex: none;
  background: var(--placeholder); box-shadow: var(--ring-hairline); }
.photo-sm { width: 30px; height: 30px; }
.mono { width: 56px; height: 56px; border-radius: var(--radius-full); flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 20px; box-shadow: var(--ring-hairline); }
.mono-sm { width: 30px; height: 30px; font-size: 11px; }
.flag { width: 28px; height: 19px; object-fit: cover; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px rgba(0,0,0,.15); flex: none; background: var(--placeholder); }
.flag-sm { width: 22px; height: 15px; }
.crest { width: 16px; height: 16px; object-fit: contain; flex: none; }

/* ---- Leaderboard -------------------------------------------------------- */
.lb-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-controls select { font-family: var(--font-body); font-size: 14px; padding: 8px 10px;
  background: var(--surface); color: var(--ink-900); border: 1px solid var(--line-300); border-radius: var(--radius-md); }
.lb-controls select:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--ring-focus); }
.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--line-200);
  font-family: var(--font-condensed); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg2); }
.lb td { padding: 10px 12px; border-bottom: 1px solid var(--line-200); }
.lb .rank { width: 46px; font-family: var(--font-display); font-weight: 800; color: var(--fg2); font-variant-numeric: tabular-nums; }
.lb tr.top .rank { color: var(--gold-500); }
.lb .pts { text-align: right; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy-900); }
.lb tr.you { background: var(--blue-50); }
.lb .tag { font-size: 10px; color: var(--blue-600); font-weight: 700; margin-left: 8px; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Responsive --------------------------------------------------------- */
/* below 920px: stack the split into one column and un-stick the pitch */
@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; }
  .squad-col { position: static; top: auto; }
  .pitch { height: 520px; min-height: 0; max-height: none; }
  .pline > * { max-width: 120px; }
  .bench-row > * { max-width: 140px; }
}

/* Phones: scale the header, pitch and pool so nothing overflows the viewport
   and the pitch cards (4 across) stop overlapping. */
@media (max-width: 600px) {
  /* don't pin the (tall) header on phones — let it scroll away to free space */
  header { position: static; padding: 12px 14px; }
  .mark { font-size: 20px; white-space: normal; }
  .mark .sub { display: inline-block; margin-left: 8px; }
  .authbar, .auth-side { flex-wrap: wrap; gap: 6px; }
  main { padding: 14px 12px; gap: 14px; }
  .panel { padding: 12px; }

  /* pitch markings + cards shrink to fit a narrow pitch */
  .pitch { height: 440px; }
  .pcircle { width: 78px; height: 78px; }
  .pbox { width: 72%; }
  .pline { gap: 4px; }
  /* cap card width so a single-card row (the lone GK) doesn't stretch the full
     pitch width, while 3-4 cards still fit per row */
  .pline > *, .bench-row > * { max-width: 92px; }
  .bench-row { gap: 4px; }

  .fcard { padding: 5px 3px; }
  .fcard-head { gap: 3px; }
  .fcard-head .photo-sm, .fcard-head .mono-sm { width: 28px; height: 28px; }
  .fcard-head .mono-sm { font-size: 11px; }
  .fcard-score { min-width: 0; padding: 2px 4px; font-size: 12px; }
  .fcard-name { font-size: 10.5px; }
  .fcard-meta { gap: 3px; }
  .fcard-meta .crest { width: 13px; height: 13px; }
  .fcard .flag-sm { width: 16px; height: 11px; }
  .fcard-pos-tag { font-size: 9.5px; }
  .fcard.empty { min-height: 60px; }

  /* pool: two compact columns */
  .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 10px; }
  .card-top { gap: 6px; margin-bottom: 8px; }
  .photo, .mono { width: 42px; height: 42px; }
  .pname { font-size: 14px; }
  .filter { min-width: 0; }

  /* auth forms stack full-width */
  .auth-forms { gap: 10px; padding: 10px; }
  .auth-form { width: 100%; }
  .auth-form .field { flex: 1 1 120px; min-width: 0; }
}

/* ---- Tabs --------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--line-200); }
.tab { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg2);
  background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 10px 16px; cursor: pointer; }
.tab:hover { color: var(--navy-900); }
.tab.is-active { color: var(--navy-900); border-bottom-color: var(--blue-600); }
.tabpane { display: none; }
.tabpane.is-active { display: block; }

/* ---- Fixtures ----------------------------------------------------------- */
.fx-group { margin-bottom: 22px; }
.fx-group h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg2); margin: 0 0 10px; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line-200); border-radius: var(--radius-lg); margin-bottom: 8px; }
.fx-row.done { cursor: pointer; }
.fx-row.done:hover { border-color: var(--navy-900); }
.fx-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fx-team.away { justify-content: flex-end; }
.fx-team .crest { width: 22px; height: 22px; }
.fx-team .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-mid { text-align: center; min-width: 96px; }
.fx-score { font-family: var(--font-display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.fx-kick { font-size: 12px; color: var(--fg2); line-height: 1.3; }
.fx-venue { font-size: 11px; color: var(--fg3); margin-top: 2px; }
.fx-back { font-size: 13px; color: var(--blue-600); cursor: pointer; }
.sc-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 18px; }
.sc-head .crest { width: 34px; height: 34px; }
.sc-head .sc-score { font-family: var(--font-display); font-weight: 800; font-size: 30px; font-variant-numeric: tabular-nums; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sc-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line-200);
  font-family: var(--font-condensed); font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg2); }
.sc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-200); }
.sc-table .pts { text-align: right; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy-900); }
.sc-pl { display: flex; align-items: center; gap: 8px; }
.sc-pl .flag { width: 22px; height: 15px; }
.sc-empty { color: var(--fg3); padding: 16px 10px; }

/* ---- Fixtures on phones (placed last so it overrides the base .fx-* rules) -- */
@media (max-width: 600px) {
  .fx-row { gap: 6px; padding: 10px; }
  .fx-team { gap: 6px; min-width: 0; }
  /* full team names wrap onto multiple lines instead of being cut off */
  .fx-team .nm { white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 12.5px; line-height: 1.15; overflow-wrap: anywhere; }
  .fx-team.away .nm { text-align: right; }
  .fx-team .crest { width: 18px; height: 18px; }
  /* stop the date/venue column hogging the row so the names have room */
  .fx-mid { min-width: 0; max-width: 38%; }
  .fx-kick { font-size: 10.5px; line-height: 1.25; }
  .fx-venue { font-size: 10px; }
  .fx-score { font-size: 18px; }
}

/* ---- Daily comp: "who's playing" fixture strip above the picker --------- */
.day-fixtures { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  padding: 10px 14px; margin-bottom: 16px; }
.df-label { font-family: var(--font-condensed); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); margin-right: 4px; }
.df-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--ink-900); background: var(--surface-sunken); border: 1px solid var(--line-200);
  border-radius: var(--radius-full); padding: 4px 11px; }
.df-chip .flag-sm { width: 20px; height: 14px; }
.df-time { color: var(--fg3); font-weight: 500; font-size: 12px; }
.df-score { font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .df-chip { font-size: 11.5px; padding: 3px 8px; gap: 4px; }
  .df-chip .flag-sm { width: 16px; height: 11px; }
}

/* ---- Segmented comp switcher (leaderboard) ------------------------------- */
.seg { display: inline-flex; gap: 4px; background: var(--surface-sunken);
  border: 1px solid var(--line-200); border-radius: var(--radius-full); padding: 3px; }
.seg-btn { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--fg2);
  background: none; border: none; border-radius: var(--radius-full); padding: 6px 14px; cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard); }
.seg-btn:hover { color: var(--navy-900); }
.seg-btn.is-active { background: var(--navy-900); color: #fff; }

/* ---- Daily tab: one card per match day ----------------------------------- */
.daily-card { border: 1px solid var(--line-200); border-radius: var(--radius-lg);
  padding: 14px; margin-bottom: 10px; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-standard); }
.daily-card:hover { border-color: var(--navy-900); }
.daily-card.is-next { border-color: var(--blue-600); box-shadow: var(--shadow-sm); }
.daily-card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.daily-label { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy-900); }
.daily-lock { font-size: 12px; color: var(--fg2); white-space: nowrap; }
.daily-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.daily-tbd { color: var(--fg3); font-size: 13px; margin: 0 0 12px; }
.daily-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.daily-sub-badge { font-size: 13px; font-weight: 600; color: var(--fg3); }
.daily-sub-badge.is-in { color: var(--green-600); }
.daily-past h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--fg3); margin: 18px 0 8px; }
.daily-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--line-200); font-size: 13px; color: var(--fg3); cursor: pointer; }
.daily-row .daily-label { font-size: 13.5px; font-weight: 700; color: var(--fg2); margin-right: auto; }
.daily-row:hover .daily-label { color: var(--navy-900); }

@media (max-width: 600px) {
  .daily-card { padding: 10px; }
  .daily-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .daily-cta { width: 100%; }
  .seg-btn { padding: 5px 10px; font-size: 12px; }
}