/* ============================================================================
   CrystalSport Fantasy — Theme
   Palette extracted directly from https://www.crystalsport.ge/
   Dark charcoal theme with a bright gold-yellow brand accent.
   ============================================================================ */

@font-face {
  font-family: "CrystalBet Uni";
  src: url("../fonts/crystalbet-uni-regular.otf?v=3") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CrystalBet Uni";
  src: url("../fonts/crystalbet-uni-medium.otf?v=3") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "CrystalBet Uni";
  src: url("../fonts/crystalbet-uni-bold.otf?v=3") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bg:            #181b1f;   /* site theme-color */
  --bg-deep:       #101215;
  --bg-elevated:   #1d2127;
  --bg-panel:      #23282e;
  --bg-panel-2:    #272c33;

  /* Brand accent (gold-yellow) */
  --accent:        #fde053;
  --accent-hover:  #fae252;
  --accent-soft:   #fdf497;
  --accent-deep:   #d9a620;

  /* Text */
  --text:          #ffffff;
  --text-secondary:#e5e8ed;
  --text-muted:    #8b9199;
  --text-faint:    #636870;

  /* Lines / borders */
  --border:        #2c323a;
  --border-strong: #4f5867;

  /* Status */
  --live:          #2fc82b;
  --info:          #1c82e0;
  --amber:         #cc7918;
  --danger:        #e0553b;

  /* Shape */
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 6px 22px rgba(0, 0, 0, 0.45);
  --team-content-width: 900px;

  --font: "CrystalBet Uni", "Segoe UI", system-ui, -apple-system, "Noto Sans Georgian",
          "BPG Nino Mtavruli", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* ── Branded startup cover ─────────────────────────────────────────────────
   The app remains behind this cover until its custom fonts and first data
   payload are both ready. This removes the raw-HTML/fallback-font flash while
   keeping the loading experience intentional and on-brand. */
.app-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(253, 224, 83, 0.07), transparent 31%),
    linear-gradient(145deg, #0b0d0f 0%, #111419 52%, #080a0c 100%);
  opacity: 1; visibility: visible;
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1), visibility 420ms;
}
.app-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loader-glow {
  position: absolute; width: min(72vw, 620px); aspect-ratio: 1;
  border: 1px solid rgba(253, 224, 83, 0.08); border-radius: 50%;
  box-shadow:
    0 0 0 52px rgba(253, 224, 83, 0.018),
    0 0 0 104px rgba(253, 224, 83, 0.012);
  animation: app-loader-breathe 2.4s ease-in-out infinite;
}
.app-loader-content {
  position: relative; z-index: 1; width: min(76vw, 360px);
  display: flex; flex-direction: column; align-items: center;
}
.app-loader-logo {
  display: block; width: min(64vw, 285px); height: auto;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.42));
  animation: app-loader-arrive 600ms cubic-bezier(.2,.8,.2,1) both;
}
.app-loader-kicker {
  margin-top: 13px; color: rgba(255, 255, 255, 0.52);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 3.2px;
}
.app-loader-progress {
  position: relative; width: 100%; height: 2px; margin-top: 28px;
  overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.09);
}
.app-loader-progress span {
  position: absolute; inset: 0 auto 0 -42%; width: 42%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-soft), transparent);
  box-shadow: 0 0 14px rgba(253, 224, 83, 0.5);
  animation: app-loader-scan 1.18s cubic-bezier(.4,0,.2,1) infinite;
}
.app-loader-status {
  margin-top: 11px; color: rgba(255, 255, 255, 0.42);
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans Georgian", Arial, sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.5px;
}
@keyframes app-loader-scan {
  0% { left: -42%; }
  100% { left: 100%; }
}
@keyframes app-loader-breathe {
  0%, 100% { transform: scale(.96); opacity: .56; }
  50% { transform: scale(1.03); opacity: 1; }
}
@keyframes app-loader-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .app-loader-glow, .app-loader-logo, .app-loader-progress span { animation: none; }
  .app-loader-progress span { left: 29%; }
}

button,
input,
select,
textarea {
  font-family: var(--font);
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 18px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, var(--bg-deep), var(--bg));
  border-bottom: 1px solid var(--border);
  /* Forces its own compositing layer — works around a mobile Safari/Chrome
     `position: sticky` repaint glitch where the background briefly renders
     transparent during fast scroll until the next repaint. */
  transform: translateZ(0);
  will-change: transform;
}
.topbar .container {
  display: flex; align-items: center; gap: 18px;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; letter-spacing: 0.3px;
  color: var(--text);
}
.topbar .brand { cursor: pointer; margin-left: -20px; }
.brand .accent { color: var(--accent); }
.brand-inline {
  font-weight: 900;
  white-space: nowrap;
}
.brand-inline-crystal { color: var(--accent); }
.brand-inline-sport { color: #fff; }
.brand-logo { display: block; width: 225px; height: auto; object-fit: contain; }
.brand-suffix { color: var(--text-secondary); font-size: 14px; font-weight: 700; }

.topbar-socials {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  transition: color .15s, border-color .15s, background .15s;
}
.topbar-socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(253, 224, 83, 0.08);
}
.topbar-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
/* ── Account menu (topbar user icon + dropdown) ───────────────────────────── */
.account-menu { position: relative; flex: 0 0 auto; margin-left: 14px; }
.account-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; appearance: none; cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--border-strong); color: var(--text);
  display: grid; place-items: center; transition: 0.15s;
}
.account-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.account-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 220px; background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; flex-direction: column; gap: 2px;
}
.account-dropdown.show { display: flex; }
.account-dropdown-email {
  padding: 10px 12px 8px; font-size: 12.5px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border); margin-bottom: 4px; word-break: break-all;
}
.account-dropdown-item {
  appearance: none; cursor: pointer; background: none; border: none; text-align: left;
  padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--text-secondary);
}
.account-dropdown-item:hover { background: var(--bg-panel); color: var(--text); }
.account-dropdown-item.danger { color: #ff9781; }
.account-dropdown-item.danger:hover { background: var(--danger); color: #fff; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin: 22px -18px 24px;
  padding: 0 8px;
}
.tab {
  appearance: none; border: none; cursor: pointer;
  background: transparent; color: var(--text-muted);
  padding: 11px 18px; font-family: var(--font); font-size: 14px; font-weight: 700;
  border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab:hover { color: var(--text-secondary); background: rgba(255, 255, 255, 0.03); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.league-nav-dropdown { position: relative; display: flex; }
.league-nav-trigger { white-space: nowrap; }
.league-nav-chevron {
  display: inline-block;
  margin-left: 4px;
  color: currentColor;
  transition: transform .18s ease;
}
.league-nav-dropdown.open .league-nav-chevron { transform: rotate(180deg); }
.league-nav-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 50%;
  display: none;
  width: 220px;
  padding: 7px;
  border: 1px solid #3b424c;
  border-radius: 12px;
  background: #1d2127;
  box-shadow: 0 18px 45px rgba(0,0,0,.42);
  transform: translateX(-50%);
}
.league-nav-dropdown.open .league-nav-menu { display: grid; }
.league-nav-menu button {
  padding: 11px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  text-align: left;
}
.league-nav-menu button:hover,
.league-nav-menu button.active {
  background: rgba(255,224,82,.11);
  color: var(--accent);
}

/* ── How to play tutorial ───────────────────────────────────────────────── */
#howto-modal { overflow-y: auto; padding: 16px; }
.modal-card.howto-modal-card {
  width: min(600px, 100%);
  max-width: 600px;
  max-height: none;
  overflow: hidden;
  border: 1px solid rgba(253, 224, 83, 0.55);
  background: var(--bg-elevated);
  color: var(--text);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.62);
}
.howto-visual {
  position: relative;
  min-height: 235px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 110%, rgba(255,255,255,.13) 0 29%, transparent 29.5%),
    linear-gradient(145deg, #ffe45c 0%, var(--accent) 58%, #e2bd1d 100%);
  color: #111418;
}
.howto-visual::before {
  content: "";
  position: absolute;
  width: 310px; height: 310px;
  right: -165px; bottom: -205px;
  border-radius: 50%;
  border: 30px solid rgba(17,20,24,.1);
}
.howto-visual .modal-close {
  position: absolute; z-index: 3; top: 16px; right: 16px;
  width: 34px; height: 34px; border: 2px solid #111418;
  background: #fff; color: #111418; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.howto-step-count {
  position: absolute; top: 20px; left: 22px; z-index: 2;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(17,20,24,.86); color: var(--accent);
  font-size: 11px; font-weight: 900; letter-spacing: .5px;
}
.howto-icon {
  position: relative; z-index: 2; width: 154px; height: 122px;
  display: grid; place-items: center;
  filter: drop-shadow(0 6px 0 rgba(17, 20, 24, 0.08));
}
.howto-icon svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
}
.howto-icon svg.howto-captain-icon {
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}
.howto-x2-badge circle {
  fill: #111418;
  stroke: var(--accent);
  stroke-width: 2;
}
.howto-x2-badge text {
  fill: var(--accent);
  stroke: none;
  font: 900 13px/1 var(--font);
}
.howto-transfer-icon text {
  fill: currentColor;
  stroke: none;
  font: 900 27px/1 Arial, sans-serif;
}
.howto-icon img {
  width: 116px;
  height: 116px;
  object-fit: contain;
}
.howto-icon .howto-pitch-icon {
  width: 154px;
  height: 112px;
  filter:
    drop-shadow(.65px 0 0 #111418)
    drop-shadow(-.65px 0 0 #111418)
    drop-shadow(0 .65px 0 #111418)
    drop-shadow(0 -.65px 0 #111418);
}
.howto-copy { min-height: 174px; padding: 28px 44px 18px; text-align: center; }
.howto-copy h2 { margin: 0 0 12px; color: var(--accent); font-size: clamp(22px, 4vw, 30px); font-weight: 900; }
.howto-copy p { max-width: 485px; margin: 0 auto; color: var(--text-secondary); font-size: 15px; line-height: 1.55; font-weight: 700; }
.howto-highlight { color: var(--accent); font-weight: 800; }
.howto-danger { color: var(--danger); font-weight: 900; }
.howto-controls { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 24px 24px; }
.howto-arrow {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--bg-panel); color: var(--text); cursor: pointer;
  font: 900 26px/1 var(--font); transition: .15s;
}
.howto-arrow:hover:not(:disabled) { color: #111418; background: var(--accent); border-color: var(--accent); }
.howto-arrow:disabled { opacity: .25; cursor: default; }
.howto-dots { display: flex; align-items: center; gap: 7px; }
.howto-dot {
  appearance: none; width: 8px; height: 8px; padding: 0; border: 0;
  border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: .18s;
}
.howto-dot.active { width: 22px; border-radius: 999px; background: var(--accent); }

@media (min-width: 700px) {
  .modal-card.howto-modal-card {
    width: 602px;
    min-width: 602px;
    max-width: 602px;
    height: 447px;
    min-height: 447px;
    max-height: 447px;
    display: flex;
    flex-direction: column;
  }
  .howto-visual {
    min-height: 200px;
    height: 200px;
    flex: 0 0 200px;
  }
  .howto-icon {
    width: 148px;
    height: 112px;
  }
  .howto-copy {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 34px 8px;
  }
  .howto-copy h2 {
    margin-bottom: 7px;
    font-size: 25px;
    line-height: 1.15;
  }
  .howto-copy p {
    max-width: 534px;
    font-size: 13px;
    line-height: 1.38;
  }
  .howto-controls {
    flex: 0 0 auto;
    padding: 0 24px 14px;
  }
}

@media (max-width: 699px) {
  #howto-modal { padding: 10px; align-items: center; }
  .modal-card.howto-modal-card {
    height: 465px;
    min-height: 465px;
    max-height: 465px;
    border-radius: 14px;
  }
  .howto-visual {
    height: 205px;
    min-height: 205px;
    flex: 0 0 205px;
  }
  .howto-icon { width: 136px; height: 106px; }
  .howto-icon img { width: 100px; height: 100px; }
  .howto-icon .howto-pitch-icon {
    width: 136px;
    height: 98px;
    filter:
      brightness(0) contrast(3)
      drop-shadow(.8px 0 0 #000)
      drop-shadow(-.8px 0 0 #000)
      drop-shadow(0 .8px 0 #000)
      drop-shadow(0 -.8px 0 #000);
  }
  html.ios-device .howto-icon .howto-pitch-icon {
    filter:
      brightness(0) contrast(10)
      drop-shadow(1.35px 0 0 #000)
      drop-shadow(-1.35px 0 0 #000)
      drop-shadow(0 1.35px 0 #000)
      drop-shadow(0 -1.35px 0 #000)
      drop-shadow(.8px .8px 0 #000)
      drop-shadow(-.8px -.8px 0 #000);
  }
  .howto-copy {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 22px 8px;
  }
  .howto-copy h2 { font-size: 23px; }
  .howto-copy p { font-size: 13.5px; line-height: 1.5; }
  .howto-copy p.howto-points-copy {
    width: calc(100% + 20px);
    max-width: none;
    margin-left: -10px;
    font-size: 12.5px;
  }
  .howto-controls {
    flex: 0 0 54px;
    gap: 12px;
    padding: 0 24px 14px;
  }
}

.view { display: none; animation: fade 0.2s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(1200px 300px at 15% -40%, rgba(253, 224, 83, 0.12), transparent),
    var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 26px;
  margin: 22px 0 4px;
  box-shadow: var(--shadow);
}
.hero h1 { margin: 0 0 6px; font-size: 26px; }
.hero p  { margin: 0; color: var(--text-muted); max-width: 720px; }
.hero .stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.stat {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px; min-width: 130px;
}
.stat .k { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat .v { font-size: 22px; font-weight: 800; color: var(--accent); }

/* ── Cards / panels ───────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; margin: 0 0 14px;
}
.section-title::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--accent);
}

/* ── Rules page (accordion FAQ) ───────────────────────────────────────────── */
.rules-intro {
  max-width: 920px; color: var(--text-secondary); font-size: 15px; line-height: 1.7;
  margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--border);
}
.rules-intro strong {
  display:block; margin-bottom:6px; color:var(--accent); font-size:20px; line-height:1.3;
}
.rules-accordion {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start;
}
.rules-index {
  position: sticky; top: 150px; overflow: hidden; border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); box-shadow: var(--shadow);
}
.rules-index a {
  display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center;
  min-height: 42px; padding: 8px 12px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.25;
  text-decoration: none; transition: color .15s, background .15s;
}
.rules-index a:last-child { border-bottom: 0; }
.rules-index a span { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 800; }
.rules-index a:hover { color: var(--text); background: rgba(255, 225, 75, .07); }
.rules-document {
  overflow: hidden; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow);
}
.rules-item { scroll-margin-top: 160px; border-bottom: 1px solid var(--border); }
.rules-item:last-child { border-bottom: 0; }
.rules-q {
  width: 100%; min-height: 64px; padding: 15px 20px; display: flex;
  justify-content: flex-start; gap: 13px; align-items: center; color: var(--text);
  background: linear-gradient(90deg, rgba(255,225,75,.09), transparent 72%);
  border: 0; border-bottom: 1px solid rgba(255,225,75,.14);
}
.rules-q h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.rules-number {
  display: inline-grid; place-items: center; flex: 0 0 36px; height: 30px;
  border-radius: 7px; color: #111; background: var(--accent);
  font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.rules-a {
  color: var(--text-secondary); font-size: 14px; line-height: 1.65;
  padding: 18px 20px 22px; overflow: visible;
}
.rules-a p { margin: 0 0 13px; }
.rules-a p:last-child { margin-bottom: 0; }
.rules-a strong { color: var(--text); }
.rules-a ul { margin: 4px 0 15px; padding-left: 22px; }
.rules-a li { margin-bottom: 7px; padding-left: 3px; }
.rules-a li::marker { color: var(--accent); }
.rules-note {
  margin: 16px 0 4px; padding: 13px 15px; border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; color: var(--text-secondary);
  background: rgba(255,225,75,.065);
}
.rules-note strong { color: var(--accent); }
.rules-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  margin: 15px 0;
}
.rules-kpis span {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 11px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.018); text-align: center;
}
.rules-kpis b { color: var(--accent); font-size: 21px; line-height: 1; }
.rules-formations {
  padding: 11px 13px; border: 1px solid rgba(255,225,75,.2); border-radius: 8px;
  color: var(--accent) !important; background: #15191e; font-weight: 800;
  text-align: center; letter-spacing: .25px;
}
.rules-status-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 15px 0;
}
.rules-status-grid span {
  padding: 11px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.018);
}
.rules-status-grid b { display: block; margin-bottom: 4px; color: var(--accent); }
.rules-booster-list { display: grid; gap: 8px; margin: 15px 0; }
.rules-booster-list p {
  display: grid; grid-template-columns: minmax(145px, .45fr) 1fr; gap: 14px;
  margin: 0; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: rgba(255,255,255,.018);
}
.rules-booster-list strong { color: var(--accent); }
.rules-danger { color: #ff6b57 !important; }
.rules-highlight,
.rules-a strong.rules-highlight { color: var(--accent); }
.rules-a strong.rules-performance-high { color: var(--accent); }
.rules-a strong.rules-performance-elite { color: #4da3ff; }
.rules-rating-scale {
  display: grid;
  gap: 7px;
  margin: 14px 0 16px;
}
.rules-rating-scale span {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  font-weight: 700;
}
.rules-rating-scale .low { color: var(--danger); border-left-color: var(--danger); }
.rules-rating-scale .average { color: var(--text-secondary); border-left-color: var(--text-secondary); }
.rules-rating-scale .high { color: var(--accent); border-left-color: var(--accent); }
.rules-rating-scale .elite { color: #4da3ff; border-left-color: #4da3ff; }
.rules-a .table-wrap {
  margin: 16px 0 4px; border: 1px solid var(--border); border-radius: 8px; overflow: auto;
}
.rules-a table.data { margin: 0; min-width: 520px; }
.rules-a table.data th {
  color: var(--accent); background: #15191e; font-size: 12px; text-transform: uppercase;
}
.rules-a table.data th,
.rules-a table.data td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.rules-a table.data tbody tr:last-child td { border-bottom: 0; }
.rules-a table.data tbody tr:nth-child(even) { background: rgba(255,255,255,.018); }

@media (max-width: 760px) {
  #view-rules .panel { padding: 16px 12px; }
  .rules-intro { font-size: 13px; line-height: 1.6; margin-bottom: 16px; padding-bottom: 16px; }
  .rules-intro strong { font-size:17px; }
  .rules-accordion { display: block; }
  .rules-index {
    position: static; display: flex; overflow-x: auto; gap: 7px; padding: 8px;
    margin-bottom: 14px; border-radius: 10px; scrollbar-width: none;
  }
  .rules-index::-webkit-scrollbar { display: none; }
  .rules-index a {
    display: flex; flex: 0 0 auto; min-height: 36px; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: 7px; white-space: nowrap;
  }
  .rules-index a:last-child { border-bottom: 1px solid var(--border); }
  .rules-document { border-radius: 10px; }
  .rules-item { scroll-margin-top: 132px; }
  .rules-q { min-height: 56px; padding: 12px 13px; gap: 10px; }
  .rules-q h3 { font-size: 15px; }
  .rules-number { flex-basis: 32px; height: 28px; }
  .rules-a { padding: 14px 13px 18px; font-size: 13px; line-height: 1.6; }
  .rules-document,
  .rules-item,
  .rules-a,
  .rules-a .table-wrap { min-width: 0; max-width: 100%; }
  .rules-a .table-wrap {
    margin-left: -2px; margin-right: -2px; overflow-x: hidden;
  }
  .rules-a table.data {
    width: 100%; min-width: 0; table-layout: fixed;
  }
  .rules-a table.data th,
  .rules-a table.data td {
    padding: 10px 8px; font-size: 11px; line-height: 1.4;
    white-space: normal; overflow-wrap: anywhere; word-break: normal;
  }
  .rules-a table.data th:first-child,
  .rules-a table.data td:first-child { width: 62%; }
  .rules-a table.data th.num,
  .rules-a table.data td.num { width: 38%; }
  .rules-a .rules-transfer-table table.data th:first-child,
  .rules-a .rules-transfer-table table.data td:first-child { width: 57%; }
  .rules-a .rules-transfer-table table.data th.num,
  .rules-a .rules-transfer-table table.data td.num { width: 43%; }
  .rules-a .rules-transfer-table table.data th.num { white-space: nowrap; }
  .rules-kpis { grid-template-columns: repeat(2, 1fr); }
  .rules-status-grid { grid-template-columns: 1fr; }
  .rules-booster-list p { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; min-width: 520px; }
table.data th, table.data td { padding: 12px 14px; text-align: left; }
table.data thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); border-bottom: 1px solid var(--border-strong);
}
table.data tbody tr { border-bottom: 1px solid var(--border); }
table.data tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.rank {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--bg-panel); font-weight: 800; font-size: 13px;
}
.rank.gold   { background: var(--accent); color: #181b1f; }
.rank.silver { background: #c9ced6; color: #181b1f; }
.rank.bronze { background: var(--amber); color: #181b1f; }
.points { font-weight: 800; color: var(--accent); }

/* ── Leaderboard: highlight my own team's row ────────────────────────────── */
table.data tbody tr.me { background: rgba(253, 224, 83, 0.16); }
table.data tbody tr.me:hover { background: rgba(253, 224, 83, 0.22); }
.leaderboard-me-pin {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 130px 145px;
  align-items: center; min-height: 58px; padding: 9px 0;
  background: var(--accent); color: #181b1f;
  border-top: 2px solid var(--accent-soft); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.leaderboard-me-pin[style*="display: none"] { display: none !important; }
.lb-pin-rank { font-size: 16px; font-weight: 950; text-align: center; }
.lb-pin-team {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 0 14px; font-size: 14px;
}
.lb-pin-points {
  box-sizing: border-box; width: 100%; padding: 0 14px;
  text-align: right; font-size: 14px; font-weight: 900;
}
.lb-pin-points.total { font-size: 15px; }
.leaderboard-load-more {
  width: 100%; appearance: none; border: 0; cursor: pointer;
  padding: 11px 14px; background: #111418; color: var(--accent);
  font-size: 12px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.5px; border-radius: 0 0 9px 9px;
}
.leaderboard-load-more:hover { background: #0a0c0e; color: var(--accent-soft); }
#league-detail .leaderboard-me-pin {
  grid-template-columns: 74px minmax(0, 1fr) 130px 145px;
}

/* ── Pills / positions ────────────────────────────────────────────────────── */
.pos {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
}
.pos.GK  { background: rgba(28, 130, 224, 0.18); color: #6db4ff; }
.pos.DEF { background: rgba(47, 200, 43, 0.16);  color: #7ee27a; }
.pos.MID { background: rgba(253, 224, 83, 0.16); color: var(--accent-soft); }
.pos.FWD { background: rgba(224, 85, 59, 0.18);  color: #ff9781; }
.tag-live { color: var(--live); font-weight: 800; }
.tag-scored { color: var(--accent); font-weight: 800; }
.tag-upcoming { color: var(--text-muted); font-weight: 700; }

/* ── Buttons / inputs ─────────────────────────────────────────────────────── */
.btn {
  appearance: none; cursor: pointer; border: 1px solid var(--border-strong);
  background: var(--bg-panel); color: var(--text-secondary);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14px; transition: 0.15s;
}
.btn:hover { border-color: var(--accent); color: var(--text); }
.btn.primary {
  background: var(--accent); color: #181b1f; border-color: var(--accent);
}
.btn.primary:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.saved { background: var(--live); color: #181b1f; border-color: var(--live); }

select, input {
  background: var(--bg-panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 9px 12px; font-family: inherit; font-size: 14px;
}
select:focus, input:focus { outline: none; border-color: var(--accent); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Football pitch (official-style formation view) ───────────────────────── */
.pitch-wrap {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#view-team > .panel {
  position: static; width: 100%; margin: 0;
  padding: 22px 18px 28px;
  background: transparent;
  border: 0; border-radius: 0; box-shadow: none;
}
.pitch-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; max-width: 900px; margin-bottom: 14px; padding: 10px 14px; flex-wrap: nowrap;
  background: #0a0b0d; border: 0;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}
.pitch-toolbar .muted {
  flex: 1 1 auto; min-width: 0; color: rgba(255, 255, 255, 0.72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pitch-toolbar-editable .muted { display: none; }

/* Rival view title: a clear, centred team identity above the pitch instead
   of the small instructional toolbar used by the editable squad. */
#pitch-toolbar-opponent {
  justify-content: center;
  max-width: var(--team-content-width);
  padding: 4px 12px 10px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#pitch-toolbar-opponent #opponent-team-title {
  flex: 0 1 auto;
  color: #fff;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  #pitch-toolbar-editable {
    position: relative; z-index: 5;
    display: grid;
    grid-template-columns: 100px minmax(0, 450px) minmax(0, 450px) 100px;
    grid-template-rows: 38px 48px;
    column-gap: 6px;
    width: 100%; max-width: 1118px; margin: 0 auto -86px; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    pointer-events: none;
  }
  #formation-picker {
    grid-column: 2; grid-row: 1; justify-self: start; align-self: end;
    width: 94px; transform: translateY(-24px);
  }
  #card-display-mode-control {
    grid-column: 3; grid-row: 1; justify-self: end; align-self: end;
    width: 112px; transform: translateY(-24px);
  }
  #open-boosters {
    grid-column: 2; grid-row: 2; justify-self: start; align-self: center;
    width: 56px; height: 56px; font-size: 24px; transform: translateX(6px); pointer-events: auto;
  }
  #autofill-squad {
    grid-column: 3; grid-row: 2; justify-self: end; align-self: center;
    width: 56px; height: 56px; font-size: 24px; transform: translateX(-6px); pointer-events: auto;
  }
  #formation-picker, #card-display-mode-control { pointer-events: auto; }
}
.display-mode-select {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 6px 10px;
  border-color: var(--border-strong); background: var(--bg-panel);
}
.formation-picker { position: relative; flex: 0 0 auto; z-index: 35; }
#formation-select { display: none; }
.formation-trigger {
  width: 100%; min-height: 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--text); border-style: solid; border-width: 1px; border-radius: 7px;
  cursor: pointer;
}
.formation-trigger:disabled { opacity: .55; cursor: not-allowed; }
.formation-chevron { color: var(--text-muted); font-size: 15px; transition: transform .16s ease; }
.formation-trigger[aria-expanded="true"] .formation-chevron { transform: rotate(180deg); }
.formation-popover {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 120;
  width: 306px; padding: 10px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  background: #101216; border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
}
.formation-popover[hidden] { display: none; }
.formation-option {
  min-width: 0; padding: 8px 7px 9px;
  color: var(--text-muted); background: var(--bg-panel);
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.formation-option:hover { color: var(--text); border-color: var(--border-strong); }
.formation-option.active { color: #171a1e; background: var(--accent); border-color: var(--accent); }
.formation-option-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 900; }
.formation-diagram { display: flex; flex-direction: column; gap: 4px; min-height: 36px; justify-content: center; }
.formation-dot-row { display: flex; justify-content: center; gap: 5px; }
.formation-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }

/* Shared custom select: every user-facing native dropdown opens the same
   branded modal instead of an iOS/Android system menu. */
.cs-control { position: relative; width: 100%; min-width: 0; }
.cs-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cs-trigger {
  width: 100%; min-height: 39px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px;
  color: var(--text); background: var(--bg-panel);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 800; text-align: left; cursor: pointer;
}
.cs-trigger:disabled { opacity: .55; cursor: not-allowed; }
.cs-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-trigger-chevron { flex: 0 0 auto; color: var(--text-muted); font-size: 15px; transition: transform .18s ease; }
.cs-trigger[aria-expanded="true"] .cs-trigger-chevron { transform: rotate(180deg); }
.cs-overlay {
  position: fixed; inset: 0; z-index: 260;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(0, 0, 0, .66); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .2s ease;
}
.cs-overlay[hidden] { display: none; }
.cs-overlay.show { opacity: 1; }
.cs-sheet {
  width: min(420px, 100%); max-height: min(72vh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #171a1f; border: 1px solid var(--border-strong); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68);
  transform: translateY(10px) scale(.985); transition: transform .2s ease;
}
.cs-overlay.show .cs-sheet { transform: translateY(0) scale(1); }
.cs-sheet-handle { display: none; }
.cs-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border-bottom: 1px solid var(--border);
}
.cs-sheet-head h2 { margin: 0; color: #fff; font-size: 16px; line-height: 1.2; }
.cs-sheet-close {
  width: 32px; height: 32px; display: grid; place-items: center;
  padding: 0; color: var(--text-muted); background: transparent;
  border: 0; border-radius: 50%; font-size: 16px; cursor: pointer;
}
.cs-sheet-close:hover { color: var(--accent); background: rgba(255, 255, 255, .06); }
.cs-options { padding: 9px; overflow-y: auto; overscroll-behavior: contain; }
.cs-option {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 13px;
  color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 750; text-align: left; cursor: pointer;
}
.cs-option:hover { background: rgba(255, 255, 255, .05); border-color: var(--border); }
.cs-option.selected { color: var(--accent); background: rgba(253, 224, 83, .08); border-color: rgba(253, 224, 83, .3); }
.cs-option:disabled { opacity: .42; cursor: not-allowed; }
.cs-check { flex: 0 0 auto; color: var(--accent); font-size: 18px; opacity: 0; }
.cs-option.selected .cs-check { opacity: 1; }
html.cs-open, body.cs-open { overflow: hidden; }
.picker-select-row .cs-control { flex: 1 1 50%; }
#card-display-mode-control { flex: 0 0 auto; }

@media (max-width: 760px) {
  .cs-overlay { align-items: flex-end; padding: 0; }
  .cs-sheet {
    width: 100%; max-height: min(78dvh, 680px);
    border-width: 1px 0 0; border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .cs-overlay.show .cs-sheet { transform: translateY(0); }
  .cs-sheet-handle {
    display: block; width: 42px; height: 4px; margin: 8px auto 1px;
    border-radius: 999px; background: rgba(255, 255, 255, .24);
  }
  .cs-sheet-head { padding: 12px 15px 13px; }
  .cs-option { min-height: 52px; font-size: 15px; }
}

@media (min-width: 761px) {
  .cs-native {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .cs-trigger { display: none; }
}

/* ── Boosters (Wildcard / 12th Man / Maximum Captain) ─────────────────────── */
.booster-fab {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #181b1f; border: none; cursor: pointer;
  font-size: 16px; display: grid; place-items: center; transition: 0.15s;
  box-shadow: 0 0 0 3px rgba(253, 224, 83, 0.2);
}
.booster-fab:hover { filter: brightness(1.08); }
.booster-fab.active { background: var(--live); box-shadow: 0 0 0 3px rgba(47, 200, 43, 0.22); }
#open-boosters {
  color: #111418;
}
#open-boosters svg {
  display: block;
  width: 56%;
  height: 70%;
  overflow: visible;
}
#open-boosters svg path {
  fill: currentColor;
}
@media (min-width: 700px) {
  #open-boosters svg {
    width: 90%;
    height: 90%;
  }
}
@media (max-width: 699px) {
  #open-boosters svg {
    width: 100%;
    height: 100%;
    transform: scale(1.08);
  }
}

.booster-banner {
  width: 100%; max-width: var(--team-content-width); margin: 0 auto 8px; padding: 8px 14px;
  background: rgba(47, 200, 43, 0.12); border: 1px solid var(--live);
  border-radius: 10px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 13px; font-weight: 700; color: var(--live);
}
.booster-banner .deactivate-btn {
  flex: 0 0 auto; appearance: none; cursor: pointer; border: 1px solid var(--danger);
  color: #ff9781; background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800;
}
.booster-banner .deactivate-btn:hover { background: var(--danger); color: #fff; }

.modal-card.booster-modal-card {
  max-width: 600px;
  max-height: none;
  overflow: hidden;
  background: #f7f7f7;
  color: #15181c;
  border: 0;
}
.booster-banner-copy {
  display: inline-flex; align-items: center; gap: 8px;
}
.booster-banner-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--bg); background: var(--accent); border: 2px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); font-size: 14px; font-weight: 900; line-height: 1;
}
#booster-modal { overflow-y: auto; padding: 16px; }
.booster-hero {
  position: relative;
  min-height: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 54px 24px;
  overflow: hidden;
  background: var(--accent);
  color: #111418;
}
.booster-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -105px;
  width: 270px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}
.booster-hero #booster-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 2px solid #111418;
  background: #fff;
  color: #111418;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.booster-hero-icon {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  background: #111418;
  box-shadow: 0 0 0 3px rgba(17, 20, 24, 0.9);
}
.booster-hero-icon svg { width: 68%; height: 68%; }
.booster-hero-icon path { fill: var(--accent); }
.booster-hero-title {
  position: relative;
  z-index: 1;
  font-size: clamp(25px, 4vw, 38px);
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
}
.booster-modal-card .booster-hint {
  padding: 22px 24px 6px;
  color: #25282d;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
}

/* The card itself doesn't scroll internally — the overlay does (same fix as
 * .auth-landing) — this avoids relying on vh-based max-height, which iOS
 * Safari's dynamic toolbar makes unreliable (confirmed earlier with the
 * 12th Man card: fine in the dev preview tool, broken on a real device). */
#account-modal.overlay, #user-modal.overlay { overflow-y: auto; align-items: flex-start; padding: 24px 16px; }
.modal-card.account-modal-card { max-width: 430px; max-height: none; margin: auto 0; }
.account-modal-body { padding: 16px; }
.account-modal-body .field { margin-bottom: 14px; }
.account-sections { display: grid; grid-template-columns: 1fr; gap: 18px; }
.account-section { min-width: 0; }
.account-password-section { padding-top: 16px; border-top: 1px solid var(--border); }
.account-section > .btn.primary { width: 100%; min-height: 42px; }
.account-modal-body table.data { min-width: 0; } /* the narrow 400px account/admin modals can't fit the usual 520px min-width */
.account-modal-body table.data th, .account-modal-body table.data td { padding: 10px; }
.account-modal-body table.data tbody tr.clickable { cursor: pointer; }
.user-lineup-detail { font-size: 13px; }
.account-section-divider { height: 1px; background: var(--border); margin: 18px 0 14px; }
.account-section-title { margin: 0 0 14px; font-size: 13px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

@media (min-width: 700px) {
  .modal-card.account-modal-card { width: min(760px, calc(100vw - 40px)); max-width: 760px; }
  .account-modal-body { padding: 20px; }
  .account-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .account-password-section {
    padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--border);
  }
}
@media (min-width: 700px) {
  /* The pitch trapezoid's top edge runs from 21% to 79% (58% wide). */
  .booster-banner {
    width: 58%;
    max-width: calc(var(--team-content-width) * 0.58);
  }
}

@media (max-width: 699px) {
  #account-modal.overlay {
    padding: 8px;
    overflow: hidden;
    align-items: center;
  }
  .modal-card.account-modal-card {
    width: 100%;
    max-width: 430px;
    max-height: calc(95dvh - 16px);
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
  }
  .account-modal-card > .modal-head { flex: 0 0 auto; }
  .account-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
  }
  .account-modal-body::-webkit-scrollbar { display: none; width: 0; }
  .account-modal-body .field { margin-bottom: 11px; }
  .account-sections { gap: 14px; }
  .account-profile-section {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
  }
  .account-profile-section .account-section-title,
  .account-profile-section .onboarding-error,
  .account-profile-section > .btn { grid-column: 1 / -1; }
  .account-password-section { padding-top: 14px; }
  .account-section-title { margin-bottom: 11px; }
}
.booster-hint { padding: 12px 14px 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.confirm-modal-card { max-width: 340px; }
.confirm-body { padding: 16px; }
.confirm-body p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text); }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1 1 0; }

/* ── Admin dashboard ──────────────────────────────────────────────────────── */
.admin-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.admin-row-between .section-title { margin: 0; }
.admin-stats-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.admin-stat-tile {
  flex: 1 1 140px; background: var(--bg-panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.admin-stat-tile .k { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.admin-stat-tile .v { font-size: 22px; font-weight: 800; color: var(--accent); margin-top: 4px; }
.admin-pagination { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--text-muted); }
.admin-pagination .btn { padding: 6px 14px; font-size: 13px; }
.status-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.3px; background: rgba(255, 255, 255, 0.08); color: var(--text-muted);
}
.status-pill.ok { background: rgba(47, 200, 43, 0.18); color: var(--live); }
.status-pill.warn { background: rgba(245, 166, 35, 0.18); color: var(--amber); }
.status-pill.bad { background: rgba(224, 85, 59, 0.18); color: #ff9781; }
.admin-error-banner {
  background: rgba(224, 85, 59, 0.14); border: 1px solid rgba(224, 85, 59, 0.4);
  color: #ff9781; border-radius: var(--radius-sm); padding: 12px 16px;
  margin-bottom: 14px; font-size: 13px; font-weight: 600;
}

/* ── Auth landing (full-page login + onboarding, à la a real home page) ──── */
.auth-landing.overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 900px 500px at 50% -8%, rgba(253, 224, 83, 0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg) 55%);
  backdrop-filter: none;
  padding: 24px;
  z-index: 95;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
}
.auth-scroll-lock {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  background: var(--bg-deep);
}
.auth-landing-inner {
  margin: auto 0;
  width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.auth-landing-brand {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 40px;
}
.auth-landing-logo {
  display: block;
  width: min(64vw, 285px);
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.42));
}
.auth-landing-kicker {
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.52);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3.2px;
  white-space: nowrap;
}
.auth-landing-title {
  font-size: 34px; font-weight: 900; line-height: 1.18; color: var(--text); margin: 0 0 14px;
}
.auth-landing-title.small { font-size: 24px; margin-bottom: 26px; }
.auth-landing-sub {
  font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 34px; max-width: 340px;
}
.auth-landing-sub-hidden { display: none; }
.auth-form input[type="email"]::placeholder { font-size: calc(1em - 1px); }
@media (min-width: 700px) and (min-height: 700px) {
  #login-gate .auth-landing-inner { transform: translateY(-55px); }
}
.google-signin-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; background: #fff; color: #1f1f1f; text-decoration: none;
  padding: 14px 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); transition: 0.15s;
}
.google-signin-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); }
.auth-form { width: 100%; text-align: left; }
.auth-form .field { margin-bottom: 14px; }
.auth-form .btn { width: 100%; }
.auth-form .btn + .btn { margin-top: 8px; }
.auth-form .login-copy { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; text-align: center; }
.onboarding-error { color: var(--danger); font-size: 12px; min-height: 16px; margin: -4px 0 10px; }

/* Password field with an inline show/hide toggle. */
.password-field { position: relative; }
.password-field input { padding-right: 42px; width: 100%; }
.pw-toggle {
  position: absolute; right: 4px; top: 27px; width: 32px; height: 32px;
  appearance: none; background: none; border: none; cursor: pointer;
  font-size: 15px; opacity: 0.55; display: grid; place-items: center;
}
.pw-toggle:hover { opacity: 0.9; }

/* Live password-strength checklist (register / reset). */
.pw-requirements { list-style: none; margin: -6px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pw-requirements li {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-faint); transition: color 0.15s;
}
.pw-check-icon {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong); position: relative; transition: 0.15s;
}
.pw-requirements li.ok { color: var(--live); }
.pw-requirements li.ok .pw-check-icon { background: var(--live); border-color: var(--live); }
.pw-requirements li.ok .pw-check-icon::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #06210a; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* "or" divider between password auth and Google sign-in. */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-faint); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--border); }

/* Small centered link line ("no account? register", "back to login" etc). */
.auth-switch { text-align: center; font-size: 13px; color: var(--text-muted); margin: 14px 0 0; }
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .auth-landing-title { font-size: 27px; }
  .auth-landing.overlay {
    padding: max(20px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
  }
}

/* ── Friend leagues ─────────────────────────────────────────────────────── */
.leagues-page { display: grid; gap: 18px; }
.leagues-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,224,82,.12), rgba(255,224,82,.02));
}
.leagues-hero h2, .league-detail-header h2 { margin: 3px 0 6px; color: var(--text); }
.leagues-hero p { max-width: 720px; margin: 0; color: var(--text-muted); }
.leagues-eyebrow {
  color: var(--accent); font-size: 12px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
}
.league-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.league-action-card {
  min-width: 0; padding: 18px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--panel);
}
.league-action-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.league-action-heading h3 { margin: 0 0 3px; }
.league-action-heading p { margin: 0; color: var(--text-muted); font-size: 13px; }
.league-action-icon {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
  border-radius: 50%; background: var(--accent); color: #111; font-size: 23px; font-weight: 950;
}
.league-action-card .field { margin-bottom: 12px; }
.league-action-card input, .league-action-card select { width: 100%; }
.league-form-buttons, .league-join-row { display: flex; gap: 10px; }
.league-join-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.league-form-error { min-height: 18px; margin-top: 7px; color: #ff725d; font-size: 12px; font-weight: 800; }
.my-leagues-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px;
}
.my-leagues-heading h3 { margin: 0; }
.my-leagues-heading > div p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.my-leagues-heading span { color: var(--text-muted); font-size: 12px; }
.public-leagues-section, .my-leagues-section { display: grid; gap: 2px; }
.my-leagues-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.league-card {
  position: relative; min-width: 0; padding: 17px; border: 1px solid var(--border);
  border-radius: 15px; background: var(--panel); cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.league-card:hover { transform: translateY(-2px); border-color: var(--accent); background: #22272d; }
.league-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.league-card h4 { overflow: hidden; margin: 0; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.league-role {
  flex: 0 0 auto; padding: 3px 7px; border-radius: 999px;
  background: rgba(255,224,82,.13); color: var(--accent); font-size: 10px; font-weight: 900;
}
.league-card-meta { display: flex; gap: 12px; margin-top: 13px; color: var(--text-muted); font-size: 12px; }
.public-league-card { cursor: default; }
.league-card-owner { margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.league-card-owner strong { color: var(--text); }
.league-role.public {
  border: 1px solid #36cf78;
  background: #25b865;
  color: #fff;
}
.public-league-join { width: 100%; margin-top: 14px; }
.public-league-join:disabled { cursor: default; opacity: .65; }
.league-card-code { margin-top: 12px; color: var(--accent); font-weight: 900; letter-spacing: .06em; }
.league-card-stats {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.league-card-rank {
  position: absolute;
  right: 17px;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  transform: translateY(-50%);
}
.league-card-rank i {
  font-size: 10px;
  font-style: normal;
}
.league-card-rank.rank-up i { color: #31d47b; }
.league-card-rank.rank-down i { color: #ef5548; }
.league-card-rank.rank-steady i { color: var(--text-muted); }
.league-mobile-cta, .league-card-mobile-head, .league-mobile-filter { display: none; }
.league-load-more { display: none; }
.public-leagues-load-more {
  display: block;
  width: min(320px, 100%);
  min-height: 46px;
  margin: 16px auto 0;
  border-color: rgba(255,224,82,.42);
  color: var(--accent);
  font-weight: 900;
}
.public-leagues-load-more[hidden] { display: none !important; }
.league-detail-tabs,
.league-detail-panel { display: none; }
.league-empty {
  display: grid; place-items: center; gap: 5px; min-height: 140px; padding: 24px;
  border: 1px dashed var(--border); border-radius: 15px; color: var(--text-muted); text-align: center;
}
.league-empty strong { color: var(--text); }
.league-back {
  border: 0; background: transparent; color: var(--accent); cursor: pointer;
  font: inherit; font-weight: 900;
}
.league-mobile-back { display: none; }
.league-detail-header {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-top: 10px; padding: 20px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--panel);
}
.league-code-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 12px; }
.league-code-line strong { color: var(--accent); font-size: 15px; letter-spacing: .06em; }
.league-code-line button {
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text); cursor: pointer;
}
.league-round-filter { width: min(250px, 100%); }
.league-admin-panel {
  margin-top: 14px; padding: 18px; border: 1px solid rgba(255,224,82,.24);
  border-radius: 16px; background: var(--panel);
}
.league-admin-title {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.league-admin-title h3 { margin: 3px 0 0; }
.league-rename-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 10px; margin-top: 15px;
}
.league-admin-note { margin: 10px 0 0; color: var(--text-muted); font-size: 12px; }
.league-admin-panel .btn.danger {
  border-color: rgba(224,85,59,.7); background: rgba(224,85,59,.08); color: #ff8d76;
}
.league-admin-panel .btn.danger:disabled { cursor: not-allowed; opacity: .4; }
.league-member-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.league-remove-member {
  flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(224,85,59,.55);
  border-radius: 7px; background: rgba(224,85,59,.07); color: #ff8d76;
  cursor: pointer; font: inherit; font-size: 10px; font-weight: 900;
}
.league-remove-member:disabled { cursor: wait; opacity: .5; }
.league-standings-panel { margin-top: 14px; }
.league-standings-table tr.me { background: rgba(255,224,82,.13); }
.league-standings-table tbody tr { cursor: pointer; }
.league-standings-table .points { color: var(--accent); font-weight: 950; }
.league-table-empty { padding: 30px !important; color: var(--text-muted); text-align: center !important; }

/* Leaderboards share one visual language on every screen. */
#view-leaderboard .panel,
#league-detail .league-standings-panel {
  overflow: hidden;
}
#view-leaderboard table.data,
#league-detail .league-standings-table {
  table-layout: fixed;
}
#view-leaderboard table.data th,
#league-detail .league-standings-table th {
  height: 44px;
  padding: 10px 14px;
  vertical-align: middle;
}
#view-leaderboard table.data td,
#league-detail .league-standings-table td {
  height: 62px;
  padding: 11px 14px;
  vertical-align: middle;
}
#view-leaderboard table.data th:first-child,
#view-leaderboard table.data td:first-child,
#league-detail .league-standings-table th:first-child,
#league-detail .league-standings-table td:first-child {
  width: 74px;
  text-align: center;
}
#view-leaderboard table.data th:nth-child(3),
#view-leaderboard table.data td:nth-child(3),
#league-detail .league-standings-table th:nth-child(3),
#league-detail .league-standings-table td:nth-child(3) {
  width: 130px;
}
#view-leaderboard table.data th:nth-child(4),
#view-leaderboard table.data td:nth-child(4),
#league-detail .league-standings-table th:nth-child(4),
#league-detail .league-standings-table td:nth-child(4) {
  width: 145px;
}
#view-leaderboard table.data tbody tr,
#league-detail .league-standings-table tbody tr {
  transition: background-color .16s ease;
}
#view-leaderboard table.data td:nth-child(2) strong,
#league-detail .league-member-cell strong {
  font-size: 15px;
  font-weight: 900;
}
#view-leaderboard table.data td.num,
#league-detail .league-standings-table td.num {
  font-size: 15px;
  font-weight: 900;
}
#view-leaderboard .rank,
#league-detail .league-standings-table .rank {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 950;
}
#view-leaderboard .points,
#league-detail .league-standings-table .points {
  color: var(--accent);
  font-size: 16px;
  font-weight: 950;
}
#view-leaderboard table.data tbody tr.me,
#league-detail .league-standings-table tbody tr.me {
  background: rgba(253, 224, 83, .16);
  box-shadow: inset 3px 0 0 rgba(253, 224, 83, .72);
}

@media (min-width: 761px) {
  .desktop-league-mine > .leagues-hero,
  .desktop-league-mine > .league-actions-grid,
  .desktop-league-mine > .public-leagues-section {
    display: none !important;
  }
  .desktop-league-mine > .league-mobile-filter {
    position: relative;
    display: grid;
    justify-self: end;
    width: min(340px, 100%);
    gap: 3px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: linear-gradient(145deg, #23282f, #1d2228);
  }
  .desktop-league-mine > .league-mobile-filter label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
  }
  .desktop-league-mine > .league-mobile-filter select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 36px;
    padding-right: 34px;
    border: 0;
    background-color: #20252b;
    color-scheme: dark;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
  }
  .desktop-league-mine > .league-mobile-filter::after {
    content: "⌄";
    position: absolute;
    right: 17px;
    bottom: 15px;
    color: var(--accent);
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    pointer-events: none;
  }
  .desktop-league-mine > .league-mobile-filter select option {
    background: #20252b;
    color: #fff;
  }
  .desktop-league-mine > .my-leagues-section { display: grid !important; }
  .desktop-league-mine #my-leagues-load-more {
    display: block;
    justify-self: center;
    width: min(320px, 100%);
    min-height: 46px;
    margin-top: 4px;
    border-color: rgba(255,224,82,.42);
    color: var(--accent);
    font-weight: 900;
  }
  .desktop-league-mine #my-leagues-load-more[hidden] {
    display: none !important;
  }
  .desktop-league-mine .my-leagues-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .desktop-league-mine .my-leagues-heading {
    margin: 4px 0 8px;
  }
  .desktop-league-mine .my-leagues-heading h3 {
    font-size: 26px;
  }
  .desktop-league-mine .league-card {
    min-height: 130px;
    padding: 20px 22px;
    border-radius: 14px;
    background:
      linear-gradient(110deg, rgba(255,224,82,.06), transparent 42%),
      var(--panel);
  }
  .desktop-league-mine .league-card-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .desktop-league-mine .league-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
  }
  .desktop-league-mine .league-type-badge.public {
    border: 1px solid #36cf78;
    background: #25b865;
    color: #fff;
  }
  .desktop-league-mine .league-type-badge.private {
    border: 1px solid #ffe052;
    background: var(--accent);
    color: #151515;
  }
  .desktop-league-mine .league-member-count {
    color: var(--text);
    font-size: 14px;
  }
  .desktop-league-mine .league-card h4 {
    font-size: 19px;
  }
  .desktop-league-mine .league-role { display: none; }
  .desktop-league-mine .league-card-owner {
    margin-top: 7px;
    font-size: 13px;
  }
  .desktop-league-mine .league-card-meta {
    position: absolute;
    right: 22px;
    bottom: 20px;
    margin: 0;
  }
  .desktop-league-mine .league-card-meta span:last-child {
    display: none;
  }
  .desktop-league-mine .league-card-code {
    position: absolute;
    right: 22px;
    top: 56px;
    margin: 0;
  }
  .desktop-league-mine .league-card-rank {
    right: 22px;
  }

  .desktop-league-join > .leagues-hero,
  .desktop-league-join > .my-leagues-section {
    display: none !important;
  }
  .desktop-league-join > .league-actions-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 760px);
  }
  .desktop-league-join > .public-leagues-section { display: grid !important; }
  .desktop-league-join .public-leagues-section .my-leagues-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desktop-league-create > .leagues-hero,
  .desktop-league-create > .my-leagues-section,
  .desktop-league-create > .public-leagues-section {
    display: none !important;
  }
  .desktop-league-create > .league-actions-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 760px);
  }

  .desktop-league-detail > .leagues-hero,
  .desktop-league-detail > .league-actions-grid,
  .desktop-league-detail > .public-leagues-section,
  .desktop-league-detail > .my-leagues-section {
    display: none !important;
  }
  .desktop-league-detail .league-detail-header {
    border-radius: 16px 16px 0 0;
  }
  .desktop-league-detail .league-detail-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-top: 0;
    background: #101215;
  }
  .desktop-league-detail .league-detail-tab {
    position: relative;
    min-height: 58px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
  }
  .desktop-league-detail .league-detail-tab.active { color: var(--text); }
  .desktop-league-detail .league-detail-tab.active::after {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 0;
    left: 24px;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--accent);
  }
  .desktop-league-detail [data-league-panel-content] { display: none !important; }
  .desktop-league-detail [data-league-panel-content].league-panel-active {
    display: block !important;
  }
  .desktop-league-detail .league-detail-panel {
    padding: 30px;
    border: 1px solid var(--border);
    border-top: 0;
    background: var(--surface);
  }
  .desktop-league-detail .league-detail-panel h3 {
    margin: 0 0 10px;
    color: var(--text);
  }
  .desktop-league-detail .league-detail-panel > p {
    margin: 0 0 24px;
    color: var(--text-muted);
  }
  .desktop-league-detail .league-about-panel {
    padding: 28px 36px 32px;
  }
  .desktop-league-detail .league-about-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    margin: 20px 0 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
  }
  .desktop-league-detail .league-about-list > div {
    min-width: 0;
    padding: 20px 24px;
    border-right: 1px solid var(--border);
  }
  .desktop-league-detail .league-about-list > div:last-child {
    border-right: 0;
  }
  .desktop-league-detail .league-about-list dt {
    margin: 0 0 7px;
    color: var(--text-muted);
    font-size: 13px;
  }
  .desktop-league-detail .league-about-list dd {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
  }
  .desktop-league-detail .league-leave-button {
    margin-top: 22px;
  }
  .desktop-league-detail .league-admin-panel {
    margin-top: 18px;
    padding: 24px 28px;
  }
  .desktop-league-detail .league-admin-title,
  .desktop-league-detail .league-rename-form {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .league-nav-chevron,
  .league-nav-menu { display: none !important; }
  #league-detail {
    margin: 0 -10px;
  }
  #league-detail .league-back,
  #league-detail .league-code-line {
    display: none !important;
  }
  #league-detail .league-detail-header {
    min-height: 0;
    margin: 0;
    padding: 18px;
    justify-content: flex-start;
    gap: 14px;
    border: 0;
    border-top: 0;
    border-radius: 0;
    background:
      linear-gradient(105deg, rgba(255,224,82,.1), transparent 46%),
      #171b20;
  }
  #league-detail .league-detail-header h2 {
    margin: 0;
    font-size: clamp(23px, 6.6vw, 30px);
    line-height: 1.05;
    color: #fff;
  }
  #league-detail .league-mobile-back {
    width: calc(100% - 32px);
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 16px;
    padding: 9px 14px;
    color: var(--accent);
    background: rgba(253, 224, 83, .07);
    border: 1px solid rgba(253, 224, 83, .34);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
  }
  #league-detail .league-mobile-back:active { transform: scale(.985); }
  .league-mobile-back-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #171a1e;
    background: var(--accent);
    font-size: 16px;
    line-height: 1;
  }
  #league-detail .league-detail-header .leagues-eyebrow {
    margin-bottom: 5px;
    color: var(--accent);
  }
  #league-detail .league-round-filter {
    position: relative;
    display: grid !important;
    visibility: visible;
    opacity: 1;
    gap: 4px;
    width: 100%;
    margin: 0;
  }
  #league-detail .league-round-filter label {
    color: rgba(255,255,255,.58);
    font-size: 11px;
    font-weight: 800;
  }
  #league-detail .league-round-filter::after {
    content: "⌄";
    position: absolute;
    right: 15px;
    bottom: 11px;
    color: var(--accent);
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    pointer-events: none;
  }
  #league-detail .league-round-filter select {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0 42px 0 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background-color: #242930;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
  }
  .league-detail-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #101215;
    border-bottom: 1px solid var(--border);
  }
  .league-detail-tab {
    position: relative;
    min-height: 58px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 900;
  }
  .league-detail-tab.active { color: var(--text); }
  .league-detail-tab.active::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--accent);
  }
  #league-detail [data-league-panel-content] { display: none !important; }
  #league-detail [data-league-panel-content].league-panel-active { display: block !important; }
  .league-detail-panel {
    padding: 30px 22px;
    background: var(--surface);
  }
  .league-detail-panel h3 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 25px;
  }
  .league-detail-panel > p {
    margin: 0 0 24px;
    color: var(--text-muted);
  }
  .league-invite-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 0 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
  }
  .league-invite-code span { color: var(--text-muted); }
  .league-invite-code strong { color: var(--accent); letter-spacing: .06em; }
  .league-invite-action {
    width: 100%;
    min-height: 50px;
    margin-top: 10px;
  }
  .league-about-list {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
  }
  .league-about-list div {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }
  .league-about-list dt {
    margin-bottom: 5px;
    color: var(--text-muted);
  }
  .league-about-list dd {
    margin: 0;
    color: var(--text);
    font-weight: 900;
  }
  .league-leave-button {
    width: 100%;
    min-height: 50px;
    margin-top: 28px;
    border-color: #ef5b49;
    color: #ff806f;
    font-weight: 950;
  }
  #league-detail .league-admin-panel {
    margin: 0;
    padding: 24px 22px 30px;
    border-width: 1px 0 0;
    border-radius: 0;
  }
  #league-detail .league-standings-panel {
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }
  #view-leagues { margin-inline: -10px; }
  .leagues-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 14px 28px;
    background:
      radial-gradient(circle at 105% 20%, rgba(255,224,82,.12), transparent 28%),
      linear-gradient(180deg, #171b20 0%, #111419 100%);
  }
  .leagues-hero, .league-detail-header { align-items: stretch; flex-direction: column; }
  .leagues-hero {
    order: 1;
    padding: 8px 4px 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .mobile-league-overview .leagues-hero { display: none; }
  .leagues-hero .leagues-eyebrow { display: none; }
  .leagues-hero h2 { margin: 0 0 7px; font-size: 28px; }
  .leagues-hero p { font-size: 13px; line-height: 1.55; }
  .leagues-hero > .btn { display: none; }
  .league-mobile-filter { order: 2; }
  .my-leagues-section { order: 3; }
  .league-mobile-cta { order: 4; }
  .public-leagues-section { order: 5; }
  .league-actions-grid { order: 6; }
  .league-actions-grid:not(.mobile-open) { display: none; }
  .league-detail { order: 7; }

  .league-mobile-filter {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: linear-gradient(145deg, #23282f, #1d2228);
  }
  .league-mobile-filter label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
  }
  .league-mobile-filter select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 36px;
    padding-right: 34px;
    border: 0;
    background-color: #20252b;
    color-scheme: dark;
    accent-color: var(--accent);
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
  }
  .league-mobile-filter::after {
    content: "⌄";
    position: absolute;
    right: 17px;
    bottom: 15px;
    color: var(--accent);
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    pointer-events: none;
  }
  .league-mobile-filter select option {
    background: #20252b;
    color: #fff;
  }
  .mobile-league-overview .public-leagues-section { display: none !important; }
  .mobile-league-detail > .leagues-hero,
  .mobile-league-detail > .league-mobile-filter,
  .mobile-league-detail > .league-mobile-cta,
  .mobile-league-detail > .league-actions-grid,
  .mobile-league-detail > .public-leagues-section,
  .mobile-league-detail > .my-leagues-section {
    display: none !important;
  }
  .mobile-league-detail {
    gap: 0;
    padding-top: 0;
  }
  .mobile-league-join .leagues-hero,
  .mobile-league-join .league-mobile-filter,
  .mobile-league-join .my-leagues-section,
  .mobile-league-join .league-mobile-cta,
  .mobile-league-create .leagues-hero,
  .mobile-league-create .league-mobile-filter,
  .mobile-league-create .my-leagues-section,
  .mobile-league-create .public-leagues-section,
  .mobile-league-create .league-mobile-cta {
    display: none !important;
  }
  .mobile-league-join .league-actions-grid { order: 1; }
  .mobile-league-join .public-leagues-section { display: block !important; order: 2; }
  .mobile-league-create .league-actions-grid { order: 1; }
  .mobile-league-join,
  .mobile-league-create { padding-bottom: 28px; }

  .my-leagues-heading {
    align-items: end;
    margin: 5px 2px 9px;
  }
  .my-leagues-heading h3 { font-size: 20px; }
  .my-leagues-heading > div p { display: none; }
  .my-leagues-heading span { font-size: 11px; }

  .league-actions-grid, .my-leagues-grid { grid-template-columns: 1fr; }
  .my-leagues-grid { gap: 12px; }
  .league-load-more {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    border-color: rgba(255,224,82,.42);
    color: var(--accent);
    font-weight: 900;
  }
  .league-load-more[hidden] { display: none !important; }
  .league-card {
    min-height: 154px;
    padding: 18px;
    border-color: rgba(255,255,255,.12);
    border-radius: 18px;
    background: linear-gradient(145deg, #23282f, #1d2228);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }
  .league-card:hover { transform: none; background: linear-gradient(145deg, #23282f, #1d2228); }
  .league-card-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
  }
  .league-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
  }
  .league-type-badge.public {
    border: 1px solid #36cf78;
    background: #25b865;
    color: #fff;
  }
  .league-type-badge.private {
    border: 1px solid #ffe052;
    background: var(--accent);
    color: #151515;
  }
  .league-member-count { color: var(--text); font-size: 15px; }
  .league-card-top .league-role { display: none; }
  .league-card h4 {
    max-width: calc(100% - 72px);
    font-size: 18px;
    line-height: 1.2;
  }
  .league-card-owner { margin-top: 9px; font-size: 12px; }
  .league-card-meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .league-card-meta span:last-child { display: none; }
  .league-card-code { margin-top: 9px; font-size: 12px; }
  .public-league-join {
    min-height: 42px;
    margin-top: 14px;
    border-radius: 11px;
  }

  .league-mobile-cta {
    display: grid;
    gap: 16px;
    padding: 20px 18px;
    border: 1px solid rgba(255,224,82,.28);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,224,82,.13), rgba(255,224,82,.025));
  }
  .league-mobile-cta h3 { margin: 0 0 6px; font-size: 20px; }
  .league-mobile-cta p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
  .league-mobile-cta-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .league-mobile-cta-buttons .btn { min-height: 44px; }
  .league-action-card { border-radius: 18px; }

  .league-form-buttons .btn { flex: 1; }
  .league-round-filter { width: 100%; }
  .league-admin-title { align-items: stretch; flex-direction: column; }
  .league-rename-form { grid-template-columns: 1fr; }
  .league-standings-table th, .league-standings-table td { padding: 10px 7px; font-size: 12px; }
}

/* Icon tiles — click to select, ⓘ hover-tooltips (native title attr) explain
   each one, a single footer button commits the actual activation. */
.booster-grid {
  padding: 14px 26px 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.booster-tile {
  position: relative; flex: 0 1 150px; min-width: 118px; min-height: 138px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #e9e9e9; color: #25282d; border: 2px solid transparent;
  border-radius: 12px; padding: 12px 8px 9px; text-align: center; cursor: pointer; transition: 0.15s;
}
.booster-tile:hover { background: #dedede; transform: translateY(-2px); }
.booster-tile.selected { border-color: #111418; background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(253, 224, 83, 0.65); }
.booster-tile.pending { border-color: var(--live); background: rgba(47, 200, 43, 0.08); }
.booster-tile.disabled { opacity: 0.4; cursor: not-allowed; }
.booster-tile .bt-icon {
  width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 10px;
  background: var(--accent); color: #181b1f; font-size: 17px; font-weight: 900;
  display: grid; place-items: center;
}
.booster-tile .bt-name { font-size: 13px; font-weight: 850; line-height: 1.15; overflow-wrap: break-word; }
.booster-tile .bt-status {
  margin-top: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-muted);
  display: inline-block; max-width: 100%; overflow-wrap: break-word;
}
.booster-tile .bt-status.pending { background: rgba(47, 200, 43, 0.18); color: var(--live); }
.booster-tile .bt-status.used { background: rgba(231, 76, 60, 0.12); color: #d9362b; }
.booster-tile .bt-status.locked { background: rgba(17, 20, 24, 0.12); color: #565b62; }
.booster-tile .bt-info {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; color: #25282d; border: 1px solid #777; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; cursor: pointer;
}
/* Click-driven booster-info popup, styled consistently with the booster-info
   bubble) — a black card with white text and a small arrow pointing back up
   at the ⓘ that opened it. Fixed/viewport-positioned (not nested in the
   modal) so the modal's own overflow:hidden can never clip it, and its
   left offset + --arrow-left are both set inline by JS after measuring the
   icon and the tooltip's own rendered width (see toggleBoosterTooltip). */
.bt-tooltip {
  position: fixed; z-index: 200; max-width: 250px; width: max-content;
  background: #111319; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 700;
  line-height: 1.45; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.bt-tooltip::before {
  content: ''; position: absolute; top: -6px; left: var(--arrow-left, 50%);
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid #111319;
}
.booster-footer { padding: 0 26px 24px; }
.booster-footer .btn {
  width: 100%; min-height: 46px; border-radius: 999px;
  font-size: 14px; font-weight: 950;
}
.booster-footer .btn:disabled { background: #dedede; color: #a5a5a5; opacity: 1; }

@media (max-width: 699px) {
  #booster-modal { align-items: flex-start; padding: 14px 12px; }
  .booster-modal-card { width: 100%; max-width: 520px; margin: auto 0; }
  .booster-hero { min-height: 190px; padding: 28px 42px 22px; }
  .booster-hero-icon { width: 62px; height: 62px; }
  .booster-hero-title { font-size: 27px; }
  .booster-modal-card .booster-hint { padding: 18px 18px 5px; font-size: 13px; }
  .booster-grid { padding: 12px 12px 16px; gap: 8px; }
  .booster-tile {
    flex: 0 1 calc(33.333% - 6px);
    min-width: 0;
    min-height: 122px;
    padding: 10px 4px 8px;
  }
  .booster-tile .bt-icon { width: 42px; height: 42px; }
  .booster-tile .bt-name { font-size: 11px; }
  .booster-tile .bt-status { font-size: 7px; padding: 2px 4px; }
  .booster-footer { padding: 0 14px 18px; }
}

/* 12th Man's card, seated directly on the pitch instead of with
   the bench, tagged with an orange "12" badge instead of C/V. Positioned
   with plenty of headroom above its own center point (not just enough for
   this card's height as measured here) — real-device font metrics run
   taller than this dev environment's, and .pitch's overflow:hidden clips
   silently rather than warning when that pushes the card's top edge past
   the pitch's own, so the margin needs to comfortably outrun that. */
.tm12-slot {
  position: absolute; left: 9%; top: 11%; transform: translate(-50%, -50%);
  width: var(--cw, 11cqw); text-align: center; z-index: 3; --cw: 11cqw;
}
.tm12-slot .tphoto-wrap { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(204, 121, 24, 0.3); }
.pitch {
  position: relative;
  width: 100%; max-width: var(--team-content-width);
  aspect-ratio: 1.8 / 1;
  margin: 6px auto 0;
  background: transparent;
  border: 0;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.34));
  overflow: visible;
  container-type: inline-size;
}
.pitch::before, .pitch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(21% 0, 79% 0, 100% 100%, 0 100%);
}
.pitch::before { z-index: 0; background: #f4dc22; }
.pitch::after {
  z-index: 0;
  inset: 3px 4px 5px;
  background:
    radial-gradient(ellipse at 50% 108%, rgba(253, 224, 83, 0.08), transparent 48%),
    linear-gradient(180deg, #070809 0%, #101214 58%, #17191b 100%);
}
.pm { position: absolute; pointer-events: none; z-index: 1; }
.center-line { top: 50%; left: 10.5%; right: 10.5%; border-top: 2px solid rgba(253, 224, 83, 0.58); }
.center-circle {
  top: 50%; left: 50%; width: 24%; aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(253, 224, 83, 0.58); border-radius: 50%;
}
.center-dot {
  top: 50%; left: 50%; width: 6px; height: 6px;
  transform: translate(-50%, -50%);
  background: rgba(253, 224, 83, 0.78); border-radius: 50%;
}
.box { left: 50%; transform: translateX(-50%); height: 16%; border: 2px solid rgba(253, 224, 83, 0.55); }
.box.top { top: 1%; width: 27%; border-top: none; }
.box.bottom { bottom: 1%; width: 27%; height: 17%; border-bottom: none; }
/* Penalty arcs (the "D") outside both boxes. Each is a clipped ellipse so
   only the half facing the centre of the pitch remains visible. */
.box::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 60%;
  aspect-ratio: 2 / 1;
  border: 2px solid rgba(253, 224, 83, 0.55);
  border-radius: 50%;
}
.box.top::after {
  top: 100%;
  transform: translate(-50%, -50%);
  clip-path: inset(50% -4px -4px -4px);
}
.box.bottom::after {
  bottom: 100%;
  transform: translate(-50%, 50%);
  clip-path: inset(-4px -4px 50% -4px);
}
.goal { left: 50%; transform: translateX(-50%); height: 5%; border: 2px solid rgba(253, 224, 83, 0.62); }
.goal.top { top: 1%; width: 14%; border-top: none; }
.goal.bottom { bottom: 1%; width: 14%; height: 5.5%; border-bottom: none; }

/* ── Fantasy player card token ────────────────────────────────────────────── */
/* Token sizes are driven by --cw (a cqw length, % of the pitch/bench
   container width) so every element on a card scales together. --cw
   defaults to a safe worst-case (15cqw fits 5-a-row without overlap) but is
   set per-row by JS for sparser rows (fewer players => bigger cards), and
   bumped for the bench (always exactly 4-wide, so it can run larger). */
.slot {
  position: absolute; transform: translate(-50%, -50%); width: var(--cw, 15cqw);
  text-align: center; z-index: 3; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.34));
}
.bslot {
  position: relative; width: 100%; text-align: center; --cw: 20cqw; --half-cw: 10cqw;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.tphoto-wrap {
  position: relative; width: calc(var(--cw, 15cqw) * 0.8); height: calc(var(--cw, 15cqw) * 0.8); margin: 0 auto 3px;
  z-index: 1;
  border-radius: 50%; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #f7f7f7, #dfe2e5);
  border: 3px solid var(--border-strong);
  box-shadow: 0 0 0 1px rgba(79, 88, 103, 0.42);
  display: grid; place-items: center;
  transition: transform 180ms ease, border-color 150ms ease, box-shadow 180ms ease;
}
/* Hover-only on real pointers — on touch, :hover styling makes the browser
   treat the first tap as "hover" and the second as the actual click, so
   opening a player's detail needed two taps. Gating behind (hover: hover)
   keeps the desktop effect and skips that trap entirely on mobile. */
@media (hover: hover) and (pointer: fine) {
  .slot:hover, .bslot:hover { z-index: 12; }
  .slot:hover .tphoto-wrap, .bslot:hover .tphoto-wrap {
    transform: translateY(-3px) scale(1.09);
    border-color: var(--accent);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
  }
}
.tphoto {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  display: block; background: #fff;
}
.tini { font-size: clamp(11px, calc(var(--cw, 15cqw) * 0.213), 24px); font-weight: 800; color: #fff; }
.tphoto-wrap:not(.noimg) .tini { display: none; }
.tphoto-wrap.noimg .tphoto { display: none; }
.tphoto-wrap.add {
  background: rgba(18, 22, 26, 0.55); color: rgba(253, 224, 83, 0.85);
  font-size: clamp(18px, calc(var(--cw, 15cqw) * 0.333), 32px); font-weight: 400; border: 1px dashed rgba(253, 224, 83, 0.5);
  border-radius: 50%;
}

/* Per-player rolling-lockout state shown as a card colour instead
   of a text badge: blue/neutral (default, above) = not started, green =
   live, yellow = finished. Card border carries the colour; .tname (the same
   card's nameplate, right below the photo) picks it up too for one cohesive
   outline. */
.tphoto-wrap.live,
.tphoto-wrap.live ~ .tname {
  border-color: var(--live);
}
.tphoto-wrap.live { animation: livecardpulse 1.2s ease-in-out infinite; }
.tphoto-wrap.ft,
.tphoto-wrap.ft ~ .tname {
  border-color: var(--accent);
}
.tphoto-wrap.ft { box-shadow: 0 0 0 1px rgba(253, 224, 83, 0.48); }
@keyframes livecardpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 200, 43, 0.5); }
  50% { box-shadow: 0 0 0 3px rgba(47, 200, 43, 0); }
}
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.tname {
  background: #0a0b0d; color: #fff; font-size: clamp(9px, calc(var(--cw, 15cqw) * 0.153), 15px); font-weight: 800;
  padding: 2px 4px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong);
  width: calc(var(--cw, 15cqw) * 0.94); margin: 0 auto;
}
.tinfo {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg-panel); color: var(--accent); font-size: clamp(8px, calc(var(--cw, 15cqw) * 0.14), 14px); font-weight: 900;
  padding: 2px 4px; line-height: 1.1; border-radius: 0 0 6px 6px; letter-spacing: 0.4px;
  border: 2px solid var(--border-strong); border-top: none;
  width: calc(var(--cw, 15cqw) * 0.94); margin: 0 auto;
}
.tinfo.empty-info { background: transparent; border: none; color: var(--text-muted); }
.tinfo .clogo { width: clamp(11px, calc(var(--cw, 15cqw) * 0.167), 20px); height: clamp(11px, calc(var(--cw, 15cqw) * 0.167), 20px); object-fit: contain; }
/* Objective rating bar (filled accent, stands out) */
.tinfo.rtg { background: var(--bg-panel); color: var(--accent); border-color: var(--border-strong); font-weight: 900; }
/* Still LIVE (own match in progress) — green + pulsing, same colour/motion
   language as .tphoto-wrap.live; reverts to the default yellow once FT. */
.tinfo.rtg.live { background: var(--live); color: #fff; border-color: var(--live); animation: livecardpulse 1.2s ease-in-out infinite; }
.tphoto-wrap.live ~ .tinfo {
  background: var(--live); color: #fff; border-color: var(--live);
}
.tphoto-wrap.ft ~ .tinfo {
  background: var(--accent); color: #181b1f; border-color: var(--accent);
}

/* Eliminated club: an already-owned player stays in the saved squad, but
   their tournament status must remain unmistakable on pitch and bench.
   Parent-scoped selectors outrank the normal NS/LIVE/FT card colours. */
.slot.eliminated .tphoto-wrap,
.bslot.eliminated .tphoto-wrap {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(255, 76, 76, 0.34);
  animation: none;
}
.slot.eliminated .tname,
.bslot.eliminated .tname {
  background: #351517;
  color: #fff;
  border-color: var(--danger);
}
.slot.eliminated .tinfo,
.bslot.eliminated .tinfo {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.tcap, .trm {
  position: absolute; top: -8px; width: clamp(16px, calc(var(--cw, 15cqw) * 0.227), 24px); height: clamp(16px, calc(var(--cw, 15cqw) * 0.227), 24px);
  border-radius: 50%; border: none; cursor: pointer; font-size: clamp(9px, calc(var(--cw, 15cqw) * 0.147), 13px);
  font-weight: 800; line-height: 1; display: grid; place-items: center; z-index: 30;
}
.tcap { left: 0; background: #fff; color: #181b1f; opacity: 0.28; transition: opacity 0.15s; }
.tcap.on { background: var(--accent); box-shadow: 0 0 0 2px rgba(253, 224, 83, 0.45); opacity: 1; }
.tcap.vice { background: #c9ced6; color: #181b1f; opacity: 1; box-shadow: 0 0 0 2px rgba(201, 206, 214, 0.4); }
.pitch .slot.pos-gk { z-index: 14; overflow: visible; }
.pitch .slot.pos-gk .tcap { left: 8px; top: -10px; }
.tm12-badge { left: auto; right: 0; background: var(--accent); color: #181b1f; opacity: 1; }
.trm { right: 0; background: var(--danger); color: #fff; opacity: 0; transition: opacity 0.15s; }
.bslot .trm { right: calc(50% - var(--half-cw)); }
@media (hover: hover) and (pointer: fine) {
  .slot:hover .tcap, .bslot:hover .tcap { opacity: 1; }
  .slot:hover .trm, .bslot:hover .trm { opacity: 1; }
}
@media (hover: none) {
  /* No hover to reveal it on touch, and an invisible-but-tappable button
     risks an accidental removal right where a tap tries to open the photo
     instead — hide it outright. Removing a player is still one tap away
     via the detail modal's own "მოცილება" button. */
  .trm { display: none; }
}

.bpos {
  display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800;
  color: var(--text-muted); letter-spacing: 0.5px;
}

/* ── Team bar + round timeline ────────────────────────────────────────────── */
#view-team {
  position: relative; left: 50%; width: 100vw; margin-left: -50vw;
  padding: 24px 0 0;
  background: #16191c;
}
.team-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: calc(100% - 36px); max-width: 1120px;
  background: #1d2127;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px;
  padding: 16px 20px; margin: 0 auto 14px; flex-wrap: wrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
#view-team.round-transitioning {
  position: relative;
  pointer-events: none;
}
.round-transitioning .team-bar .v,
.round-transitioning .round-chip,
.round-transitioning .slot .tphoto-wrap,
.round-transitioning .bslot .tphoto-wrap,
.round-transitioning .tm12-slot .tphoto-wrap,
.round-transitioning .slot .tname,
.round-transitioning .bslot .tname,
.round-transitioning .tm12-slot .tname,
.round-transitioning .slot .tinfo,
.round-transitioning .bslot .tinfo,
.round-transitioning .tm12-slot .tinfo {
  color: transparent !important;
  border-color: var(--border-strong) !important;
  background: linear-gradient(90deg, var(--bg-panel) 25%, #3b424c 50%, var(--bg-panel) 75%) !important;
  background-size: 200% 100% !important;
  animation: round-transition-shimmer 1.05s linear infinite !important;
}
.round-transitioning .round-chip > *,
.round-transitioning .slot .tphoto-wrap > *,
.round-transitioning .bslot .tphoto-wrap > *,
.round-transitioning .tm12-slot .tphoto-wrap > *,
.round-transitioning .slot .tinfo > *,
.round-transitioning .bslot .tinfo > *,
.round-transitioning .tm12-slot .tinfo > *,
.round-transitioning .slot .tcap,
.round-transitioning .bslot .tcap,
.round-transitioning .tm12-slot .tcap {
  opacity: 0 !important;
}
.round-transitioning .round-chip.current::after { opacity: 0; }
.round-transitioning .slot .tphoto-wrap,
.round-transitioning .bslot .tphoto-wrap,
.round-transitioning .tm12-slot .tphoto-wrap,
.round-transitioning .team-bar .v,
.round-transitioning .round-chip.current {
  position: relative;
}

.pavail {
  position: absolute;
  top: calc(var(--cw, 15cqw) * .56);
  right: calc(50% - var(--cw, 15cqw) * .43);
  z-index: 24;
  width: clamp(17px, calc(var(--cw, 15cqw) * .24), 24px);
  height: clamp(17px, calc(var(--cw, 15cqw) * .24), 24px);
  display: grid;
  place-items: center;
  border: 2px solid #171a1e;
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .48);
  pointer-events: auto;
  cursor: help;
}
.pavail::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  min-width: max-content;
  max-width: 190px;
  padding: 6px 9px;
  color: #f5f7fa;
  background: #101318;
  border: 1px solid #4b5360;
  border-radius: 7px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .55);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  pointer-events: none;
}
.pavail.is-open::after {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
@media (hover: hover) and (pointer: fine) {
  .pavail:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
  }
  #league-detail .league-round-filter:has(.cs-control)::after { display: none; }
}
.pavail:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: 2px;
}
.pavail svg {
  width: 68%;
  height: 68%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pavail.status-injured { color: #fff; background: #d84848; }
.pavail.status-suspended { color: #171a1e; background: #f0a43c; }
.pavail.status-suspended::after {
  width: 86px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
.round-transitioning .slot .tphoto-wrap::after,
.round-transitioning .bslot .tphoto-wrap::after,
.round-transitioning .tm12-slot .tphoto-wrap::after,
.round-transitioning .team-bar .v::after,
.round-transitioning .round-chip.current::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 16px;
  height: 16px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  border-right-color: rgba(253, 224, 83, 0.62);
  border-radius: 50%;
  background: transparent;
  animation: round-mini-loader .72s linear infinite;
  pointer-events: none;
}
.round-transitioning .team-bar .v::after {
  width: 11px;
  height: 11px;
  margin: -7px 0 0 -7px;
}
.round-transitioning .team-bar .v {
  background: transparent !important;
  background-size: auto !important;
  animation: none !important;
}
.round-transitioning .round-chip.current::before {
  width: 13px;
  height: 13px;
  margin: -8px 0 0 -8px;
}
@keyframes round-mini-loader {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .round-transitioning .slot .tphoto-wrap::after,
  .round-transitioning .bslot .tphoto-wrap::after,
  .round-transitioning .tm12-slot .tphoto-wrap::after,
  .round-transitioning .team-bar .v::after,
  .round-transitioning .round-chip.current::before {
    animation: none;
  }
}
.round-transitioning .pitch-toolbar,
.round-transitioning .booster-banner,
.round-transitioning .bench-title,
.round-transitioning .fr-head {
  opacity: .34;
}
.round-transitioning #fr-body {
  opacity: .12;
}
.fr-panel.round-section-loading #fr-body {
  min-height: 110px;
  opacity: .12;
  pointer-events: none;
}
.fr-panel.round-section-loading {
  position: relative;
  overflow: hidden;
}
.fr-panel.round-section-loading::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 72px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-panel) 25%, #3b424c 50%, var(--bg-panel) 75%);
  background-size: 200% 100%;
  animation: round-transition-shimmer 1.05s linear infinite;
  pointer-events: none;
}
@keyframes round-transition-shimmer {
  to { background-position: -200% 0; }
}
.team-brand { display: flex; align-items: center; gap: 10px; }
  .tb-badge {
    width: 46px; height: 46px; border-radius: 50%; background: #111418;
    display: grid; place-items: center;
    box-sizing: border-box; border: 3px solid var(--accent); box-shadow: none;
  }
  .tb-badge img { display: block; width: 34px; height: 26px; object-fit: contain; }
  .tb-name { color: #fff; font-weight: 900; font-size: 18px; min-width: 72px; }
  .tb-name.loading {
    width: 84px;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--bg-panel) 25%, var(--border-strong) 50%, var(--bg-panel) 75%);
    background-size: 200% 100%;
    animation: tb-name-loading 1.1s linear infinite;
  }
  @keyframes tb-name-loading { to { background-position: -200% 0; } }
  .loading-value {
    display: inline-block;
    width: 58px;
    height: 14px;
    border-radius: 4px;
    color: transparent !important;
    background: linear-gradient(90deg, var(--border) 25%, var(--border-strong) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: tb-name-loading 1.1s linear infinite;
  }
  .tb-chip-wide .loading-value { width: 112px; }
.team-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-chip {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-panel); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 8px 14px; min-width: 92px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tb-chip .k { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.35px; white-space: nowrap; }
.tb-chip .v { font-size: 16px; font-weight: 900; color: var(--accent); white-space: nowrap; }
.tb-chip-wide { min-width: 140px; }
.tb-chip-wide .v { font-size: 13px; }
.deadline-day { position: relative; top: 0; }
.deadline-month { position: relative; top: 1px; }

.round-timeline {
  display: flex; gap: 0; overflow-x: auto; padding: 0;
  width: calc(100% - 36px); max-width: 1120px; margin: 0 auto 18px;
  background: #1d2127; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.round-timeline::-webkit-scrollbar { display: none; } /* Chrome/Safari — still scrollable, just not painted */
.round-chip {
  position: relative; flex: 1 1 0; min-width: 0; text-align: center; cursor: pointer;
  background: transparent; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0; padding: 10px 4px 11px; transition: 0.15s;
}
.round-chip:last-child { border-right: 0; }
.round-chip:hover { background: rgba(255, 255, 255, 0.05); }
.round-chip.current {
  z-index: 2;
  background: linear-gradient(180deg, rgba(253, 224, 83, 0.13), rgba(253, 224, 83, 0.035));
  box-shadow:
    inset 0 0 0 1px rgba(253, 224, 83, 0.42),
    0 0 16px rgba(253, 224, 83, 0.18);
}
.round-chip.current:hover {
  background: linear-gradient(180deg, rgba(253, 224, 83, 0.19), rgba(253, 224, 83, 0.06));
}
.round-chip.current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent);
}
.round-chip .rl { font-size: 10px; font-weight: 750; color: var(--text-secondary); white-space: nowrap; }
.round-chip.current .rl { color: var(--accent); }
.round-chip .rp { font-size: 11px; font-weight: 800; margin-top: 3px; }
.round-chip .rp.scored { color: var(--accent); }
.round-chip .rp.empty { color: var(--text-faint); }
.round-chip.open-round {
  z-index: 1;
}
.round-chip .rp.open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 7px 3px;
  border: 1px solid rgba(57, 213, 118, 0.48);
  border-radius: 999px;
  background: rgba(57, 213, 118, 0.13);
  color: #55e28d;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.25px;
}

/* Legacy split-leg primitives are retained for old rendered markup during a
   hot reload; new knockout legs render as independent .round-chip items. */
.round-chip .rp-split { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin-top: 3px; }
.round-chip .rp-leg-col { display: flex; flex-direction: column; align-items: center; padding: 1px 3px; border-radius: 4px; cursor: pointer; }
.round-chip .rp-leg-col:hover { background: rgba(255, 255, 255, 0.08); }
.round-chip .rp-tag { font-size: 8px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.2px; line-height: 1.4; }
.round-chip .rp-leg { font-size: 12px; font-weight: 800; }
.round-chip .rp-leg.scored { color: var(--live); }
.round-chip .rp-leg.empty { color: var(--text-faint); }
.round-chip .rp-sep { font-size: 11px; color: var(--text-faint); margin-bottom: 2px; }
.round-chip.leg-1 { border-left: 1px solid rgba(253, 224, 83, 0.28); }
.round-chip.leg-2 { border-right-color: rgba(253, 224, 83, 0.28); }
.round-total { display: none; }

/* ── Player detail modal ──────────────────────────────────────────────────── */
/* iOS Safari's `vh` unit is unreliable for a fixed-position modal (the
   address bar's show/hide changes what's actually visible), so a card sized
   with max-height:Xvh + its own overflow-y:auto can end up with its bottom
   portion (e.g. the "მოცილება" button) rendered below the real visible
   viewport, undiscoverable without already knowing to scroll. Same fix as
   the account/12th-man modals: make the OUTER overlay scroll instead, and
   let the card grow to its natural content height — iOS's normal page
   scroll reveals the rest reliably. */
#detail-modal.overlay { overflow-y: auto; align-items: flex-start; padding: 24px 16px; }
.modal-card.detail {
  max-width: 440px; max-height: none; margin: auto 0;
  display: flex; flex-direction: column;
}
.detail-head {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  min-height: 130px; padding: 18px; overflow: hidden; flex-shrink: 0;
  /* Exact 50/50 split: CrystalSport gold on the left (behind the name/club
     text), plain white on the right — the photo's own white backdrop then
     just continues into the header instead of showing a mismatched edge. */
  background: linear-gradient(90deg, var(--accent-hover) 0%, var(--accent) 50%, #fff 50%, #fff 100%);
  border-bottom: 1px solid var(--border);
}
.detail-head .modal-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: #fff; color: #181b1f; border-radius: 999px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}
/* Capped to the gold half's own width so a long name wraps onto a second
   line instead of spilling onto the white half once the modal is wider
   than a phone screen (the split is a fixed 50%, but text isn't). */
.detail-id { position: relative; z-index: 1; color: #181b1f; max-width: 47%; }
.detail-name { font-size: 22px; font-weight: 900; line-height: 1.1; }
.detail-sub { margin-top: 4px; font-size: 13px; font-weight: 700; color: rgba(24, 27, 31, 0.85); }
.detail-club { margin-top: 4px; font-size: 13px; color: rgba(24, 27, 31, 0.85); display: flex; align-items: center; gap: 6px; }
.detail-club img { width: 18px; height: 18px; object-fit: contain; }
.detail-selection { margin-top: 6px; font-size: 12px; font-weight: 800; color: rgba(24, 27, 31, 0.75); }
.detail-img {
  width: 112px; height: 112px; object-fit: cover; object-position: center top;
  align-self: center; flex: 0 0 auto; border-radius: 50%;
  margin-right: 35px;
  background: #fff; border: 3px solid #181b1f;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
}

/* Tab strip: Overview / Fixtures / Results */
.detail-tabs {
  display: flex; background: #14171b; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dtab {
  flex: 1; appearance: none; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-weight: 800; font-size: 13px; padding: 12px 8px;
  border-bottom: 2px solid transparent; transition: 0.15s;
}
.dtab:hover { color: var(--text-secondary); }
.dtab.active { color: var(--accent); border-bottom-color: var(--accent); }

.detail-body { padding: 14px 16px 4px; flex: 1; min-height: 0; overflow-y: auto; }
.detail-body.detail-loading { overflow-y: hidden; }

/* Overview tab: 2x2 quick-stat grid */
.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ov-card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 8px; text-align: center;
}
.ov-val { font-size: 20px; font-weight: 900; }
.ov-val.rtg { color: var(--live); }
.ov-val.fixture { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ov-opponent-logo { width: 18px; height: 18px; object-fit: contain; flex: 0 0 18px; }
.ov-label { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

.player-performance-summary {
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
  border-radius: 9px;
  background: var(--bg-panel);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.player-performance-summary strong,
.player-performance-summary span { font-weight: 800; }
.player-performance-summary.low {
  border-left-color: var(--danger);
  border-right-color: var(--danger);
}
.player-performance-summary.average {
  border-left-color: var(--text-secondary);
  border-right-color: var(--text-secondary);
}
.player-performance-summary.high {
  border-left-color: var(--accent);
  border-right-color: var(--accent);
}
.player-performance-summary.elite {
  border-left-color: #4da3ff;
  border-right-color: #4da3ff;
}
.player-performance-summary.low span { color: var(--danger); }
.player-performance-summary.average span { color: var(--text-secondary); }
.player-performance-summary.high span { color: var(--accent); }
.player-performance-summary.elite span { color: #4da3ff; }

/* Match-info bar: opponent badge + score/kickoff */
.match-info {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}
.match-info .mside { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; flex: 1; min-width: 0; }
.match-info .mside img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.match-info .mside.right { flex-direction: row-reverse; text-align: right; }
.match-info .mside span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-info .mscore {
  flex: 0 0 auto; font-weight: 900; font-size: 15px; padding: 4px 10px;
  border-radius: 7px; border: 1px solid var(--border-strong); background: var(--bg-elevated);
  min-width: 52px; text-align: center;
}
.match-info .mbadge {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.match-info .mbadge.upcoming { background: rgba(28, 130, 224, 0.18); color: #6db4ff; }
.match-info .mbadge.live { background: var(--danger); color: #fff; animation: livepulse 1.2s ease-in-out infinite; }
.match-info .mbadge.ft { background: rgba(255, 255, 255, 0.12); color: var(--text-secondary); }

.detail-section-title {
  font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; margin: 12px 0 6px;
}
.stat-rows, .bonus-rows { display: flex; flex-direction: column; gap: 1px; border-radius: 8px; overflow: hidden; }
.srow, .brow {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-panel); padding: 7px 12px; font-size: 13px;
}
.srow .sk, .brow .bk { color: var(--text-secondary); }
.cs-rating-label {
  display: inline-flex; align-items: center; gap: 1px;
  color: var(--text-secondary); white-space: nowrap;
}
.cs-rating-label img {
  width: 26px; height: 18px; object-fit: contain; flex: 0 0 auto;
}
.cs-rating-label span { transform: translateY(1px); }
.srow .sv { font-weight: 800; }
.srow .sv.performance-low { color: var(--danger); }
.srow .sv.performance-average { color: var(--text-secondary); }
.srow .sv.performance-high { color: var(--accent); }
.srow .sv.performance-elite { color: #4da3ff; }
.brow .bv { font-weight: 800; color: var(--accent); }
.brow.total { background: var(--bg-elevated); border-top: 1px solid var(--border-strong); font-size: 14px; }
.brow.total .bk { color: var(--text); font-weight: 800; }
.brow.total .bv { color: var(--accent); font-size: 16px; }
.detail-empty-note {
  text-align: center; color: var(--text-muted); font-size: 12px; padding: 10px 4px 4px;
}
.detail-current-skeleton { padding-top: 1px; }
.detail-current-skeleton .dsk-match,
.detail-current-skeleton .dsk-title,
.detail-current-skeleton .dsk-grid i {
  display: block;
  background: linear-gradient(90deg, var(--bg-panel) 25%, var(--bg-elevated) 50%, var(--bg-panel) 75%);
  background-size: 220% 100%;
  animation: detail-skeleton-pulse 1.15s ease-in-out infinite;
}
.detail-current-skeleton .dsk-match { height: 43px; border-radius: 10px; margin-bottom: 12px; }
.detail-current-skeleton .dsk-title { width: 118px; height: 10px; border-radius: 4px; margin: 0 0 7px; }
.detail-current-skeleton .dsk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.detail-current-skeleton .dsk-grid i { height: 31px; border-radius: 6px; }
@keyframes detail-skeleton-pulse {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-current-skeleton .dsk-match,
  .detail-current-skeleton .dsk-title,
  .detail-current-skeleton .dsk-grid i { animation: none; }
}
.detail-buttons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; padding: 0 0 12px;
}
#dtab-overview { display: flex; flex-direction: column; }
#dtab-overview .detail-buttons { order: 1; }
#dtab-overview .detail-eliminated-note { order: 2; }
#dtab-overview #detail-stats { order: 3; }
#dtab-overview #detail-current-round { order: 4; }
.detail-eliminated-note {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 0 12px; padding: 11px 14px;
  border: 1px solid rgba(224, 85, 59, 0.72); border-radius: 10px;
  background: rgba(224, 85, 59, 0.08); color: #ff8d76;
  font-size: 13px; font-weight: 750; text-align: center;
}
.detail-eliminated-note[hidden] { display: none; }
.detail-eliminated-logo {
  display: inline-grid; place-items: center; flex: 0 0 28px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.24);
}
.detail-eliminated-logo img { width: 20px; height: 20px; object-fit: contain; }
.detail-buttons .btn {
  min-height: 42px; padding: 9px 12px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, #282d34, #20242a);
  color: #f5f6f7; font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.detail-buttons .btn:hover {
  border-color: var(--accent); color: var(--accent);
  transform: translateY(-1px);
}
.detail-buttons .btn.primary {
  background: var(--accent); color: #181b1f; border-color: var(--accent);
  box-shadow: 0 5px 14px rgba(253, 224, 83, 0.14);
}
.detail-buttons .btn.danger {
  grid-column: 1 / -1;
  background: rgba(224, 85, 59, 0.06); color: #ff8d76;
  border-color: rgba(224, 85, 59, 0.72);
}
.detail-buttons .action-mark {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; margin-right: 5px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 11px; font-weight: 950; line-height: 1;
}

/* Player detail: use the extra desktop width instead of building one very
   tall column. Finished rounds can contain 10+ stat rows, so two columns
   keep the whole overview comfortably inside a laptop-height viewport. */
@media (min-width: 700px) {
  #detail-modal.overlay { padding: 20px; align-items: center; }
  .modal-card.detail {
    width: min(600px, calc(100vw - 40px)); max-width: 600px;
    height: min(590px, calc(100dvh - 40px));
  }
  .detail-head { min-height: 104px; padding: 11px 18px; }
  .detail-img { width: 96px; height: 96px; margin-right: 69px; border-width: 2px; }
  .detail-id { max-width: 55%; }
  .detail-name { font-size: 20px; }
  .detail-body { padding: 9px 14px 0; }
  .dtab { padding: 9px 8px; }
  .match-info { padding: 8px 12px; margin-bottom: 10px; }
  .detail-section-title { margin: 8px 0 5px; }
  .stat-rows {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 7px; overflow: visible;
  }
  .srow { min-height: 31px; padding: 5px 10px; border-radius: 6px; }
  .bonus-rows {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 7px; overflow: visible;
  }
  .brow { min-height: 31px; padding: 5px 10px; border-radius: 6px; }
  .brow.total { grid-column: 1 / -1; }
  .detail-buttons {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding-bottom: 14px;
  }
  .detail-buttons .btn {
    min-height: 52px; padding: 12px 16px;
    border-radius: 12px; font-size: 14px;
  }
  .detail-buttons .action-mark { width: 24px; height: 24px; font-size: 12px; }
  .detail-buttons .danger:last-child { grid-column: 1 / -1; }
}

@media (max-width: 699px) {
  #detail-modal.overlay { padding: 8px; }
  .modal-card.detail {
    width: 100%; max-width: 430px; margin: auto 0;
    height: min(620px, calc(100dvh - 16px));
    border-radius: 12px;
  }
  .detail-head { min-height: 112px; padding: 12px 14px; }
  .detail-img { width: 96px; height: 96px; max-width: 49%; margin-right: 33px; border-width: 2px; }
  .detail-name { font-size: 19px; }
  .detail-sub, .detail-club { font-size: 12px; }
  .detail-selection { font-size: 10px; }
  .detail-body { padding: 10px 10px 0; }
  .dtab { padding: 10px 6px; }
  .ov-grid { gap: 6px; margin-bottom: 8px; }
  .ov-card { padding: 10px 6px; }
  .ov-val { font-size: 17px; }
  .match-info { padding: 9px 10px; }
  .stat-rows {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px; overflow: visible;
  }
  .srow {
    min-width: 0; min-height: 46px; padding: 6px 5px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border-radius: 7px;
    text-align: center;
  }
  .srow .sk { font-size: 8.5px; line-height: 1.15; }
  .cs-rating-label { gap: 0; }
  .cs-rating-label img { width: 22px; height: 15px; }
  .srow .sv { font-size: 14px; line-height: 1.2; }
  .detail-section-title { margin-top: 9px; }
  .detail-buttons { gap: 6px; padding-bottom: 10px; }
  .detail-buttons .btn { padding: 9px 12px; }
}

/* Fixtures / Results tabs: grouped by round */
.dtab-panel { padding-bottom: 16px; }
.fx-round-hd {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  color: var(--text-muted); background: var(--bg-panel); border-radius: 8px 8px 0 0;
  padding: 8px 12px; margin-top: 10px;
}
.fx-round-hd:first-child { margin-top: 0; }
.fx-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-top: none;
  padding: 12px; border-radius: 0 0 8px 8px;
}
.fx-team { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; flex: 1; min-width: 0; }
.fx-team img { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.fx-team.right { flex-direction: row-reverse; text-align: right; }
.fx-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-mid {
  flex: 0 0 auto; font-weight: 900; font-size: 14px; padding: 5px 10px; text-align: center;
  min-width: 56px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--bg-panel);
}
.fx-mid.live { border-color: var(--danger); color: var(--danger); animation: livepulse 1.2s ease-in-out infinite; }
.fx-pts-row { display: flex; justify-content: center; margin-top: -1px; }
.fx-pts-pill {
  appearance: none; cursor: pointer; border: 1px solid var(--border-strong);
  background: var(--accent); color: #181b1f; font-weight: 900; font-size: 12px;
  padding: 6px 16px; border-radius: 0 0 8px 8px; border-top: none; width: 100%;
}
.fx-pts-pill:hover { filter: brightness(1.08); }
.fx-expand { padding: 4px 0 2px; }

/* Substitution swap mode */
.swap-source .tphoto-wrap {
  outline: 4px solid var(--info); outline-offset: 3px; opacity: 1;
  box-shadow: 0 0 0 7px rgba(28, 130, 224, 0.24);
}
.swap-source .tname { background: var(--info); color: #fff; }
.swap-target .tphoto-wrap {
  outline: 3px solid var(--info); outline-offset: 3px;
  cursor: pointer;
  animation: swappulse 1s ease-in-out infinite;
}
@keyframes swappulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(28, 130, 224, 0.8); }
  50% { box-shadow: 0 0 0 7px rgba(28, 130, 224, 0); }
}

/* Locked (finished) matchday — hide edit affordances. .tcap is NOT included:
   it only ever renders for the actual captain/vice now (see slotInner()), so
   it's an informational badge, not an edit control — it must stay visible so
   you can still see who was captain after the round is over. */
.slot.locked .trm, .bslot.locked .trm { display: none; }
.detail-buttons .btn { width: 100%; }
.detail-buttons .cap-btn.on { background: var(--accent); color: #181b1f; border-color: var(--accent); }
.detail-buttons .vice-btn.on { background: #c9ced6; color: #181b1f; border-color: #c9ced6; }
.btn.danger { border-color: var(--danger); color: #ff9781; }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ── Bench (4 substitutes) ────────────────────────────────────────────────── */
.bench {
  width: 100%; max-width: var(--team-content-width); margin: 18px auto 0;
  background:
    radial-gradient(ellipse at 50% 108%, rgba(253, 224, 83, 0.08), transparent 48%),
    linear-gradient(180deg, #070809 0%, #101214 58%, #17191b 100%);
  border: 0; border-radius: var(--radius);
  padding: 12px 10px;
}
.bench-title {
  font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px 4px;
}
.bench-slots {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  align-items: end; justify-items: center; container-type: inline-size;
}

.bench.bench-boost-active {
  background:
    radial-gradient(ellipse at 50% 108%, rgba(255, 164, 28, 0.2), transparent 54%),
    linear-gradient(180deg, rgba(50, 32, 5, 0.96) 0%, #111315 58%, #17191b 100%);
  border: 1px solid rgba(253, 224, 83, 0.7);
  box-shadow:
    inset 0 0 26px rgba(255, 157, 24, 0.08),
    0 0 22px rgba(253, 224, 83, 0.12);
}
.bench-boost-active .bench-title {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255, 174, 31, 0.38);
}
.bench-boost-active .bench-title::after {
  content: "  🔥";
}
.bench-boost-active .bslot.filled::before {
  content: "🔥";
  position: absolute;
  top: -5px;
  right: 8%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid #ffe36a;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffcd38, #ed6b18);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.46), 0 0 13px rgba(255, 152, 24, 0.52);
  font-size: 12px;
  line-height: 1;
}
.bench-boost-active .bslot.filled .tphoto-wrap {
  border-color: #ffbd32;
  box-shadow:
    0 0 0 2px rgba(253, 224, 83, 0.3),
    0 0 18px rgba(255, 141, 22, 0.36);
}

/* Fixed to the bottom of the viewport — follows you as you scroll, à la
   Floating "Make transfers" pill. Hidden until there's actually an
   unsaved change (or the round is locked), instead of pinning itself to
   the screen from the moment the page loads. */
.pitch-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 580px; margin: 0 auto; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.pitch-footer-actions { display: flex; align-items: center; gap: 8px; }
.pitch-footer.show { display: flex; }
@media (min-width: 700px) {
  #pitch-footer-opponent {
    left: auto;
    right: 24px;
    width: 270px;
    margin: 0;
    padding: 0;
    bottom: 24px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #opponent-back-btn {
    width: 100% !important;
    min-height: 50px;
    padding: 12px 22px;
    border: 1px solid rgba(253, 224, 83, 0.72);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, #f4c928 100%);
    color: #111418;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.15px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42), 0 0 0 3px rgba(253, 224, 83, 0.1);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  }
  #opponent-back-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(253, 224, 83, 0.14);
  }
  #opponent-back-btn:active { transform: translateY(0) scale(0.98); }
}
/* Room at the bottom of the team view so the fixed bar never covers the
   last row of the pitch/bench while scrolling. */
#view-team { padding-bottom: 76px; }

/* ── Fixtures & Results panel (below the pitch) ───────────────────────────── */
.fr-panel {
  width: 100%; max-width: var(--team-content-width); margin: 18px auto 0;
  background:
    radial-gradient(ellipse at 50% 108%, rgba(253, 224, 83, 0.08), transparent 48%),
    linear-gradient(180deg, #070809 0%, #101214 58%, #17191b 100%);
  border: 0;
  border-radius: var(--radius); overflow: hidden;
}
.fr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 2px solid var(--accent);
  background: transparent;
}
.fr-title { font-weight: 900; font-size: 14px; letter-spacing: 0.4px; text-transform: uppercase; }
.fr-nav { display: flex; align-items: center; gap: 10px; }
.fr-round { display:grid; justify-items:center; line-height:1.15; font-weight:800; font-size:13px; color:var(--accent); min-width:90px; text-align:center; }
.fr-round small { margin-top:3px; color:var(--text-muted); font-size:9px; font-weight:600; white-space:nowrap; }
.fr-arrow {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text); font-size: 15px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.fr-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
.fr-arrow:disabled { opacity: 0.3; cursor: default; }
.fr-date {
  padding: 8px 16px; font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-align: center; background: transparent;
  border-bottom: 1px solid var(--border);
}
.fr-match {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.fr-side {
  display: flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0;
  font-weight: 700;
}
.fr-side.right { flex-direction: row-reverse; text-align: right; }
.fr-side img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.fr-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-mid {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.fr-scoreline { display: flex; align-items: center; gap: 6px; }
.fr-score {
  min-width: 26px; text-align: center; padding: 3px 0; border-radius: 5px;
  background: var(--bg-panel); border: 1px solid var(--border-strong);
}
.fr-score.live { color: var(--live); border-color: var(--live); }
.fr-live-clock { color: var(--live); font-size: 11px; line-height: 1; }
.fr-time { color: var(--text-muted); font-size: 12px; min-width: 60px; text-align: center; }
.fr-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.fr-match.clickable { cursor: pointer; }
.fr-match.clickable:hover { background: rgba(255, 255, 255, 0.03); }
.fr-chevron {
  flex: 0 0 auto; background: none; border: none; color: var(--text-muted);
  font-size: 15px; cursor: pointer; padding: 0 0 0 4px; line-height: 1;
}
.fr-expand {
  padding: 10px 16px 14px; background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}
.fr-events { display: flex; gap: 14px; }
.fr-events-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fr-events-col.right { align-items: flex-end; text-align: right; }
.fr-event-row {
  display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 600;
}
.fr-events-col.right .fr-event-row { flex-direction: row-reverse; }
.fr-events-team {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--accent); margin-bottom: 2px;
}

/* Player names in the minute-by-minute timeline (goal scorer + assist,
   or "Out ➜ In" for subs) run noticeably longer than the old icon-only
   summary — stack the two columns on narrow screens instead of squeezing
   both into half-width, which overlapped the two sides' text. Once stacked,
   both columns read left-to-right the same way, so each needs its own
   team-name header (.fr-events-team) — without it the two teams' events
   just blend into one undifferentiated list. */
@media (max-width: 480px) {
  .fr-events { flex-direction: column; gap: 10px; }
  .fr-events-col.right { align-items: flex-start; text-align: left; }
  .fr-events-col.right .fr-event-row { flex-direction: row; }
}
.fr-meta {
  font-size: 11px; color: var(--text-muted); text-align: center;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.fr-detail-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:-10px -16px 14px; padding:0 10px; border-bottom:1px solid var(--border); }
.fr-detail-tab { min-width:0; padding:11px 4px 9px; border:0; border-bottom:2px solid transparent; background:none; color:var(--text-muted); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.fr-detail-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.fr-detail-panel { display:none; }
.fr-detail-panel.active { display:block; }
.fr-stats-head,.fr-stat-row { display:grid; grid-template-columns:minmax(70px,1fr) minmax(130px,1.5fr) minmax(70px,1fr); align-items:center; gap:10px; text-align:center; }
.fr-stats-head { padding:8px 10px 12px; color:var(--accent); font-size:12px; font-weight:900; }
.fr-stats-head span:first-child { grid-column:1; }
.fr-stats-head span:last-child { grid-column:3; }
.fr-stats-head span:first-child,.fr-stat-row strong:first-child { text-align:left; }
.fr-stats-head span:last-child,.fr-stat-row strong:last-child { text-align:right; }
.fr-stats-list { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.fr-stat-row { min-height:38px; padding:7px 10px; border-bottom:1px solid var(--border); font-size:12px; }
.fr-stat-row:last-child { border-bottom:0; }
.fr-stat-row:nth-child(odd) { background:rgba(255,255,255,.025); }
.fr-stat-row span { color:var(--text-muted); font-size:11px; }
.fr-lineup-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:var(--accent); font-size:11px; font-weight:900; }
.fr-lineup-head span { display:flex; align-items:center; gap:5px; }
.fr-lineup-head img { width:18px; height:18px; object-fit:contain; }
.fr-lineup-pitch { position:relative; aspect-ratio:16/9.2; overflow:hidden; border:1px solid rgba(253,224,83,.75); border-radius:6px; background:linear-gradient(90deg,transparent 49.85%,rgba(253,224,83,.45) 49.85%,rgba(253,224,83,.45) 50.15%,transparent 50.15%),radial-gradient(circle at 50% 50%,transparent 0 11%,rgba(253,224,83,.45) 11.2% 11.7%,transparent 11.9%),linear-gradient(180deg,#080a0b,#151817); box-shadow:inset 0 0 45px rgba(253,224,83,.035); }
.fr-lp { position:absolute; left:var(--dx); top:var(--dy); transform:translate(-50%,-50%); width:76px; display:grid; justify-items:center; z-index:2; }
.fr-lp-photo { width:38px; height:38px; overflow:hidden; border:2px solid var(--accent); border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.45); }
.fr-lp-photo img { width:100%; height:100%; object-fit:cover; }
.fr-lp-info { position:relative; display:block; max-width:100%; margin-top:-2px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.fr-lp-name { display:block; max-width:64px; padding:2px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--accent); border-radius:3px; background:#070809; color:#fff; font-size:9px; font-weight:800; text-align:center; }
.fr-lp-name i { margin-right:3px; color:var(--accent); font-style:normal; font-weight:700; }
.fr-lp b { position:absolute; right:-18px; top:-12px; min-width:25px; padding:2px 4px; border-radius:3px; background:var(--accent); color:#111; font-size:9px; text-align:center; }
.fr-lp b.high,.fr-lp b.mid,.fr-lp b.low { background:var(--accent); color:#111; }
.fr-lp b.none { background:#070809; color:var(--accent); border:1px solid var(--accent); }
.fr-lp-motm { position:absolute; left:8px; top:-5px; display:grid; place-items:center; width:22px; height:22px; border:2px solid #fff; border-radius:50%; background:var(--info); color:#fff; font-size:14px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); z-index:4; }
.fr-lp.motm b,.fr-lp.motm b.high,.fr-lp.motm b.mid,.fr-lp.motm b.low { background:var(--info); color:#fff; }
.fr-pitch-box,.fr-goal-box { position:absolute; display:block; border:1px solid rgba(253,224,83,.48); z-index:0; }
.fr-pitch-box.home { left:-1px; top:29%; width:13%; height:42%; border-left:0; }
.fr-pitch-box.away { right:-1px; top:29%; width:13%; height:42%; border-right:0; }
.fr-goal-box.home { left:-1px; top:39%; width:6%; height:22%; border-left:0; }
.fr-goal-box.away { right:-1px; top:39%; width:6%; height:22%; border-right:0; }
.fr-pitch-box::after { content:""; position:absolute; top:50%; width:24px; height:46%; border:1px solid rgba(253,224,83,.48); transform:translateY(-50%); }
.fr-pitch-box.home::after { right:-25px; border-left:0; border-radius:0 50% 50% 0; }
.fr-pitch-box.away::after { left:-25px; border-right:0; border-radius:50% 0 0 50%; }
.fr-subs { margin-top:12px; overflow:hidden; border:1px solid var(--border); border-radius:8px; background:#0b0d0e; }
.fr-subs-title { padding:8px 12px; border-bottom:1px solid var(--border); background:rgba(253,224,83,.08); color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.5px; text-align:center; text-transform:uppercase; }
.fr-sub-row { display:grid; grid-template-columns:1fr 1fr; min-height:48px; border-bottom:1px solid var(--border); }
.fr-sub-row:last-child { border-bottom:0; }
.fr-sub-side { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:8px; padding:5px 10px; }
.fr-sub-side + .fr-sub-side { border-left:1px solid var(--border); }
.fr-sub-side.away { grid-template-columns:auto minmax(0,1fr) 34px; text-align:right; }
.fr-sub-side.away img,.fr-sub-side.away .fr-sub-photo-fallback { grid-column:3; grid-row:1; }
.fr-sub-side.away .fr-sub-copy { grid-column:2; grid-row:1; }
.fr-sub-side.away b { grid-column:1; grid-row:1; }
.fr-sub-side img,.fr-sub-photo-fallback { width:36px; height:36px; object-fit:cover; object-position:top; overflow:hidden; border:2px solid var(--accent); border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.fr-sub-copy { min-width:0; display:grid; gap:2px; }
.fr-sub-copy strong { overflow:hidden; color:#fff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.fr-sub-copy span { overflow:hidden; color:var(--text-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.fr-sub-side b { padding:2px 4px; border-radius:3px; background:var(--accent); color:#111; font-size:10px; }
.fr-sub-side.motm > b { background:var(--info); color:#fff; }
.fr-sub-motm {
  position:absolute; left:35px; top:1px; display:grid; place-items:center;
  width:19px; height:19px; border:2px solid #fff; border-radius:50%;
  background:var(--info); color:#fff; font-size:12px; line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)); z-index:3;
}
.fr-sub-side.away .fr-sub-motm { left:auto; right:35px; }
.fr-sub-side.empty { min-height:46px; }
@media (min-width:601px) {
  .fr-lp { width:81px; }
  .fr-lp-photo { width:43px; height:43px; }
  .fr-lp-name { max-width:69px; padding:3px 5px; font-size:10px; }
  .fr-lp b { right:-20px; top:-13px; min-width:30px; padding:3px 5px; font-size:10px; }
}
@media (max-width:600px) {
  .fr-detail-tab { font-size:10px; }
  .fr-stats-head,.fr-stat-row { grid-template-columns:54px minmax(105px,1fr) 54px; gap:5px; }
  .fr-stat-row { padding-inline:7px; }
  .fr-lineup-pitch { width:calc(100% + 20px); margin-left:-10px; aspect-ratio:.55; background:linear-gradient(180deg,transparent 49.85%,rgba(253,224,83,.45) 49.85%,rgba(253,224,83,.45) 50.15%,transparent 50.15%),radial-gradient(circle at 50% 50%,transparent 0 10%,rgba(253,224,83,.45) 10.2% 10.7%,transparent 10.9%),linear-gradient(180deg,#080a0b,#151817); }
  .fr-lp { left:var(--mx); top:var(--my); }
  .fr-lp { width:64px; }
  .fr-lp-photo { width:44px; height:44px; }
  .fr-lp-name { max-width:62px; }
  .fr-lp-name,.fr-lp b { font-size:9.5px; }
  .fr-lp b { right:-8px; top:-12px; min-width:24px; padding:2px 3px; }
  .fr-lp-motm { left:2px; top:-5px; width:21px; height:21px; font-size:13px; }
  .fr-subs { margin-top:10px; }
  .fr-subs-title { padding:10px; font-size:11px; }
  .fr-sub-row { min-height:58px; }
  .fr-sub-side { grid-template-columns:38px minmax(0,1fr) auto; gap:6px; padding:5px 6px; }
  .fr-sub-side.away { grid-template-columns:auto minmax(0,1fr) 38px; }
  .fr-sub-side img,.fr-sub-photo-fallback { width:42px; height:42px; }
  .fr-sub-copy strong { font-size:10.5px; }
  .fr-sub-copy span { font-size:8.5px; }
  .fr-sub-side b { font-size:9px; }
  .fr-sub-motm { left:34px; top:1px; width:19px; height:19px; }
  .fr-sub-side.away .fr-sub-motm { left:auto; right:34px; }
  .fr-pitch-box.home { left:calc(29% - 5px); top:0; width:calc(42% + 10px); height:calc(13% - 20px); border:1px solid rgba(253,224,83,.58); }
  .fr-pitch-box.away { left:calc(29% - 5px); right:auto; top:auto; bottom:0; width:calc(42% + 10px); height:calc(13% - 20px); border:1px solid rgba(253,224,83,.58); }
  .fr-goal-box.home { left:39%; top:0; width:22%; height:6%; border:1px solid rgba(253,224,83,.58); }
  .fr-goal-box.away { left:39%; right:auto; top:auto; bottom:0; width:22%; height:6%; border:1px solid rgba(253,224,83,.58); }
  .fr-pitch-box::after { left:27%; top:auto; width:46%; height:24px; border:1px solid rgba(253,224,83,.48); transform:none; }
  .fr-pitch-box.home::after { right:auto; bottom:-25px; border-top:0; border-left:1px solid rgba(253,224,83,.48); border-radius:0 0 50% 50%; }
  .fr-pitch-box.away::after { left:27%; top:-25px; bottom:auto; border-right:1px solid rgba(253,224,83,.48); border-bottom:0; border-radius:50% 50% 0 0; }
}

/* ── Modal (player picker) ────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62);
  display: none; align-items: center; justify-content: center; z-index: 90; padding: 16px;
  backdrop-filter: blur(2px);
}
.overlay.show { display: flex; }
.modal-card {
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 14px; width: 100%; max-width: 420px; max-height: 72vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 800;
}
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.modal-close:hover { color: var(--danger); }
.modal-card .player-list { max-height: none; padding: 12px; }
#picker-modal .modal-card { height: min(72vh, 620px); }
#picker-modal .player-list {
  flex: 1 1 auto;
  min-height: 0;
}

.picker-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 0;
}
.picker-select-row { display: flex; gap: 8px; min-width: 0; }
.picker-select-row select { flex: 1 1 50%; min-width: 0; }
.picker-filters #picker-search { width: 100%; min-width: 0; }

/* ── Player picker list rows ──────────────────────────────────────────────── */
.player-list { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.player-list .player-row { content-visibility: auto; contain-intrinsic-size: 58px; }
.picker-opening { min-height: 150px; display:grid; place-items:center; color:var(--text-muted); font-size:13px; }
.player-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer;
}
.player-row:hover { border-color: var(--border-strong); }
.player-row.selected { border-color: var(--accent); background: rgba(253, 224, 83, 0.06); }
.player-row.locked { opacity: 0.52; cursor: not-allowed; }
.player-row.locked:hover { border-color: var(--border); }
.picker-info {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  background: transparent;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.picker-info:hover,
.picker-info:focus-visible { color: var(--accent); outline: none; }
.picker-lock {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); font-size: 13px;
}
.player-row .nm {
  font-weight: 700; line-height: 1.18; overflow-wrap: anywhere;
}
.player-row .tm {
  min-width: 0; font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.player-row .pmeta { flex: 1 1 auto; min-width: 0; }
.player-row .row-ph {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--bg-panel-2); flex: 0 0 auto;
}
.player-row .row-logo { width: 15px; height: 15px; object-fit: contain; flex: 0 0 auto; }
.player-row .pr { font-weight: 800; color: var(--accent); }
.player-row .pr-col {
  margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 2px;
}
.player-row .pts { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.selected-box { background: var(--bg-panel); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 12px; min-height: 120px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 10px; font-size: 13px;
}
.chip .x { cursor: pointer; color: var(--text-muted); }
.chip .x:hover { color: var(--danger); }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.muted { color: var(--text-muted); }
.notice {
  margin: 14px 0; padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(28, 130, 224, 0.1); border: 1px solid rgba(28, 130, 224, 0.35);
  color: #9ccaf5; font-size: 13px;
}
.notice.demo { background: rgba(253, 224, 83, 0.08); border-color: rgba(253, 224, 83, 0.3); color: var(--accent-soft); }
.site-footer {
  margin-top: 36px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-faint);
}
.site-footer-main {
  width: min(100% - 36px, 1120px);
  min-height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 42px;
}
.site-footer-logo {
  display: block;
  width: 142px;
  height: auto;
}
.site-footer-about {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.site-footer-about:hover { color: var(--accent); }
.site-footer-socials {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-footer-socials a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  transition: color .15s, border-color .15s, background .15s;
}
.site-footer-socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(253, 224, 83, .08);
}
.site-footer-socials svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.site-footer-copy {
  padding: 15px max(18px, calc((100% - 1120px) / 2));
  border-top: 1px solid var(--border);
  background: var(--bg);
  font-size: 11px;
}
@media (min-width: 700px) {
  .site-footer-main {
    width: calc(100% - 36px);
    max-width: 1120px;
    padding-inline: 18px;
  }
  .site-footer-copy {
    padding-inline: max(18px, calc((100% - 1120px) / 2 + 18px));
  }
}
@media (max-width: 699px) {
  .site-footer-main {
    width: min(100% - 28px, 1180px);
    min-height: 76px;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 0;
  }
  .site-footer-logo { width: 125px; }
  .site-footer-about { font-size: 12px; }
  .site-footer-socials {
    width: 100%;
    margin-left: 0;
  }
  .site-footer-copy { padding: 14px; }
}
.spacer { height: 20px; }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--bg-panel-2); border: 1px solid var(--accent);
  color: var(--text); padding: 12px 18px; border-radius: 999px;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: 0.25s;
  font-weight: 700; z-index: 100;
}
.toast.show { opacity: 1; bottom: 30px; }

@media (max-width: 720px) {
  .picker { grid-template-columns: 1fr; }
  .brand { font-size: 17px; }
  .brand-logo { width: 160px; }
  .topbar-socials { display: none; }
  .account-menu { margin-left: auto; }
}

/* Mobile readability: enlarge the complete interface uniformly by 5%.
   Mobile browsers reflow the layout against the effective zoomed viewport,
   so this remains viewport-wide without changing individual proportions. */
@media (max-width: 699px) {
  /* Keep native vertical scrolling, but do not paint the mobile scroll
     indicator over the app's edge. */
  html, body, body * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  body {
    zoom: 1.05;
  }

}

/* Large external monitors: the whole app is designed mobile-first, so on a
   wide screen every element (text, buttons, bars, pitch) looks small and
   marooned in the middle. Scale the ENTIRE UI up uniformly with `zoom` — one
   rule enlarges everything proportionally at once, keeping every layout/
   spacing relationship intact (unlike bumping individual max-widths). The
   breakpoints sit above laptop widths (≤1536px), so laptops and phones —
   which already look right — are deliberately left untouched. */
/* `zoom` scales the WHOLE subtree, modals included. Every modal except the
   picker looks fine at the enlarged size — only the picker (a dense list of
   many rows) ends up too large on big monitors, so counter-zoom just that
   one modal back down by the exact inverse factor. */
@media (min-width: 1600px) {
  body { zoom: 1.2; }
  #picker-modal { zoom: 0.9583; }
  #picker-modal .modal-card { max-width: 460px; }
  /* .bt-tooltip lives outside body specifically to dodge this same zoom
     (see toggleBoosterTooltip's comment) — scale it up by hand to match,
     or it reads as oddly small next to everything else that got bigger. */
  .bt-tooltip { font-size: 15px; padding: 14px 17px; max-width: 300px; }
}
@media (min-width: 2400px) {
  body { zoom: 1.35; }
  #picker-modal { zoom: 0.9; }
  #picker-modal .modal-card { max-width: 440px; }
  .bt-tooltip { font-size: 19px; padding: 17px 20px; max-width: 360px; }
}

@media (min-width: 700px) {
  .pitch { aspect-ratio: 1.68 / 1; }
  .pitch .box.top { width: 25%; }
  .pitch .box.bottom { width: 31%; }
  .pitch .slot, .pitch .tm12-slot { --cw: 10.5cqw !important; }
  .pitch .tm12-slot { left: calc(13% + 10px); top: calc(11% - 5px); }
  .pitch .slot.pos-fwd { transform: translate(-50%, calc(-50% - 3px)); }
  /* Move the complete outfield unit together in every formation. This
     creates room above the keeper without collapsing spacing between rows. */
  .pitch .slot:not(.pos-gk) {
    transform: translate(-50%, calc(-50% - 14px));
  }
  .pitch .slot.pos-def {
    transform: translate(-50%, calc(-50% - 16px));
  }
  .pitch .tcap { left: 2px; }
  .pitch .slot.pos-gk .tcap { left: 12px; top: -12px; }
  .bench .bslot { --cw: 11cqw; --half-cw: 5.5cqw; }
}

@media (min-width: 481px) and (max-width: 699px) {
  .pitch { aspect-ratio: 0.88 / 1; }
}

@media (max-width: 699px) {
  /* Mobile WebKit/Chrome can stop honoring sticky positioning when the page
     is uniformly zoomed. Keep the complete brand/account bar permanently
     attached to the viewport and reserve its original place in the layout. */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; width: 100%;
  }
  .topbar + main { padding-top: 122px; }
  .tabs {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    height: 58px;
    z-index: 39;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0;
    padding: 0 8px;
    background: var(--bg);
    box-shadow: 0 1px 0 var(--border);
    transform: translateZ(0);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tabs::-webkit-scrollbar { display: none; }

  /* Give the useful identity column room on narrow phones. The previous
     desktop-sized gaps/badges squeezed long names and club names into a thin
     strip even though the picker itself still had unused edge padding. */
  #picker-modal { padding: 6px; }
  #picker-modal .modal-card {
    max-width: none; height: min(82dvh, 720px); max-height: min(82dvh, 720px); border-radius: 12px;
  }
  #picker-modal .modal-head { padding: 12px 13px; }
  #picker-modal .picker-filters,
  #picker-modal .picker-select-row { gap: 6px; }
  #picker-modal .picker-filters { padding: 10px 8px 0; }
  #picker-modal #picker-team,
  #picker-modal #picker-price {
    padding-left: 9px; padding-right: 25px;
    font-size: 13px; letter-spacing: -0.1px;
  }
  #picker-modal .modal-card .player-list { padding: 9px 8px; }
  #picker-modal .player-row { gap: 7px; padding: 9px 8px; }
  #picker-modal .player-row .row-ph { width: 38px; height: 38px; }
  #picker-modal .player-row .pos { padding: 2px 6px; font-size: 9.5px; }
  #picker-modal .player-row .nm { font-size: 13px; }
  #picker-modal .player-row .tm { margin-top: 3px; font-size: 11px; }
  #picker-modal .player-row .pr-col { min-width: 64px; }
  #picker-modal .player-row .pr { font-size: 14px; white-space: nowrap; }
  #picker-modal .player-row .pts { font-size: 10px; white-space: nowrap; }
  #picker-modal .picker-lock { width: 22px; height: 22px; font-size: 11px; }

  #view-leaderboard .leaderboard-me-pin,
  #league-detail .leaderboard-me-pin {
    grid-template-columns: 44px minmax(0, 1fr) 68px 76px;
    min-height: 58px; padding: 8px 6px;
  }
  #view-leaderboard .leaderboard-me-pin .lb-pin-team,
  #league-detail .leaderboard-me-pin .lb-pin-team,
  #view-leaderboard .leaderboard-me-pin .lb-pin-points,
  #league-detail .leaderboard-me-pin .lb-pin-points {
    padding-left: 6px;
    padding-right: 6px;
  }
  #view-leaderboard .leaderboard-load-more,
  #league-detail .leaderboard-load-more { padding: 10px; }

  #view-leaderboard .panel { padding: 16px 10px; }
  #view-leaderboard .table-wrap { overflow-x: visible; }
  #view-leaderboard table.data {
    min-width: 0; width: 100%; table-layout: fixed;
  }
  #view-leaderboard table.data th,
  #view-leaderboard table.data td {
    padding: 13px 6px;
  }
  #view-leaderboard table.data th {
    font-size: 9px; line-height: 1.2; white-space: normal;
  }
  #view-leaderboard table.data th:nth-child(1),
  #view-leaderboard table.data td:nth-child(1) { width: 44px; text-align: center; }
  #view-leaderboard table.data th:nth-child(3),
  #view-leaderboard table.data td:nth-child(3) { width: 68px; }
  #view-leaderboard table.data th:nth-child(4),
  #view-leaderboard table.data td:nth-child(4) { width: 76px; }
  #view-leaderboard table.data td:nth-child(2) { min-width: 0; }
  #view-leaderboard table.data td:nth-child(2) strong {
    display: block; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 14px;
  }
  #view-leaderboard table.data td.num { font-size: 14px; font-weight: 900; }
  #view-leaderboard .rank { width: 32px; height: 32px; font-size: 13px; }
  #view-leaderboard .points { color: var(--accent); font-size: 15px; }

  /* Friend-league standings use the same compact mobile grid as the main
     leaderboard: no horizontal scrolling, identical columns and rank tiles. */
  #league-detail .league-standings-panel { padding: 16px 10px; }
  #league-detail .league-standings-panel .table-wrap { overflow-x: visible; }
  #league-detail .league-standings-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }
  #league-detail .league-standings-table th,
  #league-detail .league-standings-table td {
    padding: 13px 6px;
  }
  #league-detail .league-standings-table th {
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
  }
  #league-detail .league-standings-table th:nth-child(1),
  #league-detail .league-standings-table td:nth-child(1) {
    width: 44px;
    text-align: center;
  }
  #league-detail .league-standings-table th:nth-child(3),
  #league-detail .league-standings-table td:nth-child(3) { width: 68px; }
  #league-detail .league-standings-table th:nth-child(4),
  #league-detail .league-standings-table td:nth-child(4) { width: 76px; }
  #league-detail .league-standings-table td:nth-child(2) { min-width: 0; }
  #league-detail .league-member-cell { min-width: 0; }
  #league-detail .league-member-cell strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }
  #league-detail .league-standings-table td.num {
    font-size: 14px;
    font-weight: 900;
  }
  #league-detail .league-standings-table .rank {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  #league-detail .league-standings-table .points {
    color: var(--accent);
    font-size: 15px;
  }
  #league-detail .league-remove-member {
    padding: 3px 5px;
    font-size: 9px;
  }

  /* On a phone the desktop trapezoid becomes too narrow at the top while
     the field markings still use the pitch's rectangular coordinate space.
     The mobile view crops a wider, almost rectangular field;
     doing the same keeps every marking aligned and gives the players room. */
  .pitch::before, .pitch::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .pitch::after { inset: 1px; }
  .pitch .slot, .pitch .tm12-slot { --cw: 17.2cqw !important; }
  .pitch .slot.row-five { left: var(--mobile-x) !important; }
  .pitch .box.top,
  .pitch .box.bottom {
    width: 34%;
    height: 11%;
  }
  .fr-match {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 6px;
    padding: 10px 24px 10px 10px;
  }
  .fr-side { width: 100%; justify-content: flex-end; gap: 5px; text-align: right; }
  .fr-side.right { justify-content: flex-end; text-align: left; }
  .fr-side img { width: 18px; height: 18px; }
  .fr-side span { font-size: 11px; }
  .fr-mid { width: 64px; justify-content: center; }
  .fr-scoreline { gap: 4px; }
  .fr-score { min-width: 25px; }
  .fr-time { min-width: 64px; }
  .fr-chevron {
    position: absolute; right: 5px; top: 50%;
    transform: translateY(-50%); padding: 0;
  }

  /* The desktop summary repeats information that is already available in
     the round strip. This card is removed on mobile as well, leaving the
     useful navigation and the team itself above the fold. */
  .team-bar { display: none; }
  #view-team { padding-top: 8px; }
  .round-timeline {
    width: 100%; margin-bottom: 8px; border-left: 0; border-right: 0;
    border-radius: 0;
  }
  .round-chip {
    flex: 0 0 var(--mobile-round-chip-width, 104px);
    min-width: var(--mobile-round-chip-width, 104px);
    padding: 7px 10px 8px;
  }
  .round-chip .rl { font-size: 10px; line-height: 1.15; }
  .round-chip .rp-tag { margin-top: 2px; font-size: 7px; line-height: 1.1; }
  .round-chip .rp { margin-top: 3px; font-size: 12px; line-height: 1.15; }
  .round-total {
    position: sticky; right: 0; z-index: 4;
    display: flex; flex: 0 0 116px; min-width: 116px;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 7px 10px 8px;
    background: #1d2127;
    border-left: 2px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
  }
  .round-total .rl {
    color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap;
    line-height: 1.15; text-align: center;
  }
  .round-total .rt-value {
    margin-top: 3px; color: var(--accent);
    font-size: 13px; font-weight: 950; white-space: nowrap;
  }
  .round-total.round-transfer-summary {
    flex: 0 0 210px;
    min-width: 210px;
    display: grid;
    grid-template-columns: 1.35fr 0.9fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 5px 7px;
    padding: 6px 8px;
  }
  .rts-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
  }
  .rts-k {
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 750;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .rts-item strong {
    display: block;
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: var(--accent);
    font-size: 10px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #pitch-toolbar-editable {
    display: grid;
    grid-template-columns: 40px minmax(72px, 0.8fr) minmax(128px, 1.2fr) 40px;
    align-items: center; gap: 5px;
    width: 100%; margin: 0 0 8px; padding: 0 8px;
    background: transparent; border: 0; box-shadow: none;
  }
  #open-boosters { grid-column: 1; grid-row: 1; justify-self: start; }
  #formation-picker { grid-column: 2; grid-row: 1; justify-self: start; width: 100%; }
  #card-display-mode-control { grid-column: 3; grid-row: 1; justify-self: end; width: 100%; }
  #autofill-squad { grid-column: 4; grid-row: 1; justify-self: end; }
  #open-boosters, #autofill-squad { width: 38px; height: 38px; font-size: 20px; }
  .formation-trigger, #card-display-mode-control .cs-trigger { padding: 6px 7px; }
  .formation-popover {
    width: min(306px, calc(100vw - 24px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .topbar .brand { margin-left: -11px; }
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    margin: 0; padding: 0 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto; min-width: max-content; white-space: nowrap;
    padding: 11px 7px; font-size: 12px; text-align: center;
  }

  .pitch-wrap {
    margin-left: 0; margin-right: 0; width: 100%;
    padding: 0; border-radius: 0;
  }
  .pitch-toolbar { margin-bottom: 8px; }
  .pitch {
    aspect-ratio: 0.84 / 1;
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    filter: none;
  }

  /* The pitch/bench are the one thing worth full-bleeding on a phone: every
     extra px of container width becomes real cqw on every player card,
     directly fighting name truncation. Bleeds out of both the .panel and
     .container padding (18px each) that would otherwise eat ~70px total.
     Scoped to .pitch/.bench specifically (not the whole .pitch-wrap) — the
     toolbar's hint text and formation/display-mode dropdowns are NOT player
     cards and need their normal padding, or they run edge-to-edge with no
     breathing room and visually overflow the screen. */
  .pitch, .bench { margin-left: 0; margin-right: 0; width: 100%; }

  /* iOS Safari auto-zooms the whole page in when a focused input/select has
     a font-size under 16px, and that zoom doesn't reliably reset once you
     tap away — exactly the "everything's huge now" the picker search box
     and formation/team dropdowns were triggering. 16px is the threshold
     below which Safari zooms; nothing on the page should go under it,
     including .display-mode-select's own smaller 12px override. */
  select, input, .display-mode-select { font-size: 16px; }
}