/* ============================================================ */
/* 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. */
  --font-display: "Anton", "Archivo Black", system-ui, sans-serif;
  --font-text:    "Inter", system-ui, sans-serif;
  --font-mono:    "Inter", system-ui, sans-serif;
  --font-num:     "Anton", system-ui, sans-serif;
}

* { 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 ——— */
.app {
  min-height: 100vh;
  height: 100vh;            /* PROJECT RULE: each screen lives in one viewport */
  /* dvh tracks the *dynamic* viewport (mobile address-bar collapse/expand) so
     the pinned Back/Next foot is never pushed under Safari's chrome. Falls
     back to 100vh on browsers without dvh; identical to vh on desktop. */
  height: 100dvh;
  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;
  flex: 1;
  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;
  overflow: hidden;        /* the right column is fixed-content (no scroll) */
  padding-right: 4px;
}
/* The pitch absorbs any extra column height so the cap-bar always sits flush
   against the bottom of the grid cell — which keeps the player list's bottom
   edge (left column) aligned with the cap-bar's bottom edge (right column).
   The internal .pitch-rows already has min-height + space-between, so growing
   the outer pitch just stretches the lawn around the rows. */
.pitch { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pitch .pitch-rows { flex: 1; }
.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 hugs the 50px shirt so the remove × can be anchored to the
   shirt's top-left corner, independent of how wide the pitch-slot column
   gets (the GK row stretches a single slot across the full pitch). */
.slot-shirt { position: relative; width: 50px; height: 50px; }
.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;
}
.cap-mark {
  position: absolute; top: -9px; right: -9px;
  background: var(--gold); color: var(--ink);
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 11px; line-height: 1;
  letter-spacing: -.01em;
  z-index: 2;
}
/* faint star affordance so "tap to captain" is discoverable */
.cap-hint {
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--ink);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-size: 10px; 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: -10px;
  left: -10px;
  appearance: none; cursor: pointer;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  display: grid; place-items: center; padding: 0;
  opacity: 0; transition: opacity .15s, transform .12s;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
}
.pitch-slot:hover .slot-x,
.slot-shirt:hover .slot-x { opacity: 1; }
.slot-x:hover { transform: scale(1.2); }

.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; }
.confirm-name-row { padding: 10px 24px 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; }
.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;
}

/* 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;
}
/* 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; gap: 5px;
  max-width: 30vw;
}
.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; 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;
  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;
}

/* ——— 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 tablet (≤768px) the standalone buttons move below the 2-row topright.
   On mobile (≤640px) the buttons are portaled into #shell-mp-slot instead;
   mp-has-slot hides the standalone row and repositions the popover panel. */
@media (max-width: 768px) {
  .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;
  }
  /* When buttons are in the topright slot, hide the standalone row and anchor
     the popover panel just below 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;
  }
}

/* Shell-mp-slot: invisible on desktop; display:contents on mobile so the
   portaled shell-util buttons participate directly in the topright flexbox,
   forming row 2 alongside History (📖 ♫ 🔊). */
.shell-mp-slot { display: none; }
@media (max-width: 640px) {
  .shell-mp-slot { display: contents; }
}

/* ——— 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: wrap to 3 + 2 rows on tablet/mobile ——— */
@media (max-width: 768px) {
  .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: 768px) {
  .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; }
.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; }

/* 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; }

.rtf-thirds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rtf-third {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--glass-dark);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  color: #fff;
  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: .32; cursor: not-allowed; }
.rtf-third-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-text); font-weight: 800;
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .7;
}
.rtf-third-body { display: flex; align-items: center; gap: 11px; }
.rtf-third-body .rtf-flag { font-size: 30px; }
.rtf-third-body .rtf-name { font-size: 15px; }
.rtf-third-tag {
  font-family: var(--font-text); font-weight: 800;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,.1); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
}
.rtf-third-tag.yes { background: rgba(198,242,78,.28); color: var(--lime); }
.rtf-third.mine .rtf-third-tag.yes { background: rgba(233,185,73,.3); color: var(--gold); }
.rtf-third-tag.no  { background: rgba(255,255,255,.06); opacity: .7; }
.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;
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 7px;
  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-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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  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 1fr auto; }
.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 1fr auto; }

.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-thirds-grid { grid-template-columns: repeat(3, 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) {
  .rtf-thirds-grid { grid-template-columns: repeat(2, 1fr); }
  /* 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-thirds-grid { 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); }

/* 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)));
}
/* 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: scrollable so full pitch + captain bar are reachable.
     padding-bottom clears the pinned step-foot bar (~70px). */
  .dxi-body.mob-pitch {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }
  .dxi-body.mob-pitch .xi-side {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0;
    padding-bottom: 86px; /* scroll past step-foot */
  }
  /* 4 rows × ~76px per row + pitch padding/foot ≈ 360px needed to show GK–FW */
  .dxi-body.mob-pitch .pitch { min-height: 380px; }
  .dxi-body.mob-pitch .pitch-rows { min-height: 320px; }

  /* 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) {
  .shell-body { padding-top: 116px; 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;
}

/* ——— 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 ——— */
.pts-info-modal {
  max-width: 500px;
  max-height: 88vh;
  overflow-y: auto;
}
.pts-info-sections { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.pts-info-section { display: flex; flex-direction: column; gap: 8px; }
.pts-info-heading {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
}
.pts-info-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  font-size: 13.5px;
}
.pts-info-grid span:nth-child(even) {
  text-align: right;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--lime);
  white-space: nowrap;
}
.pts-info-note {
  font-size: 12px;
  opacity: .65;
  line-height: 1.4;
}
.pts-info-boards .pts-info-board-note {
  font-size: 13.5px;
  margin: 0;
  line-height: 1.5;
}
.pts-info-boards .pts-info-board-note 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; }
}

/* ——— 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 brand lockup + crest totals ~110px tall on phones; bump padding to 130px. */
@media (max-width: 640px) {
  .shell-body { padding-top: 130px !important; }
  .step-shell.is-scrolled .shell-body { padding-top: 14px !important; }
}