/* ============================================================
   BUILD THE PERFECT XI — interactive tool styles
   ============================================================ */

/* ---------- HERO ---------- */
.xi-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad) 40px;
}
.xi-hero__inner { max-width: 880px; }
.xi-hero__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 24px 0 24px;
}
.xi-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  color: var(--pitch);
}
.xi-hero__lede {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.5vw, 22px);
  color: var(--mute);
  max-width: 60ch;
  line-height: 1.45;
}

.xi-modes {
  display: flex;
  gap: 0;
  margin-top: 36px;
  border: 1px solid var(--rule);
  width: fit-content;
}

/* ---------- DAILY CHALLENGE CTA ---------- */
.xi-daily {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 14px 0 4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,196,0,0.16), rgba(255,196,0,0.05));
  border: 1.5px solid var(--gold, #ffc400);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.xi-daily:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,196,0,0.18); }
.xi-daily__star { font-size: 22px; flex-shrink: 0; }
.xi-daily__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.xi-daily__title { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; color: var(--gold, #ffc400); }
.xi-daily__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--mute-2, #8a96a0); }
.xi-daily__go {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--gold, #ffc400);
  padding: 8px 12px; border-radius: 6px; flex-shrink: 0;
}
/* Played today → locked until 12 AM ET. */
.xi-daily--locked {
  opacity: 0.62;
  background: rgba(255,255,255,0.03);
  border-color: var(--rule);
  cursor: default;
}
.xi-daily--locked:hover { transform: none; box-shadow: none; }
.xi-daily--locked .xi-daily__star { filter: grayscale(0.7); }
.xi-daily--locked .xi-daily__title { color: var(--mute-2, #8a96a0); }
.xi-daily--locked .xi-daily__go { background: transparent; color: var(--mute-2, #8a96a0); font-size: 18px; }
/* No restart mid-attempt. */
body.is-daily #resetBtn { display: none; }
/* The Daily has no skips/swaps — hide those controls while in it. */
body.is-daily .xi-resources,
body.is-daily #swapBtnTop { display: none; }
/* Expert toggle: hidden in H2H (1v1 stays plain), but SHOWN in Daily (×1.10 opt-in) */
body.is-h2h .xi-expert { display: none; }

/* Hero kickoff pill — countdown to June 11, flips to LIVE during the tournament */
.kickoff-pill {
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0;
  padding: 7px 14px;
  background: rgba(255,196,0,0.12);
  border: 1px solid var(--gold, #ffc400);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--gold, #ffc400);
  width: fit-content;
}
.kickoff-pill--live {
  background: rgba(255,77,109,0.12);
  border-color: #ff4d6d;
  color: #ff4d6d;
  animation: kickoffPulse 2s ease-in-out infinite;
}
@keyframes kickoffPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.65; } }

/* Head-to-head CTA (crimson, to distinguish from the gold Daily) */
.xi-daily--h2h { border-color: #ff4d6d; background: linear-gradient(135deg, rgba(255,77,109,0.16), rgba(255,77,109,0.05)); }
.xi-daily--h2h .xi-daily__title { color: #ff4d6d; }
.xi-daily--h2h .xi-daily__go { background: #ff4d6d; color: #fff; }
.xi-daily--h2h:hover { box-shadow: 0 6px 18px rgba(255,77,109,0.18); }
/* H2H verdict + challenge-link row on the complete screen */
.h2h-row {
  width: 100%;
  margin: 4px auto 14px;
  padding: 14px;
  background: rgba(255,77,109,0.08);
  border: 1px solid rgba(255,77,109,0.4);
  border-radius: 10px;
  text-align: center;
}
.h2h-row__verdict {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 15px; line-height: 1.3;
  color: var(--bone, #e8e6df);
}
.h2h-row .xi-btn { width: 100%; }
.h2h-row .xi-btn + .xi-btn { margin-top: 8px; }
.xi-btn--crimson { background: #ff4d6d; color: #fff; border-color: #ff4d6d; }
.xi-btn--crimson:hover { background: #ff6580; }
.xi-mode {
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule);
  padding: 14px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mute);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.xi-mode:last-child { border-right: none; }
.xi-mode:hover { color: var(--bone); }
.xi-mode--active {
  background: var(--pitch);
  color: var(--ink);
  font-weight: 700;
}
.xi-mode--locked {
  color: var(--gold);
  position: relative;
}
.xi-mode--locked:hover { background: rgba(255, 206, 0, 0.08); color: var(--gold); }

/* EXPERT (blind draft) toggle */
.xi-expert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s;
}
.xi-expert:hover { border-color: var(--pitch); }
.xi-expert input { position: absolute; opacity: 0; width: 0; height: 0; }
.xi-expert__track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--ink-3, #20262e);
  border: 1px solid var(--rule);
  transition: background 0.2s, border-color 0.2s;
}
.xi-expert__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mute);
  transition: transform 0.2s, background 0.2s;
}
.xi-expert input:checked + .xi-expert__track {
  background: var(--pitch);
  border-color: var(--pitch);
}
.xi-expert input:checked + .xi-expert__track .xi-expert__thumb {
  transform: translateX(18px);
  background: var(--ink);
}
.xi-expert input:focus-visible + .xi-expert__track { box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.35); }
.xi-expert__text { display: flex; flex-direction: column; gap: 2px; }
.xi-expert__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--bone);
}
.xi-expert__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.xi-expert__mult { color: var(--pitch); font-weight: 800; }
.xi-expert--locked {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: var(--rule);
}
.xi-expert--locked:hover { border-color: var(--rule); }
.xi-mode__lock {
  font-size: 10px;
  margin-right: 4px;
  filter: hue-rotate(40deg) brightness(1.2);
}

/* ---------- STICKY SPIN BAR (mobile build helper) ---------- */
/* Hidden by default and on desktop (≥1025px the spinner + pitch sit side by
   side, so there's nothing to scroll). On the stacked mobile layout it appears
   when the main SPIN button scrolls off, so you spin from the pitch. */
.sticky-spin {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 12, 9, 0.96);
  border-top: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
}
.sticky-spin[hidden] { display: none; }
.sticky-spin__progress {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  flex-shrink: 0;
}
.sticky-spin__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.sticky-spin__count {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--bone);
}
.sticky-spin__btn { flex: 1; justify-content: center; }
/* Spin view — overlays the bar with the flashing flag ribbon / landed nation */
.sticky-spin__view {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 14px;
  background: rgba(8, 12, 9, 0.98);
}
.sticky-spin__view[hidden] { display: none; }
.sticky-spin__viewflag {
  width: 40px; height: 27px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.sticky-spin__viewname {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1025px) { .sticky-spin { display: none !important; } }

/* ---------- GAME LAYOUT ---------- */
.xi-game {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--pad) 120px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---------- LEFT COLUMN ---------- */
.xi-spinner-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 80px;
}

.xi-progress {
  border: 1px solid var(--rule);
  background: var(--ink-2);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  align-items: baseline;
}
.xi-progress__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.xi-progress__num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--bone);
}
.xi-progress__bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.xi-progress__bar span {
  position: absolute;
  inset: 0;
  background: var(--pitch);
  transition: width 0.4s ease;
}

/* RESOURCES (skips + swaps) */
.xi-resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.xi-res {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.xi-res__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.xi-res__pips { display: flex; gap: 4px; }
.xi-res__pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule);
  border: 1px solid var(--mute-2);
}
.xi-res__pip.on {
  background: var(--pitch);
  border-color: var(--pitch);
  box-shadow: 0 0 8px var(--pitch);
}
.xi-res__pip--inf {
  animation: pip-inf-pulse 1.8s ease-in-out infinite;
}
@keyframes pip-inf-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--pitch); }
  50% { box-shadow: 0 0 14px var(--pitch); }
}
.xi-res:nth-child(2) .xi-res__pip.on {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* SPINNER */
.xi-spinner {
  border: 1px solid var(--rule);
  background: var(--ink-2);
  position: relative;
  height: 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xi-spinner__ring {
  position: absolute;
  inset: 12px;
  border: 1px dashed var(--rule);
  pointer-events: none;
}
.xi-spinner__pointer {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--pitch);
  font-size: 18px;
  z-index: 3;
  text-shadow: 0 0 10px var(--pitch);
}
.xi-spinner__cards {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  padding: 0 12px;
  transition: transform 4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.xi-spinner__cards.spinning { transition-duration: 4.2s; }
.xi-card {
  flex: 0 0 110px;
  height: 130px;
  background: var(--ink-3);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 8px;
  text-align: center;
}
.xi-card__flag {
  width: 78px;
  height: 52px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
  background: var(--ink-3);
  flex-shrink: 0;
}
/* TACTICAL — position cards in the wheel (no flag, big position label) */
.xi-card--pos { gap: 8px; }
.xi-card__poslabel {
  font-family: var(--font-display, Impact);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--pitch);
}
/* TACTICAL — spun-result + modal position badges */
.result-pos {
  display: inline-grid;
  place-items: center;
  min-width: 96px;
  height: 64px;
  padding: 0 14px;
  font-family: var(--font-display, Impact);
  font-size: 40px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--pitch);
  border-radius: 6px;
}
.modal-pos, .pick-resume__pos {
  display: inline-block;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--pitch);
  border-radius: 4px;
}
.xi-card__name {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* FIFA rank under the nation name on the spinner cards (Classic / Top 50) */
.xi-card__rank {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold, #ffc400);
  white-space: nowrap;
  margin-top: 2px;
}

.xi-spinner__result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--ink-2);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}
.xi-spinner__result.show { opacity: 1; }
.xi-spinner__flag { font-size: 56px; line-height: 0; }
.xi-spinner__flag .result-flag-img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}
.xi-spinner__name {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--pitch);
  margin-top: 6px;
}
.xi-spinner__group {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-top: 2px;
}
/* Matchday boost tag on the spin result — signals why live-slate teams land more */
.result-matchday {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0c1410;
  background: rgba(74,222,128,0.95);
  vertical-align: 1px;
}

/* CONTROLS */
.xi-controls { display: flex; flex-direction: column; gap: 10px; }
.xi-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 18px 22px;
  cursor: pointer;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--bone);
  transition: background 0.2s, color 0.2s, transform 0.15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}
.xi-btn:hover:not(:disabled) {
  background: var(--ink-2);
  transform: translateY(-1px);
}
.xi-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.xi-btn--primary {
  background: var(--pitch);
  color: var(--ink);
  border-color: var(--pitch);
}
.xi-btn--primary:hover:not(:disabled) {
  background: #00e677;
  color: var(--ink);
}
.xi-btn--ghost { border: 1px solid var(--rule); }
.xi-btn--gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.xi-btn--gold:hover:not(:disabled) {
  background: var(--gold);
  color: var(--ink);
}
.xi-btn__arrow { font-size: 16px; }

.xi-rules {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: 4px;
}
.xi-rules h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--pitch);
  margin-bottom: 12px;
}
.xi-rules ol {
  list-style: none;
  counter-reset: rules;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xi-rules li {
  counter-increment: rules;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--mute);
  line-height: 1.4;
}
.xi-rules li::before {
  content: counter(rules, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--pitch);
  border-top: 1px solid var(--pitch);
  padding-top: 4px;
}

/* ---------- RIGHT COLUMN: PITCH ---------- */
.xi-pitch-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.xi-pitch-head__formation {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--bone, #e8e6df);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 5px 26px 5px 10px;
  cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  /* chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a96a0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s, color 0.15s;
}
.xi-pitch-head__formation:hover:not(:disabled) { border-color: var(--pitch); color: #fff; }
.xi-pitch-head__formation:disabled { opacity: 0.5; cursor: not-allowed; }
.xi-pitch-head__formation option { background: #0c1410; color: #e8e6df; }
.xi-pitch-head__overall {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--pitch);
  letter-spacing: 0.02em;
}

.xi-pitch {
  position: relative;
  aspect-ratio: 5 / 7;
  background:
    linear-gradient(180deg, #0d2f1c 0%, #0a2317 50%, #0d2f1c 100%);
  border: 2px solid var(--rule);
  overflow: hidden;
}
.xi-pitch::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 30px,
      transparent 30px,
      transparent 60px);
  pointer-events: none;
}

.pitch-line { position: absolute; background: rgba(255,255,255,0.25); }
.pitch-line--mid { top: 50%; left: 0; right: 0; height: 2px; }
.pitch-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pitch-circle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pitch-box {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 16%;
  border: 2px solid rgba(255,255,255,0.25);
  transform: translateX(-50%);
}
.pitch-box--top { top: 0; border-top: none; }
.pitch-box--bottom { bottom: 0; border-bottom: none; }
.pitch-spot {
  position: absolute;
  left: 50%;
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translateX(-50%);
}
.pitch-spot--top { top: 12%; }
.pitch-spot--bottom { bottom: 12%; }

/* SLOTS */
.slot {
  position: absolute;
  width: 92px;
  height: 116px;
  transform: translate(-50%, -50%);
  background: rgba(10,10,10,0.7);
  border: 1px dashed rgba(255,255,255,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  transition: all 0.25s;
  cursor: default;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.slot::before {
  content: attr(data-role);
  position: absolute;
  top: 4px;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}
.slot--empty-target {
  border-color: var(--pitch);
  background: rgba(0,255,133,0.12);
  animation: pulse-slot 1.6s infinite;
}
@keyframes pulse-slot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,133,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(0,255,133,0); }
}
.slot__open {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}
/* MANUAL PLACEMENT — open slots become tappable targets with their OOP cost */
.slot--place-target {
  cursor: pointer;
  border-color: var(--gold);
  background: rgba(255,196,0,0.10);
}
.slot--place-target:hover { background: rgba(255,196,0,0.2); }
.slot--place-natural { border-color: var(--pitch); background: rgba(0,255,133,0.12); }
.slot--place-best { animation: pulse-slot 1.6s infinite; }
.slot--place-natural.slot--place-best {
  animation: pulse-slot 1.6s infinite;
}
.slot__place-cost {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
}
.slot__place-cost--0 { color: var(--pitch, #00ff85); }
.slot__place-cost--1 { color: var(--gold, #ffc400); }
.slot__place-cost--2 { color: #ff6d6d; }
/* placement bar — fixed prompt while choosing a slot */
.placement-bar {
  position: fixed;
  left: 50%; bottom: 70px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #0c1410;
  border: 1px solid var(--gold, #ffc400);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--bone, #e8e6df);
  max-width: 92vw;
}
.placement-bar__txt b { color: var(--gold, #ffc400); }
.placement-bar__cancel {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--bone, #e8e6df);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.placement-bar__cancel:hover { border-color: #ff6d6d; color: #ff6d6d; }
.slot__filled-flag {
  width: 36px;
  height: 24px;
  object-fit: cover;
  margin-bottom: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.slot__filled-name {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1;
  color: var(--bone);
  letter-spacing: 0.02em;
  margin-top: 4px;
  white-space: nowrap;   /* nameFit() shrinks long surnames so they stay on one line */
  max-width: 100%;
}
.slot__filled-rating {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--pitch);
  margin-top: 4px;
}
.slot--filled {
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--pitch);
}
.slot--oop { border-color: var(--gold) !important; }
.slot--oop .slot__filled-rating { color: var(--gold); }

/* SWAP MODE */
body.swap-mode .xi-pitch::after {
  content: 'SWAP MODE — TAP A PLAYER TO REMOVE';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--crimson);
  color: var(--bone);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  z-index: 10;
  white-space: nowrap;
}
.slot--swappable {
  cursor: pointer !important;
  animation: swap-pulse 1.2s infinite;
}
.slot--swappable::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 46, 77, 0.4);
  color: var(--bone);
  font-size: 32px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
}
.slot--swappable:hover::after { opacity: 1; }
@keyframes swap-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,46,77,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(255,46,77,0); }
}

.slot__filled-chem {
  display: flex;
  gap: 3px;
  margin-top: 4px;
  justify-content: center;
}
.chem-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-block;
}
.chem-dot.on { background: var(--pitch); box-shadow: 0 0 6px var(--pitch); }
.slot--gk { background: rgba(255,206,0,0.08); border-color: rgba(255,206,0,0.4); }
.slot--gk.slot--filled { border-color: var(--gold); }
.slot--gk .slot__filled-rating { color: var(--gold); }

.xi-share {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.xi-share .xi-btn {
  padding: 14px 20px;
  min-width: 0;
}

/* ---------- MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal__panel {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--pitch);
  padding: 36px;
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: panel-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}
@keyframes panel-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.modal__panel--complete {
  background: var(--pitch);
  color: var(--ink);
  text-align: center;
  border: none;
  max-width: 760px;
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.modal__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--pitch);
}
.modal__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 0.9;
  margin-top: 6px;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.modal__title em { color: var(--pitch); font-style: italic; font-family: var(--font-serif); font-weight: 900; }
.modal__panel--complete .modal__title em { color: var(--ink); }
.modal-title-flag {
  width: 44px;
  height: 30px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
/* FIFA world ranking badge (Classic / Top 50 pick title) */
.fifa-rank {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold, #ffc400);
  background: rgba(255, 196, 0, 0.12);
  border: 1px solid rgba(255, 196, 0, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
  white-space: nowrap;
}
.summary-flag {
  width: 18px;
  height: 12px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.modal__lede {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--mute);
  line-height: 1.5;
}
.modal__close {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--bone);
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.modal__close:hover { background: var(--ink-2); }

/* Pick-modal MINIMIZE button (replaces the old × close — peek at your team) */
.modal__minimize {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid var(--pitch);
  color: var(--pitch);
  height: 36px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.modal__minimize:hover { background: var(--pitch); color: var(--ink); }
.modal__minimize-icon { font-size: 16px; line-height: 1; }

/* Floating resume bar — shown while the pick modal is minimized */
.pick-resume {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 28px);
  padding: 12px 18px;
  background: var(--pitch);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  cursor: pointer;
  animation: pickResumePulse 1.8s ease-in-out infinite;
}
.pick-resume[hidden] { display: none; }
@keyframes pickResumePulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 0 rgba(0,200,83,0.45); }
  50%      { box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 10px rgba(0,200,83,0); }
}
.pick-resume__text { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.pick-resume__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.pick-resume__nation {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display, Impact);
  font-size: 17px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick-resume__flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; }
.pick-resume__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--pitch);
  padding: 8px 12px;
  border-radius: 5px;
  flex-shrink: 0;
}

.modal__players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.player {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.player:hover {
  background: var(--ink-3);
  border-color: var(--pitch);
  transform: translateY(-2px);
}
.player:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.player__top {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}
.player__pos {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pitch);
  padding: 2px 8px;
  border: 1px solid var(--pitch);
}
.player__pos--gk { color: var(--gold); border-color: var(--gold); }
.player__pos--def { color: var(--azur); border-color: var(--azur); }
.player__pos--mid { color: var(--pitch); border-color: var(--pitch); }
.player__pos--fwd { color: var(--crimson); border-color: var(--crimson); }
.player__rating {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--bone);
}
.player__name {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--bone);
  line-height: 1.05;
}
.player__club {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-transform: uppercase;
}
.player__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.player__league {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--ink-3);
  color: var(--bone);
  white-space: nowrap;
}
.player__league--pre { background: #3D195B; color: #fff; }
.player__league--lig { background: #FF4B44; color: #fff; }
.player__league--bun { background: #d3010c; color: #fff; }
.player__league--ser { background: #008FD7; color: #fff; }
.player__league--l1  { background: #091C3E; color: #DAE025; }
.player__league--por { background: #006A4E; color: #fff; }
.player__league--ere { background: #FF6900; color: #fff; }
.player__league--tsl { background: #E30A17; color: #fff; }
.player__league--mls { background: #001a40; color: #B7C9FF; }
.player__league--spl { background: #006C35; color: #fff; }
.player__league--bra { background: #009C3B; color: #FEDF00; }
.player__league--mex { background: #006847; color: #CE1126; }
.player__league--oth { background: var(--ink-3); color: var(--mute); }

/* CHEM-PREVIEW BADGE — shows how many chem points the team gains if you
   pick this player. Lifts the strategic decision into the moment of
   choice, especially important now that chem dominates the tournament
   bracket math. */
.player__chem {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.player__chem--great {
  background: rgba(0, 255, 133, 0.18);
  color: var(--pitch, #00ff85);
  border-color: rgba(0, 255, 133, 0.55);
  text-shadow: 0 0 6px rgba(0, 255, 133, 0.45);
}
.player__chem--good {
  background: rgba(0, 255, 133, 0.10);
  color: var(--pitch, #00ff85);
  border-color: rgba(0, 255, 133, 0.30);
}
.player__chem--neutral {
  background: var(--ink-3, #1a1f1c);
  color: var(--mute, #7a8590);
}
.player__chem--bad {
  background: rgba(255, 46, 77, 0.12);
  color: var(--crimson, #ff2e4d);
  border-color: rgba(255, 46, 77, 0.35);
}
/* When chem badge is present, let the meta row wrap so nothing gets
   clipped on narrow cards (mobile / dock-right modal). */
.player__meta { flex-wrap: wrap; row-gap: 4px; }

.player__fit {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}
/* Live tournament stats badge */
.player__livestrip {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.player__livestat {
  color: var(--gold);
  background: rgba(255, 196, 0, 0.12);
  padding: 1px 6px;
  border-radius: 3px;
}
.player__livestat--red { color: var(--crimson, #ff2e4d); background: rgba(255, 46, 77, 0.15); }

/* ============================================================
   PICK MODAL — dock-right on desktop so the pitch stays visible
   while picking. (Steven's group-chat feedback: "any way to view
   the team while creating it?" — on desktop the full-screen modal
   used to cover the pitch.) Mobile keeps the centered overlay.
   ============================================================ */
@media (min-width: 1024px) {
  /* Only the pick modal gets the dock-right treatment — leave the
     complete / rosters / help / paywall modals centered. */
  #pickModal {
    place-items: stretch end;
    padding: 16px;
    pointer-events: none;  /* let clicks pass through to the pitch */
  }
  /* Re-enable clicks on the panel only — backdrop stays click-through
     so the player can scroll/inspect the pitch beneath. The modal close
     button still dismisses; outside-click-to-close is sacrificed but the
     panel scrolls independently of the pitch. */
  #pickModal .modal__panel { pointer-events: auto; }
  #pickModal .modal__backdrop { pointer-events: none; }
  /* Lighten the backdrop so the pitch is fully visible behind it.
     A subtle vignette on the right keeps the panel readable. */
  #pickModal .modal__backdrop {
    background: linear-gradient(
      to right,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,0)   50%,
      rgba(0,0,0,0.35) 100%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #pickModal .modal__panel {
    width: 460px;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  }
  /* Tighten the player grid so 2 columns fit comfortably in the
     narrower dock-right panel. */
  #pickModal .modal__players {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ============================================================
   ROSTERS MODAL — browse all 48 squads
   ============================================================ */
.modal__panel--rosters {
  max-width: 920px;
  width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.rosters__search-row {
  display: flex;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.rosters__search {
  flex: 1;
  background: var(--ink-2, #16191e);
  border: 1px solid var(--rule);
  color: var(--paper, #fff);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-transform: uppercase;
}
.rosters__search:focus { outline: 1px solid var(--pitch); }
.rosters__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.rosters__grid {
  padding: 16px 22px 22px;
  overflow-y: auto;
  /* flex, NOT grid: <details> children collapse to ~3px rows inside a CSS grid
     (browser quirk) — every roster card was rendering invisible. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roster__card {
  background: var(--ink-2, #16191e);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  /* overflow:hidden zeroes the automatic min-height, letting the flex column
     SHRINK all 48 cards to ~5px to fit the pane instead of scrolling. Never shrink. */
  flex-shrink: 0;
}
.roster__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.roster__head::-webkit-details-marker { display: none; }
.roster__head:hover { background: rgba(0, 200, 83, 0.06); }
.roster__flag {
  width: 32px;
  height: 22px;
  object-fit: cover;
  border-radius: 2px;
}
.roster__nation {
  font-family: var(--font-display, Impact);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--paper, #fff);
  flex: 1;
}
.roster__group {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--pitch);
  font-weight: 800;
  background: rgba(0, 200, 83, 0.1);
  padding: 3px 8px;
  border-radius: 3px;
}
.roster__size {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.12em;
}
.roster__body {
  border-top: 1px solid var(--rule);
  padding: 8px 0;
}
.roster__row {
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  gap: 12px;
  padding: 6px 16px;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.roster__row:last-child { border-bottom: none; }
.roster__pos {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mute);
  text-align: center;
}
.roster__pos--gk { color: #ffaa00; }
.roster__pos--def { color: #4dabff; }
.roster__pos--mid { color: var(--pitch); }
.roster__pos--fwd { color: var(--crimson, #ff2e4d); }
.roster__name {
  color: var(--paper, #fff);
  font-weight: 600;
}
.roster__club {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.roster__rating {
  font-family: var(--font-display, Impact);
  font-size: 16px;
  color: var(--pitch);
  text-align: right;
  font-weight: 800;
  white-space: nowrap;
  justify-self: end;
}
/* Base → live pair when a player has real form (base kept, live coloured) */
.roster__rating-base { font-size: 12px; color: var(--mute); font-weight: 700; }
.roster__rating-arrow { font-size: 10px; color: var(--mute); margin: 0 3px; font-family: var(--font-mono); }
.roster__rating-live { font-weight: 800; }
.roster__rating-live--up { color: #4ade80; }
.roster__rating-live--down { color: #f87171; }
.roster__empty {
  text-align: center;
  padding: 40px;
  font-family: var(--font-mono);
  color: var(--mute);
  letter-spacing: 0.12em;
}
@media (max-width: 600px) {
  .roster__row { grid-template-columns: 40px 1fr auto; }
  .roster__club { display: none; }
}

/* ============================================================
   SEO ONLY — visually hidden but readable by crawlers + screen readers
   Standard a11y/SEO pattern: not display:none (Google penalizes that)
   ============================================================ */
.seo-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   GUIDE — visible, readable content section (SEO + AdSense)
   ============================================================ */
.guide {
  max-width: 860px;
  margin: 0 auto;
  padding: 64px 22px 24px;
}
.guide__inner { }
.guide__block {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.guide__block:first-of-type { border-top: 0; padding-top: 12px; }
.guide__block h3 {
  font-family: var(--font-display, Anton);
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 0.01em;
  color: var(--paper, #fff);
  margin: 0 0 14px;
}
.guide__block p,
.guide__steps li,
.guide__faq dd {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone, #c9cdd2);
  margin: 0 0 12px;
}
.guide__block strong { color: var(--paper, #fff); font-weight: 600; }
.guide__steps { margin: 0; padding-left: 22px; }
.guide__steps li { margin-bottom: 10px; }
.guide__faq dt {
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--pitch, #00ff85);
  margin: 18px 0 6px;
}
.guide__faq dd { margin-left: 0; }
.guide a { color: var(--pitch, #00ff85); }

/* Footer site links */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 18px 16px;
  border-top: 1px solid var(--rule);
}
.footer__links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute, #8a96a0);
  text-decoration: none;
}
.footer__links a:hover { color: var(--pitch, #00ff85); }

/* ============================================================
   MONETIZATION — rewarded ad modal, AdSense slot
   ============================================================ */
/* Rewarded video modal */
.rewarded-ad {
  position: fixed; inset: 0;
  z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rewarded-ad__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.78);
}
.rewarded-ad__panel {
  position: relative;
  background: var(--ink-2, #16191e);
  border: 1px solid var(--gold, #ffc400);
  border-radius: 10px;
  max-width: 400px;
  width: 100%;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.rewarded-ad__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.rewarded-ad__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--gold, #ffc400);
  padding: 4px 10px;
  border-radius: 3px;
}
.rewarded-ad__close {
  background: none; border: none;
  color: var(--mute);
  font-size: 22px;
  cursor: pointer;
  width: 28px; height: 28px;
  line-height: 1;
}
.rewarded-ad__close:hover { color: var(--paper); }
.rewarded-ad__title {
  font-family: var(--font-display, Impact);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--paper);
  margin: 0 0 8px;
}
.rewarded-ad__body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0 0 18px;
}
.rewarded-ad__body strong { color: var(--gold, #ffc400); }
.rewarded-ad__watch {
  width: 100%;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.06em;
}
.rewarded-ad__premium {
  width: 100%;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.rewarded-ad__small {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--mute-2, #555);
  margin: 14px 0 0;
}
/* Ad stub — shows during the simulated countdown */
.rewarded-ad__ad-stub {
  background: var(--ink, #0e0f12);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 40px 20px;
  text-align: center;
}
.rewarded-ad__ad-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mute);
  margin-bottom: 12px;
}
.rewarded-ad__ad-content {
  font-family: var(--font-display, Impact);
  font-size: 32px;
  color: var(--gold, #ffc400);
  margin-bottom: 20px;
  letter-spacing: 0.04em;
}
.rewarded-ad__ad-timer {
  font-family: var(--font-display, Impact);
  font-size: 64px;
  color: var(--paper);
  line-height: 1;
}
.rewarded-ad__ad-note {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--mute-2, #555);
  letter-spacing: 0.1em;
  margin-top: 14px;
}

/* AdSense slot */
.ad-slot {
  position: relative;
  margin: 32px auto 8px;
  max-width: 728px;
  width: 100%;
  min-height: 90px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 18px;
}
.ad-slot__label {
  position: absolute;
  top: 4px; left: 8px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--mute-2, #555);
}
/* House-ad fallback shown when AdSense slot is empty (pre-approval) */
.ad-slot__house {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  text-decoration: none;
  color: var(--paper, #fff);
  padding: 14px 16px;
  transition: transform 0.15s;
}
.ad-slot__house:hover { transform: translateY(-1px); }
.ad-slot__house-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #69C9D0;
  font-weight: 800;
}
.ad-slot__house-title {
  font-family: var(--font-display, Impact);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--paper, #fff);
}
.ad-slot__house-title strong { color: #69C9D0; }
/* Eatography variant — warm orange accent */
.ad-slot__house--eatography .ad-slot__house-eyebrow { color: #FF6B35; }
.ad-slot__house--eatography .ad-slot__house-title strong { color: #FF6B35; }
.ad-slot__house-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
}

/* DIRECT CREATOR SPONSORSHIPS — always-visible (outside ad containers, NOT
   premium-gated). Neutral class names so ad blockers don't cosmetically hide them. */
.pe-partners {
  margin: 28px auto 8px;
  max-width: 728px;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  text-align: center;
}
.pe-partners__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--mute);
  margin-bottom: 10px;
}
.pe-partners__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pe-partner {
  flex: 1 1 280px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  background: rgba(0,0,0,0.3);
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}
.pe-partner:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.18); }
.pe-partner__eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #69C9D0;
}
.pe-partner__title {
  font-family: var(--font-display, Impact);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--paper, #fff);
}
.pe-partner__title strong { color: #69C9D0; }
.pe-partner--eatography .pe-partner__eyebrow,
.pe-partner--eatography .pe-partner__title strong { color: #FF6B35; }
.pe-partner__sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--mute);
}

/* Swap target picker — choose which roster player to replace */
.swap-picker {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.swap-picker__panel {
  background: var(--ink-2, #16191e);
  border: 1px solid var(--rule);
  border-radius: 8px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.swap-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.swap-picker__title {
  font-family: var(--font-display, Impact);
  font-size: 16px;
  color: var(--gold, #ffc400);
  letter-spacing: 0.06em;
}
.swap-picker__cancel {
  background: none;
  border: 1px solid var(--rule);
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
}
.swap-picker__cancel:hover { color: var(--paper); border-color: var(--paper); }
.swap-picker__sub {
  padding: 12px 20px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.14em;
  font-weight: 700;
}
.swap-picker__rows {
  padding: 8px 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.swap-picker__row {
  display: grid;
  grid-template-columns: 56px 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--ink, #0e0f12);
  border: 1px solid var(--rule);
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  color: var(--paper);
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.swap-picker__row:hover {
  border-color: var(--gold, #ffc400);
  background: rgba(255, 196, 0, 0.05);
}
.swap-picker__slot {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-align: center;
}
.swap-picker__flag {
  width: 32px; height: 22px;
  object-fit: cover;
  border-radius: 2px;
}
.swap-picker__name {
  font-family: var(--font-display, Impact);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.swap-picker__rating {
  font-family: var(--font-display, Impact);
  font-size: 22px;
  color: var(--pitch);
  font-weight: 800;
}
.swap-picker__fit {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 3px;
}
.swap-picker__fit--nat { color: var(--pitch); background: rgba(0,200,83,0.1); }
.swap-picker__fit--oop { color: var(--gold); background: rgba(255,196,0,0.1); }
@media (max-width: 600px) {
  .swap-picker__row { grid-template-columns: 44px 32px 1fr auto; }
  .swap-picker__fit { display: none; }
}

/* LIVE topbar pulse indicator (tournament in progress) */
.topbar__livebadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--crimson, #ff2e4d);
  margin-left: 12px;
}
.topbar__livebadge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--crimson, #ff2e4d);
  box-shadow: 0 0 0 0 rgba(255, 46, 77, 0.7);
  animation: livePulse 1.4s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 46, 77, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 46, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 77, 0); }
}
.player__fit--natural { color: var(--pitch); }
.player__fit--natural::before { content: '★ '; }
.player__fit--oop { color: var(--gold); }
.player__fit--oop::before { content: '↺ '; }
.player__fit--locked { color: var(--mute-2); }
.player__fit--locked::before { content: '✕ '; }
.player__fit--swap { color: var(--gold); font-weight: 700; }
.player--swap-in { border-color: var(--gold) !important; }
.player--swap-in:hover {
  background: rgba(255,206,0,0.08) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 1px var(--gold);
  transform: translateY(-2px);
}

.modal__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}
.modal__foot--complete {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.modal__foot--pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.modal__foot--pick .xi-btn { padding: 14px 18px; }
@media (max-width: 480px) {
  .modal__foot--pick { flex-direction: column; }
  .modal__foot--pick .xi-btn { width: 100%; }
}
.modal__foot-center {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.modal__foot--complete .xi-btn--gold {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 700;
}
.modal__foot--complete .xi-btn--gold:hover:not(:disabled) {
  background: var(--ink);
  color: var(--gold);
}
/* POST ON X — black X-brand button (stands out on the green complete panel) */
.modal__foot--complete .xi-btn--x,
.xi-btn--x {
  background: #000;
  color: #fff;
  border: 2px solid #000;
  font-weight: 700;
}
.modal__foot--complete .xi-btn--x:hover:not(:disabled),
.xi-btn--x:hover:not(:disabled) {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
@media (max-width: 720px) {
  .modal__foot--complete { grid-template-columns: 1fr; }
  .modal__foot-center { flex-direction: column; }
}

/* COMPLETE — GRADE + PROJECTED FINISH stat strip */
/* Finish hero — the big "how did I do?" result banner on the complete modal */
.xi-finish-hero {
  background: #0c1410;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 24px;
  margin: 10px auto 4px;     /* centred, hugs its content (not full width) */
  width: fit-content;
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.xi-finish-hero:empty { display: none; }
.xi-finish-hero__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #7a8590;
}
.xi-finish-hero__result {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 48px);
  line-height: 1;
  color: #fff;
}
.xi-finish-hero__match {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #aeb8c2;
}
/* ---------- MATCHDAY strip (real fixtures + live scores) ---------- */
.matchday {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.matchday__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.matchday__leaders {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  color: var(--bone, #e8e6df);
  padding-top: 7px;
  border-top: 1px dashed var(--rule);
  line-height: 1.6;
}
.matchday__leaders b { color: var(--gold, #ffc400); letter-spacing: 0.14em; margin-right: 6px; }
.matchday__label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
  color: var(--gold, #ffc400);
  white-space: nowrap;
  flex-shrink: 0;
}
.matchday__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.matchday__track::-webkit-scrollbar { display: none; }
.matchday__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bone, #e8e6df);
  white-space: nowrap;
  flex-shrink: 0;
}
.matchday__chip--live { border-color: #ff4d6d; background: rgba(255,77,109,0.08); }
.matchday__chip b { font-weight: 800; }
.matchday__score { color: var(--gold, #ffc400); font-weight: 800; }
.matchday__time { color: var(--mute-2, #8a96a0); font-size: 10px; }
.matchday__chip--live .matchday__time { color: #ff4d6d; font-weight: 800; }

/* YOUR XI TODAY — your drafted players in real action, under the matchday strip */
.xitoday {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
  background: rgba(74,222,128,0.05);
  border-bottom: 1px solid var(--rule);
}
.xitoday__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.xitoday__label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
  color: rgba(74,222,128,0.95);
  white-space: nowrap;
}
.xitoday__tally {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--bone, #e8e6df);
  white-space: nowrap;
}
.xitoday__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.xitoday__track::-webkit-scrollbar { display: none; }
.xitoday__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--bone, #e8e6df);
  white-space: nowrap;
  flex-shrink: 0;
}
.xitoday__chip img { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }
.xitoday__chip--scored { border-color: rgba(74,222,128,0.6); background: rgba(74,222,128,0.1); }
.xitoday__chip--cap { border-color: rgba(255,196,0,0.7); background: rgba(255,196,0,0.08); }
.xitoday__armband { color: var(--gold, #ffc400); font-weight: 900; }
.xitoday__stat { color: var(--gold, #ffc400); font-weight: 800; }

/* Captain picker on the complete screen */
.xi-captain {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,196,0,0.35);
  border-radius: 10px;
  background: rgba(255,196,0,0.05);
}
.xi-captain__label {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--ink, #0c1410);
  margin-bottom: 8px;
}
.xi-captain__hint { font-weight: 600; letter-spacing: 0.02em; opacity: 0.7; text-transform: none; }
.xi-captain__select {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--ink, #0c1410);
  background: #fff;
  border: 1px solid rgba(12,20,16,0.25);
  border-radius: 8px;
  cursor: pointer;
}
/* SURVIVOR — your XI's nations still alive in the real bracket */
.xitoday__survive {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--bone, #e8e6df);
}
.xitoday__survive b { color: rgba(74,222,128,0.95); font-weight: 800; letter-spacing: 0.04em; }
.xitoday__survive--hit b { color: #ff6d6d; }   /* someone's been knocked out */

/* Celebration toast when a drafted player scores for real */
.toast--goal {
  background: linear-gradient(135deg, #0c1410, #143a24) !important;
  border: 1px solid rgba(74,222,128,0.8) !important;
  color: #eafff1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 30px rgba(74,222,128,0.25) !important;
}
/* 💀 Elimination toast when a drafted nation crashes out */
.toast--out {
  background: linear-gradient(135deg, #1a0c0c, #3a1414) !important;
  border: 1px solid rgba(255,77,109,0.8) !important;
  color: #ffe9ec !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 30px rgba(255,77,109,0.25) !important;
}
/* 🅒 Captain goal toast — double points, gold fireworks */
.toast--cap {
  background: linear-gradient(135deg, #2a2200, #4a3a00) !important;
  border: 1px solid rgba(255,196,0,0.9) !important;
  color: #fff7e0 !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 34px rgba(255,196,0,0.35) !important;
}

/* ⚽ real-tournament-goals chip on filled slots */
.slot__live-chip {
  position: absolute;
  top: 2px; left: 2px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 800;
  color: #fff;
  background: rgba(255,77,109,0.92);
  border-radius: 6px;
  padding: 1px 4px;
  line-height: 1.4;
  pointer-events: none;
}
/* Live FORM chip (real match-rating delta) — top-right of the slot */
.slot__form-chip {
  position: absolute;
  top: 2px; right: 2px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 800;
  border-radius: 6px;
  padding: 1px 4px;
  line-height: 1.4;
  pointer-events: none;
}
.slot__form-chip--up { color: #0c1410; background: rgba(74,222,128,0.95); }
.slot__form-chip--down { color: #fff; background: rgba(248,113,113,0.92); }
/* Same form signal inline on ROSTERS rows (name col is 1fr; rating col is fixed 40px) */
/* Name + chip share a flex row so the chip centres on the text regardless of
   the display font's tall line box (vertical-align baseline-aligned it too low). */
.player__name, .roster__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 8px;
}
.roster__form {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
.roster__form--up { color: #0c1410; background: rgba(74,222,128,0.95); }
.roster__form--down { color: #fff; background: rgba(248,113,113,0.92); }

/* Trophy case — badge unlocks on the complete screen */
.xi-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 2px auto 12px;
}
.xi-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(255,196,0,0.18), rgba(255,196,0,0.05));
  border: 1.5px solid var(--gold, #ffc400);
  border-radius: 10px;
  width: 100%;
  max-width: 360px;
}
.xi-badge--new { animation: badgePop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes badgePop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.xi-badge__icon { font-size: 24px; flex-shrink: 0; }
.xi-badge__name {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--gold, #ffc400);
  white-space: nowrap;
}
.xi-badge__how {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute-2, #8a96a0);
  margin-left: auto;
  text-align: right;
}
.xi-badges__count {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  color: var(--mute-2, #8a96a0);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
}
.xi-badges__count:hover { color: var(--gold, #ffc400); }
.xi-badges__list { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: center; }
.xi-badge--locked { opacity: 0.45; border-color: var(--rule); background: rgba(255,255,255,0.02); }
.xi-badge--locked .xi-badge__name { color: var(--mute-2, #8a96a0); }

/* Retention hooks under the finish: personal best + near-miss */
.xi-finish-hero__pb {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--gold, #ffc400);
}
.xi-finish-hero__pb s { opacity: 0.55; font-weight: 400; }
.xi-finish-hero__miss {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: #aeb8c2;
}
.xi-finish-hero__why {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.07em;
  color: var(--gold, #ffc400);
  opacity: 0.85;
}
.xi-finish-hero__real {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: #ff4d6d;
}

.xi-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  margin-top: 8px;
}
.xi-stat {
  background: rgba(0,0,0,0.92);
  color: var(--bone);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 2px;
}
.xi-stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.xi-stat__value {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--bone);
}
.xi-stat__grade {
  font-size: 44px;
  line-height: 1;
}
.xi-stat__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--pitch);
  margin-left: 6px;
}
.xi-stat--finish .xi-stat__finish {
  font-size: 18px;
  line-height: 1.1;
}
.xi-stat__match {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.xi-stat__matchscore {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--bone);
}
.xi-stat--win .xi-stat__matchscore { color: var(--pitch); }
.xi-stat--loss .xi-stat__matchscore { color: var(--crimson); }
.xi-stat__matchopp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
@media (max-width: 480px) {
  .xi-stat-strip { grid-template-columns: 1fr; gap: 1px; }
  .xi-stat { padding: 12px 14px; }
  .xi-stat__value { font-size: 20px; }
  .xi-stat__grade { font-size: 36px; }
}

/* INJURY REPORT */
.xi-injuries {
  background: var(--ink);
  border: 1px solid var(--crimson);
  padding: 14px 16px;
  margin-top: 8px;
  box-shadow: 0 0 0 3px rgba(255, 46, 77, 0.15);
}
.xi-injuries__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--crimson);
  border-bottom: 1px solid var(--crimson);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.xi-injuries__list { display: flex; flex-direction: column; gap: 6px; }
.xi-injury {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px dashed rgba(255,46,77,0.2);
  font-family: var(--font-sans);
  font-size: 13px;
}
.xi-injury:last-child { border-bottom: none; }
.xi-injury__icon { font-size: 18px; }
.xi-injury__player {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--bone);
}
.xi-injury__detail {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.xi-injury__loss {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--crimson);
}

/* Ambulance overlay on the formation pitch slot */
.xi-final-slot--injured {
  border-color: var(--crimson) !important;
  background: rgba(255,46,77,0.18) !important;
  animation: injured-pulse 2s ease-in-out infinite;
}
.xi-final-slot__injury {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--crimson);
  color: var(--bone);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  z-index: 3;
  box-shadow: 0 0 8px rgba(255,46,77,0.6);
}
@keyframes injured-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,46,77,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255,46,77,0); }
}

/* TOURNAMENT AWARDS */
.xi-awards {
  background: rgba(0,0,0,0.92);
  color: var(--bone);
  padding: 18px;
  border: 1px solid var(--ink);
  margin-top: 8px;
}
.xi-awards__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  margin-bottom: 14px;
}
/* Collapsible awards — tap to open (declutters the complete screen) */
.xi-awards__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.xi-awards__summary::-webkit-details-marker { display: none; }
.xi-awards__summary::marker { content: ''; }
.xi-awards__chev { transition: transform 0.2s ease; font-size: 13px; }
.xi-awards-details[open] .xi-awards__chev { transform: rotate(180deg); }
.xi-awards-details[open] .xi-awards__summary {
  border-bottom: 1px solid var(--gold);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.xi-awards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.xi-award {
  background: var(--ink-2);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 70px;
}
.xi-award__icon {
  font-size: 26px;
  text-align: center;
  line-height: 1;
}
.xi-award__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.xi-award__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-weight: 700;
}
.xi-award__player {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--bone);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xi-award__stat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--pitch);
  font-weight: 700;
  margin-top: 2px;
}
/* Awards data-freshness caption */
.xi-awards__caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mute);
  font-weight: 700;
  margin: -4px 0 14px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid var(--mute);
  border-radius: 2px;
}
.xi-awards__caption--live {
  color: var(--crimson, #ff2e4d);
  background: rgba(255, 46, 77, 0.06);
  border-left-color: var(--crimson, #ff2e4d);
}
/* TBD award card — shown when tournament is live but no data yet */
.xi-award--tbd {
  opacity: 0.6;
  border: 1px dashed var(--rule) !important;
  background: rgba(255,255,255,0.02) !important;
}
.xi-award--tbd .xi-award__player {
  color: var(--mute) !important;
  letter-spacing: 0.16em;
}
.xi-award--tbd .xi-award__stat {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.1em;
}
.xi-award--tbd .xi-award__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--mute-2, #555);
  letter-spacing: 0.1em;
}
/* Award winner who is IN your XI — green pitch border + badge */
.xi-award--in-xi {
  background: linear-gradient(135deg, rgba(0,255,133,0.10), rgba(0,255,133,0.04)) !important;
  border: 1px solid var(--pitch) !important;
  box-shadow: inset 3px 0 0 var(--pitch);
}
.xi-award--in-xi .xi-award__label { color: var(--pitch); }
.xi-award--in-xi .xi-award__player { color: var(--pitch); }
.xi-award__xi-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  background: var(--pitch);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  border-radius: 2px;
  vertical-align: middle;
}
.xi-award__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.xi-award__flag {
  width: 16px;
  height: 11px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
@media (max-width: 480px) {
  .xi-awards__grid { grid-template-columns: 1fr; }
  .xi-award { padding: 10px 12px; min-height: 56px; }
  .xi-award__icon { font-size: 22px; }
  .xi-award__player { font-size: 14px; }
}

/* COMPLETE SUMMARY — formation pitch */
.xi-summary {
  margin-top: 18px;
  background: rgba(0,0,0,0.15);
  padding: 14px;
}
.xi-final-pitch {
  position: relative;
  aspect-ratio: 5 / 6.2;
  max-width: 640px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, #0d2f1c 0%, #0a2317 50%, #0d2f1c 100%);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.xi-final-pitch::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 22px,
      transparent 22px,
      transparent 44px);
  pointer-events: none;
}

.xi-final-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 88px;
  /* Uniform height regardless of name length / how many chips a player has —
     content tops out, chem dots pin to the bottom (margin-top:auto below). */
  min-height: 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  background: rgba(10,10,10,0.92);
  border: 1px solid var(--pitch);
  padding: 6px 4px 5px;
  text-align: center;
  z-index: 2;
}
.xi-final-slot--gk { border-color: var(--gold); }
.xi-final-slot--oop { border-color: var(--gold); }
.xi-final-slot__role {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pitch);
  line-height: 1;
}
.xi-final-slot--gk .xi-final-slot__role { color: var(--gold); }
.xi-final-slot__flag {
  width: 32px;
  height: 22px;
  object-fit: cover;
  margin: 3px 0 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.xi-final-slot__name {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--bone);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.xi-final-slot__row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
/* Live chips on the final XI: form (▲/▼) + tournament output (⚽/🅰️/🧤).
   One row (nowrap) so every chip-card is a single consistent height. */
.xi-final-slot__chips {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2px;
  margin-top: 3px;
  max-width: 100%;
}
.xi-final-slot__chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 5px;
  white-space: nowrap;
}
.xi-final-slot__chip--up   { color: #0c1410; background: rgba(74,222,128,0.95); }
.xi-final-slot__chip--down { color: #fff;     background: rgba(248,113,113,0.92); }
.xi-final-slot__chip--stat { color: var(--bone); background: rgba(255,255,255,0.12); }
.xi-final-slot__rating {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  color: var(--pitch);
}
.xi-final-slot--gk .xi-final-slot__rating { color: var(--gold); }
.xi-final-slot__league {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  background: var(--ink-3);
  color: var(--bone);
}
.xi-final-slot__league--pre { background: #3D195B; color: #fff; }
.xi-final-slot__league--lig { background: #FF4B44; color: #fff; }
.xi-final-slot__league--bun { background: #d3010c; color: #fff; }
.xi-final-slot__league--ser { background: #008FD7; color: #fff; }
.xi-final-slot__league--l1  { background: #091C3E; color: #DAE025; }
.xi-final-slot__league--por { background: #006A4E; color: #fff; }
.xi-final-slot__league--ere { background: #FF6900; color: #fff; }
.xi-final-slot__league--tsl { background: #E30A17; color: #fff; }
.xi-final-slot__league--mls { background: #001a40; color: #B7C9FF; }
.xi-final-slot__league--spl { background: #006C35; color: #fff; }
.xi-final-slot__league--bra { background: #009C3B; color: #FEDF00; }
.xi-final-slot__league--mex { background: #006847; color: #CE1126; }
.xi-final-slot__league--oth { background: var(--ink-3); color: var(--mute); }
.xi-final-slot__chem {
  display: flex;
  gap: 2px;
  margin-top: auto;   /* pin chem dots to the bottom so every card lines up */
  padding-top: 4px;
}
.xi-final-slot__chem .chem-dot {
  width: 5px;
  height: 5px;
}

@media (max-width: 720px) {
  /* Taller pitch on phones so the five rows have vertical room... */
  .xi-final-pitch { aspect-ratio: 5 / 7.8; }
  /* ...and much shorter cards (the 122px desktop min-height overflowed the
     short phone pitch — cards overlapped + spilled out of bounds). */
  .xi-final-slot {
    width: 62px;
    min-height: 72px;
    padding: 3px 2px;
    gap: 1px;
  }
  .xi-final-slot__role { font-size: 8px; }
  .xi-final-slot__flag { width: 22px; height: 15px; margin: 2px 0 1px; }
  .xi-final-slot__name { font-size: 8px; }
  .xi-final-slot__rating { font-size: 11px; }
  .xi-final-slot__league { font-size: 6px; padding: 1px 2px; }
  .xi-final-slot__chem .chem-dot { width: 4px; height: 4px; }
  .xi-final-slot__chips { gap: 2px; margin-top: 2px; }
  .xi-final-slot__chip { font-size: 7px; padding: 1px 2px; }
}
.xi-summary__nation {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.06em;
}
.xi-summary__league {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pitch);
  margin-top: 2px;
}
.xi-summary__chem {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}

/* ============================================================
   SPONSOR TICKER — docked bottom strip (always visible)
   ============================================================ */
body { padding-bottom: 56px; }

.sponsor-ticker {
  position: relative;   /* positioning context for the absolute label + fades */
  background: var(--ink);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sponsor-ticker--docked {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
}
.sponsor-ticker__label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0 18px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.sponsor-ticker::before, .sponsor-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.sponsor-ticker::after {
  right: 0;
  background: linear-gradient(270deg, var(--ink), transparent);
}
.sponsor-ticker__track {
  display: flex;
  gap: 36px;
  white-space: nowrap;
  animation: scroll-x 100s linear infinite;
  padding-left: 140px;
}
.sponsor-ticker__item--link { cursor: pointer; }
.sponsor-ticker__item--link:hover .sponsor-ticker__name { text-decoration: underline; }
.sponsor-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.sponsor-ticker__pby {
  color: var(--mute);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.sponsor-ticker__name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.sponsor-ticker__tag {
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sponsor-ticker__sep {
  color: var(--gold);
  font-size: 8px;
}

@media (max-width: 720px) {
  .sponsor-ticker__label { font-size: 9px; padding: 0 12px; }
  .sponsor-ticker__track { padding-left: 100px; gap: 24px; }
  .sponsor-ticker__name { font-size: 18px; }
  .sponsor-ticker__tag { display: none; }
}

/* ============================================================
   HELP & SUGGESTIONS MODAL
   ============================================================ */
.modal__panel--help {
  max-width: 720px;
  background: var(--ink);
  border: 1px solid var(--pitch);
  padding: 32px;
}
.help-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule);
  margin: 8px 0 24px;
}
.help-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule);
  padding: 12px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mute);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.help-tab:last-child { border-right: none; }
.help-tab:hover { color: var(--bone); }
.help-tab--active {
  background: var(--pitch);
  color: var(--ink);
  font-weight: 700;
}
.help-panel { display: none; }
.help-panel--active { display: block; }
.help-h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pitch);
  margin: 18px 0 8px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.help-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone);
  margin-bottom: 12px;
  counter-reset: helplist;
}
.help-list li {
  counter-increment: helplist;
  position: relative;
  padding-left: 42px;
  min-height: 24px;
}
.help-list li::before {
  content: counter(helplist, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 4px;
  width: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--pitch);
  border-top: 1px solid var(--pitch);
  padding-top: 6px;
  text-align: left;
}
.help-list strong { color: var(--pitch); }
.help-p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone);
}
.help-p strong { color: var(--pitch); }

/* FAQ accordion */
.help-q {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.help-q summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--bone);
  list-style: none;
  padding-right: 28px;
  position: relative;
}
.help-q summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: -2px;
  color: var(--pitch);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  transition: transform 0.2s;
}
.help-q[open] summary::after { content: '−'; }
.help-q p {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
}
.help-q p strong { color: var(--bone); }

/* REPORT FORM */
.help-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.help-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.help-input {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--bone);
  outline: none;
  transition: border-color 0.2s;
}
.help-input:focus { border-color: var(--pitch); }
.help-input::placeholder { color: var(--mute-2); }
.help-select {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.help-fineprint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute);
  margin-top: 4px;
}

/* DATA OPTIONS */
.help-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.help-option {
  border: 1px solid var(--rule);
  padding: 16px;
  background: var(--ink-2);
  position: relative;
}
.help-option--current { border-color: var(--gold); background: rgba(255,206,0,0.04); }
.help-option--active { border-color: var(--pitch); background: rgba(0,255,133,0.04); }
.help-option__num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--mute);
}
.help-option h4 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--bone);
  margin-bottom: 6px;
}
.help-option p {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}
.help-option p strong { color: var(--bone); }
.help-option__status {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
  padding: 4px 8px;
  border: 1px solid var(--rule);
}
.help-option--current .help-option__status { color: var(--gold); border-color: var(--gold); }
.help-option--active .help-option__status { color: var(--pitch); border-color: var(--pitch); }

@media (max-width: 720px) {
  .help-tabs { flex-direction: column; }
  .help-tab { border-right: none; border-bottom: 1px solid var(--rule); }
  .help-tab:last-child { border-bottom: none; }
}

/* PAYWALL MODAL */
.modal__panel--paywall {
  max-width: 520px;
  background: var(--ink);
  border: 2px solid var(--gold);
}

/* Share prompt — overlays the complete modal after a leaderboard submit */
.share-prompt {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 12, 8, 0.94);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.share-prompt[hidden] { display: none; }
.share-prompt__card {
  text-align: center;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.share-prompt__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--pitch);
  background: rgba(0, 200, 83, 0.14);
  border: 1px solid var(--pitch);
  padding: 6px 14px;
  border-radius: 999px;
}
.share-prompt__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 52px);
  line-height: 0.95;
  color: var(--bone);
  margin: 4px 0 0;
}
.share-prompt__lede {
  font-size: 14px;
  line-height: 1.45;
  color: var(--mute-2);
  margin: 0;
  max-width: 300px;
}
.share-prompt__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

/* Premium share-card theme picker */
.card-themes { margin: 6px 0 12px; width: 100%; }
.card-themes__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--mute-2, #8a96a0);
  margin-bottom: 8px;
}
.card-themes__row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.card-theme {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  min-width: 58px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.card-theme:hover { transform: translateY(-1px); }
.card-theme__sw {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sw, #00c853);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
}
.card-theme__label {
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 800; letter-spacing: 0.05em;
  color: var(--bone, #e8e6df);
}
.card-theme--active { border-color: var(--sw, #00c853); background: rgba(255,255,255,0.07); }
.card-theme--locked { opacity: 0.72; }
.card-theme--locked .card-theme__sw { filter: saturate(0.55); }
.share-prompt__actions .xi-btn { width: 100%; justify-content: center; }
.share-prompt__skip {
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--mute);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px;
}
.share-prompt__skip:hover { color: var(--bone); }
.modal__panel--paywall .modal__title em {
  color: var(--gold);
}
.modal__panel--paywall .modal__kicker {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  display: inline-block;
}
.pw-features {
  list-style: none;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pw-features li {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--bone);
  line-height: 1.45;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.pw-features__bullet {
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 12px;
  flex-shrink: 0;
}
/* keep the description as ONE flowing unit so the bold mode label can't
   become its own flex item and wrap ("TOP" / "50") */
.pw-features__text { flex: 1; min-width: 0; }
.pw-features__mode {
  white-space: nowrap;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.pw-features__perk { color: var(--mute); font-size: 14px; }
.pw-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 18px;
  margin-top: 8px;
}
.pw-price__amount {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
}
.pw-price__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.pw-cta {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  font-size: 14px;
  padding: 20px 24px;
  justify-content: center;
  gap: 12px;
}
.pw-cta:hover:not(:disabled) {
  background: #ffd633;
  color: var(--ink);
}
.pw-foot {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mute);
  margin-top: 4px;
}
.pw-foot a {
  color: var(--bone);
  text-decoration: underline;
}
.pw-foot a:hover { color: var(--gold); }

/* SUBMIT ROW IN COMPLETE MODAL */
.submit-row {
  margin-top: 20px;
  background: rgba(0,0,0,0.18);
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
/* Hero variant — bigger, more inviting copy for the BUILT BY field */
.submit-row--hero {
  display: block;
  background: #0b130e;                      /* dark inset — readable on the green panel */
  border: 2px solid var(--gold, #ffc400);
  padding: 18px;
  margin-top: 24px;
  border-radius: 8px;
  animation: heroPulse 2.4s ease-in-out infinite;
}
@keyframes heroPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,200,83,0); }
  50%     { box-shadow: 0 0 18px 0 rgba(0,200,83,0.25); }
}
.submit-row--hero .submit-row__topline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin-bottom: 12px;
}
.submit-row--hero .submit-row__label {
  font-family: var(--font-display, Impact);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--paper, #fff);
  text-transform: uppercase;
}
.submit-row__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold, #ffc400);
  font-weight: 700;
}
.submit-row--hero .submit-row__inputrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
/* Two-box variant: NAME + CITY share row 1, the POST button takes its own full
   row below. Flex + min-width:0 so the inputs shrink instead of shoving the
   button off-screen (it was a rigid 3-col grid that overflowed on desktop). */
.submit-row--hero .submit-row__inputrow--split {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.submit-row--hero .submit-row__inputrow--split .submit-row__input {
  flex: 1 1 140px;
  min-width: 0;
}
.submit-row--hero .submit-row__inputrow--split #submitLineupBtn {
  flex: 1 1 100%;
  justify-content: center;
}
.submit-row--hero .submit-row__input--city {
  /* slightly dimmer placeholder since it's optional */
  opacity: 0.96;
}
.submit-row--hero .submit-row__input {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 14px 16px;
  background: rgba(0,0,0,0.45);
  color: var(--paper, #fff);
  border: 2px solid rgba(0,200,83,0.4);
  border-radius: 3px;
  text-transform: uppercase;
}
.submit-row--hero .submit-row__input::placeholder { color: var(--mute); letter-spacing: 0.06em; }
.submit-row--hero .submit-row__input:focus {
  border-color: var(--pitch);
  box-shadow: 0 0 0 3px rgba(0,200,83,0.18);
}
.submit-row--hero #submitLineupBtn {
  background: var(--pitch);
  color: var(--ink);
  border: 2px solid var(--pitch);
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.submit-row--hero #submitLineupBtn:hover:not(:disabled) {
  background: #00e573;
  border-color: #00e573;
}
@media (max-width: 600px) {
  .submit-row--hero .submit-row__inputrow,
  .submit-row--hero .submit-row__inputrow--split { grid-template-columns: 1fr; }
}

/* CTA banner above the leaderboard table — invites new visitors */
.leaderboard__cta {
  display: block;
  background: linear-gradient(135deg, rgba(255,196,0,0.12), rgba(0,200,83,0.06));
  border: 1px solid var(--gold, #ffc400);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 16px 0;
  text-decoration: none;
  color: var(--paper, #fff);
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.leaderboard__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,196,0,0.15);
}
.leaderboard__cta-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold, #ffc400);
  font-weight: 800;
}
.leaderboard__cta-title {
  display: block;
  font-family: var(--font-display, Impact);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--paper, #fff);
  margin: 6px 0 4px;
}
.leaderboard__cta-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
@media (max-width: 600px) {
  .leaderboard__cta-title { font-size: 17px; }
}
.submit-row__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.submit-row__input {
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--ink);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  outline: none;
}
.submit-row__input::placeholder { color: var(--mute); }
.submit-row__input:focus { box-shadow: 0 0 0 2px var(--ink); }

.xi-btn--ink {
  background: var(--ink);
  color: var(--pitch);
  border: 2px solid var(--ink);
  padding: 14px 18px;
  font-size: 12px;
}
.xi-btn--ink:hover:not(:disabled) {
  background: #1f1f1f;
  color: var(--pitch);
}
.xi-btn--ghost-ink {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.xi-btn--ghost-ink:hover:not(:disabled) {
  background: var(--ink);
  color: var(--pitch);
}
/* SHARE AS IMAGE / POST ON X have no trailing arrow, so centre their labels
   (base .xi-btn uses space-between for buttons that do carry an arrow). */
#shareImgBtn, #shareXBtn { justify-content: center; }

/* On the bright-green complete modal, give the ghost buttons a dark fill so the
   text is readable (dark-on-green outlines were too low-contrast). */
.modal__panel--complete .xi-btn--ghost-ink {
  background: rgba(0,0,0,0.55);
  color: var(--bone, #f4f1ea);
  border-color: rgba(255,255,255,0.22);
}
.modal__panel--complete .xi-btn--ghost-ink:hover:not(:disabled) {
  background: #0b130e;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

@media (max-width: 720px) {
  .submit-row { grid-template-columns: 1fr; }
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-2);
  color: var(--pitch);
  border: 1px solid var(--pitch);
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 250;
  animation: toast-in 0.3s, toast-out 0.3s 2.4s forwards;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- LEADERBOARD ---------- */
.leaderboard {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad) 60px;
  border-top: 1px solid var(--rule);
}
.leaderboard__head {
  margin-bottom: 40px;
  max-width: 700px;
}
.leaderboard__head .section__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--pitch);
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--pitch);
}
.leaderboard__head .section__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 18px;
}
.leaderboard__head .section__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  color: var(--pitch);
}
.leaderboard__head .section__lede {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--mute);
  line-height: 1.55;
}
/* Leaderboard mode filter tabs (ALL / CLASSIC / TOP 50 / LEGENDS) */
/* Leaderboard time-period toggle (ALL TIME / THIS WEEK) */
.leaderboard__period {
  display: inline-flex;
  gap: 4px;
  margin: 16px 0 0;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--ink-2, #16191e);
}
.lb-period {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.lb-period:hover { color: var(--bone); }
.lb-period--active { color: var(--ink); background: var(--pitch); }

.leaderboard__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}
.lb-filter {
  flex: 1 1 auto;
  min-width: 72px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--ink-2, #16191e);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lb-filter:hover { color: var(--bone); border-color: var(--mute); }
.lb-filter--active {
  color: var(--ink);
  background: var(--pitch);
  border-color: var(--pitch);
}
.lb-filter--daily:not(.lb-filter--active) { color: var(--gold, #ffc400); border-color: rgba(255,196,0,0.4); }
.lb-filter--daily.lb-filter--active { background: var(--gold, #ffc400); border-color: var(--gold, #ffc400); }

/* ALL-tab top-25 cap: "show all" toggle + pinned "your rank" row */
.lb-showall {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--bone, #e8e6df);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lb-showall:hover { background: rgba(255,255,255,0.07); }
.lb-pin-sep {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.22em;
  color: var(--mute-2, #8a96a0);
  padding: 12px 0 4px;
}
.lb-row--pinned { border: 1px solid var(--gold, #ffc400); border-radius: 6px; }

/* Rank movement: ▲ up (green) / ▼ down (red) / NEW (gold) since last load */
.lb-move {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.3;
  margin: 1px 0;
}
.lb-move--up { color: #4ade80; }
.lb-move--down { color: #f87171; }
.lb-move--new { color: var(--gold, #ffc400); }
.lb-move--same { color: var(--mute-2, #8a96a0); opacity: 0.45; }
/* Legend defining the movement symbols (shown above the rows when tracking) */
.lb-legend {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--mute-2, #8a96a0);
  text-align: center;
  padding: 6px 8px 10px;
  line-height: 1.7;
}
.lb-legend .lb-move { display: inline; margin: 0; font-size: 9px; }

.lb-empty {
  text-align: center;
  padding: 40px 20px;
}
.lb-empty__title {
  font-family: var(--font-display, Impact);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--bone);
  margin: 0 0 6px;
}
.lb-empty__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mute);
  margin: 0;
}
.leaderboard__grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
/* GLOBAL / LOCAL leaderboard status badge */
.lb-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  text-transform: uppercase;
}
.lb-meta--global {
  color: var(--pitch);
  background: rgba(0, 200, 83, 0.06);
}
.lb-meta--local {
  color: var(--mute);
  background: rgba(255,255,255,0.02);
}
.lb-row {
  display: grid;
  grid-template-columns: 120px 1fr 100px;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s;
}
.lb-row:hover { background: var(--ink-2); padding-left: 12px; padding-right: 12px; }
.lb-row--user {
  background: rgba(0,255,133,0.06);
  border-left: 3px solid var(--pitch);
  padding-left: 9px;
  padding-right: 12px;
}
.lb-row--user .lb-row__rank-num { color: var(--pitch); }
.lb-row__rank { display: flex; flex-direction: column; gap: 6px; }
.lb-row__rank-num {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 0.9;
  color: var(--bone);
}
.lb-row__mode {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mute);
}
.lb-row__body { display: flex; flex-direction: column; gap: 6px; }
.lb-row__lineup {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--bone);
  line-height: 1.4;
}
.lb-row__by {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
/* Tournament finish badge on each leaderboard row */
.lb-finish {
  display: inline-block;
  align-self: flex-start;   /* don't stretch to the row width in the flex column */
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
/* Tiny "FINISH" prefix — distinguishes the tournament-result pill from board rank */
.lb-finish__pre {
  font-size: 7px;
  font-weight: 700;
  opacity: 0.65;
  letter-spacing: 0.16em;
  margin-right: 6px;
  vertical-align: 1px;
}
.lb-finish--champ  { color: var(--gold, #ffc400); background: rgba(255,196,0,0.12); }
.lb-finish--runner { color: #d7dde3; background: rgba(215,221,227,0.10); }
.lb-finish--podium { color: #e0a06a; background: rgba(205,127,50,0.12); }
.lb-finish--ko     { color: var(--mute-2, #8a96a0); background: rgba(138,150,160,0.10); }
/* Expert (blind draft) badge — score counts double */
.lb-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lb-badges .lb-finish, .lb-badges .lb-expert { margin-top: 0; }
.lb-expert {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  color: #c08cff;
  background: rgba(177,78,255,0.14);
  border: 1px solid #c08cff;
  white-space: nowrap;
}
.lb-row__ovr { text-align: right; }
.lb-row__ovr-num {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--pitch);
  line-height: 0.9;
  display: block;
}
.lb-row__ovr-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mute);
}
/* Expert score breakdown: original OVR × multiplier, above the PTS label */
.lb-row__ovr-calc {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bone);
  line-height: 1.2;
}
.lb-row__ovr-mult { color: var(--gold); }
/* Live form pill next to a board score — shows the CLIMB (🔥 +4 from a struck
   built value) and gently pulses so the score reads as alive. */
.lb-row__live {
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
  animation: lbLivePulse 2.4s ease-in-out infinite;
}
.lb-row__live s { opacity: 0.5; font-weight: 600; margin-left: 3px; }
@keyframes lbLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
/* Form DRIVERS — the players actually moving this score (🔥 hot / ❄️ cold) */
.lb-row__drivers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lb-driver {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.lb-driver--up { color: #4ade80; background: rgba(74,222,128,0.12); }
.lb-driver--down { color: #f87171; background: rgba(248,113,113,0.12); }
.lb-driver--more { color: var(--mute); background: rgba(255,255,255,0.05); }
.lb-row__live--up { color: #0c1410; background: rgba(74,222,128,0.95); }
.lb-row__live--down { color: #fff; background: rgba(248,113,113,0.95); }

/* Yesterday's DAILY winner — collapsible hero atop the daily board */
.lb-ywin {
  margin: 6px 0 14px;
  border: 1px solid rgba(255,210,74,0.4);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,210,74,0.08), rgba(255,210,74,0.02));
  overflow: hidden;
}
.lb-ywin__sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
}
.lb-ywin__sum::-webkit-details-marker { display: none; }
.lb-ywin__crown {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  color: #ffd24a;
  white-space: nowrap;
}
.lb-ywin__name {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--bone, #e8e6df);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-ywin__score { font-family: var(--font-display); font-size: 26px; line-height: 0.9; }
.lb-ywin__lineup {
  margin: 0; padding: 0 14px 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.03em; line-height: 1.6;
  color: var(--mute-2, #8a96a0);
  border-top: 1px dashed rgba(255,210,74,0.25);
  padding-top: 10px;
}

/* ---------- ABOUT ---------- */
.about {
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad) 32px;
  border-top: 1px solid var(--rule);
}
.about__inner { max-width: 1100px; }
.about .section__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--pitch);
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--pitch);
}
.about .section__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 50px;
}
.about .section__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  color: var(--pitch);
}
.about__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.about__cols > div {
  background: var(--ink);
  padding: 28px;
}
.about__cols h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--pitch);
  margin-bottom: 14px;
}
.about__cols p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone);
}
.about__cols strong { color: var(--pitch); font-weight: 700; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .xi-game { grid-template-columns: 1fr; gap: 24px; }
  .xi-spinner-col { position: relative; top: 0; }
  .xi-pitch { max-width: 480px; margin: 0 auto; }
  .about__cols { grid-template-columns: 1fr; }
  .lb-row { grid-template-columns: 80px 1fr 80px; gap: 14px; }
  .lb-row__ovr-num { font-size: 32px; }
}
@media (max-width: 720px) {
  .xi-modes { width: 100%; }
  .xi-mode { flex: 1; padding: 12px 8px; font-size: 11px; }
  .slot { width: 64px; height: 88px; padding: 6px 4px; }
  .slot__filled-name { font-size: 10px; }
  .slot__filled-flag { width: 26px; height: 18px; }
  .slot__filled-rating { font-size: 10px; }
  .lb-row { grid-template-columns: 1fr; gap: 8px; }
  .lb-row__ovr { text-align: left; }
}

/* ============================================================
   iPHONE-FRIENDLY OVERRIDES — keep everything readable + touchable
   on 375-430px devices (iPhone SE → 16 Pro Max)
   ============================================================ */
@media (max-width: 480px) {
  /* prevent iOS zoom-on-focus by ensuring inputs are >= 16px */
  input, textarea, select, .help-input, .submit-row__input,
  .newsletter__form input { font-size: 16px !important; }

  /* tighter modal frame so content actually fills the screen */
  .modal { padding: 12px; }
  .modal__panel {
    padding: 20px 16px;
    gap: 14px;
    border-width: 1px;
  }
  .modal__panel--complete,
  .modal__panel--help,
  .modal__panel--paywall { padding: 20px 16px; }
  .modal__head { gap: 10px; }
  .modal__title { font-size: 28px; line-height: 0.95; }
  .modal__lede { font-size: 13px; line-height: 1.45; }
  .modal__kicker { font-size: 10px; }
  .modal__close {
    width: 36px; height: 36px; font-size: 22px;
    flex-shrink: 0;
    min-width: 36px; min-height: 36px;
  }

  /* pick modal — cards in 2 lean columns instead of 3 cramped ones */
  .modal__players {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .player {
    padding: 12px 10px;
    gap: 6px;
  }
  /* clear visual separation between position+rating row and the rest */
  .player__top {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 4px;
    min-height: 28px;
  }
  .player__pos {
    font-size: 10px;
    padding: 3px 8px;
    letter-spacing: 0.12em;
  }
  .player__rating {
    font-size: 22px;
    line-height: 1;
  }
  .player__name { font-size: 14px; line-height: 1.1; }
  .player__club { font-size: 9px; }
  .player__league { font-size: 8px; padding: 1px 4px; }
  .player__fit { font-size: 9px; padding-top: 6px; margin-top: 2px; }

  /* pick modal footer — stack PASS + SWAP, full width */
  .modal__foot--pick {
    flex-direction: column;
    gap: 8px;
  }
  .modal__foot--pick .xi-btn {
    width: 100%;
    padding: 14px;
    font-size: 11px;
    justify-content: center;
  }

  /* complete modal footer — stack centered, swap full width */
  .modal__foot--complete {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .modal__foot-center { flex-direction: column; gap: 8px; }
  .modal__foot-center .xi-btn { width: 100%; }
  .modal__foot--complete .xi-btn--gold { width: 100%; padding: 14px; }

  /* submit row in complete modal — stack label/input/button */
  .submit-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }
  .submit-row__input { padding: 14px; }
  .xi-btn--ink { padding: 14px; font-size: 11px; justify-content: center; }

  /* help modal tabs already stack — adjust spacing */
  .help-tab { padding: 14px 10px; font-size: 11px; min-height: 44px; }
  .help-h3 { font-size: 10px; margin: 14px 0 6px; }
  .help-list, .help-p { font-size: 14px; }
  .help-q summary { font-size: 14px; padding-right: 24px; }
  .help-q p { font-size: 13px; }

  /* paywall — tighter price block */
  .pw-price { padding: 14px; }
  .pw-price__amount { font-size: 44px; }
  .pw-cta { padding: 16px; font-size: 13px; }
  .pw-features li { font-size: 13px; }

  /* hero shrinks on mobile so the game is above the fold */
  .xi-hero { padding: 40px 16px 24px; }
  .xi-hero__title { font-size: clamp(44px, 14vw, 80px); line-height: 0.9; margin: 16px 0 16px; }
  .xi-hero__lede { font-size: 14px; }
  .meta-tag { font-size: 10px; padding: 4px 10px; }

  /* game padding tighter on mobile */
  .xi-game { padding: 16px 12px 140px; gap: 16px; }  /* clear the stacked spin + sponsor bars */
  .xi-resources { grid-template-columns: 1fr 1fr; gap: 6px; }
  .xi-res { padding: 10px 12px; }
  .xi-res__label { font-size: 10px; }
  .xi-res__pip { width: 8px; height: 8px; }

  /* buttons in control panel — full width, large touch targets */
  .xi-btn { padding: 16px 16px; font-size: 12px; min-height: 48px; }
  .xi-btn__arrow { font-size: 15px; }

  /* spinner cards smaller so 3 fit */
  .xi-spinner { height: 180px; }
  .xi-card { flex: 0 0 90px; height: 110px; padding: 8px 6px; gap: 6px; }
  .xi-card__flag { width: 62px; height: 42px; }
  .xi-card__name { font-size: 11px; }
  .xi-spinner__name { font-size: 24px; }
  .xi-spinner__flag .result-flag-img { width: 72px; height: 48px; }

  /* pitch header */
  .xi-pitch-head__formation { font-size: 11px; }
  .xi-pitch-head__overall { font-size: 22px; }

  /* xi-share — swap+share side by side at mobile widths */
  .xi-share { flex-direction: column; gap: 8px; }
  .xi-share .xi-btn { width: 100%; padding: 14px; }

  /* leaderboard rows */
  .lb-row__rank-num { font-size: 28px; }
  .lb-row__lineup { font-size: 12px; line-height: 1.4; }
  .lb-row__by { font-size: 9px; }
  .lb-row__ovr-num { font-size: 28px; }

  /* sponsor ticker tighter */
  .sponsor-ticker { padding: 10px 0; }
  .sponsor-ticker__label { padding: 0 10px; font-size: 8px; letter-spacing: 0.12em; }
  .sponsor-ticker__track { padding-left: 90px; }
  .sponsor-ticker__name { font-size: 16px; }

  /* topbar tighter */
  .topbar__inner { padding: 10px 12px; gap: 8px; }
  .brand__mark { width: 32px; height: 32px; font-size: 16px; }
  .brand__name { font-size: 17px; }
  .brand__sub { display: none; }
}

/* iPhone SE / smallest screens */
@media (max-width: 380px) {
  .modal__players { grid-template-columns: 1fr !important; }
  .modal__title { font-size: 24px; }
  .xi-hero__title { font-size: 48px; }
}