/* ===========================================================
   Fantasy World Cup 2026 — design system
   Display: Barlow Condensed (jersey/scoreboard) · Data: Barlow Semi Condensed
   =========================================================== */

:root {
  --accent: #16a34a;          /* pitch green (configurable) */
  --accent-2: #d4a017;        /* tournament gold */
  --accent-ink: #ffffff;      /* text on accent */

  /* festive multi-color set (shared chroma family) */
  --gk: #e0a416;   /* goalkeeper  – amber  */
  --df: #2f78d6;   /* defender    – blue   */
  --mf: #1ea672;   /* midfielder  – green  */
  --fw: #e23d57;   /* forward     – coral  */

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px;
  --maxw: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --font-display: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow Semi Condensed", system-ui, sans-serif;
}

/* ---- DARK (broadcast stadium-night) ---- */
[data-theme="dark"] {
  --bg:      oklch(0.165 0.022 165);
  --bg-2:    oklch(0.205 0.024 165);
  --surface: oklch(0.232 0.022 165);
  --surface-2: oklch(0.275 0.020 165);
  --line:    oklch(0.330 0.020 165);
  --line-soft: oklch(0.285 0.018 165);
  --text:    oklch(0.965 0.010 120);
  --muted:   oklch(0.745 0.015 150);
  --faint:   oklch(0.560 0.015 150);
  --shadow:  0 18px 40px -18px rgba(0,0,0,.7);
  --pitch-img: linear-gradient(180deg, oklch(0.21 0.03 158), oklch(0.16 0.025 165));
  color-scheme: dark;
}

/* ---- LIGHT (clean festive editorial) ---- */
[data-theme="light"] {
  --bg:      oklch(0.966 0.008 130);
  --bg-2:    oklch(0.985 0.006 130);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.974 0.007 135);
  --line:    oklch(0.905 0.010 140);
  --line-soft: oklch(0.935 0.008 140);
  --text:    oklch(0.235 0.024 168);
  --muted:   oklch(0.470 0.022 162);
  --faint:   oklch(0.620 0.018 150);
  --shadow:  0 20px 44px -24px rgba(20,40,30,.32);
  --pitch-img: linear-gradient(180deg, oklch(0.96 0.03 150), oklch(0.99 0.01 140));
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
#root { min-height: 100vh; }

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  margin: 0;
}
.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--muted);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 17px;
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .15s var(--ease), filter .15s var(--ease), background .15s, box-shadow .15s;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px -10px var(--accent); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-gold { background: var(--accent-2); color: #1a1205; box-shadow: 0 8px 22px -10px var(--accent-2); }
.btn-gold:hover { filter: brightness(1.05); }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-soft { background: var(--surface-2); color: var(--text); }
.btn-soft:hover { filter: brightness(1.04); }
.btn-sm { font-size: 14px; padding: 9px 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* ---------- chips / segmented ---------- */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.seg button {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s var(--ease);
  line-height: 1;
}
.seg button.on { background: var(--text); color: var(--bg); }
.seg button:hover:not(.on) { color: var(--text); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted);
}

/* position pill */
.pos {
  font-family: var(--font-display);
  font-weight: 800; font-size: 12px; letter-spacing: 0.05em;
  width: 30px; text-align: center;
  padding: 4px 0; border-radius: 6px; color: #fff;
  display: inline-block;
}
.pos.GK { background: var(--gk); color:#2a1c00; }
.pos.DF { background: var(--df); }
.pos.MF { background: var(--mf); }
.pos.FW { background: var(--fw); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* flags */
.flag { font-size: 1.1em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* inputs */
.field {
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s;
}
.field:focus { outline: none; border-color: var(--accent); }
.field::placeholder { color: var(--faint); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 12px; font-weight: 700; color: var(--faint);
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .right { text-align: right; }
.tbl .center { text-align: center; }

/* Leaderboard: extra outer padding on the rank (#) and points columns so the
   table doesn't feel flush against the card edges. */
.tbl-leaderboard tr > :first-child { padding-left: 22px; }
.tbl-leaderboard tr > :last-child  { padding-right: 22px; }

/* Squads page Pts column — matches the Leaderboard's right-edge breathing room.
   Applied inline to the Pts header and each per-player Pts cell. */
.team-pts-pad { padding-right: 22px; box-sizing: content-box; }

/* Mobile: tighter table + hide the lowest-signal columns so the
   Players + Leaderboard tables fit without horizontal scroll. */
@media (max-width: 640px) {
  .tbl th { padding: 8px 6px; font-size: 11px; }
  .tbl td { padding: 8px 6px; font-size: 13px; }
  .tbl .hide-sm { display: none; }
  /* Cap the manager-name column so a long name doesn't crowd out the stats. */
  .tbl .mgr-name {
    display: inline-block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  /* Evenly distribute the stat columns. The numeric headers carry these
     classes via screens_play.jsx so the rule only applies to those tables. */
  .tbl .col-rank   { width: 36px; }
  .tbl .col-stat   { width: 13%; }
  .tbl .col-points { width: 18%; }
  /* Scaled-down outer padding so the table still fits on narrow screens. */
  .tbl-leaderboard tr > :first-child { padding-left: 14px; }
  .tbl-leaderboard tr > :last-child  { padding-right: 14px; }
  .team-pts-pad { padding-right: 14px; }
}

/* layout helpers */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center-x { justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.wrap-flex { flex-wrap: wrap; }

/* scoreboard ticker pulse */
@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fw); animation: liveBlink 1.4s infinite; }

@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pop { animation: popIn .35s var(--ease) both; }

@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* on-the-clock glow */
@keyframes clockGlow { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in oklch, var(--accent) 0%, transparent); } }
.on-clock { animation: clockGlow 2s infinite; }

/* image placeholder (striped) */
.ph {
  background-image: repeating-linear-gradient(45deg, var(--line-soft) 0 10px, transparent 10px 20px);
  background-color: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--faint);
  letter-spacing: .04em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}