/* ============================================================ */
/* DREAM XI '26 — SUMMER EDITION                                 */
/* A sun-soaked, three-nations festival visual system.          */
/* Anton (stadium condensed) + Hanken Grotesk. Sticker tactility,*/
/* sunburst light, confetti, foil highlights.                    */
/* ============================================================ */

:root {
  /* ============================================================ */
  /* STAR XI — World Cup 2026 · BRAND v2                           */
  /* Dark nation-field stage, chalk type, glass pills.            */
  /* Old festival token NAMES are kept and re-routed into the v2  */
  /* family so the whole cascade re-skins without touching every  */
  /* reference. New v2 tokens are added below.                    */
  /* ============================================================ */

  /* — core pitch greens — */
  --green:      #0C8A45;   /* brand pitch green */
  --green-deep: #076D36;   /* deep pitch */
  --pitch:   #0C8A45;
  --pitch-2: #076D36;
  --pitch-3: #18A95A;

  /* — ink / near-black field — */
  --ink:     #08130D;   /* near-black pitch */
  --ink-2:   #0E1F16;
  --ink-3:   #14241A;

  /* — chalk: the off-white type + hairline colour — */
  --chalk:   #F3F1E9;
  --paper:   #F3F1E9;   /* alias for old cream surfaces/type */
  --paper-2: #E7E4D8;
  --paper-3: rgba(243,241,233,.22);

  /* — accents (old festival names re-routed to v2 family) — */
  --gold:    #E9B949;   /* trophy gold — points / win / highlight */
  --gold-2:  #C9952A;   /* darker gold for offsets */
  --lime:    #C6F24E;   /* electric lime — live / streetwear pop */
  --coral:   #0C8A45;   /* primary action → pitch green */
  --orange:  #0C8A45;
  --orange-2:#076D36;
  --pink:    #C6F24E;   /* boost accent → lime */
  --pink-2:  #9FCB2E;
  --teal:    #18A95A;   /* bright grass */
  --teal-2:  #0C8A45;
  --blue:    #076D36;   /* cool step accent → deep pitch */
  --blue-2:  #052C16;

  /* — glass language — */
  --on-nation:   #FFFFFF;                       /* type/UI on a nation field */
  --fill-glass:  rgba(255,255,255,.13);         /* translucent white pill */
  --fill-glass-2:rgba(255,255,255,.20);         /* hover */
  --border-glass:2px solid rgba(255,255,255,.85);
  --glass-dark:  rgba(10,16,12,.62);            /* near-black surface glass */
  --glass-dark-2:rgba(10,16,12,.78);
  --pill: 999px;
  --card-radius: 18px;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 600ms;

  --shadow-card: 0 1px 0 rgba(255,255,255,.06), 0 22px 44px -22px rgba(0,0,0,.6);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 18px;

  /* Anton = display + numbers. Inter = text + UI.
     "Twemoji Country Flags" is prepended to every stack so country-flag
     emoji render on platforms whose system fonts lack them (Windows,
     many Linux builds). It only carries flag glyphs + is unicode-range
     scoped (see @font-face below), so it never affects any other text. */
  --font-display: "Twemoji Country Flags", "Anton", "Archivo Black", system-ui, sans-serif;
  --font-text:    "Twemoji Country Flags", "Inter", system-ui, sans-serif;
  --font-mono:    "Twemoji Country Flags", "Inter", system-ui, sans-serif;
  --font-num:     "Twemoji Country Flags", "Anton", system-ui, sans-serif;
}

/* ── Cross-platform country flags ──────────────────────────────────────
   Apple platforms (macOS/iOS) and Android/most Linux ship colour flag
   glyphs, but Windows' Segoe UI Emoji deliberately omits ALL country
   flags — so our regional-indicator emoji render blank there. This
   bundled, self-hosted Twemoji "flags-only" web font (COLR/CPAL colour,
   ~78 KB) draws them everywhere instead. Its cmap contains ONLY flag
   codepoints, and unicode-range restricts it to exactly those, so the
   browser never consults it for letters, numbers or any non-flag emoji.
   Covers all 48 nations incl. Scotland's gb-sct subdivision flag. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("fonts/twemoji-country-flags.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0020-E007F;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  background: var(--ink);
  color: var(--on-nation);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ——— App shell ——— */
/* ——— Error boundary fallback ——— */
.app-error-screen {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(135% 90% at 50% -20%, rgba(255,255,255,.06) 0%, transparent 52%),
    var(--ink);
}
.app-error-card {
  text-align: center; max-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.app-error-mark { width: 64px; height: auto; opacity: .9; }
.app-error-card h1 {
  font-family: var(--font-display); font-size: 26px;
  text-transform: uppercase; letter-spacing: .01em; color: #fff; margin: 0;
}
.app-error-card p {
  font-family: var(--font-text); font-size: 14px;
  color: rgba(255,255,255,.7); margin: 0; line-height: 1.5;
}
.app-error-actions { margin-top: 6px; }

.app {
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;            /* PROJECT RULE: each screen lives in one viewport */
  /* svh = the SMALL viewport (browser toolbars showing). Because this app never
     scrolls the page (each screen pages via the pinned Back/Next foot, with
     overflow:hidden), the toolbars never retract — so svh is the stable, always-
     usable height and it guarantees the foot clears Safari's top AND bottom bars.
     dvh used to push the foot under the bottom toolbar when the address bar sits
     on top. Falls back to 100vh where svh is unsupported; identical on desktop. */
  height: 100svh;
  overflow: hidden;         /* no page scroll — screens page via Back/Next */
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(135% 90% at 50% -20%, rgba(255,255,255,.06) 0%, transparent 52%),
    var(--ink);
  position: relative;
  transition: background-color .6s cubic-bezier(.4,0,.2,1);
}
.app::before {
  /* subtle grain over the flat field — kills banding, printed feel */
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.4px);
  background-size: 42px 42px, 42px 42px;
  background-position: 0 0, 21px 21px;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
/* Once a nation is locked, the whole app shell becomes that nation's flat
   colour — same palette as the welcome carousel, plus a soft vignette so
   pure-white type stays legible. The festival confetti speckle is hidden so
   the nation field reads clean. */
.app.themed {
  background-color: var(--nation, #15161B);
  background-image:
    radial-gradient(135% 90% at 50% -20%, rgba(255,255,255,.14) 0%, transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.34) 100%);
  color: #fff;
}
.app.themed::before { display: none; }
/* themed topbar: translucent dark glass over the nation field, white type */
.app.themed .topbar {
  background: rgba(13,14,19,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  color: #fff;
}
.app.themed .topbar .brand,
.app.themed .topbar .brand-name { color: #fff; }
.app.themed .topbar .brand-sub { color: #fff; opacity: .7; }
.app.themed .topbar .brand:hover { background: rgba(255,255,255,.08); }
.app.themed .topbar .crest-mark { filter: brightness(0) invert(1); }

/* helper: festival sunburst (used behind heroes) */
.sunburst {
  position: absolute;
  inset: -40% -20%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,255,255,.08) 0deg 7deg,
    transparent 7deg 14deg
  );
  pointer-events: none;
  z-index: 0;
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ——— Top bar ——— */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,243,226,.86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 2.5px solid var(--ink);
  padding: 12px 22px;
  display: flex; align-items: center; gap: 18px;
}
.topbar .brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 4px;
  margin-left: -6px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
  transition: transform .12s ease, background .15s ease;
}
.topbar .brand:hover { background: rgba(28,28,46,.06); transform: translateY(-1px); }
.topbar .brand:active { transform: translateY(0); }
.topbar .brand:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.crest-mark {
  width: 36px;
  height: 38px;
  color: var(--ink);
}

/* brand wordmark + sub-line */
.brand-stack { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .05em;
  line-height: .9;
  text-transform: uppercase;
}
.brand-sub {
  font-family: var(--font-text, "Inter"), system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .62;
}

/* ——— Top bar right cluster: step tracker + auth, pinned right ——— */
/* Auth lives OUTSIDE .steps so it survives the mobile `.steps{display:none}`
   rule and always stays visible. The tracker may shrink/scroll; auth never does. */
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0; /* allow the nav child to shrink instead of overflowing the bar */
}

/* ——— Step tracker: road to the final ——— */
.steps {
  display: flex; gap: 7px;
  min-width: 0;           /* shrink rather than push auth off-screen */
  overflow-x: auto;       /* scroll the tracker if the viewport is too narrow */
  scrollbar-width: none;  /* Firefox: hide scrollbar */
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: center;
}
.steps::-webkit-scrollbar { display: none; } /* WebKit: hide scrollbar */
/* In the mid-width zone the tracker scrolls inside .steps; fade the right edge
   so the clip reads as "more to scroll" rather than a broken cut-off. Above
   ~1046px the whole tracker fits, so no fade is applied (Reset stays crisp). */
@media (min-width: 721px) and (max-width: 1045px) {
  .steps {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent 100%);
  }
}
.step {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--ink);
  white-space: nowrap;
  appearance: none;
  background: transparent;
  border: 2px solid transparent;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: transform .12s, background .15s, color .15s;
}
.step:disabled { cursor: not-allowed; opacity: .4; }
.step:not(:disabled):hover { transform: translateY(-1px); background: var(--paper-2); }
.step.active {
  background: var(--coral); color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.step.done { color: var(--pitch-2); }
.step .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.step.active .dot { background: var(--gold); }
.step .num {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: .02em;
}
.step.extra {
  border: 2px solid var(--ink);
}
.step.extra.active { background: var(--blue); }

.reset-btn {
  appearance: none; cursor: pointer;
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: 4px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.reset-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.reset-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* ——— Auth controls (Clerk) ——— */
.auth-signin {
  appearance: none; cursor: pointer;
  flex-shrink: 0; /* never let the tracker squeeze the sign-in off-screen */
  white-space: nowrap;
  border: 2px solid var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: 4px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.auth-signin:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.auth-signin:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.auth-userbtn {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* keep the avatar pinned right; let the tracker shrink instead */
  margin-left: 6px;
  min-width: 28px;
  min-height: 28px;
}

/* ——— Main content frame ——— */
.screen {
  position: relative;
  z-index: 1;
  /* The Live screen owns its OWN vertical scroll (clipped below the chrome) so
     the shell never has to — that's what lets .step-shell be overflow:hidden and
     keeps this screen's content from ever sliding up behind the header. */
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 36px 22px 130px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  animation: rise .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger > * { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .16s; }
.stagger > *:nth-child(4) { animation-delay: .22s; }
.stagger > *:nth-child(5) { animation-delay: .28s; }
.stagger > *:nth-child(6) { animation-delay: .34s; }
.stagger > *:nth-child(7) { animation-delay: .40s; }

/* ——— Type ——— */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 5px 12px 4px;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-2);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
}
h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 92px);
  line-height: .92;
  letter-spacing: .003em;
  margin: 16px 0 16px;
  text-wrap: balance;
  text-transform: uppercase;
}
h2.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: .98;
  letter-spacing: .005em;
  margin: 10px 0 8px;
  text-wrap: balance;
  text-transform: uppercase;
}
h3.subtitle {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
.lede { font-size: 17px; color: var(--ink); opacity: .78; max-width: 56ch; font-weight: 500; }

/* ——— Buttons (chunky stickers) ——— */
.btn {
  --btn-bg: var(--coral);
  --btn-fg: var(--paper);
  --btn-shadow: var(--orange-2);
  appearance: none;
  border: 2.5px solid var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); filter: saturate(1.1); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn:disabled {
  cursor: not-allowed;
  opacity: .4;
  transform: none !important;
  box-shadow: 0 6px 0 var(--ink) !important;
  filter: grayscale(.4);
}
.btn.gold  { --btn-bg: var(--gold);  --btn-fg: var(--ink); }
.btn.green { --btn-bg: var(--pitch); --btn-fg: var(--paper); }
.btn.ghost {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
}
.btn.sm { padding: 11px 16px; font-size: 14px; border-radius: 11px; box-shadow: 0 5px 0 var(--ink); }
.btn.sm:hover { box-shadow: 0 6px 0 var(--ink); }
.btn.sm:active { box-shadow: 0 2px 0 var(--ink); }

/* ——— Cards ——— */
.card {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: 0 6px 0 var(--ink);
  position: relative;
}
.card.flat { box-shadow: 0 2px 0 rgba(39,16,51,.10), 0 14px 26px -16px rgba(39,16,51,.34); }
.card.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card.cream { background: var(--paper-2); }

/* ——— Welcome hero ——— */
/* One unified hero card — purple "pitch" of copy on the left, green nation
   picker on the right, joined edge-to-edge by a single ink seam so it reads
   as ONE object, not two floating panels. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
  align-items: stretch;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 0 var(--ink);
  overflow: hidden;
}
.hero-left {
  padding: 22px 26px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(155deg, var(--ink) 0%, #3a1550 52%, #5c1a52 100%);
  color: var(--paper);
}
.hero-left > * { position: relative; z-index: 1; }
.hero-left .lede { color: var(--paper); opacity: .82; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  background: var(--gold); color: var(--ink);
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-2);
}
.hero-tag .pip { width: 7px; height: 7px; background: var(--coral); border-radius: 50%; }

.hero-left h1.display {
  margin-top: 14px;
  color: var(--paper);
  text-shadow: 0 4px 0 rgba(0,0,0,.18);
}
/* hero sunburst rays */
.hero-left::before {
  content: "";
  position: absolute; top: -60%; right: -30%;
  width: 90%; height: 200%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,192,46,.10) 0deg 6deg, transparent 6deg 12deg);
  z-index: 0;
  animation: spin 120s linear infinite;
}
.hero-left::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(700px 360px at 75% 8%, rgba(255,90,31,.30), transparent 62%);
  z-index: 0;
}

.kicker-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 26px 0 8px;
}
.kicker {
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 14px 14px 12px;
  position: relative;
  backdrop-filter: blur(2px);
}
.kicker .n {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: .9;
  letter-spacing: .01em;
  color: var(--gold);
}
.kicker .l {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper); opacity: .7;
  margin-top: 6px;
}

/* nation picker — sticker sheet */
.hero-right { position: relative; }
.flag-picker {
  background:
    linear-gradient(160deg, #0f3d2e 0%, var(--pitch-2) 60%, var(--pitch) 120%);
  color: var(--paper);
  padding: 22px;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-left: 3px solid var(--ink);   /* the seam that joins the two halves */
}
.flag-picker::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.05) 0 26px, transparent 26px 52px);
}
.flag-picker > * { position: relative; z-index: 1; }
.fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fp-title { font-family: var(--font-display); font-size: 26px; letter-spacing: .01em; text-transform: uppercase; }
.fp-sub  {
  font-family: var(--font-text); font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--gold); color: var(--ink);
  padding: 4px 9px; border-radius: 999px;
}
.fp-search {
  width: 100%;
  margin-top: 14px;
  background: rgba(0,0,0,.22);
  border: 2px solid rgba(255,255,255,.16);
  color: var(--paper);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 15px;
  border-radius: 11px;
  outline: none;
}
.fp-search::placeholder { color: rgba(255,255,255,.5); }
.fp-search:focus { border-color: var(--gold); }
.fp-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.fp-grid::-webkit-scrollbar { width: 7px; }
.fp-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 4px; }
.flag-chip {
  appearance: none; border: 2px solid rgba(255,255,255,.14); cursor: pointer;
  background: rgba(255,255,255,.07);
  color: var(--paper);
  border-radius: 12px;
  padding: 11px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: background .15s, transform .12s, box-shadow .12s;
  font-family: var(--font-text);
}
.flag-chip:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.flag-chip .em { font-size: 27px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.flag-chip .nm { font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.flag-chip.sel {
  background: linear-gradient(135deg, var(--gold), #ffd970 60%, var(--gold));
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 4px 0 var(--gold-2), 0 0 0 3px rgba(255,255,255,.35) inset;
  transform: translateY(-2px) scale(1.03);
}
.fp-chosen {
  margin-top: 16px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.22);
  border: 2px dashed rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 13px 15px;
}
.fp-chosen .big-flag { font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.fp-chosen .nm { font-family: var(--font-display); font-size: 24px; letter-spacing: .01em; text-transform: uppercase; }
.fp-chosen .sub { font-family: var(--font-text); font-weight: 700; font-size: 11px; letter-spacing: .04em; opacity: .7; text-transform: uppercase; }
.fp-chosen .empty { color: rgba(255,255,255,.55); font-style: italic; }

.cta-row { display: flex; align-items: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.disclaimer {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ink); opacity: .55;
  margin-top: 22px;
  max-width: 60ch;
}

/* Compact fan-made footnote — pinned to the bottom of the hero, one line.
   The full legal notice lives in the site footer, so this stays small. */
.fm-badge {
  background: var(--coral); color: var(--paper);
  font-family: var(--font-text); font-weight: 800; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  box-shadow: 0 2px 0 var(--orange-2);
  white-space: nowrap;
}
.hero-fineprint {
  margin: 18px 0 0;           /* margin-top:auto pins it to the bottom */
  margin-top: auto;
  padding-top: 16px;
  border-top: 2px dashed rgba(255,255,255,.20);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-text); font-weight: 600; font-size: 11.5px;
  line-height: 1.5; letter-spacing: .01em;
  color: var(--paper); opacity: .62;
}
.hero-fineprint em { font-style: italic; opacity: .95; }

/* ——— Predict screen (brand v2 · glass) ——— */
.predict-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ph-titles { min-width: 0; }
.ph-titles .title { margin: 4px 0 4px; }
.ph-titles .lede { font-size: 14px; max-width: 60ch; }
.predict-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.md-tabs {
  display: inline-flex;
  background: var(--fill-glass);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: var(--pill);
  padding: 4px; gap: 3px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.md-tab {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: #fff;
  font-family: var(--font-display); font-size: 15px;
  padding: 8px 17px;
  border-radius: var(--pill);
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.md-tab .ct { font-family: var(--font-text); font-weight: 800; font-size: 11px; opacity: .7; margin-left: 7px; }
.md-tab.sel { background: #fff; color: var(--nation, var(--green)); }
.md-tab.sel .ct { opacity: .8; color: var(--nation, var(--green)); }

.match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.match-card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 14px;
  color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  position: relative;
  transition: transform .15s var(--ease), border-color .15s, box-shadow .15s;
}
.match-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.match-card.boost {
  border-color: rgba(233,185,73,.7);
  box-shadow: inset 0 0 0 1px rgba(233,185,73,.35), 0 10px 30px -16px rgba(0,0,0,.6);
}
.mc-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-family: var(--font-text); font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; opacity: .65;
  margin-bottom: 10px;
}
.mc-meta .grp { font-weight: 800; opacity: 1; }
.mc-meta .boost-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gold); color: #1a1205;
  padding: 4px 9px; border-radius: 999px;
  font-weight: 800; opacity: 1; font-size: 10px;
}
/* compact fixture row: home — score — away */
.mc-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team.home { justify-content: flex-end; }
.team.away { justify-content: flex-start; }
.team .em { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); flex: none; }
.team .nm { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .rk { font-family: var(--font-text); font-weight: 800; font-size: 10px; opacity: .55; flex: none; }
.team.away .rk { order: 3; }

.mc-when { white-space: nowrap; }

/* tap-to-set score control (shared by cards + list) */
.mc-score { display: flex; align-items: center; gap: 7px; }
.mc-dash { font-family: var(--font-display); font-size: 22px; color: #fff; opacity: .4; }
.score-set { display: flex; align-items: center; gap: 5px; }
.ss-btn {
  appearance: none; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
  width: 26px; height: 26px; border-radius: 8px; padding: 0;
  font-family: var(--font-display); font-size: 16px; line-height: 1;
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: transform .1s, background .12s, border-color .12s;
}
.ss-btn:hover { background: rgba(255,255,255,.2); }
.ss-btn:active { transform: translateY(1px); }
.ss-btn:disabled { opacity: .3; cursor: not-allowed; }
.ss-num {
  appearance: none; cursor: pointer; padding: 0;
  width: 42px; height: 46px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: #fff;
  font-family: var(--font-display); font-size: 28px; line-height: 1; text-align: center;
  font-variant-numeric: tabular-nums;
  transition: transform .1s, background .12s, border-color .12s;
}
.ss-num:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.ss-num:active { transform: translateY(1px); }
.ss-num:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.ss-num.empty { background: rgba(255,255,255,.04); border-style: dashed; opacity: .6; }

.score-set.sm { gap: 4px; }
.score-set.sm .ss-num { width: 30px; height: 32px; font-size: 19px; border-radius: 8px; }
.score-set.sm .ss-btn { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; }

.match-card.done { border-color: rgba(198,242,78,.7); }
.match-card.boost.done { border-color: rgba(233,185,73,.85); box-shadow: inset 0 0 0 1px rgba(198,242,78,.3), 0 10px 30px -16px rgba(0,0,0,.6); }

/* favourite read (FIFA-rank derived) — a nudge before you set the score */
.mc-fav {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed rgba(255,255,255,.18);
  font-family: var(--font-text); font-size: 11px;
}
.mc-fav .mcf-ico { color: var(--gold); font-size: 12px; flex: none; }
.mc-fav .mcf-team {
  font-weight: 800; letter-spacing: .01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mc-fav .mcf-label {
  margin-left: auto; flex: none;
  font-weight: 800; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  background: rgba(255,255,255,.16); color: #fff;
  padding: 3px 8px; border-radius: 999px;
}
.mc-fav.fav-even { opacity: .7; justify-content: center; }
.mc-fav.fav-even .mcf-label { margin-left: 0; background: transparent; color: #fff; opacity: .8; }

/* view toggle + matchday bar */
.view-toggle { display: inline-flex; background: var(--fill-glass); border: 1.5px solid rgba(255,255,255,.28); border-radius: var(--pill); padding: 4px; gap: 2px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vt { appearance: none; border: 0; cursor: pointer; background: transparent; color: #fff; font-family: var(--font-display); font-size: 13px; padding: 7px 13px; border-radius: var(--pill); letter-spacing: .02em; text-transform: uppercase; }
.vt.sel { background: #fff; color: var(--nation, var(--green)); }

.md-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.md-fill { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.1; }
.md-fill-sub { font-family: var(--font-text); font-weight: 800; font-size: 10px; opacity: .6; text-transform: none; letter-spacing: .02em; }

/* dense list view */
.predict-list { display: flex; flex-direction: column; gap: 6px; }
.pmatch-row {
  display: grid; grid-template-columns: 34px 1fr auto 1fr 18px;
  align-items: center; gap: 10px;
  background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  padding: 7px 12px; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pmatch-row.boost { border-color: rgba(233,185,73,.7); }
.pmatch-row.done { border-color: rgba(198,242,78,.6); }
.pmr-grp { font-family: var(--font-display); font-size: 13px; opacity: .6; line-height: 1; }
.pmr-grp i { font-style: normal; font-size: 10px; opacity: .8; }
.pmr-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pmr-team.home { justify-content: flex-end; }
.pmr-team.away { justify-content: flex-start; }
.pmr-team .em { font-size: 22px; flex: none; }
.pmr-team .nm { font-family: var(--font-display); font-size: 14.5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmr-boost { font-size: 13px; color: var(--gold); text-align: center; }

/* foot meter — lives in the pinned .step-foot action bar */
.foot-meter { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.foot-meter .fm-bar { flex: 1; height: 8px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.foot-meter .fm-fill { height: 100%; background: var(--lime); transition: width .25s ease; }
.foot-meter .fm-count {
  font-family: var(--font-text); font-weight: 800; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .85;
}
.foot-meter .fm-count em { font-style: normal; opacity: .6; }

/* ——— Dream XI ——— */
/* Single-viewport screen: header, body row, action foot. The body row owns the
   remaining height — only the player list inside it scrolls. */
.dxi-screen {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  animation: rise .5s var(--ease) both;
}
.dxi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; flex-shrink: 0; }
.dxi-head .ph-titles { min-width: 0; }
.dxi-head .title { margin: 4px 0; }
.dxi-head .lede { font-size: 13.5px; max-width: 72ch; line-height: 1.5; }
.dxi-actions { display: flex; gap: 10px; flex-shrink: 0; }

.dxi-body {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 420px; gap: 22px; align-items: stretch;
}
.dxi-left { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.dxi-controls { flex-shrink: 0; }
.dxi-layout { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }

.pos-tabs { display: inline-flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.pos-tab {
  appearance: none; cursor: pointer;
  font-family: var(--font-display); font-size: 14px;
  padding: 8px 15px; border-radius: var(--pill);
  background: var(--fill-glass); border: var(--border-glass);
  color: var(--on-nation);
  letter-spacing: .02em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .15s, transform .12s;
}
.pos-tab:hover { background: var(--fill-glass-2); transform: translateY(-1px); }
.pos-tab .pct { font-family: var(--font-text); font-weight: 800; font-size: 11px; opacity: .7; }
.pos-tab.sel { background: #fff; color: var(--nation, var(--green)); border-color: #fff; }
.pos-tab.sel .pct { opacity: .85; color: inherit; }
.pos-tab.full { opacity: .45; }

/* Player search + nation filter — essential now the pool is the full ~1,250 players */
.dxi-find { display: flex; gap: 8px; align-items: stretch; }
.dxi-find .dxi-search { flex: 1 1 auto; }
.dxi-nat {
  flex: 0 0 auto; max-width: 190px;
  appearance: none; cursor: pointer;
  font-family: var(--font-text); font-weight: 700; font-size: 13px; color: var(--on-nation);
  background: var(--glass-dark); border: 1.5px solid rgba(255,255,255,.28); border-radius: var(--pill);
  padding: 0 30px 0 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
                    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color .15s;
}
.dxi-nat option { color: #14141A; }
.dxi-nat:focus { outline: none; border-color: #fff; }
.dxi-sort {
  flex: 0 0 auto;
  appearance: none; cursor: pointer;
  font-family: var(--font-text); font-weight: 700; font-size: 13px; color: var(--on-nation);
  background: var(--glass-dark); border: 1.5px solid rgba(255,255,255,.28); border-radius: var(--pill);
  padding: 0 30px 0 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%),
                    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color .15s;
}
.dxi-sort option { color: #14141A; }
.dxi-sort:focus { outline: none; border-color: #fff; }
.dxi-search {
  position: relative; display: flex; align-items: center;
}
.dxi-search-ico {
  position: absolute; left: 15px; font-size: 17px; color: var(--on-nation); opacity: .6; pointer-events: none;
}
.dxi-search input {
  width: 100%; appearance: none;
  font-family: var(--font-text); font-weight: 600; font-size: 14px; color: var(--on-nation);
  background: var(--glass-dark); border: 1.5px solid rgba(255,255,255,.28); border-radius: var(--pill);
  padding: 11px 38px 11px 40px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .15s;
}
.dxi-search input::placeholder { color: var(--on-nation); opacity: .5; }
.dxi-search input:focus { outline: none; border-color: #fff; }
.dxi-search input::-webkit-search-decoration,
.dxi-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dxi-search-x {
  position: absolute; right: 11px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: var(--on-nation);
  font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.dxi-search-x:hover { background: #fff; color: var(--nation, var(--green)); }

.player-more {
  grid-column: 1 / -1;
  font-family: var(--font-text); font-weight: 600; font-size: 12.5px;
  color: var(--on-nation); opacity: .66; text-align: center; letter-spacing: .01em;
  padding: 14px 10px 4px; border-top: 1px dashed rgba(255,255,255,.18); margin-top: 4px;
}
.player-more strong { opacity: 1; }
.link-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  font-family: var(--font-text); font-weight: 800; font-size: inherit;
  color: var(--lime); text-decoration: underline; padding: 0;
}

.player-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* Boxed-in scroll region: the list is visually contained inside a glass card
   with a faint border + rounded corners, and top/bottom mask fades so cards
   appear to slip under a soft edge rather than bleed into the action foot.
   `scrollbar-gutter: stable` reserves space so cards don't reflow when the
   scrollbar appears, and `overscroll-behavior: contain` keeps wheel scrolls
   from chaining out to the page. */
.player-grid.scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  align-content: start;
  grid-auto-rows: min-content;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.player-grid.scroll::-webkit-scrollbar { width: 8px; }
.player-grid.scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }
.player-card {
  background: var(--glass-dark);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 8px 10px;
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
  text-align: left;
  font-family: var(--font-text);
  color: var(--on-nation);
  position: relative;
  min-width: 0;
}
.player-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.42); }
.player-card.picked {
  background: rgba(198,242,78,.15);
  border-color: var(--lime);
}
.player-card.picked .pc-form {
  background: var(--lime); color: var(--ink);
}
.player-card.is-disabled {
  cursor: not-allowed;
  background: rgba(10,16,12,.42);
  border-color: rgba(255,255,255,.1);
}
.player-card.is-disabled .pc-flag,
.player-card.is-disabled .pc-form { opacity: .6; }
.player-card.is-disabled .pc-meta { opacity: .45; }
.player-card.is-disabled:hover { transform: none; border-color: rgba(255,255,255,.1); }
.pc-flag {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 18px;
}
.pc-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-name {
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: .01em; line-height: 1.1; text-transform: uppercase;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-meta {
  font-family: var(--font-text); font-weight: 700; font-size: 10px;
  opacity: .6; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-form {
  background: var(--gold); color: var(--ink);
  font-family: var(--font-display); font-size: 13px;
  padding: 4px 8px; border-radius: 7px;
  letter-spacing: .01em; line-height: 1;
}
/* Wrapper for rating + add/check indicator */
.pc-right {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex-shrink: 0;
}
.pc-action {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .02em;
  color: rgba(255,255,255,.38); line-height: 1;
  transition: color .12s, transform .12s;
}
.player-card:hover:not(.is-disabled) .pc-action { color: rgba(255,255,255,.7); transform: scale(1.15); }
.player-card.picked .pc-action { color: var(--lime); font-size: 13px; }
.player-card.picked .pc-form { background: var(--lime); color: var(--ink); }

.xi-side {
  min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  /* The pitch shares this column with the formation selector and the captains
     panel. On short viewports all four rows (FW·MF·DF·GK) plus the captains
     panel can't fit — so rather than clip the defence + keeper, the column
     scrolls and the pitch keeps a min-height tall enough to draw every row.
     This mirrors the mobile YOUR XI tab; bottom-up order (GK at the foot,
     forwards up top) is preserved. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  padding-bottom: 8px;
}
/* The pitch absorbs any extra column height so the cap-bar sits flush against
   the bottom of the grid cell on tall viewports (flex:1 1 auto grows it). The
   min-height below is the floor that guarantees all four rows are drawn even
   when the column is too short to grow into — flex-shrink can't pull it below
   that, so the keeper + defenders are never clipped; .xi-side scrolls instead. */
.pitch { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pitch .pitch-rows { flex: 1; }
.xi-side .pitch { min-height: 440px; }
.cap-bar { flex-shrink: 0; }
.xi-side::-webkit-scrollbar { width: 8px; }
.xi-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }

.formation-row {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-dark);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 7px 7px 7px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.fr-label { font-family: var(--font-text); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.formation-tabs { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.formation-tab {
  appearance: none; cursor: pointer;
  background: transparent; border: 0;
  font-family: var(--font-display); font-size: 14px;
  padding: 8px 13px; border-radius: var(--pill);
  letter-spacing: .02em; color: var(--on-nation);
  transition: background .15s;
}
.formation-tab:hover { background: rgba(255,255,255,.12); }
.formation-tab.sel { background: #fff; color: var(--nation, var(--green)); }

/* "More tactics" button + popover */
.formation-more {
  appearance: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.35);
  background: transparent;
  color: var(--on-nation);
  font-size: 16px; line-height: 1; padding: 0;
  display: grid; place-items: center;
  margin-left: 2px;
  transition: background .15s, transform .12s, border-color .15s;
}
.formation-more:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: rotate(45deg); }
.formation-more.open { background: #fff; color: var(--nation, var(--green)); border-color: #fff; border-style: solid; transform: rotate(45deg); }
.formation-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: min(360px, calc(100% - 4px));
  background: rgba(8,19,13,.92);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 12px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  animation: rise .25s var(--ease) both;
}
.fp-head {
  font-family: var(--font-text); font-weight: 800; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .65;
  margin-bottom: 9px; padding-left: 2px;
}
.fp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.fp-tile {
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.18);
  color: var(--on-nation);
  border-radius: 11px;
  padding: 9px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: background .15s, transform .12s, border-color .15s;
}
.fp-tile:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.fp-tile.sel { background: #fff; color: var(--nation, var(--green)); border-color: #fff; }
.fp-name { font-family: var(--font-display); font-size: 14px; letter-spacing: .01em; line-height: 1; }
.fp-sub { font-family: var(--font-text); font-weight: 700; font-size: 9.5px; letter-spacing: .04em; opacity: .65; }
.fp-tile.sel .fp-sub { opacity: .8; }

/* ——— Pitch ——— */
.pitch {
  position: relative;
  background: #3a9e50;
  border: 2px solid rgba(0,0,0,.35);
  border-radius: 16px;
  padding: 14px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  overflow: hidden;
  color: #fff;
}
.pitch-bg { position: absolute; inset: 0; pointer-events: none; }
.pitch-stripe { display: none; }
.pitch-bg::after { content: none; }
.pitch-mid-line { position: absolute; left: 6%; right: 6%; top: 50%; height: 1.5px; background: rgba(255,255,255,.75); }
.pitch-mid-circle {
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 72px;
  border: 1.5px solid rgba(255,255,255,.75);
  border-radius: 50%; transform: translate(-50%, -50%);
}
/* Centre spot */
.pitch-mid-circle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.75);
  transform: translate(-50%, -50%);
}
.pitch-box { position: absolute; left: 16%; right: 16%; height: 88px; border: 1.5px solid rgba(255,255,255,.75); }
.pitch-box.top { top: 0; border-top: 0; }
.pitch-box.bottom { bottom: 0; border-bottom: 0; }
.pitch-6yd { position: absolute; left: 30%; right: 30%; height: 34px; border: 1.5px solid rgba(255,255,255,.75); }
.pitch-6yd.top { top: 0; border-top: 0; }
.pitch-6yd.bottom { bottom: 0; border-bottom: 0; }

.pitch-rows {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  /* On the DreamXI screen the pitch shares the right column with the
     formation row and the cap-bar, so it has to flex-shrink alongside them.
     A modest minimum keeps the graphic readable; the outer .pitch is
     flex: 1 1 auto inside .xi-side so it absorbs whatever extra room is
     going. On Confirm / Live (where the pitch is shown on its own) the
     min-height-on-pitch-rows ancestor is unconstrained, so it can still
     breathe up to its natural size. */
  min-height: 260px;
  padding: 4px 4px;
  flex: 1;
}
.pitch-row { display: flex; justify-content: space-around; align-items: center; gap: 6px; }
.pitch-slot { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; position: relative; gap: 5px; }
/* Wrapper that shrink-wraps the shirt tile so the remove × stays anchored to
   the tile's top-left corner, independent of how wide the pitch-slot column
   gets (the GK row stretches a single slot across the full pitch). It MUST hug
   the tile in both dimensions: a fixed height shorter than the (64px / 70px)
   tile let the card overflow and paint over the top of the player name below
   it. inline-flex sizes to the tile at every breakpoint, so they never drift. */
.slot-shirt { position: relative; display: inline-flex; }
.pitch-slot.empty { opacity: .7; }
.pitch-slot.empty::before {
  content: "";
  width: 46px; height: 48px;
  border: 2px dashed rgba(255,255,255,.6);
  border-radius: 10px 10px 16px 16px;
}
.pitch-slot .slot-pos { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; opacity: .8; margin-top: 4px; }

.slot-tile {
  appearance: none; cursor: pointer;
  background: linear-gradient(180deg, #fff, #e9e9ef);
  border: 2px solid rgba(8,19,13,.85);
  width: 50px; height: 64px;
  border-radius: 10px 10px 16px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: relative;
  padding: 0;
  box-shadow: 0 6px 14px rgba(0,0,0,.32);
  transition: transform .12s, box-shadow .12s;
}
.slot-tile:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(0,0,0,.4); }
.slot-flag { font-size: 22px; line-height: 1; }
.slot-pos-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .06em; color: rgba(8,19,13,.75); line-height: 1; }
.pitch-slot.cap .slot-tile {
  background: linear-gradient(135deg, var(--gold), #ffe08a 55%, var(--gold));
  border-color: rgba(8,19,13,.85);
  box-shadow: 0 6px 16px rgba(0,0,0,.32), 0 0 0 3px rgba(255,255,255,.5) inset;
}
/* Captain badge — mirrors .slot-x (top-left) so the two top corners match
   exactly: same 30px circle + 2.5px border. The offset is -14px (vs the X's
   -12px) because these badges anchor to .slot-tile's padding box, which sits
   2px inside the tile's border — slot-x anchors to .slot-shirt (the border
   box). The extra 2px cancels that out so both circles line up. */
.cap-mark {
  position: absolute; top: -14px; right: -14px;
  background: var(--gold); color: var(--ink);
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; line-height: 1;
  letter-spacing: -.01em;
  z-index: 2;
}
/* faint star affordance so "tap to captain" is discoverable — same size as
   .cap-mark / .slot-x */
.cap-hint {
  position: absolute; top: -14px; right: -14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--ink);
  border: 2.5px solid var(--ink);
  display: grid; place-items: center;
  font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity .15s;
}
.pitch-slot:hover .cap-hint { opacity: .9; }
.pitch.needs-cap .cap-hint { opacity: .65; animation: capPulse 1.6s ease-in-out infinite; }
@keyframes capPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.pitch.read-only .slot-tile { cursor: default; }
.pitch.read-only .slot-tile:hover { transform: none; box-shadow: 0 6px 14px rgba(0,0,0,.32); }

.slot-info { text-align: center; margin-top: 2px; max-width: 100%; }
.slot-name {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: .01em; line-height: 1; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--paper); padding: 0 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.slot-meta { font-family: var(--font-text); font-weight: 700; font-size: 9.5px; opacity: .8; letter-spacing: .02em; }
/* Mirror of .cap-mark on the top-LEFT corner of the 50px shirt. Lives inside
   .slot-shirt (a sibling of .slot-tile inside that wrapper) so the corner
   anchor stays glued to the shirt regardless of how wide pitch-slot is.
   Button-in-button isn't legal, which is why .slot-x can't live inside
   .slot-tile the way .cap-mark does. */
.slot-x {
  position: absolute;
  top: -12px;
  left: -12px;
  appearance: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink);
  border: 2.5px solid #fff;
  font-size: 0;                 /* hide the × glyph; the cross is drawn below */
  padding: 0;
  box-shadow: 0 2px 7px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .15s, transform .12s;
  z-index: 3;
}
/* Big, bold white cross drawn from two bars so it stays crisp and fills the
   circle far better than the thin × glyph. */
.slot-x::before,
.slot-x::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 17px; height: 3.5px;
  background: #fff; border-radius: 2px;
}
.slot-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.slot-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.pitch-slot:hover .slot-x,
.slot-shirt:hover .slot-x { opacity: 1; }
.slot-x:hover { transform: scale(1.12); }
.slot-x:active { transform: scale(.94); }
/* Touch devices have no hover — keep the remove button visible so it's
   tappable and obviously the way to drop a player. */
@media (hover: none) {
  .slot-x { opacity: 1; }
}

.pitch-foot {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 13px; opacity: .85; letter-spacing: .04em; text-transform: uppercase;
}
.pitch-tip { font-family: var(--font-text); font-weight: 700; font-size: 10px; opacity: .85; text-transform: uppercase; }

/* captain block */
.cap-block {
  background: var(--glass-dark);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 14px;
  color: var(--on-nation);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cap-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; user-select: none; }
.cap-toggle input { margin-top: 4px; accent-color: var(--lime); width: 18px; height: 18px; }
.cap-toggle strong { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; text-transform: uppercase; display: block; }
.cap-toggle em { font-style: normal; font-size: 12.5px; opacity: .72; display: block; font-weight: 500; }

.cap-md-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.18); }
.cap-md-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.cap-md-label { font-family: var(--font-text); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.cap-md-select {
  appearance: none;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.24);
  border-radius: 9px;
  padding: 8px 11px;
  color: var(--on-nation);
  font-family: var(--font-text); font-weight: 600; font-size: 13px;
  cursor: pointer;
}
.cap-md-select option { color: #14141A; }

.cap-summary { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 600; line-height: 1.45; }
.cap-summary strong { font-family: var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.cap-summary .cap-star { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 2px solid rgba(255,255,255,.55); }
.cap-summary.set .cap-star { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cap-summary.empty { opacity: .85; }
.cap-summary.empty .cap-star { background: rgba(255,255,255,.1); color: var(--on-nation); opacity: .7; border-style: dashed; }

.cap-adv-toggle {
  appearance: none; cursor: pointer; width: 100%;
  margin-top: 12px; padding-top: 11px;
  border: 0; border-top: 1px dashed rgba(255,255,255,.18); background: transparent;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--on-nation); opacity: .72;
  text-align: left;
}
.cap-adv-toggle:hover { opacity: 1; }
.cap-adv-toggle .cat-chev { font-size: 10px; }
.cap-adv-on { margin-left: auto; background: var(--lime); color: var(--ink); font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .08em; }
.cap-adv { margin-top: 10px; }

.notice {
  margin-top: 12px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .01em;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.18);
}
/* glass variant when notice sits in the side rail */
.xi-side .notice {
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.28);
  border-radius: 14px;
  padding: 11px 13px;
  color: var(--on-nation);
  opacity: .8;
}

/* ——— Compact captain bar (replaces the bulky cap-block in DreamXI) ——— */
.cap-bar {
  background: var(--glass-dark);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 11px 13px;
  color: var(--on-nation);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 10px;
}
.cap-bar-summary { display: flex; gap: 10px; align-items: center; min-width: 0; }
.cap-bar-summary .cap-star {
  flex: none; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .02em;
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
  white-space: nowrap;
}
.cap-bar-summary .cap-star.set { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cap-bar-text {
  font-family: var(--font-text); font-weight: 600; font-size: 12.5px;
  line-height: 1.4; min-width: 0;
}
.cap-bar-text strong {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: .01em; text-transform: uppercase;
}
.cap-bar-text em { font-style: normal; opacity: .7; font-weight: 600; }

.cap-md-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.cap-note {
  margin: 0; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.18);
  font-family: var(--font-text); font-weight: 500; font-size: 11.5px;
  line-height: 1.45; opacity: .78; letter-spacing: .01em;
}
.cap-note strong {
  font-family: var(--font-text); font-weight: 800;
  opacity: 1; color: #fff;
}
.cap-md-chip {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 4px 4px 4px 10px;
  transition: border-color .15s, background .15s;
  min-width: 0;
}
.cap-md-chip.set { border-color: var(--gold); background: rgba(233,185,73,.12); }
.cap-md-tag {
  flex: none;
  font-family: var(--font-text); font-weight: 800; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; opacity: .72;
}
.cap-md-chip.set .cap-md-tag { color: var(--gold); opacity: 1; }
.cap-md-chip select {
  flex: 1; min-width: 0;
  appearance: none;
  background: transparent; border: 0;
  color: var(--on-nation);
  font-family: var(--font-text); font-weight: 600; font-size: 12px;
  padding: 6px 6px 6px 4px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.cap-md-chip select:focus { outline: none; }
.cap-md-chip select option { color: #14141A; }

/* ——— Confirm (glass v2) ——— */
/* Confirm screen is single-viewport: header is compact, the two summary
   cards split the remaining height and scroll internally if needed. */
.confirm-screen .step-scroll { overflow: hidden; display: flex; flex-direction: column; }
/* Name row is pinned (outside .step-scroll); never let it compress so the
   "Name your squad" input + foot stay visible no matter how full the cards. */
.confirm-name-row { padding: 10px 24px 0; flex-shrink: 0; }
.confirm-name-input { margin-bottom: 0 !important; font-size: 14px; }
.confirm-name-input::placeholder { font-style: italic; }
.confirm-name-input.input-error { border-color: #ff4444 !important; }
.confirm-name-error { margin: 6px 0 0; font-size: 12px; color: #ff4444; font-family: var(--font-body); }
.confirm-head { margin-bottom: 8px; }
.confirm-head .title { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 4px; }
.confirm-head .lede { font-size: 12.5px; line-height: 1.45; max-width: 62ch; }
.confirm-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 8px;
  flex: 1; min-height: 0;
}
.summary-card { padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.summary-card > .xi-preview, .summary-card > .rtf-confirm { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.summary-card h3 { font-family: var(--font-display); font-size: 20px; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 4px; color: #fff; }
.summary-card h3 .sc-opt {
  vertical-align: middle; margin-left: 8px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-family: var(--font-text); font-weight: 800; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; opacity: .85;
}
.summary-card .sum-meta { font-family: var(--font-text); font-weight: 700; font-size: 10.5px; letter-spacing: .03em; opacity: .68; text-transform: uppercase; margin-bottom: 10px; }
.preview-list { font-family: var(--font-text); font-size: 13.5px; }
.pl-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  padding: 7px 2px; font-weight: 600;
  border-bottom: 1px dashed rgba(255,255,255,.16);
}
.pl-row:last-child { border-bottom: 0; }
.pl-row .l { text-align: right; }
.pl-row .r { text-align: left; }
.pl-row .em { margin: 0 4px; font-size: 17px; }
.pl-row .sc { font-family: var(--font-display); font-size: 19px; letter-spacing: .01em; color: #fff; }
.pl-row.boost { background: rgba(198,242,78,.15); border: 1px solid rgba(198,242,78,.4); border-radius: 10px; padding: 7px 9px; border-bottom: 1px solid rgba(198,242,78,.4); margin: 2px 0; }

.xi-preview { display: flex; flex-direction: column; gap: 4px; }
.xi-pos-group { display: flex; flex-direction: column; gap: 3px; }
.xi-pos-label { font-family: var(--font-text); font-weight: 800; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .5; margin-top: 2px; }
.xi-prev-row { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 5px 10px; }
.xi-prev-row .em { font-size: 18px; }
.xi-prev-row .nm { font-family: var(--font-display); font-size: 13.5px; letter-spacing: .01em; text-transform: uppercase; color: #fff; line-height: 1.1; }
.xi-prev-row .ps { font-family: var(--font-text); font-weight: 700; font-size: 9.5px; opacity: .6; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; }
.xi-prev-row .cap { margin-left: auto; background: var(--gold); color: #14141A; font-family: var(--font-display); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; letter-spacing: .03em; white-space: nowrap; }

.math-card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius);
  color: #fff;
  padding: 22px;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  margin-top: 16px;
}
.math-card .eyebrow { background: var(--lime); color: #14141A; border-color: transparent; }
.math-card .eyebrow::before { background: #14141A; }
.math-card h3 { font-family: var(--font-display); font-size: 25px; letter-spacing: .01em; text-transform: uppercase; margin: 12px 0 8px; color: #fff; }
.math-card p { margin: 0 0 14px; max-width: 70ch; opacity: .82; font-size: 14px; font-weight: 500; }
.math-card p strong { color: var(--gold); }
/* .ladder / .lstep removed — backed the "How the table ranks" 4-step
   explainer card on Confirm, which has been retired. */

/* ——— Locked-in home base (glass v2) ——— */
.lockbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--glass-dark);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius);
  padding: 14px 18px; box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.lockbar-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lock-badge { background: var(--lime); color: #14141A; font-family: var(--font-display); font-size: 13px; letter-spacing: .03em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.lockbar-head strong { font-family: var(--font-display); font-size: 19px; letter-spacing: .01em; text-transform: uppercase; font-weight: 400; color: #fff; }
.lock-when { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .04em; }
.countstrip { display: flex; align-items: center; gap: 10px; }
.cs-lead { font-family: var(--font-text); font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.cs-unit { font-family: var(--font-text); font-weight: 700; font-size: 12px; opacity: .8; }
.cs-unit b { font-family: var(--font-num); font-size: 22px; color: var(--gold); margin-right: 1px; }
.countstrip.live .cs-lead { color: var(--lime); opacity: 1; font-size: 12px; }

.locked-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; margin-top: 16px; }
.locked-pitch-wrap { display: flex; flex-direction: column; gap: 10px; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-form { font-family: var(--font-display); font-size: 16px; letter-spacing: .02em; opacity: .65; }
.lp-cap { font-family: var(--font-text); font-size: 12.5px; font-weight: 600; opacity: .8; line-height: 1.4; }
.lp-cap strong { font-family: var(--font-display); letter-spacing: .01em; text-transform: uppercase; }

.locked-side { display: flex; flex-direction: column; gap: 14px; }
.entry-card { background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius); padding: 16px; box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ec-nation { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px dashed rgba(255,255,255,.16); }
.ec-flag { font-size: 38px; line-height: 1; }
.ec-name { font-family: var(--font-display); font-size: 20px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; color: #fff; }
.ec-sub { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .6; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.ec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.ec-stat { text-align: center; }
.ec-stat .n { font-family: var(--font-num); font-size: 30px; line-height: .9; color: #fff; }
.ec-stat .n em { font-style: normal; font-size: 15px; opacity: .45; }
.ec-stat .l { font-family: var(--font-text); font-weight: 700; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .6; margin-top: 4px; }

.crowd-card { background: var(--glass-dark-2); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius); padding: 16px; box-shadow: var(--shadow-card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cc-title { font-family: var(--font-display); font-size: 16px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 12px; color: #fff; }
.cc-row { display: flex; align-items: center; gap: 10px; }
.cc-k { font-family: var(--font-text); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; white-space: nowrap; }
.cc-meter { flex: 1; height: 9px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.cc-fill { height: 100%; background: linear-gradient(90deg, var(--lime), var(--gold)); }
.cc-v { font-family: var(--font-num); font-size: 18px; color: var(--gold); }
.cc-note { font-size: 12.5px; font-weight: 500; line-height: 1.45; opacity: .85; margin: 10px 0 0; }
.cc-bold { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.18); font-size: 13px; font-weight: 500; line-height: 1.4; }
.cc-bold-tag { align-self: flex-start; background: var(--gold); color: #14141A; font-family: var(--font-text); font-weight: 800; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.cc-bold strong { font-family: var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.cc-bold i { font-style: normal; opacity: .7; }

.locked-foot { font-family: var(--font-text); font-size: 11.5px; font-weight: 500; opacity: .6; line-height: 1.5; margin: 0; }

/* ——— Expandable: all 72 matches + the scores you called (glass v2) ——— */
.locked-fixtures { margin-top: 16px; }
.lf-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: var(--glass-dark); color: #fff;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 15px 18px; cursor: pointer; text-align: left;
  transition: transform .12s, background .12s;
}
.lf-toggle:hover { background: var(--glass-dark-2); transform: translateY(-1px); }
.lf-toggle:active { transform: translateY(0); }
.lf-toggle.open { border-radius: var(--card-radius) var(--card-radius) 0 0; }
.lf-chev { font-size: 15px; line-height: 1; opacity: .65; flex: none; width: 14px; }
.lf-toggle-title { font-family: var(--font-display); font-size: 17px; letter-spacing: .01em; text-transform: uppercase; line-height: 1.05; }
.lf-toggle-meta {
  margin-left: auto; flex: none;
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .03em; text-transform: uppercase; opacity: .6; white-space: nowrap;
}

.lf-body {
  border: 1px solid rgba(255,255,255,.14); border-top: 0;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  background: var(--glass-dark-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 16px; margin-bottom: 5px;
}
.lf-tabs {
  display: inline-flex; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 4px; gap: 2px;
  margin-bottom: 14px;
}
.lf-listhead {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-text); font-weight: 800; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; opacity: .5;
  padding: 0 6px 8px;
}

.lf-list { display: flex; flex-direction: column; gap: 6px; }
.lf-row {
  display: grid; grid-template-columns: 54px minmax(0,1fr) auto minmax(0,1fr) 60px;
  align-items: center; gap: 9px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 11px;
  padding: 7px 12px;
}
.lf-row.boost { background: rgba(198,242,78,.13); border-color: rgba(198,242,78,.4); }
.lf-row.nopred { opacity: .72; }

.lf-grp { font-family: var(--font-display); font-size: 14px; opacity: .6; line-height: 1; white-space: nowrap; }
.lf-grp i { font-style: normal; font-size: 10px; opacity: .75; margin-left: 1px; }
.lf-star { color: var(--lime); font-size: 12px; margin-left: 3px; }

.lf-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lf-team.home { justify-content: flex-end; }
.lf-team.away { justify-content: flex-start; }
.lf-team .em { font-size: 20px; line-height: 1; flex: none; }
.lf-team .nm { font-family: var(--font-display); font-size: 14px; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }

.lf-score { display: flex; align-items: center; gap: 5px; justify-content: center; min-width: 48px; }
.lf-score b { font-family: var(--font-num); font-size: 20px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.lf-score i { font-style: normal; font-family: var(--font-display); font-size: 14px; opacity: .4; }
.lf-nopred { font-family: var(--font-display); font-size: 16px; opacity: .3; letter-spacing: .05em; }

.lf-result { text-align: right; white-space: nowrap; }
.lf-date { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .55; }
.lf-pending { font-family: var(--font-display); font-size: 16px; opacity: .35; }

.lf-foot { font-family: var(--font-text); font-size: 11.5px; font-weight: 500; opacity: .62; line-height: 1.5; margin: 14px 2px 0; }

/* live-results extras */
.lf-live-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(0,0,0,.35); color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
  font-family: var(--font-text); font-weight: 700; font-size: 13px;
}
.lf-live-banner strong { font-family: var(--font-num); font-size: 20px; color: var(--lime); }
.lf-live-banner i { font-style: normal; opacity: .7; font-weight: 600; font-size: 11.5px; }
.lf-live-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--lime); flex: none; box-shadow: 0 0 0 0 rgba(198,242,78,.6); animation: lfpulse 1.6s infinite; }
.lf-live-dot.sm { width: 7px; height: 7px; }
@keyframes lfpulse { 0% { box-shadow: 0 0 0 0 rgba(198,242,78,.55);} 70%{ box-shadow:0 0 0 7px rgba(198,242,78,0);} 100%{ box-shadow:0 0 0 0 rgba(198,242,78,0);} }

.lf-row.hasresult { border-color: rgba(255,255,255,.22); }
.lf-actual { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.lf-rscore { font-family: var(--font-num); font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
.lf-pts {
  font-family: var(--font-display); font-size: 12px; line-height: 1;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.lf-pts.win  { background: var(--gold);  color: #14141A; }
.lf-pts.bull { background: var(--lime);  color: #14141A; }
.lf-pts.zero { background: rgba(255,255,255,.1); color: #fff; opacity: .55; }

/* ——— Live ——— */
.live-hero {
  background:
    linear-gradient(150deg, var(--ink) 0%, #4a1850 48%, #7a1f4a 100%);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
  border: 2.5px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.live-hero::before {
  content: "";
  position: absolute; top: -70%; left: 50%; transform: translateX(-50%);
  width: 120%; height: 240%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,192,46,.13) 0deg 5deg, transparent 5deg 10deg);
  animation: spin 100s linear infinite;
}
.live-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(640px 320px at 50% -6%, rgba(255,90,31,.34), transparent 60%);
}
.live-hero > * { position: relative; }
.lh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  font-family: var(--font-text); font-weight: 800;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 6px 13px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-2);
}
.lh-score {
  font-family: var(--font-display);
  font-size: clamp(96px, 14vw, 200px);
  line-height: .86;
  letter-spacing: .005em;
  margin: 14px 0 16px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-shadow: 0 6px 0 rgba(0,0,0,.22);
}
.lh-flag { font-size: 0.34em; margin-right: 14px; vertical-align: .12em; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.lh-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.lh-stat {
  background: rgba(255,255,255,.09);
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 15px 16px;
}
.lh-stat .n { font-family: var(--font-display); font-size: 40px; letter-spacing: .01em; line-height: .9; font-variant-numeric: tabular-nums; }
.lh-stat .l { font-family: var(--font-text); font-weight: 800; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .7; margin-top: 8px; }
.lh-stat .sub { font-family: var(--font-text); font-weight: 700; font-size: 11px; color: var(--gold); margin-top: 5px; letter-spacing: .02em; }
.lh-stat.gold .n { color: var(--gold); }

.live-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-top: 22px; align-items: start; }

.section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; gap: 12px; }
.section-head h2 { font-family: var(--font-display); font-size: 28px; letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.section-head .meta { font-family: var(--font-text); font-weight: 700; font-size: 11px; letter-spacing: .06em; opacity: .6; text-transform: uppercase; }

.match-row {
  display: grid; grid-template-columns: 70px 1fr 1fr auto; gap: 12px; align-items: center;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 15px;
  margin-bottom: 9px;
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-text);
}
.match-row .mt { font-family: var(--font-text); font-weight: 800; font-size: 10.5px; letter-spacing: .05em; opacity: .6; text-transform: uppercase; }
.match-row .side { display: flex; align-items: center; gap: 8px; }
.match-row .side .em { font-size: 24px; }
.match-row .side .nm { font-family: var(--font-display); font-size: 15px; letter-spacing: .01em; text-transform: uppercase; }
.match-row .vs {
  font-family: var(--font-display); font-size: 26px; letter-spacing: .01em;
  display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.match-row .vs .sep { opacity: .3; }
.match-row .pred { font-family: var(--font-text); font-weight: 600; font-size: 11px; opacity: .6; letter-spacing: .02em; }
.match-row .pts {
  font-family: var(--font-display); font-size: 20px;
  background: var(--gold); color: var(--ink);
  padding: 6px 11px; border-radius: 11px;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 0 var(--gold-2);
}
.match-row .pts.zero { background: var(--paper-2); color: var(--ink); opacity: .55; box-shadow: none; }
.match-row .pts.bull { background: var(--coral); color: var(--paper); box-shadow: 0 2px 0 var(--orange-2); }
.match-row.boost { border-color: var(--pink-2); }
.match-row.boost .mt { color: var(--pink-2); opacity: 1; }

.league-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-text); font-size: 14px; color: #fff;
}
.league-row:last-child { border-bottom: 0; }
.league-row.you {
  background: rgba(198,242,78,.15);
  color: #fff;
  border-radius: 14px;
  border-bottom: 0;
  margin: 6px 0;
  border: 1px solid rgba(198,242,78,.45);
}
.league-row .rank { font-family: var(--font-display); font-size: 20px; letter-spacing: .01em; }
.league-row .nm { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; text-transform: uppercase; }
.league-row .nm small { font-family: var(--font-text); font-weight: 700; font-size: 10.5px; opacity: .6; letter-spacing: .03em; display: block; margin-top: 2px; text-transform: uppercase; }
.league-row.you .nm small { opacity: .85; color: #fff; }
.league-row .pts { font-family: var(--font-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.league-row.you .pts { color: var(--gold); }

/* ——— Leaderboard screen (glass v2) ——— */
.lb-screen { max-width: 760px; margin: 0 auto; width: 100%; }
.lb-head {
  margin-bottom: 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.lb-title {
  font-family: var(--font-display); font-size: clamp(28px, 6vw, 40px);
  letter-spacing: .01em; text-transform: uppercase; margin: 2px 0 0; line-height: 1; color: #fff;
}

/* Persistent invite-code chip — shown whenever a league is in view */
.lb-code-chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  margin-top: 6px;
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 6px 12px 6px 10px;
  cursor: pointer; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.lb-code-chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); transform: translateY(-1px); }
.lb-code-chip:active { transform: translateY(0); }
.lb-code-chip.copied { border-color: var(--lime); background: rgba(198,242,78,.15); }
.lb-code-chip-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  opacity: .65; font-family: var(--font-text); font-weight: 600;
}
.lb-code-chip-val {
  font-family: var(--font-display); font-size: 18px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1;
}
.lb-code-chip-icon { font-size: 13px; opacity: .8; }

/* Scope switcher (Global + league chips + add) */
.lb-scopes {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.lb-scope {
  cursor: pointer; border: 1.5px solid rgba(255,255,255,.28); background: var(--fill-glass);
  color: #fff; border-radius: 999px; padding: 9px 15px;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .01em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .1s ease, background .1s ease;
  display: inline-flex; align-items: center; gap: 7px;
}
.lb-scope:hover { transform: translateY(-1px); background: var(--fill-glass-2); }
.lb-scope:active { transform: translateY(0); }
.lb-scope small {
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  background: rgba(255,255,255,.16); color: #fff; border-radius: 999px;
  padding: 1px 7px; letter-spacing: 0;
}
.lb-scope.sel { background: #fff; color: var(--nation, var(--green)); border-color: #fff; }
.lb-scope.sel small { background: var(--nation, var(--green)); color: #fff; }
.lb-scope.add { border-style: dashed; }
.lb-scope.add.sel { border-style: solid; background: var(--lime); color: #14141A; border-color: var(--lime); }

/* Table wrapper + meta line */
.lb-table-wrap {
  background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 8px 14px 14px;
}
.lb-meta {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-text); font-weight: 700; font-size: 12px;
  opacity: .8; padding: 10px 2px 6px; letter-spacing: .01em;
}
.lb-meta strong { font-weight: 900; }
.lb-meta .lb-dot { opacity: .4; }
.lb-refresh {
  margin-left: auto; cursor: pointer; border: 1.5px solid rgba(255,255,255,.28);
  background: var(--fill-glass); color: #fff; border-radius: 9px;
  width: 30px; height: 30px; font-size: 15px; line-height: 1;
  transition: transform .1s ease;
}
.lb-refresh:hover { transform: rotate(45deg); }
.lb-refresh:active { transform: translateY(2px); }
.lb-rows { margin-top: 2px; }
.lb-gap {
  text-align: center; font-family: var(--font-display); font-size: 20px;
  opacity: .35; letter-spacing: .2em; padding: 2px 0;
}
.lb-crown { margin-left: 6px; font-size: 13px; vertical-align: middle; }
.lb-legend {
  margin: 12px 2px 0; font-family: var(--font-text);
  font-size: 11.5px; line-height: 1.5; opacity: .65; text-align: center;
}
.lb-legend strong { opacity: 1; }

/* Soft / empty / sign-in panels */
.lb-soft {
  text-align: center; background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 34px 26px; max-width: 520px; margin: 0 auto;
}
.lb-soft-emoji { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.lb-soft h3 {
  font-family: var(--font-display); font-size: 22px; letter-spacing: .01em;
  text-transform: uppercase; margin: 0 0 8px; color: #fff;
}
.lb-soft p {
  font-family: var(--font-text); font-size: 13.5px; line-height: 1.55;
  opacity: .8; margin: 0 auto 16px; max-width: 380px;
}

/* Manage panel (create / join / my leagues) */
.lb-manage-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;
}
.lb-form { padding: 16px; }
.lb-form-note {
  font-family: var(--font-text); font-size: 12px; line-height: 1.45;
  opacity: .7; margin: 6px 0 12px;
}
.lb-input {
  width: 100%; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.28); color: #fff; border-radius: 11px;
  padding: 11px 13px; font-family: var(--font-text); font-weight: 700;
  font-size: 15px; margin-bottom: 10px; outline: none;
}
.lb-input:focus { border-color: var(--lime); }
.lb-input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.lb-input::placeholder { color: rgba(255,255,255,.5); }
.lb-msg {
  background: rgba(0,0,0,.4); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px; padding: 10px 14px; margin-bottom: 12px;
  font-family: var(--font-text); font-weight: 700; font-size: 13px;
}
.lb-mylist {
  background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 16px; margin-bottom: 12px;
}
.lb-mylist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.lb-mylist-row:last-child { border-bottom: 0; }
.lb-ml-name {
  flex: 1; min-width: 0; font-family: var(--font-display); font-size: 15px;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.lb-ml-name small {
  display: block; font-family: var(--font-text); font-weight: 700;
  font-size: 10.5px; opacity: .6; letter-spacing: .02em; margin-top: 2px;
  text-transform: uppercase;
}
.lb-code {
  cursor: pointer; border: 1px solid transparent; background: var(--gold);
  color: #14141A; border-radius: 9px; padding: 6px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  font-size: 13px; letter-spacing: .1em;
  flex-shrink: 0;
}
.lb-code:active { transform: translateY(1px); }
.lb-leave {
  cursor: pointer; border: none; background: none; color: var(--lime);
  font-family: var(--font-text); font-weight: 800; font-size: 12px;
  letter-spacing: .02em; text-transform: uppercase; flex-shrink: 0;
}
.lb-leave:hover { text-decoration: underline; }
.lb-manage-foot { margin-top: 4px; }

@media (max-width: 560px) {
  .lb-manage-grid { grid-template-columns: 1fr; }
}

.xi-returns { padding: 18px; }
.xi-returns h3 { font-family: var(--font-display); font-size: 20px; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 12px; }

.empty-state { font-family: var(--font-text); font-weight: 600; font-size: 13px; opacity: .6; letter-spacing: .02em; padding: 22px; text-align: center; }

/* result pop + flash */
@keyframes pop {
  0%   { transform: scale(.8) rotate(-1deg); opacity: 0; }
  55%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.pop { animation: pop .6s cubic-bezier(.2,.8,.2,1) both; }

/* swap budget */
.swap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.swap-head h3 { margin: 0; font-family: var(--font-display); font-size: 20px; letter-spacing: .01em; text-transform: uppercase; }
.swap-pills { display: flex; align-items: center; gap: 6px; font-family: var(--font-text); font-weight: 800; font-size: 10.5px; letter-spacing: .04em; }
.swap-pill { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pitch); color: var(--paper); font-size: 11px; box-shadow: 0 2px 0 var(--pitch-2); }
.swap-pill.used { background: var(--paper-3); color: var(--ink); opacity: .6; box-shadow: none; }
.swap-count { margin-left: 4px; opacity: .7; text-transform: uppercase; }
.swap-blurb { font-size: 13px; font-weight: 500; line-height: 1.5; opacity: .78; margin: 4px 0 10px; }

.xi-block { padding: 13px 0; border-bottom: 2px dashed var(--paper-3); }
.xi-block:last-child { border-bottom: 0; }
.xi-block-head { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; }
.xi-block-name .nm { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; text-transform: uppercase; }
.xi-block-name .ev { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .6; letter-spacing: .03em; margin-top: 2px; text-transform: uppercase; }
.xi-block-head .pp { font-family: var(--font-display); font-size: 22px; color: var(--pitch-2); font-variant-numeric: tabular-nums; }
.swap-btn { padding: 7px 11px; font-size: 14px; }

.md-line-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.md-line {
  background: var(--paper-2);
  border-radius: 11px;
  padding: 9px 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--font-text); font-weight: 600; font-size: 12.5px;
  position: relative;
}
.md-line.cap { background: rgba(255,192,46,.26); box-shadow: 0 0 0 2px var(--gold) inset; }
.md-label { font-family: var(--font-display); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; flex-shrink: 0; }
.md-events { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .8; letter-spacing: .02em; text-align: center; flex: 1; }
.md-pts { font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.cap-mark-mini { color: var(--gold-2); font-size: 12px; }

/* ——— Swap modal ——— */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(39,16,51,0.62);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: grid; place-items: center;
  padding: 20px;
  animation: fadein .2s ease;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.modal {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 10px 0 var(--ink);
  padding: 24px;
  width: 100%; max-width: 560px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  animation: rise .25s cubic-bezier(.2,.7,.2,1) both;
}
.modal-head { display: flex; justify-content: space-between; align-items: baseline; }
.modal-head h3 { font-family: var(--font-display); font-size: 24px; letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.modal-x { appearance: none; background: transparent; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: var(--ink); }
.modal-sub { font-size: 13.5px; font-weight: 500; opacity: .72; margin: 6px 0 14px; line-height: 1.5; }
.modal-mds { display: flex; gap: 6px; margin-bottom: 14px; }
.modal-list { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px; }
.player-card.sm { padding: 10px; grid-template-columns: 38px 1fr auto; box-shadow: 0 3px 0 var(--ink); }
.player-card.sm .pc-flag { width: 38px; height: 38px; font-size: 21px; }
.player-card.sm .pc-name { font-size: 15px; }
.player-card.sm .pc-meta { font-size: 10px; }
.player-card.chosen { background: linear-gradient(135deg, var(--gold), #ffe08a); box-shadow: 0 4px 0 var(--gold-2); }
.player-card.chosen::after { content: "✓"; position: absolute; top: 7px; right: 10px; font-family: var(--font-display); color: var(--ink); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--paper-3); }

/* ——— History ——— */
.section-h3 { font-family: var(--font-display); font-size: 28px; letter-spacing: .01em; text-transform: uppercase; margin: 36px 0 16px; color: #fff; }
.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rec-card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  transition: transform .12s, border-color .12s;
}
.rec-card:hover { transform: translateY(-2px); border-color: rgba(198,242,78,.5); }
.rec-icon { font-size: 34px; margin-bottom: 8px; line-height: 1; }
.rec-title { font-family: var(--font-display); font-size: 19px; letter-spacing: .01em; text-transform: uppercase; margin-bottom: 7px; line-height: 1.05; }
.rec-body { font-size: 13.5px; font-weight: 500; line-height: 1.5; margin: 0; opacity: .78; }

.titles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.title-row {
  display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px;
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.title-row.elite { background: linear-gradient(135deg, rgba(198,242,78,.18), rgba(10,16,12,.78)); border-color: rgba(198,242,78,.45); }
.title-row.elite .t-name small { opacity: .85; color: var(--gold); }
.t-flag { font-size: 30px; line-height: 1; }
.t-name { font-family: var(--font-display); font-size: 18px; letter-spacing: .01em; text-transform: uppercase; }
.t-name small { font-family: var(--font-text); font-weight: 700; font-size: 11px; letter-spacing: .02em; opacity: .58; display: block; margin-top: 2px; text-transform: none; }
.t-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; }
.title-row.elite .t-stars { color: var(--gold); }
.t-num { font-family: var(--font-display); font-size: 26px; letter-spacing: .01em; min-width: 26px; text-align: right; color: var(--lime); }

.card.flat.past-card { padding: 4px 8px; overflow-x: auto; background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius); box-shadow: var(--shadow-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.past-tbl { width: 100%; border-collapse: collapse; font-family: var(--font-text); font-size: 13.5px; }
.past-tbl th { text-align: left; font-family: var(--font-text); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,.2); }
.past-tbl td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 500; }
.past-tbl tr:last-child td { border-bottom: 0; }
.past-tbl td.champ { font-family: var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--gold); }
.past-tbl td.runner { opacity: .75; }
.past-tbl td.score { font-family: var(--font-text); font-weight: 700; font-size: 12.5px; letter-spacing: .01em; }
.past-key { font-family: var(--font-text); font-weight: 600; font-size: 11px; opacity: .55; letter-spacing: .02em; padding: 8px 12px 14px; }

.card.flat.scorers-card { padding: 16px; background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius); box-shadow: var(--shadow-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.scorer-row { display: grid; grid-template-columns: 40px 34px 1fr 40px 1fr; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.16); }
.scorer-row:last-of-type { border-bottom: 0; }
.sc-rank { font-family: var(--font-display); font-size: 22px; letter-spacing: .01em; opacity: .5; }
.sc-flag { font-size: 24px; line-height: 1; }
.sc-name { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; text-transform: uppercase; display: flex; flex-direction: column; }
.sc-name small { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .55; letter-spacing: .02em; text-transform: none; }
.sc-active { display: inline-block; background: var(--lime); color: #0a100c; font-family: var(--font-text); font-weight: 800; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: 2px; }
.sc-goals { font-family: var(--font-display); font-size: 26px; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--gold); }
.sc-bar-wrap { background: rgba(255,255,255,.08); border-radius: 999px; height: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.sc-bar { height: 100%; background: linear-gradient(90deg, var(--lime), var(--gold)); }
.scorers-note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.16); font-family: var(--font-text); font-weight: 600; font-size: 11.5px; opacity: .6; letter-spacing: .02em; }

.ko-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ko-card { background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.ko-name { font-family: var(--font-display); font-size: 17px; letter-spacing: .01em; text-transform: uppercase; }
.ko-dates { font-family: var(--font-text); font-weight: 700; font-size: 11.5px; opacity: .6; letter-spacing: .02em; margin-top: 4px; color: var(--lime); }

/* ——— Site footer ——— */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 36px 22px 24px;
  margin-top: 60px;
  position: relative;
}
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--coral), var(--gold), var(--pitch), var(--teal), var(--blue), var(--pink)); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1200px; margin: 0 auto; }
.footer-cols > div { font-size: 13px; font-weight: 500; line-height: 1.6; }
.footer-cols p { margin: 6px 0 0; opacity: .78; }
.footer-cols a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; font-weight: 800; }
.ft-strong { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; text-transform: uppercase; }
.footer-base { max-width: 1200px; margin: 24px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-family: var(--font-text); font-weight: 600; font-size: 11px; opacity: .6; letter-spacing: .02em; text-align: center; }

/* ——— Confetti overlay ——— */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti-pc {
  position: absolute; top: -24px;
  width: 11px; height: 16px;
  will-change: transform, opacity;
  animation: confetti-fall var(--dur, 2.6s) var(--delay, 0s) cubic-bezier(.3,.6,.5,1) forwards;
  opacity: 0;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(108vh) rotate(720deg); opacity: 1; }
}

/* ——— Responsive ——— */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* stacked: the seam runs across the top instead of down the side */
  .flag-picker { border-left: none; border-top: 3px solid var(--ink); }
  .dxi-layout { grid-template-columns: 1fr; }
  .dxi-body { grid-template-columns: 1fr; }
  .xi-side { position: relative; top: 0; overflow-y: visible; }
  .live-grid { grid-template-columns: 1fr; }
  .rec-grid { grid-template-columns: 1fr 1fr; }
  .titles-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; gap: 18px; }
  .ko-grid { grid-template-columns: repeat(2, 1fr); }
  .dxi-head { grid-template-columns: 1fr; }
  .dxi-actions { justify-content: flex-start; }
  .locked-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar { padding: 11px 15px; gap: 12px; flex-wrap: wrap; }
  .steps { display: none; }
  .reset-btn { display: none; }
  .screen { padding: 24px 14px 140px; }
  .kicker-row { grid-template-columns: repeat(3, 1fr); }
  .kicker .n { font-size: 28px; }
  .kicker .l { font-size: 9.5px; }
  .match-grid { grid-template-columns: 1fr; }
  .player-grid { grid-template-columns: 1fr; }
  .dxi-find { flex-wrap: wrap; }
  .dxi-nat { max-width: none; flex: 1 1 calc(60% - 4px); padding: 10px 30px 10px 15px; }
  .dxi-sort { flex: 1 1 calc(40% - 4px); padding: 10px 30px 10px 15px; }
  .predict-head { gap: 10px; }
  .predict-actions { width: 100%; flex-wrap: wrap; }
  .md-bar { gap: 8px; }
  .team .nm { font-size: 14px; }
  .pmatch-row { grid-template-columns: 26px 1fr auto 1fr 14px; gap: 6px; padding: 6px 9px; }
  .pmr-team .nm { font-size: 12.5px; }
  .lf-toggle { gap: 9px; padding: 13px 14px; }
  .lf-toggle-title { font-size: 14px; }
  .lf-toggle-meta { display: none; }
  .lf-body { padding: 12px; }
  .lf-row { grid-template-columns: 34px 1fr auto 1fr auto; gap: 6px; padding: 6px 9px; }
  /* pre-tournament the kickoff date is least essential on narrow screens;
     keep the result column so real scores + points stay visible once live */
  .lf-date { display: none; }
  .lf-rscore { font-size: 14px; }
  .lf-pts { font-size: 11px; padding: 2px 5px; }
  .lf-team .nm { font-size: 12.5px; }
  .lf-team .em { font-size: 17px; }
  .ec-stat .n { font-size: 26px; }
  .confirm-grid { grid-template-columns: 1fr; }
  .lh-row { grid-template-columns: repeat(2, 1fr); }
  .match-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .match-row .mt { grid-column: 1 / -1; }
  .match-row .pred { grid-column: 1 / -1; }
  .rec-grid { grid-template-columns: 1fr; }
  .modal-list { grid-template-columns: 1fr; }
  .hero-left { padding: 20px; }
}

/* ============================================================ */
/* STAR XI — BRAND v2 · STEP SHELL + GLASS LANGUAGE             */
/* Fixed top-centre lockup, 100vh paged steps, glass pills.     */
/* Loaded last so it re-skins the primitives above by source    */
/* order without touching every per-screen rule.               */
/* ============================================================ */

/* ——— Fixed brand lockup — the anchor every screen is built around ——— */
.brand-lockup {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 4px;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: #fff;
  pointer-events: none;          /* never block the scene behind it… */
}
.brand-lockup.is-link { pointer-events: auto; cursor: pointer; }
.brand-lockup.is-link:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; border-radius: 10px; }
.bl-crest {
  display: block;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,0.42));
  transition: transform .14s var(--ease);
  /* v2 mark aspect ratio is 340/309 — sits above the STAR XI wordmark */
  width: 56px;
  aspect-ratio: 340 / 309;
  position: relative;
  image-rendering: -webkit-optimize-contrast;
}
.brand-lockup.is-link:hover .bl-crest { transform: scale(1.05); }

/* ——— Animated v2 mark: shimmer → breathe → spark → rest, in white ——— */
/* The base PNG silhouette is masked by the shine/glow layers so the sheen
   only paints inside the mark, never the surrounding box. Glow is white
   (not the brand-book gold) so the lockup reads as a clean chalk anchor
   on every nation field. */
.sxanim {
  --sx-logo: url('../brand/star-xi-white.png');
  display: inline-block;
  animation: sx-breath 5.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.sxanim .base {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.sxanim .glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 42%, rgba(255,255,255,0.85), transparent 70%);
  -webkit-mask: var(--sx-logo) center/contain no-repeat;
          mask: var(--sx-logo) center/contain no-repeat;
  opacity: 0;
  animation: sx-glow 5.6s ease-in-out infinite;
  pointer-events: none;
}
.sxanim .shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.95) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 165% 0;
  -webkit-mask: var(--sx-logo) center/contain no-repeat;
          mask: var(--sx-logo) center/contain no-repeat;
  animation: sx-shine 5.6s cubic-bezier(.5,0,.2,1) infinite;
  pointer-events: none;
}
.sxanim .spark {
  position: absolute; left: 43.5%; top: 4%;
  width: 9%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: sx-spark 5.6s ease-out infinite;
  pointer-events: none;
}
.sxanim .spark::before,
.sxanim .spark::after {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.95);
  clip-path: polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.sxanim .spark::after { transform: scale(0.5) rotate(45deg); }
@keyframes sx-breath {
  0%, 100% { transform: scale(1); }
  46% { transform: scale(1.035); }
  62% { transform: scale(1.01); }
}
@keyframes sx-shine {
  0%, 42% { background-position: 165% 0; }
  66% { background-position: -65% 0; }
  100% { background-position: -65% 0; }
}
@keyframes sx-glow {
  0%, 40% { opacity: 0; }
  54% { opacity: 1; }
  74% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sx-spark {
  0%, 50% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(35deg); }
  74% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(70deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(70deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sxanim,
  .sxanim .shine,
  .sxanim .glow,
  .sxanim .spark { animation: none !important; }
  .sxanim { transform: none; }
  .sxanim .glow { opacity: 0; }
}
/* STAR XI wordmark — kept beneath the v2 mark for brand recall while the
   product is still establishing recognition. Drop later once the mark
   stands on its own. */
.bl-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: .05em; line-height: 1;
  text-shadow: 0 2px 22px rgba(0,0,0,0.38);
}
.bl-sub {
  font-family: var(--font-text);
  font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  opacity: .78;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* ——— The 100vh step shell ——— */
.step-shell {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  position: relative;
  z-index: 1;
  /* The shell itself must NEVER scroll — only the inner panes (.step-scroll,
     .xi-side, .player-grid) do, and they're clipped below the fixed chrome.
     Without this the `overflow-x:hidden` rule elsewhere computes overflow-y to
     `auto`, so a content overflow or an iOS rubber-band could scroll the entire
     shell — sliding the tabs and pitch up BEHIND the header. Hard no. The fixed
     chrome and the ::before scrim escape this clip (their containing block is the
     viewport), so they still paint normally. */
  overflow: hidden;
}
/* ——— Top-chrome scrim ——— */
/* The fixed brand lockup + step badges + utility cluster are translucent glass
   with gaps between them. On phones any pane content that scrolls up into that
   zone (a list overscrolling, a tall pitch, a round's intro) used to show THROUGH
   the gaps. This fixed layer paints the nation field across the whole chrome band
   so content dissolves into it instead — a hard guarantee that nothing is ever
   legible behind the header, on every browser. It sits above the panes (z1) and
   below the chrome itself (z60); the bottom edge fades so there's no seam, and it
   clears out the moment the chrome auto-hides on scroll. */
@media (max-width: 640px) {
  .step-shell::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(96px + max(14px, env(safe-area-inset-top, 0px)));
    z-index: 40;
    pointer-events: none;
    background:
      radial-gradient(135% 90% at 50% -20%, rgba(255,255,255,.12) 0%, transparent 52%) top center / 100vw 100vh no-repeat,
      var(--nation, #15161B);
    /* Solid almost to the bottom (covering the full chrome band) with only a
       short fade where the round content begins, so nothing is half-lit. */
    -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
    transition: opacity .22s ease;
  }
  .step-shell.is-scrolled::before { opacity: 0; }
}
/* huge ghost nation nickname behind the content, like the landing */
.shell-ghost {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; user-select: none; z-index: 0;
  overflow: hidden;
}
.shell-ghost span {
  font-family: var(--font-display);
  font-size: clamp(96px, 22vh, 240px);
  line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase; white-space: nowrap;
  color: #fff; opacity: .07;
}

/* progress tracker — left shoulder, aligned with the lockup */
.shell-progress {
  position: fixed; top: 20px; left: 16px; z-index: 60;
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px; row-gap: 5px;
  /* Hard anti-overlap guard: the tracker is pinned to the left shoulder while
     the brand lockup is centred. Capping its width to (half the viewport −
     the lockup's half-width − breathing room) means the pills can NEVER reach
     the logo at any width — they wrap downward instead of bleeding into it. */
  max-width: calc(50vw - 108px);
}
.sp-step {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--pill);
  background: var(--fill-glass);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff;
  font-family: var(--font-text);
  font-weight: 700; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .12s var(--ease), background .15s, opacity .15s;
}
.sp-step:disabled { cursor: not-allowed; opacity: .38; }
.sp-step:not(:disabled):hover { transform: translateY(-1px); background: var(--fill-glass-2); }
.sp-step .sp-num { font-family: var(--font-display); font-size: 12px; letter-spacing: .02em; }
.sp-step.active {
  background: #fff; color: var(--nation, var(--green));
  border-color: #fff;
}
.sp-step.done { opacity: .85; }
.sp-step.done .sp-num { color: var(--lime); }

/* utility cluster — right shoulder */
.shell-topright {
  position: fixed; top: 18px; right: 14px; z-index: 60;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px;
}
.shell-util {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--pill);
  background: var(--fill-glass);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff;
  font-family: var(--font-text);
  font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .12s var(--ease), background .15s;
}
.shell-util:hover { transform: translateY(-1px); background: var(--fill-glass-2); }
.shell-util.on { background: #fff; color: var(--nation, var(--green)); border-color: #fff; }
.shell-util.ghost { background: transparent; }

/* the single-viewport body: clears the lockup, holds the screen.
   Top padding must clear the full fixed brand lockup (crest + STAR XI
   wordmark + WORLD CUP 2026 sub-line) so wide page titles on Confirm /
   Live don't slide behind it. The lockup totals ~130-135px tall at the
   default clamp, so 144px leaves a clean ~10px gap. */
.shell-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
  padding: 144px 20px 0;
  width: 100%; max-width: 1180px; margin: 0 auto;
}

/* screens fill the body: a scroll region + a pinned action foot */
.step-screen {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  animation: rise .5s var(--ease) both;
}
.step-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  /* Keep touch scrolls inside this pane — without it, iOS/Android chain the
     overscroll up to .step-shell and slide content behind the fixed chrome. */
  overscroll-behavior: contain;
  /* offsetParent for the round-title scroll positioning in Predict. */
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.step-scroll::-webkit-scrollbar { width: 8px; }
.step-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }
.step-foot {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 8px;
}
.step-foot .grow { flex: 1; }
.step-foot .foot-note {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: #fff; opacity: .7;
}
.step-foot .cta-arrows {
  font-size: 18px; font-weight: 900; line-height: 1;
  color: #fff; opacity: .55;
  letter-spacing: -4px;
  pointer-events: none; user-select: none;
}
/* Foot action pills never wrap: a long primary label like "Road to Final →"
   stays a single-line pill so all the buttons read as one consistent set,
   instead of one chunky multi-line block beside the slim ghost buttons. */
.step-foot .pill { white-space: nowrap; }

/* ——— Glass pills — the core button language ——— */
.pill {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--pill);
  border: var(--border-glass);
  background: var(--fill-glass);
  color: #fff;
  font-family: var(--font-text);
  font-weight: 700; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  transition: transform .14s var(--ease), background .16s, box-shadow .16s, opacity .16s;
}
.pill:hover { transform: translateY(-2px); background: var(--fill-glass-2); }
.pill:active { transform: translateY(0); }
.pill:disabled { cursor: not-allowed; opacity: .4; transform: none; box-shadow: none; }
.pill.primary { background: #fff; color: var(--nation, var(--green)); border-color: #fff; }
.pill.primary:hover { background: #fff; filter: brightness(.97); }
.pill.ghost { background: transparent; box-shadow: none; }
.pill.sm { padding: 10px 16px; font-size: 12px; }

/* ——— Re-skin the legacy primitives into the glass language ——— */
/* Every screen still uses .btn / .card; these overrides (last in source
   order) re-dress them for the dark nation field without per-screen edits. */
.btn {
  border: var(--border-glass);
  background: var(--fill-glass);
  color: #fff;
  border-radius: var(--pill);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .12em;
  padding: 13px 22px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn:hover { transform: translateY(-2px); background: var(--fill-glass-2); box-shadow: 0 16px 34px rgba(0,0,0,0.26); filter: none; }
.btn:active { transform: translateY(0); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.btn:disabled { opacity: .4; box-shadow: none !important; filter: none; }
.btn.gold, .btn.green {
  background: #fff; color: var(--nation, var(--green)); border-color: #fff;
}
.btn.gold:hover, .btn.green:hover { background: #fff; filter: brightness(.97); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.sm { padding: 9px 15px; font-size: 12px; border-radius: var(--pill); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.btn.sm:hover, .btn.sm:active { box-shadow: 0 12px 24px rgba(0,0,0,.22); }

.card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius);
  color: #fff;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.card.dark { background: var(--glass-dark-2); }
.card.cream { background: rgba(255,255,255,.08); }

/* type on the dark field */
.lede { color: inherit; opacity: .82; }
.eyebrow {
  background: var(--fill-glass);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.eyebrow::before { background: var(--lime); }

/* inputs on the dark field */
.dxi-search, .fp-search {
  background: rgba(0,0,0,.28);
  border: 1.5px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: var(--pill);
}
.dxi-search::placeholder { color: rgba(255,255,255,.5); }
.dxi-search:focus, .fp-search:focus { border-color: var(--lime); outline: none; }

@media (max-width: 880px) {
  .shell-body { padding-top: 128px; }
  .shell-ghost span { opacity: .055; }
}
@media (max-width: 640px) {
  /* shoulders are too tight on phones: collapse progress to numbers and
     drop utility labels so nothing collides with the centred lockup */
  .shell-progress { max-width: 40vw; gap: 4px; }
  .sp-step { padding: 6px 8px; }
  .sp-step .sp-label { display: none; }
  .shell-util span { display: none; }
  .shell-util { padding: 7px 9px; }
  .bl-name { font-size: 22px; }
  .bl-sub { font-size: 9px; letter-spacing: .2em; }
  /* Brand lockup extends to ~100px; 2-row topright to ~91px. 128px gives a
     comfortable 28px gap between chrome and the first line of screen content. */
  .shell-body { padding: 128px 14px 0; }
}

/* ——— Global music player (bottom-right) ——— */
@keyframes mpEqBar     { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes mpHintPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
@keyframes mpPopIn     { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.mp-btn {
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; background: transparent; color: #fff;
  transition: transform 120ms ease, background 160ms ease, opacity 160ms;
}
.mp-btn:hover  { transform: scale(1.08); }
.mp-btn:active { transform: scale(0.94); }

input[type=range].mp-range {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.28); outline: none; cursor: pointer;
}
input[type=range].mp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 99px;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); cursor: pointer;
}
input[type=range].mp-range::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 99px;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35); cursor: pointer;
}

/* ——— Music player: top-right corner on mobile/tablet ——— */
/* On the Welcome screen (no topright slot) the standalone buttons dock just
   below the top-right header. On every flow screen the buttons are portaled
   into #shell-mp-slot instead (see the tablet/mobile block below), which hides
   this standalone row and repositions the popover. The ceiling matches the
   rest of the compact chrome so iPads / Android tablets behave like phones. */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  .mp-root:not(.mp-has-slot) {
    top: 104px !important;
    right: 10px !important;
    bottom: auto !important;
    flex-direction: column-reverse !important;
    align-items: flex-end !important;
  }
  .mp-root:not(.mp-has-slot) > div:last-child { gap: 6px !important; }
  .mp-root:not(.mp-has-slot) > div:last-child > button {
    width: 34px !important;
    height: 34px !important;
  }
}
@media (max-width: 640px) {
  .mp-root:not(.mp-has-slot) { top: 103px !important; right: 14px !important; }
  .mp-root:not(.mp-has-slot) > div:last-child { gap: 5px !important; }
  .mp-root:not(.mp-has-slot) > div:last-child > button {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Shell-mp-slot: invisible on desktop; display:contents on tablet & mobile so
   the portaled shell-util buttons participate directly in the topright flexbox,
   forming row 2 of the icon grid (music · mute) — the SAME placement on tablets
   as on phones: tucked under Sign-in / Reset, never the bottom corner. */
/* On WEB the music + mute buttons sit on their own row directly beneath the
   Leaderboard / profile / reset cluster — width:100% forces the wrap — so the
   player lives in the top-right corner just like on mobile & tablet, never the
   bottom corner. (:empty collapses the row before the buttons portal in.) The
   tablet/mobile block below switches the slot to display:contents for the grid. */
.shell-mp-slot {
  display: flex; width: 100%; justify-content: flex-end; gap: 7px; margin-top: 7px;
}
.shell-mp-slot:empty { display: none; }
/* With the buttons living in the top-right slot, hide the floating bottom-right
   pair and dock the "Now playing" popover just under the cluster. */
.mp-root.mp-has-slot > div:last-child { display: none !important; }
.mp-root.mp-has-slot {
  top: 92px !important; right: 14px !important; bottom: auto !important;
  flex-direction: column !important; align-items: flex-end !important;
}
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  .shell-mp-slot { display: contents; }
  /* With the buttons living in the slot, hide the standalone bottom row and
     dock the "Now playing" popover just under the topright cluster. */
  .mp-root.mp-has-slot > div:last-child { display: none !important; }
  .mp-root.mp-has-slot {
    top: 62px !important;
    right: 14px !important;
    bottom: auto !important;
    flex-direction: column !important;
    align-items: flex-end !important;
  }
}

/* ——— Auto-hide header chrome on mobile when scrolled ——— */
/* When the user scrolls the player list / content on a phone, the fixed
   brand lockup, step tracker and utility cluster slide away so the full
   screen is usable. They return the moment the user scrolls back to top. */
@media (max-width: 640px) {
  .shell-progress,
  .shell-topright {
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .step-shell.is-scrolled .shell-progress {
    opacity: 0;
    transform: translateY(-56px);
    pointer-events: none;
  }
  .step-shell.is-scrolled .shell-topright {
    opacity: 0;
    transform: translateY(-56px);
    pointer-events: none;
  }
  /* Shrink the brand lockup to a slim strip so content can scroll underneath */
  .brand-lockup {
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .step-shell.is-scrolled .brand-lockup {
    opacity: 0;
    transform: translateY(-56px);
    pointer-events: none;
  }
  /* Reduce the gap at the top of shell-body once chrome is hidden */
  .step-shell.is-scrolled .shell-body {
    padding-top: 14px;
    transition: padding-top 0.22s ease;
  }
  /* Hide music player (rendered outside step-shell) when scrolled */
  body.shell-is-scrolled .mp-root {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-56px) !important;
  }
  .mp-root {
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
}

/* ——— Step tracker: compact numbers-only grid on tablet & mobile ——— */
/* Any viewport ≤1024px, plus any touch device up to iPad-Pro-landscape width,
   gets the same compact tracker as mobile so it never crowds the centred logo.
   Desktop (fine pointer, >1024px) keeps the labelled single row. */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  .shell-progress {
    flex-wrap: wrap;
    max-width: 110px;
    gap: 4px;
    row-gap: 4px;
  }
  .sp-step .sp-label { display: none; }
  .sp-step { padding: 6px 9px; }
}

/* ——— Utility cluster: 3+3 icon grid at ≤768px ——— */
/* Row 1: Leaderboard · Profile · Reset  (3 icons, ~112px)
   Row 2: History · Music · Mute         (3 icons, ~112px — music pair portaled via #shell-mp-slot)
   max-width 138px fits exactly 3 × ~34px + 2 × 5px = 112px per row and
   leaves a safe gap to the centred brand lockup. auth-signin goes icon-only
   so it matches the ~34px width of the other shell-util buttons. */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  .shell-util span { display: none; }
  .shell-util { padding: 7px 10px; font-size: 15px; }
  .shell-topright {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 138px;
    gap: 5px;
    row-gap: 5px;
  }
  /* Row 2 order: History first, then music, then mute */
  .shell-util-history { order: 10; }
  .shell-util-music   { order: 11; }
  .shell-util-mute    { order: 12; }
  /* auth-signin: icon-only to match ~34px shell-util width.
     "Sign in" text is still in the DOM for screen readers. */
  .auth-signin {
    padding: 7px 9px;
    font-size: 0;
    line-height: 0;
    min-width: 34px;
    text-align: center;
    position: relative;
  }
  .auth-signin::after {
    content: "👤";
    font-size: 16px;
    line-height: 1;
    display: block;
  }
}

/* ——— Reset confirm popup ——— */
.shell-reset-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.shell-reset-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  min-width: 148px;
  background: rgba(8,19,13,.96);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 14px;
  padding: 12px 14px 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: rise .2s var(--ease) both;
}
.shell-reset-pop p {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.srp-btns {
  display: flex;
  gap: 6px;
}
.srp-yes, .srp-no {
  flex: 1;
  appearance: none; cursor: pointer;
  border-radius: var(--pill);
  padding: 7px 10px;
  font-family: var(--font-text);
  font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: transform .1s, opacity .1s;
}
.srp-yes {
  background: #fff; color: var(--nation, var(--green));
  border: 1.5px solid #fff;
}
.srp-yes:hover { opacity: .9; transform: translateY(-1px); }
.srp-no {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}
.srp-no:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }

/* ============================================================ */
/* ROAD TO THE FINAL · Predict screen v2                        */
/* Group ladders + click-through bracket + champion reveal.     */
/* Single-viewport: each sub-step fits in the .step-scroll      */
/* without page scroll; the foot bar walks Back / Next.          */
/* ============================================================ */

.rtf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
/* Past the group stage the intro is dropped, so the head is just the action
   row — let it sit flush-left and hug the top so the round's own title leads. */
.rtf-head.no-intro { margin-bottom: 10px; }
.rtf-head.no-intro .rtf-head-actions { justify-content: flex-start; }
.rtf-head .ph-titles { min-width: 0; }
.rtf-head .title { margin: 4px 0; }
.rtf-head .lede { font-size: 14px; max-width: 64ch; }
.rtf-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Global actions relocated to the bottom of the pane (below the progress strip)
   so the round title always leads. A rule above separates them; centred so they
   read as a deliberate toolbar, not leftover header. */
.rtf-actions-bottom {
  justify-content: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* Progress strip ------------------------------------------------ */
.rtf-progress {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 6px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rtf-progress-row { display: flex; align-items: center; gap: 12px; }
.rtf-prog-label {
  font-family: var(--font-text); font-weight: 800;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  opacity: .65; min-width: 80px;
}
.rtf-prog-cells { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.rtf-dot {
  appearance: none; cursor: pointer; border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.06); color: #fff;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .05em;
  border-radius: 8px; padding: 5px 9px; min-width: 28px;
  transition: background .14s, transform .12s, border-color .14s;
}
.rtf-dot:hover:not(:disabled) { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.rtf-dot.done { border-color: rgba(198,242,78,.55); background: rgba(198,242,78,.14); color: var(--lime); }
.rtf-dot.active { background: #fff; color: var(--nation, var(--green)); border-color: #fff; transform: translateY(-1px); }
.rtf-dot.active.done { background: #fff; color: var(--nation, var(--green)); }
.rtf-dot.locked { opacity: .35; cursor: not-allowed; }
.rtf-dot.ko { min-width: 38px; }

/* Sub-step header ---------------------------------------------- */
.rtf-body { animation: rise .35s var(--ease) both; }
.rtf-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rtf-subtitle {
  font-family: var(--font-display); font-size: 28px; letter-spacing: .03em;
  text-transform: uppercase; margin: 0; line-height: 1;
}
.rtf-subcount {
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; opacity: .7;
}

/* Group ladder -------------------------------------------------- */
.rtf-group { display: flex; flex-direction: column; gap: 12px; }
.rtf-podium { display: flex; flex-direction: column; gap: 8px; }
.rtf-slot {
  appearance: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 88px 36px 1fr auto 22px; align-items: center; gap: 12px;
  background: var(--glass-dark);
  border: 1.5px solid rgba(255,255,255,.16);
  border-left-width: 5px;
  border-radius: 12px;
  padding: 11px 14px; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .14s, border-color .14s, transform .12s;
}
.rtf-slot.filled:hover { background: rgba(255,255,255,.1); }
.rtf-slot.empty { border-style: dashed; opacity: .85; cursor: default; grid-template-columns: 88px 1fr; }
.rtf-slot.pos-1 { border-left-color: var(--gold); }
.rtf-slot.pos-2 { border-left-color: rgba(255,255,255,.55); }
.rtf-slot.pos-3 { border-left-color: rgba(233,185,73,.55); }
.rtf-slot.pos-4 { border-left-color: rgba(255,255,255,.18); }
.rtf-slot.qualifies.filled { background: rgba(198,242,78,.06); }
.rtf-slot.wildcard.filled  { background: rgba(233,185,73,.06); }
.rtf-slot.mine.filled { box-shadow: inset 0 0 0 1px rgba(233,185,73,.4); }

.rtf-pos { display: flex; align-items: center; gap: 8px; }
.rtf-pos-medal { font-size: 22px; line-height: 1; }
.rtf-pos-lab {
  font-family: var(--font-display); font-size: 16px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .85;
}
.rtf-flag { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.rtf-team-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rtf-name {
  font-family: var(--font-display); font-size: 17px; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rtf-rank { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .6; }
.rtf-tag {
  font-family: var(--font-text); font-weight: 800; font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.14); color: #fff;
  padding: 4px 9px; border-radius: 999px;
}
.rtf-slot.qualifies .rtf-tag { background: rgba(198,242,78,.22); color: var(--lime); }
.rtf-slot.wildcard  .rtf-tag { background: rgba(233,185,73,.22); color: var(--gold); }
.rtf-x { font-family: var(--font-display); font-size: 18px; opacity: .35; text-align: right; }
.rtf-slot:hover .rtf-x { opacity: .8; }
.rtf-empty-hint {
  font-family: var(--font-text); font-weight: 600; font-size: 13px;
  opacity: .55; letter-spacing: .02em;
}

.rtf-pool-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px;
  font-family: var(--font-text); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; opacity: .7;
}
.rtf-pool { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rtf-pool-team {
  appearance: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 11px;
  padding: 9px 12px; color: #fff;
  transition: background .14s, transform .12s, border-color .14s, opacity .14s;
}
.rtf-pool-team:hover:not(:disabled) { background: rgba(255,255,255,.18); transform: translateY(-1px); border-color: rgba(255,255,255,.4); }
.rtf-pool-team.used { opacity: .28; cursor: not-allowed; }
.rtf-pool-team.mine { border-color: rgba(233,185,73,.55); }
.rtf-pool-team .rtf-flag { font-size: 24px; }
.rtf-pool-team .rtf-name { font-size: 14px; }
.rtf-pool-team .rtf-rank { font-size: 10px; }
.rtf-boost {
  font-family: var(--font-text); font-weight: 800; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold); color: #1a1205;
  padding: 3px 7px; border-radius: 999px;
}

/* Per-team point badges — what the slot/pick is worth if right. */
.rtf-slot-pts {
  font-family: var(--font-display); font-size: 12px;
  background: rgba(198,242,78,.22); color: var(--lime);
  padding: 3px 8px; border-radius: 999px;
  letter-spacing: .03em;
}
.rtf-slot-pts.mine  { background: rgba(233,185,73,.26); color: var(--gold); }
.rtf-slot-pts.ghost { background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); }

/* Drag-drop cues during reorder */
.rtf-slot[draggable="true"] { cursor: grab; }
.rtf-slot[draggable="true"]:active { cursor: grabbing; }
.rtf-slot.dragging { opacity: .35; }
.rtf-slot.drop-target {
  border-color: var(--lime);
  background: rgba(198,242,78,.1);
  box-shadow: 0 0 0 2px rgba(198,242,78,.18);
}

/* ── Group header ── */
.rtf-grouphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rtf-gh-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rtf-gh-r { display: flex; align-items: center; gap: 8px; }

/* ── Pool (on top) ── */
.rtf-poolwrap { margin-bottom: 14px; }
.rtf-poolcue { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.rtf-poolcue-n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; flex: 0 0 auto;
  background: var(--lime); color: var(--ink); font-family: var(--font-display); font-size: 14px;
}
.rtf-poolcue-t { font-family: var(--font-text); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--chalk); }
.rtf-poolcue-t strong { color: var(--lime); }
.rtf-pool-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.rtf-pchip {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px;
  background: var(--glass-dark); border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 14px; padding: 12px 13px; min-height: 60px;
  color: #fff;
  transition: transform .12s, border-color .14s, background .14s, opacity .2s;
}
.rtf-pchip:hover:not(:disabled) { border-color: var(--chalk); transform: translateY(-2px); }
.rtf-pchip.seated { opacity: .34; pointer-events: none; border-style: dashed; }
.rtf-pool-top.all-done .rtf-pchip { opacity: .34; }
.rtf-pchip-flag { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.rtf-pchip-info { min-width: 0; flex: 1; }
.rtf-pchip-info b { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
.rtf-pchip-info span { font-size: 11px; color: rgba(243,241,233,.6); letter-spacing: .04em; }
.rtf-pchip-tag { margin-left: auto; font-family: var(--font-display); font-size: 13px; color: var(--lime); flex: 0 0 auto; }
.rtf-pchip.mine { border-color: rgba(233,185,73,.55); }

/* ── Ladder (one solid bordered container) ── */
.rtf-ladder {
  background: var(--glass-dark); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: var(--r-md); overflow: hidden;
}
.rtf-ladder-head {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.rtf-ladder-title { font-family: var(--font-text); font-weight: 800; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,241,233,.65); }
.rtf-ladder-legend { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.rtf-ladder-legend i { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,241,233,.65); font-style: normal; }
.rtf-ladder-legend i b { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ── Ladder rows ── */
.rtf-lrow {
  display: flex; align-items: center; gap: clamp(10px,1.6vw,16px); position: relative;
  padding: clamp(11px,1.6vw,15px) clamp(12px,2vw,20px); min-height: 62px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: background .15s;
}
.rtf-lrow:last-child { border-bottom: none; }
/* left rail */
.rtf-lrow-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.rtf-lrow.q1 .rtf-lrow-rail { background: var(--gold); }
.rtf-lrow.q2 .rtf-lrow-rail { background: rgba(255,255,255,.55); }
.rtf-lrow.q3 .rtf-lrow-rail { background: rgba(233,185,73,.55); }
/* position chip */
.rtf-lrow-pos { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; width: 62px; }
.rtf-lrow-medal { font-size: 20px; line-height: 1; width: 22px; text-align: center; }
.rtf-lrow-rank { font-family: var(--font-display); font-size: clamp(14px,1.7vw,18px); letter-spacing: .03em; }
/* filled row */
.rtf-lrow-flag { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.rtf-lrow-info { flex: 1; min-width: 0; }
.rtf-lrow-info b { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(15px,1.9vw,20px); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
.rtf-lrow-info span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(243,241,233,.6); }
.rtf-lrow-badge { font-family: var(--font-text); font-weight: 800; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; flex: 0 0 auto; }
.rtf-lrow-badge.through { color: var(--lime); background: rgba(198,242,78,.12); border: 1px solid rgba(198,242,78,.35); }
.rtf-lrow-badge.maybe   { color: var(--gold); background: rgba(233,185,73,.12); border: 1px solid rgba(233,185,73,.35); }
.rtf-lrow-badge.out     { color: rgba(243,241,233,.65); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.rtf-lrow-pts { font-family: var(--font-display); font-size: 14px; color: var(--lime); background: rgba(198,242,78,.12); border: 1px solid rgba(198,242,78,.3); border-radius: 7px; padding: 3px 8px; flex: 0 0 auto; }
.rtf-lrow-pts.x2 { color: var(--gold); background: rgba(233,185,73,.16); border-color: rgba(233,185,73,.4); }
.rtf-lrow.austria { background: rgba(233,185,73,.07); }
/* controls */
.rtf-lrow-ctrls { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.rtf-iconbtn {
  appearance: none; cursor: pointer;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff;
  font-size: 13px; line-height: 1;
  transition: background .14s, border-color .14s;
}
.rtf-iconbtn:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.rtf-iconbtn:disabled { opacity: .28; cursor: not-allowed; }
.rtf-iconbtn.x:hover { background: rgba(224,35,59,.22); border-color: rgba(224,35,59,.5); color: #ffb3bd; }
.rtf-lrow-grip { cursor: grab; color: rgba(243,241,233,.35); font-size: 16px; width: 18px; text-align: center; flex: 0 0 auto; }
.rtf-lrow.dragging { opacity: .5; }
.rtf-lrow.drop-target { background: rgba(198,242,78,.1); box-shadow: inset 0 0 0 2px rgba(198,242,78,.5); }
/* empty row */
.rtf-lrow.empty .rtf-lrow-drop {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  border: 1.5px dashed rgba(255,255,255,.22); border-radius: 11px;
  padding: 9px 13px; color: rgba(243,241,233,.65);
  font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.rtf-lrow.empty.next .rtf-lrow-drop { border-color: var(--lime); color: var(--chalk); background: rgba(198,242,78,.06); }
.rtf-drop-arrow { color: var(--lime); font-size: 14px; animation: rtf-nudge 1.1s ease-in-out infinite; }
@keyframes rtf-nudge { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.rtf-lrow.empty.last .rtf-lrow-drop { opacity: .5; }

/* helpline */
.rtf-helpline {
  margin-top: 14px; font-family: var(--font-text); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: rgba(243,241,233,.65);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rtf-helpline b { color: var(--chalk); }

/* Responsive */
@media (max-width: 760px) { .rtf-pool-top { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .rtf-pchip { padding: 10px 11px; min-height: 54px; gap: 9px; border-radius: 12px; }
  .rtf-pchip-flag { font-size: 21px; }
  .rtf-pchip-info b { font-size: 14px; }
  .rtf-lrow { gap: 9px; padding: 10px 11px 10px 13px; min-height: 58px; }
  .rtf-lrow-pos { width: auto; gap: 6px; }
  .rtf-lrow-medal { font-size: 17px; width: 18px; }
  .rtf-lrow-rank { font-size: 13px; }
  .rtf-lrow-flag { font-size: 18px; }
  .rtf-lrow-info b { font-size: 15px; }
  .rtf-lrow-badge { padding: 5px 8px; font-size: 8.5px; }
  .rtf-lrow-pts { font-size: 12px; padding: 2px 6px; }
  .rtf-iconbtn { width: 36px; height: 36px; }
  .rtf-lrow-grip { display: none; }
}
@media (max-width: 380px) { .rtf-lrow-pts { display: none; } .rtf-lrow-info span { display: none; } }

/* Best 3rd-Placed picker --------------------------------------- */
.rtf-thirds { display: flex; flex-direction: column; gap: 14px; }
.rtf-thirds-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rtf-thirds-status { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.rtf-thirds-count {
  font-family: var(--font-display); font-size: 34px; line-height: 1;
  letter-spacing: .03em;
}
.rtf-thirds-count em { font-style: normal; font-size: 18px; opacity: .5; }
.rtf-thirds-count.done { color: var(--lime); }
.rtf-thirds-hint {
  font-family: var(--font-text); font-size: 13px; opacity: .82; min-width: 0;
}
.rtf-thirds-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Best-3rd grid: compact flag tiles that auto-fill so all 12 third-placed
   teams sit in ONE view (≈4 columns on a phone, no long scroll). */
.rtf-thirds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
/* One tile = group letter (top-left), pick state (top-right), flag, short
   name, FIFA rank. State reads from the border + the corner badge. */
.rtf-third {
  appearance: none; cursor: pointer; position: relative;
  background: var(--glass-dark);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 13px 6px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff; text-align: center;
  transition: background .14s, border-color .14s, transform .12s, opacity .14s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rtf-third:hover:not(:disabled) {
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.32);
}
.rtf-third.picked { background: rgba(198,242,78,.16); border-color: var(--lime); }
.rtf-third.mine   { border-color: rgba(233,185,73,.55); }
.rtf-third.picked.mine { background: rgba(233,185,73,.22); border-color: var(--gold); }
.rtf-third.full   { opacity: .34; cursor: not-allowed; }
.rtf-t3-grp {
  position: absolute; top: 5px; left: 7px;
  font-family: var(--font-display); font-size: 12px; line-height: 1;
  letter-spacing: .02em; color: rgba(255,255,255,.5);
}
.rtf-t3-state {
  position: absolute; top: 5px; right: 6px;
  width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; line-height: 1;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.5);
}
.rtf-third.picked .rtf-t3-state { background: var(--lime); color: #08130d; }
.rtf-third.picked.mine .rtf-t3-state { background: var(--gold); }
.rtf-t3-star {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--gold); pointer-events: none;
}
.rtf-t3-flag { font-size: 29px; line-height: 1; margin-top: 4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.rtf-t3-name {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 12px; letter-spacing: .01em; line-height: 1.05;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rtf-t3-rank { font-family: var(--font-text); font-weight: 700; font-size: 10px; opacity: .55; }
.rtf-boost.sm { font-size: 9px; padding: 2px 6px; letter-spacing: .04em; }

/* Knockout draw — sided layout (top half | trophy | bottom half) ---- */
.rtf-bracket {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
.rtf-side { display: flex; flex-direction: column; min-width: 0; }
.rtf-side-label {
  font-family: var(--font-text); font-weight: 800;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .55;
  padding: 0 0 6px;
  border-bottom: 1px dashed rgba(255,255,255,.18);
  margin-bottom: 8px;
}
.rtf-side-list { display: flex; flex-direction: column; gap: 6px; }

.rtf-bracket-mid {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-width: 56px;
  padding: 0 4px;
}
.rtf-mid-trophy { font-size: 32px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.rtf-mid-arrow {
  font-family: var(--font-display); font-size: 18px;
  color: var(--gold); opacity: .55; letter-spacing: 0;
}

/* per-round spacing tuning */
.rtf-bracket-r32 .rtf-side-list { gap: 4px; }
.rtf-bracket-r16 .rtf-side-list { gap: 8px; }
.rtf-bracket-qf  .rtf-side-list { gap: 16px; }
.rtf-bracket-sf  .rtf-side-list { gap: 0; justify-content: center; flex: 1; }

/* Match card --------------------------------------------------- */
.kom-card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 8px; color: #fff;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 6px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .14s, box-shadow .14s;
}
.kom-card.has-pick { border-color: rgba(198,242,78,.55); }
.kom-vs {
  font-family: var(--font-display); font-size: 12px; opacity: .55;
  align-self: center; padding: 0 2px;
}
.kom-team {
  appearance: none; cursor: pointer; text-align: left;
  /* Flag on the left (spanning both rows), name+rank up top, the points badge
     on its OWN row underneath — so a wide name (or a big Final card) can never
     collide with the points, at any width. */
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-areas: "flag meta" "flag pts";
  align-items: center; column-gap: 7px; row-gap: 3px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 9px;
  padding: 7px 9px; color: #fff;
  transition: background .12s, border-color .12s, transform .1s;
  min-width: 0;
}
.kom-flag { grid-area: flag; align-self: center; }
.kom-meta { grid-area: meta; }
.kom-team.empty .kom-name { grid-area: meta; }
.kom-pts  { grid-area: pts; justify-self: start; }
.kom-team:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }
.kom-team.empty { opacity: .45; cursor: default; }
.kom-team.empty .kom-flag { background: rgba(255,255,255,.06); border-radius: 6px; text-align: center; }
.kom-team.picked {
  background: rgba(198,242,78,.22); border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(198,242,78,.16);
}
.kom-team.mine { border-color: rgba(233,185,73,.55); }
.kom-team.picked.mine { background: rgba(233,185,73,.22); border-color: var(--gold); box-shadow: 0 0 0 2px rgba(233,185,73,.18); }
.kom-flag { font-size: 20px; line-height: 1; }
.kom-meta { display: flex; flex-direction: column; min-width: 0; }
.kom-name {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .015em;
  text-transform: uppercase;
  line-height: 1.1;
}
.kom-rank { font-family: var(--font-text); font-weight: 700; font-size: 9.5px; opacity: .55; }

/* Per-team points-if-right badge */
.kom-pts {
  font-family: var(--font-display); font-size: 11px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.7);
  padding: 2px 7px; border-radius: 999px; letter-spacing: .02em;
}
.kom-pts.active { background: rgba(198,242,78,.28); color: var(--lime); }
.kom-team.mine .kom-pts.active { background: rgba(233,185,73,.3); color: var(--gold); }
.kom-team.mine .kom-pts { color: var(--gold); opacity: .8; }

/* Per-round card scaling — bigger as the round gets deeper. */
.rtf-bracket-r32 .kom-card { padding: 6px; }
.rtf-bracket-r32 .kom-name { font-size: 11.5px; }
.rtf-bracket-r32 .kom-flag { font-size: 18px; }
.rtf-bracket-r32 .kom-pts  { font-size: 10px; padding: 2px 6px; }
.rtf-bracket-r16 .kom-card { padding: 10px; }
.rtf-bracket-r16 .kom-name { font-size: 13.5px; }
.rtf-bracket-r16 .kom-flag { font-size: 22px; }
.rtf-bracket-qf  .kom-card,
.rtf-bracket-sf  .kom-card { padding: 16px; }
.rtf-bracket-qf  .kom-name,
.rtf-bracket-sf  .kom-name { font-size: 17px; }
.rtf-bracket-qf  .kom-flag,
.rtf-bracket-sf  .kom-flag { font-size: 32px; }
.rtf-bracket-qf  .kom-team,
.rtf-bracket-sf  .kom-team { padding: 14px 16px; grid-template-columns: 36px minmax(0, 1fr); }
.rtf-bracket-qf  .kom-vs,
.rtf-bracket-sf  .kom-vs { font-size: 14px; }
.rtf-bracket-qf  .kom-pts,
.rtf-bracket-sf  .kom-pts { font-size: 12px; padding: 3px 9px; }

/* Final + champion reveal -------------------------------------- */
.rtf-final {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch;
}
.rtf-final-card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.rtf-final-head {
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .65;
}
.rtf-final-card .kom-card { padding: 20px; }
.rtf-final-card .kom-name { font-size: 20px; }
.rtf-final-card .kom-flag { font-size: 36px; }
.rtf-final-card .kom-team { padding: 16px 18px; grid-template-columns: 42px minmax(0, 1fr); }

.rtf-champion {
  background: linear-gradient(180deg, rgba(233,185,73,.18) 0%, rgba(0,0,0,.32) 100%);
  border: 1.5px solid rgba(233,185,73,.55);
  border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(233,185,73,.18), 0 18px 40px -22px rgba(0,0,0,.7);
  animation: rise .5s var(--ease) both;
}
.rtf-champion.mine { box-shadow: inset 0 0 0 1px rgba(233,185,73,.32), 0 24px 50px -22px rgba(233,185,73,.32); }
.rtf-champion.empty { border-style: dashed; opacity: .85; background: rgba(255,255,255,.05); }
.rtfc-trophy { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.rtfc-trophy.ghost { opacity: .35; filter: grayscale(.6) drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.rtfc-eyebrow {
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.rtfc-name {
  font-family: var(--font-display); font-size: 38px; line-height: 1; letter-spacing: .03em;
  text-transform: uppercase;
}
.rtfc-blurb {
  font-family: var(--font-text); font-size: 13px; opacity: .85; max-width: 36ch;
}

/* Confirm summary — bracket card -------------------------------- */
.rtf-confirm { display: flex; flex-direction: column; gap: 8px; }
.rtf-conf-row {
  display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 10px;
}
.rtf-conf-label {
  font-family: var(--font-text); font-weight: 700; font-size: 12px;
  letter-spacing: .02em; opacity: .8;
}
.rtf-conf-bar { height: 7px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.rtf-conf-fill { height: 100%; background: var(--lime); transition: width .25s ease; }
.rtf-conf-count {
  font-family: var(--font-text); font-weight: 800; font-size: 11px; letter-spacing: .04em;
  opacity: .8; text-align: right;
}
.rtf-conf-sf { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.18); }
.rtf-conf-sf-lab {
  font-family: var(--font-text); font-weight: 800; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 6px;
}
.rtf-conf-sf-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rtf-conf-team {
  font-family: var(--font-text); font-weight: 700; font-size: 12px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  padding: 5px 10px; border-radius: 999px;
}
.rtf-conf-team.mine { border-color: var(--gold); background: rgba(233,185,73,.18); }
.rtf-conf-champ {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 10px 12px;
  background: rgba(233,185,73,.12);
  border: 1px solid rgba(233,185,73,.4);
  border-radius: 12px;
  font-family: var(--font-text); font-size: 13px;
}
.rtf-conf-champ.mine { background: rgba(233,185,73,.22); border-color: var(--gold); }
.rtfcc-trophy { font-size: 20px; }
.rtfcc-pts {
  margin-left: auto;
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold);
}

/* Locked screen — your bracket overview ------------------------- */
.lb-section { padding: 14px 4px; border-bottom: 1px dashed rgba(255,255,255,.14); }
.lb-section:last-of-type { border-bottom: 0; }
.lb-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-display); font-size: 16px; letter-spacing: .03em;
  text-transform: uppercase; margin-bottom: 10px;
}
.lb-section-head span {
  font-family: var(--font-text); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; opacity: .65; text-transform: none;
}

.lb-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lb-group {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px;
}
.lb-group.done { border-color: rgba(198,242,78,.4); }
.lb-group-head {
  font-family: var(--font-display); font-size: 13px; opacity: .8;
  margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.lb-group-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.lb-grp-row {
  display: grid; grid-template-columns: 20px 24px 1fr; align-items: center; gap: 6px;
  font-family: var(--font-text); font-size: 12px;
  padding: 3px 4px; border-radius: 6px;
}
.lb-grp-row.thru { background: rgba(198,242,78,.08); }
.lb-grp-row.wild { background: rgba(233,185,73,.08); }
.lb-grp-row.mine { box-shadow: inset 0 0 0 1px rgba(233,185,73,.45); }
.lb-pos { font-family: var(--font-display); font-size: 12px; opacity: .55; }
.lb-flag { font-size: 18px; line-height: 1; }
.lb-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lb-nm.empty { opacity: .35; }

.lb-rounds { display: grid; grid-template-columns: 1.6fr 1.4fr 1.1fr 1fr 1fr; gap: 8px; align-items: start; }
.lb-round {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px;
  min-width: 0;
}
.lb-round-head {
  font-family: var(--font-display); font-size: 12px; opacity: .8;
  margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.lb-round-list { display: flex; flex-direction: column; gap: 3px; }
.lb-pick {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px;
  font-family: var(--font-text); font-size: 11.5px;
  padding: 3px 4px; border-radius: 6px;
}
.lb-pick.set { background: rgba(198,242,78,.08); }
.lb-pick.empty .lb-nm { opacity: .3; }
.lb-pick.mine { box-shadow: inset 0 0 0 1px rgba(233,185,73,.45); background: rgba(233,185,73,.12); }

.lb-matchup {
  display: flex; flex-direction: column; gap: 1px;
  border-radius: 8px; overflow: hidden;
  margin-bottom: 4px;
  border: 1px solid rgba(255,255,255,.10);
}
.lb-matchup:last-child { margin-bottom: 0; }
.lb-matchup.empty { padding: 3px 4px; opacity: .4; }
.lb-matchup-team {
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px;
  font-family: var(--font-text); font-size: 11.5px; font-weight: 600;
  padding: 3px 5px;
  background: rgba(255,255,255,.04);
  opacity: .55;
}
/* Allow full team names to wrap inside round columns — no truncation */
.lb-rounds .lb-nm {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}
.lb-matchup-team.won {
  background: rgba(198,242,78,.10);
  opacity: 1;
}
.lb-matchup-team.mine { box-shadow: inset 2px 0 0 rgba(233,185,73,.7); }
.lb-matchup-team.won.mine { background: rgba(233,185,73,.14); }
.lb-matchup-vs {
  font-family: var(--font-display); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .4; text-align: center;
  padding: 1px 0; background: rgba(0,0,0,.15);
}

.lb-champion {
  margin-top: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(233,185,73,.14);
  border: 1px solid rgba(233,185,73,.45);
  border-radius: 12px;
  font-family: var(--font-text); font-size: 14px;
}
.lb-champion.mine { background: rgba(233,185,73,.24); border-color: var(--gold); }
.lbc-trophy { font-size: 22px; }
.lbc-pts {
  margin-left: auto;
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}

/* Live screen — bracket breakdown ------------------------------ */
.live-champ-banner {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 12px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  font-family: var(--font-text); font-size: 14px;
}
.live-champ-banner.hit { background: rgba(198,242,78,.18); border-color: var(--lime); }
.live-champ-banner.miss { background: rgba(255,255,255,.06); }
.live-champ-banner em {
  margin-left: auto; font-style: normal;
  font-family: var(--font-text); font-weight: 800; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--lime);
}
.lcb-trophy { font-size: 22px; }

.bracket-results { display: flex; flex-direction: column; gap: 14px; }
.br-section-head {
  font-family: var(--font-display); font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .85; margin-top: 4px;
}
.br-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.br-grow {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 9px 11px;
}
.br-grow.perfect { border-color: rgba(233,185,73,.55); background: rgba(233,185,73,.08); }
.br-grow.zero { opacity: .55; }
.br-grow-head {
  font-family: var(--font-display); font-size: 12px; opacity: .75;
  letter-spacing: .04em; text-transform: uppercase;
}
.br-grow-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.br-hits { font-family: var(--font-display); font-size: 16px; }
.br-hits i { font-style: normal; opacity: .5; font-size: 11px; margin-left: 1px; }
.br-pts {
  font-family: var(--font-display); font-size: 14px; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
}
.br-pts.win { background: rgba(198,242,78,.18); color: var(--lime); }
.br-pts.zero { background: rgba(255,255,255,.08); opacity: .55; }
.br-pts.bull { background: rgba(233,185,73,.2); color: var(--gold); }

.br-rounds { display: flex; flex-direction: column; gap: 6px; }
.br-rrow {
  display: grid; grid-template-columns: 130px 1fr 60px 60px; align-items: center; gap: 10px;
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 9px 14px;
}
.br-rrow.perfect { border-color: rgba(198,242,78,.5); }
.br-rrow.zero { opacity: .55; }
.br-rrow-name {
  font-family: var(--font-display); font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase;
}
.br-rrow-bar { height: 7px; background: rgba(255,255,255,.14); border-radius: 999px; overflow: hidden; }
.br-rrow-fill { height: 100%; background: var(--lime); transition: width .3s ease; }
.br-rrow-hits { font-family: var(--font-display); font-size: 14px; text-align: right; }
.br-rrow-hits i { font-style: normal; opacity: .55; font-size: 11px; margin-left: 1px; }

/* Locked screen — Lucky 8 row chips ---------------------------- */
.lb-lucky { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-lucky-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(233,185,73,.16);
  border: 1px solid rgba(233,185,73,.4);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-text); font-size: 12px;
}
.lb-lucky-pill.mine { background: rgba(233,185,73,.3); border-color: var(--gold); }
.lb-lucky-pill .lb-flag { font-size: 16px; }
.lb-lucky-pill .lb-nm { font-weight: 700; }
.lb-lucky-pill .lb-rk { font-weight: 700; opacity: .55; font-size: 10.5px; }
.lb-grp-row.lucky { box-shadow: inset 0 0 0 1px rgba(233,185,73,.5); background: rgba(233,185,73,.16); }

/* Responsive tweaks --------------------------------------------- */
@media (max-width: 1100px) {
  .rtf-pool { grid-template-columns: repeat(2, 1fr); }
  .rtf-final { grid-template-columns: 1fr; }
  .rtf-bracket-mid { min-width: 40px; }
  .rtf-mid-trophy { font-size: 24px; }
  .lb-groups, .br-groups { grid-template-columns: repeat(2, 1fr); }
  .lb-rounds { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  /* Stack the knockout halves on tight screens — keep them labelled. */
  .rtf-bracket { grid-template-columns: 1fr; gap: 12px; }
  .rtf-bracket-mid {
    flex-direction: row; min-width: 0; padding: 4px 0;
    border-top: 1px dashed rgba(255,255,255,.18);
    border-bottom: 1px dashed rgba(255,255,255,.18);
  }
  .rtf-mid-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .rtf-pool { grid-template-columns: 1fr; }
  .rtf-slot { grid-template-columns: 64px 28px 1fr auto 18px; padding: 9px 11px; }
  .rtf-slot.empty { grid-template-columns: 64px 1fr; }
  .rtf-pos-lab { font-size: 14px; }
  .rtf-name { font-size: 15px; }
  .rtf-subtitle { font-size: 22px; }
  .lb-groups, .lb-rounds, .br-groups { grid-template-columns: 1fr; }
  .br-rrow { grid-template-columns: 90px 1fr 44px 50px; padding: 8px 10px; gap: 8px; }
}

/* ============================================================ */
/* SUMMARY SCREEN v2 — Starting XI share card + Live Center +    */
/* Leagues preview. Three stacked blocks on the locked-in home   */
/* base. The share card is intentionally screenshot-ready: nation*/
/* lockup, big chalk title, numbered XI, character figure.       */
/* ============================================================ */

/* summary-screen: no outer scroll — the two inner panels scroll independently */
.summary-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-bottom: 0;
}
/* when step-scroll and summary-screen share the same element, kill the outer scroll */
.step-scroll.summary-screen { overflow: hidden; padding-right: 0; }

/* Two-column live layout */
.live-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* Left panel: Live Center → Leagues → Road — stacked, inner scroll */
.live-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
  min-height: 0;
}
.live-left::-webkit-scrollbar { width: 5px; }
.live-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }

/* Right panel: Starting XI card — inner scroll */
.live-right {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
  min-height: 0;
}
.live-right::-webkit-scrollbar { width: 5px; }
.live-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; }

/* ——— Starting XI share card ——— */
.xishare {
  position: relative;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.30) 100%),
    var(--nation, #15161B);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--card-radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 30px 60px -28px rgba(0,0,0,.7);
  padding: 22px 24px 20px;
  overflow: visible;
  isolation: isolate;
}
.xishare::after {
  /* subtle paper grain so the flat field doesn't band on photo screens */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.4px);
  background-size: 38px 38px, 38px 38px;
  background-position: 0 0, 19px 19px;
  opacity: .35; z-index: 0;
}
.xishare > * { position: relative; z-index: 1; }

.xs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.xs-mark { width: 36px; height: 36px; display: grid; place-items: center; }
.xs-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.xs-tournament-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-weight: 800;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
  background: var(--fill-glass);
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: 999px;
  padding: 7px 16px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.xs-titles { margin: 16px 0 14px; }
.xs-team-name {
  font-family: var(--font-text); font-weight: 700;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lime);
  margin-top: 6px;
  opacity: .9;
}
.xs-eyebrow {
  font-family: var(--font-text); font-weight: 800;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 6px;
}
.xs-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.4vw, 80px);
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 14px rgba(0,0,0,.28);
}
.xs-title-xi {
  display: inline-block;
  padding: 0 14px;
  background: var(--lime);
  color: var(--ink);
  border-radius: 6px;
  margin-left: 4px;
  text-shadow: none;
}

.xs-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.xs-lineup {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.xs-empty {
  font-family: var(--font-text); font-size: 13px; opacity: .75;
  padding: 14px 0;
}
.xs-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
}
.xs-num {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1;
  letter-spacing: .01em;
  color: var(--gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.xs-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px); line-height: 1;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.xs-cap {
  display: inline-grid; place-items: center;
  min-width: 32px; height: 22px;
  padding: 0 6px;
  background: var(--lime); color: var(--ink);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  white-space: nowrap;
}
.xs-row.is-cap .xs-name { color: var(--lime); }

.xs-figure-wrap {
  position: relative;
  min-height: 540px;
  display: flex; align-items: flex-end; justify-content: center;
  margin: -40px -8px -20px 0;
  pointer-events: none;
  overflow: visible;
}
.xs-ghost {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: clamp(180px, 30vw, 320px);
  line-height: 1;
  color: rgba(255,255,255,.10);
  letter-spacing: -.02em;
  text-transform: uppercase;
  user-select: none;
}
.xs-figure-scaler {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 100%;
  transform: scale(1.4);
  transform-origin: bottom center;
}
.xs-figure {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.32));
  will-change: transform;
}

.xs-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,.22);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px;
}
.xs-subs-label {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 2px;
}
.xs-subs-list {
  font-family: var(--font-text); font-weight: 600;
  font-size: 12.5px; line-height: 1.4;
  color: rgba(255,255,255,.82);
  max-width: 60ch;
}
.xs-matchup {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px); line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.xs-matchup-vs {
  font-family: var(--font-text); font-weight: 700;
  font-size: 11px; letter-spacing: .14em;
  opacity: .55;
}

/* ——— Live Center ——— */
.live-center {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 18px 20px 16px;
}
.lc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.lc-title {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: .01em; text-transform: uppercase;
  margin: 0; color: #fff;
  display: inline-flex; align-items: center; gap: 9px;
}
.lc-livedot {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(198,242,78,.55);
  animation: lfpulse 1.6s infinite;
}
.lc-sub {
  font-family: var(--font-text); font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .58;
}

.lc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.lc-stat {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
}
.lc-stat-hero {
  background: rgba(198,242,78,.10);
  border-color: rgba(198,242,78,.32);
}
.lc-stat-l {
  font-family: var(--font-text); font-weight: 800;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .68;
}
.lc-stat-n {
  font-family: var(--font-display);
  font-size: 32px; line-height: .92;
  margin: 6px 0 4px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.lc-stat-n em { font-style: normal; font-size: 16px; opacity: .45; margin-left: 2px; }
.lc-stat-hero .lc-stat-n { color: var(--lime); }
.lc-stat-sub {
  font-family: var(--font-text); font-weight: 600;
  font-size: 11px; line-height: 1.3;
  opacity: .68;
}

.lc-countdown {
  margin-top: 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 14px;
}
.lc-cd-lead {
  font-family: var(--font-text); font-weight: 800;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7;
}
.lc-cd-unit {
  font-family: var(--font-text); font-weight: 700;
  font-size: 12px; opacity: .85;
}
.lc-cd-unit b {
  font-family: var(--font-num);
  font-size: 22px;
  color: var(--gold);
  margin-right: 2px;
}
.lc-countdown.live .lc-cd-lead { color: var(--lime); opacity: 1; }
.lc-cd-tail {
  font-family: var(--font-text); font-weight: 600;
  font-size: 11px; opacity: .55;
  margin-left: auto;
}

/* ——— Leagues preview ——— */
.leagues-card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 16px 18px;
}
.leagues-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.leagues-title {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: .01em; text-transform: uppercase;
  margin: 0; color: #fff;
}
.leagues-sub {
  font-family: var(--font-text); font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .58;
}
.leagues-jump {
  cursor: pointer; background: transparent; border: 0;
  color: var(--lime);
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 2px;
}
.leagues-jump:hover { text-decoration: underline; }

.leagues-scopes {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 10px;
}
.leagues-scope {
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.24);
  background: var(--fill-glass);
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: .02em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .12s ease, transform .12s ease;
}
.leagues-scope:hover { transform: translateY(-1px); background: var(--fill-glass-2); }
.leagues-scope.sel { background: #fff; color: var(--nation, var(--green)); border-color: #fff; }
.leagues-scope small {
  font-family: var(--font-text); font-weight: 800; font-size: 10px;
  background: rgba(255,255,255,.16); color: #fff;
  border-radius: 999px;
  padding: 1px 6px; letter-spacing: 0;
}
.leagues-scope.sel small { background: var(--nation, var(--green)); color: #fff; }
.leagues-scope.add { border-style: dashed; }

.leagues-empty {
  text-align: center;
  padding: 16px 12px;
  font-family: var(--font-text); font-weight: 600;
  font-size: 13px; opacity: .8; line-height: 1.5;
}
.leagues-empty p { margin: 0 0 10px; }

.leagues-rows {
  display: flex; flex-direction: column; gap: 2px;
}
.leagues-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font-text);
}
.leagues-row.you {
  background: rgba(198,242,78,.13);
  border-color: rgba(198,242,78,.4);
}
.lr-rank {
  font-family: var(--font-display); font-size: 18px;
  letter-spacing: .01em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.lr-nm {
  font-family: var(--font-display); font-size: 15px;
  letter-spacing: .01em; text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}
.lr-nm small {
  display: block;
  font-family: var(--font-text); font-weight: 700;
  font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase;
  opacity: .55;
  margin-top: 2px;
}
.lr-pts {
  font-family: var(--font-display); font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.leagues-row.you .lr-pts { color: var(--gold); }
.leagues-gap {
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px; opacity: .35; letter-spacing: .2em;
  padding: 0;
}

/* ——— Road to Final opener button (left column) ——— */
.road-opener {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: var(--glass-dark); color: #fff;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 15px 18px; cursor: pointer; text-align: left;
  transition: transform .12s, background .12s;
  flex-shrink: 0;
}
.road-opener:hover { background: var(--glass-dark-2); transform: translateY(-1px); }
.road-opener:active { transform: translateY(0); }
.ro-chev { font-size: 15px; line-height: 1; opacity: .65; flex: none; }
.ro-title {
  font-family: var(--font-display); font-size: 17px;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1.05;
}
.ro-meta {
  margin-left: auto; flex: none;
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .03em; text-transform: uppercase; opacity: .6; white-space: nowrap;
}

/* ——— Road to Final — full-screen modal ——— */
.road-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadein .18s ease both;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }

.road-modal {
  background: var(--glass-dark-2);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  width: 100%; max-width: 960px;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  animation: modalrise .22s cubic-bezier(.4,0,.2,1) both;
}
@keyframes modalrise { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }

.road-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.road-modal-title {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: .01em; text-transform: uppercase;
  color: #fff;
}
.road-modal-meta {
  font-family: var(--font-text); font-weight: 800;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .55; color: #fff;
}
.road-modal-x {
  margin-left: auto; flex: none;
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
  color: #fff; border-radius: 50%;
  width: 34px; height: 34px; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  transition: background .12s, transform .1s;
}
.road-modal-x:hover { background: rgba(255,255,255,.18); transform: scale(1.08); }

.road-modal-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0 22px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.road-modal-body::-webkit-scrollbar { width: 5px; }
.road-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 99px; }

/* Inside the modal, hide the LockedBracket toggle header — content is always visible */
.road-modal-body .locked-fixtures { margin-top: 0; }
.road-modal-body .lf-toggle { display: none; }
.road-modal-body .lf-body {
  border: 0; border-radius: 0;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0; margin: 0;
}

/* ——— Road modal tab bar ——— */
.lf-tabs-bar {
  display: flex; gap: 8px;
  padding: 16px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.lf-tab {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.22);
  background: var(--fill-glass);
  color: rgba(255,255,255,.7);
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: .03em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .12s, color .12s, transform .1s;
}
.lf-tab:hover { background: var(--fill-glass-2); color: #fff; transform: translateY(-1px); }
.lf-tab.sel {
  background: #fff; color: var(--nation, var(--green));
  border-color: #fff;
}
.lf-tab-count {
  font-family: var(--font-text); font-weight: 800;
  font-size: 11px; letter-spacing: 0;
  background: rgba(0,0,0,.18); border-radius: 999px;
  padding: 2px 7px;
  color: inherit;
}
.lf-tab.sel .lf-tab-count { background: rgba(0,0,0,.12); }

/* ——— Edit entry countdown timer ——— */
.entry-timer {
  display: inline-flex; align-items: center;
  background: rgba(198,242,78,.15);
  border: 1px solid rgba(198,242,78,.35);
  color: var(--lime);
  font-family: var(--font-text); font-weight: 800;
  font-size: 11px; letter-spacing: .06em;
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 6px;
}

/* ——— Share XI button inside the XI card footer ——— */
.xs-share-btn {
  appearance: none; cursor: pointer; flex: none;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.55);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-text); font-weight: 800;
  font-size: 12px; letter-spacing: .10em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .12s, transform .1s;
}
.xs-share-btn:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }
.xs-share-btn:active { transform: translateY(0); }

/* ——— Share/download status toast ———
   Fixed + rendered outside .xishare, so it's never captured into the export.
   Runs a single ~3.6s animation; React clears it on animationend. */
.xi-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(92vw, 440px);
  text-align: center;
  font-family: var(--font-text); font-weight: 700;
  font-size: 13px; letter-spacing: .01em; line-height: 1.3;
  color: #fff;
  background: rgba(16, 28, 20, .94);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: 0 14px 36px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: xiToast 3.6s ease forwards;
  pointer-events: none;
}
.xi-toast.is-ok  { border-color: rgba(25,168,90,.75); }
.xi-toast.is-err { border-color: rgba(228,96,96,.85); }
@keyframes xiToast {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  8%   { opacity: 1; transform: translate(-50%, 0); }
  88%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 6px); }
}

/* Responsive ---------------------------------------------------- */
@media (max-width: 980px) {
  .lc-grid { grid-template-columns: repeat(2, 1fr); }
  .xs-body { grid-template-columns: 1fr; }
  .xs-figure-wrap { min-height: 300px; margin: 4px 0 -8px; }
  .live-layout { grid-template-columns: 1fr; }
  .step-scroll.summary-screen { overflow-y: auto; }
  .live-left, .live-right { overflow: visible; padding-right: 0; }
  .road-modal { max-width: 100%; border-radius: 18px; }
  .ro-meta { display: none; }
}
@media (max-width: 640px) {
  .xishare { padding: 18px 16px 16px; }
  .xs-title { font-size: 44px; }
  .xs-name { font-size: 17px; }
  .xs-num { font-size: 18px; }
  .xs-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .xs-matchup { font-size: 22px; gap: 10px; }
  .lc-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lc-stat-n { font-size: 26px; }
  .lc-countdown { padding: 9px 12px; gap: 8px; }
  .lc-cd-tail { display: none; }
  .leagues-scopes { gap: 6px; }
  .leagues-scope { padding: 6px 10px; font-size: 11px; }
}

/* MATCH-WATCH (temporary) — remove with match-watch feature */
.match-watch-screen .mw-head { margin-bottom: 20px; }
.mw-title { font-family: var(--font-display); font-size: clamp(28px, 5vw, 42px); margin: 8px 0; }
.mw-blurb { opacity: .75; max-width: 52ch; line-height: 1.45; font-size: 14px; }
.mw-blurb code { font-size: 12px; opacity: .9; }
.mw-card { max-width: 640px; }
.mw-connected {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--lime);
  margin-bottom: 10px;
}
.mw-pre {
  background: rgba(0,0,0,.35);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 12px;
  overflow: auto;
  margin: 12px 0;
}
.mw-note { font-size: 13px; opacity: .65; margin-top: 10px; }
.mw-err { color: #ffb4b4; font-size: 13px; margin-top: 12px; }
.mw-scoreboard {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.mw-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.mw-live-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.mw-live-pill.on { background: var(--lime); color: var(--ink); }
.mw-live-pill.done { background: var(--gold); color: var(--ink); }
.mw-minute { font-weight: 700; }
.mw-updated { font-size: 12px; opacity: .55; margin-left: auto; }
.mw-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.mw-team { text-align: left; }
.mw-team.away { text-align: right; }
.mw-tla { font-family: var(--font-display); font-size: 28px; display: block; }
.mw-name { font-size: 13px; opacity: .7; }
.mw-score { text-align: center; }
.mw-goals { font-family: var(--font-display); font-size: 48px; letter-spacing: .04em; }
.mw-sep { opacity: .4; margin: 0 4px; }
.mw-ht { display: block; font-size: 14px; opacity: .65; margin-top: 4px; }
.mw-countdown { text-align: center; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--lime); }
.mw-points { margin-bottom: 16px; }
.mw-pts-hero { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mw-pts-label { font-size: 13px; opacity: .75; }
.mw-pts-val { font-family: var(--font-display); font-size: 40px; color: var(--lime); }
.mw-pts-sub { font-size: 13px; opacity: .65; margin-top: 8px; }
.mw-section { margin-bottom: 18px; }
.mw-section h3 { font-size: 15px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }
.mw-empty { opacity: .55; font-size: 14px; }
.mw-goals-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mw-goals-list li {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  padding: 10px 12px; background: rgba(0,0,0,.2); border-radius: 12px; font-size: 13px;
}
.mw-g-min { font-family: var(--font-mono); opacity: .7; }
.mw-g-scorer { font-weight: 700; }
.mw-g-map.hit { color: var(--lime); }
.mw-g-map.miss { color: #ffb4b4; }
.mw-xi-grid { display: flex; flex-direction: column; gap: 6px; }
.mw-xi-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; background: rgba(0,0,0,.18); border-radius: 10px;
}
.mw-xi-name { font-weight: 600; }
.mw-xi-ev { font-family: var(--font-mono); font-size: 12px; opacity: .75; }
.mw-xi-pts { font-family: var(--font-display); font-size: 20px; color: var(--gold); }
.mw-cap { color: var(--gold); margin-left: 4px; }
.mw-debug { margin-top: 16px; }
.shell-util.watch.on { background: var(--lime); color: var(--ink); }

/* ——— Clerk modal: hide the "Sign up" footer link ———
   New fans onboard through the carousel flow (Pick → Build → Confirm),
   not directly via the sign-in modal. */
.cl-footerAction { display: none !important; }

/* ============================================================ */
/* STAR XI — RESPONSIVE v2 · MOBILE & ALL-SURFACE IMPROVEMENTS */
/* Safe-area insets, touch targets, DreamXI mobile tabs,        */
/* overflow protection, layout polish for ≤640px surfaces.      */
/* ============================================================ */

/* ——— Safe area insets (iPhone notch / Dynamic Island) ——— */
/* env() is ignored on browsers that don't support it, so this is safe.
   These activate now that index.html ships viewport-fit=cover. */
.step-foot {
  padding-bottom: max(18px, calc(14px + env(safe-area-inset-bottom)));
}
/* On phones the foot can hold three actions (Back · Review · Road to Final).
   Tighten the gap and pill padding so they all fit on one line at the same
   height — a consistent set, never a wrapped chunky block. */
@media (max-width: 640px) {
  .step-foot { gap: 8px; }
  .step-foot .pill { padding: 12px 14px; font-size: 12px; letter-spacing: .05em; gap: 6px; }
  .step-foot .pill.sm { padding: 12px 13px; }
}
/* Landing hero is inline-styled at height:100vh; override to the dynamic
   viewport on supporting browsers so its bottom CTAs never hide behind the
   mobile address bar. !important is required to beat the inline style. */
@supports (height: 100dvh) {
  .starxi-landing { height: 100dvh !important; }
}
/* Fixed top chrome: keep clear of the notch in landscape / standalone.
   In portrait browser tabs these insets are 0, so desktop & normal mobile
   are unchanged. */
.brand-lockup { top: max(14px, env(safe-area-inset-top)); }
.shell-progress {
  top: max(20px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
}
.shell-topright {
  top: max(18px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .shell-body {
    padding-left:  max(14px, calc(12px + env(safe-area-inset-left)));
    padding-right: max(14px, calc(12px + env(safe-area-inset-right)));
  }
}
/* On <640px the shell-body rule is set to 14px via the existing @media block;
   override it here so env() still wins when present. */
@media (max-width: 640px) {
  .shell-body {
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}

/* ——— Prevent horizontal scroll bleed ——— */
.step-shell, .step-screen, .step-scroll {
  max-width: 100%;
  overflow-x: hidden;
}
.app { overflow-x: hidden; }

/* ——— DreamXI: Squad List ↔ Your XI view toggle ——— */
/* Tabs are shown whenever the layout is single-column (< 980px).
   At 980px+ the two-column side-by-side layout handles both panels. */
@media (min-width: 980px) {
  .dxi-mob-tabs { display: none; }
}
@media (max-width: 979px) {
  .dxi-mob-tabs {
    display: flex; gap: 6px;
    flex-shrink: 0;
    margin-bottom: 12px;
  }
  .dxi-mob-tab {
    flex: 1;
    appearance: none; cursor: pointer;
    border: 1.5px solid rgba(255,255,255,.28);
    background: var(--fill-glass); color: #fff;
    border-radius: var(--pill); padding: 13px 14px;
    font-family: var(--font-display); font-size: 15px;
    letter-spacing: .03em; text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .14s;
  }
  .dxi-mob-tab .pct {
    font-family: var(--font-text); font-weight: 800;
    font-size: 11px; opacity: .75; margin-left: 6px;
  }
  .dxi-mob-tab.sel {
    background: #fff; color: var(--nation, var(--green)); border-color: #fff;
  }
  /* Hide the inactive panel */
  .dxi-body.mob-list .xi-side  { display: none; }
  .dxi-body.mob-pitch .dxi-left { display: none; }

  /* Squad List panel: flex column so the player grid scrolls */
  .dxi-body.mob-list {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }
  .dxi-body.mob-list .dxi-left {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }
  .dxi-body.mob-list .player-grid.scroll {
    flex: 1;
    min-height: 200px;
    max-height: none;
  }

  /* YOUR XI panel: hide the description header so the full pitch fits on screen.
     :has() is supported on iOS 15.4+ / Safari 15.4+. */
  .dxi-screen:has(.dxi-body.mob-pitch) .dxi-head { display: none; }

  /* Remove "Pick a formation" label — tabs alone are clear enough */
  .dxi-body.mob-pitch .fr-label { display: none; }

  .dxi-body.mob-pitch {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }
  /* xi-side scrolls so cap-bar is reachable, but pitch is tall enough that
     all 4 rows (including GK) are visible on first load without scrolling. */
  .dxi-body.mob-pitch .xi-side {
    flex: 1; min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;   /* keep the drag here, not chained to the shell behind the chrome */
    -webkit-overflow-scrolling: touch;
    padding-right: 0;
    padding-bottom: 80px;
  }
  /* Pitch grows to show all 4 rows at once. The GK is the last row and
     space-between pins it to the bottom, so its name label used to spill out of
     the pitch and hide behind the captain panel. padding-bottom reserves room
     for that label inside the pitch, and the cap-bar gets a margin so the two
     never touch — the keeper's name is always fully visible on first load. */
  .dxi-body.mob-pitch .pitch { min-height: 452px; overflow: visible; }
  /* Reserve a generous band below the GK row so its name+rating label is always
     fully inside the pitch, and give the captain panel a clear margin — together
     ~50px of guaranteed clearance so the keeper is never tucked behind the panel,
     even with a long name or a shorter viewport. */
  .dxi-body.mob-pitch .pitch-rows { min-height: 392px; padding-bottom: 40px; }
  .dxi-body.mob-pitch .cap-bar { margin-top: 24px; }

  /* Horizontal scroll for filter rows.
     Must be display:flex (not inline-flex) so the container is constrained
     to its parent's width; overflow-x:auto then creates an internal scroll
     instead of letting the row grow wider than the viewport. */
  .pos-tabs {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pos-tabs::-webkit-scrollbar { display: none; }
  .pos-tab { flex-shrink: 0; }
  .formation-tabs { overflow-x: auto; scrollbar-width: none; }
  .formation-tabs::-webkit-scrollbar { display: none; }
  .formation-tab { flex-shrink: 0; }
}

/* ——— Touch targets: minimum 44×44px for interactive elements ——— */
@media (max-width: 640px) {
  /* Score stepper buttons */
  .ss-btn {
    width: 36px; height: 36px;
    border-radius: 10px; font-size: 18px;
  }
  .ss-num {
    width: 48px; height: 52px;
    font-size: 30px; border-radius: 11px;
  }
  /* Score stepper (small variant) */
  .score-set.sm .ss-btn { width: 30px; height: 30px; border-radius: 8px; }
  .score-set.sm .ss-num { width: 38px; height: 42px; font-size: 22px; }
  /* Flag chips in the nation picker */
  .flag-chip { min-height: 68px; padding: 11px 5px 9px; }
  .flag-chip .em { font-size: 30px; }
  /* Slot tiles on the pitch */
  .slot-tile { width: 54px; height: 70px; }
  .slot-shirt { width: 54px; height: 70px; }
  .pitch-slot.empty::before { width: 50px; height: 52px; }
  /* Player cards */
  .player-card { padding: 10px 11px; }
}

/* ——— Welcome screen: better spacing at very small sizes ——— */
@media (max-width: 480px) {
  .hero-left { padding: 18px 16px 20px; }
  .kicker-row { gap: 8px; }
  .kicker { padding: 10px 10px 9px; }
  .kicker .n { font-size: 24px; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-row .btn { justify-content: center; }
  /* Flag grid: 3 cols on small phones */
  .fp-grid { grid-template-columns: repeat(3, 1fr); max-height: 260px; }
}
@media (max-width: 380px) {
  .fp-grid { grid-template-columns: repeat(2, 1fr); max-height: 240px; }
}

/* ——— Predict screen: md-tabs horizontal scroll ——— */
@media (max-width: 640px) {
  .md-tabs {
    overflow-x: auto; scrollbar-width: none;
    max-width: 100%;
  }
  .md-tabs::-webkit-scrollbar { display: none; }
  .md-tab { flex-shrink: 0; }
  /* RTF progress dots: scroll rather than wrap */
  .rtf-prog-cells {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rtf-prog-cells::-webkit-scrollbar { display: none; }
  .rtf-dot { flex-shrink: 0; }
  /* RTF bracket: allow horizontal scroll for R32 */
  .rtf-bracket-r32 .rtf-side-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ——— Match cards on mobile: tighter layout ——— */
@media (max-width: 640px) {
  .match-card { padding: 12px 11px; }
  .mc-body { gap: 7px; }
  .team .em { font-size: 24px; }
  .team .nm { font-size: 13px; }
  .mc-score { gap: 5px; }
  .mc-dash { font-size: 18px; }
}

/* ——— Confirm screen: allow inner sections to scroll naturally on mobile ——— */
@media (max-width: 720px) {
  .confirm-screen .step-scroll { overflow-y: auto; }
  .confirm-grid { flex: none; min-height: auto; }
  .summary-card { overflow: visible; min-height: auto; }
  .summary-card > .xi-preview,
  .summary-card > .rtf-confirm { overflow: visible; max-height: none; }
}
/* Single column on phones so the XI list is full-width and readable */
@media (max-width: 640px) {
  .confirm-grid { grid-template-columns: 1fr; }
  .confirm-name-row { padding: 10px 0 0; }
}

/* ——— XI share card: compact figure on mobile ——— */
@media (max-width: 640px) {
  .xs-figure-wrap { min-height: 220px; margin: 2px 0 -8px; }
  .xs-figure-scaler { transform: scale(1.2); }
  .xs-row { grid-template-columns: 28px 1fr auto; gap: 8px; }
  .xs-num { font-size: 17px; }
  .xs-name { font-size: 16px !important; }
}

/* ——— Shell chrome: fine-tune on very small screens ——— */
@media (max-width: 380px) {
  /* padding-top is owned by the env-aware !important rule lower in the file
     (calc(96px + max(14px, safe-area))) so it tracks the notch here too. */
  .shell-body { padding-left: 10px; padding-right: 10px; }
  .brand-lockup { top: max(8px, env(safe-area-inset-top)); }
  .bl-crest { width: 40px; }
  .bl-name { font-size: 20px; }
  .bl-sub { font-size: 8px; letter-spacing: .18em; }
  .shell-topright { top: max(10px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); gap: 4px; }
  .shell-progress { top: max(12px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); }
  .shell-util { padding: 6px 7px; }
  .sp-step { padding: 5px 7px; }
}

/* ——— Leaderboard bracket overview: responsive grid ——— */
@media (max-width: 640px) {
  .lb-groups { grid-template-columns: 1fr 1fr; }
  .lb-rounds { grid-template-columns: 1fr; }
  .br-groups { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .lb-groups { grid-template-columns: 1fr; }
  .br-groups { grid-template-columns: 1fr; }
}

/* ——— Live center stat grid: 2×2 on small screens ——— */
@media (max-width: 480px) {
  .lc-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lc-stat-n { font-size: 26px; }
  .lc-stat { padding: 10px 12px; }
}

/* ——— Ko-grid on small screens ——— */
@media (max-width: 480px) {
  .ko-grid { grid-template-columns: 1fr; }
}

/* ——— Rec-grid: single column on very small screens ——— */
@media (max-width: 380px) {
  .rec-grid { grid-template-columns: 1fr; }
}

/* ——— Modal: full-width on very small screens ——— */
@media (max-width: 480px) {
  .modal { border-radius: 18px; padding: 18px; }
  .modal-list { grid-template-columns: 1fr; }
}

/* ——— Road modal: full-screen on mobile ——— */
@media (max-width: 640px) {
  .road-modal-backdrop { padding: 0; align-items: flex-end; }
  .road-modal {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
  }
  .road-modal-head { padding: 16px 18px 14px; }
  .lf-tab { padding: 9px 15px; font-size: 13px; }
}

/* ——— Topbar: tighten on mobile when visible ——— */
@media (max-width: 480px) {
  .topbar { padding: 10px 12px; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 7.5px; letter-spacing: .22em; }
  .crest-mark { width: 28px; height: 30px; }
}

/* ——— Focused + active states: cleaner on mobile ——— */
@media (hover: none) {
  /* Devices without hover: remove hover-only transforms */
  .flag-chip:hover,
  .player-card:hover,
  .match-card:hover,
  .slot-tile:hover,
  .rtf-pool-team:hover:not(:disabled),
  .rtf-third:hover:not(:disabled) { transform: none; }
  /* Keep active (tap) feedback */
  .flag-chip:active { transform: translateY(-1px); }
  .slot-tile:active { transform: translateY(-1px); }
  .player-card:active { transform: translateY(-1px); }
}

/* ============================================================ */
/* DreamXI — Points explanation modal                           */
/* ============================================================ */

/* Auto-fill knockouts button — lime tint */
.rtf-autofill-btn {
  border-color: rgba(198,242,78,.6) !important;
  color: var(--lime) !important;
}
.rtf-autofill-btn:hover { background: rgba(198,242,78,.10) !important; }

/* Trigger button — gold tint to signal "scoring info" */
.dxi-points-btn {
  border-color: rgba(233,185,73,.6) !important;
  color: var(--gold) !important;
}
.dxi-points-btn:hover { background: rgba(233,185,73,.12) !important; }

/* Modal container */
.dxi-points-modal {
  background: rgba(8,19,13,.97);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 22px;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px -16px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  animation: rise .22s cubic-bezier(.4,0,.2,1) both;
  overflow: hidden;
}
.dpm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.dpm-head h3 {
  font-family: var(--font-display); font-size: 22px; letter-spacing: .02em;
  text-transform: uppercase; margin: 0; color: #fff;
}
.dpm-body {
  flex: 1; overflow-y: auto; padding: 18px 22px 24px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
}
.dpm-body::-webkit-scrollbar { width: 5px; }
.dpm-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; }

.dpm-intro {
  font-family: var(--font-text); font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,.78); margin: 0 0 18px;
}

.dpm-section { margin-bottom: 20px; }
.dpm-section-title {
  font-family: var(--font-display); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}

/* Event rows */
.dpm-rows { display: flex; flex-direction: column; gap: 4px; }
.dpm-row {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
}
.dpm-row.neg { border-color: rgba(255,100,100,.25); background: rgba(255,80,80,.06); }
.dpm-row.cap { border-color: rgba(233,185,73,.35); background: rgba(233,185,73,.08); }
.dpm-ico { font-size: 16px; line-height: 1; text-align: center; }
.dpm-label { font-family: var(--font-text); font-weight: 600; font-size: 13px; }
.dpm-pts {
  font-family: var(--font-display); font-size: 16px; letter-spacing: .02em;
  color: var(--lime);
}
.dpm-row.neg .dpm-pts { color: #ff6b6b; }
.dpm-row.cap .dpm-pts { color: var(--gold); }

/* Gem boost section */
.dpm-gem-section { background: rgba(233,185,73,.06); border: 1px solid rgba(233,185,73,.22); border-radius: 14px; padding: 14px; }
.dpm-gem-intro { font-family: var(--font-text); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.8); margin: 0 0 12px; }
.dpm-gem-intro em { font-style: italic; color: var(--gold); }

.dpm-gem-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 14px; }
.dpm-tier {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: 11px; text-align: center;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
}
.dpm-tier.tier-star  { border-color: rgba(255,255,255,.18); }
.dpm-tier.tier-solid { border-color: rgba(100,160,255,.35); background: rgba(100,160,255,.06); }
.dpm-tier.tier-gem   { border-color: rgba(233,185,73,.45); background: rgba(233,185,73,.1); }
.dpm-tier.tier-wild  { border-color: rgba(198,242,78,.45); background: rgba(198,242,78,.08); }
.dpm-tier-label { font-family: var(--font-text); font-weight: 700; font-size: 11px; opacity: .75; }
.dpm-tier-name  { font-family: var(--font-display); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.dpm-tier-mult  { font-family: var(--font-display); font-size: 22px; color: var(--gold); }
.dpm-tier.tier-gem .dpm-tier-mult,
.dpm-tier.tier-wild .dpm-tier-mult { color: var(--lime); }

/* Example comparison */
.dpm-example {
  background: rgba(0,0,0,.28); border-radius: 10px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
}
.dpm-ex-title {
  font-family: var(--font-text); font-weight: 700; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; opacity: .6; margin-bottom: 8px;
}
.dpm-ex-compare { display: flex; flex-direction: column; gap: 4px; }
.dpm-ex-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-text); font-weight: 600; font-size: 13px;
  padding: 5px 8px; border-radius: 8px; color: rgba(255,255,255,.75);
}
.dpm-ex-row.gem { background: rgba(233,185,73,.1); border: 1px solid rgba(233,185,73,.28); color: #fff; }
.dpm-ex-row.gem.cap { background: rgba(233,185,73,.2); border-color: var(--gold); }
.dpm-ex-pts { font-family: var(--font-display); font-size: 18px; color: var(--gold); flex: none; }
.dpm-ex-row:not(.gem) .dpm-ex-pts { color: rgba(255,255,255,.55); font-size: 16px; }

.dpm-footer {
  font-family: var(--font-text); font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,.5); margin: 0; font-style: italic; text-align: center;
}

@media (max-width: 540px) {
  .dxi-points-modal { border-radius: 18px; max-height: 92vh; }
  .dpm-head { padding: 16px 18px 14px; }
  .dpm-body { padding: 14px 18px 20px; }
  .dpm-gem-tiers { grid-template-columns: repeat(2, 1fr); }
}

/* ——— Leaderboard mode tabs (Combined / Star XI only) ——— */
.lb-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--fill-glass);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: var(--pill);
  padding: 4px;
  margin-bottom: 10px;
  width: fit-content;
}
.lb-mode-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,.65);
  font-family: var(--font-display);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--pill);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.lb-mode-tab.sel {
  background: #fff;
  color: var(--nation, var(--green));
  font-weight: 700;
}

/* ——— Stage switcher (Full tournament / Group / Knockouts) ——— */
.lb-stage-tabs {
  display: flex; gap: 4px;
  background: var(--fill-glass); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: var(--pill); padding: 4px; margin-bottom: 10px; width: fit-content;
  max-width: 100%; flex-wrap: wrap;
}
.lb-stage-tab {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  color: rgba(255,255,255,.65); font-family: var(--font-display); font-size: 12px;
  padding: 6px 14px; border-radius: var(--pill); letter-spacing: .04em;
  text-transform: uppercase; transition: background .15s, color .15s;
}
.lb-stage-tab.sel { background: var(--lime); color: #14141A; font-weight: 700; }
.lb-stage-note {
  font-size: 12.5px; color: rgba(255,255,255,.78);
  background: rgba(198,242,78,.08); border: 1px solid rgba(198,242,78,.22);
  border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.4;
}

/* ——— League banter line ——— */
.lb-banter {
  font-size: 13.5px; color: #fff; line-height: 1.4;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 9px 13px; margin-bottom: 10px;
}
.lb-banter strong { color: var(--lime); }

/* Tiebreak markers */
.lb-tie {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.25); border-radius: 4px; margin-left: 6px;
}
.lb-legend-tie { opacity: .7; }

/* ——— League management cards (roster + admin) ——— */
.lb-lg-card {
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  background: rgba(255,255,255,.04); margin-bottom: 10px; overflow: hidden;
}
.lb-lg-card.open { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.lb-lg-top {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
}
.lb-lg-id { flex: 1; min-width: 0; }
.lb-lg-name {
  font-family: var(--font-display); font-size: 16px; color: #fff; text-transform: uppercase;
  letter-spacing: .01em; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-lg-id small { color: rgba(255,255,255,.55); font-size: 11.5px; }
.lb-lg-caret { color: rgba(255,255,255,.5); font-size: 10px; flex-shrink: 0; }
.lb-lg-body { padding: 4px 14px 14px; display: grid; gap: 12px; }

.lb-invite { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-invite-cta {
  font-size: 12.5px; color: rgba(255,255,255,.85);
  background: rgba(198,242,78,.1); border: 1px solid rgba(198,242,78,.28);
  border-radius: 12px; padding: 9px 12px; line-height: 1.4;
}
.lb-invite-hint { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 8px; line-height: 1.4; }

/* Arrived-via-invite-link result banner */
.lb-join-notice {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.4; color: #fff;
  border-radius: 14px; padding: 11px 14px; margin: 4px 0 12px;
  animation: fadeIn .2s ease both;
}
.lb-join-notice.ok  { background: rgba(198,242,78,.12); border: 1px solid rgba(198,242,78,.34); }
.lb-join-notice.err { background: rgba(255,120,120,.1); border: 1px solid rgba(255,120,120,.3); }
.lb-join-notice span { flex: 1; }
.lb-join-notice-x {
  appearance: none; background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
  width: 22px; height: 22px; flex-shrink: 0; cursor: pointer; color: #fff;
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.btn.ok, .lb-code.ok { border-color: var(--lime) !important; color: var(--lime) !important; }

.lb-roster .eyebrow { margin-bottom: 6px; }
.lb-roster-loading { font-size: 12.5px; color: rgba(255,255,255,.5); padding: 4px 0; }
.lb-roster-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lb-roster-row:last-child { border-bottom: 0; }
.lb-roster-name { flex: 1; color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lb-owner-badge { font-size: 12px; }
.lb-kick {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid rgba(255,120,120,.4); color: #ff9b9b;
  border-radius: 999px; font-size: 11px; padding: 4px 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.lb-kick:hover { background: rgba(255,90,90,.12); }
.lb-kick:disabled { opacity: .5; cursor: default; }

.lb-admin { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.lb-admin-row, .lb-admin-rename { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lb-danger {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid rgba(255,120,120,.4); color: #ff9b9b;
  border-radius: var(--pill); font-size: 12px; padding: 7px 14px; font-weight: 700;
}
.lb-danger:hover { background: rgba(255,90,90,.12); }
.lb-danger:disabled { opacity: .5; cursor: default; }
.lb-input.sm { padding: 8px 12px; font-size: 14px; flex: 1; min-width: 140px; }

/* ——— RTF nudge banner ——— */
.lb-rtf-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(198,242,78,.12);
  border: 1.5px solid rgba(198,242,78,.35);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.88);
}
.lb-rtf-nudge-icon { font-size: 20px; flex-shrink: 0; }

/* ——— League code reveal after creation ——— */
.lb-new-code-reveal {
  margin-top: 14px;
  padding: 14px;
  background: rgba(198,242,78,.1);
  border: 1.5px solid rgba(198,242,78,.35);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.lb-new-code-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}
.lb-new-code-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  appearance: none;
  cursor: pointer;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 8px 14px;
  color: #fff;
  transition: background .15s, border-color .15s;
  width: 100%;
}
.lb-new-code-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); }
.lb-new-code-btn.copied { border-color: var(--lime); background: rgba(198,242,78,.18); }
.lb-new-code-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .12em;
  flex: 1;
}
.lb-new-code-copy { font-size: 12px; opacity: .7; }
.lb-new-code-hint { font-size: 12px; opacity: .6; }

/* ——— RTF toggle button in league list ——— */
.lb-rtf-toggle {
  appearance: none;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: .02em;
  background: transparent;
  color: rgba(255,255,255,.65);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.lb-rtf-toggle.on { color: var(--lime); border-color: rgba(198,242,78,.45); background: rgba(198,242,78,.1); }
.lb-rtf-toggle.off { opacity: .55; }
.lb-rtf-toggle:hover { opacity: 1; }

/* ——— Points info modal ——— */
/* ——— Unified "How Points Work" bottom-sheet ——— */
.pts-sheet-backdrop {
  position: fixed; inset: 0; z-index: 200;
  /* No page-dimming scrim — same treatment as the player picker: a clean floating
     panel, with a transparent backdrop kept only to catch outside-clicks for close
     and block interaction with the page behind. No grey/blur wash over the site. */
  background: transparent;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .18s ease both;
}
@media (min-width: 720px) { .pts-sheet-backdrop { align-items: center; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pts-sheet {
  width: 100%; max-width: 540px;
  max-height: 88dvh;
  background: #0e1f17;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 34px rgba(0,0,0,.34);
  animation: sheetUp .22s cubic-bezier(.4,0,.2,1) both;
  overflow: hidden;
}
@media (min-width: 720px) { .pts-sheet { border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,.4); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.pts-sheet-handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.18);
  margin: 10px auto 0; flex-shrink: 0;
}
.pts-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pts-sheet-title {
  font-family: var(--font-display); font-size: 19px;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
}
.pts-sheet-close {
  appearance: none; background: rgba(255,255,255,.1);
  border: 0; border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer;
  font-size: 20px; line-height: 1; color: #fff;
  display: grid; place-items: center;
}

.pts-sheet-body {
  flex: 1; overflow-y: auto; padding: 16px 20px 32px;
  display: flex; flex-direction: column; gap: 20px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}

.pts-block { display: flex; flex-direction: column; gap: 8px; }
.pts-block-label {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); opacity: .9;
}
.pts-table { display: flex; flex-direction: column; gap: 3px; }
.pts-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 13.5px; color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.pts-row span:last-child {
  font-family: var(--font-display); font-size: 14px;
  font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.pts-row.pos span:last-child { color: var(--lime); }
.pts-row.neg { background: rgba(255,80,60,.08); border-color: rgba(255,80,60,.15); }
.pts-row.neg span:last-child { color: #ff6b55; }
.pts-row.cap { background: rgba(233,185,73,.1); border-color: rgba(233,185,73,.25); }
.pts-row.cap span:last-child { color: var(--gold); }

.pts-note {
  font-size: 12px; color: rgba(255,255,255,.5);
  line-height: 1.45; margin: 0;
}
.pts-note-board {
  font-size: 13px; color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.05);
  border-radius: 10px; padding: 10px 12px;
}
.pts-note-board strong { color: var(--gold); }

/* Points info button on Predict/Live */
.pts-info-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ——— Live hero score split ——— */
.lh-eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lh-pts-info-btn {
  appearance: none;
  cursor: pointer;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: var(--pill);
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-family: var(--font-text);
  font-weight: 700;
  padding: 4px 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s;
}
.lh-pts-info-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.lh-score-split {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  flex-wrap: wrap;
}
.lh-split-item { display: flex; flex-direction: column; align-items: center; }
.lh-split-val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
}
.lh-split-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
  margin-top: 2px;
}
.lh-split-total .lh-split-val { color: var(--gold); }
.lh-split-sep {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  opacity: .45;
  margin-top: -8px;
}

/* ═══════════════════════════════════════════════
   MOBILE FIXES — group standings table, share card,
   shell-body padding, foot-meter
   ═══════════════════════════════════════════════ */

/* Hide the "N/87 picks" count — keep the progress bar only */
.fm-count { display: none; }

/* ——— Group standings table: more compact on ≤640px ——— */
/* Tighter rows so all 4 teams fit without heavy scrolling. */
@media (max-width: 640px) {
  /* Smaller control buttons — 30px is still tap-friendly */
  .rtf-iconbtn { width: 30px !important; height: 30px !important; font-size: 11px; }
  /* Hide the "FIFA #XX" sub-line to give the team name room to breathe */
  .rtf-lrow-info span { display: none; }
  /* Slightly smaller rank text and flag to save horizontal space */
  .rtf-lrow-flag { font-size: 16px; }
  .rtf-lrow-medal { font-size: 15px; width: 16px; }
  .rtf-lrow-rank { font-size: 12px; }
  .rtf-lrow-pos { width: auto; gap: 4px; }
  /* Row itself: reduce minimum height */
  .rtf-lrow { min-height: 50px; padding: 8px 10px 8px 12px; gap: 7px; }
  /* Badge slightly more compact */
  .rtf-lrow-badge { padding: 4px 7px; font-size: 8px; }

  /* Bridge the vertical air between pool → ladder → helpline so the whole
     group ranker fits one screen and the hint is never clipped at the foot. */
  .rtf-group { gap: 8px; }
  .rtf-grouphead { margin-bottom: 6px; }
  .rtf-poolwrap { margin-bottom: 8px; }
  .rtf-poolcue { margin-bottom: 6px; }
  .rtf-pchip { min-height: 46px; padding: 8px 10px; }
  .rtf-ladder-head { padding: 8px 14px; }
  .rtf-helpline { margin-top: 8px; font-size: 10px; gap: 6px; }
  .rtf-help-desktop { display: none; }   /* "drag on desktop" is irrelevant on touch */

  /* Best-3rd: trim the header so all 12 flag tiles stay in one view even once
     the extra "Auto-fill knockouts" button appears. */
  .rtf-thirds { gap: 9px; }
  .rtf-thirds-head { padding: 9px 12px; }
  .rtf-thirds-count { font-size: 24px; }
  .rtf-thirds-grid { gap: 7px; }
  .rtf-third { padding: 10px 5px 8px; }

  /* Compact the shared "Road to the Final" intro so each round's working area
     (ladder, flag grid, knockout board) sits higher and needs less scrolling. */
  .rtf-head { margin-bottom: 8px; gap: 10px; }
  .rtf-head .title { font-size: 25px; }
  .rtf-head .lede { font-size: 12.5px; line-height: 1.38; }
  .rtf-head-actions { gap: 6px; }
  .rtf-head-actions .btn.sm { padding: 7px 11px; font-size: 11px; }
}

/* ——— Share card (step 05 Live): smaller on mobile so it fits one screen ——— */
@media (max-width: 640px) {
  /* Scale the whole card down so the figure + lineup fit on one screen */
  .xishare {
    padding: 14px 14px 12px;
  }
  .xs-title { font-size: 34px !important; line-height: 0.9; }
  .xs-titles { margin: 10px 0 10px; }
  .xs-figure-wrap { min-height: 200px !important; margin: 2px 0 -6px 0; }
  .xs-figure-scaler { transform: scale(1.1); }
  .xs-row { padding: 3px 0; gap: 8px; }
  .xs-num { font-size: 15px; }
  .xs-name { font-size: 14px !important; }
  .xs-cap { min-width: 26px; height: 18px; font-size: 9px; padding: 0 4px; }
  .xs-foot { margin-top: 8px; padding-top: 8px; gap: 8px; }
  .xs-head { margin-bottom: 0; }
  .xs-tournament-pill { padding: 5px 12px; font-size: 10px; }
}

/* ——— Prevent shell-body content from hiding behind tall brand lockup on phone ——— */
/* The lockup is positioned at top:max(14px, safe-area) and is ~91px tall, so its
   BOTTOM sits at safe-area + ~105px. The scroll pane below must clear that, and
   the pane top trails shell-body's padding-top by a fixed ~23px. So the padding
   must grow 1:1 with the safe-area — the old `70px + safe-area` undershot by the
   lockup's own height, sliding the first line of content (and the header rule)
   behind the still-visible chrome on Dynamic Island iPhones.
   `96px + max(14px, safe-area)` tracks the lockup exactly: it yields a constant
   ~28px gap below the lockup at every inset, and resolves to 110px at safe-area:0
   so non-notch phones are unchanged. The is-scrolled collapse is delayed 0.2s so
   it only fires AFTER the header has faded out. */
@media (max-width: 640px) {
  .shell-body {
    padding-top: calc(96px + max(14px, env(safe-area-inset-top, 0px))) !important;
  }
  .step-shell.is-scrolled .shell-body {
    padding-top: 14px !important;
    transition: padding-top 0.2s 0.2s ease !important;
  }
}

/* ——— Separator line below fixed header on step pages ——— */
@media (max-width: 640px) {
  .shell-body::before {
    content: "";
    display: block;
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 0 0 6px;
    flex-shrink: 0;
  }
  .step-shell.is-scrolled .shell-body::before {
    display: none;
  }
}

/* Signed-out CTA on the public global table */
.lb-signin-cta {
  font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.5;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 11px 14px; margin-bottom: 14px;
}
.lb-link {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--lime); font: inherit; font-weight: 700; text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
   PITCH-FIRST STAR XI  (FPL-style)
   The pitch is the primary, centred view on every screen. Tapping "+" on an
   empty slot opens the player picker overlay (bottom-sheet on phones, centred
   dialog on tablet/desktop). Overrides the old two-column grid + mobile tabs.
   ════════════════════════════════════════════════════════════════════════ */
.dxi-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 16px;
}
.dxi-stage {
  width: 100%; max-width: 600px;
  display: flex; flex-direction: column; gap: 12px;
}
/* In the centred stage the pitch is a stable, tall graphic; the body scrolls
   if the formation row + pitch + captains exceed the viewport. */
.dxi-stage .pitch { flex: 0 0 auto; min-height: 480px; }
.dxi-stage .pitch-rows { padding-bottom: 22px; }

/* Empty slot becomes a tappable "+" button drawing the dashed shirt itself. */
.pitch-slot.empty.add {
  appearance: none; cursor: pointer; background: none; border: 0; padding: 0;
}
.pitch-slot.empty.add::before { content: none; }   /* the .slot-add box replaces it */
.pitch-slot.empty.add .slot-add {
  width: 50px; height: 64px;
  border: 2px dashed rgba(255,255,255,.6);
  border-radius: 10px 10px 16px 16px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.05);
  transition: border-color .15s, background .15s, transform .12s, box-shadow .12s;
}
.pitch-slot.empty.add:hover .slot-add,
.pitch-slot.empty.add:focus-visible .slot-add {
  border-color: #fff; border-style: solid;
  background: rgba(255,255,255,.16); color: #fff;
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.pitch-slot.empty.add:active .slot-add { transform: translateY(0); }

/* Hide the lede on phones so the pitch leads; keep actions reachable. */
@media (max-width: 680px) {
  .dxi-head { margin-bottom: 10px; }
  .dxi-head .lede { display: none; }
  .dxi-stage .pitch { min-height: 462px; }
}

/* ——— Player picker overlay ——— */
/* No page-dimming scrim: the overlay is a clean floating panel, so the rest
   of the screen stays as-is (no grey box / blur wash over the whole site).
   The backdrop layer is kept (transparent) purely to catch outside-clicks for
   close and to block interaction with the page behind while the picker is open. */
.dxi-picker-backdrop {
  position: fixed; inset: 0; z-index: 220;
  background: transparent;
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .18s ease both;
}
.dxi-picker {
  width: 100%; max-width: 560px;
  height: 90dvh; max-height: 90dvh;
  background: #0e1f17;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -16px 60px rgba(0,0,0,.6);
  animation: sheetUp .24s cubic-bezier(.4,0,.2,1) both;
  overflow: hidden;
}
.dxi-picker-handle {
  width: 36px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.18); margin: 10px auto 0; flex-shrink: 0;
}
.dxi-picker-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px 12px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.dxi-picker-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dxi-picker-title {
  font-family: var(--font-display); font-size: 19px;
  letter-spacing: .02em; text-transform: uppercase; color: #fff; line-height: 1.05;
}
.dxi-picker-sub {
  font-family: var(--font-text); font-weight: 800; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
.dxi-picker-close {
  appearance: none; background: rgba(255,255,255,.1); border: 0; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; font-size: 22px; line-height: 1; color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.dxi-picker-close:hover { background: rgba(255,255,255,.2); }
.dxi-picker-controls {
  flex-shrink: 0; padding: 12px 16px 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.dxi-picker-controls .pos-tabs { margin-bottom: 0; }
.dxi-picker .player-grid.scroll {
  flex: 1; min-height: 0; margin: 6px 14px 0;
}
/* One column on phones (room for full names), two on tablet/desktop. */
.dxi-picker .player-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .dxi-picker .player-grid { grid-template-columns: repeat(2, 1fr); } }
.dxi-picker-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 16px; border-top: 1px solid rgba(255,255,255,.1);
}
.dxi-picker-hint {
  flex: 1; font-family: var(--font-text); font-weight: 600; font-size: 12px;
  line-height: 1.4; color: rgba(255,255,255,.62);
}
.dxi-picker-done {
  flex-shrink: 0; background: var(--lime); color: var(--ink); border-color: var(--lime);
  box-shadow: 0 8px 18px rgba(198,242,78,.22);
}
.dxi-picker-done:hover { background: #d6ff66; }

/* Centred dialog on tablet / desktop instead of a bottom sheet. */
@media (min-width: 720px) {
  .dxi-picker-backdrop { align-items: center; }
  .dxi-picker {
    height: auto; max-height: 84vh; border-radius: 20px;
    animation: rise .2s var(--ease) both;
  }
  .dxi-picker-handle { display: none; }
  .dxi-picker-head { padding-top: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   ROAD TO THE FINAL — all 12 groups on one screen, pre-seeded by FIFA rank
   ════════════════════════════════════════════════════════════════════════ */
.rtf-allgroups { display: flex; flex-direction: column; gap: 14px; }
.rtf-ag-cue {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 12px 15px;
}
.rtf-ag-cue-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.rtf-ag-cue p {
  flex: 1; min-width: 220px; margin: 0;
  font-family: var(--font-text); font-weight: 600; font-size: 13px; line-height: 1.5;
  color: rgba(243,241,233,.82);
}
.rtf-ag-cue p strong { color: #fff; }
.rtf-ag-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.rtf-ag-legend i {
  display: flex; align-items: center; gap: 6px; font-style: normal;
  font-family: var(--font-text); font-weight: 800; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(243,241,233,.7);
}
.rtf-ag-legend i b { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.rtf-ag-legend .lg-thru  { background: var(--lime); }
.rtf-ag-legend .lg-maybe { background: var(--gold); }
.rtf-ag-legend .lg-out   { background: rgba(255,255,255,.3); }

.rtf-ag-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 680px)  { .rtf-ag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rtf-ag-grid { grid-template-columns: repeat(3, 1fr); } }

.rtf-gcard {
  background: var(--glass-dark); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 10px 12px 8px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rtf-gcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rtf-gcard-title { margin: 0; font-family: var(--font-display); font-size: 16px; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.rtf-gcard-reset {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  color: rgba(243,241,233,.8); border-radius: 99px; padding: 4px 10px;
  font-family: var(--font-text); font-weight: 800; font-size: 10px; letter-spacing: .04em;
  transition: background .15s, border-color .15s, opacity .15s, color .15s;
}
.rtf-gcard-reset:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.rtf-gcard-reset:disabled { opacity: .3; cursor: default; }

.rtf-gcard-ladder { display: flex; flex-direction: column; gap: 5px; }
.rtf-grow {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px 7px 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}
.rtf-grow[draggable="true"] { cursor: grab; }
.rtf-grow-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 10px 0 0 10px; background: transparent; }
.rtf-grow.q1 .rtf-grow-rail { background: var(--lime); }
.rtf-grow.q2 .rtf-grow-rail { background: rgba(198,242,78,.55); }
.rtf-grow.q3 .rtf-grow-rail { background: var(--gold); }
.rtf-grow.q4 .rtf-grow-rail { background: rgba(255,255,255,.22); }
.rtf-grow-pos { flex: 0 0 auto; width: 26px; font-family: var(--font-display); font-size: 12px; letter-spacing: .02em; color: rgba(243,241,233,.85); }
.rtf-grow.q3 .rtf-grow-pos { color: var(--gold); }
.rtf-grow.q4 .rtf-grow-pos { color: rgba(243,241,233,.45); }
.rtf-grow-flag { flex: 0 0 auto; font-size: 20px; line-height: 1; }
.rtf-grow-name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: .01em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtf-grow.q4 .rtf-grow-name { color: rgba(243,241,233,.7); }
.rtf-grow-rank { flex: 0 0 auto; font-family: var(--font-text); font-weight: 700; font-size: 10px; letter-spacing: .04em; color: rgba(243,241,233,.5); }
.rtf-grow-x2 { flex: 0 0 auto; font-family: var(--font-display); font-size: 11px; color: var(--gold); background: rgba(233,185,73,.16); border: 1px solid rgba(233,185,73,.4); border-radius: 6px; padding: 2px 5px; line-height: 1; }
.rtf-grow.mine { background: rgba(233,185,73,.08); border-color: rgba(233,185,73,.3); }
.rtf-grow-ctrls { flex: 0 0 auto; display: flex; gap: 3px; }
.rtf-grow-grip { flex: 0 0 auto; cursor: grab; color: rgba(243,241,233,.3); font-size: 14px; }
.rtf-grow.dragging { opacity: .5; }
.rtf-grow.drop-target { box-shadow: inset 0 0 0 2px rgba(198,242,78,.5); background: rgba(198,242,78,.08); }

/* The single "All 12 groups" pill in the progress strip. */
.rtf-dot.grp.wide { width: auto; padding: 5px 14px; white-space: nowrap; }

/* Touch: native drag is unreliable, so the ▲▼ controls lead — hide the grip. */
@media (hover: none), (max-width: 760px) {
  .rtf-grow-grip { display: none; }
  .rtf-gcard .rtf-iconbtn { width: 34px; height: 34px; }
}

/* ============================================================ */
/* Guest "play with a code" — Confirm CTA + reveal/restore modal */
/* ============================================================ */

/* Confirm footer: primary "Lock in & go live" + a quiet "sign up with email". */
.confirm-foot-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.confirm-foot-alt {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: rgba(243,241,233,.62);
  font: 600 11px/1 "Inter", system-ui, sans-serif; letter-spacing: .02em;
  text-decoration: underline; text-underline-offset: 2px;
}
.confirm-foot-alt:hover { color: var(--chalk); }
@media (max-width: 760px) {
  .confirm-foot-cta { align-items: stretch; }
  .confirm-foot-alt { text-align: center; }
}

/* Shared modal: dark overlay + centred card (reveal + restore). */
.guest-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6,11,8,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: guestFade 180ms var(--ease);
}
@keyframes guestFade { from { opacity: 0; } to { opacity: 1; } }
.guest-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, var(--ink-3), var(--ink));
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--card-radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  padding: 26px 24px 22px; text-align: center; color: var(--chalk);
  animation: guestPop 200ms var(--ease);
}
@keyframes guestPop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.guest-card-emoji { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.guest-card-title {
  margin: 0 0 8px; font: 400 24px/1.05 "Anton", "Inter", sans-serif;
  letter-spacing: .01em; text-transform: uppercase;
}
.guest-card-lede { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: rgba(243,241,233,.74); }
.guest-code {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; padding: 14px 12px; margin: 0 0 14px; cursor: pointer;
  background: rgba(198,242,78,.10); border: 1.5px dashed rgba(198,242,78,.55);
  border-radius: 14px; transition: background 140ms, border-color 140ms;
}
.guest-code:hover { background: rgba(198,242,78,.16); border-color: var(--lime); }
.guest-code-text { font: 400 27px/1 "Anton", "Inter", monospace; letter-spacing: .14em; color: var(--lime); }
.guest-code-copy { font: 700 9.5px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,241,233,.5); }
.guest-card-foot { margin: 0 0 16px; font-size: 11.5px; line-height: 1.45; color: rgba(243,241,233,.5); }
.guest-card-done { width: 100%; justify-content: center; }
.guest-card-actions { display: flex; gap: 10px; justify-content: center; }
.guest-restore-input {
  width: 100%; text-align: center; margin: 0 0 12px;
  font: 400 22px/1 "Anton", "Inter", monospace; letter-spacing: .12em; text-transform: uppercase;
}
.guest-restore-err { margin: 0 0 12px; font-size: 12px; color: #ff8b7a; }

/* ============================================================= */
/* Self-identification + clickable leaderboard rows              */
/* ============================================================= */
.lb-you-badge {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: .06em;
  background: var(--lime); color: #14141A; font-weight: 800; vertical-align: middle;
}
.lb-team-name { font-weight: 700; }
.league-row.clickable { cursor: pointer; position: relative; transition: background .12s, transform .12s; }
.league-row.clickable:hover { background: rgba(255,255,255,.07); }
.league-row.clickable:active { transform: scale(.995); }
.lb-row-caret { color: rgba(255,255,255,.35); font-size: 20px; line-height: 1; margin-left: 6px; flex-shrink: 0; }
.lb-tap-hint { font-size: 11.5px; color: rgba(255,255,255,.45); text-align: center; margin: 8px 0 0; }

/* ============================================================= */
/* Team drill-down sheet                                         */
/* ============================================================= */
.td-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: rgba(4,10,6,.72);
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px); animation: fadeIn .15s ease;
}
@media (min-width: 720px) { .td-backdrop { align-items: center; } }
.td-sheet {
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  background: #121C15; border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px 20px 0 0; box-shadow: 0 6px 26px rgba(0,0,0,.32);
}
@media (min-width: 720px) { .td-sheet { border-radius: 20px; } }
.td-head {
  position: sticky; top: 0; padding: 18px 20px 14px; background: #121C15;
  border-bottom: 1px solid rgba(255,255,255,.08); z-index: 2;
}
.td-close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.td-eyebrow { font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .02em; }
.td-title { font-family: var(--font-display); font-size: 24px; color: #fff; text-transform: uppercase; margin: 2px 0; display: flex; align-items: center; gap: 8px; }
.td-total { font-size: 15px; color: rgba(255,255,255,.8); }
.td-total strong { color: var(--lime); font-size: 22px; font-family: var(--font-display); }
.td-splits { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.td-splits b { color: #fff; }
.td-body { padding: 14px 20px 24px; }
.td-note { font-size: 12.5px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.td-note.warn { background: rgba(255,170,90,.12); border: 1px solid rgba(255,170,90,.3); color: #ffd9b0; }
.td-section-label { font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.85); margin: 14px 0 8px; }
.td-xi { display: grid; gap: 2px; }
.td-player {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.td-player.has-pts { background: rgba(198,242,78,.04); }
.td-pos { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.5); text-align: center; }
.td-pname { color: #fff; font-size: 14px; font-weight: 600; min-width: 0; }
.td-pmds { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.td-md { font-size: 11px; color: rgba(255,255,255,.65); white-space: nowrap; }
.td-md b { color: var(--lime); font-weight: 700; }
.td-md em { color: #fff; font-style: normal; font-weight: 700; }
.td-md.cap em { color: #ffd84d; }
.td-md-zero { color: rgba(255,255,255,.3); font-size: 12px; }
.td-ptotal { font-family: var(--font-display); font-size: 18px; color: #fff; }
.td-road { display: grid; gap: 2px; }
.td-road-row { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.8); padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.td-road-row span:last-child { color: #fff; font-weight: 600; }

/* ============================================================= */
/* Match Centre                                                  */
/* ============================================================= */
.mc-opener { margin-top: 0 !important; }
.mc-screen { max-width: 760px; margin: 0 auto; width: 100%; }
.mc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mc-title { font-family: var(--font-display); font-size: clamp(30px, 6vw, 46px); color: #fff; text-transform: uppercase; margin: 0; line-height: .95; }
.mc-section-label { font-family: var(--font-display); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--lime); margin: 18px 0 8px; }
.mc-block { margin-bottom: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; }
.mc-block-head { font-family: var(--font-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 10px 14px; background: rgba(255,255,255,.06); }
.mc-day { padding: 4px 0; }
.mc-day-label { font-size: 12.5px; color: #fff; padding: 14px 14px 6px; font-weight: 800; letter-spacing: .02em; }
.mc-day-label.today { color: var(--lime); }
.mc-match { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.14); }
.mc-match.today { background: rgba(198,242,78,.05); }
.mc-match.live { background: rgba(255,80,80,.08); }
.mc-status { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.18; }
.mc-time { font-size: 12px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 4px; letter-spacing: .01em; white-space: nowrap; }
.mc-match.live .mc-time { color: #ff7a7a; }
.mc-cd { font-size: 10.5px; font-weight: 700; color: var(--lime); white-space: nowrap; }
.mc-tz { font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.42); letter-spacing: .04em; }
.mc-livedot { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; animation: pulse 1.2s infinite; }
.mc-teams { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); align-items: center; gap: 8px; }
.mc-team { font-size: 13.5px; color: #fff; display: flex; align-items: center; gap: 6px; min-width: 0; }
.mc-team.home { justify-content: flex-end; text-align: right; }
.mc-team.away { justify-content: flex-start; }
.mc-tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-fl { flex-shrink: 0; }
.mc-score { font-family: var(--font-display); font-size: 15px; color: #fff; min-width: 44px; text-align: center; }
.mc-vs { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; font-weight: 400; color: rgba(255,255,255,.42); text-transform: lowercase; line-height: 1; }
.mc-vs.has-score { font-size: 16px; color: #fff; text-transform: none; letter-spacing: .01em; }
.mc-tznote { font-size: 11px; color: rgba(255,255,255,.5); padding: 4px 14px 12px; }
.mc-tznote strong { color: rgba(255,255,255,.74); font-weight: 700; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Team drill-down: nation character figure in the header (same art as the Live card) */
.td-head.has-figure { padding-right: 124px; }
.td-figure {
  position: absolute; right: 8px; bottom: -14px; height: 158px; width: auto;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
@media (max-width: 480px) {
  .td-head.has-figure { padding-right: 92px; }
  .td-figure { height: 124px; right: 4px; }
}

/* Embedded leaderboard inside the Live screen's leagues slot — same component as
   the full page, just wrapped in a card and with a slightly smaller title. */
.live-leagues-card {
  background: var(--glass-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 16px 18px; margin-top: 14px;
}
.lb-embed .lb-title { font-size: clamp(22px, 4.5vw, 32px); }
.lb-embed .lb-screen { max-width: none; }