/* ════════════════════════════════════════════════════════
   LINEUP SPINNER — DESIGN SYSTEM  (style.css v110)
   ════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ════════════════════════════════════════════════════════
   COLOR TOKENS
   ════════════════════════════════════════════════════════ */
:root {
  /* ── backgrounds ── */
  --bg-page:      #0f1117;
  --bg-panel:     #1a1d27;
  --bg-inner:     #252840;
  --bg-deep:      #161925;
  --bg-hover:     #22263a;
  --bg-res-h:     #1e2235;
  --bg-stadium:   #1a1d27;

  /* ── borders ── */
  --bd-panel:  rgba(255,255,255,0.06);
  --bd-subtle: rgba(255,255,255,0.08);
  --bd-input:  rgba(255,255,255,0.10);
  --bd-card:   rgba(255,255,255,0.06);
  --bd-div:    rgba(255,255,255,0.06);

  /* ── text ── */
  --tx-1:    #ffffff;
  --tx-2:    #d0d8f0;
  --tx-3:    #b8c0dc;
  --tx-4:    #8890b8;
  --tx-hd:   #666699;
  --tx-str:  #d8d8f0;
  --tx-h1:   #ffffff;
  --tx-opt:  #d8d8f0;
  --tx-res:  #b8b8d8;

  /* ── accent — blue ── */
  --ac:    #5a9eff;
  --ac-h:  #4a8ef0;
  --ac-08: rgba(90,158,255,0.08);
  --ac-22: rgba(90,158,255,0.22);
  --ac-25: rgba(90,158,255,0.25);
  --ac-28: rgba(90,158,255,0.28);
  --ac-45: rgba(90,158,255,0.45);
  --ac-50: rgba(90,158,255,0.50);
  --ac-85: rgba(90,158,255,0.85);
  --ac-gl: rgba(90,158,255,0.18);

  /* ── spin display ── */
  --bg-cd:  rgba(90,158,255,0.08);
  --bd-cd:  rgba(90,158,255,0.28);
  --tx-cyc: #8898cc;

  /* ── player cards (filled, on field) ── */
  --tx-tag:    #5a7aaa;
  --tx-player: #ffffff;
  --tx-club-s: #8898bb;

  /* ── position card states ── */
  --card-empty-bg:      rgba(0,0,0,0.54);
  --card-empty-border:  rgba(255,255,255,0.14);
  --card-empty-label:   rgba(255,255,255,0.32);
  --card-click-bg:      rgba(0,18,45,0.82);
  --card-click-border:  rgba(90,158,255,0.55);
  --card-click-label:   rgba(255,255,255,0.50);
  --card-sel-bg:        rgba(5,22,60,0.97);
  --card-sel-border:    #5a9eff;
  --card-sel-shadow:    0 0 0 2px rgba(90,158,255,0.28), 0 4px 20px rgba(0,0,0,0.55);
  --card-filled-bg:     rgba(10,14,32,0.94);
  --card-filled-border: rgba(90,158,255,0.32);
  --card-filled-shadow: 0 3px 12px rgba(0,0,0,0.5);
  --card-filled-label:  #5a9eff;

  /* ── overlay / result ── */
  --bg-overlay: rgba(0,0,0,0.82);
  --bg-ovbox:   #13132a;
  --bd-ovbox:   rgba(90,158,255,0.22);
  --tx-score:   #5a9eff;
  --tx-denom:   #444480;

  /* ── mode cards (home) ── */
  --bg-mcard:   #1a1d27;
  --bd-mcard:   rgba(255,255,255,0.09);
  --bg-mcard-h: #1e2235;
  --bd-mcard-h: rgba(90,158,255,0.55);
  --sh-mcard-h: 0 16px 56px rgba(0,0,0,0.65), 0 0 0 1px rgba(90,158,255,0.45), 0 0 40px rgba(90,158,255,0.13);
  --tx-mcard-d: #8890b8;

  --sh-panel: none;
}

/* ════════════════════════════════════════════════════════
   LIGHT MODE — clean white & blue
   ════════════════════════════════════════════════════════ */
body.light-mode {
  /* ── backgrounds ── */
  --bg-page:    #EEF2F7;        /* whole-page background */
  --bg-panel:   #EEF2F7;        /* panels — same colour, seamless */
  --bg-inner:   #E2E8F0;        /* secondary surface, one step deeper */
  --bg-deep:    #EEF2F7;
  --bg-hover:   #E8EEF7;
  --bg-res-h:   #E2E8F0;
  --bg-stadium: #EEF2F7;        /* field area — same as page */

  /* ── borders ── */
  --bd-panel:  #D8E0EB;
  --bd-subtle: #E5EAF2;         /* dividers — lightest */
  --bd-input:  #D8E0EB;
  --bd-card:   #D8E0EB;
  --bd-div:    #E5EAF2;

  /* ── text ── */
  --tx-1:   #18212F;            /* primary — near-black */
  --tx-2:   #5E6B7E;            /* secondary — calm mid-grey */
  --tx-3:   #5E6B7E;
  --tx-4:   #8A96A8;            /* muted */
  --tx-hd:  #8A96A8;
  --tx-str: #18212F;
  --tx-h1:  #18212F;
  --tx-opt: #18212F;
  --tx-res: #5E6B7E;

  /* ── accent — single blue ── */
  --ac:    #4F8EF7;
  --ac-h:  #3F7DE8;
  --ac-08: rgba(79,142,247,0.08);
  --ac-22: rgba(79,142,247,0.22);
  --ac-25: rgba(79,142,247,0.25);
  --ac-28: rgba(79,142,247,0.28);
  --ac-45: rgba(79,142,247,0.45);
  --ac-50: rgba(79,142,247,0.50);
  --ac-85: rgba(79,142,247,0.85);
  --ac-gl: rgba(79,142,247,0.16);

  /* ── spin display ── */
  --bg-cd:  #FFFFFF;            /* spin card — white to pop against bg */
  --bd-cd:  #D8E0EB;
  --tx-cyc: #5E6B7E;

  /* ── player cards (filled, on field) ── */
  --tx-tag:    #4F8EF7;
  --tx-player: #18212F;
  --tx-club-s: #5E6B7E;

  /* ── position card states — crisp on muted green field ── */
  --card-empty-bg:      rgba(248,251,248,0.82);
  --card-empty-border:  #C9D8CC;
  --card-empty-label:   #5E6B7E;
  --card-click-bg:      rgba(248,251,248,0.92);
  --card-click-border:  rgba(79,142,247,0.55);
  --card-click-label:   #4F8EF7;
  --card-sel-bg:        #F8FBF8;
  --card-sel-border:    #4F8EF7;
  --card-sel-shadow:    0 0 0 3px rgba(79,142,247,0.18), 0 4px 16px rgba(0,0,0,0.08);
  --card-filled-bg:     #F8FBF8;
  --card-filled-border: #C9D8CC;
  --card-filled-shadow: 0 2px 8px rgba(0,0,0,0.07);
  --card-filled-label:  #4F8EF7;

  /* ── overlay / result ── */
  --bg-overlay: rgba(0,0,0,0.35);
  --bg-ovbox:   #EEF2F7;
  --bd-ovbox:   #D8E0EB;
  --tx-score:   #4F8EF7;
  --tx-denom:   #D8E0EB;

  /* ── mode cards (home) ── */
  --bg-mcard:   #FFFFFF;
  --bd-mcard:   #D8E0EB;
  --bg-mcard-h: #EAF2FF;
  --bd-mcard-h: #4F8EF7;
  --sh-mcard-h: 0 12px 40px rgba(0,0,0,0.10), 0 0 0 1px rgba(79,142,247,0.45), 0 0 32px rgba(79,142,247,0.10);
  --tx-mcard-d: #5E6B7E;

  --sh-panel: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Light mode: header pill buttons ── */
body.light-mode .hdr-btn {
  background: #FFFFFF;
  color: #18212F;
  border-color: #C8D4E3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.09);
}
body.light-mode .hdr-btn:hover {
  background: #F3F7FD;
  border-color: #4F8EF7;
  color: #18212F;
  box-shadow: 0 2px 8px rgba(79,142,247,0.15);
}

/* ── Light mode: primary button (Spin, New Game) ── */
body.light-mode .util-btn-solid {
  box-shadow: 0 1px 4px rgba(79,142,247,0.20), 0 2px 8px rgba(79,142,247,0.12);
}
body.light-mode .util-btn-solid:hover {
  box-shadow: 0 3px 12px rgba(79,142,247,0.30), 0 1px 4px rgba(79,142,247,0.18);
}

/* ── Light mode: spin button ── */
body.light-mode .btn-spin {
  box-shadow: 0 2px 8px rgba(79,142,247,0.25), 0 1px 3px rgba(79,142,247,0.15);
}
body.light-mode .btn-spin:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(79,142,247,0.35), 0 2px 6px rgba(79,142,247,0.20);
}

/* ── Light mode: spin-ready ring ── */
@keyframes spinReadyLight {
  0%, 100% { box-shadow: 0 2px 8px rgba(79,142,247,0.25), 0 0 0 0 rgba(79,142,247,0); }
  50%       { box-shadow: 0 4px 16px rgba(79,142,247,0.35), 0 0 0 4px rgba(79,142,247,0.12); }
}
body.light-mode .btn-spin.ready {
  animation: spinReadyLight 1.8s ease-in-out infinite;
}

/* ── Light mode: player option cards ── */
body.light-mode .player-opt {
  background: #FFFFFF;
  border-color: #D8E0EB;
  color: #18212F;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  animation: cardPulseLight 2.2s ease-in-out infinite;
}
body.light-mode .player-opt:hover {
  background: #EAF2FF;
  border-color: #4F8EF7;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 0 0 2px rgba(79,142,247,0.20);
  animation: none;
}

/* ── Light mode: search result items ── */
body.light-mode .search-result-item {
  background: #FFFFFF;
  border-color: #D8E0EB;
  color: #18212F;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
body.light-mode .search-result-item:hover {
  background: #EAF2FF;
  border-color: #4F8EF7;
  color: #18212F;
  box-shadow: 0 2px 8px rgba(79,142,247,0.12);
}

/* ── Light mode: clickable field card pulse ── */
@keyframes cardPulseLight {
  0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(79,142,247,0.18); }
  50%       { box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 2px rgba(79,142,247,0.32); }
}
body.light-mode .pos-card.clickable {
  animation: cardPulseLight 2.2s ease-in-out infinite;
}
body.light-mode .pos-card.clickable:hover {
  background: #F8FBF8;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08), 0 0 0 3px rgba(79,142,247,0.22);
  animation: none;
}

/* ── Light mode: search input ── */
body.light-mode .search-input {
  background: #FFFFFF;
  border-color: #D8E0EB;
  color: #18212F;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.light-mode .search-input::placeholder {
  color: #8A96A8;
  opacity: 1;
}
body.light-mode .search-input:focus {
  border-color: #4F8EF7;
  box-shadow: 0 0 0 3px rgba(79,142,247,0.12);
}

/* ── Light mode: spin card display ── */
body.light-mode .spin-card-display {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ── Light mode: muted field — integrated, not dominant ── */
body.light-mode .pitch-wrap {
  background-color: #2F7A38;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 52px,
    transparent     52px, transparent     104px
  );
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 24px rgba(0,0,0,0.10);
}

/* ── Light mode: generic ghost button hover ── */
body.light-mode .util-btn:hover {
  color: #18212F;
  background: #F3F7FD;
  border-color: #BFD2F2;
}

/* ── Light mode: result screen SW boxes use adjusted tones ── */
/* ── Light mode: result screen ── */

/* Hero box — white card with soft shadow */
body.light-mode .result-hero-box {
  background: #E2E8F0;
  border-color: #CDD5E0;
  box-shadow: none;
}

/* Setup label */
body.light-mode .result-setup-label {
  color: #8A96A8;
  opacity: 1;
}

/* Next Target pill */
body.light-mode .result-next-target {
  background: rgba(79,142,247,0.08);
  border-color: rgba(79,142,247,0.30);
}
body.light-mode .result-next-label { color: #8A96A8; }
body.light-mode .result-next-value { color: #4F8EF7; }
body.light-mode .result-next-target--top {
  background: rgba(22,163,74,0.07);
  border-color: rgba(22,163,74,0.28);
}
body.light-mode .result-next-target--top .result-next-value { color: #15803D; }
body.light-mode .result-next-sub { color: #8A96A8; }

/* Strength / Weakness pills — darker colours for light backgrounds */
body.light-mode .result-sw-strength {
  background: rgba(22,163,74,0.07);
  border-color: rgba(22,163,74,0.25);
}
body.light-mode .result-sw-weakness {
  background: rgba(220,38,38,0.06);
  border-color: rgba(220,38,38,0.20);
}
body.light-mode .result-sw-strength .result-sw-label { color: #15803D; opacity: 0.75; }
body.light-mode .result-sw-strength .result-sw-value { color: #15803D; }
body.light-mode .result-sw-weakness .result-sw-label { color: #B91C1C; opacity: 0.75; }
body.light-mode .result-sw-weakness .result-sw-value { color: #B91C1C; }

/* Possible Finishes heading — visible separator on light surface */
body.light-mode .result-ladder-heading {
  color: #18212F;
  border-bottom-color: rgba(0,0,0,0.12);
}

/* Ladder tiers */
body.light-mode .ladder-tier.above { color: #5E6B7E; }
body.light-mode .ladder-tier.below { color: #8A96A8; opacity: 0.45; }
body.light-mode .ladder-tier.achieved {
  background: rgba(79,142,247,0.08);
  border-color: rgba(79,142,247,0.28);
  color: #4F8EF7;
}

/* Share / Download buttons */
body.light-mode .btn-result-secondary {
  background: #C8D4E3;
  border-color: #B0BECF;
  color: #18212F;
}
body.light-mode .btn-result-secondary:hover {
  background: #B8C6D8;
  border-color: #4F8EF7;
  color: #18212F;
}

/* Draft rating */

/* ════════════════════════════════════════════════════════
   HOME PAGE
   ════════════════════════════════════════════════════════ */
body.home-page {
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--tx-1);
}

.home-nav {
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px 0;
  flex-shrink: 0;
}

.home-container {
  flex: 1;
  text-align: center;
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-title {
  font-size: 3.1rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--tx-h1);
  margin-bottom: 4px;
}

.home-sub {
  font-size: 1rem;
  color: var(--tx-4);
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

/* Mode cards */
@keyframes cardPulseHome {
  0%, 100% { box-shadow: 0 6px 28px rgba(0,0,0,0.50), 0 0 0 1px rgba(90,158,255,0.14), 0 0 18px rgba(90,158,255,0.06); }
  50%       { box-shadow: 0 6px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(90,158,255,0.34), 0 0 36px rgba(90,158,255,0.14); }
}
@keyframes cardPulseHomeLight {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 0 0 1px rgba(79,142,247,0.18); }
  50%       { box-shadow: 0 4px 28px rgba(0,0,0,0.14), 0 0 0 1px rgba(79,142,247,0.40), 0 0 24px rgba(79,142,247,0.10); }
}
body.light-mode .mode-card {
  animation-name: cardPulseHomeLight;
  box-shadow: 0 12px 48px rgba(0,0,0,0.32), 0 4px 14px rgba(0,0,0,0.18);
}
body.light-mode .mode-card:hover {
  background: var(--bg-mcard);
}
body.light-mode .mode-card-format-label { border-top-color: rgba(0,0,0,0.12); }

/* Button backgrounds + text — darker for light mode readability */
body.light-mode .mode-card-btn-xi {
  background: rgba(79,142,247,0.18);
  border-color: rgba(29,78,216,0.45);
}
body.light-mode .mode-card-btn-futsal {
  background: rgba(22,163,74,0.14);
  border-color: rgba(21,128,61,0.40);
}
body.light-mode .mode-card-btn-xi .mcb-label     { color: #1338A8; }
body.light-mode .mode-card-btn-xi .mcb-sub       { color: #1D4ED8; }
body.light-mode .mode-card-btn-futsal .mcb-label  { color: #145A2E; }
body.light-mode .mode-card-btn-futsal .mcb-sub    { color: #15803D; }

.mode-cards {
  display: flex;
  gap: 44px;
  justify-content: center;
  flex-wrap: wrap;        /* stack on narrow screens */
  width: 100%;
  max-width: 740px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 40px 36px 36px;
  background: var(--bg-mcard);
  border: 1px solid rgba(90,158,255,0.22);
  border-radius: 22px;
  color: var(--tx-1);
  width: clamp(260px, 40vw, 320px);
  transition: background 0.18s, border-color 0.18s, transform 0.16s, box-shadow 0.18s, animation 0s;
  animation: cardPulseHome 2.8s ease-in-out infinite;
}
.mode-card:hover {
  background: var(--bg-mcard-h);
  border-color: rgba(90,158,255,0.65);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(90,158,255,0.55), 0 0 52px rgba(90,158,255,0.18);
  animation: none;
}

.mode-card-icon-wrap {
  width: 72px;
  height: 72px;
  background: rgba(90,158,255,0.10);
  border: 1px solid rgba(90,158,255,0.24);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.mode-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tx-h1);
  letter-spacing: -0.02em;
}

.mode-card-desc {
  font-size: 0.85rem;
  color: var(--tx-mcard-d);
  line-height: 1.5;
}

.mode-card-format-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tx-1);
  margin: 0;
  width: 100%;
  padding: 8px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.10);
  text-align: center;
}

.mode-card-btns {
  display: flex;
  gap: 10px;
  width: 100%;
}

.mode-card-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 20px 8px;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s, border-color 0.14s;
}
.mode-card-btn:hover  { transform: translateY(-3px); }
.mode-card-btn:active { transform: translateY(0px) scale(0.97); }

.mode-card-btn-xi {
  background: rgba(90,158,255,0.12);
  border: 2px solid rgba(90,158,255,0.50);
  box-shadow: 0 2px 14px rgba(90,158,255,0.12);
}
.mode-card-btn-xi:hover {
  background: rgba(90,158,255,0.22);
  border-color: #5a9eff;
  box-shadow: 0 6px 24px rgba(90,158,255,0.35);
}
.mode-card-btn-xi:active {
  background: rgba(90,158,255,0.30);
  box-shadow: 0 2px 10px rgba(90,158,255,0.22);
}
.mode-card-btn-xi .mcb-label { color: #5a9eff; }
.mode-card-btn-xi .mcb-sub   { color: rgba(90,158,255,0.65); }

.mode-card-btn-futsal {
  background: rgba(74,222,128,0.10);
  border: 2px solid rgba(74,222,128,0.45);
  box-shadow: 0 2px 14px rgba(74,222,128,0.10);
}
.mode-card-btn-futsal:hover {
  background: rgba(74,222,128,0.20);
  border-color: #4ade80;
  box-shadow: 0 6px 24px rgba(74,222,128,0.30);
}
.mode-card-btn-futsal:active {
  background: rgba(74,222,128,0.28);
  box-shadow: 0 2px 10px rgba(74,222,128,0.18);
}
.mode-card-btn-futsal .mcb-label { color: #4ade80; }
.mode-card-btn-futsal .mcb-sub   { color: rgba(74,222,128,0.62); }

.mcb-label {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}
.mcb-sub {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}

/* ── Home footer ── */
.home-footer {
  padding: 20px 40px 28px;
  border-top: 1px solid var(--bd-panel);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.home-footer-copy {
  font-size: 0.72rem;
  color: var(--tx-4);
  line-height: 1.6;
  max-width: 700px;
}

.home-disclaimer {
  font-size: 0.65rem;
  color: var(--tx-4);
  opacity: 0.5;
  line-height: 1.7;
  max-width: 720px;
}

/* ════════════════════════════════════════════════════════
   GAME LAYOUT
   ════════════════════════════════════════════════════════ */

/* Header height token — referenced by pitch formula */
:root { --header-h: 68px; }

body.game-page {
  background: var(--bg-panel); /* match panel so side gutters don't contrast */
  color: var(--tx-1);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Top header ── */
.game-header {
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--bd-panel);
  z-index: 10;
}

.game-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-home-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  opacity: 0.92;
  transition: opacity 0.15s;
}
.header-home-link:hover {
  opacity: 1;
}

.header-logo {
  height: 52px;
  width: auto;
  display: block;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tx-h1);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.game-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Header pill buttons */
.hdr-btn {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid var(--bd-subtle);
  background: var(--bg-inner);
  color: var(--tx-1);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
.hdr-btn:hover {
  background: var(--bg-hover);
  border-color: var(--ac-22);
  color: var(--tx-1);
  box-shadow: 0 3px 10px rgba(0,0,0,0.28);
}

/* ── Main two-column game layout — centered block ── */
.game-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  justify-content: center;  /* centers the steps+field block as a unit */
  background: var(--bg-panel); /* fills side gutters with panel color, not page bg */
}

/* ════════════════════════════════════════════════════════
   STEPS PANEL
   ════════════════════════════════════════════════════════ */
.steps-panel {
  flex: 0 0 340px;   /* fixed width — narrower left column */
  min-width: 0;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding-top: 28px;
  border-right: 1px solid var(--bd-panel);
}

/* ── UTILITY ROW ─────────────────────────────────────── */
.utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bd-panel);
  flex-shrink: 0;
}

.util-left-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Base utility button (ghost) */
.util-btn {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--tx-3);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-family: inherit;
  line-height: 1;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.util-btn:hover {
  color: var(--tx-1);
  background: var(--bg-hover);
  border-color: var(--bd-subtle);
}

/* Solid CTA — New Game button */
.util-btn-solid {
  background: var(--ac) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(37,99,235,0.22);
}
.util-btn-solid:hover {
  background: var(--ac-h) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

/* ── PANEL SECTIONS ──────────────────────────────────── */
.panel-section {
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--bd-panel);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Current Pick section — scrollable */
.pick-section {
  flex: 1;
  overflow-y: auto;
  flex-shrink: 1;
  border-bottom: none;
}
.pick-section::-webkit-scrollbar { width: 4px; }
.pick-section::-webkit-scrollbar-thumb {
  background: var(--bd-subtle);
  border-radius: 2px;
}

.section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tx-2);
  text-transform: uppercase;
}

/* State text inside Current Pick */
.pick-hint {
  font-size: 0.95rem;
  color: var(--tx-3);
  line-height: 1.6;
}

.pick-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pick-pos-badge {
  background: var(--ac);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.pick-club-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tx-h1);
  letter-spacing: -0.01em;
}

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

.pick-divider {
  border: none;
  border-top: 1px solid var(--bd-panel);
  margin: 2px 0;
}

#panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════
   SPIN CARD DISPLAY
   ════════════════════════════════════════════════════════ */
.spin-card-display {
  background: var(--bg-cd);
  border: 1.5px solid var(--bd-cd);
  border-radius: 12px;
  padding: 14px 18px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 148px;
  justify-content: center;
  position: relative;
}

.spin-card-tag {
  position: absolute;
  top: 11px;
  left: 14px;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ac);
  text-transform: uppercase;
}

.spin-card-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--tx-h1);
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  animation: fadeIn 0.2s ease;
}

.spin-card-idle {
  color: var(--tx-4);
  font-size: 1.9rem;
  font-weight: 200;
  letter-spacing: 0.22em;
  margin-top: 18px;
}

.spin-card-cycling {
  color: var(--tx-h1);
  font-size: 1.4rem;
  font-weight: 800;
  margin-top: 18px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  animation: none;
}

/* Spin button */
.btn-spin {
  padding: 16px;
  background: var(--ac);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 1.08rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s, transform 0.1s, opacity 0.15s, box-shadow 0.15s;
  letter-spacing: 0.02em;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(37,99,235,0.28);
}
.btn-spin.ready {
  animation: spinReady 1.8s ease-in-out infinite;
}

@keyframes spinReady {
  0%, 100% { box-shadow: 0 2px 10px rgba(37,99,235,0.28), 0 0 0 0 rgba(90,158,255,0); }
  50%       { box-shadow: 0 4px 20px rgba(37,99,235,0.55), 0 0 0 5px rgba(90,158,255,0.18); }
}

.btn-spin:hover:not(:disabled) {
  background: var(--ac-h);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(37,99,235,0.38);
}
.btn-spin:active:not(:disabled) { transform: translateY(0); }
.btn-spin:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

/* Step 3 hint text */
.step3-hint {
  font-size: 0.9rem;
  color: var(--tx-3);
  line-height: 1.65;
  padding: 2px 0;
}

/* ════════════════════════════════════════════════════════
   PLAYER PICKER
   ════════════════════════════════════════════════════════ */
.picker-section {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.picker-pos-badge {
  background: var(--ac);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: 0.06em;
}

.picker-club-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tx-1);
}

.picker-hint {
  font-size: 0.74rem;
  color: var(--tx-4);
  font-style: italic;
}

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

.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tx-3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 2px;
}

.player-opt {
  padding: 14px 16px;
  background: var(--bg-inner);
  border: 1px solid rgba(90,158,255,0.55);
  border-radius: 8px;
  color: var(--tx-1);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s, box-shadow 0.12s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.38), 0 0 8px rgba(90,158,255,0.10);
  animation: cardPulse 2.2s ease-in-out infinite;
}
.player-opt:hover {
  background: rgba(3,30,85,0.92);
  border-color: var(--ac);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 16px var(--ac-gl);
  animation: none;
}

.player-opt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.player-pos-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ac);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.no-options {
  color: var(--tx-3);
  font-size: 0.85rem;
  font-style: italic;
}

.divider {
  border: none;
  border-top: 1px solid var(--bd-div);
  margin: 2px 0;
}

/* ════════════════════════════════════════════════════════
   SEARCH
   ════════════════════════════════════════════════════════ */
.search-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-inner);
  border: 1px solid rgba(90,158,255,0.55);
  border-radius: 8px;
  color: var(--tx-1);
  font-size: 0.91rem;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.38), 0 0 8px rgba(90,158,255,0.10);
}
.search-input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 2px rgba(90,158,255,0.22), 0 0 14px rgba(90,158,255,0.22);
}
.search-input::placeholder {
  color: #ffffff;
  opacity: 1;
  font-size: 1rem;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.search-results::-webkit-scrollbar { width: 4px; }
.search-results::-webkit-scrollbar-thumb {
  background: var(--bd-subtle);
  border-radius: 2px;
}

.search-result-item {
  padding: 10px 14px;
  background: var(--bg-inner);
  border: 1px solid var(--bd-card);
  border-radius: 7px;
  color: var(--tx-1);
  font-size: 0.91rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.1s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  font-family: inherit;
}
.search-result-item:hover {
  background: var(--bg-res-h);
  color: var(--tx-1);
  border-color: var(--ac-28);
  transform: translateY(-1px);
}

.no-results {
  color: var(--tx-4);
  font-size: 0.83rem;
  padding: 4px 0;
}

/* ════════════════════════════════════════════════════════
   RIGHT PANEL + FIELD
   ════════════════════════════════════════════════════════ */
.right-panel {
  flex: 1 1 0;
  max-width: 520px;    /* sized so pitch fills panel with minimal left gap */
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-stadium);
}

/* Step 2 header bar — hidden */
.right-header { display: none; }

.field-toolbar {
  /* Same width formula as .pitch-wrap — they stay locked together */
  width: min(calc((100% - 4px) * 0.96), calc((100vh - var(--header-h)) * 8.02 / 13));
  display: flex;
  justify-content: flex-end;
  padding-bottom: 8px;
  margin-top: -42px;
  flex-shrink: 0;
  z-index: 2;
}

/* ── Header setup label ── */
.header-setup-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tx-4);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-right: 4px;
}

/* ── Change Challenge modal ── */
.challenge-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
}
.challenge-modal.hidden { display: none; }

.challenge-modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--bd-panel);
  border-radius: 18px;
  padding: 32px 28px 24px;
  width: min(400px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}

.challenge-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tx-1);
  margin: 0;
  text-align: center;
  letter-spacing: -0.01em;
}

.challenge-modal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.challenge-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 10px;
  border-radius: 12px;
  border: 1px solid var(--bd-subtle);
  background: var(--bg-inner);
  color: var(--tx-1);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.challenge-opt:hover {
  background: var(--bg-hover);
  border-color: var(--ac-22);
}

.challenge-opt-icon { font-size: 1.4rem; }
.challenge-opt-mode { font-size: 0.78rem; font-weight: 700; color: var(--tx-1); }
.challenge-opt-format { font-size: 0.7rem; font-weight: 500; color: var(--tx-4); }

.challenge-cancel {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--bd-subtle);
  background: transparent;
  color: var(--tx-4);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.challenge-cancel:hover {
  background: var(--bg-inner);
  color: var(--tx-1);
}

/* ── Futsal remaining hint ── */
.futsal-remaining-hint {
  font-size: 0.72rem;
  color: var(--tx-4);
  margin: 0;
  line-height: 1.4;
}

.field-new-game-btn {
  font-size: 1rem !important;
  padding: 12px 24px !important;
  border-radius: 9px !important;
  white-space: nowrap;
}

.right-step-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.78);
}

.progress-chip {
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 4px 13px;
  letter-spacing: 0.04em;
}

.pitch-outer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;      /* pitch centered within its panel */
  justify-content: center;
  overflow: hidden;
  padding: 10px 4% 14px 4%;
}

/* ── THE PITCH — portrait 10:13, scales with container ── */
.pitch-wrap {
  width: min(calc((100% - 4px) * 0.96), calc((100vh - var(--header-h)) * 8.02 / 13));
  aspect-ratio: 10 / 13;
  flex-shrink: 0;
  position: relative;
  container-type: inline-size;
  container-name: pitch;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 10px 52px rgba(0,0,0,0.72);
  background-color: #1c5c18;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 52px,
      transparent     52px, transparent     104px
    );
}

/* SVG field markings — viewBox 100×150, stretched to fit pitch */
.pitch-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20150'%20preserveAspectRatio='none'%3E%0A%20%20%3Crect%20x='3'%20y='2.5'%20width='94'%20height='145'%20fill='none'%20stroke='rgba(255,255,255,0.28)'%20stroke-width='0.4'/%3E%0A%20%20%3Cline%20x1='3'%20y1='75'%20x2='97'%20y2='75'%20stroke='rgba(255,255,255,0.22)'%20stroke-width='0.3'/%3E%0A%20%20%3Ccircle%20cx='50'%20cy='75'%20r='13'%20fill='none'%20stroke='rgba(255,255,255,0.2)'%20stroke-width='0.3'/%3E%0A%20%20%3Ccircle%20cx='50'%20cy='75'%20r='0.8'%20fill='rgba(255,255,255,0.35)'/%3E%0A%20%20%3Crect%20x='22'%20y='2.5'%20width='56'%20height='24'%20fill='none'%20stroke='rgba(255,255,255,0.2)'%20stroke-width='0.3'/%3E%0A%20%20%3Crect%20x='34'%20y='2.5'%20width='32'%20height='10'%20fill='none'%20stroke='rgba(255,255,255,0.13)'%20stroke-width='0.22'/%3E%0A%20%20%3Ccircle%20cx='50'%20cy='19'%20r='0.65'%20fill='rgba(255,255,255,0.25)'/%3E%0A%20%20%3Crect%20x='22'%20y='123.5'%20width='56'%20height='24'%20fill='none'%20stroke='rgba(255,255,255,0.2)'%20stroke-width='0.3'/%3E%0A%20%20%3Crect%20x='34'%20y='137.5'%20width='32'%20height='10'%20fill='none'%20stroke='rgba(255,255,255,0.13)'%20stroke-width='0.22'/%3E%0A%20%20%3Ccircle%20cx='50'%20cy='131'%20r='0.65'%20fill='rgba(255,255,255,0.25)'/%3E%0A%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* Formation grid — absolutely fills pitch */
.formation-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Each row: absolutely positioned, centred at its top % */
.formation-row {
  position: absolute;
  left: 3%;
  right: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-50%);
}

/* Row vertical positions */
[data-row="0"] { top: 16%; left: 7%; right: 7%; }  /* Attack             */
[data-row="1"] { top: 41%; left: 9%; right: 9%; }  /* Mid     — down     */
[data-row="2"] { top: 65%; left: 7%; right: 7%; }  /* Defence — down     */
[data-row="3"] { top: 87%; }                        /* GK      — down     */

/* ST up, LW/RW down within the attack row */
[data-row="0"] .pos-card:nth-child(2)              { transform: translateY(-16px); }
[data-row="0"] .pos-card:nth-child(1),
[data-row="0"] .pos-card:nth-child(3)              { transform: translateY(8px); }

/* CM row: centre CM up, outer CMs in + down */
[data-row="1"] .pos-card:nth-child(2)              { transform: translateY(-14px); }
[data-row="1"] .pos-card:nth-child(1)              { transform: translateY(8px) translateX(18px); }
[data-row="1"] .pos-card:nth-child(3)              { transform: translateY(8px) translateX(-18px); }

/* Defence row: LB/RB up, CBs further down */
[data-row="2"] .pos-card:nth-child(1)              { transform: translateY(-8px); }
[data-row="2"] .pos-card:nth-child(4)              { transform: translateY(-8px); }
[data-row="2"] .pos-card:nth-child(2),
[data-row="2"] .pos-card:nth-child(3)              { transform: translateY(13px); }

.formation-row.solo { justify-content: center; }

/* Futsal: no stagger transforms — all cards sit flat in their row */
.futsal-grid [data-row] .pos-card { transform: none !important; }

/* ════════════════════════════════════════════════════════
   POSITION CARDS  (always live on the green field)
   ════════════════════════════════════════════════════════ */
.pos-card {
  width: 88px;
  height: 110px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 6px 6px;
  position: relative;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  user-select: none;
  border: 1.5px solid transparent;
}

.pos-card.empty {
  background: var(--card-empty-bg);
  border-color: var(--card-empty-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pos-card.clickable {
  background: var(--card-click-bg);
  border-color: var(--card-click-border);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.38), 0 0 8px rgba(90,158,255,0.10);
  animation: cardPulse 2.2s ease-in-out infinite;
}
.pos-card.clickable:hover {
  background: rgba(3,30,85,0.92);
  border-color: var(--ac-85);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px var(--ac-gl);
  animation: none;
}

.pos-card.selected {
  background: var(--card-sel-bg);
  border-color: var(--card-sel-border);
  box-shadow: var(--card-sel-shadow);
}

.pos-card.filled {
  background: var(--card-filled-bg);
  border-color: var(--card-filled-border);
  box-shadow: var(--card-filled-shadow);
}

/* Position label (top-left) */
.pos-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: flex-start;
}

.pos-card.empty .pos-label,
.pos-card.clickable .pos-label { color: var(--card-empty-label); }
.pos-card.selected .pos-label  { color: var(--card-sel-border); }
.pos-card.filled .pos-label    { color: var(--card-filled-label); }

/* Silhouette (empty / clickable / selected cards) */
.pos-silhouette {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pos-silhouette svg { width: 36px; height: 46px; }

/* Player name + club sub-text on filled cards */
.pos-player-name {
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: var(--tx-player);
  line-height: 1.2;
  margin-top: 13px;
  max-width: 80px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pos-club-name {
  font-size: 0.56rem;
  font-weight: 500;
  color: var(--tx-club-s);
  text-align: center;
  margin-top: 2px;
  max-width: 80px;
  white-space: normal;
  line-height: 1.25;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE FIELD CARDS — scale with the pitch container
   ════════════════════════════════════════════════════════ */
@container pitch (min-width: 1px) {
  /* Card body scales with pitch width */
  .pos-card {
    width: 16cqw;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: 1.6cqw;
    padding: 1.25cqw 1.1cqw 1.1cqw;
  }
  /* Position label */
  .pos-label { font-size: 1.9cqw; }
  /* Silhouette icon */
  .pos-silhouette svg { width: 6.4cqw; height: 8.2cqw; }
  /* Player name */
  .pos-player-name { font-size: 2cqw; margin-top: 2.3cqw; max-width: 14cqw; }
  /* Club / country sub-label */
  .pos-club-name  { font-size: 1.6cqw; max-width: 14cqw; }

  /* Row transform nudges — proportional to pitch width */
  [data-row="0"] .pos-card:nth-child(2)             { transform: translateY(-2.9cqw); }
  [data-row="0"] .pos-card:nth-child(1),
  [data-row="0"] .pos-card:nth-child(3)             { transform: translateY(1.4cqw); }
  [data-row="1"] .pos-card:nth-child(2)             { transform: translateY(-2.5cqw); }
  [data-row="1"] .pos-card:nth-child(1)             { transform: translateY(1.4cqw) translateX(3.2cqw); }
  [data-row="1"] .pos-card:nth-child(3)             { transform: translateY(1.4cqw) translateX(-3.2cqw); }
  [data-row="2"] .pos-card:nth-child(1)             { transform: translateY(-1.4cqw); }
  [data-row="2"] .pos-card:nth-child(4)             { transform: translateY(-1.4cqw); }
  [data-row="2"] .pos-card:nth-child(2),
  [data-row="2"] .pos-card:nth-child(3)             { transform: translateY(2.3cqw); }

  /* Hover lift scales too */
  .pos-card.clickable:hover                         { transform: translateY(-0.5cqw); }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINT — stacked layout ≤ 950px
   ════════════════════════════════════════════════════════ */
@media (max-width: 950px) {
  /* Header shrinks slightly on mobile */
  .game-header {
    padding: 0 12px;
    height: 50px;
  }
  :root { --header-h: 58px; }

  .header-title { display: none; }
  .header-setup-label { display: none; } /* mode shown in spin card on mobile */

  .header-logo { height: 38px; }

  .hdr-btn {
    padding: 8px 12px;
    font-size: 0.82rem;
  }

  /* Allow natural page scroll — body height unlocked, header stays sticky */
  body.game-page {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .game-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Game layout becomes a natural-height single column */
  .game-layout {
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
    flex: 0 0 auto;
  }

  /* ── Steps panel: full width, capped height, scrolls internally ── */
  .steps-panel {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
    border-right: none;
    border-bottom: 1px solid var(--bd-panel);
  }

  /* Expand steps panel when user is actively picking a player */
  .steps-panel.is-picking {
    max-height: 58vh;
  }

  /* Hide the spin section while picking so player options have full room */
  .steps-panel.is-picking .panel-section:first-child {
    display: none;
  }

  .panel-section {
    padding: 20px 20px 18px;
  }

  .pick-section {
    flex: none;
  }

  /* ── Field: natural height, no clipping ── */
  .right-panel {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    overflow: visible;
  }

  .pitch-outer {
    padding: 0 8px 16px;
    align-items: center;
    overflow: visible;
  }

  /* Pitch renders at natural width; aspect-ratio sets height automatically */
  .pitch-wrap {
    width: min(88vw, 420px) !important;
    height: auto !important;
  }

  /* New Game button sticks just below the header so it's always visible */
  .field-toolbar {
    position: sticky;
    top: 50px; /* header height on mobile */
    z-index: 15;
    background: var(--bg-stadium);
    width: 100% !important;
    max-width: none !important;
    justify-content: center;
    padding: 8px 0;
    margin-top: 0;
  }
}

/* ════════════════════════════════════════════════════════
   OVERLAY
   ════════════════════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(6px);
}
.overlay.hidden { display: none; }

.overlay-box {
  text-align: center;
  padding: 52px 72px;
  background: var(--bg-ovbox);
  border: 1px solid var(--bd-ovbox);
  border-radius: 16px;
  min-width: 320px;
  animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.overlay-xi {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--tx-h1);
  letter-spacing: -0.03em;
}

.overlay-score-label {
  font-size: 0.78rem;
  color: var(--tx-hd);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.overlay-score {
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--tx-score);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 36px;
}

.overlay-denom {
  font-size: 1.6rem;
  color: var(--tx-denom);
  font-weight: 500;
}

.btn-play-again {
  padding: 13px 40px;
  background: var(--ac);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  font-family: inherit;
}
.btn-play-again:hover { background: var(--ac-h); transform: translateY(-1px); }

/* ── RESULT SCREEN ───────────────────────────────────── */
.overlay-box.wide {
  width: min(96vw, 900px);
  padding: 20px 20px 24px;
  text-align: left;
  max-height: 96vh;
  overflow-y: auto;
}

/* Desktop: pitch left, info right */
.result-layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
}

/* ── Pitch (left on desktop) ── */
.result-visual {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: -18px;
}

/* Branding strip above the cloned pitch */
.result-pitch-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 6px 16px;
}

.result-pitch-brand-logo {
  height: 66px;
  width: auto;
}

.result-pitch-brand-name {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--tx-1);
  letter-spacing: -0.03em;
  line-height: 1;
}

.result-pitch-clone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  overflow: visible;
}

/* Pitch fills a fixed percentage of viewport height — stays large on all desktops */
.result-pitch-clone .pitch-wrap {
  height: min(76vh, 600px) !important;
  width: auto !important;
  aspect-ratio: 10 / 13;
}

.result-pitch-clone .field-toolbar { display: none !important; }
.result-pitch-clone .slot-card { pointer-events: none; cursor: default; }

/* ── Info column (right on desktop) ── */
.result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Hero box ── */
.result-hero-box {
  background: var(--bg-inner);
  border: 1px solid var(--bd-panel);
  border-radius: 10px;
  padding: 10px 14px 36px; /* extra bottom padding makes room for absolutely-positioned grade pill */
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  position: relative;
}

.result-mode-badge {
  display: inline-block;
  background: var(--ac-08);
  color: var(--ac);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  width: fit-content;
  /* sits naturally at top-left with the box padding as its margin from edges */
}

.result-sub-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--tx-4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Finish text — grade pill is now absolutely positioned in hero box corner */
.result-hero-finish-row {
  margin-top: 4px;
}

.result-next-target {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 12px;
  background: rgba(90,158,255,0.13);
  border: 1px solid rgba(90,158,255,0.38);
  border-radius: 6px;
}
.result-next-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tx-4);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.result-next-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ac);
}
.result-next-target--top .result-next-value {
  color: var(--gr);
}
.result-next-sub {
  font-size: 0.68rem;
  color: var(--tx-4);
}

.result-finish {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--tx-h1);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

.result-grade-pill {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: inline-block;
  background: var(--ac-08);
  border: 1px solid var(--ac-22);
  color: var(--ac);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Strength / Weakness compact pills ── */
.result-sw-col {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 10px;
}

.result-sw-row { /* legacy fallback */
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.result-sw-box {
  flex: 1;
  border-radius: 7px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.result-sw-strength {
  background: rgba(74, 222, 128, 0.07);
  border: 1px solid rgba(74, 222, 128, 0.22);
}

.result-sw-weakness {
  background: rgba(248, 113, 113, 0.07);
  border: 1px solid rgba(248, 113, 113, 0.22);
}

.result-sw-label {
  font-size: 0.50rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.50;
}
.result-sw-strength .result-sw-label { color: #4ade80; }
.result-sw-weakness .result-sw-label { color: #f87171; }

.result-sw-value {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}
.result-sw-strength .result-sw-value { color: #4ade80; }
.result-sw-weakness .result-sw-value { color: #f87171; }

/* ── Finish ladder ── */
.result-right-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.result-ladder-wrap {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd-panel);
  margin-bottom: 12px;
}

.result-ladder-heading {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--tx-1);
  margin-left: 11px;
  margin-top: 14px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.20);
}

.result-ladder { display: flex; flex-direction: column; gap: 3px; }

.ladder-tier {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 11px;
  border-radius: 6px;
  line-height: 1.3;
  border: 1px solid transparent;
  color: var(--tx-2);
}

/* Tiers above current — readable, aspirational */
.ladder-tier.above { color: var(--tx-2); }

/* Current finish — strong highlight */
.ladder-tier.achieved {
  background: var(--ac-08);
  border-color: var(--ac-22);
  color: var(--ac);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 11px;
}

/* Tiers below current — clearly dimmed */
.ladder-tier.below {
  color: var(--tx-4);
  opacity: 0.45;
}

/* ── CTA block ── */
.result-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.result-replay-prompt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx-1);
  text-align: center;
}

.result-cta-play {
  width: 100%;
  padding: 14px 16px;
  background: var(--ac);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s, box-shadow 0.12s;
  font-family: inherit;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 18px rgba(90,158,255,0.30);
}
.result-cta-play:hover {
  background: var(--ac-h);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(90,158,255,0.42);
}
.result-cta-play:active { transform: translateY(0); box-shadow: none; }

.result-action-row { display: flex; gap: 8px; }

.btn-result {
  flex: 1;
  padding: 10px 8px;
  border-radius: 7px;
  font-size: 0.77rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.1s;
  font-family: inherit;
}

.btn-result-primary { background: var(--ac); color: #fff; border: none; }
.btn-result-primary:hover { background: var(--ac-h); }

.btn-result-secondary {
  background: var(--bg-inner);
  border: 1px solid var(--bd-subtle);
  color: var(--tx-1);
}
.btn-result-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--ac);
  color: var(--tx-h1);
  transform: translateY(-1px);
}
.btn-result-secondary:active { transform: translateY(0); }


.result-setup-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-4);
  opacity: 0.6;
  margin-bottom: 6px;
}

/* ── Mobile: home page adjustments ── */
@media (max-width: 600px) {
  .home-title {
    font-size: 2.2rem;
  }
  .home-sub {
    font-size: 0.9rem;
    margin-bottom: 36px;
  }
  .home-container {
    padding: 32px 16px;
  }
  .mode-cards {
    gap: 20px;
  }
  .mode-card {
    width: 100%;
    max-width: 340px;
    padding: 36px 32px 32px;
  }
  .home-footer {
    padding: 16px 20px 24px;
  }
}

/* ── Mobile: stack vertically, pitch full-width on top ── */
@media (max-width: 660px) {
  .overlay-box.wide {
    padding: 14px 12px 18px;
    max-height: 100vh;
    border-radius: 12px;
  }

  .result-layout {
    flex-direction: column;
    gap: 14px;
  }

  /* Info moves to top, pitch moves to bottom */
  .result-info  { order: 1; width: 100%; }
  .result-visual { order: 2; width: 100%; justify-content: center; }

  .result-pitch-clone .pitch-wrap {
    height: auto !important;
    width: min(88vw, 380px) !important;
    aspect-ratio: 10 / 13;
  }

  /* SW boxes: side by side on mobile */
  .result-sw-col {
    flex-direction: row;
    gap: 8px;
  }

  .result-sw-box { flex: 1; }

  .result-finish { font-size: 2.4rem; }
}

/* ════════════════════════════════════════════════════════
   SITE LOGO
   ════════════════════════════════════════════════════════ */

/* Home page logo — centred, above title */
.home-logo {
  width: clamp(90px, 16vw, 130px);
  height: auto;
  display: block;
  margin: 0 auto 6px;
  filter: drop-shadow(0 4px 18px rgba(90,158,255,0.28));
}

/* Game page sidebar logo */
.sidebar-logo {
  width: clamp(64px, 10vw, 96px);
  height: auto;
  display: block;
  margin: 0 auto 4px;
  filter: drop-shadow(0 2px 8px rgba(90,158,255,0.22));
}

/* ════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.38), 0 0 8px rgba(90,158,255,0.10); }
  50%       { box-shadow: 0 2px 12px rgba(0,0,0,0.42), 0 0 14px rgba(90,158,255,0.22); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}