:root {
  --bg: #111118;        /* slightly lifted dark */
  --bg2: #18182a;       /* card / secondary */
  --panel: #18182a;
  --gold: #f99c00;      /* 38-0 amber */
  --gold2: #fcbb00;
  --green: #00bb7f;     /* 38-0 emerald */
  --green2: #34d399;
  --red: #fb2c36;
  --text: #f1f5f9;      /* slate-100 */
  --muted: #94a3b8;     /* slate-400 */
  --line: rgba(255, 255, 255, 0.09);
  /* surfaces */
  --card: #16161f;
  --card2: #1c1c2a;
  --card3: #141420;
  --reel: #0e0e18;
  --reelbox: #131320;
  --modecard: #1e1e2c;
}

/* ===== Light (cream & gold) theme ===== */
body.light {
  --bg: #faf6ec;        /* warm cream */
  --bg2: #ffffff;
  --panel: #ffffff;
  --gold: #c8860a;      /* deeper gold for contrast on cream */
  --gold2: #e0a020;
  --green: #0a9e6e;
  --green2: #0a9e6e;
  --red: #d4283a;
  --text: #2a2620;      /* warm near-black */
  --muted: #8a8275;
  --line: rgba(200, 134, 10, 0.30);   /* gold outlines on boxes */
  --card: #fffdf7;
  --card2: #ffffff;
  --card3: #fbf6ea;
  --reel: #f6efe0;
  --reelbox: #fbf6ea;
  --modecard: #ffffff;
}
body.light {
  background:
    radial-gradient(900px 520px at 60% -5%, rgba(201,170,113,.08), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(45,106,79,.04), transparent 55%),
    #F5F3EE;
}
body.light .machine,
body.light .setup, body.light .xi, body.light .mode-card,
body.light .group-card, body.light .stats-summary, body.light .verdict-card,
body.light .score-banner, body.light .draft-head, body.light .formation-bar {
  box-shadow: 0 6px 22px rgba(120, 90, 20, 0.08);
}
body.light .machine { border-color: var(--line); }
body.light .reel { background: var(--reel); }
body.light .reel-item .year { color: var(--gold); }
body.light .pitch {
  background: linear-gradient(180deg, #f5f7f3, #edf0ea);
  border-color: var(--line);
  box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.035);
}
body.light .pitch::before { background: rgba(0, 0, 0, 0.07); }
body.light .pitch::after { border-color: rgba(0, 0, 0, 0.07); }
body.light .pdot { background: radial-gradient(circle at 50% 32%, #ffffff, #eef1ea); box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 3px 8px rgba(0,0,0,0.12); }
body.light .pdot .dot-pos { color: var(--muted); }
body.light .pdot .dot-name { color: var(--text); text-shadow: none; }
body.light .tname.me, body.light .mscore .me { color: var(--gold); }
body.light header h1 { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04)); }
body.light .setup-pitch-wrap { background: rgba(0,0,0,0.03); }
body.light .reel-box { box-shadow: inset 0 0 0 1px rgba(200,134,10,0.12); }
/* keep gold buttons' dark text in both themes (no override needed) */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(0, 187, 127, 0.10), transparent 60%),
    radial-gradient(760px 520px at 100% 0%, rgba(249, 156, 0, 0.07), transparent 55%),
    radial-gradient(900px 700px at 0% 100%, rgba(141, 84, 255, 0.06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

header {
  text-align: center;
  margin-bottom: 18px;
}
.brand { display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: opacity 0.15s; user-select: none; }
.brand:hover { opacity: 0.8; }
.brand:active { opacity: 0.6; }
.brand-icon {
  width: clamp(34px, 7vw, 46px); height: clamp(34px, 7vw, 46px);
  border-radius: 12px; flex: 0 0 auto; display: block;
}

/* Accessibility — visible keyboard focus across the app */
:focus-visible {
  outline: 2px solid #f5b301;
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible) { outline: none; }
body.light :focus-visible { outline-color: #b45309; }

/* Respect reduced-motion: stop the shimmer and long transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Light-mode contrast fixes for newer components */
body.light .lgr2-card, body.light .lgr2-narr, body.light .lgr2-xi,
body.light .lgr2-award, body.light .lgr2-ptable, body.light .lgr2-break {
  background: #fff; border-color: rgba(0,0,0,.1);
}
body.light .lgr2-narr-b, body.light .lgr2-bk-k, body.light .lgr2-name, body.light .lgr2-pt-name { color: #11131a; }
body.light .lgr2-narr-p, body.light .lgr2-meta, body.light .lgr2-k { color: rgba(0,0,0,.55); }
body.light .lgr2-num, body.light .lgr2-v, body.light .lgr2-aw-name { color: #11131a; }
body.light .lgr2-verdict.good, body.light .lgr2-num.good, body.light .lgr2-bk-v { color: #1f9d4d; }
body.light .lgr2-verdict.bad, body.light .lgr2-num.bad { color: #d63b3b; }
body.light .lgr2-share { background: #11a86a; color: #fff; box-shadow: none; }
body.light .lg-modal-close { background: rgba(0,0,0,.06); color: #11131a; }
body.light .lg-msel-name, body.light .lg-modal-title { color: #11131a; }
body.light .lg-msel-row:hover { background: rgba(0,0,0,.04); }
body.light .lg-live-tally .lt-rec { color: #11131a; }
body.light .reel-item-noflag .name { color: #11131a; }

header h1 {
  margin: 0;
  font-size: clamp(30px, 6.5vw, 50px);
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(110deg, #fde68a, #f59e0b 25%, #fffbeb 50%, #f59e0b 75%, #fde68a);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  to { background-position: 220% center; }
}

header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- Slot machine ---------- */
.machine {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0, 187, 127, 0.07), transparent 60%),
    linear-gradient(180deg, var(--card2), var(--card3));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 22px;
}

.reels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.reel-box {
  background: var(--reelbox);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}

.reel-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 700;
}

.reel {
  position: relative;
  height: 96px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6), transparent 22%, transparent 78%, rgba(0,0,0,0.6)),
    var(--reel);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* center selection line */
.reel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 96px;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, 0.35);
  border-radius: 10px;
}

.reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.reel-item {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  font-weight: 700;
}

.reel-item .flag { font-size: 40px; line-height: 1; }
/* Flag-free reels (League / Multiplayer): give the club column more room and
   let the name fill the space the flag used to take, fitting long club names. */
#leagueView .reels, #mpView .reels { grid-template-columns: 1.45fr 1fr; }
.reel-item-noflag .name {
  font-size: clamp(16px, 4.4vw, 26px);
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  padding: 0 12px;
  max-width: 100%;
  word-break: break-word;
}
.reel-item .name { font-size: 18px; text-align: center; width: 100%; display: block; font-weight: 800; letter-spacing: 0.5px; }
.reel-item .year { font-size: 34px; color: var(--green); letter-spacing: 2px; }

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

button.spin {
  appearance: none;
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 26px;
  border-radius: 999px;
  color: var(--btn-primary-fg, #fff);
  background: var(--btn-primary-bg, linear-gradient(180deg, #9A82FF, #6A47ED));
  box-shadow: 0 8px 22px rgba(124,92,252,0.38), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.06s ease, filter 0.2s ease;
}
button.spin:hover { filter: brightness(1.05); }
button.spin:active { transform: translateY(2px); }
button.spin:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }

.hint {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
  min-height: 18px;
}

/* ---------- Squad picker ---------- */
/* Squad picker — full-screen modal overlay */
.squad {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(11, 16, 32, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
  animation: fl-fade-in 0.18s ease;
}
@keyframes fl-fade-in { from { opacity: 0; } to { opacity: 1; } }

.squad-card {
  background: var(--surface, #1b2340);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 20px 20px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  overscroll-behavior: contain;
}

.squad-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.squad-head h2 {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.squad-head h2 .flag { font-size: 22px; }
.squad-close {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  border-radius: 50%;
  width: 44px; height: 44px;
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.squad-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.squad .sub, .squad-card .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

.players {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Position group headers inside squad picker */
.squad-group-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: 10px 2px 4px; margin-top: 4px;
}
.squad-group-label.GK  { color: #FFD700; }
.squad-group-label.DEF { color: #4FC96A; }
.squad-group-label.MID { color: #4FC3F7; }
.squad-group-label.FWD { color: #FF6B7A; }
.squad-group-label:first-child { margin-top: 0; padding-top: 2px; }

.player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}
.player:hover { transform: translateY(-2px); border-color: rgba(0,187,127,0.5); background: var(--card2); box-shadow: 0 0 0 1px rgba(0,187,127,0.12); }
.player.taken { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.player .pos {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 11px; font-weight: 800;
}
.pos.GK  { background: rgba(255, 215, 0, 0.18);   color: #FFD700; }   /* gold */
.pos.DEF { background: rgba(79, 201, 106, 0.16);  color: #4FC96A; }   /* green */
.pos.MID { background: rgba(79, 195, 247, 0.18);  color: #4FC3F7; }   /* sky blue */
.pos.FWD { background: rgba(255, 107, 122, 0.18); color: #FF6B7A; }   /* coral/red */
.player { align-items: flex-start; }
.player-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.player-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.player .pname { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.25; word-break: break-word; }
.player-sub { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.player-era { font-size: 11px; color: var(--muted); white-space: nowrap; }
.player-flavour { font-size: 11px; color: var(--muted); opacity: 0.75; line-height: 1.4; }

.empty-note { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* ---------- Your XI ---------- */
.xi {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(0, 187, 127, 0.08), transparent 55%),
    linear-gradient(180deg, var(--card2), var(--card3));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}
.xi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.xi-head h2 { margin: 0; font-size: 20px; }
.xi-head .count { color: var(--green); font-weight: 800; }
.xi-head .formation { color: var(--muted); font-size: 13px; }

.xi-list { display: grid; gap: 8px; }
.xi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.xi-row .pos { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.xi-row .info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xi-row .info .pn { font-weight: 700; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xi-row .info .meta { color: var(--muted); font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xi-row .remove {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; cursor: pointer; padding: 4px 9px; font-size: 12px;
}
.xi-row .remove:hover { color: var(--red); border-color: var(--red); }

.xi-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; font-weight: 600; font-size: 14px;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.done-banner {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(6,214,160,0.18), rgba(255,209,102,0.18));
  border: 1px solid rgba(6,214,160,0.4);
  font-weight: 700;
  text-align: center;
}

footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 28px; }

@media (max-width: 540px) {
  .reel-item .flag { font-size: 32px; }
  .reel-item .name { font-size: 15px; }
  .reel-item .year { font-size: 28px; }
}

/* ---------- Mode cards ---------- */
.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 10px;
}
.mode-card {
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  color: var(--text);
  background: linear-gradient(180deg, var(--modecard), var(--card3));
  transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.mode-card:hover { transform: translateY(-3px); border-color: rgba(249,156,0,0.5); box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.mode-emoji { font-size: 40px; }
.mode-title { font-size: 20px; font-weight: 800; margin: 8px 0 6px; }
.mode-desc { color: var(--muted); font-size: 14px; line-height: 1.45; }

.back {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 14px; margin-bottom: 14px;
}
.back:hover { color: var(--gold); border-color: var(--gold); }

.btn-primary {
  background: var(--btn-primary-bg, linear-gradient(180deg, #9A82FF 0%, #6A47ED 100%)); color: var(--btn-primary-fg, #fff);
  border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  font-weight: 800; font-size: 14px;
  box-shadow: 0 6px 18px rgba(124,92,252,0.3);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); box-shadow: none; }

.rating-note { margin-top: 12px; color: var(--green); font-size: 13px; font-weight: 700; min-height: 16px; }

/* ---------- Results ---------- */
.results-head { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 8px; }
.res-title { margin: 6px 0 14px; font-size: 22px; }

/* Results + board: Home button fixed top-left like draft */
#resultsHomeBtn, #boardBack {
  position: fixed; top: 18px; left: 20px;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 5px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; z-index: 200;
  transition: color 0.15s, border-color 0.15s;
}
#resultsHomeBtn:hover, #boardBack:hover { color: var(--text); border-color: var(--line-strong); }
#resultsView, #boardView { padding-top: 52px; }
.loading { padding: 40px; text-align: center; color: var(--muted); font-size: 16px; }
.champion {
  background: linear-gradient(90deg, rgba(255,209,102,0.18), rgba(6,214,160,0.18));
  border: 1px solid rgba(255,209,102,0.4); border-radius: 12px;
  padding: 14px 16px; font-size: 16px; margin-bottom: 18px;
}
.sec { margin: 22px 0 10px; font-size: 17px; color: var(--gold); }
.legend { color: var(--muted); font-size: 12px; margin: 0 0 12px; display: flex; gap: 16px; align-items: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.dot.qd { background: rgba(6,214,160,0.6); }
.dot.td { background: rgba(255,209,102,0.6); }

.tname { font-weight: 600; }
.tname.me { color: var(--gold); font-weight: 800; }
.sc { color: var(--muted); }

/* groups */
.grid-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.group-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.group-name { font-weight: 800; color: var(--gold); margin-bottom: 8px; font-size: 14px; }
table.mini { width: 100%; border-collapse: collapse; font-size: 12px; }
table.mini th { color: var(--muted); font-weight: 600; text-align: center; padding: 2px 3px; }
table.mini td { text-align: center; padding: 4px 3px; border-top: 1px solid var(--line); }
table.mini td.tcell { text-align: left; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.mini tr.qual td { background: rgba(6,214,160,0.08); }
table.mini tr.third td { background: rgba(255,209,102,0.07); }

/* bracket */
.bracket { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.round { flex: 0 0 auto; min-width: 200px; }
.round-name { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 8px; }
.tie { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; font-size: 12px; }
.tie .side { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; opacity: 0.6; }
.tie .side.win { opacity: 1; }
.tie .side.win b { color: var(--green); }
.tie .pens { color: var(--muted); font-size: 11px; }

/* league */
table.league { width: 100%; border-collapse: collapse; font-size: 13px; }
table.league th { color: var(--muted); font-weight: 600; text-align: center; padding: 6px 5px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg2); }
table.league td { text-align: center; padding: 6px 5px; border-top: 1px solid var(--line); }
table.league td.tcell { text-align: left; }
table.league tr.top-row td { background: rgba(255,209,102,0.08); }
table.league tr.me-row td { background: rgba(255,209,102,0.16); }

@media (max-width: 600px) {
  .modes { grid-template-columns: 1fr; }
}

/* ---------- Install button ---------- */
.install-btn {
  margin-top: 12px;
  background: rgba(0, 187, 127, 0.12);
  color: var(--green2);
  border: 1px solid rgba(0, 187, 127, 0.45);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.install-btn:hover { background: rgba(0, 187, 127, 0.2); }

/* ---------- Setup (team name + manager) ---------- */
.setup {
  background: linear-gradient(180deg, var(--card2), var(--card3));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
  display: grid;
  gap: 14px;
}
.setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setup-row-col { flex-direction: column; align-items: stretch; }
.setup-label {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); font-weight: 800; flex: 0 0 auto;
}
.setup-row-col .setup-label { margin-bottom: 2px; }
.team-name-input {
  flex: 1 1 auto;
  min-width: 180px;
  background: var(--reel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
}
.team-name-input::placeholder { color: var(--muted); font-weight: 500; }
.team-name-input:focus { outline: none; border-color: rgba(124,92,252,0.6); box-shadow: 0 0 0 3px rgba(124,92,252,0.12); }

.manager-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.manager-opt {
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--text);
  transition: all 0.12s ease;
  flex: 0 0 auto;
}
.manager-opt:hover { border-color: rgba(124,92,252,0.5); background: rgba(124,92,252,0.06); }
.manager-opt.active {
  border-color: var(--primary);
  background: rgba(124,92,252,0.14);
  box-shadow: 0 2px 10px rgba(124,92,252,0.2);
}
.mgr-emoji { font-size: 18px; line-height: 1; }
.mgr-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; }
.mgr-icon svg { width: 18px; height: 18px; }
.mgr-name { font-size: 12px; font-weight: 700; text-align: left; line-height: 1.2; }
.manager-desc { color: var(--green2); font-size: 13px; font-weight: 600; min-height: 16px; }

/* ---------- Formation bar ---------- */
.formation-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, var(--card2), var(--card3));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.formation-bar-label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}
.formation-options { display: flex; gap: 8px; flex-wrap: wrap; }
.formation-opt {
  background: var(--card);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.formation-opt:hover { color: var(--text); border-color: rgba(0,187,127,0.45); }
.formation-opt.active {
  background: rgba(0,187,127,0.11);
  color: var(--green2);
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(0,187,127,0.18);
}

/* ---------- Slot-based XI ---------- */
.line-label {
  margin: 12px 0 6px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.line-label:first-child { margin-top: 0; }
.line-count { color: var(--green2); margin-left: 4px; }
.xi-row.empty { opacity: 0.55; border-style: dashed; }
.xi-row.empty .pos { opacity: 0.5; }
.slot-empty { color: var(--muted); font-style: italic; font-weight: 500; }
.player.noslot { opacity: 0.45; cursor: not-allowed; }
.player.noslot:hover { transform: none; border-color: var(--line); background: var(--card); }
.slot-tag {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red);
  font-weight: 800;
}

.table-scroll { overflow-x: auto; }

/* ---------- User fixtures (focused league view) ---------- */
.legend-note { color: var(--muted); font-size: 12px; font-weight: 500; }
.fixtures { display: grid; gap: 6px; margin-bottom: 14px; }
.fixture {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 14px;
}
.fixture .fnum { color: var(--muted); font-size: 12px; width: 20px; text-align: right; }
.fixture .opp { flex: 1; }
.fixture .fscore { font-weight: 800; }
.fixture.W { border-left: 3px solid var(--green2); }
.fixture.D { border-left: 3px solid var(--muted); }
.fixture.L { border-left: 3px solid var(--red); }
.pill {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 11px; font-weight: 800;
}
.pill.W { background: rgba(0, 187, 127, 0.2); color: var(--green2); }
.pill.D { background: rgba(148, 163, 184, 0.2); color: var(--muted); }
.pill.L { background: rgba(251, 44, 54, 0.2); color: #ff6568; }

/* ---------- Ratings segmented toggle ---------- */
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.seg::-webkit-scrollbar { display: none; }
.seg-opt { background: transparent; color: var(--muted); border: none; cursor: pointer; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.seg-opt.active { background: rgba(0,187,127,0.14); color: var(--green2); }
.seg-desc { color: var(--muted); font-size: 13px; min-height: 16px; }

/* ---------- Start / link buttons ---------- */
.start-btn {
  margin-top: 6px;
  background: linear-gradient(180deg, #9A82FF, #6A47ED);
  color: #fff; border: none; border-radius: 999px;
  padding: 11px 22px; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
}
.start-btn:hover { filter: brightness(1.05); }
.link-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 6px; text-decoration: underline; }
.link-btn:hover { color: var(--gold); }

/* ---------- Pitch visual ---------- */
.setup-pitch-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pitch-title { font-size: 14px; font-weight: 800; color: var(--gold); letter-spacing: 1px; }
.pitch {
  width: 100%; max-width: 320px; aspect-ratio: 3 / 4;
  display: flex; flex-direction: column; justify-content: space-around;
  padding: 14px 10px; border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 40px),
    radial-gradient(120% 80% at 50% 0%, rgba(0,187,127,0.18), transparent 60%),
    linear-gradient(180deg, #0c1a12, #08120c);
  border: 1px solid rgba(0, 187, 127, 0.22);
}
.pitch-row { display: flex; justify-content: space-around; align-items: center; }
.pdot {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.25);
}
.pdot .dot-pos { font-size: 10px; font-weight: 800; color: var(--muted); }
.pdot.filled { border-style: solid; }
.pdot.filled.GK  { background: linear-gradient(180deg,#ffe08a,#f99c00); border-color:#f99c00; }
.pdot.filled.DEF { background: linear-gradient(180deg,#34d399,#00bb7f); border-color:#00bb7f; }
.pdot.filled.MID { background: linear-gradient(180deg,#8fb4ff,#5b8def); border-color:#5b8def; }
.pdot.filled.FWD { background: linear-gradient(180deg,#ff8a9c,#ef476f); border-color:#ef476f; }
.pdot .dot-name {
  position: absolute; top: 100%; margin-top: 2px;
  font-size: 9px; font-weight: 700; color: var(--text);
  white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}
.pdot .dot-rate { font-size: 13px; font-weight: 900; color: #0a0a0f; }

/* ---------- Draft header ---------- */
/* ---------- Draft page layout ---------- */
.draft-corner-home {
  position: fixed; top: 18px; left: 20px;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 5px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: color var(--dur-1), border-color var(--dur-1);
  z-index: 200;
}
.draft-corner-home:hover { color: var(--text); border-color: var(--line-strong); }

#draftView { position: relative; padding-top: 52px; }

.draft-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  align-items: stretch;
}
.draft-left { display: flex; flex-direction: column; gap: 10px; }
.draft-right { position: sticky; top: 8px; max-height: calc(100vh - 80px); overflow-y: auto; }
.draft-right .xi { padding: 12px; border-radius: 12px; }
.draft-right .xi-head { margin-bottom: 8px; }
.draft-right .xi-head h2 { font-size: 16px; }
.draft-right .xi-list { gap: 4px; }
.draft-right .xi-row { padding: 6px 10px; border-radius: 8px; gap: 8px; }
.draft-right .xi-row .pos { width: 26px; height: 26px; font-size: 9px; border-radius: 6px; }
.draft-right .xi-row .info .pn { font-size: 12px; }
.draft-right .xi-row .info .meta { font-size: 11px; }
.draft-right .squad-group-label { font-size: 9px; padding: 6px 2px 2px; margin-top: 2px; }

.draft-pitch-header { margin-bottom: 8px; }
.draft-team { font-size: 20px; font-weight: 900; }
.draft-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }

.draft-pitch-wrap { flex: 1 1 auto; }
.draft-pitch-wrap .pitch { width: 100%; max-width: 100%; height: 100%; max-height: none; padding: 10px 8px; aspect-ratio: unset; }
.draft-pitch-wrap .pdot { width: 32px; height: 32px; border-width: 1.5px; border-style: solid; margin-bottom: 14px; }
.draft-pitch-wrap .pdot .dot-rate { font-size: 8px; }
.draft-pitch-wrap .pdot .dot-name { display: block; font-size: 8px; max-width: 52px; }
.draft-pitch-wrap .pdot .dot-pos { font-size: 8px; }
.draft-pitch-wrap .pdot .dot-init { font-size: 9px; }

.draft-under-spin {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line);
}

/* Compact machine inside draft layout */
.draft-left .machine { padding: 14px; margin-bottom: 0; border-radius: 14px; }
.draft-left .reels { gap: 10px; }
.draft-left .reel { height: 72px; }
.draft-left .reel::after { height: 72px; }
.draft-left .reel-item { height: 72px; font-size: 13px; }
.draft-left .reel-item .flag { font-size: 26px; }
.draft-left .reel-item .name { font-size: 13px; }
.draft-left .reel-item .year { font-size: 24px; }
.draft-left .controls { margin-top: 10px; gap: 8px; }
.draft-left .spin { padding: 10px 24px; font-size: 15px; }
.draft-left .hint { font-size: 12px; margin-top: 6px; }

/* old draft-head no longer used but keep for safety */
.draft-head { display: none; }

/* ---------- Reroll + rating badges ---------- */
.reroll {
  background: rgba(141, 84, 255, 0.16); color: #b69bff;
  border: 1px solid rgba(141, 84, 255, 0.5); border-radius: 999px;
  padding: 8px 16px; font-weight: 800; font-size: 13px; cursor: pointer;
}
.reroll:hover { background: rgba(141, 84, 255, 0.26); }
.reroll:disabled { opacity: 0.5; cursor: not-allowed; }
.rate-badge { margin-left: auto; background: rgba(249, 156, 0, 0.16); color: var(--gold); border-radius: 6px; padding: 2px 7px; font-size: 12px; font-weight: 800; }
.xi-rate { color: var(--gold); font-weight: 800; font-size: 13px; }

@media (max-width: 720px) {
  .draft-layout { grid-template-columns: 1fr; }
  .draft-right { display: none; }
}


/* ---------- Position chooser ---------- */
.chooser {
  background: rgba(249, 156, 0, 0.1); border: 1px solid rgba(249, 156, 0, 0.4);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px;
}
.choose-pos { border: none; border-radius: 8px; padding: 7px 12px; font-weight: 800; font-size: 13px; cursor: pointer; color: #0a0a0f; }
.choose-pos.GK  { background: #f99c00; }
.choose-pos.DEF { background: #00bb7f; }
.choose-pos.MID { background: #5b8def; color: #fff; }
.choose-pos.FWD { background: #ef476f; color: #fff; }
.choose-cancel { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }

/* ---------- Match cards (user journey) ---------- */
.champion.big { font-size: 18px; }
.journey { display: grid; gap: 10px; margin-bottom: 14px; }
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; border-left: 3px solid var(--muted); }
.mcard.W { border-left-color: var(--green2); }
.mcard.D { border-left-color: var(--muted); }
.mcard.L { border-left-color: var(--red); }
.mcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mround { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.mscore { font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mscore .me { font-weight: 800; color: var(--gold); }
.mscore b { font-size: 17px; }
.mscore .oppname { font-weight: 600; }
.mscorers { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.goal { font-size: 13px; color: var(--text); }
.goal .assist { color: var(--muted); font-size: 12px; }
.mclean { margin-top: 6px; font-size: 12px; color: var(--green2); font-weight: 700; }

/* ---------- Stats summary ---------- */
.stats-summary { background: linear-gradient(180deg, var(--card2), var(--card3)); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 18px; }
.stats-summary .sec { margin-top: 0; }
.stat-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; justify-content: center; }
.stat-pill { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--muted); }
.stat-pill b { color: var(--text); font-size: 15px; margin-left: 4px; }
.stat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.stat-col { min-width: 0; overflow: hidden; }
.stat-h { font-size: 13px; font-weight: 800; color: var(--gold); margin-bottom: 8px; text-align: center; }
.stat-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--line); min-width: 0; }
.stat-row .sp { flex: 0 0 30px; font-size: 10px; font-weight: 800; padding: 2px 0; text-align: center; border-radius: 5px; }
.stat-row .sp.GK { background: rgba(249,156,0,0.18); color: var(--gold); }
.stat-row .sp.DEF { background: rgba(0,187,127,0.16); color: var(--green2); }
.stat-row .sp.MID { background: rgba(91,141,239,0.18); color: #8fb4ff; }
.stat-row .sp.FWD { background: rgba(239,71,111,0.18); color: #ff8a9c; }
.stat-row .sn { flex: 1 1 0; font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-row .sv { flex: 0 0 auto; font-weight: 800; color: var(--gold); font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-empty { color: var(--muted); padding: 6px 0; }
@media (max-width: 480px) { .stat-cols { grid-template-columns: 1fr; } }

/* ===== Bigger draft pitch + initials ===== */
.dot-init { font-size: 14px; font-weight: 900; color: #0a0a0f; line-height: 1; }
.pdot .dot-postag { font-size: 8px; font-weight: 900; line-height: 1; color: rgba(10, 10, 15, 0.72); letter-spacing: 0.3px; margin-bottom: 1px; }
.draft-pitch-wrap .pdot .dot-postag { font-size: 7px; }
.draft-pitch-wrap { align-self: stretch; width: 100%; }
.draft-pitch-wrap .pitch { width: 100%; max-width: 100%; max-height: none; height: 100%; padding: 10px; margin: 0; aspect-ratio: unset; }
.draft-pitch-wrap .pdot { width: 32px; height: 32px; border-width: 1.5px; border-style: solid; margin-bottom: 14px; }
.draft-pitch-wrap .pdot .dot-init { font-size: 9px; }
.draft-pitch-wrap .pdot .dot-name { display: block; font-size: 8px; max-width: 52px; }
.draft-pitch-wrap .pdot .dot-pos { font-size: 8px; }
.draft-team { font-size: 22px; }

/* ===== 38-0-style slot machine ===== */
.machine {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(249,156,0,0.08), transparent 55%),
    linear-gradient(180deg, #16131a, #0c0b10);
  border: 1px solid rgba(249, 156, 0, 0.22);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
.reel-box { background: var(--reelbox); border-color: rgba(255,255,255,0.06); }
.reel {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.75), transparent 26%, transparent 74%, rgba(0,0,0,0.75)),
    #050409;
}
.reel::after {
  box-shadow:
    inset 0 0 0 2px rgba(249, 209, 102, 0.55),
    0 0 18px rgba(249, 156, 0, 0.25);
  border-radius: 8px;
  background: linear-gradient(180deg, transparent 46%, rgba(249,156,0,0.10) 50%, transparent 54%);
}
.reel-label { color: var(--gold); }
.reel-item .name { text-transform: uppercase; letter-spacing: 1px; font-size: 16px; }
.reel-item .flag { font-size: 44px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
.reel-item .year { color: var(--gold); }

/* ===== Pool segmented (reuse .seg) — already styled ===== */

/* ===== Score banner ===== */
.score-banner {
  background: linear-gradient(90deg, rgba(249,156,0,0.22), rgba(0,187,127,0.18));
  border: 1px solid rgba(249,156,0,0.5); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px; font-size: 18px; font-weight: 700;
}
.score-banner b { font-size: 26px; color: var(--gold); }
.score-banner span { color: var(--muted); font-size: 14px; font-weight: 500; }

/* ===== Results header buttons ===== */
.results-head-right { display: flex; gap: 8px; }

/* Buttons injected under the summary stats block — 50/50 grid */
.result-under-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 8px;
}
.result-under-summary #shareXIBtn {
  background: rgba(0,187,127,0.14) !important;
  color: var(--green2) !important;
  border: 1px solid rgba(0,187,127,0.5) !important;
  border-radius: 12px !important;
  font-weight: 700;
  min-height: 48px;
}
.result-under-summary #shareXIBtn:hover { background: rgba(0,187,127,0.24) !important; }
.result-under-summary #boardBtn {
  background: rgba(249,156,0,0.14) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(249,156,0,0.5) !important;
  border-radius: 12px !important;
  font-weight: 700;
  min-height: 48px;
}
.result-under-summary #boardBtn:hover { background: rgba(249,156,0,0.24) !important; }

/* Bottom CTA: Home left, Leaderboards right */
.result-bottom-cta { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-bottom: 3rem; }

/* ===== Leaderboards ===== */
.board-tabs { margin-bottom: 12px; width: 100%; }
.board-tabs.seg { border-radius: 12px; }

.board-list { display: grid; gap: 4px; }
.board-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; transition: background 0.12s;
}
.board-row:hover { background: var(--card2); }
.board-row.top3 { border-color: rgba(249,156,0,0.35); background: rgba(249,156,0,0.06); }
.board-row.top3:hover { background: rgba(249,156,0,0.10); }

/* rank medal */
.board-row .brank {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; flex-shrink: 0;
  background: var(--card2); color: var(--muted);
}
.board-row:nth-child(1) .brank { background: rgba(255,215,0,0.18); color: #ffd700; }
.board-row:nth-child(2) .brank { background: rgba(192,192,192,0.18); color: #c0c0c0; }
.board-row:nth-child(3) .brank { background: rgba(205,127,50,0.18); color: #cd7f32; }

.board-row .bname { flex: 1; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.board-row .bres { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; max-width: 38%; }
.board-row .bscore { font-weight: 900; color: var(--gold); font-size: 17px; flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* ===== Home (two-button landing, 38-0 style) ===== */
.home-hero {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 30px 16px 10px; text-align: center;
}
.home-tag { color: var(--muted); font-size: 15px; max-width: 420px; margin: 0 0 6px; line-height: 1.5; }
.home-play { width: 100%; max-width: 340px; font-size: 20px; padding: 18px 22px; }
.home-secondary {
  width: 100%; max-width: 340px;
  background: var(--card2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 15px 22px; font-size: 16px; font-weight: 800; cursor: pointer;
  transition: all 0.12s ease;
}
.home-secondary:hover { border-color: var(--green2); color: var(--green2); }

/* ===== Two-button toggles (neater than the old segmented look) ===== */
.toggle2 { display: flex; gap: 10px; width: 100%; }
.tg-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 10px; cursor: pointer; color: var(--muted); font-weight: 700;
  transition: all 0.12s ease;
}
.tg-opt:hover { border-color: rgba(0,187,127,0.4); color: var(--text); }
.tg-opt.active { border-color: var(--green); background: rgba(0,187,127,0.10); color: var(--green2); box-shadow: 0 4px 14px rgba(0,187,127,0.15); }
.tg-emoji { font-size: 22px; line-height: 1; }
.tg-text { font-size: 13px; }

/* ===== Auto-pick + accent buttons ===== */
.autopick {
  background: rgba(0,187,127,0.16); color: var(--green2);
  border: 1px solid rgba(0,187,127,0.5); border-radius: 999px;
  padding: 12px 18px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.autopick:hover { background: rgba(0,187,127,0.26); }
.btn-accent {
  background: rgba(0,187,127,0.16); color: var(--green2);
  border: 1px solid rgba(0,187,127,0.5); border-radius: 999px;
  padding: 10px 18px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.btn-accent:hover { background: rgba(0,187,127,0.26); }
.btn-accent:disabled { opacity: 0.4; cursor: not-allowed; }

.locked-note { color: var(--muted); font-size: 13px; font-weight: 700; }

.stage-badge {
  display: inline-block; background: rgba(249,156,0,0.15); color: var(--gold);
  border: 1px solid rgba(249,156,0,0.4); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 16px;
}
#resultsView .start-btn { width: 100%; max-width: 360px; display: block; margin: 18px auto 0; }

/* position badge in the picker fits granular labels (e.g. LW/LM) */
.player .pos { width: auto; min-width: 34px; padding: 0 7px; }

.bracket-champion { font-size: 13px; color: var(--gold); font-weight: 600; margin-top: 4px; padding: 6px 8px; background: rgba(245,180,60,0.10); border: 1px solid rgba(245,180,60,0.30); border-radius: 6px; }

/* highlight the user's ties in the knockout bracket */
.tie.user-tie {
  border-color: var(--gold);
  background: rgba(249, 156, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(249,156,0,0.35), 0 6px 16px rgba(249,156,0,0.15);
}

/* neater setup spacing */
.setup { gap: 16px; padding: 18px; }
.setup-pitch-wrap { background: rgba(0,0,0,0.18); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }

/* ===== Difficulty selector ===== */
.formation-opt .diff-rr { font-size: 11px; opacity: 0.85; margin-left: 2px; }

/* ===== Score breakdown ===== */
.sb-top { font-size: 18px; font-weight: 700; }
.sb-top b { font-size: 28px; color: var(--gold); }
.sb-top span { color: var(--muted); font-size: 14px; font-weight: 500; }
.sb-break { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px; display: grid; gap: 5px; }
.sb-break-h { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); font-weight: 800; margin-bottom: 3px; }
.sb-row { display: flex; justify-content: space-between; font-size: 13px; gap: 12px; }
.sb-row > span:first-child { color: var(--muted); }
.sb-row .pos { color: var(--green2); font-weight: 800; }
.sb-row .neg { color: #ff6568; font-weight: 800; }

/* ===== Knockout round-by-round results ===== */
.stage-badge { display: inline-block; background: rgba(249,156,0,0.15); color: var(--gold); border: 1px solid rgba(249,156,0,0.4); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.ko-round-block { margin-bottom: 18px; }
.ko-all-h { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 800; margin: 10px 0 6px; }
.ko-results { display: grid; gap: 5px; }
.ko-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.ko-line.user { border-color: var(--gold); background: rgba(249,156,0,0.1); }
.ko-line .ko-t { display: flex; align-items: center; gap: 4px; opacity: 0.65; min-width: 0; }
.ko-line .ko-t .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ko-line .ko-t.w { opacity: 1; font-weight: 700; }
.ko-line .ko-t:last-child { justify-content: flex-end; text-align: right; }
.ko-line .ko-sc { font-weight: 800; color: var(--text); white-space: nowrap; }

/* ===== Formation pitch — roomier, restyled tokens ===== */
.pitch {
  max-width: 380px; padding: 24px 18px; gap: 12px; justify-content: space-evenly;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 50px),
    radial-gradient(130% 80% at 50% 0%, rgba(0,187,127,0.16), transparent 62%),
    linear-gradient(180deg, #0e2018, #07120c);
  border: 1px solid rgba(0,187,127,0.28);
  box-shadow: inset 0 0 46px rgba(0,0,0,0.45);
}
.pitch-row { margin: 6px 0; }
.pdot {
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: radial-gradient(circle at 50% 32%, #1c2c23, #0b1610);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.14), 0 4px 11px rgba(0,0,0,0.5);
}
.pdot .dot-pos { font-size: 11px; color: var(--muted); font-weight: 800; }
.pdot.filled { box-shadow: 0 0 0 2.5px currentColor, 0 5px 13px rgba(0,0,0,0.55); }
.pdot.filled.GK  { background: radial-gradient(circle at 50% 32%, #ffe4a3, #f99c00); color: #f9c04a; }
.pdot.filled.DEF { background: radial-gradient(circle at 50% 32%, #5fe6ba, #00bb7f); color: #2ee0a6; }
.pdot.filled.MID { background: radial-gradient(circle at 50% 32%, #a9c2ff, #5b8def); color: #8fb4ff; }
.pdot.filled.FWD { background: radial-gradient(circle at 50% 32%, #ffaab8, #ef476f); color: #ff8a9c; }
.pdot.filled .dot-init { color: #0a0a0f; font-size: 15px; }
.pdot.filled .dot-postag { color: rgba(10,10,15,0.7); }
.pdot .dot-name { font-size: 9.5px; max-width: 64px; }
.draft-pitch-wrap .pitch { max-width: 100%; max-height: none; height: 100%; padding: 10px; aspect-ratio: unset; }
.draft-pitch-wrap .pdot { width: 32px; height: 32px; border-style: solid; margin-bottom: 14px; }
.draft-pitch-wrap .pdot .dot-init { font-size: 9px; }
.draft-pitch-wrap .pdot .dot-name { display: block; font-size: 8px; max-width: 52px; }

/* ===== Year / era selector ===== */
.year-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.year-chip {
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all 0.12s ease;
}
.year-chip:hover { border-color: rgba(0,187,127,0.5); color: var(--text); }
.year-chip.on { background: rgba(0,187,127,0.15); color: var(--green2); border-color: rgba(0,187,127,0.6); }

/* ===== League verdict card ===== */
.verdict-card {
  background: linear-gradient(180deg, var(--card2), var(--card3)); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px; margin-bottom: 18px;
}
.vc-row { display: flex; flex-wrap: wrap; gap: 14px; }
.vc-cell { flex: 1 1 auto; min-width: 90px; }
.vc-k { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.vc-v { font-size: 22px; font-weight: 900; color: var(--gold); }
.vc-comment { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; }

/* ===== Footer (disclaimer + actions) ===== */
footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 36px; }
.footer-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.foot-btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  background: var(--card2); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700;
}
.foot-btn:hover { border-color: var(--gold); color: var(--gold); }
.foot-btn.coffee { border-color: rgba(249,156,0,0.5); color: var(--gold); }
.foot-btn.coffee:hover { background: rgba(249,156,0,0.12); }
.foot-credit { margin: 0 0 10px; font-size: 13px; }
.foot-credit a { color: var(--green2); }
.foot-disclaimer { max-width: 640px; margin: 0 auto; line-height: 1.6; color: #6b7a90; font-size: 11.5px; }

/* ===== Remove slot-machine centre payline ===== */
.reel::after { display: none !important; }

/* ===== Premium formation pitch ===== */
@keyframes dotPopIn {
  from { transform: scale(0.35); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes dotGlow {
  0%,100% { box-shadow: var(--pdot-shadow), 0 0 8px var(--pdot-color); }
  50%      { box-shadow: var(--pdot-shadow), 0 0 18px var(--pdot-color); }
}
.pitch {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='2' x2='100' y2='2' stroke='%2322E0C8' stroke-opacity='0.18' stroke-width='0.45'/%3E%3Cpath d='M 31 2 A 19 19 0 0 1 69 2' fill='none' stroke='%2322E0C8' stroke-opacity='0.15' stroke-width='0.45'/%3E%3Ccircle cx='50' cy='2' r='1.2' fill='%2322E0C8' fill-opacity='0.2'/%3E%3Crect x='22' y='68' width='56' height='30' fill='none' stroke='%2322E0C8' stroke-opacity='0.13' stroke-width='0.4'/%3E%3Crect x='36' y='83' width='28' height='15' fill='none' stroke='%2322E0C8' stroke-opacity='0.09' stroke-width='0.28'/%3E%3Ccircle cx='50' cy='78' r='1.2' fill='%2322E0C8' fill-opacity='0.2'/%3E%3Cpath d='M 34 68 A 19 19 0 0 1 66 68' fill='none' stroke='%2322E0C8' stroke-opacity='0.13' stroke-width='0.4'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #101820 0%, #090f18 100%);
  border: 1px solid rgba(34, 224, 200, 0.14);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 60px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.5);
  position: relative;
}
.pitch::before, .pitch::after { display: none; }
.pitch-row { position: relative; z-index: 1; }
/* Glassy empty dot */
.pdot {
  background: rgba(11, 16, 32, 0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(34, 224, 200, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* Filled dots: glass tint per position with pop-in */
.pdot.filled {
  border-style: solid !important;
  animation: dotPopIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}
.pdot.filled.GK  {
  --pdot-color: #F5B43C; --pdot-shadow: 0 0 0 2px rgba(245,180,60,0.45), 0 4px 14px rgba(0,0,0,0.5);
  background: rgba(245,180,60,0.22) !important;
  border-color: rgba(245,180,60,0.55) !important;
  box-shadow: var(--pdot-shadow) !important;
}
.pdot.filled.DEF {
  --pdot-color: #22E0C8; --pdot-shadow: 0 0 0 2px rgba(34,224,200,0.4), 0 4px 14px rgba(0,0,0,0.5);
  background: rgba(34,224,200,0.18) !important;
  border-color: rgba(34,224,200,0.5) !important;
  box-shadow: var(--pdot-shadow) !important;
}
.pdot.filled.MID {
  --pdot-color: #7C5CFC; --pdot-shadow: 0 0 0 2px rgba(124,92,252,0.45), 0 4px 14px rgba(0,0,0,0.5);
  background: rgba(124,92,252,0.22) !important;
  border-color: rgba(124,92,252,0.55) !important;
  box-shadow: var(--pdot-shadow) !important;
}
.pdot.filled.FWD {
  --pdot-color: #FF7A59; --pdot-shadow: 0 0 0 2px rgba(255,122,89,0.45), 0 4px 14px rgba(0,0,0,0.5);
  background: rgba(255,122,89,0.22) !important;
  border-color: rgba(255,122,89,0.55) !important;
  box-shadow: var(--pdot-shadow) !important;
}
/* Rating tier colours for dot-init text */
.pdot.filled .dot-init      { color: #e8eeff; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.pdot.filled.r-gold  .dot-init { color: #F5B43C; text-shadow: 0 0 8px rgba(245,180,60,0.7); }
.pdot.filled.r-elite .dot-init { color: #FF4D8B; text-shadow: 0 0 8px rgba(255,77,139,0.6); }
.pdot.filled.r-great .dot-init { color: #FF9800; text-shadow: 0 0 8px rgba(255,152,0,0.6); }
.pdot.filled.r-good  .dot-init { color: #FF7A59; text-shadow: 0 0 6px rgba(255,122,89,0.5); }
/* Light mode overrides */
body.light .pdot { background: rgba(240,245,255,0.75) !important; border-color: rgba(100,130,200,0.4) !important; }
body.light .pdot.filled.GK  { background: rgba(245,180,60,0.18) !important; border-color: rgba(245,180,60,0.5) !important; }
body.light .pdot.filled.DEF { background: rgba(34,224,200,0.15) !important; border-color: rgba(34,224,200,0.45) !important; }
body.light .pdot.filled.MID { background: rgba(124,92,252,0.18) !important; border-color: rgba(124,92,252,0.5) !important; }
body.light .pdot.filled.FWD { background: rgba(255,122,89,0.18) !important; border-color: rgba(255,122,89,0.5) !important; }
body.light .pdot.filled .dot-init { color: #0B1020; text-shadow: none; }
body.light .pitch { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='2' x2='100' y2='2' stroke='%230B7C6E' stroke-opacity='0.22' stroke-width='0.45'/%3E%3Cpath d='M 31 2 A 19 19 0 0 1 69 2' fill='none' stroke='%230B7C6E' stroke-opacity='0.18' stroke-width='0.45'/%3E%3Ccircle cx='50' cy='2' r='1.2' fill='%230B7C6E' fill-opacity='0.22'/%3E%3Crect x='22' y='68' width='56' height='30' fill='none' stroke='%230B7C6E' stroke-opacity='0.16' stroke-width='0.4'/%3E%3Crect x='36' y='83' width='28' height='15' fill='none' stroke='%230B7C6E' stroke-opacity='0.11' stroke-width='0.28'/%3E%3Ccircle cx='50' cy='78' r='1.2' fill='%230B7C6E' fill-opacity='0.22'/%3E%3Cpath d='M 34 68 A 19 19 0 0 1 66 68' fill='none' stroke='%230B7C6E' stroke-opacity='0.16' stroke-width='0.4'/%3E%3C/svg%3E"), linear-gradient(180deg, #e8f0f8 0%, #d6e2f0 100%) !important; border-color: rgba(11,124,110,0.22) !important; }
@media (prefers-reduced-motion: reduce) {
  .pdot.filled { animation: none; }
}

/* ===== Game-by-game reveal bar ===== */
.reveal-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0 16px; flex-wrap: wrap; }
.reveal-count { color: var(--muted); font-size: 14px; font-weight: 700; }

/* ===== Manager spin wheel ===== */
.mgr-wheel { display: flex; gap: 10px; align-items: center; }
.mgr-reel { flex: 1; height: 60px; }
.mgr-item { gap: 4px; justify-content: center; align-items: center; text-align: center; width: 100%; display: flex; flex-direction: column; }
.mgr-name-big { font-size: 15px; font-weight: 800; color: var(--text); text-align: center; padding: 0 8px; width: 100%; display: block; }
.mgr-style-tag { font-size: 11px; color: var(--gold); font-weight: 700; }
#managerSpin { white-space: nowrap; align-self: center; }

/* ===== Era range slider ===== */
.era-wrap { display: flex; gap: 12px; align-items: center; }
.era-slider { position: relative; flex: 1; height: 32px; }
.era-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.era-fill { position: absolute; top: 0; bottom: 0; background: var(--green); border-radius: 999px; }
.era-slider input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 32px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.era-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green2); border: 2px solid #07120c; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.era-slider input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--green2); border: 2px solid #07120c; cursor: pointer; pointer-events: auto; }
.era-side { display: flex; gap: 6px; }
.era-btn { background: var(--card); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.12s ease; }
.era-btn:hover { border-color: rgba(0,187,127,0.5); color: var(--green2); }
.era-labels { display: flex; justify-content: space-between; margin-top: 2px; }
.era-end { color: var(--green2); font-weight: 800; font-size: 13px; }

/* ===== Button polish — subtle, not tacky ===== */
.formation-opt {
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: all 0.12s ease;
}
.formation-opt:hover { border-color: rgba(0,187,127,0.45); color: var(--text); transform: none; }
.formation-opt.active { background: rgba(0,187,127,0.11); border-color: var(--green); color: var(--green2); box-shadow: none; }
.formation-opt .diff-rr { opacity: 0.7; font-weight: 800; }
.formation-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Manager style row — all on one line ===== */
.mgr-style-row { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.mgr-style-row::-webkit-scrollbar { height: 5px; }
.mgr-style-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.mgr-style-btn {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all 0.12s ease;
}
.mgr-style-btn:hover { border-color: rgba(249,156,0,0.45); color: var(--text); }
.mgr-style-btn.active { background: rgba(249,156,0,0.12); border-color: var(--gold); color: var(--gold); }

/* ===== Emoji spacing safety — keep a hair of space after leading emoji ===== */
.tg-emoji, .mgr-emoji { margin-right: 2px; }

/* ===== Player name sits clearly below the pitch circle ===== */
.pdot .dot-name { top: calc(100% + 5px); margin-top: 0; }

/* ===== Even, clean difficulty buttons ===== */
.diff-row { display: flex; gap: 8px; }
.diff-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 8px; cursor: pointer; color: var(--muted); transition: all 0.12s ease;
}
.diff-btn:hover { border-color: rgba(249,156,0,0.45); color: var(--text); }
.diff-btn.active { background: rgba(249,156,0,0.12); border-color: var(--gold); color: var(--gold); }
.diff-name { font-weight: 800; font-size: 14px; }
.diff-sub { font-size: 11px; color: var(--muted); }
.diff-btn.active .diff-sub { color: var(--gold); }


/* ===== Sub-label (e.g. Continent under the era slider) ===== */
.setup-sublabel {
  display: block; margin-top: 10px; margin-bottom: 2px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 800;
}

/* ===== Draft locked note ===== */
.draft-locked {
  display: inline-block; margin-bottom: 14px;
  background: rgba(249,156,0,0.1); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 7px 14px;
  font-size: 12px; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   MODERN REFRESH  —  overrides below take precedence
   ═══════════════════════════════════════════════════════════════ */

/* ── Root extras ── */
:root {
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-btn:  12px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.45);
  --shadow-glow-gold: 0 8px 28px rgba(249,156,0,0.38);
  --shadow-glow-blue: 0 8px 28px rgba(108,162,255,0.28);
  --glass: rgba(255,255,255,0.035);
}

/* ── Header — tighter without the subtitle ── */
header {
  padding-top: 10px;
  margin-bottom: 8px;
}
header h1 {
  font-size: clamp(32px, 7vw, 56px);
  letter-spacing: 2px;
}

/* theme toggle fully defined above — no overrides needed */

/* ═══════════════════════════════════════
   HOME PAGE — two mode cards
   ═══════════════════════════════════════ */
.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 20px 8px 16px;
}
.home-tag {
  color: var(--muted);
  font-size: 14px;
  max-width: 380px;
  margin: 0;
  line-height: 1.55;
  text-align: center;
}

.home-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 500px;
}

.home-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 18px 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.home-mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.home-mode-card:hover { transform: translateY(-5px); }
.home-mode-card:hover::before { opacity: 1; }
.home-mode-card:active { transform: translateY(-2px); }

/* WC card — gold tinted */
.home-mode-wc {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(249,156,0,0.14), transparent 55%),
    linear-gradient(160deg, var(--card2), var(--card3));
  border-color: rgba(249,156,0,0.18);
}
.home-mode-wc::before {
  background: radial-gradient(150% 90% at 50% -10%, rgba(249,156,0,0.08), transparent 55%);
}
.home-mode-wc:hover {
  border-color: rgba(249,156,0,0.55);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(249,156,0,0.2);
}

/* CL card — blue tinted */
.home-mode-cl {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(108,162,255,0.14), transparent 55%),
    linear-gradient(160deg, var(--card2), var(--card3));
  border-color: rgba(108,162,255,0.18);
}
.home-mode-cl::before {
  background: radial-gradient(150% 90% at 50% -10%, rgba(108,162,255,0.08), transparent 55%);
}
.home-mode-cl:hover {
  border-color: rgba(108,162,255,0.55);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(108,162,255,0.2);
}

/* Multiplayer card — purple tinted */
.home-mode-mp {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(140,80,255,0.14), transparent 55%),
    linear-gradient(160deg, var(--card2), var(--card3));
  border-color: rgba(140,80,255,0.2);
}
.home-mode-mp::before {
  background: radial-gradient(150% 90% at 50% -10%, rgba(140,80,255,0.08), transparent 55%);
}
.home-mode-mp:hover {
  border-color: rgba(140,80,255,0.55);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(140,80,255,0.2);
}

/* League card — green tinted */
.home-mode-league {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(0,200,80,0.14), transparent 55%),
    linear-gradient(160deg, var(--card2), var(--card3));
  border-color: rgba(0,200,80,0.2);
}
.home-mode-league::before {
  background: radial-gradient(150% 90% at 50% -10%, rgba(0,200,80,0.08), transparent 55%);
}
.home-mode-league:hover {
  border-color: rgba(0,200,80,0.55);
  box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,200,80,0.2);
}

.mode-icon   { font-size: 34px; line-height: 1; margin-bottom: 2px; }
.mode-name   { font-size: 17px; font-weight: 900; letter-spacing: -0.2px; line-height: 1.1; }
.mode-hint   { font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.3; }

.home-board-link {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  padding: 9px 26px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.home-board-link:hover {
  border-color: rgba(0,187,127,0.6);
  color: var(--green2);
  background: rgba(0,187,127,0.06);
}

@media (max-width: 420px) {
  .home-modes { grid-template-columns: 1fr; max-width: 300px; }
}

/* ═══════════════════════════════════════
   SPIN BUTTON — idle pulse + polish
   ═══════════════════════════════════════ */
@keyframes spin-idle {
  0%, 100% {
    box-shadow: 0 8px 22px rgba(124,92,252,0.38), 0 0 0 0 rgba(124,92,252,0.25);
  }
  55% {
    box-shadow: 0 10px 30px rgba(124,92,252,0.55), 0 0 0 10px rgba(124,92,252,0);
  }
}
button.spin {
  font-size: 14px;
  padding: 10px 26px;
  border-radius: var(--radius-pill);
  letter-spacing: 2px;
  background: var(--btn-primary-bg, linear-gradient(180deg, #9A82FF 0%, #6A47ED 100%));
  color: var(--btn-primary-fg, #fff);
  box-shadow: 0 8px 22px rgba(124,92,252,0.38), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: filter 0.15s ease, transform 0.08s ease;
}
button.spin:not(:disabled) {
  animation: spin-idle 2.8s ease-in-out infinite;
}
button.spin:hover:not(:disabled) { filter: brightness(1.07); animation-play-state: paused; }
button.spin:active { animation: none; transform: translateY(2px); }

/* ═══════════════════════════════════════
   BUTTON SYSTEM — upgraded hierarchy
   ═══════════════════════════════════════ */

/* Primary (indigo) */
.btn-primary {
  background: var(--btn-primary-bg, linear-gradient(180deg, #9A82FF 0%, #6A47ED 100%));
  color: var(--btn-primary-fg, #fff);
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(124,92,252,0.32), inset 0 1px 0 rgba(255,255,255,0.30);
  transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 8px 26px rgba(124,92,252,0.45), inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

/* Start button (hero primary) */
.start-btn {
  background: linear-gradient(180deg, #9A82FF 0%, #6A47ED 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 26px rgba(124,92,252,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: filter 0.15s ease, transform 0.08s ease;
}
.start-btn:hover { filter: brightness(1.07); }
.start-btn:active { transform: translateY(1px); }

/* Ghost */
.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.07);
  border-color: var(--gold);
  color: var(--gold);
}
.btn-ghost:disabled { opacity: 0.38; cursor: not-allowed; }

/* Accent (green) */
.btn-accent, .autopick, .reroll {
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-accent, .autopick {
  background: rgba(0,187,127,0.14);
  color: var(--green2);
  border: 1px solid rgba(0,187,127,0.45);
  padding: 10px 20px;
}
.btn-accent:hover:not(:disabled), .autopick:hover {
  background: rgba(0,187,127,0.24);
  box-shadow: 0 4px 14px rgba(0,187,127,0.2);
}
.btn-accent:disabled { opacity: 0.38; cursor: not-allowed; }

.reroll {
  background: rgba(141,84,255,0.14);
  color: #b69bff;
  border: 1px solid rgba(141,84,255,0.45);
  padding: 12px 22px;
}
.reroll:hover:not(:disabled) {
  background: rgba(141,84,255,0.24);
  box-shadow: 0 4px 14px rgba(141,84,255,0.2);
}
.reroll:disabled { opacity: 0.38; cursor: not-allowed; }

/* Back / small ghost */
.back {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
  margin-bottom: 16px;
}
.back:hover { color: var(--gold); border-color: rgba(249,156,0,0.5); }

/* ═══════════════════════════════════════
   MACHINE — deeper presence
   ═══════════════════════════════════════ */
.machine {
  border-radius: 22px;
  padding: 24px;
  border: 1px solid rgba(249,156,0,0.2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(249,156,0,0.07), transparent 55%),
    linear-gradient(180deg, #18141e, #0c0b10);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset;
}
.reel-box {
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.reel {
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 28%, transparent 72%, rgba(0,0,0,0.8) 100%),
    #040308;
}
.reel-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(249,156,0,0.7);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════
   SETUP — cleaner labels + card
   ═══════════════════════════════════════ */
.setup {
  border-radius: 20px;
  padding: 20px;
  gap: 18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.025) 0%, transparent 60%),
    linear-gradient(180deg, var(--card2), var(--card3));
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 4px 28px rgba(0,0,0,0.4);
}
.setup-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-mute);
  font-weight: 800;
}
.team-name-input {
  border-radius: 12px;
  font-size: 16px;
  padding: 12px 16px;
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.08);
}
.team-name-input:focus { border-color: rgba(249,156,0,0.55); box-shadow: 0 0 0 3px rgba(249,156,0,0.08); }

/* ═══════════════════════════════════════
   PLAYER CARDS — draft picker
   ═══════════════════════════════════════ */
.player {
  border-radius: 14px;
  padding: 11px 14px;
  gap: 11px;
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.07);
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.player:hover:not(.taken):not(.noslot) {
  transform: translateY(-3px);
  border-color: rgba(0,187,127,0.5);
  background: rgba(0,187,127,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,187,127,0.1);
}
.player .pname { font-size: 13.5px; }
.player .pos { border-radius: 9px; }

/* ═══════════════════════════════════════
   XI LIST ROWS
   ═══════════════════════════════════════ */
.xi {
  border-radius: 20px;
  padding: 20px;
}
.xi-row {
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.07);
  gap: 12px;
}
.xi-row.empty {
  border-style: dashed;
  opacity: 0.45;
}
.xi-row .remove {
  border-radius: 9px;
  padding: 5px 11px;
  font-size: 11px;
  background: rgba(255,255,255,0.03);
}

/* ═══════════════════════════════════════
   DONE BANNER — celebratory
   ═══════════════════════════════════════ */
.done-banner {
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 16px;
  background: linear-gradient(100deg, rgba(0,187,127,0.14), rgba(249,156,0,0.14));
  border: 1px solid rgba(0,187,127,0.38);
  box-shadow: 0 4px 18px rgba(0,187,127,0.12);
}

/* ═══════════════════════════════════════
   RESULTS
   ═══════════════════════════════════════ */
.results-head {
  margin-bottom: 14px;
  justify-content: flex-end;
}
.results-head-right { gap: 10px; }

.champion {
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 17px;
  background: linear-gradient(100deg, rgba(249,156,0,0.15), rgba(0,187,127,0.15));
  border-color: rgba(249,156,0,0.38);
  box-shadow: 0 4px 20px rgba(249,156,0,0.1);
}

.score-banner {
  border-radius: 16px;
  padding: 18px 20px;
  background: linear-gradient(100deg, rgba(249,156,0,0.18), rgba(0,187,127,0.14));
  border-color: rgba(249,156,0,0.45);
  box-shadow: 0 4px 20px rgba(249,156,0,0.12);
}
.score-banner b { font-size: 28px; }

.mcard {
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
}

.verdict-card { border-radius: 18px; }
.stats-summary { border-radius: 18px; }
.group-card { border-radius: 14px; }

/* ═══════════════════════════════════════
   FORMATION / SEG OPTS — cleaner active
   ═══════════════════════════════════════ */
.formation-opt {
  border-radius: 10px;
  padding: 9px 15px;
}
.formation-opt.active {
  background: rgba(249,156,0,0.14);
  border-color: rgba(249,156,0,0.7);
  color: var(--gold);
  box-shadow: none;
}
.seg-opt { padding: 8px 16px; border-radius: var(--radius-pill); }
.seg-opt.active { box-shadow: 0 2px 10px rgba(0,187,127,0.2); }

/* ═══════════════════════════════════════
   MANAGER OPTIONS
   ═══════════════════════════════════════ */
.manager-opt {
  border-radius: 20px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.03);
}
.manager-opt.active {
  box-shadow: 0 2px 10px rgba(249,156,0,0.18);
}

/* ═══════════════════════════════════════
   SQUAD PANEL
   ═══════════════════════════════════════ */
.squad-card {
  border-radius: 18px;
  background: rgba(22,28,56,0.98);
  border: 1px solid rgba(255,255,255,0.07);
}

/* ═══════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════ */
.board-row { border-radius: 12px; background: rgba(255,255,255,0.025); }
.board-row.top3 {
  background: rgba(249,156,0,0.07);
  border-color: rgba(249,156,0,0.38);
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
footer { margin-top: 44px; }
.foot-btn {
  border-radius: 12px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.foot-btn:hover { background: rgba(255,255,255,0.07); }
.foot-btn.coffee {
  background: rgba(249,156,0,0.08);
  border-color: rgba(249,156,0,0.4);
}
.foot-btn.coffee:hover { background: rgba(249,156,0,0.15); }

/* ═══════════════════════════════════════
   LIGHT MODE adjustments
   ═══════════════════════════════════════ */
body.light .home-mode-wc {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(200,134,10,0.1), transparent 55%),
    linear-gradient(160deg, #ffffff, #fefcf6);
  border-color: rgba(200,134,10,0.22);
}
body.light .home-mode-cl {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(80,130,240,0.1), transparent 55%),
    linear-gradient(160deg, #ffffff, #f6f8ff);
  border-color: rgba(80,130,240,0.22);
}
body.light .home-mode-mp {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(120,60,230,0.1), transparent 55%),
    linear-gradient(160deg, #ffffff, #f8f5ff);
  border-color: rgba(120,60,230,0.22);
}
body.light .home-mode-league {
  background:
    radial-gradient(150% 90% at 50% -10%, rgba(0,170,70,0.1), transparent 55%),
    linear-gradient(160deg, #ffffff, #f4fdf6);
  border-color: rgba(0,170,70,0.22);
}
body.light .home-board-link:hover { background: rgba(10,158,110,0.07); }
body.light .machine {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200,134,10,0.07), transparent 55%),
    linear-gradient(180deg, #ffffff, #fffdf7);
  border-color: rgba(200,134,10,0.2);
  box-shadow: 0 14px 40px rgba(120,90,20,0.1);
}
body.light .player {
  background: rgba(0,0,0,0.02);
}
body.light .player:hover:not(.taken):not(.noslot) {
  background: rgba(200,134,10,0.06);
  border-color: rgba(200,134,10,0.4);
}
body.light .xi-row { background: rgba(0,0,0,0.02); }
body.light .reel-box { background: rgba(0,0,0,0.04); }
body.light .board-row { background: rgba(0,0,0,0.02); }
body.light .btn-ghost {
  background: rgba(0,0,0,0.03);
}
body.light .btn-ghost:hover:not(:disabled) {
  background: rgba(0,0,0,0.05);
}

/* ─── hide old home elements that are now replaced ─── */
.home-play, .home-secondary, .home-tag-old { display: none !important; }

/* ─── CL mode: flag-free compact reels ─── */
body.mode-cl .reel,
body.mode-cl .reel-item          { height: 56px; }
body.mode-cl .reel::after        { height: 56px; }
body.mode-cl .reel-item          { gap: 0; flex-direction: row; }
body.mode-cl .reel-item .flag    { display: none; }
body.mode-cl .reel-item .name {
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
body.mode-cl .reel-item .year    { font-size: 30px; }
body.mode-cl .mgr-reel,
body.mode-cl .reel-item.mgr-item { height: 60px; }
body.mode-cl .reel-item.mgr-item { flex-direction: column; gap: 4px; }

/* ════════════════════════════════════════════════════════
   MULTIPLAYER
════════════════════════════════════════════════════════ */
#mpView {
  min-height: 100vh;
  padding: 0 0 80px;
}

/* Back button */
.mp-back {
  background: transparent;
  border: none;
  color: var(--text-dim, rgba(255,255,255,0.45));
  font-size: 14px;
  cursor: pointer;
  padding: 18px 20px 8px;
  display: block;
  transition: color .18s;
}
.mp-back:hover { color: var(--text, #fff); }

/* Generic wrapper */
.mp-wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 0 20px 40px;
}
.mp-title {
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 16px 0 4px;
}
.mp-sub {
  color: var(--text-dim, rgba(255,255,255,0.5));
  font-size: 14px;
  margin: 0 0 24px;
  line-height: 1.5;
}
.mp-section {
  margin-bottom: 28px;
}
.mp-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim, rgba(255,255,255,0.4));
  margin-bottom: 10px;
  font-weight: 700;
}
.mp-label-note {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}

/* Pill buttons row */
.mp-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mp-pill-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.mp-pill-btn.active {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.mp-pill-btn:hover:not(.active) {
  background: rgba(255,255,255,0.09);
}

/* Player names grid */
.mp-names-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.mp-name-inp {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color .18s;
}
.mp-name-inp:focus { border-color: rgba(255,255,255,0.3); }
.mp-name-inp::placeholder { color: rgba(255,255,255,0.28); }

/* Mode grid */
.mp-mode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mp-mode-btn {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.mp-mode-btn.active {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}
.mp-mode-btn:hover:not(.active) {
  background: rgba(255,255,255,0.08);
}

/* Format info strip */
.mp-fmt-info {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
  line-height: 1.5;
}
.mp-fmt-info strong { color: rgba(255,255,255,0.85); }
.mp-sub-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin: 4px 0 10px;
  line-height: 1.4;
}
body.light .mp-sub-hint { color: rgba(0,0,0,0.38); }

/* Start / Confirm button */
.mp-start-btn, .mp-confirm-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #1a6b3c 0%, #0d4a2b 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .18s, transform .12s;
  margin-top: 8px;
}
.mp-start-btn:hover, .mp-confirm-btn:hover:not(:disabled) {
  opacity: .88;
  transform: translateY(-1px);
}
.mp-confirm-btn.disabled, .mp-confirm-btn:disabled {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.28);
  cursor: not-allowed;
  transform: none;
}

/* ─── Formation grid ─── */
.mp-formation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.mp-f-btn {
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .18s, border-color .18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mp-f-btn.selected {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.mp-f-btn.taken {
  opacity: .45;
  cursor: not-allowed;
}
.mp-f-name { font-size: 15px; font-weight: 900; }
.mp-f-taken { font-size: 10px; opacity: .7; }
.mp-f-btn:hover:not(.taken):not(.selected) { background: rgba(255,255,255,0.08); }

/* ─── Manager style row ─── */
.mp-mgr-style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.mp-mgr-style-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .18s, border-color .18s;
}
.mp-mgr-style-btn.active {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.mp-mgr-style-btn:hover:not(.active) { background: rgba(255,255,255,0.08); }
.mp-mgr-style-btn span { font-size: 12px; }

/* Manager reel */
.mp-mgr-spin-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.mp-mgr-reel {
  width: 240px;
  height: 48px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3);
  position: relative;
  flex-shrink: 0;
}
.mp-mgr-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.mp-mgr-strip {
  will-change: transform;
}
.mp-mgr-item {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.mp-mgr-item.highlight {
  color: #f0c040;
}
.mp-mgr-chosen {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 12px;
}

/* ─── Spin button ─── */
.mp-spin-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: var(--text, #fff);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.mp-spin-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.mp-spin-btn:disabled { opacity: .45; cursor: not-allowed; }
.mp-spin-btn.big {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 18px;
  letter-spacing: 2px;
  border-radius: 14px;
  margin-top: 14px;
  background: rgba(255,255,255,0.07);
  color: var(--text, #fff);
}
.mp-spin-btn.big:hover:not(:disabled) { background: rgba(255,255,255,0.13); }

/* ─── Handoff screen ─── */
.mp-handoff-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mp-handoff-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 36px 32px;
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.mp-handoff-done {
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.mp-handoff-formation {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.mp-handoff-picks {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.mp-handoff-arrow {
  font-size: 28px;
  color: rgba(255,255,255,0.2);
  margin-bottom: 16px;
}
.mp-handoff-next {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
}
.mp-handoff-name {
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 32px;
}
.mp-handoff-btn {
  display: block;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #1a6b3c 0%, #0d4a2b 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: opacity .18s;
}
.mp-handoff-btn:hover { opacity: .88; }

/* ─── Draft screen ─── */
.mp-draft-head {
  max-width: 540px;
  margin: 0 auto;
  padding: 16px 20px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}
.mp-draft-player-name {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mp-draft-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
}

/* Machine */
.mp-machine {
  max-width: 540px;
  margin: 0 auto 20px;
  padding: 0 20px;
}
.mp-reels {
  display: flex;
  gap: 10px;
}
.mp-reel-box {
  flex: 1;
}
.mp-reel-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted, rgba(255,255,255,0.35));
  margin-bottom: 6px;
  text-align: center;
}
.mp-reel {
  height: 56px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.35);
  position: relative;
}
.mp-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.mp-reel-strip {
  will-change: transform;
}
.mp-reel-item {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 10px;
  text-align: center;
}
.mp-reel-item.landed { color: #f0c040; }

/* Squad panel */
/* Squad panel — now uses shared .players / .player classes from main game */
.mp-squad-panel {
  max-width: 600px;
  margin: 0 auto 20px;
  padding: 0;
}
/* Override .players grid inside mp panel for wider view */
.mp-players-grid.players {
  padding: 0;
}
/* Rating badge used in MP squad (mirrors rate-badge) */
.mp-r-badge {
  flex: 0 0 auto;
  margin-left: auto;
  background: rgba(249,156,0,0.16);
  color: var(--gold);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 800;
}
/* Locked-by badge inside player cards */
.mp-locked-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #4ade80;
  background: rgba(74,222,128,0.12);
  border-radius: 5px;
  padding: 2px 6px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-sq-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mp-sq-flag { font-size: 24px; }
.mp-sq-title { font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.mp-sq-hint { font-size: 12px; color: rgba(255,255,255,0.35); margin-left: auto; }
.mp-sq-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-sq-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mp-sq-player:hover:not(.locked) {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
}
.mp-sq-player.locked { opacity: .38; cursor: default; }
.mp-sq-pos {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.38);
  width: 36px;
  flex-shrink: 0;
}
.mp-sq-name { flex: 1; font-size: 14px; font-weight: 700; }
.mp-sq-r {
  font-size: 15px;
  font-weight: 900;
  color: rgba(255,255,255,0.55);
  width: 28px;
  text-align: right;
}
.mp-sq-lock {
  color: #4ade80;
  font-size: 13px;
  width: 18px;
  text-align: center;
}

/* Current picks list */
.mp-picks-wrap {
  max-width: 540px;
  margin: 0 auto 20px;
  padding: 0 20px;
}
.mp-picks-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
}
.mp-picks-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  font-size: 13px;
}
.mp-pk-slot {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.32);
  width: 36px;
  flex-shrink: 0;
}
.mp-pk-name { flex: 1; font-weight: 700; }
.mp-pk-club { font-size: 12px; color: rgba(255,255,255,0.35); }
.mp-pk-r { font-size: 13px; font-weight: 900; color: rgba(255,255,255,0.5); }

/* Mini pitch */
.mp-mini-pitch {
  max-width: 540px;
  margin: 0 auto 16px;
  padding: 0 20px;
}
.mp-pitch-rows {
  background: rgba(0,80,30,0.18);
  border: 1px solid rgba(0,255,80,0.07);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}
.mp-pitch-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.mp-p-dot {
  width: 46px;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background .15s;
}
.mp-p-dot.filled {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
}
.mp-p-slot {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.3);
}
.mp-p-name {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  text-align: center;
  max-width: 44px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ─── Tournament ─── */
.mp-match-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 14px;
}
.mp-match-row:last-child { border-bottom: none; }
.mp-mr-a, .mp-mr-b { flex: 1; font-weight: 600; }
.mp-mr-a { text-align: right; }
.mp-mr-b { text-align: left; }
.mp-mr-a.win, .mp-mr-b.win { color: #4ade80; font-weight: 800; }
.mp-mr-a.loss, .mp-mr-b.loss { color: rgba(255,255,255,0.35); }
.mp-mr-score {
  font-size: 16px;
  font-weight: 900;
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Standings table */
.mp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mp-table th {
  text-align: center;
  padding: 6px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mp-table th:nth-child(2) { text-align: left; }
.mp-table td {
  padding: 8px 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mp-table td:nth-child(2) { text-align: left; font-weight: 700; }
.mp-row-adv td:nth-child(2) { color: #4ade80; }
.mp-row-adv { background: rgba(74,222,128,0.04); }

/* Match cards (knockout) */
.mp-match-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  margin-bottom: 8px;
}
.mp-mc-a, .mp-mc-b { flex: 1; font-size: 15px; font-weight: 700; }
.mp-mc-a { text-align: right; }
.mp-mc-a.win, .mp-mc-b.win { color: #f0c040; font-weight: 900; font-size: 16px; }
.mp-mc-score {
  font-size: 20px;
  font-weight: 900;
  min-width: 60px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mp-pens {
  font-size: 11px;
  font-weight: 600;
  display: block;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin-top: 2px;
}

/* Champion banner */
.mp-champion {
  text-align: center;
  padding: 36px 20px;
  font-size: 28px;
  line-height: 1.4;
  border: 1px solid rgba(240,192,64,0.25);
  background: radial-gradient(ellipse at 50% 60%, rgba(240,192,64,0.08) 0%, transparent 70%);
  border-radius: 20px;
  margin: 24px 0;
}
.mp-champ-name {
  display: block;
  font-size: clamp(24px, 7vw, 38px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f0c040;
  margin: 8px 0 4px;
}
.mp-champ-sub {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.45);
}

/* Team summary cards */
.mp-team-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.mp-tc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.mp-tc-name { font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.mp-tc-info { font-size: 12px; color: rgba(255,255,255,0.4); flex: 1; }
.mp-tc-avg { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.55); }
.mp-tc-ul { list-style: none; margin: 0; padding: 8px 0; }
.mp-tc-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px;
  font-size: 13px;
}
.mp-tc-pos {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.3);
  width: 36px;
}
.mp-tc-pname { flex: 1; font-weight: 600; }
.mp-tc-club { font-size: 11px; color: rgba(255,255,255,0.35); }
.mp-tc-r { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.5); }

/* home-mode-mp and home-mode-league are defined near the other home cards above */

/* ══════════════════════════════════════════════
   LEAGUE MODE STYLES
══════════════════════════════════════════════ */
#leagueView {
  padding: 0 0 3rem;
  animation: fadeIn .25s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#leagueView .back {
  align-self: flex-start;
}
.lg-title {
  font-size: 1.5rem; font-weight: 800; letter-spacing: .03em;
  margin: 1.2rem 0 .3rem; color: var(--txt);
}
.lg-sub {
  color: var(--txt-dim); font-size: .9rem;
  margin: 0 0 1.4rem; max-width: 400px;
}
/* League picker cards */
.lg-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
  max-width: 480px;
  margin: 0 auto;
}
.lg-card {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.4rem 1rem;
  cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: var(--txt);
}
.lg-card:hover { border-color: rgba(60,200,80,.5); transform: translateY(-3px); }
.lg-flag  { font-size: 2.4rem; }
.lg-name  { font-size: 1rem; font-weight: 700; }
.lg-games { font-size: .78rem; color: var(--txt-dim); }

/* Club picker */
.lg-clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: .65rem;
  max-height: 68vh; overflow-y: auto;
}
.lg-club-card {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: .75rem 1rem;
  cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  text-align: left; color: var(--txt);
}
.lg-club-card:hover { border-color: rgba(60,200,80,.45); background: rgba(60,200,80,.06); }
.lgc-flag  { font-size: 1.3rem; }
.lgc-name  { font-size: .92rem; font-weight: 600; }
.lgc-years { font-size: .75rem; color: var(--txt-dim); }

/* Year picker */
.lg-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: .65rem;
  max-width: 600px;
}
.lg-year-card {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 1rem .5rem;
  cursor: pointer; transition: all .18s;
  color: var(--txt); text-align: center;
}
.lg-year-card:hover { border-color: rgba(60,200,80,.45); transform: translateY(-2px); }
.lgy-season { font-size: 1rem; font-weight: 700; }

/* Draft layout */
.lg-draft-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 680px){
  .lg-draft-layout { grid-template-columns: 1fr; }
}
.lg-draft-left { display: flex; flex-direction: column; gap: .8rem; }
.lg-fm-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lg-fm-label { font-size: .82rem; color: var(--txt-dim); white-space: nowrap; }
.lg-fm-bar  { display: flex; flex-wrap: wrap; gap: .4rem; }
.lg-fm-bar .seg-opt { font-size: .78rem; padding: .3rem .55rem; }

/* Pitch slots */
.lg-pitch-wrap { background: rgba(0,150,50,.08); border-radius: 12px; padding: .8rem; }
.lg-pitch {
  display: flex; flex-direction: column-reverse; gap: .35rem;
  min-height: 260px;
}
/* Group slots in rows by position line */
.lg-pitch { flex-wrap: wrap; justify-content: center; }
.lg-slot {
  background: rgba(255,255,255,.06);
  border: 1.5px dashed rgba(255,255,255,.2);
  border-radius: 8px;
  padding: .4rem .5rem;
  cursor: pointer; transition: all .18s;
  min-width: 72px; text-align: center;
  flex: 1 0 70px; max-width: 96px;
}
.lg-slot:hover { border-color: rgba(60,200,80,.6); }
.lg-slot.lg-slot-active { border-color: #3cc850; background: rgba(60,200,80,.12); }
.lg-slot.lg-slot-filled { border-style: solid; border-color: rgba(60,200,80,.4); background: rgba(60,200,80,.08); }
.lg-sl-name { font-size: .75rem; font-weight: 700; color: var(--txt); }
.lg-sl-pos  { font-size: .65rem; color: var(--txt-dim); text-transform: uppercase; }
.lg-sl-rat  { font-size: .78rem; font-weight: 700; color: #3cc850; }
.lg-sl-empty{ font-size: .72rem; color: var(--txt-dim); text-transform: uppercase; padding: .3rem 0; }

.lg-draft-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Squad list */
.lg-squad-side {
  background: rgba(255,255,255,.03);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 12px; overflow: hidden;
}
.lg-squad-hd {
  padding: .65rem .9rem;
  font-size: .82rem; font-weight: 700;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lg-squad-hint {
  padding: .4rem .9rem;
  font-size: .75rem; color: var(--txt-dim);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.lg-squad-list {
  max-height: 480px; overflow-y: auto;
}
.lg-player-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer; transition: background .15s;
}
.lg-player-row:hover { background: rgba(255,255,255,.04); }
.lg-player-row.lg-pl-picked { opacity: .35; pointer-events: none; }
.lg-player-row.lg-pl-dim    { opacity: .3; }
.lgpl-pos  { font-size: .7rem; color: var(--txt-dim); width: 36px; }
.lgpl-name { flex: 1; font-size: .85rem; }
.lgpl-rat  { font-size: .82rem; font-weight: 700; color: #3cc850; }

/* Manager screen (old) */
.lg-mgr-wrap { max-width: 420px; margin: 0 auto 1rem; }
.lg-mgr-spin-area { display: flex; flex-direction: column; gap: .7rem; align-items: center; }

/* ─── Setup screen ─── */
.lg-setup-wrap {
  width: 100%; max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.lg-setup-row { margin-bottom: 1.1rem; }
.lg-setup-label {
  display: block;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--txt-dim); margin-bottom: .5rem;
}
.lg-name-inp {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: .6rem .9rem;
  font-size: .95rem; color: var(--txt); outline: none; font-family: inherit;
}
.lg-name-inp:focus { border-color: rgba(60,200,80,.5); background: rgba(255,255,255,.09); }
.lg-mgr-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.lg-mgr-btn {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: .5rem .65rem;
  cursor: pointer; color: var(--txt); font-size: .75rem;
  transition: border-color .15s, background .15s; min-width: 66px;
}
.lg-mgr-btn:hover { background: rgba(60,200,80,.08); border-color: rgba(60,200,80,.35); }
.lg-mgr-btn.active { background: rgba(60,200,80,.14); border-color: #3cc850; color: #3cc850; }
.lg-mgr-emoji { font-size: 1.35rem; line-height: 1; }
.lg-mgr-desc {
  font-size: .78rem; color: var(--txt-dim); min-height: 1.1em;
  margin-top: .3rem; text-align: center;
}
.lg-go-btn { display: block; width: 100%; margin-top: 1.4rem; }

/* ─── Draft page layout ─── */
.lg-draft-page { width: 100%; max-width: 1000px; margin: 0 auto; text-align: left; }
.lg-draft-hd {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 0 .9rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 1rem; flex-shrink: 0;
}
.lg-draft-info { flex: 1; text-align: right; }
.lg-draft-team { font-size: 1rem; font-weight: 800; color: var(--txt); }
.lg-draft-meta { font-size: .78rem; color: var(--txt-dim); }
.lg-draft-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start;
}
@media (max-width: 680px){ .lg-draft-cols { grid-template-columns: 1fr; } }
.lg-draft-pitch-col { display: flex; flex-direction: column; gap: .7rem; }
.lg-draft-spin-col  { display: flex; flex-direction: column; gap: .7rem; }
.lg-pitch-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--txt-dim); text-align: center;
}
.lg-pitch-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.lg-pitch-btns button { flex: 1; }

/* ─── Spin machine (league) ─── */
.lg-machine {
  background: rgba(255,255,255,.03);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.lg-spin-reels { display: flex; gap: 1rem; width: 100%; }
.lg-spin-reel-box { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.lg-spin-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--txt-dim); text-align: center;
}

/* Skip squad button */
.lg-skip-btn {
  display: block; width: 100%; margin-top: .6rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: .45rem .8rem;
  color: var(--txt-dim); font-size: .8rem;
  cursor: pointer; text-align: center;
  transition: border-color .15s, color .15s;
}
.lg-skip-btn:hover { border-color: rgba(255,255,255,.3); color: var(--txt); }
body.light .lg-skip-btn { border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.45); }
body.light .lg-skip-btn:hover { border-color: rgba(0,0,0,.25); color: rgba(0,0,0,.7); }

/* League squad panel */
#lgSquadPanel {
  max-height: 62vh; overflow-y: auto;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: .7rem .8rem;
}
body.light #lgSquadPanel {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.07);
}

/* Squad panel header */
.mp-sq-head {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .4rem 0 .6rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: .6rem;
}
.mp-sq-title { font-size: .95rem; font-weight: 800; }
.mp-sq-hint  { font-size: .78rem; color: var(--txt-dim); }

/* Results page */
.lg-results-page { padding-bottom: 3rem; width: 100%; text-align: left; }
.lg-res-header {
  background: rgba(255,255,255,.03);
  border: 1.5px solid rgba(60,200,80,.2);
  border-radius: 14px; padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
}
.lg-res-title  { font-size: 1.35rem; font-weight: 800; margin-bottom: .4rem; }
.lg-res-record { font-size: .9rem; color: var(--txt-dim); margin-bottom: .5rem; }
.lgr-club { color: var(--txt); font-weight: 600; }
.lgr-record { font-weight: 800; color: var(--txt); font-size: 1rem; letter-spacing: .04em; }
.lg-pos-comment { font-size: .9rem; color: var(--txt-dim); font-style: italic; margin: .4rem 0 .7rem; }
.lg-score-line { font-size: .85rem; color: var(--txt-dim); margin-bottom: .8rem; }
.lg-score-line strong { color: #3cc850; font-size: 1rem; }
.lg-tbl-rel td { color: #e05050; }
.lg-res-btns { display: flex; gap: .6rem; flex-wrap: wrap; }

.lg-res-body {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem; align-items: start;
}
@media (max-width: 700px){
  .lg-res-body { grid-template-columns: 1fr; }
}
.lg-col-hd { font-size: .88rem; font-weight: 700; margin: 0 0 .6rem; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .06em; }

/* Live running tally during game-by-game reveal */
.lg-live-tally {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 12px; padding: .7rem 1rem; margin: 0 0 1rem;
  flex-wrap: wrap;
}
.lg-live-tally .lt-rec { font-size: 1.5rem; font-weight: 900; color: var(--txt); letter-spacing: .04em; }
.lg-live-tally .lt-pts { font-size: 1.1rem; font-weight: 800; color: var(--gold); }
.lg-live-tally .lt-gd  { font-size: .95rem; color: var(--txt-dim); font-weight: 600; }
body.light .lg-live-tally { background: rgba(0,0,0,.03); }

/* ── Old league results page (lgr2-* — kept for compatibility) ── */
.lg-results-page .wrap { max-width: 680px; }
.lgr2-pill {
  display: inline-block; align-self: center; margin: .2rem auto 1rem;
  background: rgba(249,156,0,.15); color: var(--gold);
  border: 1px solid rgba(249,156,0,.45); border-radius: 999px;
  padding: .4rem 1.1rem; font-size: .8rem; font-weight: 800; letter-spacing: .12em;
}
.lg-results-page .wrap { display: flex; flex-direction: column; }
.lgr2-cards, .lgr2-stat3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; margin-bottom: .9rem; }
.lgr2-stat3.two { grid-template-columns: 1fr 1fr; }
.lgr2-card {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 14px; padding: 1rem .8rem; text-align: center;
}
.lgr2-k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-dim); font-weight: 700; }
.lgr2-v { font-size: 2rem; font-weight: 900; color: var(--txt); margin-top: .2rem; }
.lgr2-v.dim { color: var(--txt-dim); }
.lgr2-num { font-size: 2rem; font-weight: 900; color: var(--txt); }
.lgr2-num.good { color: #3cc850; } .lgr2-num.bad { color: #ff5d5d; } .lgr2-num.warn { color: #f5b301; }
.lgr2-verdict { font-size: 1.05rem; font-weight: 900; letter-spacing: .02em; padding-top: .9rem; }
.lgr2-verdict.good { color: #3cc850; } .lgr2-verdict.bad { color: #ff5d5d; } .lgr2-verdict.neutral { color: var(--txt-dim); }

.lgr2-narr { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.lgr2-narr-h { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; color: var(--txt); margin-bottom: .5rem; }
.lgr2-narr-b { font-size: .95rem; line-height: 1.5; color: var(--txt); }
.lgr2-narr-p { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--txt-dim); }

.lgr2-sec { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-dim); font-weight: 800; margin: .4rem 0 .6rem; }
.lgr2-xi { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1rem; margin-bottom: 1rem; }
.lgr2-xi-row, .lgr2-pt-row, .lgr2-pt-head { display: flex; align-items: center; gap: .7rem; padding: .32rem 0; }
.lgr2-xi-row .pos, .lgr2-pt-row .pos { flex: 0 0 auto; min-width: 34px; text-align: center; font-size: .68rem; font-weight: 800; padding: .18rem .3rem; border-radius: 6px; }
.lgr2-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--txt); }
.lgr2-meta { flex: 0 0 auto; font-size: .72rem; color: var(--txt-dim); letter-spacing: .04em; }
.lgr2-rat { flex: 0 0 auto; min-width: 28px; text-align: right; font-weight: 900; color: var(--txt); }

.lgr2-share {
  width: 100%; background: #19c37d; color: #04150d; border: none; border-radius: 14px;
  padding: 1rem; font-size: 1rem; font-weight: 800; cursor: pointer; margin-bottom: 1.2rem;
  box-shadow: 0 0 22px rgba(25,195,125,.35);
}
.lgr2-share:hover { filter: brightness(1.05); }

.lgr2-awards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.lgr2-award { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 14px; padding: .85rem .9rem; }
.lgr2-award.gold { border-color: rgba(249,156,0,.5); background: rgba(249,156,0,.08); }
.lgr2-aw-h { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-dim); font-weight: 700; }
.lgr2-aw-name { font-size: 1rem; font-weight: 800; color: var(--txt); margin: .25rem 0 .1rem; }
.lgr2-aw-sub { font-size: .78rem; color: var(--gold); font-weight: 600; }

.lgr2-ptable { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 14px; padding: .6rem 1rem; margin-bottom: 1rem; }
.lgr2-pt-head { color: var(--txt-dim); font-size: .7rem; letter-spacing: .08em; font-weight: 700; border-bottom: 1px solid var(--line); }
.lgr2-pt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lgr2-pt-v { flex: 0 0 auto; min-width: 30px; text-align: center; font-weight: 700; }
.lgr2-pt-head .lgr2-pt-v { color: var(--txt-dim); }
.lgr2-pt-v.g { color: #3cc850; } .lgr2-pt-v.a { color: #4aa3ff; } .lgr2-pt-v.cs { color: var(--txt-dim); }
.lgr2-dot { color: rgba(255,255,255,.25); }

.lgr2-break { background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 14px; padding: .4rem 1rem; margin-bottom: 1rem; }
.lgr2-bk-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .9rem; }
.lgr2-bk-row:last-child { border-bottom: none; }
.lgr2-bk-k { color: var(--txt); } .lgr2-bk-v { font-weight: 800; color: #3cc850; } .lgr2-bk-v.neg { color: #ff5d5d; }
.lgr2-bk-row.total { border-top: 2px solid var(--line); margin-top: .2rem; padding-top: .6rem; }
.lgr2-bk-row.total .lgr2-bk-k { font-weight: 800; } .lgr2-bk-row.total .lgr2-bk-v { font-size: 1.2rem; color: var(--gold); }

.lgr2-tbl-wrap { margin-bottom: 1rem; }
.lgr2-tbl-wrap summary { cursor: pointer; color: var(--txt-dim); font-weight: 700; padding: .6rem 0; font-size: .9rem; }
.lg-res-btns { display: flex; gap: .6rem; }
.lg-res-btns .btn-primary, .lg-res-btns .btn-ghost { flex: 1; }

body.light .lgr2-card, body.light .lgr2-narr, body.light .lgr2-xi, body.light .lgr2-award,
body.light .lgr2-ptable, body.light .lgr2-break { background: rgba(0,0,0,.03); }

/* ══════════════════════════════════════════════════════════
   NEW: League Season Results Page  (lgs-*)
   Distinct identity — not a copy of the 38-0 summary
   ══════════════════════════════════════════════════════════ */
.lgs-page { padding-bottom: 3rem; }
.lgs-page .wrap { max-width: 800px; }

/* ── Hero ── */
.lgs-hero {
  text-align: center;
  padding: 2.2rem 1.2rem 1.8rem;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(124,92,252,.1) 0%, rgba(34,224,200,.04) 60%, rgba(11,16,32,0) 100%);
  border: 1px solid rgba(124,92,252,.22);
  margin-bottom: 1rem;
}
.lgs-league-label {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt-dim); font-weight: 700; margin-bottom: .45rem;
}
.lgs-team-name {
  font-size: 1.5rem; font-weight: 900; color: var(--txt); margin-bottom: .5rem; line-height: 1.15;
}
.lgs-big-pos {
  font-size: 5.5rem; font-weight: 900; line-height: 1;
  color: var(--txt); letter-spacing: -.04em;
  margin-bottom: .1rem;
}
.lgs-pos-sfx {
  font-size: 2rem; font-weight: 800; vertical-align: super;
  line-height: 1; margin-left: .05em;
}
.lgs-hero-sub {
  font-size: .82rem; color: var(--txt-dim); margin-bottom: .9rem;
}
.lgs-pill {
  display: inline-block;
  padding: .38rem 1rem; border-radius: 20px;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  background: rgba(255,255,255,.08); color: var(--txt-dim);
  border: 1px solid rgba(255,255,255,.1);
}
.lgs-pill.champ { background: rgba(245,180,60,.18); color: var(--gold); border-color: rgba(245,180,60,.3); }
.lgs-pill.top4  { background: rgba(34,224,200,.1);  color: var(--cyan); border-color: rgba(34,224,200,.25); }
.lgs-pill.rel   { background: rgba(255,93,93,.1);   color: #ff5d5d;     border-color: rgba(255,93,93,.25); }

/* ── Record strip ── */
.lgs-strip {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 16px; padding: .85rem .6rem;
  gap: 0; margin-bottom: 1rem; flex-wrap: wrap;
}
.lgs-strip-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .1rem .2rem;
}
.lgs-sn {
  font-size: 1.65rem; font-weight: 900; color: var(--txt); letter-spacing: -.01em; line-height: 1.1;
}
.lgs-sn.win  { color: #3cc850; }
.lgs-sn.draw { color: #f5b301; }
.lgs-sn.loss { color: #ff5d5d; }
.lgs-verdict-n { font-size: .82rem; font-weight: 900; text-align: center; }
.lgs-verdict-n.good { color: #3cc850; }
.lgs-verdict-n.bad  { color: #ff5d5d; }
.lgs-verdict-n.neutral { color: var(--txt-dim); }
.lgs-sl {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-dim); font-weight: 700;
}
.lgs-strip-div {
  width: 1px; background: var(--line); margin: .3rem .3rem; align-self: stretch;
}
.lgs-strip-div.wide {
  width: 2px; margin: .2rem .45rem;
}

/* ── Narrative ── */
.lgs-narr {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}
.lgs-narr-title {
  font-size: 1.1rem; font-weight: 900; letter-spacing: .03em;
  color: var(--txt); margin-bottom: .4rem;
}
.lgs-narr-body { font-size: .92rem; line-height: 1.55; color: var(--txt); }
.lgs-pots {
  margin-top: .8rem; padding-top: .8rem;
  border-top: 1px solid var(--line); font-size: .87rem; color: var(--txt-dim);
}

/* ── Section label ── */
.lgs-sec {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-dim); font-weight: 800; margin: .4rem 0 .6rem;
}

/* ── Mini league table ── */
.lgs-mini-tbl {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; margin-bottom: .5rem;
}
.lgs-trow {
  display: flex; align-items: center; gap: .4rem;
  padding: .52rem .85rem; font-size: .87rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.lgs-trow:last-child { border-bottom: none; }
.lgs-trow.user {
  background: rgba(124,92,252,.1); border-left: 3px solid var(--violet);
}
.lgs-trow.rel { background: rgba(255,93,93,.04); }
.lgs-tp { flex: 0 0 24px; text-align: center; color: var(--txt-dim); font-size: .78rem; font-weight: 700; }
.lgs-tn { flex: 1; font-weight: 600; color: var(--txt); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgs-trow.user .lgs-tn { color: var(--violet); font-weight: 800; }
.lgs-tv { flex: 0 0 28px; text-align: center; font-weight: 600; color: var(--txt); font-size: .85rem; }
.lgs-tv.pts { font-weight: 900; }
.lgs-tv.gd  { color: var(--txt-dim); font-size: .8rem; }
.lgs-trow-head { background: rgba(255,255,255,.015); border-bottom: 1px solid var(--line) !important; }
.lgs-trow-head .lgs-tp,
.lgs-trow-head .lgs-tn,
.lgs-trow-head .lgs-tv { color: var(--txt-dim); font-size: .68rem; letter-spacing: .07em; font-weight: 700; }
.lgs-trow-gap {
  padding: .25rem .85rem; font-size: .7rem; color: var(--txt-dim);
  text-align: center; background: rgba(255,255,255,.015);
  border-bottom: 1px solid rgba(255,255,255,.05); font-style: italic;
}
.lgs-full-tbl { margin-top: .3rem; margin-bottom: 1rem; }
.lgs-full-tbl summary {
  cursor: pointer; color: var(--txt-dim); font-weight: 700;
  padding: .5rem 0; font-size: .88rem; list-style: none;
}
.lgs-full-tbl summary::-webkit-details-marker { display: none; }

/* ── Season Awards ── */
.lgs-awards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.lgs-award {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 14px; padding: .85rem .9rem;
}
.lgs-award.gold {
  border-color: rgba(245,180,60,.45); background: rgba(245,180,60,.07);
}
.lgs-award-h {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-dim); font-weight: 700; margin-bottom: .25rem;
}
.lgs-award-name {
  font-size: .98rem; font-weight: 800; color: var(--txt);
  margin-bottom: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lgs-award-sub { font-size: .77rem; color: var(--gold); font-weight: 600; }

/* ── Player stats table ── */
.lgs-ptable {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 14px; padding: .6rem 1rem; margin-bottom: 1rem;
}
.lgs-pt-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .28rem 0 .5rem; border-bottom: 1px solid var(--line);
  color: var(--txt-dim); font-size: .68rem; letter-spacing: .08em; font-weight: 700;
}
.lgs-pt-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .32rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.lgs-pt-row:last-child { border-bottom: none; }
.lgs-pt-pos {
  flex: 0 0 auto; min-width: 34px;
}
.lgs-pt-player {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; color: var(--txt);
}
.lgs-pt-v { flex: 0 0 30px; text-align: center; font-weight: 700; color: var(--txt); }
.lgs-pt-v.g { color: #3cc850; } .lgs-pt-v.a { color: #4aa3ff; }
.lgs-pt-dot { color: rgba(255,255,255,.25); }

/* ── More stats (clean sheets / win streak) ── */
.lgs-morestat { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1rem; }
.lgs-ms-item {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 14px; padding: 1rem .9rem; text-align: center;
}
.lgs-msn { display: block; font-size: 2rem; font-weight: 900; color: var(--txt); line-height: 1.1; }
.lgs-msl {
  display: block; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-dim); font-weight: 700; margin-top: .3rem;
}

/* ── Share button ── */
.lgs-share {
  width: 100%; padding: .9rem; border-radius: 14px; border: none; cursor: pointer;
  font-weight: 800; font-size: .95rem; margin-bottom: 1rem;
  background: #11a86a; color: #fff; font-family: inherit;
}
.lgs-share:hover { filter: brightness(1.08); }

/* ── Score breakdown ── */
.lgs-break {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 14px; padding: .4rem 1rem; margin-bottom: 1rem;
}
.lgs-bk-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .9rem;
}
.lgs-bk-row:last-child { border-bottom: none; }
.lgs-bk-k { color: var(--txt); }
.lgs-bk-v { font-weight: 800; color: #3cc850; }
.lgs-bk-v.neg { color: #ff5d5d; }
.lgs-bk-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 0 .3rem; border-top: 2px solid var(--line); margin-top: .2rem;
  font-weight: 800; font-size: .9rem;
}
.lgs-bk-score { font-size: 1.25rem; color: var(--gold); font-weight: 900; }

/* ── Action buttons ── */
.lgs-btns { display: flex; gap: .7rem; margin-top: .5rem; }
.lgs-btns .btn-primary, .lgs-btns .btn-ghost { flex: 1; }

/* ── Layout width fixes ── */
.lg-setup-wrap { max-width: 660px; }

/* ── Light mode overrides ── */
body.light .lgs-hero { background: linear-gradient(160deg, rgba(124,92,252,.06) 0%, rgba(11,16,32,0) 100%); border-color: rgba(124,92,252,.15); }
body.light .lgs-narr, body.light .lgs-mini-tbl, body.light .lgs-award,
body.light .lgs-ptable, body.light .lgs-break, body.light .lgs-ms-item,
body.light .lgs-strip { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
body.light .lgs-trow.user { background: rgba(124,92,252,.08); }
body.light .lgs-share { background: #0f9860; }
body.light .lgs-pt-dot { color: rgba(0,0,0,.2); }
body.light .lgs-big-pos, body.light .lgs-team-name, body.light .lgs-narr-body,
body.light .lgs-narr-title { color: #11131a; }
body.light .lgs-sn { color: #11131a; }
body.light .lgs-sn.win { color: #1f9d4d; }
body.light .lgs-sn.loss { color: #d63b3b; }
body.light .lgs-sn.draw { color: #b87400; }
body.light .lgs-verdict-n.good { color: #1f9d4d; }
body.light .lgs-verdict-n.bad { color: #d63b3b; }

/* ── Scrollable squad-select modal (38-0 style, full names readable) ── */
.lg-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(4,6,12,.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: fadeIn .18s ease; overflow-y: auto;
}
.lg-modal {
  background: var(--card, #14161f); border: 1px solid var(--line);
  border-radius: 18px; width: 100%; max-width: 460px; max-height: 88vh;
  margin: auto;                     /* robust centering even if tall */
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.lg-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.lg-modal-title { font-size: 1.15rem; font-weight: 800; color: var(--txt); }
.lg-modal-yr { color: var(--txt-dim); font-weight: 600; font-size: .9rem; margin-left: .3rem; }
.lg-modal-close {
  background: rgba(255,255,255,.06); border: none; color: var(--txt);
  width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; cursor: pointer; flex: 0 0 auto;
}
.lg-modal-close:hover { background: rgba(255,255,255,.12); }
.lg-modal-hint { padding: .7rem 1.1rem 0; color: var(--txt-dim); font-size: .82rem; flex: 0 0 auto; }
.lg-modal-list { flex: 1 1 auto; overflow-y: auto; padding: .5rem .7rem; -webkit-overflow-scrolling: touch; }
.lg-msel-row {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem;
  border-radius: 10px; cursor: pointer; border: 1px solid transparent;
}
.lg-msel-row:hover { background: rgba(255,255,255,.05); }
.lg-msel-row.pending { border-color: var(--gold); background: rgba(249,156,0,.1); }
.lg-msel-row.taken { opacity: .45; cursor: default; }
.lg-msel-row.noslot { opacity: .4; cursor: default; }
.lg-msel-row .pos { flex: 0 0 auto; min-width: 38px; text-align: center; font-size: .7rem; font-weight: 800; padding: .25rem .35rem; border-radius: 6px; }
.lg-msel-name { flex: 1 1 auto; font-size: .98rem; font-weight: 600; color: var(--txt); }  /* full name, no truncation */
.lg-msel-rat { flex: 0 0 auto; font-weight: 900; color: var(--txt); min-width: 26px; text-align: right; }
.lg-msel-tag { flex: 0 0 auto; font-size: .72rem; color: var(--txt-dim); }
.lg-msel-tag.done { color: #3cc850; }
.lg-modal-chooser { padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); flex: 0 0 auto; background: rgba(249,156,0,.05); }
.lg-mc-q { font-size: .9rem; margin-bottom: .55rem; color: var(--txt); }
.lg-mc-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.lg-mc-btns .mp-choose-pos { font-size: .8rem; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--txt); cursor: pointer; }
.lg-mc-btns .mp-choose-pos span { opacity: .6; font-size: .72rem; }
.lg-mc-cancel { margin-top: .55rem; background: none; border: none; color: var(--txt-dim); font-size: .82rem; cursor: pointer; }
.lg-modal-foot { display: flex; gap: .5rem; padding: .7rem 1.1rem; border-top: 1px solid var(--line); flex: 0 0 auto; }
.lg-modal-foot .btn-ghost { flex: 1; padding: .6rem; font-size: .85rem; }
body.light .lg-modal { background: #fff; }
body.light .lg-modal-overlay { background: rgba(0,0,0,.45); }

/* Surprise-event popup */
.lg-event { text-align: center; padding: 1.6rem 1.4rem 1.4rem; max-width: 420px; }
.lg-event-emoji { font-size: 3rem; line-height: 1; margin-bottom: .4rem; }
.lg-event-title { font-size: 1.5rem; font-weight: 900; color: var(--txt); margin-bottom: .5rem; letter-spacing: .01em; }
.lg-event-body { font-size: .98rem; line-height: 1.5; color: var(--txt-dim); margin-bottom: 1.1rem; }
.lg-event-body strong { color: var(--txt); }
.lg-event-reel { height: 64px; margin: 0 auto 1rem; max-width: 320px; }
.lg-event-reel .reel-item { height: 64px; }
.lg-event .start-btn { width: 100%; }
body.light .lg-event-title { color: #11131a; }
body.light .lg-event-body strong { color: #11131a; }

/* ── Draft screen: roomier formation, smaller controls (less scrolling) ── */
#leagueView .draft-pitch-wrap .pitch { width: 100%; max-width: 260px; padding: 14px 12px; }
#leagueView .pitch-row { gap: 10px; margin: 7px 0; }
#leagueView .machine .controls { gap: .5rem; }
#leagueView .spin { padding: .7rem 1.6rem; font-size: 1rem; }
#leagueView .reroll { padding: .55rem 1rem; font-size: .85rem; }
#leagueView .xi-actions .btn-accent,
#leagueView .xi-actions .btn-primary { padding: .6rem 1rem; font-size: .9rem; }

/* Wide-screen layout — keep mobile single-column, spread out on desktop */
@media (min-width: 760px) {
  #leagueView .setup { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
  #leagueView .journey { grid-template-columns: 1fr 1fr; }
  #leagueView .lg-live-tally { max-width: 640px; margin-left: auto; margin-right: auto; }
  #leagueView .draft-head { gap: 1.5rem; }
  #leagueView .draft-pitch-wrap .pitch { max-width: 320px; }
  .lg-modal { max-width: 520px; }
}
@media (min-width: 1040px) {
  #leagueView .journey { grid-template-columns: 1fr 1fr 1fr; }
  #leagueView .draft-pitch-wrap .pitch { max-width: 360px; }
}
@media (min-width: 1040px) {
  #leagueView .journey { grid-template-columns: 1fr 1fr 1fr; }
}

.lg-res-list { max-height: 60vh; overflow-y: auto; }
.lg-res-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .82rem;
}
.lgr-gw    { width: 36px; color: var(--txt-dim); font-size: .75rem; }
.lgr-venue { width: 18px; font-size: .72rem; color: var(--txt-dim); }
.lgr-opp   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgr-score { font-weight: 700; min-width: 36px; text-align: center; }
.lgr-badge { width: 22px; text-align: center; font-size: .72rem; font-weight: 700; border-radius: 4px; padding: .1rem 0; }
.lgr-w .lgr-badge { background: rgba(60,200,80,.2); color: #3cc850; }
.lgr-d .lgr-badge { background: rgba(220,200,30,.2); color: #d4c800; }
.lgr-l .lgr-badge { background: rgba(220,60,60,.2);  color: #e05050; }
.lg-res-row.lgr-w { border-left: 3px solid #3cc850; }
.lg-res-row.lgr-d { border-left: 3px solid #d4c800; }
.lg-res-row.lgr-l { border-left: 3px solid #e05050; }

/* Table */
.lg-table {
  width: 100%; border-collapse: collapse;
  font-size: .8rem;
}
.lg-table th, .lg-table td {
  padding: .38rem .45rem;
  text-align: center; border-bottom: 1px solid rgba(255,255,255,.05);
}
.lg-table th { color: var(--txt-dim); font-weight: 600; font-size: .72rem; text-transform: uppercase; }
.lg-table td:nth-child(2) { text-align: left; }
.lg-tbl-col { overflow-x: auto; }
.lg-tbl-user td { background: rgba(60,200,80,.08); font-weight: 600; color: #3cc850; }

/* ─── Light mode ─── */
body.light .lg-card,
body.light .lg-club-card,
body.light .lg-year-card {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
  color: #1a1a2e;
}
body.light .lg-card:hover { border-color: rgba(20,160,40,.55); }
body.light .lg-club-card:hover { border-color: rgba(20,160,40,.45); background: rgba(20,160,40,.05); }
body.light .lg-slot { border-color: rgba(0,0,0,.2); background: rgba(0,0,0,.03); }
body.light .lg-slot.lg-slot-filled { border-color: rgba(20,160,40,.4); background: rgba(20,160,40,.07); }
body.light .lg-slot.lg-slot-active { border-color: #1aa830; background: rgba(20,160,40,.1); }
body.light .lg-squad-side { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light .lg-player-row:hover { background: rgba(0,0,0,.04); }
body.light .lgpl-rat { color: #1aa830; }
body.light .lg-sl-rat { color: #1aa830; }
body.light .lg-res-header { border-color: rgba(20,160,40,.2); }
body.light .lg-tbl-user td { background: rgba(20,160,40,.07); color: #1aa830; }
body.light .lgr-w .lgr-badge { background: rgba(20,160,40,.15); color: #1aa830; }
/* Setup screen — light */
body.light .lg-name-inp {
  background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: #1a1a2e;
}
body.light .lg-name-inp:focus { border-color: rgba(20,160,40,.5); background: rgba(0,0,0,.06); }
body.light .lg-mgr-btn { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: #1a1a2e; }
body.light .lg-mgr-btn:hover { background: rgba(20,160,40,.06); border-color: rgba(20,160,40,.35); }
body.light .lg-mgr-btn.active { background: rgba(20,160,40,.12); border-color: #1aa830; color: #1a6a30; }
body.light .lg-mgr-desc { color: rgba(0,0,0,.5); }
body.light .lg-draft-hd { border-color: rgba(0,0,0,.07); }
body.light .lg-draft-team { color: #1a1a2e; }
body.light .lg-draft-meta { color: rgba(0,0,0,.45); }
body.light .lg-machine { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.09); }
body.light .mp-sq-head { border-color: rgba(0,0,0,.07); }
body.light .mp-sq-hint  { color: rgba(0,0,0,.45); }
body.light .lg-pos-comment { color: rgba(0,0,0,.55); }
body.light .lg-score-line  { color: rgba(0,0,0,.5); }
body.light .lg-tbl-rel td  { color: #c03030; }
body.light .lgr-record     { color: #1a1a2e; }
/* ── MP Pass screen (after picking a player) ── */
.mp-pass-screen { display:flex; flex-direction:column; align-items:center; gap:1.2rem; padding:1.4rem 0; text-align:center; }
.mp-pass-picked { font-size:1rem; color:var(--txt-dim); }
.mp-pass-picked strong { color:#3cc850; font-size:1.15rem; }
.mp-pass-btn { font-size:1.1rem; padding:.85rem 2.2rem; border-radius:14px; }
/* ── MP Simulation screen ── */
.mp-sim-match { display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem; border-radius:9px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); margin-bottom:.35rem; font-size:.88rem; }
.mp-sim-stage { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--txt-dim); margin:.8rem 0 .4rem; }
.mp-sim-ta, .mp-sim-tb { flex:1; font-weight:600; }
.mp-sim-ta { text-align:right; }
.mp-sim-tb { text-align:left; }
.mp-sim-ta.win, .mp-sim-tb.win { color:#3cc850; }
.mp-sim-score { flex:0 0 auto; padding:.15rem .55rem; border-radius:6px; background:rgba(255,255,255,.06); font-weight:800; font-size:.95rem; }
.mp-sim-nav { display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap; justify-content:center; }
.mp-team-preview { display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; border-radius:9px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); margin-bottom:.3rem; font-size:.88rem; }
.mp-team-preview .mp-tc-avg { margin-left:auto; color:var(--gold); font-weight:700; font-size:.82rem; }
body.light .mp-sim-match { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
body.light .mp-sim-score { background:rgba(0,0,0,.05); }
body.light .mp-team-preview { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.05); }
/* ════════════════════════════════════════
   MULTIPLAYER — LIGHT MODE (full pass)
   ════════════════════════════════════════ */

/* Setup screen */
body.light .mp-name-inp {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #1a1a2e;
}
body.light .mp-name-inp::placeholder { color: rgba(0,0,0,0.3); }
body.light .mp-name-inp:focus { border-color: rgba(0,0,0,0.3); }
body.light .mp-back { color: rgba(0,0,0,0.45); }
body.light .mp-back:hover { color: rgba(0,0,0,0.85); }

/* Pill / mode / formation buttons */
body.light .mp-pill-btn,
body.light .mp-mode-btn,
body.light .mp-f-btn,
body.light .mp-mgr-style-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.65);
}
body.light .mp-pill-btn.active,
body.light .mp-mode-btn.active,
body.light .mp-f-btn.selected,
body.light .mp-mgr-style-btn.active {
  background: rgba(0,0,0,0.1);
  border-color: rgba(0,0,0,0.28);
  color: #1a1a2e;
}

/* Labels, subtitles */
body.light .mp-label      { color: rgba(0,0,0,0.42); }
body.light .mp-sub        { color: rgba(0,0,0,0.5); }
body.light .mp-title      { color: #111; }
body.light .mp-sub-hint   { color: rgba(0,0,0,0.38); }
body.light .mp-fmt-info   {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.09);
  color: rgba(0,0,0,0.5);
}
body.light .mp-fmt-info strong { color: rgba(0,0,0,0.75); }

/* Start / confirm buttons */
body.light .mp-start-btn,
body.light .mp-confirm-btn {
  background: linear-gradient(135deg,#1a1a2e,#2d2d5e);
  color: #fff;
  border-color: transparent;
}

/* Draft spin machine */
body.light .mp-reel {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
}
body.light .mp-reel::after {
  background: linear-gradient(to bottom,rgba(255,255,255,0.6) 0%,transparent 25%,transparent 75%,rgba(255,255,255,0.6) 100%);
}
body.light .mp-reel-label { color: rgba(0,0,0,0.4); }
body.light .mp-reel-item  { color: rgba(0,0,0,0.8); }
body.light .mp-reel-item.landed { color: #b86e00; font-weight: 900; }

/* Spin button */
body.light .mp-spin-btn {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.15);
  color: #1a1a2e;
}
body.light .mp-spin-btn:hover:not(:disabled) { background: rgba(0,0,0,0.12); }
body.light .mp-spin-btn.big {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.13);
  color: #1a1a2e;
}
body.light .mp-spin-btn.big:hover:not(:disabled) { background: rgba(0,0,0,0.11); }

/* Draft head */
body.light .mp-draft-head     { border-color: rgba(0,0,0,0.07); }
body.light .mp-draft-player-name { color: #111; }
body.light .mp-draft-meta     { color: rgba(0,0,0,0.45); }

/* Squad panel */
body.light .mp-sq-head        { border-color: rgba(0,0,0,0.08); }
body.light .mp-sq-title       { color: #111; }
body.light .mp-sq-hint        { color: rgba(0,0,0,0.38); }
body.light .mp-sq-player      { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
body.light .mp-sq-player:hover:not(.locked) { background: rgba(0,0,0,0.06); }
body.light .mp-sq-pos,
body.light .mp-sq-r           { color: rgba(0,0,0,0.4); }
body.light .mp-squad-panel .player { color: #111; }
body.light .mp-squad-panel .player.taken { opacity: .45; }
body.light .mp-r-badge        { background: rgba(180,110,0,0.1); color: #9a5c00; }
body.light .mp-locked-badge   { background: rgba(20,160,60,0.1); color: #0d7a2e; }

/* Pitch visual (draft) */
body.light .mp-pitch-visual {
  background: linear-gradient(180deg, rgba(0,110,40,0.09) 0%, rgba(0,80,25,0.06) 100%);
  border-color: rgba(0,160,60,0.14);
}
body.light .mp-pv-pos  { color: rgba(0,0,0,0.38); }
body.light .mp-pv-name { color: rgba(0,0,0,0.8); }
body.light .mp-pv-rat  { color: #9a5c00; }
body.light .mp-pv-slot.mp-pv-GK  { background: rgba(200,150,0,0.07);  border-color: rgba(200,150,0,0.22); }
body.light .mp-pv-slot.mp-pv-DEF { background: rgba(30,100,220,0.07); border-color: rgba(30,100,220,0.22); }
body.light .mp-pv-slot.mp-pv-MID { background: rgba(20,140,60,0.07);  border-color: rgba(20,140,60,0.22); }
body.light .mp-pv-slot.mp-pv-FWD { background: rgba(200,40,40,0.07);  border-color: rgba(200,40,40,0.22); }

/* Position chooser */
body.light .mp-chooser {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
body.light .mp-chooser-q { color: rgba(0,0,0,0.82); }
body.light .mp-chooser-cancel {
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.42);
}
body.light .mp-chooser-cancel:hover { background: rgba(0,0,0,0.05); }

/* Handoff screen */
body.light .mp-handoff-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.09);
}
body.light .mp-handoff-done,
body.light .mp-handoff-formation,
body.light .mp-handoff-picks { color: rgba(0,0,0,0.42); }
body.light .mp-handoff-arrow { color: rgba(0,0,0,0.2); }

/* Tournament / results */
body.light .mp-match-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
body.light .mp-match-row  { border-color: rgba(0,0,0,0.06); }
body.light .mp-mr-score   { color: #111; }
body.light .mp-mr-a,
body.light .mp-mr-b       { color: rgba(0,0,0,0.65); }
body.light .mp-mr-a.win,
body.light .mp-mr-b.win   { color: #0d7a2e; }
body.light .mp-mr-a.loss,
body.light .mp-mr-b.loss  { color: rgba(0,0,0,0.3); }
body.light .mp-table      { color: #111; }
body.light .mp-table th   { color: rgba(0,0,0,0.4); border-color: rgba(0,0,0,0.09); }
body.light .mp-table td   { border-color: rgba(0,0,0,0.05); }
body.light .mp-row-adv td:nth-child(2) { color: #0d7a2e; }
body.light .mp-champion {
  border-color: rgba(180,130,0,0.28);
  background: radial-gradient(ellipse at 50% 60%, rgba(200,150,0,0.06) 0%, transparent 70%);
}
body.light .mp-champ-name  { color: #a07800; }
body.light .mp-team-card   { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); }
body.light .mp-tc-head     { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
body.light .mp-tc-pos      { color: rgba(0,0,0,0.35); }
body.light .mp-tc-club     { color: rgba(0,0,0,0.42); }
body.light .mp-picks-title { color: rgba(0,0,0,0.38); }
body.light .mp-pk-slot     { color: rgba(0,0,0,0.35); }
body.light .mp-pk-club     { color: rgba(0,0,0,0.4); }
body.light .mp-pk-r        { color: rgba(0,0,0,0.45); }

/* Picks / mini pitch */
body.light .mp-pitch-rows  {
  background: rgba(0,110,40,0.06);
  border-color: rgba(0,160,60,0.1);
}
body.light .mp-p-dot       { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); }
body.light .mp-p-dot.filled{ background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.15); }
body.light .mp-p-slot      { color: rgba(0,0,0,0.35); }
body.light .mp-p-name      { color: rgba(0,0,0,0.72); }

/* ─── Multiplayer: formation pitch (draft view) ─── */
.mp-draft-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.mp-draft-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 0 16px 24px;
}
.mp-draft-pitch-col {
  flex: 0 0 260px;
  min-width: 200px;
  position: sticky;
  top: 60px;
}
.mp-draft-spin-col {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .mp-draft-cols {
    flex-direction: column;
    padding: 0 10px 24px;
  }
  .mp-draft-pitch-col {
    flex: none;
    width: 100%;
    position: static;
  }
}

/* Pitch title above the pitch visual */
.mp-pitch-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
  text-align: center;
}

/* Full pitch visual */
.mp-pitch-visual {
  background: linear-gradient(180deg, rgba(0,90,35,0.22) 0%, rgba(0,60,20,0.15) 100%);
  border: 1px solid rgba(0,255,80,0.09);
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column-reverse; /* GK at bottom, FWD at top */
  gap: 6px;
}
/* GK row at top when displayed (column-reverse flips visual order) */
.mp-pv-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* Individual slot tile */
.mp-pv-slot {
  flex: 0 0 48px;
  min-height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background .15s, border-color .15s;
  padding: 3px 2px;
  text-align: center;
}
/* Line-colour tint on unfilled slots */
.mp-pv-GK  { border-color: rgba(255,200,50,0.2);  background: rgba(255,200,50,0.04); }
.mp-pv-DEF { border-color: rgba(50,150,255,0.2);  background: rgba(50,150,255,0.04); }
.mp-pv-MID { border-color: rgba(100,220,100,0.2); background: rgba(100,220,100,0.04); }
.mp-pv-FWD { border-color: rgba(255,80,80,0.2);   background: rgba(255,80,80,0.04); }

/* Filled slot — same tint but brighter */
.mp-pv-slot.mp-pv-filled.mp-pv-GK  { background: rgba(255,200,50,0.12); border-color: rgba(255,200,50,0.35); }
.mp-pv-slot.mp-pv-filled.mp-pv-DEF { background: rgba(50,150,255,0.12); border-color: rgba(50,150,255,0.35); }
.mp-pv-slot.mp-pv-filled.mp-pv-MID { background: rgba(100,220,100,0.12);border-color: rgba(100,220,100,0.35);}
.mp-pv-slot.mp-pv-filled.mp-pv-FWD { background: rgba(255,80,80,0.12);  border-color: rgba(255,80,80,0.35); }

/* Text inside slot */
.mp-pv-pos {
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.3);
}
.mp-pv-name {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  max-width: 46px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.mp-pv-rat {
  font-size: 8px;
  font-weight: 900;
  color: var(--gold, #f99c00);
  opacity: .85;
}

/* Wrap around pitch in pitch-col */
#mpPitchWrap { width: 100%; }

/* ─── Position chooser overlay in squad panel ─── */
.mp-chooser {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.mp-chooser-q {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.9);
}
.mp-chooser-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.mp-choose-pos {
  /* reuse the .pos class colours but as a tappable button */
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.mp-choose-pos:active { transform: scale(0.95); opacity: .7; }
.mp-choose-pos span { font-weight: 500; opacity: .7; font-size: 11px; }
.mp-chooser-cancel {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: background .15s;
}
.mp-chooser-cancel:hover { background: rgba(255,255,255,0.07); }

/* Pending pick highlight */
.mp-player-pending {
  outline: 2px solid rgba(249,156,0,0.6);
  outline-offset: -1px;
}

/* No-slot dim (player incompatible with remaining formation slots) */
.player.noslot {
  opacity: .32;
  pointer-events: none;
}

/* Light mode adjustments for new pitch */
body.light .mp-pitch-visual {
  background: linear-gradient(180deg, rgba(0,100,40,0.12) 0%, rgba(0,70,25,0.08) 100%);
  border-color: rgba(0,180,60,0.12);
}
body.light .mp-pv-pos { color: rgba(0,0,0,0.4); }
body.light .mp-pv-name { color: rgba(0,0,0,0.8); }
body.light .mp-chooser {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.1);
}
body.light .mp-chooser-q { color: rgba(0,0,0,0.8); }
body.light .mp-chooser-cancel {
  border-color: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.4);
}

/* ════════════════════════════════════════════════
   RESPONSIVE & DEVICE-ADAPTIVE LAYER (v71)
   Mobile-first; scales phone → tablet → laptop → desktop.
   Based on UI/UX Pro Max guidance: systematic breakpoints,
   fluid container, ≥44px touch targets, dvh, safe-areas.
   ════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; overflow-x: hidden; }

/* Fluid container: comfortable gutters on phone, wider rails on desktop,
   capped for readability. Honours notch / safe areas. */
.wrap {
  width: 100%;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(60px, env(safe-area-inset-bottom));
}
@media (min-width: 768px)  { .wrap { max-width: 760px; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wrap { max-width: 960px; } }
@media (min-width: 1440px) { .wrap { max-width: 1040px; } }

/* Touch targets — primary controls ≥44px tall; remove 300ms tap delay */
.btn-primary, .btn-ghost, .btn-accent, .start-btn, .spin, .reroll,
.seg-opt, .home-mode-card, .lg-card, .home-board-link, .lg-modal-close,
.lg-msel-row, .mp-choose-pos { min-height: 44px; }
button, a, .seg-opt { touch-action: manipulation; }

/* Home mode cards — single column on small phones, capped & centred elsewhere */
@media (max-width: 400px)  { .home-modes { grid-template-columns: 1fr; max-width: 340px; } }
@media (min-width: 1024px) { .home-modes { max-width: 620px; gap: 18px; } }

/* Tabular figures everywhere numbers line up (scores, tables, timers) */
.lgr2-num, .lgr2-v, .lgr2-rat, .lgr2-pt-v, .lgr2-bk-v, .lg-table td,
.bscore, .brank, .lt-rec, .lt-pts, .lt-gd, .mscore b, .lg-msel-rat, .count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Leaderboard mode tabs wrap gracefully on small screens */
@media (max-width: 560px){
  #boardModes { flex-wrap: wrap; }
  #boardModes .seg-opt { flex: 1 1 30%; font-size: .8rem; padding: .5rem .4rem; }
}

/* Guard against horizontal overflow from wide tables / reels */
.lg-tbl-col, .table-scroll, .lgr2-ptable { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Reels + pitch never overflow their container on tiny screens */
@media (max-width: 360px){
  .reel-item-noflag .name { font-size: 15px; }
  .machine { padding: 16px; }
}

/* ===== Multiplayer setup: compact, single-screen ===== */
.mp-wrap { padding: 0 16px 20px !important; }
.mp-title { font-size: clamp(18px, 4vw, 26px) !important; margin: 10px 0 2px !important; }
.mp-sub { margin: 0 0 14px !important; font-size: 13px !important; }
.mp-section { margin-bottom: 16px !important; }
.mp-label { margin-bottom: 6px !important; }
/* Player count circles */
.mp-nplayers-row { gap: 8px !important; }
.mp-n-btn { width: 36px !important; height: 36px !important; font-size: 15px !important; }
/* Name inputs */
.mp-name-inp { padding: 8px 12px !important; font-size: 14px !important; }
/* Pool buttons */
.mp-mode-grid { gap: 6px !important; }
.mp-mode-btn { padding: 7px 14px !important; font-size: 13px !important; }
/* Format pills */
.mp-pill-btn { padding: 7px 14px !important; font-size: 13px !important; }
.mp-fmt-info { font-size: 12px !important; margin: 6px 0 12px !important; }
/* Start button */
.mp-start-btn { padding: 14px 22px !important; font-size: 16px !important; }
/* Player setup: smaller pitch preview */
.mp-setup-pitch-wrap .pitch { max-height: 340px !important; aspect-ratio: 3 / 4 !important; overflow: visible; }
.mp-setup-pitch-wrap .pdot { width: 34px !important; height: 34px !important; }
/* Formation grid: tighter */
.mp-formation-grid { gap: 6px !important; }
.mp-f-btn { padding: 8px 12px !important; font-size: 13px !important; }
/* Manager style row */
.mp-mgr-style-row { gap: 6px !important; }
.mp-mgr-style-btn { padding: 7px 12px !important; font-size: 12px !important; }
/* Confirm button */
.mp-confirm-btn { padding: 14px 22px !important; font-size: 16px !important; margin-top: 14px !important; }

/* ===== Draft layout v2: bigger natural pitch + compact wheel ===== */
/* Bigger, properly proportioned pitch */
.draft-pitch-wrap .pitch {
  max-height: 340px !important;
  overflow: hidden;
}
.draft-pitch-wrap .pdot {
  width: 36px !important;
  height: 36px !important;
}
.draft-pitch-wrap .pdot .dot-init { font-size: 11px !important; }
.draft-pitch-wrap .pdot .dot-pos  { font-size: 9px !important; }
.draft-pitch-wrap .pdot .dot-postag { font-size: 8px !important; }

/* Compact spin reels so everything fits on one screen */
.draft-left .machine { padding: 10px !important; }
.draft-left .reels { gap: 8px !important; }
.draft-left .reel-box { padding: 6px !important; }
.draft-left .reel-label { font-size: 10px !important; margin-bottom: 4px !important; letter-spacing: 1.5px !important; }
.draft-left .reel { height: 44px !important; }
.draft-left .reel::after { height: 44px !important; }
.draft-left .reel-item { height: 44px !important; font-size: 12px !important; gap: 4px !important; }
.draft-left .reel-item .flag { font-size: 22px !important; }
.draft-left .reel-item .name { font-size: 12px !important; }
.draft-left .reel-item .year { font-size: 18px !important; }
.draft-left .controls { margin-top: 8px !important; gap: 8px !important; }
.draft-left .spin { font-size: 15px !important; padding: 10px 26px !important; }
.draft-left .hint { margin-top: 4px !important; font-size: 11px !important; min-height: 14px !important; }
.draft-under-spin { margin-top: 8px !important; padding-top: 8px !important; gap: 6px !important; }

/* Play competition buttons */
#goWorldCup, #goCL {
  background: linear-gradient(180deg, #9A82FF 0%, #6A47ED 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 5px 16px rgba(124,92,252,0.38) !important;
  font-weight: 800 !important;
}
#goWorldCup:hover:not(:disabled), #goCL:hover:not(:disabled) {
  filter: brightness(1.06) !important;
  box-shadow: 0 8px 22px rgba(124,92,252,0.48) !important;
}

/* ── Squad picker: Respin button inside modal ── */
.squad-respin-btn {
  background: var(--btn-primary-bg, linear-gradient(180deg, #9A82FF 0%, #6A47ED 100%));
  color: var(--btn-primary-fg, #fff);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(124,92,252,0.32);
}
.squad-respin-btn:hover { filter: brightness(1.07); }
.squad-respin-empty {
  font-size: 11px;
  color: var(--text-mute, #828DAD);
  padding: 4px 8px;
}
.squad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Multiplayer draft: squad panel inside draft-left */
.draft-left .mp-squad-panel { margin-top: 10px; }

/* ══════════════════════════════════════════════
   TOURNAMENT SIMULATION — CINEMATIC MATCH VIEW
══════════════════════════════════════════════ */

/* Wrapper */
.mp-tourn-wrap { max-width: 640px; margin: 0 auto; }
.mp-begin-btn { margin: 24px auto 0; display: block; font-size: 1.1rem; }

/* Team strip (pre-game lineup) */
.mp-team-lineups { display: flex; flex-direction: column; gap: 10px; }
.mp-team-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px 18px;
}
.mp-ts-name { font-weight: 700; font-size: 1rem; }
.mp-ts-meta { font-size: .78rem; color: var(--text-mute,#828DAD); margin-top: 2px; }
.mp-ts-avg {
  font-size: 1.5rem; font-weight: 800; color: #f99c00;
  display: flex; flex-direction: column; align-items: center;
}
.mp-ts-avg span { font-size: .6rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-mute,#828DAD); }

/* ── Featured match card ── */
.mp-feat-match {
  background: linear-gradient(160deg, #0c1a2e 0%, #0a1520 100%);
  border: 1px solid rgba(34,224,200,.18);
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.mp-feat-stage {
  text-align: center;
  font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: #22E0C8;
  padding: 10px 0 0;
}
.mp-feat-scoreboard {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  gap: 12px;
}
.mp-feat-team {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
.mp-feat-team-r { align-items: flex-end; }
.mp-feat-tname { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.mp-feat-winner .mp-feat-tname { color: #f99c00; }
.mp-feat-scores {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.mp-feat-g {
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,.4);
}
.mp-feat-sep { font-size: 2rem; font-weight: 300; color: rgba(255,255,255,.2); line-height: 1; }
/* Show score as "G – G" row */
.mp-feat-scores { flex-direction: row; gap: 8px; align-items: center; }
.mp-feat-g-win { color: #fff; }
.mp-feat-pens { font-size: .65rem; color: #22E0C8; letter-spacing: 1px; text-transform: uppercase; }
/* Divider */
.mp-feat-timeline {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 12px 24px;
  display: flex; flex-direction: column; gap: 7px;
}
.mp-ev-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .83rem;
}
.mp-ev-A { justify-content: flex-start; }
.mp-ev-B { justify-content: flex-end; }
.mp-ev-icon { font-size: 1rem; }
.mp-ev-min { font-size: .72rem; color: #22E0C8; font-weight: 700; min-width: 28px; }
.mp-ev-A .mp-ev-min { text-align: right; }
.mp-ev-B .mp-ev-min { text-align: left; }
.mp-ev-name { font-weight: 600; color: var(--text, #ECF1FF); }
.mp-feat-nil { text-align: center; font-size: .8rem; color: var(--text-mute,#828DAD); padding: 10px 0; }
.mp-feat-ft {
  text-align: center; font-size: .65rem; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.3); padding: 8px 0 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* Mini past match row */
.mp-sim-match {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(255,255,255,.03); margin-bottom: 4px;
  border: 1px solid rgba(255,255,255,.05);
}

/* Advance dot */
.mp-adv-dot { color: #22E0C8; font-size: .6rem; vertical-align: middle; }
.mp-adv-note { font-size: .72rem; color: var(--text-mute,#828DAD); margin-top: 6px; }

/* Champion banner enhanced */
.mp-champion-full {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a1000 0%, #0a0800 50%, #1a1000 100%);
  border: 1px solid rgba(249,156,0,.35);
}
.mp-champ-confetti { font-size: 2rem; margin-bottom: -8px; display: block; }

/* Free respin notice */
.mp-free-respin {
  text-align: center; padding: 12px;
  color: #22E0C8; font-size: .9rem;
  border-top: 1px solid rgba(34,224,200,.15);
  animation: pulse-teal 1s ease infinite alternate;
}
@keyframes pulse-teal { from { opacity:.7; } to { opacity:1; } }

/* ══════════════════════════════════════════════
   DUELS (ratingswar) — intro page & build layout
══════════════════════════════════════════════ */

/* Force white text throughout the duels view */
#rwView, #rwView * { color: var(--text, #ECF1FF); }
#rwView .rw-feat-label { color: var(--text, #ECF1FF) !important; }
#rwView .rw-feat-title, #rwView .rw-feat-sub { color: var(--text, #ECF1FF) !important; }
#rwView .rw-preset-label { color: var(--text, #ECF1FF) !important; }
#rwView .rw-preset-desc { color: var(--text-mute, #828DAD) !important; }
#rwView .rw-section-label { color: var(--text-mute, #828DAD) !important; }
#rwView .rw-pc-hint { color: var(--text-mute, #828DAD) !important; }

/* Section wrapper for intro */
.rw-section {
  margin-bottom: 18px;
}
.rw-section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute, #828DAD);
  margin-bottom: 10px;
}

/* Compact pool grid on intro page */
.rw-pool-grid-sm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rw-pool-grid-sm .rw-pool-card {
  padding: 10px 8px !important;
}
.rw-pool-grid-sm .rw-pool-name { font-size: .8rem !important; }
.rw-pool-grid-sm .rw-pool-hint { font-size: .65rem !important; }

/* Build phase — WC-style layout */
.rw-draft-layout { min-height: 100vh; padding-top: 48px; }
.rw-pitch-wrap .pitch { max-height: 340px !important; overflow: visible; }
.rw-pitch-wrap .pdot { width: 34px !important; height: 34px !important; }
.rw-pitch-wrap .dot-postag { font-size: 8px !important; }
.rw-pitch-wrap .dot-init { font-size: 9px !important; font-weight: 900; color: #0a0a0f; }
.rw-pitch-wrap .dot-pos { font-size: 8px !important; }
.rw-pitch-wrap .dot-name { font-size: 7px !important; }

/* RW pitch: same as draft-pitch styles */
.rw-pitch { width: 100%; aspect-ratio: 3/4; }

/* ══════════════════════════════════════════════
   RESPONSIVE SYSTEM — ALL GAME MODES
   Mobile (≤767px) · Tablet (768–900px) · Desktop (≥1200px)
   World Cup draft mode is the visual gold standard.
══════════════════════════════════════════════ */

/* ─── DESKTOP (≥1200px): wider, centred layouts ─── */
@media (min-width: 1200px) {
  .draft-layout {
    grid-template-columns: 3fr 2fr;
    max-width: 1100px;
    margin: 0 auto;
  }
  .draft-left .spin {
    font-size: 1.1rem !important;
    padding: 14px 32px !important;
  }
  .mp-wrap {
    max-width: 900px;
    margin: 0 auto;
  }
  .rw-draft-layout {
    max-width: 1100px;
    margin: 0 auto;
  }
}

/* ─── TABLET (768px – 900px): balanced two-column ─── */
@media (max-width: 900px) and (min-width: 768px) {
  .draft-layout {
    grid-template-columns: 55% 45%;
  }
  .draft-pitch-wrap .pitch {
    max-height: 280px !important;
  }
  .rw-pitch-wrap .pitch {
    max-height: 260px !important;
  }
}

/* ─── MOBILE (≤767px): single-column stacked layouts ─── */
@media (max-width: 767px) {

  /* Draft layout: stack vertically */
  .draft-layout {
    display: block !important;
  }
  .draft-left {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .draft-right {
    width: 100% !important;
    margin-top: 16px !important;
    position: static !important;
  }

  /* Pitch: smaller on mobile */
  .draft-pitch-wrap .pitch {
    max-height: 200px !important;
  }
  .draft-pitch-wrap .pdot {
    width: 28px !important;
    height: 28px !important;
  }

  /* Spin reel */
  .draft-left .reel {
    height: 40px !important;
  }
  .draft-left .reel::after {
    height: 40px !important;
  }
  .draft-left .reel-item {
    height: 40px !important;
  }
  .draft-left .spin {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
  .machine {
    padding: 8px !important;
  }

  /* Squad picker modal: full-screen on mobile */
  .squad {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 500 !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .squad-card {
    max-height: none !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    /* clear the iOS status bar / notch so the team name + Respin aren't cut off */
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
  }
  /* keep the header (team name + respin) sticky so it's always readable while scrolling the list */
  .squad-card .squad-head {
    position: sticky;
    top: 0;
    background: var(--surface, #1b2340);
    padding-bottom: 8px;
    z-index: 2;
  }

  /* Corner home button: smaller */
  .draft-corner-home {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* XI list: natural scroll */
  .xi-list {
    max-height: none !important;
  }

  /* Multiplayer view */
  #mpView .mp-wrap {
    padding: 0 12px 80px !important;
  }
  .mp-section {
    margin-bottom: 12px !important;
  }
  .mp-team-strip {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .mp-names-grid {
    grid-template-columns: 1fr !important;
  }
  .mp-name-inp,
  .rw-names {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Standings table: horizontal scroll */
  .mp-table {
    overflow-x: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Tournament featured scoreboard */
  .mp-feat-scoreboard {
    gap: 6px !important;
    padding: 14px 12px 10px !important;
  }
  .mp-feat-tname {
    font-size: 0.9rem !important;
  }
  .mp-feat-g {
    font-size: 2rem !important;
  }

  /* Duels / Ratings War */
  .rw-draft-layout {
    padding-top: 44px !important;
  }
  .rw-pitch-wrap .pitch {
    max-height: 180px !important;
  }
  .rw-pool-grid-sm {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rw-pool-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .rw-presets {
    flex-wrap: wrap !important;
  }

  /* Home mode cards: 2-column on mobile, not <400px override */
  .fl-modes,
  .home-modes {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Results page summary grid: 1 column */
  .result-under-summary {
    grid-template-columns: 1fr !important;
  }
}

/* ─── SMALL PHONES (≤400px): single-column home cards ─── */
@media (max-width: 400px) {
  .fl-modes,
  .home-modes {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v99 COMPREHENSIVE RESPONSIVE + CONSISTENCY PASS
   Gold standard: WC draft mode. Every other mode mirrors it.
   ═══════════════════════════════════════════════════════════════ */

/* ── Pitch: .prow is an alias for .pitch-row (Duels legacy) ── */
.prow {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ── .dot-inner: legacy wrapper in Duels — neutralise so content
      flows the same as .pdot direct children in WC/MP ── */
.dot-inner {
  display: contents;
}

/* ── .dot-postag: same as .dot-pos — alias ── */
.pdot .dot-postag {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
}
.pdot.filled .dot-postag {
  color: rgba(10, 10, 15, 0.7);
}
.draft-pitch-wrap .pdot .dot-postag,
.rw-pitch-wrap .pdot .dot-postag {
  font-size: 8px !important;
}

/* ── rw-pitch: ensure same pitch-row layout as WC/MP ── */
.rw-pitch .pitch-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ── XI list: desktop scrollable, never pushes page ── */
@media (min-width: 721px) {
  .draft-right {
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .xi-list {
    overflow-y: auto;
    max-height: calc(100vh - 320px);
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Squad card: desktop max-height, desktop scroll ── */
@media (min-width: 721px) {
  .squad-card {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* ── Reel item names: truncate long club/nation names ── */
.reel-item .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Mobile: squad picker slide-up animation ── */
@media (max-width: 720px) {
  .squad {
    animation: squadSlideUp 0.25s ease both !important;
  }
  @keyframes squadSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  /* Squad card: full viewport scroll on mobile */
  .squad-card {
    max-height: 100vh !important;
    overflow-y: auto !important;
    border-radius: 20px 20px 0 0 !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Featured match card: fade in animation ── */
.mp-feat-match {
  animation: fl-rise var(--dur-3, 0.3s) ease both;
}

/* ── Champion banner: gold pulse animation ── */
@keyframes champPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 156, 0, 0); }
  50%       { box-shadow: 0 0 0 8px rgba(249, 156, 0, 0.12); }
}
.mp-champion, .mp-champion-full {
  animation: champPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mp-champion, .mp-champion-full { animation: none; }
}

/* ── Pitch dots: smooth fill transition ── */
.pdot {
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

/* ── SPIN button: spinning disabled state ── */
.spin[data-spinning="true"],
.spin:disabled {
  opacity: 0.55;
  animation: none !important;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* ── Touch targets: all buttons ≥ 44px ── */
button,
.player,
.formation-opt,
.manager-opt,
.mp-pill-btn,
.mp-mode-btn,
.mp-f-btn,
.rw-pc-btn,
.rw-pool-card,
.fl-mode {
  min-height: 44px;
}

/* ── iOS input zoom prevention: font-size ≥ 16px on inputs ── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
.team-name-input,
.mp-name-inp,
.lg-name-inp,
.rw-input,
.mp-code-input {
  font-size: max(16px, 1em) !important;
}

/* ── Scrollable containers: smooth iOS momentum ── */
.squad-card,
.xi-list,
.draft-right,
.fl-dock-body,
.lg-squad-list,
.dvc-pool-grid,
.rw-sp-pool-list,
.mp-sq-ul,
.rw-slots,
.bracket {
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════
   SETUP PAGE MOBILE
   ═══════════════════════════ */
@media (max-width: 600px) {
  /* Formation grid wraps gracefully */
  .formation-options {
    gap: 6px;
  }
  .formation-opt {
    font-size: 12px;
    padding: 8px 11px;
  }
  /* Manager cards: 2-col grid */
  .manager-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .manager-opt {
    border-radius: 12px;
    justify-content: flex-start;
  }
  /* Difficulty row wraps */
  .diff-row {
    flex-wrap: wrap;
  }
  /* Setup pitch: smaller on tiny screens */
  .setup-pitch-wrap .pitch {
    max-width: 240px;
  }
}

/* ═══════════════════════════
   RESULTS PAGE MOBILE
   ═══════════════════════════ */
@media (max-width: 600px) {
  .stat-cols {
    grid-template-columns: 1fr !important;
  }
  .score-banner {
    font-size: 15px;
  }
  .score-banner b {
    font-size: 22px;
  }
  .champion, .champion.big {
    font-size: 15px;
    padding: 12px 14px;
  }
  .result-bottom-cta {
    flex-direction: column;
    gap: 8px;
  }
  .result-bottom-cta button,
  .result-bottom-cta a {
    width: 100%;
  }
}

/* ═══════════════════════════
   LEADERBOARD MOBILE
   ═══════════════════════════ */
@media (max-width: 600px) {
  .board-list {
    gap: 4px;
  }
  table.league,
  table.mini {
    font-size: 11px;
  }
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════
   DUELS REVEAL MOBILE
   ═══════════════════════════ */
@media (max-width: 600px) {
  .rw-rev-list {
    gap: var(--sp-2, 8px);
  }
  .rw-rev-row {
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    padding: 8px 10px;
  }
  .rw-rev-name {
    font-size: 13px;
  }
  .rw-rev-rating {
    font-size: 1.3rem;
  }
  .rw-scorebar {
    padding: var(--sp-3, 12px);
    gap: var(--sp-2, 8px);
  }
  .rw-team-score {
    font-size: clamp(28px, 7vw, 40px);
  }
  .rw-result-card {
    margin: var(--sp-4, 16px) auto;
    padding: var(--sp-4, 16px) var(--sp-3, 12px);
  }
  .rw-result-score {
    font-size: clamp(36px, 9vw, 56px);
  }
  .rw-result-btns {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ═══════════════════════════
   MULTIPLAYER SETUP MOBILE
   ═══════════════════════════ */
@media (max-width: 600px) {
  .mp-modeselect {
    grid-template-columns: 1fr !important;
  }
  .rw-player-count {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .mp-names-grid {
    grid-template-columns: 1fr !important;
  }
  /* Name inputs: full width + iOS zoom safe */
  .mp-name-inp {
    width: 100%;
    box-sizing: border-box;
  }
  /* Formation grid: 2-col on small */
  .mp-formation-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ═══════════════════════════
   TOURNAMENT MOBILE
   ═══════════════════════════ */
@media (max-width: 600px) {
  .mp-feat-scoreboard {
    padding: 12px 14px 10px !important;
    gap: 8px !important;
  }
  /* Make featured score bigger and bolder on small screens */
  .mp-feat-g {
    font-size: 2.4rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .mp-feat-g-win {
    color: #fff !important;
  }
  .mp-feat-tname {
    font-size: 0.85rem !important;
    line-height: 1.3;
  }
  .mp-champion {
    padding: 24px 16px;
    margin: 16px 0;
    text-align: center;
  }
  .mp-champ-name {
    font-size: clamp(20px, 6vw, 32px);
    letter-spacing: 1px;
  }
  /* Tournament team strip: stack on mobile */
  .mp-team-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
  }
  .mp-ts-avg {
    font-size: 1.2rem;
  }
  /* Past results list: scrollable */
  .mp-sim-match {
    font-size: 13px;
  }
}

/* ═══════════════════════════
   PASS SCREEN MOBILE
   ═══════════════════════════ */
@media (max-width: 600px) {
  .mp-pass-screen {
    padding: 16px;
    text-align: center;
  }
  .mp-pass-screen .draft-pitch-wrap {
    width: 100% !important;
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════
   TINY SCREENS (< 360px): scale pitch dots down
   ═══════════════════════════ */
@media (max-width: 359px) {
  .draft-pitch-wrap .pitch,
  .rw-pitch-wrap .pitch {
    transform: scale(0.85);
    transform-origin: top center;
  }
  .mp-feat-scoreboard {
    padding: 10px 8px 8px !important;
  }
  .mp-feat-g {
    font-size: 1.8rem !important;
  }
}

/* ═══════════════════════════
   DRAFT-META: wrap gracefully
   ═══════════════════════════ */
.draft-meta {
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

/* ═══════════════════════════
   XI-HEAD: compact on mobile
   ═══════════════════════════ */
@media (max-width: 480px) {
  .xi-head {
    flex-wrap: wrap;
    gap: 4px;
  }
  .xi-head h2 {
    font-size: 16px;
  }
}

/* ═══════════════════════════
   MOBILE: draft-right visible (not hidden)
   Show XI list below machine on mobile, not hidden
   ═══════════════════════════ */
@media (max-width: 720px) {
  .draft-right {
    display: block !important;
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    margin-top: 12px;
    width: 100%;
  }
}

/* ═══════════════════════════
   LIGHT MODE: new components
   ═══════════════════════════ */
body.light .mp-feat-match {
  background: linear-gradient(160deg, #eef4fb 0%, #e8f0f8 100%);
  border-color: rgba(34, 224, 200, 0.25);
}
body.light .mp-feat-stage,
body.light .mp-feat-pens,
body.light .mp-ev-min {
  color: #0a7c70;
}
body.light .mp-feat-g {
  color: rgba(0, 0, 0, 0.35);
}
body.light .mp-feat-g-win {
  color: #0a0a0f;
}
body.light .mp-feat-tname {
  color: #1a1a2e;
}
body.light .mp-feat-winner .mp-feat-tname {
  color: var(--gold, #c8860a);
}
body.light .mp-feat-ft {
  color: rgba(0, 0, 0, 0.25);
}
body.light .mp-feat-timeline {
  border-top-color: rgba(0, 0, 0, 0.08);
}
body.light .mp-ev-name {
  color: #1a1a2e;
}
body.light .mp-champion,
body.light .mp-champion-full {
  background: radial-gradient(ellipse at 50% 60%, rgba(200, 134, 10, 0.08) 0%, transparent 70%);
  border-color: rgba(200, 134, 10, 0.3);
}
body.light .mp-champ-name {
  color: var(--gold, #c8860a);
}
body.light .mp-team-strip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light .mp-ts-avg {
  color: var(--gold, #c8860a);
}
body.light .mp-free-respin {
  color: #0a7c70;
  border-top-color: rgba(10, 124, 110, 0.2);
}
body.light .squad-respin-btn {
  box-shadow: 0 3px 10px rgba(124, 92, 252, 0.25);
}

/* ═══════════════════════════
   POSITION BADGES: consistent colours everywhere
   GK=gold  DEF=cyan/teal  MID=violet  FWD=coral
   ═══════════════════════════ */
/* Squad-group labels (already set but ensure FWD is coral not pink) */
.squad-group-label.GK  { color: #F5B43C; }
.squad-group-label.DEF { color: #22E0C8; }
.squad-group-label.MID { color: #7C5CFC; }
.squad-group-label.FWD { color: #FF7A59; }

/* Player/xi-row position badge colours — unified */
.pos.GK  { background: rgba(245, 180, 60, 0.18);  color: #F5B43C; }
.pos.DEF { background: rgba(34, 224, 200, 0.16);  color: #22E0C8; }
.pos.MID { background: rgba(124, 92, 252, 0.18);  color: #7C5CFC; }
.pos.FWD { background: rgba(255, 122, 89, 0.18);  color: #FF7A59; }

/* Light-mode position badge text contrast */
body.light .pos.GK  { background: rgba(200, 134, 10, 0.14); color: #a06800; }
body.light .pos.DEF { background: rgba(10, 124, 110, 0.14); color: #0a7c70; }
body.light .pos.MID { background: rgba(100, 70, 200, 0.14); color: #5c3dc2; }
body.light .pos.FWD { background: rgba(200, 80, 50, 0.14);  color: #c04020; }

/* ═══════════════════════════════════════════════════
   SPIN ROW — horizontal layout: Club | Year | SPIN
   Applied across all squad-creation modes
   ═══════════════════════════════════════════════════ */

/* Replace stacked reels with a single horizontal row */
.spin-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.spin-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
/* Give the year reel a sensible minimum so "2024" never looks cramped */
.spin-row .spin-col:last-of-type { min-width: 92px; }
.spin-col-btn {
  flex: 0 0 auto;
}
.spin-col-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}
/* Reuse .reel but compact height in the row */
.spin-reel {
  height: 58px !important;
}
.spin-reel::after {
  height: 58px !important;
}
.spin-reel .reel-item {
  height: 58px !important;
}
.spin-reel .reel-item .flag { font-size: 20px; }
.spin-reel .reel-item .name { font-size: 12px; }
.spin-reel .reel-item .year { font-size: 22px; }
.spin-col-btn button.spin {
  padding: 11px 22px;
  font-size: 15px;
  width: 100%;
  white-space: nowrap;
}
.spin-sub-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: center;
}

/* Bigger formation pitch in draft view */
.draft-pitch-wrap .pitch {
  max-height: 320px !important;
  padding: 8px 10px !important;
}
.draft-pitch-wrap .pdot {
  width: 34px !important;
  height: 34px !important;
}
.draft-pitch-wrap .pdot .dot-pos { font-size: 9px !important; }
.draft-pitch-wrap .pdot .dot-init { font-size: 10px !important; }

/* Tighter machine box so everything fits on screen */
.draft-left .machine { padding: 12px; }
.draft-left .machine .spin-col-label { margin-bottom: 4px; }

/* Compact under-spin buttons */
.draft-under-spin { margin-top: 8px; padding-top: 8px; }

/* League / Multiplayer: remove old grid override (now using spin-row flex) */
#leagueView .spin-row, #mpView .spin-row { gap: 10px; }

/* ===== vs Computer — three-column draft layout ===== */
/* ── vs Computer three-column layout ── */
.dvc-three-col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 12px;
}
/* DVC pool grid in setup */
.dvc-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.dvc-pool-grid .rw-pool-card {
  padding: 10px 8px;
}
.dvc-pool-grid .rw-pool-name { font-size: .82rem; font-weight: 700; }
.dvc-pool-grid .rw-pool-hint { font-size: .65rem; color: var(--muted); }

.dvc-pitch-col {
  flex: 0 0 240px;
  min-width: 0;
}
.dvc-center-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
/* Compact reel — just squad name + year, no flag */
.dvc-combo-reel-wrap { width: 100%; }
.dvc-combo-reel { height: 68px !important; width: 100%; }
.dvc-combo-reel::after { height: 68px !important; }
.dvc-combo-item {
  height: 68px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.dvc-item-flag { display: none; }
.dvc-item-team { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: 0.5px; text-align: center; }
.dvc-item-year { font-size: 12px; color: var(--gold); }
.dvc-stars { color: var(--gold); letter-spacing: 1px; }

/* Action row: spin + reroll side by side */
.dvc-action-row { display: flex; gap: 8px; }
.dvc-reel-btn { flex: 1; font-size: 14px; padding: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.dvc-reroll-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.dvc-reroll-btn:hover:not(:disabled) { background: rgba(255,255,255,0.13); }
.dvc-reroll-btn:disabled { opacity: 0.4; cursor: default; }

/* Inline squad picker */
.dvc-squad-inline {
  background: var(--card, #12121f);
  border-radius: 10px;
  padding: 10px 12px;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.07);
}
.dvc-squad-inline .squad-card { padding: 0; box-shadow: none; background: none; }
.dvc-squad-inline .squad-head h2 { font-size: 14px; margin: 0 0 4px; }
.dvc-squad-inline .sub { font-size: 11px; margin-bottom: 6px; opacity: 0.7; }
.dvc-squad-inline .players { display: flex; flex-direction: column; gap: 3px; }
.dvc-squad-inline .player { padding: 5px 8px; border-radius: 6px; }

/* Bigger pitches */
.dvc-pitch-col .pitch { max-height: none !important; height: 100%; padding: 8px !important; }
.dvc-pitch-col .pdot { width: 34px !important; height: 34px !important; margin-bottom: 14px !important; }
.dvc-pitch-col .pdot .dot-pos { font-size: 8px !important; }
.dvc-pitch-col .pdot .dot-name { font-size: 7.5px !important; display: block !important; }
.dvc-pitch-col .pdot .dot-init { font-size: 10px !important; }
.dvc-pitch-col .dvc-col-title { font-size: 11px; font-weight: 700; text-align: center; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }

/* Mobile: stack vertically — CPU pitch shown below player pitch */
@media (max-width: 700px) {
  .dvc-three-col { flex-direction: column; }
  .dvc-pitch-col { flex: none; width: 100%; }
  .dvc-left-col { order: 3; } /* CPU pitch goes below on mobile */
  .dvc-center-col { order: 1; }
  .dvc-right-col { order: 2; }
}

/* ============================================================
   RESPONSIVE OVERHAUL — all game modes, all screen sizes
   v1 — covers mobile (≤480px), small (≤600px), tablet (≤768px)
   ============================================================ */

/* ── 1. Fixed nav buttons: don't overlap logo on narrow screens ─── */
@media (max-width: 600px) {
  .theme-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
  }
  .sound-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 56px; /* keep clear of theme toggle (2×22px + padding + right:10px) */
  }
  /* Home / back button: pin to the top-left so it stays reachable while scrolling */
  .back, .mp-back {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    align-self: flex-start;
    z-index: 150;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .draft-corner-home {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: 12px !important;
  }
  /* Give brand / header extra right-side padding so buttons don't cover it */
  header {
    padding-top: 56px; /* push content below fixed nav row */
    margin-bottom: 10px;
  }
  /* Home hero title — smaller on very narrow screens */
  header h1 {
    font-size: clamp(22px, 7vw, 34px);
  }
}

/* ── 2. Spin row (all modes) ─── */
@media (max-width: 480px) {
  /* Make reels shorter on phone so whole row fits */
  .spin-reel, .spin-reel::after, .spin-reel .reel-item {
    height: 48px !important;
  }
  .spin-col-label { font-size: 9px !important; }
  .spin-col-btn button.spin {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* ── 3. Draft layout (World Cup + Euros) ─── */
@media (max-width: 720px) {
  /* Already stacks to 1col — just make pitch smaller */
  .draft-pitch-wrap .pitch {
    max-height: 230px !important;
    padding: 6px 8px !important;
  }
  .draft-pitch-wrap .pdot {
    width: 28px !important;
    height: 28px !important;
  }
  .draft-pitch-wrap .pdot .dot-pos { font-size: 8px !important; }
}
@media (max-width: 480px) {
  .draft-pitch-wrap .pitch {
    max-height: 190px !important;
  }
  .draft-pitch-wrap .pdot {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ── 4. vs Computer three-column draft ─── */
@media (max-width: 700px) {
  /* Already set to flex-direction:column — ensure all children go full width */
  .dvc-center-col {
    width: 100%;
    align-self: stretch;
  }
  .dvc-pitch-col {
    width: 100%;
    flex: none;
  }
  /* Hide CPU pitch on mobile to save space (user can see their own) */
  .dvc-left-col { display: none; }
  .dvc-combo-reel { height: 80px !important; }
  .dvc-combo-item { height: 80px !important; }
}
@media (max-width: 480px) {
  .dvc-reel-btn {
    font-size: 13px !important;
    padding: 12px !important;
  }
  .dvc-squad-inline {
    max-height: 260px;
  }
  /* Compact pitch on mobile in vs Computer right column */
  .dvc-right-col .pitch { max-height: 180px !important; padding: 4px 6px !important; }
  .dvc-right-col .pdot  { width: 22px !important; height: 22px !important; }
}

/* ── 5. vs Computer draft header banner ─── */
@media (max-width: 600px) {
  .dvc-turn-banner {
    font-size: 13px;
    padding: 8px 12px;
  }
  .dvc-draft-progress { flex-wrap: wrap; gap: 4px; }
  .dvc-last-cpu-pick { font-size: 12px; }
}

/* ── 6. League mode ─── */
@media (max-width: 680px) {
  /* lg-draft-cols already has a media query — ensure machine fits */
  #leagueView .machine { padding: 10px; }
  #leagueView .spin-row { gap: 6px; }
}
@media (max-width: 480px) {
  #leagueView .machine { padding: 8px; }
  #leagueView .spin-reel, #leagueView .spin-reel::after, #leagueView .spin-reel .reel-item {
    height: 44px !important;
  }
}

/* ── 7. Multiplayer draft ─── */
@media (max-width: 680px) {
  #mpView .spin-row { gap: 6px; }
  #mpView .machine { padding: 10px; }
  /* Player panels: wrap to 2 cols on tablet, 1 col on phone */
  .mp-players-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .mp-players-grid { grid-template-columns: 1fr !important; }
  #mpView .spin-reel, #mpView .spin-reel::after, #mpView .spin-reel .reel-item {
    height: 44px !important;
  }
  /* Multiplayer header buttons row */
  .mp-header { flex-wrap: wrap; gap: 6px; }
}

/* ── 8. Euros / Floodlights mode ─── */
@media (max-width: 600px) {
  /* Group stage grid */
  .grid-groups { grid-template-columns: 1fr !important; }
  /* KO bracket */
  .ko-bracket { overflow-x: auto; }
}

/* ── 9. Squad picker overlay ─── */
@media (max-width: 480px) {
  .squad-card { padding: 12px; }
  .squad-head h2 { font-size: 16px; }
  .player { padding: 8px 10px; }
  .pname { font-size: 13px; }
}

/* ── 10. Results / match sim screens ─── */
@media (max-width: 600px) {
  .stat-cols { grid-template-columns: 1fr 1fr; }
  .res-scores { font-size: clamp(28px, 10vw, 48px); }
  .res-teams  { font-size: clamp(11px, 3vw, 14px); }
  .ko-line    { font-size: 12px; padding: 6px 8px; }
}
@media (max-width: 400px) {
  .stat-cols { grid-template-columns: 1fr; }
}

/* ── 11. Setup screens (formation/difficulty pickers) ─── */
@media (max-width: 480px) {
  .formation-options { flex-wrap: wrap; gap: 6px; }
  .formation-opt { flex: 1 1 40%; text-align: center; }
  .diff-row { flex-wrap: wrap; gap: 6px; }
  .diff-opt { flex: 1 1 28%; text-align: center; }
  .setup { padding: 16px; }
  .start-btn { width: 100%; }
}

/* ── 12. Home screen cards ─── */
@media (max-width: 420px) {
  .mode-card { padding: 16px; }
  .mode-icon { width: 44px; height: 44px; }
  .mode-title { font-size: 17px; }
}

/* ── 13. Leaderboard / board view ─── */
@media (max-width: 600px) {
  .board-row { padding: 8px 10px; gap: 8px; font-size: 13px; }
  .bname { font-size: 13px; }
}

/* ── 14. Tablet tweaks (768px) ─── */
@media (max-width: 768px) and (min-width: 601px) {
  header { padding-top: 48px; }
  .theme-toggle { top: 10px; right: 10px; }
  .sound-toggle { top: 10px; right: 70px; }
  /* vs Computer: keep 3 col but compress pitches */
  .dvc-pitch-col { flex: 0 0 160px; }
  .dvc-pitch-col .pitch { max-height: 220px !important; }
  .dvc-pitch-col .pdot  { width: 22px !important; height: 22px !important; }
}

/* ── 15. Safe-area insets (iPhone notch / home indicator) ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── 16. Touch targets — ensure all interactive elements ≥44px ─── */
@media (max-width: 768px) {
  button, a.btn, .choose-pos, .formation-opt, .diff-opt,
  .mp-choose-pos, .player:not(.taken):not(.noslot) {
    min-height: 40px;
  }
  /* Back button on game screens */
  .back { min-height: 38px; padding: 8px 16px; }
}

/* ── 17. Prevent horizontal overflow ─── */
* { box-sizing: border-box; }
@media (max-width: 600px) {
  .machine, .squad-card, .setup, .dvc-draft-wrap,
  .dvc-squad-inline, .spin-row {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ── 18. Typography scale on small phones ─── */
@media (max-width: 380px) {
  body { font-size: 14px; }
  .rw-title, h2 { font-size: clamp(18px, 6vw, 24px) !important; }
  .rw-sub, .sub, .seg-desc { font-size: 13px !important; }
  .spin-col-label { display: none; } /* hide labels — save vertical space */
}

/* ══ DRAFT SCREEN FEATURES ══════════════════════════════════════════════ */

/* Progress bar */
.draft-progress-bar {
  position: relative; width: 100%; height: 28px;
  background: rgba(255,255,255,0.06); border-radius: 0;
  display: flex; align-items: center; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.draft-progress-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, rgba(99,102,241,0.4), rgba(99,102,241,0.65));
  transition: width 0.4s cubic-bezier(0.34,1.2,0.64,1);
  border-radius: 0;
}
.draft-progress-label {
  position: relative; z-index: 1; width: 100%; text-align: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
}
.draft-progress-bar.reroll-warn .draft-progress-label::after {
  content: " · ⚠️ Last reroll — use wisely";
  color: #fbbf24;
}
body.light .draft-progress-bar { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); }
body.light .draft-progress-label { color: rgba(0,0,0,0.55); }

/* GOAT badge */
.goat-player {
  border: 1.5px solid #F5B43C !important;
  background: linear-gradient(120deg, rgba(245,180,60,0.12), transparent) !important;
}
.goat-badge {
  font-size: 9px; font-weight: 900; letter-spacing: 0.06em;
  background: linear-gradient(135deg, #F5B43C, #e8a020);
  color: #0a0a0f; padding: 2px 5px; border-radius: 4px;
  margin-left: auto; flex-shrink: 0;
}

/* Country flag */
.squad-flag { font-size: 1.1em; line-height: 1; }

/* Reroll badge inside respin button */
.reroll-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.2); font-weight: 900; font-size: 11px;
  margin-left: 4px;
}
.reroll-last { border-color: #fbbf24 !important; color: #fbbf24 !important; }
.reroll-last .reroll-badge { background: #fbbf24; color: #0a0a0f; }

/* Squad search */
.squad-search-wrap { padding: 6px 0 4px; }
.squad-search {
  width: 100%; padding: 7px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.squad-search:focus { border-color: rgba(99,102,241,0.6); background: rgba(99,102,241,0.08); }
body.light .squad-search { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #1a1a1a; }
body.light .squad-search:focus { border-color: #4338ca; }

/* Manager wheel buttons row */
.mgr-wheel-btns { display: flex; gap: 8px; flex-direction: column; }
.mgr-random-btn { font-size: 12px; padding: 6px 12px; }

/* ══ RESULTS SCREEN — 5 FEATURES ════════════════════════════════════════ */

/* 2. Animated rank reveal */
.rank-reveal {
  text-align: center; padding: 14px 0 4px;
}
.rank-calc {
  font-size: 13px; color: var(--muted);
  animation: rankPulse 0.9s ease-in-out infinite alternate;
  transition: opacity 0.4s;
}
.rank-calc.rank-calc-fade { opacity: 0; }
@keyframes rankPulse { from { opacity: 0.4; } to { opacity: 1; } }
.rank-num {
  font-size: 22px; font-weight: 900; color: var(--text);
  letter-spacing: -0.02em;
}
.rank-num.rank-num-pop {
  animation: rankPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes rankPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* 4. Manager verdict */
.manager-verdict {
  margin: 14px 0; padding: 14px 16px;
  background: linear-gradient(120deg, rgba(99,102,241,0.1), rgba(99,102,241,0.04));
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 12px;
}
.mv-head {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(99,102,241,0.9); margin-bottom: 6px;
}
.mv-body { font-size: 13px; line-height: 1.55; color: var(--text); }
.mv-body strong { color: #818cf8; }

/* 3. Next-step CTAs */
.next-step-ctas {
  margin: 16px 0; display: flex; flex-direction: column; gap: 8px;
}
.nsc-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.next-cta-btn {
  width: 100%; padding: 13px 16px; border-radius: 11px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; text-align: left;
  background: linear-gradient(180deg, #818cf8 0%, #4338ca 100%);
  color: #fff; transition: opacity 0.15s, transform 0.12s;
}
.next-cta-btn:active { transform: scale(0.98); }
.next-cta-sec {
  background: rgba(255,255,255,0.07);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
}
.next-cta-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid rgba(255,255,255,0.1); font-size: 13px;
}
body.light .next-cta-sec { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: #1a1a1a; }
body.light .next-cta-ghost { background: transparent; border-color: rgba(0,0,0,0.1); color: #555; }

/* 5. Daily challenge CTA on results */
.daily-cta-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; margin: 8px 0 16px;
  background: linear-gradient(100deg, rgba(245,180,60,0.12), rgba(245,180,60,0.04));
  border: 1px solid rgba(245,180,60,0.3); border-radius: 12px;
}
.daily-cta-ico { font-size: 24px; flex-shrink: 0; }
.daily-cta-text { flex: 1; font-size: 12px; line-height: 1.45; color: var(--text); }
.daily-cta-text strong { font-size: 13px; }
.daily-cta-btn {
  flex-shrink: 0; padding: 8px 14px; border-radius: 9px; border: none; cursor: pointer;
  background: #F5B43C; color: #0a0a0f; font-size: 12px; font-weight: 800;
}

/* ══ DAILY WORDLE ════════════════════════════════════════════════════════ */

.dc-wrap { max-width: 560px; margin: 0 auto; padding: 8px 0 40px; }

/* Header */
.dc-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.dc-title { font-size: 22px; font-weight: 900; margin: 0 0 4px; }
.dc-sub { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.dc-legend { display: flex; gap: 12px; margin-bottom: 14px; }
.dc-leg { font-size: 11px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 3px; }

/* Grid */
.dc-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }

.dc-row { display: grid; grid-template-columns: 110px repeat(5, 1fr); gap: 3px; align-items: stretch; }

/* Column header row */
.dc-col-hdr { margin-bottom: 2px; }
.dc-hcell {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 4px 2px;
}

/* Name column */
.dc-name-col { display: flex; align-items: center; padding-right: 6px; }
.dc-pname { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; }

/* Cells */
.dc-cell {
  border-radius: 6px; padding: 8px 4px;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; transition: transform 0.15s;
}
.dc-val { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.25; word-break: break-word; }

/* States */
.dc-cell.hit   { background: #16a34a; color: #fff; }
.dc-cell.close { background: #ca8a04; color: #fff; }
.dc-cell.miss  { background: rgba(255,255,255,0.09); color: var(--text); border: 1px solid rgba(255,255,255,0.1); }
.dc-blank      { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; min-height: 44px; }

/* Win row highlight */
.dc-row-win .dc-pname { color: #4ade80; }

/* Empty rows */
.dc-empty-row { opacity: 0.35; }

/* Light mode cell overrides */
body.light .dc-cell.miss  { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.1); color: #1a1a1a; }
body.light .dc-blank       { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }

/* Input area */
.dc-input-area { margin-top: 8px; }
.dc-guess-status { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 8px; }
.dc-search-wrap { position: relative; }
.dc-search {
  width: 100%; padding: 12px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.15);
  color: var(--text); font-size: 15px; outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.dc-search:focus { border-color: rgba(99,102,241,0.7); background: rgba(99,102,241,0.08); }
body.light .dc-search { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); color: #1a1a1a; }
body.light .dc-search:focus { border-color: #4338ca; background: rgba(67,56,202,0.06); }

/* Suggestions dropdown */
.dc-suggestions {
  display: none; margin-top: 4px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: #1a1a28; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 50; position: relative;
}
body.light .dc-suggestions { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.dc-sug-item {
  padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.1s;
}
.dc-sug-item:last-child { border-bottom: none; }
.dc-sug-item:hover { background: rgba(99,102,241,0.15); }
body.light .dc-sug-item { border-color: rgba(0,0,0,0.06); }
body.light .dc-sug-item:hover { background: rgba(99,102,241,0.08); }
.dc-sug-name { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.dc-sug-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Result card */
.dc-result {
  padding: 16px; border-radius: 12px; text-align: center;
  margin: 12px 0;
}
.dc-result.dc-win {
  background: linear-gradient(135deg, rgba(22,163,74,0.2), rgba(22,163,74,0.08));
  border: 1px solid rgba(22,163,74,0.35);
}
.dc-result.dc-loss {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.dc-result-title { font-size: 17px; font-weight: 900; margin-bottom: 6px; }
.dc-result-ans { font-size: 13px; color: var(--muted); }
.dc-result.dc-win .dc-result-title { color: #4ade80; }

.dc-share-btn { width: 100%; margin: 10px 0 0; }
.dc-tomorrow { text-align: center; font-size: 12px; color: var(--muted); margin-top: 8px; }

/* Responsive */
@media (max-width: 480px) {
  .dc-row { grid-template-columns: 90px repeat(5, 1fr); gap: 2px; }
  .dc-cell { padding: 6px 2px; min-height: 38px; }
  .dc-val { font-size: 9.5px; }
  .dc-pname { font-size: 10px; }
  .dc-hcell { font-size: 8px; }
}
@media (max-width: 380px) {
  .dc-row { grid-template-columns: 72px repeat(5, 1fr); }
  .dc-search { font-size: 14px; padding: 10px 12px; }
}

/* ══ WORDLE DAILY CHALLENGE ══════════════════════════════════════════════ */

.wl-wrap { max-width: 420px; margin: 0 auto; padding: 8px 0 60px; display: flex; flex-direction: column; align-items: center; }
.wl-head { text-align: center; margin-bottom: 16px; }
.wl-tag  { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.wl-title { font-size: 22px; font-weight: 900; margin: 0 0 4px; }
.wl-sub  { font-size: 13px; color: var(--muted); margin: 0; }

/* Message bar */
.wl-msg { min-height: 20px; font-size: 13px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 6px; transition: opacity 0.4s; opacity: 0; }

/* Toast for win/loss */
.wl-toast { width: 100%; text-align: center; padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.wl-win  { background: rgba(22,163,74,0.15); border: 1px solid rgba(22,163,74,0.35); color: var(--text); }
.wl-loss { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text); }
.wl-toast strong { font-weight: 900; font-size: 16px; }
body.light .wl-win  { background: rgba(22,163,74,0.1); }
body.light .wl-loss { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }

/* Grid */
.wl-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.wl-row  { display: flex; gap: 6px; }

/* Tiles */
.wl-tile {
  width: 58px; height: 58px;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; letter-spacing: 0;
  color: var(--text); text-transform: uppercase;
  transition: border-color 0.1s;
  user-select: none;
}
.wl-tile.filled { border-color: rgba(255,255,255,0.5); animation: wlPop 0.1s ease; }
@keyframes wlPop { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* Flip animation */
.wl-tile.flipping { animation: wlFlipOut 0.2s ease forwards; }
@keyframes wlFlipOut { 0%{transform:scaleY(1)} 100%{transform:scaleY(0)} }

/* Revealed states */
.wl-tile.revealed { animation: wlFlipIn 0.2s ease forwards; border: none; color: #fff; }
@keyframes wlFlipIn { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }
.wl-tile.revealed.hit   { background: #16a34a; }
.wl-tile.revealed.close { background: #ca8a04; }
.wl-tile.revealed.miss  { background: #374151; }
body.light .wl-tile { border-color: rgba(0,0,0,0.2); color: #1a1a1a; }
body.light .wl-tile.filled { border-color: rgba(0,0,0,0.5); }
body.light .wl-tile.revealed.miss { background: #6b7280; }

/* Flip delays per column */
.wl-delay-0 { animation-delay: 0ms !important; }
.wl-delay-1 { animation-delay: 100ms !important; }
.wl-delay-2 { animation-delay: 200ms !important; }
.wl-delay-3 { animation-delay: 300ms !important; }
.wl-delay-4 { animation-delay: 400ms !important; }

/* Shake */
.wl-shake { animation: wlShake 0.5s ease; }
@keyframes wlShake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

/* Keyboard */
.wl-kb { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wl-kb-row { display: flex; justify-content: center; gap: 5px; }
.wl-key {
  height: 56px; min-width: 34px; padding: 0 8px; flex: 1; max-width: 42px;
  border: none; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,0.12); color: var(--text);
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.wl-wide { max-width: 64px; font-size: 11px; }
.wl-key:active { opacity: 0.7; }
/* Key states */
.wl-key.hit   { background: #16a34a; color: #fff; }
.wl-key.close { background: #ca8a04; color: #fff; }
.wl-key.miss  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.28); }
body.light .wl-key { background: rgba(0,0,0,0.1); color: #1a1a1a; }
body.light .wl-key.miss { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.25); }

/* Hint + actions */
.wl-hint { font-size: 11px; color: var(--muted); text-align: center; margin: 4px 0 12px; }
.wl-actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.wl-share { width: 100%; }
.wl-tomorrow { font-size: 12px; color: var(--muted); margin: 0; }

/* Responsive */
@media (max-width: 440px) {
  .wl-tile { width: 50px; height: 50px; font-size: 18px; }
  .wl-key  { height: 48px; font-size: 12px; }
}
@media (max-width: 360px) {
  .wl-tile { width: 42px; height: 42px; font-size: 16px; }
  .wl-row, .wl-grid { gap: 4px; }
  .wl-key  { height: 44px; min-width: 28px; font-size: 11px; }
  .wl-kb-row { gap: 4px; }
}

/* ── Username modal ──────────────────────────────────────────────────── */
.um-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.um-card {
  background: var(--card); border-radius: 20px; padding: 28px 24px;
  width: 100%; max-width: 380px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: umSlide 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes umSlide { from { transform: translateY(24px); opacity: 0; } }
.um-title { font-size: 20px; font-weight: 900; margin-bottom: 8px; }
.um-sub { font-size: 13px; color: var(--muted); margin: 0 0 20px; line-height: 1.5; }
.um-input {
  width: 100%; padding: 13px 16px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06); color: var(--text);
  font-size: 16px; font-weight: 700; text-align: center;
  outline: none; box-sizing: border-box; margin-bottom: 14px;
  transition: border-color 0.2s;
}
.um-input:focus { border-color: var(--gold); }
body.light .um-input { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.15); }
.um-save { width: 100%; margin-bottom: 10px; }
.um-skip { width: 100%; color: var(--muted); font-size: 13px; }
@keyframes umShake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.um-shake { animation: umShake 0.45s ease; border-color: #ef4444 !important; }

/* ── Leaderboard enhancements ────────────────────────────────────────── */
.board-row { position: relative; }
.board-mine {
  background: rgba(0,187,127,0.10) !important;
  border-color: rgba(0,187,127,0.45) !important;
}
.board-you-tag {
  display: inline-block; font-size: 10px; font-weight: 800;
  background: var(--green); color: #003322; border-radius: 4px;
  padding: 1px 5px; margin-left: 5px; vertical-align: middle;
  text-transform: uppercase;
}
.board-challenge-btn {
  background: none; border: none; cursor: pointer;
  font-size: 16px; padding: 0 2px; opacity: 0.55;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.board-challenge-btn:hover { opacity: 1; transform: scale(1.2); }
.board-my-best {
  border-top: 1px dashed rgba(249,156,0,0.3);
  padding-top: 8px; margin-top: 4px;
}
.board-my-best::before {
  content: "Your best"; display: block;
  font-size: 11px; color: var(--muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Reroll burn animation ───────────────────────────────────────────── */
@keyframes rrBurn {
  0%   { transform: scale(1);    background: var(--gold); color: #000; box-shadow: 0 0 0 0 rgba(249,156,0,0); }
  25%  { transform: scale(1.35); background: #ef4444;     color: #fff; box-shadow: 0 0 18px 6px rgba(239,68,68,0.7); }
  60%  { transform: scale(0.85); background: #c2410c;     color: #fff; box-shadow: 0 0 8px 2px rgba(194,65,12,0.4); }
  100% { transform: scale(1);    background: var(--gold); color: #000; box-shadow: none; }
}
.rr-burn {
  animation: rrBurn 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
  display: inline-block; border-radius: 50%;
}

/* ── Post-draft reroll summary ───────────────────────────────────────── */
.done-main { display: block; margin-bottom: 10px; }

.rr-summary {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 12px; padding: 10px 14px;
  margin-top: 8px; text-align: left;
}
.rr-summary--clean {
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.25);
}
.rr-sum-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rr-sum-ico  { font-size: 18px; line-height: 1; flex-shrink: 0; }
.rr-sum-stat { font-size: 13px; color: var(--text); line-height: 1.5; }
.rr-sum-txt  { font-size: 13px; color: var(--text); }
.rr-saved    { color: #16a34a; font-weight: 700; }

.rr-sum-swaps { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-sum-swap  { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.06); border-radius: 8px; padding: 4px 8px; font-size: 12px; }
body.light .rr-sum-swap { background: rgba(0,0,0,0.05); }
.rr-sum-was { color: var(--muted); font-weight: 700; text-decoration: line-through; }
.rr-sum-got { font-weight: 900; }
.rr-sum-got.pos { color: #16a34a; }
.rr-sum-got.neg { color: #ef4444; }
.rr-sum-net { font-size: 11px; font-weight: 800; padding: 1px 4px; border-radius: 4px; margin-left: 2px; }
.rr-sum-net { background: rgba(255,255,255,0.1); color: var(--text); }

/* ── Synergy badge (live in draft XI panel) ─────────────────────────── */
.syn-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 5px 10px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(249,156,0,0.18), rgba(249,156,0,0.06));
  border: 1px solid rgba(249,156,0,0.4); color: var(--gold);
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  animation: synPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes synPop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.rn-atk { color: #f97316; font-weight: 800; }
.rn-def { color: #38bdf8; font-weight: 800; }
.rn-warn { color: var(--muted); font-size: 12px; }

/* ── Conditional manager style dots ─────────────────────────────────── */
.mgr-cond-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: 5px; vertical-align: middle; flex-shrink: 0;
}
.mgr-cond-dot.met   { background: #16a34a; box-shadow: 0 0 4px rgba(22,163,74,0.6); }
.mgr-cond-dot.unmet { background: rgba(255,255,255,0.25); }
body.light .mgr-cond-dot.unmet { background: rgba(0,0,0,0.2); }

.cond-style .mgr-name { display: flex; align-items: center; }
.mgr-cond-locked { color: var(--muted); font-size: 11px; font-style: italic; }
.mgr-cond-hint   { color: var(--muted); font-size: 11px; }

/* ── Match narrative ─────────────────────────────────────────────────── */
.match-narrative {
  border-radius: 16px; padding: 16px 18px; margin: 16px 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
body.light .match-narrative {
  background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07);
}
.mn-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px;
}
.mn-body { display: flex; flex-direction: column; gap: 6px; }
.mn-line {
  margin: 0; font-size: 14px; line-height: 1.65; color: var(--text);
  padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.1);
}
body.light .mn-line { border-left-color: rgba(0,0,0,0.1); }
.mn-line strong { color: var(--gold); font-weight: 800; }
.mn-line:first-child { border-left-color: var(--gold); }

/* ── What If card ───────────────────────────────────────────────────── */
.whatif-card {
  border-radius: 16px; padding: 16px 18px; margin: 16px 0;
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.07));
  border: 1px solid rgba(139,92,246,0.3);
}
.wi-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: #a78bfa; margin-bottom: 8px;
}
.wi-body {
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.wi-body strong { font-weight: 900; color: var(--text); }
.wi-alt-r  { color: #22c55e; font-weight: 900; }
.wi-weak-r { color: #f97316; font-weight: 900; }
.wi-footer {
  margin-top: 10px; font-size: 12px; font-weight: 800;
  color: #a78bfa; cursor: pointer; opacity: 0.8;
  transition: opacity 0.15s;
}
.wi-footer:hover { opacity: 1; text-decoration: underline; }

/* ===== CONSTRAINT BANNER ===== */
.constraint-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(249,156,0,0.15), rgba(249,156,0,0.05));
  border: 1px solid rgba(249,156,0,0.35);
  border-radius: 10px; padding: 10px 14px;
  margin: 10px 0;
}
.cb-icon { font-size: 20px; line-height: 1; }
.cb-label {
  font-size: 13px; font-weight: 800; color: var(--gold);
  white-space: nowrap;
}
.cb-desc {
  font-size: 12px; color: var(--muted); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-exit {
  background: none; border: 1px solid rgba(249,156,0,0.4);
  color: var(--gold); border-radius: 6px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.cb-exit:hover { background: rgba(249,156,0,0.12); }

/* ===== CHALLENGE HUB ===== */
.ch-section { margin: 0 0 28px; }
.ch-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.ch-daily-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(249,156,0,0.12), rgba(252,187,0,0.05));
  border: 1px solid rgba(249,156,0,0.35);
  border-radius: 14px; padding: 16px 18px;
}
.ch-daily-icon { font-size: 32px; line-height: 1; }
.ch-daily-info { flex: 1; min-width: 0; }
.ch-daily-name {
  font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px;
}
.ch-daily-desc { font-size: 13px; color: var(--muted); }
.ch-daily-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.ch-countdown {
  font-size: 11px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ch-play-btn {
  padding: 8px 18px; font-size: 13px; font-weight: 800;
  white-space: nowrap;
}
.ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ch-card {
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.ch-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.ch-card-top { display: flex; align-items: center; gap: 10px; }
.ch-card-icon { font-size: 24px; line-height: 1; }
.ch-card-name {
  font-size: 15px; font-weight: 800; color: var(--text);
}
.ch-card-badge {
  margin-left: auto; font-size: 10px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: rgba(249,156,0,0.15); color: var(--gold);
  border-radius: 5px; padding: 2px 7px;
}
.ch-card-desc { font-size: 12px; color: var(--muted); line-height: 1.55; }
.ch-card-play {
  background: none; border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; color: var(--text);
  cursor: pointer; align-self: flex-start;
  transition: border-color 0.15s, color 0.15s;
}
.ch-card-play:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 480px) {
  .ch-daily-card { flex-wrap: wrap; }
  .ch-daily-right { flex-direction: row; align-items: center; }
  .ch-grid { grid-template-columns: 1fr; }
}

/* ===== RATING BADGE COLOUR BANDING ===== */
/* Applied to .mp-r-badge via ratingTierClass() */
.mp-r-badge { transition: color 0.1s, background 0.1s; }
.mp-r-badge.r-gold   { background: rgba(251,191,36,0.18);  color: #fbbf24; }   /* ≥90 amber/gold */
.mp-r-badge.r-elite  { background: rgba(232,121,249,0.15); color: #e879f9; }   /* ≥85 magenta    */
.mp-r-badge.r-great  { background: rgba(249,115,22,0.15);  color: #fb923c; }   /* ≥80 orange     */
.mp-r-badge.r-good   { background: rgba(34,211,238,0.15);  color: #22d3ee; }   /* ≥75 cyan       */
.mp-r-badge.r-amber  { background: rgba(163,163,163,0.12); color: #a3a3a3; }   /* ≥70 grey       */
.mp-r-badge.r-orange { background: rgba(248,113,113,0.10); color: #f87171; }   /* ≥60 soft red   */
.mp-r-badge.r-red    { background: rgba(239,68,68,0.10);   color: #ef4444; }   /* <60 red        */

/* ===== XI ROWS — green accent for filled slots ===== */
.xi-row:not(.empty) {
  border-left: 2px solid rgba(0,187,127,0.35);
}
.xi-list .xi-row:not(.empty):hover {
  border-left-color: var(--green);
}

/* ===== GREEN ACCENT — dark mode sweep ===== */
/* Home links hover */
.home-board-link:hover { color: var(--green2); border-color: rgba(0,187,127,0.4); }
/* Era slider end labels already green; era range track accent */
.era-fill { background: linear-gradient(90deg, rgba(0,187,127,0.4), rgba(52,211,153,0.6)); }

/* ===== PLAYER CARD — mobile tightening ===== */
@media (max-width: 480px) {
  .player-flavour { display: none; }    /* hide flavour on very small screens to save space */
  .player-era { font-size: 10px; }
}

/* ===== BOTTOM NAV BAR (mobile) ===== */
.bnav {
  display: none; /* hidden on desktop */
}

/* ===== EMPTY LEADERBOARD STATE ===== */
.board-empty {
  text-align: center;
  padding: 56px 24px 40px;
}
.board-empty-trophy {
  font-size: 72px; line-height: 1;
  margin-bottom: 20px;
  display: block;
  animation: be-float 3s ease-in-out infinite;
  filter: grayscale(0.25);
}
@keyframes be-float {
  0%, 100% { transform: translateY(0); filter: grayscale(0.25) opacity(0.75); }
  50%       { transform: translateY(-8px); filter: grayscale(0) opacity(1); }
}
.board-empty-title {
  font-size: 24px; font-weight: 900; margin: 0 0 8px; color: var(--text);
}
.board-empty-sub {
  font-size: 14px; color: var(--muted); line-height: 1.65;
  margin: 0 0 28px;
}
.board-empty-cta {
  font-size: 15px; font-weight: 800; padding: 12px 28px;
}

@media (max-width: 768px) {
  /* ── Bottom nav ── */
  .bnav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 500;
    background: transparent;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    pointer-events: none;
  }
  .bnav-pill {
    pointer-events: all;
    flex: 1;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px;
    background: rgba(14,14,24,0.88);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 999px;
    cursor: pointer;
    color: rgba(255,255,255,0.65);
    padding: 13px 0;
    font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
    font-family: inherit;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .bnav-pill svg { width: 18px; height: 18px; flex-shrink: 0; }
  .bnav-pill:active { background: rgba(20,20,36,0.96); }
  .bnav-pill--share {
    background: rgba(0,187,127,0.12);
    border-color: rgba(0,187,127,0.28);
    color: var(--green2);
  }
  .bnav-pill--share:active { background: rgba(0,187,127,0.22); }

  /* Body padding so content clears the nav */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* Hide old back/home buttons — nav replaces them */
  .back,
  .draft-corner-home,
  #resultsHomeBtn,
  #boardBack,
  #challengeBack,
  #dailyBack,
  #setupBack {
    display: none !important;
  }
}

/* Light mode bnav */
body.light .bnav {
  background: rgba(250,246,236,0.94);
  border-top-color: rgba(200,134,10,0.15);
}
body.light .bnav-btn { color: rgba(42,38,32,0.38); }
body.light .bnav-btn.active { color: var(--green); }
body.light .bnav-btn.active svg { filter: drop-shadow(0 2px 5px rgba(10,158,110,0.4)); }
body.light .bnav-btn.active::after { background: var(--green); }