@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Plus+Jakarta+Sans:wght@500;600&family=Space+Grotesk:wght@700&display=swap');

/* Display fonts are self-hosted (assets/fonts/) so the broadcast look never
   depends on fonts.gstatic.com being reachable. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  /* block, not swap: the wordmark + headings stay invisible for a moment
     rather than painting in the fallback font and jumping to Anton (FOUT).
     The files are tiny and preloaded, so the wait is imperceptible. */
  font-display: block;
  src: url("../assets/fonts/anton-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: block;
  src: url("../assets/fonts/oswald-latin-var.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --font-head: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", sans-serif;

  /* ── Brand palette ── sharp dark-mode product, electric-green accent. */
  --color-bg: #101418;
  --color-accent: #6bff61;
  --color-silver: #aeb6be;
  --color-surface: #1a1f24;
  --color-text: #ffffff;

  --bg: #101418;
  --bg-elevated: #1a1f24;
  --surface: #1a1f24;
  --surface-muted: #232a31;
  --surface-contrast: #0b0e12;
  --text: #ffffff;
  --text-muted: #aeb6be;
  --text-on-dark: #ffffff;

  --primary: #6bff61;
  --primary-strong: #4fe048;
  --primary-ink: #06210b;
  --navy: #232a31;
  --accent-lime: #6bff61;
  --accent-blue: #4f93ff;
  --accent-orange: #ff8a3d;
  --danger: #ff5a5a;
  --success: #6bff61;

  --line: #2a323b;
  --line-strong: #3b4551;
  --focus: #6bff61;

  /* Accent glow - scoreboard, not webpage. */
  --glow-accent: 0 0 12px rgba(107, 255, 97, 0.4);
  --glow-accent-strong: 0 0 22px rgba(107, 255, 97, 0.55);
  --glow-accent-soft: 0 0 0 3px rgba(107, 255, 97, 0.16);

  /* Sharp geometry: 4px on cards, 2px on buttons. */
  --radius-s: 4px;
  --radius-m: 4px;
  --radius-l: 6px;
  --radius-btn: 2px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.62);

  --header-height: 76px;
  --max-width: 1180px;
  --transition-fast: 120ms ease;
  --transition-med: 180ms ease;
}

/* The product is dark in both theme states; the toggle keeps working but never
   drops the app into a washed-out light theme. */
html[data-theme="dark"],
html[data-theme="light"] {
  color-scheme: dark;
  --bg: #101418;
  --bg-elevated: #1a1f24;
  --surface: #1a1f24;
  --surface-muted: #232a31;
  --surface-contrast: #0b0e12;
  --text: #ffffff;
  --text-muted: #aeb6be;
  --text-on-dark: #ffffff;

  --primary: #6bff61;
  --primary-strong: #4fe048;
  --navy: #232a31;
  --accent-lime: #6bff61;
  --accent-blue: #4f93ff;
  --accent-orange: #ff8a3d;
  --line: #2a323b;
  --line-strong: #3b4551;

  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.62);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Decorative blobs/doodles can extend past the right edge; clip the page-level
     horizontal scroll so mobile doesn't get a sideways "jiggle". clip (not
     hidden) avoids creating a scroll container that would break sticky headers. */
  overflow-x: clip;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* ── Custom scrollbars (Webkit) ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ── Text selection ── */
::selection {
  background: color-mix(in srgb, var(--accent-lime) 40%, transparent);
  color: var(--text);
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: radial-gradient(circle at 90% -10%, rgba(24, 167, 255, 0.18), transparent 36%),
    radial-gradient(circle at 12% 0%, rgba(216, 255, 77, 0.2), transparent 30%),
    var(--bg);
  line-height: 1.45;
  position: relative;
  overflow-x: hidden;
}

body.sport-nba {
  --primary: #4f46e5;
  --primary-strong: #3730a3;
  --accent-blue: #60a5fa;
  --accent-orange: #fb923c;
  --line: #d5d9ec;
  --line-strong: #c1c7e6;
  background:
    radial-gradient(circle at 86% -12%, rgba(96, 165, 250, 0.2), transparent 38%),
    radial-gradient(circle at 10% 0%, rgba(251, 146, 60, 0.2), transparent 34%),
    var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.18;
  background-image: repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 74px,
      rgba(15, 90, 59, 0.12) 74px,
      rgba(15, 90, 59, 0.12) 76px
    ),
    linear-gradient(to bottom, rgba(9, 44, 30, 0.04), transparent 33%);
}

body.sport-nba::before {
  background-image: repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 58px,
      rgba(79, 70, 229, 0.12) 58px,
      rgba(79, 70, 229, 0.12) 60px
    ),
    radial-gradient(circle at 48% 50%, rgba(251, 146, 60, 0.1), transparent 42%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button,
.btn {
  min-height: 44px;
}

input[type="text"],
input[type="number"],
select {
  min-height: 44px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

main {
  padding-bottom: 6rem;
}

.container {
  width: min(var(--max-width), 92vw);
  margin-inline: auto;
}

.section {
  margin-top: clamp(2rem, 4vw, 4rem);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 700;
}

.kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-lime);
  box-shadow: 0 0 0 6px rgba(216, 255, 77, 0.3);
}

.section-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: 0.02em;
  line-height: 1;
}

.section-copy {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
  max-width: 62ch;
}

.page-shell {
  min-height: 100vh;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.sports-switcher {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  padding: 0.2rem;
  display: inline-flex;
  gap: 0.2rem;
}

.sport-tab {
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  padding: 0.28rem 0.66rem;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sport-tab span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--text-muted) 85%, transparent);
}

.sport-tab.is-active {
  background: color-mix(in srgb, var(--accent-lime) 28%, var(--surface));
  color: color-mix(in srgb, var(--primary) 90%, black);
}

.sport-tab.is-disabled {
  color: var(--text-muted);
  border: 1px dashed color-mix(in srgb, var(--line-strong) 88%, transparent);
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface));
}

.header-inner {
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}

.header-left-cluster {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.header-sports {
  align-self: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.brand img,
.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.brand strong,
.brand-wordmark {
  font-family: "Space Grotesk", var(--font-head), sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.menu-toggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  width: 42px;
  height: 42px;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--text);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.top-nav-links {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.top-nav-link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.top-nav-link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-muted) 90%, transparent);
}

.top-nav-link.is-active {
  background: color-mix(in srgb, var(--accent-lime) 24%, var(--surface));
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* "Other Games" nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > summary {
  cursor: pointer;
  list-style: none;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown-summary::after {
  content: "▾";
  font-size: 0.7em;
  margin-left: 0.35rem;
  transition: transform var(--transition-fast);
}
.nav-dropdown[open] > .nav-dropdown-summary::after { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m, 10px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.nav-dropdown-item {
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-s);
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.nav-dropdown-item:hover {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-muted));
  color: var(--text);
}
.nav-dropdown-item.is-hub {
  color: var(--primary);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  margin-bottom: 0.2rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.auth-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  padding: 0.35rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.icon-btn:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.icon-btn img {
  width: 18px;
  height: 18px;
}

[data-theme-token] {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  font-weight: 800;
}

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: 0.8rem 1.2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  transition: transform var(--transition-fast), filter var(--transition-fast),
    box-shadow var(--transition-fast), background var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
}

/* Tactile press - quick scale-down, nothing sluggish. */
.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  color: var(--primary-ink);
  background: var(--primary);
  box-shadow: var(--glow-accent);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-accent-strong);
}

.btn-primary:active {
  transform: scale(0.96);
}

.btn-secondary {
  color: var(--text);
  background: var(--surface-muted);
  border-color: var(--line-strong);
}

.btn-secondary:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong));
  box-shadow: var(--glow-accent);
}

.btn-outline {
  color: var(--text);
  border-color: var(--line-strong);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--glow-accent);
}

.btn-ghost {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--line);
}

.btn-full {
  width: 100%;
}

.hero {
  margin-top: var(--space-6);
  border-radius: var(--radius-l);
  overflow: hidden;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(130deg, color-mix(in srgb, var(--primary) 90%, black), color-mix(in srgb, var(--navy) 90%, black));
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hero::before {
  opacity: 0.16;
  background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 18px,
      rgba(255, 255, 255, 0.06) 18px,
      rgba(255, 255, 255, 0.06) 20px
    ),
    radial-gradient(circle at 12% 8%, rgba(216, 255, 77, 0.4), transparent 34%),
    radial-gradient(circle at 80% 0%, rgba(24, 167, 255, 0.35), transparent 34%);
}

.hero::after {
  background: linear-gradient(to top, rgba(8, 14, 20, 0.65), rgba(8, 14, 20, 0.08));
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--text-on-dark);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.hero-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.hero-subtitle {
  margin-top: var(--space-3);
  margin-bottom: 0;
  max-width: 48ch;
  color: color-mix(in srgb, white 86%, #8eb8a0);
}

.hero-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero-badges {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stat-chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 0.45rem 0.7rem;
  background: var(--surface-muted);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  font-weight: 300;
}

.stat-chip b {
  color: var(--primary);
  font-weight: 800;
}

.hero-panel {
  border-radius: var(--radius-m);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(11, 16, 24, 0.35);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.hero-panel h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}

.hero-panel p {
  margin: 0;
  color: color-mix(in srgb, white 80%, #94b2a0);
}

.hero-mini-feed {
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-2);
}

.feed-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.feed-row strong {
  color: white;
}

.icon-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-lime);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}

.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-blue) 60%, transparent), transparent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent-blue) 25%, var(--line-strong));
}

.card:hover::after {
  opacity: 1;
}

.card-tag {
  margin: 0;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--text-muted);
}

.card-title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-head);
  font-size: 2rem;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.card-copy {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
}

.step-card {
  display: grid;
  gap: var(--space-3);
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-lime) 30%, var(--surface));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: color-mix(in srgb, var(--primary) 75%, black);
}

.icon-token {
  width: 26px;
  height: 26px;
  color: var(--accent-blue);
  /* The SVGs use stroke="currentColor", which <img> can't inherit - they were
     rendering near-black on the dark step cards. Force them white. */
  filter: brightness(0) invert(1);
}

.mode-card {
  display: grid;
  gap: var(--space-3);
}

.mode-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.mode-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-blue) 18%, var(--surface-muted));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-icon-wrap img {
  width: 20px;
  height: 20px;
}

.mode-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.pill {
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  border: 1px solid var(--line);
  color: var(--text-muted);
}

.pill--lime {
  border-color: color-mix(in srgb, var(--accent-lime) 60%, var(--line));
  background: color-mix(in srgb, var(--accent-lime) 18%, transparent);
  color: color-mix(in srgb, var(--primary) 74%, black);
}

.pill--danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: color-mix(in srgb, var(--danger) 90%, black);
}

.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.65rem 0.3rem 0.3rem;
}

.player-chip img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.player-chip span {
  font-size: 0.85rem;
  font-weight: 600;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-head);
  letter-spacing: 0.05em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 0.25rem 0.55rem;
  font-size: 1.12rem;
}

.score-badge.is-live {
  border-color: color-mix(in srgb, var(--accent-orange) 58%, var(--line));
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
  animation: scorePulse 1.8s ease-out infinite;
}

@keyframes scorePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

.match-card {
  display: grid;
  gap: var(--space-3);
}

.match-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.match-teams {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.match-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.match-time {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.stat-bar {
  display: grid;
  gap: var(--space-2);
}

.stat-bar-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.stat-bar-track {
  background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
  border-radius: var(--radius-pill);
  overflow: hidden;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.stat-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-blue), var(--primary));
}

.nav-tabs-wrap {
  margin-bottom: var(--space-4);
}

.nav-tabs {
  display: inline-flex;
  position: relative;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.nav-tab {
  border: none;
  background: transparent;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.nav-tab.is-active {
  color: var(--text);
}

.nav-tabs-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-lime) 30%, var(--surface));
  transition: transform var(--transition-med), width var(--transition-med);
  z-index: 1;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.table-wrap {
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--surface-muted) 92%, transparent);
}

.leaderboard-table td {
  padding: 0.9rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  font-weight: 500;
}

.leaderboard-table tr {
  transition: background var(--transition-fast);
}

.leaderboard-table tr:hover {
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
}

.rank-pill {
  min-width: 2.1rem;
  padding: 0.2rem 0.45rem;
  display: inline-flex;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1rem;
}

.rank-pill.top {
  border-color: color-mix(in srgb, var(--accent-lime) 65%, var(--line));
  color: color-mix(in srgb, var(--primary) 90%, black);
  background: color-mix(in srgb, var(--accent-lime) 20%, transparent);
}

.profile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  border: 2px solid color-mix(in srgb, var(--accent-blue) 40%, var(--line));
  box-shadow: var(--shadow-sm);
}

.profile-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: 2.5rem;
  line-height: 0.95;
}

.profile-meta {
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.stat-tile {
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--space-4);
}

.stat-tile .label {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.stat-tile .value {
  margin-top: var(--space-2);
  font-family: var(--font-head);
  font-size: 2rem;
  line-height: 0.95;
}

.win-ring {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--success) calc(var(--value) * 1%), color-mix(in srgb, var(--surface-muted) 90%, transparent) 0%);
  position: relative;
}

.win-ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
}

.win-ring strong {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-size: 2.4rem;
}

.achievement-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.achievement-badge {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.pitch-diagram {
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, black), color-mix(in srgb, var(--primary-strong) 94%, black));
  padding: var(--space-5);
  color: var(--text-on-dark);
}

.pitch-grid {
  border-radius: var(--radius-s);
  border: 2px solid rgba(255, 255, 255, 0.22);
  min-height: 220px;
  position: relative;
  padding: var(--space-5);
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.06) 18px,
    rgba(255, 255, 255, 0.02) 18px,
    rgba(255, 255, 255, 0.02) 36px
  );
}

.pitch-grid::before,
.pitch-grid::after {
  content: "";
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.24);
}

.pitch-grid::before {
  inset: 22% 10% auto;
  height: 56%;
}

.pitch-grid::after {
  inset: 0;
  width: 2px;
  margin-inline: auto;
  border: none;
  background: rgba(255, 255, 255, 0.28);
}

.formation-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  background: var(--accent-lime);
  box-shadow: 0 0 0 6px rgba(216, 255, 77, 0.18);
}

.formation-dot.alt {
  background: var(--accent-blue);
  box-shadow: 0 0 0 6px rgba(24, 167, 255, 0.2);
}

.bracket-scroll {
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.bracket {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: var(--space-5);
  min-width: 920px;
}

.bracket-round h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-head);
  font-size: 1.8rem;
  letter-spacing: 0.04em;
}

.bracket-stack {
  display: grid;
  gap: var(--space-4);
}

.bracket-node {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  padding: 0.65rem 0.75rem;
  position: relative;
}

.bracket-node::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: color-mix(in srgb, var(--line-strong) 88%, transparent);
}

.bracket-round:last-child .bracket-node::after {
  display: none;
}

.bracket-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

.bracket-team + .bracket-team {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.bracket-team strong {
  font-weight: 700;
}

.broadcast-banner {
  border-radius: var(--radius-m);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--accent-orange) 42%, var(--line));
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-orange) 18%, var(--surface)), var(--surface));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.broadcast-banner h3 {
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  font-size: 2rem;
}

.site-footer {
  padding: 2rem 0 6rem;
  color: var(--text-muted);
}

.footer-inner {
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-links a {
  color: var(--text-muted);
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--text);
}

.mobile-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 0.45rem 0.8rem max(0.45rem, env(safe-area-inset-bottom));
}

.mobile-tabbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

.mobile-tabbar li {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

.mobile-tabbar a {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.mobile-tabbar a.is-active {
  color: var(--text);
}

.mobile-tabbar img {
  width: 17px;
  height: 17px;
  /* The icon SVGs stroke with currentColor, which resolves to BLACK when
     loaded via <img> - invert them to a light grey so they read on the
     dark bar (the active label stays brighter via color on the <a>). */
  filter: invert(0.82) brightness(1.1);
}

.mobile-tabbar a.is-active img {
  filter: invert(1);
}

/* The center Play FAB icon sits on the bright green disc - keep it dark. */
.mobile-play img {
  filter: none;
}

.mobile-play {
  position: relative;
  top: -0.85rem;
}

.mobile-play a {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin-inline: auto;
  background: linear-gradient(120deg, var(--accent-lime), #f2ffad);
  color: #0f1914;
  display: grid;
  place-items: center;
  border: 4px solid var(--bg);
  box-shadow: 0 8px 18px rgba(5, 22, 16, 0.25);
}

.mobile-play span {
  display: none;
}

.play-fab {
  position: fixed;
  right: 1rem;
  bottom: 5.6rem;
  z-index: 25;
  display: none;
}

.modal-layer {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 60;
  padding: 1rem;
}

.modal-layer.is-open {
  display: grid;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 10, 0.65);
}

.modal {
  position: relative;
  width: min(520px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  transform: scale(0.95);
  opacity: 0;
  animation: modalIn 180ms ease forwards;
}

@keyframes modalIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.modal-head h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 2rem;
}

.modal-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  cursor: pointer;
}

.input-group {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.input-group label {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}

.input-group input,
.input-group select,
.input-group textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.7rem 0.75rem;
  background: var(--bg-elevated);
}

.toast-root {
  position: fixed;
  right: 1rem;
  top: calc(var(--header-height) + 0.9rem);
  z-index: 70;
  display: grid;
  gap: var(--space-2);
}

.toast {
  min-width: 230px;
  max-width: 320px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: 0.7rem 0.85rem;
  animation: toastSlide 200ms ease;
  font-size: 0.9rem;
}

.toast.success {
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
}

.toast.info {
  border-color: color-mix(in srgb, var(--accent-blue) 38%, var(--line));
}

@keyframes toastSlide {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.hide-desktop {
  display: none;
}

.cta-ribbon {
  margin-top: var(--space-6);
  border-radius: var(--radius-l);
  padding: clamp(1.1rem, 4vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, var(--line));
  background: linear-gradient(112deg, color-mix(in srgb, var(--accent-blue) 10%, var(--surface)), var(--surface));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cta-ribbon h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 0.95;
}

.cta-ribbon p {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
}

.landing-hero {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.landing-copy {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
  padding: clamp(1rem, 3vw, 1.8rem);
  box-shadow: var(--shadow-lg);
}

.landing-tagline {
  margin: 0.65rem 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-muted);
  font-weight: 300;
  max-width: 36ch;
}

.landing-demo {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg-elevated));
  padding: clamp(0.9rem, 2.8vw, 1.3rem);
  box-shadow: var(--shadow-md);
}

.demo-board {
  margin-top: 0.55rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.demo-card,
.demo-core {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  min-height: 92px;
  padding: 0.6rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.45rem;
}

.demo-card strong {
  font-size: 0.86rem;
}

.demo-avatar {
  width: 44px;
  height: 56px;
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 78%, black), color-mix(in srgb, var(--navy) 78%, black));
  position: relative;
}

.demo-avatar::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, white 84%, #c5d4cc);
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
}

.demo-avatar::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 16px;
  border-radius: 15px 15px 8px 8px;
  background: color-mix(in srgb, white 84%, #c5d4cc);
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
}

.demo-core {
  grid-column: 1 / -1;
  min-height: 100px;
  background: color-mix(in srgb, var(--surface-muted) 74%, var(--surface));
}

.demo-core p {
  margin: 0;
  font-weight: 700;
  color: var(--text-muted);
}

.demo-input {
  border-radius: var(--radius-pill);
  border: 1px dashed var(--line-strong);
  background: var(--bg-elevated);
  padding: 0.42rem 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.weekly-teaser {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.weekly-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.auth-shell {
  max-width: 760px;
  margin-inline: auto;
}

.auth-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.auth-tab {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  padding: 0.55rem 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.auth-tab.is-active {
  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--accent-blue) 10%, var(--surface));
}

.auth-panel {
  display: none;
}

.auth-panel.is-active {
  display: block;
}

.auth-form {
  display: grid;
  gap: 0.75rem;
}

.auth-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth-form input {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-elevated);
  padding: 0.68rem 0.75rem;
}

.auth-status {
  margin: 1rem 0 0;
  font-weight: 700;
}

.auth-status.is-success {
  color: color-mix(in srgb, var(--success) 85%, var(--text));
}

.auth-status.is-error {
  color: color-mix(in srgb, var(--danger) 85%, var(--text));
}

.auth-status.is-info {
  color: color-mix(in srgb, var(--accent-blue) 78%, var(--text));
}

.profile-shell {
  display: grid;
  gap: 1rem;
}

.profile-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.profile-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.friend-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.friend-search-form input {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  padding: 0.65rem 0.8rem;
}

.friend-columns {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.friend-list {
  display: grid;
  gap: 0.55rem;
}

.friend-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-elevated);
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.25rem;
}

.friend-item small {
  color: var(--text-muted);
}

.friend-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.friend-progress-grid {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(20, minmax(28px, 1fr));
  gap: 0.35rem;
  overflow-x: auto;
}

.friend-progress-tile {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-elevated);
  min-height: 44px;
  display: grid;
  place-items: center;
  position: relative;
  font-size: 0.75rem;
  font-weight: 700;
}

.friend-progress-tile b {
  position: absolute;
  right: 0.18rem;
  top: 0.1rem;
  color: color-mix(in srgb, var(--success) 92%, black);
  font-size: 0.72rem;
}

.friend-progress-tile.is-complete {
  border-color: color-mix(in srgb, var(--success) 48%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

.admin-shell {
  display: grid;
  gap: 1rem;
}

.admin-gate {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
}

.admin-block {
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.admin-block:first-child {
  border-top: none;
  padding-top: 0;
}

.admin-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-chart-grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.admin-chart-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-elevated);
  padding: 0.65rem;
}

.admin-chart-card h3 {
  margin: 0;
  font-size: 0.88rem;
}

.admin-chart {
  margin-top: 0.55rem;
  min-height: 120px;
}

.mini-bars {
  min-height: 120px;
  display: flex;
  align-items: end;
  gap: 0.18rem;
}

.mini-bar {
  flex: 1;
  min-width: 4px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent-blue), var(--primary));
}

.admin-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.admin-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-controls input,
.admin-controls select {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  padding: 0.55rem 0.75rem;
}

.admin-user-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.admin-user-detail-grid p,
.admin-user-detail-grid h3 {
  margin: 0.24rem 0;
}

.admin-user-lists {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.admin-user-lists h4 {
  margin: 0 0 0.35rem;
}

.admin-user-lists ul {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.2rem;
}

/* ── Admin tab navigation ─────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  margin-bottom: 1.5rem;
  /* Grid/flex items default to min-width:auto, which stops overflow-x:auto from
     ever scrolling — the row just grows and gets clipped by the card. Allow it
     to shrink so the tabs actually scroll sideways. */
  min-width: 0;
  max-width: 100%;
}
.admin-tab { flex: 0 0 auto; }
.admin-tabs::-webkit-scrollbar { display: none; }

.admin-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 0.6rem 0.9rem;
  text-transform: uppercase;
  transition: color 120ms ease, border-color 120ms ease;
  margin-bottom: -1px;
  line-height: 1;
  white-space: nowrap;
}

.admin-tab:hover {
  color: var(--text);
}

.admin-tab.is-active {
  border-bottom-color: var(--accent-lime);
  color: var(--accent-lime);
}

.admin-tab-panel[hidden] {
  display: none;
}

/* First admin-block inside a tab panel has no top border */
.admin-tab-panel > .admin-block:first-child {
  border-top: none;
  padding-top: 0;
}

.level-select {
  margin-top: var(--space-5);
}

.level-select-head {
  position: sticky;
  top: calc(var(--header-height) + 2.8rem);
  z-index: 15;
}

.level-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.level-select-controls {
  margin-top: 0.9rem;
  display: flex;
  align-items: end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.level-search {
  display: grid;
  gap: 0.35rem;
}

.level-search span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
}

.level-search input {
  width: 180px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  padding: 0.58rem 0.8rem;
}

.level-grid-wrap {
  margin-top: var(--space-3);
}

.level-select .level-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.55rem;
  max-height: 58vh;
  overflow: auto;
  padding-right: 0.3rem;
}

.level-tile {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  padding: 0.42rem;
  display: grid;
  gap: 0.12rem;
  justify-items: center;
  align-content: center;
  cursor: pointer;
  position: relative;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.level-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--line));
  box-shadow: var(--shadow-sm);
}

.level-tile:disabled {
  cursor: not-allowed;
  opacity: 0.74;
}

.level-tile.is-unlocked {
  border-color: color-mix(in srgb, var(--accent-blue) 36%, var(--line));
}

.level-tile.is-completed {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

/* Level of the Week - a separate, signed-in-only feature panel beside the grid. */
.level-of-week-aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), var(--surface));
  box-shadow: var(--glow-accent-soft);
}
.level-of-week-aside .low-copy {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.level-of-week-aside .low-star {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--primary);
  filter: drop-shadow(var(--glow-accent));
  animation: fpPopIn 0.5s cubic-bezier(0.34, 1.6, 0.44, 1) both;
}
.level-of-week-aside .low-title { margin: 0.1rem 0 0.2rem; font-size: 1.15rem; }
.level-of-week-aside .low-sub { margin: 0; color: var(--text-muted); font-size: 0.86rem; max-width: 48ch; }
.level-of-week-aside .low-play { flex-shrink: 0; }

/* Legacy weekly-tile styling (tile no longer rendered in the grid). */
.level-tile--weekly {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 24%, var(--surface)), var(--surface));
  box-shadow: var(--glow-accent-soft);
}
.level-tile--weekly .level-weekly-star {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--primary);
}
.level-tile--weekly .level-num {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.level-tile--weekly .level-weekly-label {
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.05;
  text-align: center;
}
.level-tile--weekly.is-locked {
  border-style: dashed;
  opacity: 0.9;
}
.level-tile--weekly.is-locked .level-state { color: var(--primary); }

.level-tile-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.03);
}

.level-tile.is-completed.has-complete-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 12, 9, 0.08), rgba(5, 12, 9, 0.58));
}

.level-tile.is-completed.has-complete-art .level-num,
.level-tile.is-completed.has-complete-art .level-state,
.level-tile.is-completed.has-complete-art .level-check {
  position: relative;
  z-index: 2;
}

.level-tile.is-completed.has-complete-art .level-num {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.level-tile.is-completed.has-complete-art .level-state {
  color: rgba(255, 255, 255, 0.92);
}

.level-tile.is-data-pending {
  border-style: dashed;
}

.level-tile.is-highlight {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-orange) 28%, transparent);
}

.level-num {
  font-family: var(--font-head);
  font-size: 1.35rem;
  line-height: 0.9;
}

.level-state {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  font-weight: 700;
}

.level-check {
  position: absolute;
  top: 0.24rem;
  right: 0.24rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--success) 70%, var(--line));
  background: color-mix(in srgb, var(--success) 20%, var(--surface));
  color: color-mix(in srgb, var(--success) 92%, black);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 1080px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-header {
    grid-template-columns: auto 1fr;
  }

  .profile-header .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 880px) {
  .menu-toggle {
    display: inline-flex;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
  }

  .sport-tab {
    font-size: 0.71rem;
  }

  .header-left-cluster {
    min-width: 0;
    gap: var(--space-2);
  }

  .header-sports {
    max-width: 100%;
  }

  .top-nav-links {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1rem 1rem;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    border-bottom: 1px solid var(--line);
  }

  .top-nav-links.is-open {
    display: flex;
  }

  .top-nav-link {
    border-radius: var(--radius-s);
  }

  /* Dropdown renders inline (indented) inside the open mobile nav panel. */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    padding: 0.2rem 0 0.2rem 0.85rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .header-actions .btn {
    display: none;
  }

  .auth-pill {
    display: none;
  }

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .friend-columns {
    grid-template-columns: 1fr;
  }

  .admin-chart-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-detail-grid,
  .admin-user-lists {
    grid-template-columns: 1fr;
  }

  .level-select .level-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hide-mobile {
    display: none;
  }

  .hide-desktop {
    display: inline-flex;
  }

  .mobile-tabbar {
    display: block;
  }

  .play-fab {
    display: inline-flex;
  }

  .site-footer {
    padding-bottom: 7.5rem;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(var(--max-width), 94vw);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .stat-tiles {
    grid-template-columns: 1fr;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .sports-switcher {
    max-width: 100%;
  }

  .header-sports {
    width: auto;
  }

  .header-sports .sport-tab {
    flex: 0 0 auto;
    justify-content: center;
    padding: 0.26rem 0.52rem;
    font-size: 0.67rem;
  }

  .header-sports .sport-tab span {
    display: none;
  }

  .level-select-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .friend-search-form {
    grid-template-columns: 1fr;
  }

  .level-select .level-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-header {
    grid-template-columns: 1fr;
  }

  .profile-avatar {
    width: 82px;
    height: 82px;
  }

  .toast-root {
    left: 0.7rem;
    right: 0.7rem;
    top: auto;
    bottom: 6.3rem;
  }

  .toast {
    max-width: none;
  }
}

/* FourPlayers core puzzle board */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.game-hud {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mode-switch-btn {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  padding: 0.45rem 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.mode-switch-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--line-strong));
  color: var(--text);
}

.mode-switch-btn.is-active {
  border-color: color-mix(in srgb, var(--accent-lime) 65%, var(--line-strong));
  background: color-mix(in srgb, var(--accent-lime) 22%, var(--surface));
  color: color-mix(in srgb, var(--primary) 82%, black);
}

.hud-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.hud-chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.6rem;
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.hud-chip small {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.hud-chip strong {
  font-family: var(--font-head);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.03em;
}

.hud-actions {
  grid-column: 1 / -1;
  justify-self: start;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.level-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.level-step-btn {
  min-height: 36px;
  padding: 0.36rem 0.72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 46%, var(--line));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent-blue) 20%, var(--surface)),
    color-mix(in srgb, var(--navy) 16%, var(--surface))
  );
  color: color-mix(in srgb, var(--text) 90%, black);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.66rem;
  box-shadow: 0 6px 14px rgba(15, 43, 76, 0.16);
}

.level-step-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.level-step-btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.level-board {
  position: relative;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, var(--bg)), var(--surface));
  box-shadow: var(--shadow-md);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  overflow: hidden;
}

.level-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 58px,
      color-mix(in srgb, var(--primary) 20%, transparent) 58px,
      color-mix(in srgb, var(--primary) 20%, transparent) 60px
    ),
    linear-gradient(to bottom, transparent 50%, color-mix(in srgb, var(--primary) 10%, transparent));
}

.level-board .level-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(320px, 1.18fr) minmax(210px, 1fr);
  grid-template-rows: minmax(210px, 1fr) minmax(210px, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

.fp-player-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg-elevated));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-3);
  padding: 0.7rem;
  transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}

.fp-player-card[data-slot="1"] {
  grid-column: 1;
  grid-row: 1;
}

.fp-player-card[data-slot="2"] {
  grid-column: 3;
  grid-row: 1;
}

.fp-player-card[data-slot="3"] {
  grid-column: 1;
  grid-row: 2;
}

.fp-player-card[data-slot="4"] {
  grid-column: 3;
  grid-row: 2;
}

.fp-player-card {
  transition: transform var(--transition-med), border-color var(--transition-med),
    box-shadow var(--transition-med);
}

.fp-player-card.is-hint-revealed {
  border-color: color-mix(in srgb, var(--accent-orange) 58%, var(--line));
  box-shadow: 0 0 12px rgba(255, 138, 61, 0.28);
}

/* The solve payoff: green glow + a quick confirm flash. */
.fp-player-card.is-correct {
  border-color: var(--primary);
  box-shadow: var(--glow-accent-strong), var(--glow-accent-soft);
  animation: fp-correct-flash 520ms ease;
}

@keyframes fp-correct-flash {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); box-shadow: 0 0 26px rgba(107, 255, 97, 0.75); }
  100% { transform: scale(1); }
}

.fp-player-media {
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 76%, black), color-mix(in srgb, var(--navy) 80%, black));
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 0;
  display: grid;
  place-items: center;
}

.fp-player-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  padding: 0;
}

.fp-player-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, color-mix(in srgb, var(--primary) 70%, black), color-mix(in srgb, var(--navy) 85%, black));
}

.fp-player-fallback img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}

.fp-player-body {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.fp-player-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.67rem;
  color: var(--text-muted);
  font-weight: 700;
}

.fp-player-name {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 0.9;
  letter-spacing: 0.03em;
}

.fp-player-hint {
  margin-top: 0.25rem;
  min-height: 2.55rem;
  padding-right: 0.35rem;
  padding-bottom: 1.75rem;
}

.hint-chip-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.hint-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 0.63rem;
  color: color-mix(in srgb, var(--accent-orange) 70%, var(--text-muted));
  font-weight: 800;
}

.team-chip {
  display: inline-flex;
  margin-top: 0.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent-orange) 50%, var(--line));
  background: color-mix(in srgb, var(--accent-orange) 14%, var(--surface));
  padding: 0.24rem 0.55rem;
  font-weight: 700;
  font-size: 0.78rem;
}

.team-chip.is-new {
  animation: teamChipReveal 420ms ease;
}

@keyframes teamChipReveal {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.42);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    box-shadow: 0 0 0 6px rgba(249, 115, 22, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

.guess-core {
  grid-column: 2;
  grid-row: 1 / span 2;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 28%, var(--line));
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--bg-elevated)), color-mix(in srgb, var(--surface-muted) 84%, var(--surface)));
  padding: clamp(0.9rem, 2.4vw, 1.4rem);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  box-shadow: 0 10px 28px rgba(8, 22, 16, 0.1);
}

/* Clue + hints: a strip below the board on desktop, and directly below the
   player pictures on mobile. */
.guess-aux {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.guess-aux .inline-hints {
  margin: 0;
  flex: 0 0 auto;
}

.guess-aux .single-clue-card {
  flex: 1 1 260px;
  margin: 0;
}

.guess-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.73rem;
  color: var(--text-muted);
  font-weight: 700;
}

.guess-rule {
  margin: 0;
  color: var(--text-muted);
}

.status-line {
  margin: 0;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 0.55rem 0.7rem;
  font-weight: 600;
  color: var(--text);
}

.status-line.is-warning {
  border-color: color-mix(in srgb, var(--accent-orange) 48%, var(--line));
}

.status-line.is-success {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line));
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
}

.status-line.is-fail {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.success-banner {
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--success) 62%, var(--line));
  background: linear-gradient(105deg, color-mix(in srgb, var(--success) 24%, var(--surface)), color-mix(in srgb, var(--accent-lime) 18%, var(--surface)));
  color: color-mix(in srgb, var(--primary-strong) 92%, black);
  font-family: var(--font-head);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.42rem 0.7rem;
  width: fit-content;
}

.guess-chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-muted) 80%, var(--surface));
  width: fit-content;
  padding: 0.28rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.inline-hints {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
}

.switch-row {
  margin: 0.1rem 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-muted) 70%, var(--surface));
  min-height: 44px;
  padding: 0.3rem 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  user-select: none;
}

.switch-label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}

.switch-control {
  position: relative;
  width: 52px;
  height: 30px;
  display: inline-flex;
  align-items: center;
}

.switch-control input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-track {
  width: 52px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-fast);
}

.switch-control input:checked + .switch-track {
  background: color-mix(in srgb, var(--accent-blue) 30%, var(--surface));
  border-color: color-mix(in srgb, var(--accent-blue) 65%, var(--line-strong));
}

.switch-control input:checked + .switch-track::after {
  transform: translateX(22px);
}

.guess-form {
  position: relative;
}

.guess-input-wrap {
  display: flex;
  gap: 0.5rem;
}

.guess-input {
  flex: 1;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line-strong);
  background: var(--surface-contrast);
  color: var(--text);
  padding: 0.72rem 0.9rem;
  font-size: 0.96rem;
  font-weight: 600;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.guess-input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 80%, transparent);
}

.guess-input:focus,
.guess-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--glow-accent-soft);
}

.guess-input.is-shake {
  animation: guessShake 280ms ease;
}

@keyframes guessShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

.next-level-strip {
  margin-top: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--line));
  border-radius: var(--radius-s);
  padding: 0.55rem 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

.countdown-ring {
  position: relative;
  width: 38px;
  height: 38px;
}

.countdown-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.countdown-ring .ring-track,
.countdown-ring .ring-fill {
  fill: none;
  stroke-width: 2.8;
}

.countdown-ring .ring-track {
  stroke: color-mix(in srgb, var(--line) 84%, transparent);
}

.countdown-ring .ring-fill {
  stroke: var(--success);
  stroke-dasharray: 95.5 95.5;
  stroke-linecap: round;
  transition: stroke-dasharray 70ms linear;
}

.countdown-ring strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 1.08rem;
}

.connector-lines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.connector-lines.is-active {
  opacity: 1;
}

.connector-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--success) 65%, transparent), transparent);
  transform-origin: left center;
  --line-rotate: 0deg;
  transform: rotate(var(--line-rotate)) scaleX(0);
  animation: linkGrow 420ms ease forwards;
}

.connector-line.l1 {
  --line-rotate: -146deg;
}

.connector-line.l2 {
  --line-rotate: -33deg;
}

.connector-line.l3 {
  --line-rotate: 145deg;
}

.connector-line.l4 {
  --line-rotate: 33deg;
}

@keyframes linkGrow {
  from {
    transform: rotate(var(--line-rotate)) scaleX(0);
  }
  to {
    transform: rotate(var(--line-rotate)) scaleX(1);
  }
}

.connector-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-l);
  border: 2px solid color-mix(in srgb, var(--success) 55%, var(--line));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  padding: 0.5rem 0.9rem 0.6rem;
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 80px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 10;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease;
}

.connector-burst.is-revealed {
  animation: burst-pop 360ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes burst-pop {
  0%   { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  60%  { transform: translate(-50%,-50%) scale(1.08); }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}

.connector-burst-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--success);
  background: var(--surface-muted);
}

.connector-burst-name {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--text);
  white-space: nowrap;
  line-height: 1.2;
}

.correct-player-flash {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: rgba(5, 12, 9, 0.26);
  opacity: 0;
  transition: opacity 180ms ease;
}

.correct-player-flash.is-visible {
  opacity: 1;
}

.correct-player-flash-card {
  min-width: min(92vw, 360px);
  border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--success) 68%, var(--line));
  background: color-mix(in srgb, var(--surface) 90%, var(--bg-elevated));
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 122px 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem;
  animation: correctFlashPop 240ms ease;
}

.correct-player-flash-card img {
  width: 122px;
  height: 152px;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 80%, black), color-mix(in srgb, var(--navy) 85%, black));
  padding: 0;
}

.correct-player-flash-copy {
  display: grid;
  gap: 0.25rem;
}

.correct-player-flash-copy p {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--success) 78%, var(--text-muted));
  font-weight: 800;
}

.correct-player-flash-copy strong {
  font-family: var(--font-head);
  line-height: 0.95;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  letter-spacing: 0.04em;
}

@keyframes correctFlashPop {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .correct-player-flash-card {
    min-width: min(94vw, 320px);
    grid-template-columns: 92px 1fr;
    gap: 0.6rem;
  }

  .correct-player-flash-card img {
    width: 92px;
    height: 118px;
  }
}

.level-board.is-success {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 26%, transparent), var(--shadow-md);
}

.level-board.level-exit .fp-player-card,
.level-board.level-exit .guess-core {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.results-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  padding: 1rem;
  background: rgba(5, 12, 9, 0.66);
  /* Tall result cards must stay reachable: the overlay scrolls, and the
     card's auto margins center it only when there is room to spare. */
  overflow-y: auto;
}

.results-overlay > .result-card {
  margin: auto;
}

.results-overlay[hidden] {
  display: none;
}

.result-card {
  width: min(450px, 100%);
  border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--line));
  background: var(--surface);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}

.result-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.73rem;
  color: color-mix(in srgb, var(--danger) 72%, var(--text-muted));
  font-weight: 700;
}

.result-card h3 {
  margin: 0.35rem 0 0;
  font-family: var(--font-head);
  font-size: 2rem;
  line-height: 0.92;
}

.result-card p {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
}

.result-connector-image {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  margin: 0.65rem 0 0;
  border: 2px solid var(--line);
  background: var(--surface-raised);
}

.result-player-name {
  margin: 0.25rem 0 0;
  font-family: var(--font-head);
  font-size: 2.1rem;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.result-descriptor {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.result-links {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.28rem;
}

.result-links li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.84rem;
  line-height: 1.4;
}

.result-links li strong {
  flex-shrink: 0;
  color: var(--text);
}

.result-links li span {
  color: var(--text-muted);
}

.result-actions {
  margin-top: 1rem;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

#reveal-answer-btn {
  width: 100%;
}

.single-clue-card {
  width: 100%;
  border-radius: var(--radius-s);
  border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--line));
  background: color-mix(in srgb, var(--accent-blue) 8%, var(--surface));
  padding: 0.6rem 0.72rem;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 0.3rem;
}

.level-board.hide-team-links .hint-label,
.level-board.hide-team-links .hint-chip-stack,
.level-board.hide-team-links .team-chip {
  display: none !important;
}

.clue-toggle-btn {
  width: 100%;
  min-height: 42px;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.clue-toggle-btn.is-locked {
  opacity: 0.72;
  box-shadow: none;
  cursor: pointer;
}

.clue-toggle-btn.is-unlocked {
  opacity: 1;
}

.single-clue-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.single-clue-text {
  margin: 0;
  font-weight: 700;
  line-height: 1.35;
}

body[data-page="play"] main {
  padding-bottom: 2rem;
}

@media (min-width: 1025px) {
  body[data-page="play"] {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-page="play"] .page-shell {
    min-height: 100vh;
    display: block;
  }

  body[data-page="play"] main {
    overflow: visible;
  }

  body[data-page="play"] main > .section {
    margin-top: 0.55rem;
    min-height: auto;
    display: block;
  }

  body[data-page="play"] .section-head {
    margin-bottom: 0.55rem;
  }

  body[data-page="play"] .section-title {
    font-size: clamp(1.8rem, 2.2vw, 2.3rem);
  }

  body[data-page="play"] .section-copy {
    margin-top: 0.18rem;
    font-size: 0.92rem;
    max-width: 100%;
  }

  body[data-page="play"] .game-hud {
    margin-bottom: 0.6rem;
    padding: 0.62rem 0.72rem;
    gap: 0.55rem;
  }

  body[data-page="play"] .level-board {
    min-height: 0;
    padding: 0.7rem;
  }

  body[data-page="play"] .level-board .level-grid {
    height: auto;
    gap: 0.7rem;
    grid-template-columns: minmax(165px, 1fr) minmax(320px, 1.15fr) minmax(165px, 1fr);
    grid-template-rows: minmax(152px, 1fr) minmax(152px, 1fr);
    align-items: start;
  }

  body[data-page="play"] .fp-player-card {
    grid-template-columns: 92px 1fr;
    padding: 0.55rem;
    gap: 0.5rem;
  }

  body[data-page="play"] .fp-player-name {
    font-size: clamp(1.15rem, 1.45vw, 1.5rem);
  }

  body[data-page="play"] .guess-core {
    padding: 0.82rem;
    gap: 0.42rem;
  }

  body[data-page="play"] .switch-row {
    min-height: 40px;
    padding: 0.24rem 0.5rem;
  }

  body[data-page="play"] .single-clue-card {
    padding: 0.5rem 0.6rem;
    min-height: 58px;
  }

  body[data-page="play"] #site-footer {
    display: block;
    padding: 1rem 0 2.25rem;
  }
}

@media (max-width: 1100px) {
  .level-board .level-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .guess-core {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .fp-player-card[data-slot="1"] {
    grid-column: 1;
    grid-row: 1;
  }

  .fp-player-card[data-slot="2"] {
    grid-column: 2;
    grid-row: 1;
  }

  .fp-player-card[data-slot="3"] {
    grid-column: 1;
    grid-row: 3;
  }

  .fp-player-card[data-slot="4"] {
    grid-column: 2;
    grid-row: 3;
  }

  .connector-line {
    width: 20%;
  }
}

@media (max-width: 860px) {
  .game-hud {
    grid-template-columns: 1fr;
  }

  .hud-stats {
    justify-content: flex-start;
  }

  .level-board .level-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .fp-player-card {
    grid-template-columns: 88px 1fr;
  }

  .fp-player-card[data-slot="1"] {
    grid-column: 1;
    grid-row: 1;
  }

  .fp-player-card[data-slot="2"] {
    grid-column: 2;
    grid-row: 1;
  }

  .guess-core {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .fp-player-card[data-slot="3"] {
    grid-column: 1;
    grid-row: 2;
  }

  .fp-player-card[data-slot="4"] {
    grid-column: 2;
    grid-row: 2;
  }

  .guess-input-wrap {
    flex-direction: column;
  }

  .guess-input-wrap .btn {
    width: 100%;
  }

  .connector-line {
    display: none;
  }

  .connector-burst {
    font-size: 1rem;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .container {
    width: min(var(--max-width), calc(100% - 64px));
  }

  .level-select .level-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .level-board .level-grid {
    grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.12fr) minmax(180px, 1fr);
  }

  .fp-player-card {
    grid-template-columns: 100px 1fr;
  }

  .fp-player-media {
    max-height: 68vh;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    width: min(var(--max-width), calc(100% - 48px));
  }

  .level-select .level-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .level-board .level-grid {
    grid-template-columns: minmax(240px, 0.95fr) minmax(300px, 1.05fr);
    grid-template-rows: repeat(4, minmax(150px, 1fr));
    gap: 0.9rem;
  }

  .fp-player-card[data-slot="1"] {
    grid-column: 1;
    grid-row: 1;
  }

  .fp-player-card[data-slot="2"] {
    grid-column: 1;
    grid-row: 2;
  }

  .fp-player-card[data-slot="3"] {
    grid-column: 1;
    grid-row: 3;
  }

  .fp-player-card[data-slot="4"] {
    grid-column: 1;
    grid-row: 4;
  }

  .guess-core {
    grid-column: 2;
    grid-row: 1 / span 4;
  }

  .fp-player-card {
    grid-template-columns: 120px 1fr;
  }

  .fp-player-name {
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  }

  .hint-chip-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 0.35rem;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .container {
    width: calc(100% - 32px);
  }

  .level-select .level-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .level-board .level-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.8rem;
  }

  .fp-player-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 0.8rem;
  }

  .fp-player-media {
    width: min(42vw, 240px);
  }

  .fp-player-body {
    justify-items: center;
  }

  .guess-core {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .guess-input-wrap {
    flex-direction: column;
  }

  .guess-input-wrap .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .container {
    width: calc(100% - 32px);
  }

  .level-select .level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .level-board {
    padding: 0.7rem;
  }

  .level-board .level-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.75rem;
  }

  .fp-player-card[data-slot="1"] {
    grid-column: 1;
    grid-row: 1;
  }

  .fp-player-card[data-slot="2"] {
    grid-column: 2;
    grid-row: 1;
  }

  .fp-player-card[data-slot="3"] {
    grid-column: 1;
    grid-row: 2;
  }

  .fp-player-card[data-slot="4"] {
    grid-column: 2;
    grid-row: 2;
  }

  .guess-core {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem;
  }

  .guess-form {
    order: 1;
  }

  .single-clue-card {
    order: 2;
  }

  #reveal-answer-btn {
    order: 3;
  }

  .inline-hints {
    order: 4;
    font-size: 0.9rem;
  }

  .status-line {
    order: 5;
  }

  .success-banner {
    order: 6;
    width: 100%;
    text-align: center;
  }

  .guess-chip {
    order: 7;
  }

  .next-level-strip {
    order: 8;
  }

  .fp-player-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 0.65rem;
  }

  .fp-player-media {
    width: min(40vw, 168px);
    max-width: 100%;
  }

  .fp-player-body {
    justify-items: center;
  }

  .fp-player-name {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }

  .fp-player-hint {
    display: grid;
    justify-items: center;
    width: 100%;
  }

  .hint-chip-stack {
    flex-direction: column;
    width: min(88vw, 300px);
    gap: 0.35rem;
  }

  .team-chip {
    width: 100%;
    justify-content: center;
  }

  .guess-input {
    font-size: 1rem;
  }
}

/* ============================================================
   FEATURE ADDITIONS - Google Ads, League Table, Google Sign-In,
   Dark Mode button, Leaderboard filters
   ============================================================ */

/* --- Ad slots --- */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.7rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-s);
  overflow: hidden;
  position: relative;
}

.ad-slot::after {
  content: attr(data-ad-label);
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.75;
}

.ad-slot--leaderboard {
  width: 100%;
  max-width: 728px;
  height: 90px;
  margin: 0 auto var(--space-3);
}

.ad-slot--infeed {
  width: 100%;
  height: 90px;
  margin: var(--space-5) 0;
}

.ad-slot--anchor {
  display: none;
}

@media (max-width: 767px) {
  .ad-slot--anchor {
    display: flex;
    position: fixed;
    bottom: 64px; /* above mobile tabbar */
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: 100%;
    height: 50px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    z-index: 890;
  }
}

/* Hide auth-required ads when body has guest-mode class */
body.guest-mode [data-auth-ad] {
  display: none !important;
}

/* --- Dark Mode toggle button --- */
.theme-toggle-fab {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  top: max(10px, env(safe-area-inset-top));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  cursor: pointer;
  z-index: 1001;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-toggle-fab:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--line-strong));
  box-shadow: var(--shadow-md);
}

.theme-toggle-fab [data-theme-token] {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
}

/* When the toggle lives inside the header it should be inline, not fixed */
.header-actions .theme-toggle-fab {
  position: relative;
  left: auto;
  top: auto;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* --- Leaderboard scope filter pills --- */
.leaderboard-scope-filter {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.scope-pill {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  min-height: 36px;
}

.scope-pill.is-active {
  background: var(--primary);
  color: var(--text-on-dark);
  border-color: var(--primary);
}

.scope-pill:hover:not(.is-active) {
  background: var(--surface-muted);
  color: var(--text);
}

/* --- Google Sign-In button --- */
.google-signin-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 0 var(--space-5);
  height: 44px;
  font-family: "Google Sans", Roboto, var(--font-body), sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  letter-spacing: 0.01em;
}

.btn-google:hover {
  background: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-google:active {
  background: #f1f3f4;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

@media (max-width: 767px) {
  .theme-toggle-fab {
    width: 48px;
    height: 48px;
  }
}

/* --- Other Games nav dropdown --- */
.games-dropdown {
  position: relative;
}

.games-dropdown > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.games-dropdown > summary::-webkit-details-marker {
  display: none;
}

.games-dropdown > summary::after {
  content: "▾";
  font-size: 0.7rem;
  opacity: 0.65;
}

.games-dropdown[open] > summary {
  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--line-strong));
  color: var(--text);
}

.games-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: 210px;
  z-index: 60;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  display: grid;
  gap: 0.2rem;
}

.games-dropdown-menu a,
.games-dropdown-menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.games-dropdown-menu a:hover,
.games-dropdown-menu button:hover {
  background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
}

/* --- Other Games hub page --- */
.other-games-shell {
  display: grid;
  gap: var(--space-5);
}

.other-games-picker {
  display: grid;
  gap: var(--space-2);
  max-width: 560px;
}

.other-games-picker label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
}

.other-games-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: center;
}

.other-games-picker-row select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  padding: 0.55rem 0.9rem;
}

.other-game-helper {
  margin: 0;
  color: var(--text-muted);
}

.other-games-grid {
  align-items: stretch;
}

.other-game-card {
  min-height: 260px;
  display: grid;
  gap: var(--space-3);
  cursor: pointer;
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}

.other-game-card.is-featured {
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--accent-lime) 34%, transparent), transparent 36%),
    radial-gradient(circle at 16% -10%, color-mix(in srgb, var(--accent-blue) 24%, transparent), transparent 48%),
    var(--surface);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}

.other-game-card.is-coming {
  opacity: 0.92;
}

.other-game-meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* --- Missing XI mode --- */
body.sport-missingxi {
  --mxi-accent: #92d14f;
  --mxi-glow: #5e9dff;
  --primary: #121519;
  --primary-strong: #0c1014;
  --surface: #141922;
  --surface-muted: #0f131a;
  --bg-elevated: #0d1117;
  --text: #f4f7fb;
  --text-muted: #9ba9bc;
  --line: rgba(138, 153, 179, 0.25);
  --line-strong: rgba(188, 198, 218, 0.4);
  background:
    radial-gradient(circle at 85% -8%, color-mix(in srgb, var(--mxi-glow) 22%, transparent), transparent 38%),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--mxi-accent) 18%, transparent), transparent 34%),
    linear-gradient(180deg, #06080d 0%, #0a1017 55%, #0a1118 100%);
}

body.sport-missingxi .card {
  background:
    linear-gradient(160deg, rgba(20, 26, 35, 0.92), rgba(12, 16, 23, 0.94)),
    radial-gradient(circle at 100% -25%, color-mix(in srgb, var(--mxi-glow) 15%, transparent), transparent 52%);
  border-color: color-mix(in srgb, var(--line-strong) 80%, rgba(255, 255, 255, 0.08));
}

body.sport-missingxi .section-title,
body.sport-missingxi .card-title,
body.sport-missingxi .card-copy,
body.sport-missingxi .kicker,
body.sport-missingxi .auth-pill,
body.sport-missingxi .top-nav-link,
body.sport-missingxi .brand strong,
body.sport-missingxi .brand brand-wordmark {
  color: #f4f7fb;
}

body.sport-missingxi .section-copy,
body.sport-missingxi .card-copy {
  color: #a5b3c4;
}

.mxi-shell {
  display: grid;
  gap: var(--space-4);
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, rgba(255, 255, 255, 0.08));
}

.mxi-hero {
  border: 1px solid color-mix(in srgb, var(--mxi-glow) 26%, var(--line));
  border-radius: var(--radius-m);
  padding: clamp(1rem, 2vw, 1.3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  background:
    radial-gradient(circle at 88% -20%, color-mix(in srgb, var(--mxi-glow) 28%, transparent), transparent 46%),
    linear-gradient(160deg, rgba(18, 26, 38, 0.9), rgba(12, 16, 24, 0.95));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.mxi-hero-hud {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
}

.mxi-local-nav {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.mxi-nav-btn {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.03em;
  min-height: 44px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.mxi-nav-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--mxi-glow) 44%, var(--line-strong));
}

.mxi-nav-btn.is-active {
  border-color: color-mix(in srgb, var(--mxi-accent) 56%, var(--line-strong));
  background: color-mix(in srgb, var(--mxi-accent) 18%, rgba(255, 255, 255, 0.04));
}

.mxi-panel {
  display: none;
}

.mxi-panel.is-active {
  display: block;
}

.mxi-today-layout {
  display: grid;
  /* Single column since the Progressive Reveal card was retired. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.mxi-fixture-card,
.mxi-reveal-card,
.mxi-lineup-card,
.mxi-round-card,
.mxi-archive-card,
.mxi-leaderboard-card,
.mxi-profile-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1rem;
  background: color-mix(in srgb, #101722 88%, transparent);
}

.mxi-fixture-card h2 {
  margin: 0.2rem 0 0.45rem;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  letter-spacing: 0.02em;
}

.mxi-competition {
  margin: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  font-weight: 700;
}

.mxi-context {
  margin: 0 0 0.7rem;
  color: color-mix(in srgb, var(--mxi-accent) 68%, #f7fafc);
  font-weight: 600;
}

.mxi-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: var(--space-3);
}

.mxi-play-btn {
  min-height: 46px;
}

.mxi-reveal-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.mxi-reveal-head h3,
.mxi-lineup-head h3,
.mxi-round-card h3 {
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: 0.03em;
}

.mxi-reveal-stage {
  border-top: 1px dashed color-mix(in srgb, var(--line-strong) 70%, transparent);
  padding-top: 0.7rem;
  margin-top: 0.65rem;
}

.mxi-stage-label {
  margin: 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.72rem;
  font-weight: 700;
}

.mxi-stage-copy {
  margin: 0.35rem 0 0;
  color: var(--text);
}

.mxi-stadium-wrap {
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0.5rem;
  border: 1px solid var(--line);
}

.mxi-stadium-wrap img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
}

#mxi-events-list {
  margin: 0.55rem 0 0;
  padding-left: 1rem;
  color: var(--text-muted);
  display: grid;
  gap: 0.35rem;
}

#mxi-commentary {
  margin: 0.6rem 0 0;
  border-left: 3px solid color-mix(in srgb, var(--mxi-glow) 60%, transparent);
  padding-left: 0.65rem;
  color: var(--text);
}

.mxi-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.mxi-round-card {
  display: grid;
  gap: 0.7rem;
}

.mxi-round-card .mxi-feedback {
  margin-top: 0;
}

.mxi-lineup-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: end;
  margin-bottom: 0.65rem;
}

.mxi-lineup-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.mxi-match-strip {
  margin-bottom: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent);
  border-radius: 12px;
  padding: 0.65rem 0.7rem;
  background:
    linear-gradient(160deg, rgba(27, 19, 45, 0.92), rgba(19, 14, 34, 0.96)),
    radial-gradient(circle at 85% -18%, color-mix(in srgb, var(--mxi-glow) 28%, transparent), transparent 52%);
}

.mxi-strip-competition,
.mxi-strip-date {
  margin: 0;
  text-align: center;
  color: #c8d1e8;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.mxi-strip-date {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #93a3c7;
}

.mxi-strip-scoreline {
  margin: 0.35rem 0 0.28rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.mxi-strip-team {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
}

.mxi-strip-team strong {
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  font-size: 0.95rem;
}

.mxi-strip-shirt {
  width: 24px;
  height: 19px;
  border-radius: 5px 5px 7px 7px;
  border: 1px solid #09101a;
  background:
    repeating-linear-gradient(
      90deg,
      #8f99af 0 6px,
      #d9deeb 6px 12px
    );
  clip-path: polygon(18% 0, 33% 16%, 67% 16%, 82% 0, 100% 18%, 86% 42%, 76% 36%, 76% 100%, 24% 100%, 24% 36%, 14% 42%, 0 18%);
}

.mxi-strip-shirt--target {
  background:
    repeating-linear-gradient(
      90deg,
      var(--mxi-shirt, #ce3524) 0 6px,
      var(--mxi-shirt-secondary, #ffffff) 6px 12px
    );
}

.mxi-strip-score {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.9vw, 1.8rem);
  letter-spacing: 0.08em;
  color: #f4f8ff;
}

.mxi-lineup {
  position: relative;
  min-height: clamp(620px, 72vh, 860px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 66%, transparent);
  background:
    linear-gradient(180deg, rgba(12, 41, 24, 0.94), rgba(11, 35, 22, 0.94)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.055) 0,
      rgba(255, 255, 255, 0.055) 2px,
      transparent 2px,
      transparent 62px
    );
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(0.5rem, 1.1vh, 0.9rem);
  padding: clamp(0.75rem, 1.9vw, 1.2rem);
}

.mxi-lineup::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  border: 1px solid rgba(231, 242, 255, 0.22);
  pointer-events: none;
}

.mxi-lineup::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(231, 242, 255, 0.25);
  pointer-events: none;
}

.mxi-line {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: clamp(0.35rem, 1.2vw, 0.8rem);
  position: relative;
  z-index: 1;
}

.mxi-line[data-row-size="1"] {
  justify-content: center;
}

.mxi-line[data-row-size="2"] {
  justify-content: space-around;
  padding-inline: clamp(1rem, 6vw, 4rem);
}

.mxi-slot {
  position: relative;
  width: clamp(104px, 10.3vw, 138px);
  min-height: 126px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent);
  border-radius: 14px;
  padding: 0.38rem 0.42rem 0.42rem;
  display: grid;
  align-content: start;
  gap: 0.24rem;
  background: color-mix(in srgb, #0b1420 78%, rgba(0, 0, 0, 0.32));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.mxi-slot::before {
  content: "";
  width: 62px;
  height: 44px;
  margin: 0 auto 0.2rem;
  background:
    repeating-linear-gradient(
      90deg,
      var(--mxi-shirt, var(--mxi-accent)) 0 11px,
      var(--mxi-shirt-secondary, #ffffff) 11px 22px
    );
  border: 2px solid var(--mxi-shirt-trim, rgba(255, 255, 255, 0.45));
  border-radius: 8px 8px 12px 12px;
  clip-path: polygon(18% 0, 33% 16%, 67% 16%, 82% 0, 100% 18%, 86% 42%, 76% 36%, 76% 100%, 24% 100%, 24% 36%, 14% 42%, 0 18%);
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.15);
}

.mxi-slot.is-gk::before {
  background: #f3df47;
}

.mxi-slot-pos {
  color: var(--mxi-shirt-ink, #0b111a);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-align: center;
  background: color-mix(in srgb, var(--mxi-shirt, var(--mxi-accent)) 78%, #fff 22%);
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  justify-self: center;
}

.mxi-slot-hint {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.25;
  text-align: center;
  color: var(--text-muted);
  min-height: 2.2em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mxi-slot-num {
  margin: -2.1rem auto 0.16rem;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid rgba(6, 10, 16, 0.9);
  background: rgba(6, 10, 16, 0.86);
  color: #f6f9ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.mxi-slot strong {
  font-size: 0.95rem;
  line-height: 1.25;
}

.mxi-slot-form {
  margin-top: 0.08rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.22rem;
}

.mxi-slot-input {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #f4f7fb 95%, transparent);
  color: #0e1522;
  padding: 0.28rem 0.52rem;
  font-size: 0.66rem;
  font-weight: 700;
}

.mxi-slot-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--mxi-glow) 72%, #ffffff);
  outline-offset: 1px;
}

.mxi-slot-submit {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--mxi-accent) 48%, var(--line-strong));
  border-radius: 999px;
  padding: 0.26rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 800;
  color: #f7fbff;
  background: color-mix(in srgb, var(--mxi-accent) 46%, #14253b);
  cursor: pointer;
}

.mxi-slot-submit:hover {
  filter: brightness(1.05);
}

.mxi-slot.is-solved {
  border-style: solid;
  border-color: color-mix(in srgb, var(--mxi-accent) 60%, var(--line-strong));
  background: color-mix(in srgb, var(--mxi-accent) 16%, rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mxi-accent) 32%, transparent);
}

.mxi-slot.is-solved .mxi-slot-hint,
.mxi-slot.is-revealed .mxi-slot-hint {
  color: #f2f7ff;
  font-weight: 800;
}

.mxi-feedback {
  margin: 0.65rem 0 0;
  font-weight: 600;
}

.mxi-feedback.is-success {
  color: var(--success);
}

.mxi-feedback.is-error {
  color: color-mix(in srgb, var(--danger) 82%, #fff);
}

.mxi-feedback.is-muted {
  color: var(--text-muted);
}

.mxi-mini-stats {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.mxi-mini-stats span {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.5rem;
  background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
  display: grid;
  gap: 0.2rem;
}

.mxi-mini-stats small {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.63rem;
  font-weight: 700;
}

.mxi-mini-stats strong {
  font-size: 1.02rem;
}

.mxi-guess-log-wrap {
  margin-top: var(--space-3);
}

.mxi-guess-log-title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  font-weight: 700;
}

#mxi-guess-log {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

#mxi-guess-log li {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

#mxi-guess-log li.is-correct {
  border-color: color-mix(in srgb, var(--success) 58%, var(--line-strong));
}

#mxi-guess-log li.is-wrong {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--line));
}

#mxi-guess-log li.is-muted {
  color: var(--text-muted);
}

.mxi-archive-head h2 {
  margin: 0;
  font-family: var(--font-head);
}

.mxi-archive-head p {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
}

.mxi-archive-list {
  margin-top: var(--space-3);
  display: grid;
  gap: 0.55rem;
  max-height: min(62vh, 680px);
  overflow: auto;
  padding-right: 0.2rem;
}

.mxi-archive-item {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  /* The archive card has a fixed dark background, so the text must be light
     regardless of theme - it was near-invisible in light mode. */
  color: #eef2f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  cursor: pointer;
}

.mxi-archive-item strong { color: #ffffff; }

.mxi-archive-item p {
  margin: 0.2rem 0 0;
  color: #b7c3da;
  font-size: 0.88rem;
}

.mxi-archive-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mxi-archive-meta {
  display: grid;
  justify-items: end;
  gap: 0.3rem;
  color: #b7c3da;
  font-size: 0.78rem;
}

.mxi-archive-empty {
  margin: 0;
  color: #b7c3da;
}

/* Dark mxi cards: keep all listing/leaderboard/stats copy light in any theme */
.mxi-archive-card,
.mxi-leaderboard-card,
.mxi-profile-card {
  color: #eef2f8;
}
.mxi-archive-card .mxi-archive-head p,
.mxi-leaderboard-card .mxi-archive-head p,
.mxi-profile-card .mxi-archive-head p {
  color: #b7c3da;
}
.mxi-leaderboard-card .leaderboard-table th,
.mxi-leaderboard-card .leaderboard-table td {
  color: #eef2f8;
}

.mxi-profile-grid {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.mxi-profile-tile {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  display: grid;
  gap: 0.25rem;
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
}

.mxi-profile-tile small {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.62rem;
  font-weight: 700;
}

.mxi-profile-tile strong {
  font-size: 1.12rem;
}

/* --- Footble mode --- */
body.sport-footble {
  /* Brand palette: charcoal + electric green (was forest green, which
     clashed with the logo - the last forest-green tokens in the app). */
  --accent-blue: #1cb2ff;
  --accent-lime: #d6ff4b;
  --navy: #0b2f4f;
  /* The product palette is dark-only (the global token block forces light
     text on every data-theme), so footble's background must always be dark
     too - the old light gradient rendered white text on a near-white page. */
  background:
    radial-gradient(circle at 84% -10%, rgba(47, 159, 255, 0.22), transparent 36%),
    radial-gradient(circle at 8% 0%, rgba(182, 255, 58, 0.22), transparent 34%),
    linear-gradient(180deg, #07120f 0%, #0c1a15 70%, #0e1f19 100%);
}

.footble-shell {
  display: grid;
  gap: var(--space-5);
  overflow: visible;
}

.footble-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: end;
}

.footble-hud {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footble-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-5);
  align-items: start;
}

/* Grid items default to min-width:auto, which lets wide content (the
   keyboard rows) blow the cards out of the shell. Everything shrinks. */
.footble-side,
.footble-stats-card,
.footble-input-card,
.footble-board-wrap {
  min-width: 0;
}

.footble-board-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.footble-board {
  display: grid;
  gap: 0.55rem;
}

.footble-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.footble-tile {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 2px solid var(--line-strong);
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: 0.08em;
  color: var(--text);
  text-transform: uppercase;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.footble-tile.is-filled {
  border-color: color-mix(in srgb, var(--accent-blue) 40%, var(--line-strong));
}

.footble-tile.is-correct {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--success) 22%, var(--surface));
  /* Light text - the tile background is a dark surface mix; the old
     near-black color-mix was unreadable on it. */
  color: var(--text);
}

.footble-tile.is-present {
  border-color: color-mix(in srgb, #f5c518 70%, var(--line-strong));
  background: color-mix(in srgb, #f5c518 28%, var(--surface));
  color: var(--text);
}

.footble-tile.is-absent {
  border-color: color-mix(in srgb, var(--line-strong) 92%, black);
  background: color-mix(in srgb, var(--surface-muted) 88%, #111);
  color: var(--text-muted);
}

.footble-tile.is-reveal {
  animation: footbleFlip 420ms ease;
  animation-delay: var(--tile-delay, 0ms);
  animation-fill-mode: both;
}

@keyframes footbleFlip {
  0% {
    transform: rotateX(0deg) scale(1);
  }
  45% {
    transform: rotateX(90deg) scale(1.04);
  }
  100% {
    transform: rotateX(0deg) scale(1);
  }
}

.footble-feedback {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-weight: 600;
}

.footble-feedback.is-success {
  color: var(--success);
}

.footble-feedback.is-error {
  color: color-mix(in srgb, var(--danger) 78%, var(--text));
}

.footble-feedback.is-flash {
  animation: footbleFlash 1.1s ease both;
}

@keyframes footbleFlash {
  0%   { opacity: 0; transform: scale(0.94) translateY(4px); }
  18%  { opacity: 1; transform: scale(1.04) translateY(0); }
  38%  { transform: scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

.footble-side {
  display: grid;
  gap: var(--space-3);
}

.footble-stats-card,
.footble-input-card,
.footble-used-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: 1rem;
}

/* ── Used-letter panel ──────────────────────────────────────────────────── */
.footble-used-card {
  border-color: color-mix(in srgb, #e84040 40%, var(--line));
  background: color-mix(in srgb, #e84040 8%, var(--surface));
}

.footble-used-label {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, #e84040 80%, var(--text-muted));
}

.footble-used-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.footble-used-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #e84040 55%, var(--line-strong));
  background: color-mix(in srgb, #e84040 18%, var(--surface));
  color: color-mix(in srgb, #e84040 90%, var(--text));
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.footble-stats-card h2 {
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  font-size: 1.7rem;
}

.footble-stats-grid {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.footble-stats-grid span {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 0.5rem 0.65rem;
  display: grid;
  gap: 0.2rem;
}

.footble-stats-grid small {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.66rem;
  font-weight: 700;
}

.footble-stats-grid strong {
  font-size: 1rem;
}

#footble-stats-note {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footble-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

#footble-input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  padding: 0.7rem 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
}

#footble-input.is-shake {
  animation: guessShake 280ms ease;
}

.footble-keyboard {
  margin-top: var(--space-3);
  display: grid;
  gap: 0.35rem;
}

.footble-key-row {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}

.footble-key {
  /* Fluid keys: every row fills the card exactly and can shrink to any
     width instead of spilling out of the box. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.5rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  font-weight: 700;
  font-size: clamp(0.68rem, 2.4vw, 0.82rem);
  cursor: pointer;
  padding: 0 0.15rem;
}

.footble-key.wide {
  flex: 1.7 1 0;
  font-size: clamp(0.6rem, 2vw, 0.72rem);
}

.footble-key.is-correct {
  background: color-mix(in srgb, var(--success) 24%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 58%, var(--line-strong));
}

.footble-key.is-present {
  background: color-mix(in srgb, #f5c518 30%, var(--surface));
  border-color: color-mix(in srgb, #f5c518 72%, var(--line-strong));
}

.footble-key.is-absent {
  background: color-mix(in srgb, var(--surface-muted) 86%, black);
  color: var(--text-muted);
}

.footble-result {
  margin: var(--space-3) 0 0;
  min-height: 1.4rem;
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 1040px) {
  .footble-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .footble-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mxi-slot {
    width: clamp(92px, 13.5vw, 122px);
    min-height: 112px;
  }

  .mxi-lineup {
    min-height: clamp(560px, 66vh, 760px);
    padding: 0.72rem;
  }

  .mxi-slot::before {
    width: 54px;
    height: 38px;
  }

  .mxi-slot-hint {
    font-size: 0.64rem;
  }

  .mxi-slot-input {
    min-height: 28px;
    font-size: 0.62rem;
  }

  .mxi-slot-submit {
    min-height: 28px;
    font-size: 0.58rem;
  }
}

@media (max-width: 767px) {
  .games-dropdown {
    display: none;
  }

  .other-games-picker-row {
    grid-template-columns: 1fr;
  }

  .footble-head {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .footble-hud {
    justify-content: flex-start;
  }

  .footble-side {
    grid-template-columns: 1fr;
  }

  .footble-tile {
    font-size: clamp(1.2rem, 6vw, 1.6rem);
  }

  .footble-key {
    min-width: 0;
    min-height: 2.3rem;
    padding: 0 0.1rem;
  }

  .mxi-hero {
    grid-template-columns: 1fr;
  }

  .mxi-hero-hud {
    justify-content: flex-start;
  }

  .mxi-today-layout,
  .mxi-board-layout {
    grid-template-columns: 1fr;
  }

  .mxi-lineup {
    min-height: 520px;
    padding: 0.5rem 0.45rem;
    gap: 0.4rem;
  }

  .mxi-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mxi-archive-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .mxi-archive-meta {
    justify-items: start;
  }

  .mxi-slot {
    width: clamp(68px, 21.2vw, 90px);
    min-height: 88px;
    border-radius: 10px;
    padding: 0.24rem 0.24rem 0.28rem;
  }

  .mxi-slot::before {
    width: 40px;
    height: 29px;
    border-width: 1.5px;
  }

  .mxi-slot-pos {
    font-size: 0.5rem;
    padding: 0.04rem 0.26rem;
  }

  .mxi-slot-num {
    margin-top: -1.66rem;
    width: 16px;
    height: 16px;
    font-size: 0.5rem;
    border-radius: 5px;
  }

  .mxi-slot-hint {
    font-size: 0.54rem;
    min-height: 1.6em;
    -webkit-line-clamp: 1;
  }

  .mxi-line[data-row-size="2"] {
    padding-inline: 0.4rem;
  }

  .mxi-slot-form {
    gap: 0.16rem;
  }

  .mxi-strip-scoreline {
    grid-template-columns: 1fr;
  }

  .mxi-strip-team {
    justify-items: center;
  }

  .mxi-slot-form {
    grid-template-columns: 1fr;
  }

  .mxi-slot-input {
    min-height: 24px;
    border-radius: 8px;
    padding: 0.16rem 0.34rem;
    font-size: 0.52rem;
  }

  .mxi-slot-submit {
    width: 100%;
    min-height: 22px;
    border-radius: 8px;
    padding: 0.14rem 0.32rem;
    font-size: 0.48rem;
  }
}

/* ============================================================
   2026 Refresh: Sleek + Nostalgic UI pass
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.16;
  background:
    radial-gradient(circle at 50% 0%, transparent 35%, rgba(3, 7, 8, 0.24) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 3px
    );
}

.site-header {
  box-shadow: 0 10px 34px rgba(4, 13, 12, 0.08);
}

.top-nav-link {
  letter-spacing: 0.015em;
}

.card {
  background: var(--surface);
  border-color: var(--line);
}

.btn-primary {
  box-shadow: var(--glow-accent);
}

.btn-secondary {
  box-shadow: none;
}

/* Intro splash (1s) */
body.intro-lock {
  overflow: hidden;
}

.home-intro {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background:
    radial-gradient(circle at 50% 12%, rgba(216, 255, 77, 0.16), transparent 40%),
    linear-gradient(160deg, #07130f, #0c2019 45%, #0b2740 100%);
  display: grid;
  place-items: center;
  transition: opacity 420ms ease, transform 420ms ease;
}

.home-intro.is-exit {
  opacity: 0;
  transform: scale(1.03);
}

.home-intro-inner {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  color: #ecf9f2;
}

.home-intro-inner img {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 8px 24px rgba(216, 255, 77, 0.24));
}

.home-intro-inner p {
  margin: 0;
  font-family: var(--font-head);
  letter-spacing: 0.11em;
  font-size: clamp(2rem, 6vw, 3.3rem);
}

.ad-reserve-row {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

ins.adsbygoogle {
  display: block;
  width: 100%;
  min-height: 90px;
}

/* Mbappe mini demo */
.landing-demo {
  overflow: hidden;
}

.mbappe-demo-board {
  margin-top: 0.65rem;
  position: relative;
  min-height: 390px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-muted) 74%, var(--surface));
}

.mbappe-demo-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--accent-blue) 76%, var(--primary));
}

.mbappe-demo-lines line {
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.95;
  stroke-dasharray: 2 1.6;
  animation: demoLinePulse 1800ms ease-in-out infinite;
}

@keyframes demoLinePulse {
  0%,
  100% {
    opacity: 0.55;
    stroke-width: 1.2;
  }
  50% {
    opacity: 1;
    stroke-width: 1.8;
  }
}

.mbappe-node {
  position: absolute;
  width: 140px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  padding: 0.45rem;
  display: grid;
  gap: 0.22rem;
  justify-items: center;
  text-align: center;
}

.mbappe-node img {
  width: 64px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
}

.mbappe-node strong {
  font-size: 0.77rem;
  line-height: 1.05;
}

.mbappe-node span {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.14rem 0.4rem;
  background: color-mix(in srgb, var(--surface-muted) 85%, var(--surface));
}

.mbappe-node.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 156px;
  border-color: color-mix(in srgb, var(--accent-lime) 46%, var(--line));
  box-shadow: 0 14px 34px rgba(18, 35, 31, 0.22);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-lime) 24%, transparent), transparent 56%),
    var(--bg-elevated);
}

.mbappe-node.n1 {
  left: 0.85rem;
  top: 0.85rem;
}

.mbappe-node.n2 {
  right: 0.85rem;
  top: 0.85rem;
}

.mbappe-node.n3 {
  left: 0.85rem;
  bottom: 0.85rem;
}

.mbappe-node.n4 {
  right: 0.85rem;
  bottom: 0.85rem;
}

/* On phones the scattered absolute nodes overlap - lay them out as a clean
   grid (two players, the connector full-width, two players) instead. */
@media (max-width: 620px) {
  .mbappe-demo-board {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.75rem;
  }

  .mbappe-demo-lines {
    display: none;
  }

  .mbappe-node,
  .mbappe-node.n1,
  .mbappe-node.n2,
  .mbappe-node.n3,
  .mbappe-node.n4,
  .mbappe-node.center {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
  }

  .mbappe-node.n1 { order: 1; }
  .mbappe-node.n2 { order: 2; }
  .mbappe-node.center { order: 3; grid-column: 1 / -1; }
  .mbappe-node.n3 { order: 4; }
  .mbappe-node.n4 { order: 5; }
}

.rules-card {
  display: grid;
  gap: var(--space-3);
}

.rules-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
  color: var(--text);
}

.rules-list li {
  line-height: 1.45;
}

/* Per-player hint reveal button */
.hint-skip-btn {
  position: absolute;
  bottom: 0.55rem;
  right: 0.55rem;
  z-index: 4;
  margin-top: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 800;
  min-height: 26px;
  padding: 0.14rem 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.hint-skip-btn.is-ready {
  border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--line-strong));
  color: color-mix(in srgb, var(--primary) 76%, black);
  background: color-mix(in srgb, var(--accent-blue) 14%, var(--bg-elevated));
}

.hint-skip-btn.is-ready:hover {
  transform: translateY(-1px);
}

.hint-skip-btn.is-locked {
  opacity: 0.72;
}

@media (max-width: 767px) {
  ins.adsbygoogle {
    min-height: 50px;
  }

  /* Clean non-overlapping grid on phones/tablets: two players, the connector
     full-width in the middle, two players. */
  .mbappe-demo-board {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.75rem;
  }

  .mbappe-demo-lines {
    display: none;
  }

  .mbappe-node,
  .mbappe-node.n1,
  .mbappe-node.n2,
  .mbappe-node.n3,
  .mbappe-node.n4,
  .mbappe-node.center {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
  }

  .mbappe-node.n1 { order: 1; }
  .mbappe-node.n2 { order: 2; }
  .mbappe-node.center { order: 3; grid-column: 1 / -1; }
  .mbappe-node.n3 { order: 4; }
  .mbappe-node.n4 { order: 5; }
}

/* ============================================================
   Responsive typography + spacing polish (Phone + Tablet)
   ============================================================ */
@media (max-width: 480px) {
  body {
    font-size: 16px;
  }

  .container {
    width: calc(100% - 24px);
  }

  main {
    padding-bottom: 5.9rem;
  }

  .section {
    margin-top: 1.5rem;
  }

  .section-title {
    font-size: clamp(1.9rem, 10vw, 2.45rem);
    line-height: 0.97;
  }

  .section-copy {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .header-inner {
    min-height: 68px;
  }

  .brand strong,
  .brand brand-wordmark {
    font-size: 1.45rem;
  }

  .landing-hero {
    margin-top: 0.95rem;
    gap: 0.85rem;
  }

  .landing-copy,
  .landing-demo {
    padding: 0.9rem;
    border-radius: 18px;
  }

  .landing-tagline {
    font-size: 1rem;
  }

  .stat-chip {
    min-height: 38px;
    font-size: 0.78rem;
  }

  .mbappe-demo-board {
    min-height: 520px;
  }

  .mbappe-node {
    width: 126px;
  }

  .rules-list {
    font-size: 0.95rem;
    padding-left: 1rem;
  }

  .ad-reserve-row {
    margin-top: 0.95rem;
  }

  .ad-slot--infeed {
    height: 84px;
    margin: 0.75rem 0;
  }

  .level-select-head {
    position: static;
  }

  .level-select-controls {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0.6rem;
  }

  .level-search input {
    width: 100%;
  }

  #continue-level-btn {
    width: 100%;
  }

  .game-hud {
    padding: 0.65rem;
    gap: 0.58rem;
  }

  .mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .mode-switch-btn {
    min-height: 44px;
    font-size: 0.82rem;
  }

  .hud-chip {
    min-height: 40px;
    padding: 0.35rem 0.56rem;
  }

  .fp-player-card {
    padding: 0.62rem;
  }

  .fp-player-media {
    width: min(36vw, 156px);
  }

  .fp-player-name {
    font-size: 1.18rem;
    line-height: 1.08;
  }

  .hint-label {
    font-size: 0.66rem;
  }

  .hint-skip-btn {
    bottom: 0.46rem;
    right: 0.46rem;
    font-size: 0.58rem;
    min-height: 24px;
    padding: 0.12rem 0.42rem;
  }

  .guess-core {
    padding: 0.82rem;
    gap: 0.58rem;
  }

  .guess-rule {
    font-size: 0.95rem;
  }

  .switch-row {
    min-height: 44px;
  }

  .guess-input {
    min-height: 48px;
    font-size: 1rem;
  }

  .clue-toggle-btn {
    min-height: 40px;
  }

  .single-clue-card {
    padding: 0.58rem;
  }

  .footble-shell {
    padding: 0.92rem;
  }

  .footble-input-row {
    grid-template-columns: 1fr;
  }

  #footble-submit {
    width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  body {
    font-size: 16.5px;
  }

  .container {
    width: calc(100% - 28px);
  }

  .section {
    margin-top: 1.8rem;
  }

  .header-inner {
    min-height: 70px;
  }

  .brand strong,
  .brand brand-wordmark {
    font-size: 1.55rem;
  }

  .landing-hero {
    gap: 1rem;
  }

  .landing-copy,
  .landing-demo {
    padding: 1rem;
  }

  .mbappe-demo-board {
    min-height: 425px;
  }

  .mbappe-node {
    width: 124px;
  }

  .mbappe-node.n1 {
    left: 0.65rem;
    top: 0.65rem;
    transform: none;
  }

  .mbappe-node.n2 {
    right: 0.65rem;
    left: auto;
    top: 0.65rem;
    transform: none;
  }

  .mbappe-node.n3 {
    left: 0.65rem;
    bottom: 0.65rem;
    transform: none;
  }

  .mbappe-node.n4 {
    right: 0.65rem;
    left: auto;
    bottom: 0.65rem;
    transform: none;
  }

  .mbappe-node.center {
    transform: translate(-50%, -50%);
  }

  .mbappe-demo-lines line {
    opacity: 0.88;
  }

  .level-select-head {
    position: static;
  }

  .level-select-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem;
  }

  .level-search input {
    width: 100%;
  }

  .mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .mode-switch-btn {
    min-height: 44px;
  }

  .fp-player-card {
    padding: 0.68rem;
  }

  .fp-player-name {
    font-size: 1.26rem;
  }

  .hint-skip-btn {
    bottom: 0.46rem;
    right: 0.46rem;
    font-size: 0.6rem;
    min-height: 24px;
    padding: 0.13rem 0.45rem;
  }

  .guess-core {
    padding: 0.9rem;
  }

  .guess-input {
    min-height: 48px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 17px;
  }

  .container {
    width: calc(100% - 52px);
  }

  .section {
    margin-top: 2rem;
  }

  .header-inner {
    min-height: 74px;
  }

  .top-nav-link {
    font-size: 0.94rem;
  }

  .landing-hero {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .landing-copy,
  .landing-demo {
    padding: 1.1rem;
  }

  .mbappe-demo-board {
    min-height: 350px;
  }

  .mbappe-node {
    width: 118px;
  }

  .level-select-head {
    top: calc(var(--header-height) + 1.2rem);
  }

  .level-select .level-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.62rem;
  }

  body[data-page="play"] .section-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
  }

  body[data-page="play"] .game-hud {
    padding: 0.7rem 0.8rem;
  }

  body[data-page="play"] .level-board .level-grid {
    grid-template-columns: minmax(230px, 0.95fr) minmax(300px, 1.05fr);
    grid-template-rows: repeat(4, minmax(136px, 1fr));
    gap: 0.76rem;
  }

  body[data-page="play"] .fp-player-card {
    grid-template-columns: 104px 1fr;
    padding: 0.64rem;
  }

  body[data-page="play"] .fp-player-name {
    font-size: 1.28rem;
  }

  body[data-page="play"] .hint-skip-btn {
    bottom: 0.46rem;
    right: 0.46rem;
    min-height: 25px;
    font-size: 0.6rem;
    padding: 0.13rem 0.45rem;
  }

  body[data-page="play"] .guess-core {
    padding: 0.92rem;
  }

  body[data-page="play"] .guess-input {
    min-height: 46px;
  }

  .footble-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .footble-side {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .container {
    width: calc(100% - 62px);
  }

  .landing-hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1.05rem;
  }

  .mbappe-demo-board {
    min-height: 365px;
  }

  .game-hud {
    gap: 0.7rem;
  }

  body[data-page="play"] .level-board .level-grid {
    gap: 0.78rem;
  }

  .hint-skip-btn {
    bottom: 0.46rem;
    right: 0.46rem;
    min-height: 25px;
    font-size: 0.6rem;
    padding: 0.13rem 0.45rem;
  }
}

/* ============================================================
   Sharp dark-mode product theme - electric-green accent
   ============================================================ */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  color-scheme: dark;
  --font-head: "Plus Jakarta Sans", "Avenir Next", sans-serif;
  --font-body: "Manrope", "Avenir Next", sans-serif;

  --color-bg: #101418;
  --color-accent: #6bff61;
  --color-silver: #aeb6be;
  --color-surface: #1a1f24;
  --color-text: #ffffff;

  --bg: #101418;
  --bg-elevated: #1a1f24;
  --surface: #1a1f24;
  --surface-muted: #232a31;
  --surface-contrast: #0b0e12;
  --text: #ffffff;
  --text-muted: #aeb6be;
  --text-on-dark: #ffffff;

  --primary: #6bff61;
  --primary-strong: #4fe048;
  --primary-ink: #06210b;
  --navy: #232a31;
  --accent-lime: #6bff61;
  --accent-blue: #4f93ff;
  --accent-orange: #ff8a3d;
  --danger: #ff5a5a;
  --success: #6bff61;

  --line: #2a323b;
  --line-strong: #3b4551;
  --focus: #6bff61;

  --glow-accent: 0 0 12px rgba(107, 255, 97, 0.4);
  --glow-accent-strong: 0 0 22px rgba(107, 255, 97, 0.55);
  --glow-accent-soft: 0 0 0 3px rgba(107, 255, 97, 0.16);

  --radius-s: 4px;
  --radius-m: 4px;
  --radius-l: 6px;
  --radius-btn: 2px;
  --radius-pill: 9999px;

  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.62);

  --header-height: 86px;
  --max-width: 1200px;
}

html {
  scroll-behavior: smooth;
}

body,
body.sport-nba {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  background:
    radial-gradient(circle at 8% 15%, rgba(79, 190, 255, 0.22) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 28%, rgba(242, 97, 16, 0.2) 0 7px, transparent 8px),
    radial-gradient(circle at 83% 75%, rgba(149, 82, 224, 0.18) 0 5px, transparent 6px),
    var(--bg);
}

body::before {
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 5% 38%, transparent 0 18px, rgba(79, 190, 255, 0.18) 19px 21px, transparent 22px),
    radial-gradient(circle at 96% 58%, transparent 0 24px, rgba(187, 153, 21, 0.16) 25px 27px, transparent 28px);
}

body::after {
  opacity: 0.35;
  background:
    linear-gradient(125deg, transparent 0 48%, rgba(255, 255, 255, 0.55) 49% 51%, transparent 52%) 6vw 22vh / 36px 36px no-repeat,
    linear-gradient(35deg, transparent 0 48%, rgba(149, 82, 224, 0.18) 49% 51%, transparent 52%) 92vw 48vh / 42px 42px no-repeat;
}

main {
  padding-bottom: 7rem;
}

.container {
  width: min(var(--max-width), calc(100% - 48px));
}

.section {
  margin-top: clamp(4rem, 8vw, 6.5rem);
}

.section-head {
  margin-bottom: 2rem;
}

.section-title,
.hero-title,
.card-title,
.profile-name,
.result-card h3,
.modal-head h3,
.bracket-round h3,
.broadcast-banner h3,
.cta-ribbon h3,
.hud-chip strong,
.level-num,
.score-badge,
.rank-pill,
.win-ring strong,
.correct-player-flash-copy strong,
.success-banner,
.connector-burst,
.countdown-ring strong {
  font-family: var(--font-head);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.section-title {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.05;
}

.section-copy {
  margin-top: 0.8rem;
  font-size: 1rem;
  line-height: 1.55;
}

.kicker,
.card-tag,
.guess-kicker,
.fp-player-label,
.hint-label,
.level-state,
.input-group label,
.level-search span {
  letter-spacing: 0.08em;
  font-weight: 700;
}

.kicker {
  gap: 0.65rem;
  color: var(--text-muted);
}

.kicker::before {
  width: 18px;
  height: 18px;
  border-radius: 6px 12px 7px 12px;
  background: #f26110;
  box-shadow: none;
  transform: rotate(18deg);
}

.site-header {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.header-inner {
  min-height: var(--header-height);
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
}

.brand {
  gap: 0.65rem;
}

.brand img {
  width: 34px;
  height: 34px;
}

.brand strong,
.brand brand-wordmark {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.header-left-cluster {
  gap: 1rem;
}

.sports-switcher {
  border-color: rgba(83, 88, 98, 0.25);
  background: rgba(26, 31, 36, 0.68);
  backdrop-filter: blur(12px);
}

.sport-tab {
  font-size: 0.7rem;
  font-weight: 600;
}

.sport-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(4, 69, 144, 0.08);
}

.top-nav-links {
  gap: 0.15rem;
}

.top-nav-link {
  min-height: 36px;
  padding: 0.45rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.top-nav-link:hover {
  background: var(--surface-muted);
}

.top-nav-link.is-active {
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.top-nav-link.is-active::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: #f26110;
}

.auth-pill {
  border: 0;
  background: transparent;
  padding-inline: 0;
}

.btn {
  min-height: 42px;
  padding: 0.75rem 1.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.btn-primary,
.mobile-play a {
  color: var(--primary-ink);
  background: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: var(--glow-accent);
}

.btn-secondary {
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}

.btn-primary:hover,
.mobile-play a:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: var(--glow-accent-strong);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong));
  box-shadow: var(--glow-accent);
}

.btn-primary:active,
.btn-secondary:active,
.mobile-play a:active {
  transform: scale(0.96);
}

.btn-outline {
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  box-shadow: none;
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
  box-shadow: var(--glow-accent);
}

.btn-ghost {
  border: 1px solid transparent;
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--line);
  color: var(--text);
}

.card,
.table-wrap,
.modal,
.level-board,
.guess-core,
.fp-player-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}

.card {
  border-radius: var(--radius-m);
  padding: clamp(1.2rem, 3vw, 2rem);
}

.card::after {
  display: none;
}

.card:hover {
  transform: translateY(-3px) rotate(-0.2deg);
  border-color: rgba(10, 13, 18, 0.72);
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.05;
}

.card-copy {
  margin-top: 0.8rem;
  line-height: 1.55;
}

.grid {
  gap: 1.5rem;
}

.grid-3 > .card:nth-child(3n + 1) {
  background: linear-gradient(155deg, #18242e, #141c25);
  border-color: transparent;
}

.grid-3 > .card:nth-child(3n + 2) {
  background: linear-gradient(155deg, #29271a, #1e1c14);
  border-color: transparent;
}

.grid-3 > .card:nth-child(3n + 3) {
  background: linear-gradient(155deg, #241b2e, #1a1522);
  border-color: transparent;
}

.step-card {
  min-height: 250px;
  align-content: end;
}

.step-number,
.mode-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
}

.mode-icon-wrap img {
  width: 23px;
  height: 23px;
}

.pill,
.stat-chip,
.hud-chip,
.player-chip,
.score-badge,
.achievement-badge {
  background: var(--surface-muted);
  border-color: var(--line);
  color: var(--text);
}

.pill--lime {
  color: var(--primary-ink);
  background: var(--primary);
  border-color: transparent;
}

/* Home canvas */
.home-intro {
  background: var(--bg);
}

.home-intro-inner {
  color: var(--text);
}

.home-intro-inner img {
  filter: none;
}

.home-intro-inner p {
  font-family: var(--font-head);
  letter-spacing: -0.04em;
}

body[data-page="home"] .ad-slot--leaderboard:first-of-type {
  display: none;
}

.landing-hero {
  min-height: min(720px, calc(100vh - 110px));
  margin-top: 1rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.landing-copy {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.landing-copy .kicker {
  margin-bottom: 1rem;
}

.hero-title {
  color: var(--text);
  font-size: clamp(4.8rem, 9vw, 8.6rem);
  line-height: 0.94;
  letter-spacing: -0.07em;
}

.hero-title span {
  position: relative;
  display: inline-block;
  color: var(--text);
}

.hero-title span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  right: -2%;
  bottom: 5%;
  height: 23%;
  border-radius: 999px;
  background: #ffdfa7;
  transform: rotate(-2deg);
}

.landing-tagline {
  max-width: 48ch;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero-actions {
  margin-top: 1.8rem;
}

.hero-badges {
  margin-top: 1.8rem;
}

.stat-chip {
  color: var(--text);
  font-size: 0.75rem;
  padding: 0.4rem 0.7rem;
}

.stat-chip b {
  color: var(--primary);
}

.hero-doodles .doodle {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  user-select: none;
}

.doodle-ball {
  right: 3%;
  top: 1%;
  width: 72px;
  height: 72px;
  border-radius: 24px 34px 20px 36px;
  background: #4fbeff;
  font-size: 2rem;
  transform: rotate(12deg);
  animation: doodleFloat 5s ease-in-out infinite;
}

.doodle-star {
  left: -8%;
  bottom: 22%;
  color: #9552e0;
  font-size: 3rem;
  transform: rotate(-12deg);
  animation: doodleFloat 4.2s ease-in-out -1.2s infinite;
}

.doodle-squiggle {
  right: 16%;
  bottom: 8%;
  color: #f26110;
  font-family: var(--font-head);
  font-size: 5rem;
  line-height: 1;
  transform: rotate(-20deg);
}

@keyframes doodleFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -10px; rotate: 5deg; }
}

.landing-demo {
  position: relative;
  overflow: visible;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: rotate(1.5deg);
}

.landing-demo::before,
.landing-demo::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.landing-demo::before {
  width: 120px;
  height: 120px;
  right: -50px;
  top: -45px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.landing-demo::after {
  width: 90px;
  height: 90px;
  left: -38px;
  bottom: -34px;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

.landing-demo .card-tag {
  padding: 0.4rem 0.65rem;
}

.mbappe-demo-board {
  min-height: 450px;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at center, rgba(79, 190, 255, 0.18), transparent 34%),
    #f6f7f8;
}

.mbappe-demo-lines {
  color: #93979f;
}

.mbappe-demo-lines line {
  stroke-width: 0.8;
  stroke-dasharray: 1.2 2;
}

.mbappe-node {
  border: 0;
  border-radius: 22px;
  box-shadow: none;
  background: var(--surface);
  padding: 0.55rem;
  transition: transform 180ms ease;
}

.mbappe-node:hover {
  transform: translateY(-3px);
}

/* The center node is POSITIONED with translate(-50%,-50%); a bare hover
   transform would replace that and fling the card across the board. Keep
   the centering and lift in place instead. */
.mbappe-node.center:hover {
  transform: translate(-50%, calc(-50% - 3px));
}

.mbappe-node img {
  border: 0;
  border-radius: 16px;
  background: var(--bg);
}

.mbappe-node span {
  border: 0;
  background: var(--surface-muted);
}

.mbappe-node.center {
  border: 0;
  background: linear-gradient(155deg, #18242e, #141c25);
  box-shadow: 0 14px 20px 4px rgba(4, 69, 144, 0.08);
}

.rules-card {
  background: #181d27;
  color: #ffffff;
  border-color: transparent;
}

.rules-card .kicker,
.rules-card .rules-list {
  color: rgba(255, 255, 255, 0.78);
}

.weekly-teaser {
  min-height: 230px;
  border: 0;
  background: linear-gradient(135deg, #479dff 11%, #0069e0 78%);
  color: #ffffff;
}

.weekly-teaser .card-copy,
.weekly-teaser .card-tag {
  color: rgba(255, 255, 255, 0.78);
}

.weekly-teaser .btn-outline {
  border-color: #ffffff;
  background: var(--surface);
  color: var(--text);
}

/* Puzzle board */
body[data-page="play"] main > .section {
  margin-top: 1.2rem;
}

body[data-page="play"] .section-head {
  align-items: start;
}

body[data-page="play"] .section-title {
  font-size: clamp(2.2rem, 4vw, 3.7rem);
}

.game-hud {
  border: 0;
  border-radius: 28px;
  background: rgba(26, 31, 36, 0.72);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.mode-switch {
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--surface-muted);
}

.mode-switch-btn {
  min-height: 36px;
  border: 0;
  font-size: 0.72rem;
  font-weight: 600;
}

.mode-switch-btn.is-active {
  border: 0;
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: var(--glow-accent);
}

.hud-chip {
  border: 1px solid var(--line);
  background: var(--surface-muted);
}

.hud-chip strong {
  color: var(--text);
}

.level-step-btn {
  border: 0;
  background: var(--surface);
  box-shadow: none;
}

.level-board {
  padding: 1rem;
  border: 0;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 50%, rgba(79, 190, 255, 0.18), transparent 28%),
    rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.level-board::before {
  opacity: 1;
  background:
    radial-gradient(circle at 3% 96%, rgba(107,255,97,0.12) 0 42px, transparent 43px),
    radial-gradient(circle at 98% 3%, #fff0c2 0 50px, transparent 51px);
}

.level-board .level-grid {
  gap: 1rem;
}

.fp-player-card {
  border: 0;
  border-radius: 28px;
  padding: 0.7rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.fp-player-card[data-slot="1"] {
  transform: rotate(-0.8deg);
}

.fp-player-card[data-slot="2"] {
  transform: rotate(0.8deg);
}

.fp-player-card[data-slot="3"] {
  transform: rotate(0.5deg);
}

.fp-player-card[data-slot="4"] {
  transform: rotate(-0.6deg);
}

.fp-player-card:hover {
  transform: translateY(-3px) rotate(0deg);
}

.fp-player-card.is-hint-revealed {
  border: 1px solid rgba(242, 97, 16, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 209, 184, 0.6);
}

.fp-player-media {
  border-radius: 20px;
  background: linear-gradient(155deg, #18242e, #141c25);
}

.fp-player-card[data-slot="2"] .fp-player-media {
  background: linear-gradient(155deg, #29271a, #1e1c14);
}

.fp-player-card[data-slot="3"] .fp-player-media {
  background: linear-gradient(155deg, #241b2e, #1a1522);
}

.fp-player-card[data-slot="4"] .fp-player-media {
  background: linear-gradient(155deg, #2a2019, #1f1812);
}

.fp-player-media img {
  padding: 0;
  filter: saturate(0.9);
}

.fp-player-name {
  line-height: 1.02;
}

.hint-skip-btn {
  border: 0;
  background: var(--surface-muted);
  font-weight: 600;
}

.hint-skip-btn.is-ready {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

.team-chip {
  border: 1px solid color-mix(in srgb, var(--primary) 48%, var(--line-strong));
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-muted));
  color: #ffffff;
  font-weight: 800;
}

.guess-core {
  border: 0;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.status-line,
.switch-row,
.single-clue-card,
.next-level-strip {
  border: 0;
  background: var(--surface-muted);
}

.guess-input {
  border: 1px solid rgba(83, 88, 98, 0.4);
  background: var(--surface);
  font-weight: 500;
}

.guess-input:focus {
  border-color: var(--text);
}

.single-clue-card {
  background: linear-gradient(155deg, #241b2e, #1a1522);
}

.clue-toggle-btn {
  background: var(--surface);
  color: var(--text);
  border: 0;
}

.switch-control input:checked + .switch-track {
  background: #181d27;
  border-color: var(--text);
}

.connector-line {
  background: linear-gradient(90deg, #4fbeff, transparent);
}

.connector-burst {
  border: 0;
  background: #181d27;
  color: #ffffff;
}

/* Secondary pages and utility surfaces */
.level-select-head {
  background: linear-gradient(155deg, #18242e, #141c25);
  border: 0;
}

.level-grid-wrap {
  border: 0;
}

.level-select .level-grid {
  gap: 0.75rem;
}

/* Levels use one natural page scroll. The old 58vh nested scroller fought
   the sticky controls card and made lower tile rows appear clipped. */
body[data-page="levels"] {
  overflow-y: auto;
}

body[data-page="levels"] .level-select-head {
  position: relative;
  top: auto;
  z-index: auto;
}

body[data-page="levels"] .level-grid-wrap {
  overflow: visible;
}

body[data-page="levels"] .level-select .level-grid {
  max-height: none;
  height: auto;
  overflow: visible;
  padding-right: 0;
}

.level-tile {
  border: 0;
  border-radius: 16px;
  background: var(--surface-muted);
}

.level-tile:hover:not(:disabled) {
  border: 0;
  background: var(--surface-muted);
  box-shadow: none;
}

.level-tile.is-unlocked {
  border: 0;
  background: var(--bg);
}

.level-tile.is-completed {
  border: 0;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
}

.table-wrap {
  overflow: hidden;
  border: 0;
  border-radius: 32px;
}

.leaderboard-table th {
  background: var(--surface-muted);
}

.leaderboard-table td {
  border-top-color: rgba(83, 88, 98, 0.12);
}

.nav-tabs,
.scope-pill {
  border: 0;
  background: var(--surface-muted);
}

.nav-tabs-indicator,
.scope-pill.is-active {
  background: #181d27;
  color: #ffffff;
}

.other-games-shell {
  min-height: 340px;
  border: 0;
  background: linear-gradient(155deg, #29271a, #1e1c14);
}

.other-game-card.is-featured {
  background: linear-gradient(155deg, #18242e, #141c25);
}

.input-group input,
.input-group select,
.input-group textarea,
.auth-form input,
.friend-search-form input,
.level-search input,
.admin-controls input,
.admin-controls select {
  border-color: rgba(83, 88, 98, 0.38);
  background: var(--surface);
}

.ad-slot {
  border-color: rgba(83, 88, 98, 0.18);
  background: rgba(255, 255, 255, 0.22);
}

.site-footer {
  padding-top: 4rem;
}

.footer-inner {
  border-top-color: rgba(83, 88, 98, 0.28);
}

.mobile-tabbar {
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  border: 0;
  border-radius: 24px;
  background: rgba(26, 31, 36, 0.88);
  box-shadow: var(--shadow-md);
}

.mobile-play a {
  border-color: var(--line);
}

@media (max-width: 1080px) {
  .landing-hero {
    grid-template-columns: 1fr;
  }

  .landing-copy {
    text-align: center;
  }

  .landing-copy .kicker,
  .landing-copy .hero-actions,
  .landing-copy .hero-badges {
    justify-content: center;
  }

  .landing-demo {
    width: min(680px, 100%);
    margin-inline: auto;
  }
}

@media (max-width: 880px) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .top-nav-links {
    top: calc(var(--header-height) - 8px);
    left: 0.75rem;
    right: 0.75rem;
    border: 0;
    border-radius: 24px;
    background: rgba(26, 31, 36, 0.96);
    box-shadow: var(--shadow-md);
  }

  .top-nav-link {
    border-radius: 16px;
  }

  .top-nav-link.is-active::after {
    display: none;
  }

  .menu-toggle {
    border: 0;
    border-radius: 16px;
    background: var(--surface-muted);
  }
}

@media (max-width: 620px) {
  :root,
  html[data-theme="dark"] {
    --header-height: 72px;
  }

  .container {
    width: calc(100% - 24px);
  }

  .header-inner {
    gap: 0.5rem;
  }

  .brand strong,
  .brand brand-wordmark {
    display: none;
  }

  .brand img {
    width: 31px;
    height: 31px;
  }

  .header-left-cluster {
    gap: 0.4rem;
  }

  .header-sports .sport-tab {
    padding-inline: 0.45rem;
  }

  .landing-hero {
    min-height: auto;
    margin-top: 1rem;
    gap: 1.5rem;
  }

  .landing-copy {
    padding: 2.5rem 0 1rem;
  }

  .hero-title {
    font-size: clamp(3.7rem, 18vw, 5.4rem);
    letter-spacing: -0.08em;
  }

  .landing-tagline {
    font-size: 0.95rem;
  }

  .doodle-ball {
    right: 1%;
    top: -4%;
    width: 54px;
    height: 54px;
    border-radius: 18px 24px 16px 25px;
    font-size: 1.5rem;
  }

  .doodle-star {
    left: 0;
    bottom: 30%;
    font-size: 2rem;
  }

  .doodle-squiggle {
    display: none;
  }

  .landing-demo {
    padding: 0.7rem;
    transform: none;
  }

  .mbappe-demo-board {
    min-height: 520px;
  }

  .card {
    border-radius: 26px;
    padding: 1.25rem;
  }

  .step-card {
    min-height: 210px;
  }

  .section {
    margin-top: 3.5rem;
  }

  .section-title {
    font-size: clamp(2.2rem, 12vw, 3.3rem);
  }

  .game-hud {
    border-radius: 24px;
  }

  .level-board {
    padding: 0.5rem;
    border-radius: 28px;
  }

  .fp-player-card {
    border-radius: 22px;
  }

  .fp-player-media {
    border-radius: 16px;
  }

  .guess-core {
    border-radius: 26px;
  }
}

@media (max-width: 620px) {
  body[data-page="play"] .level-board .level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 0.55rem;
  }

  /* On phones the guess + submit panel sits above the player images,
     and the clue + hints strip drops below them. */
  body[data-page="play"] .level-board .level-grid .guess-core {
    grid-column: 1 / -1;
    grid-row: auto;
    order: -1;
  }

  body[data-page="play"] .level-board .level-grid .fp-player-card {
    grid-column: auto;
    grid-row: auto;
    order: 0;
  }

  body[data-page="play"] .level-board .level-grid .guess-aux {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 1;
    flex-direction: column;
    align-items: stretch;
  }

  body[data-page="play"] .fp-player-card {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.45rem;
    padding: 0.5rem;
    text-align: center;
  }

  body[data-page="play"] .fp-player-media {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
  }

  body[data-page="play"] .fp-player-body,
  body[data-page="play"] .fp-player-hint {
    width: 100%;
    min-width: 0;
    justify-items: center;
    /* Constrain the single grid column to the card width so children (the
       reveal button, chip stack) can't size to max-content and overflow. */
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="play"] .hint-chip-stack {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  body[data-page="play"] .fp-player-name {
    width: 100%;
    font-size: clamp(0.95rem, 4.5vw, 1.2rem);
    overflow-wrap: anywhere;
  }

  body[data-page="play"] .hint-skip-btn {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 0.25rem;
    white-space: normal;
  }

  .mobile-tabbar ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.15rem;
  }

  .mobile-tabbar a {
    font-size: 0.6rem;
  }

  .ad-slot--anchor {
    display: none;
  }
}

@media (max-width: 620px) {
  .mobile-play img { filter: brightness(0) invert(1); }
  .play-fab { display: none; }
}

/* Provider-only authentication */
body[data-page="auth"] main {
  min-height: calc(100vh - var(--header-height));
  display: grid;
  align-items: center;
}

body[data-page="auth"] .section {
  margin-top: 2rem;
}

.oauth-shell {
  position: relative;
  max-width: 760px;
  padding: clamp(2rem, 6vw, 4.5rem);
  border: 0;
  text-align: center;
  background:
    radial-gradient(circle at 90% 8%, rgba(149, 82, 224, 0.18), transparent 22%),
    radial-gradient(circle at 4% 92%, rgba(79, 190, 255, 0.2), transparent 24%),
    var(--surface);
  box-shadow: var(--shadow-md);
}

.oauth-shell .kicker {
  justify-content: center;
}

.oauth-shell .section-title {
  max-width: 12ch;
  margin: 0.5rem auto 0;
}

.oauth-shell .section-copy {
  max-width: 52ch;
  margin-inline: auto;
}

.oauth-shell .auth-tabs {
  width: min(100%, 440px);
  margin: 1.75rem auto 1rem;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(83, 88, 98, 0.24);
  border-radius: 999px;
  background: var(--surface-muted);
}

.oauth-shell .auth-tab {
  min-height: 42px;
  border: 0;
  color: var(--text-muted);
  background: transparent;
}

.oauth-shell .auth-tab.is-active {
  color: #ffffff;
  background: #181d27;
  border-color: var(--text);
}

.oauth-shell .auth-panel,
.oauth-shell .auth-form {
  width: min(100%, 440px);
  margin-inline: auto;
}

.oauth-shell .auth-form {
  text-align: left;
}

.oauth-shell .auth-form input {
  border-radius: 16px;
  color: var(--text);
  background: var(--surface);
}

/* Password field with show/hide toggle */
.password-wrap {
  position: relative;
  display: block;
}

.password-wrap .password-input {
  width: 100%;
  padding-right: 4.2rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-btn);
}

.password-toggle:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Text-link buttons (Forgot password / Back to sign in) */
.auth-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem;
  text-align: center;
}

.auth-link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-panel-lead {
  margin: 0 0 0.9rem;
  color: var(--text-muted);
  font-weight: 300;
  font-size: 0.92rem;
}

.forgot-dev-link {
  width: min(100%, 440px);
  margin: 0.9rem auto 0;
  display: grid;
  gap: 0.5rem;
}

.forgot-dev-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.oauth-shell .auth-divider {
  width: min(100%, 440px);
  margin: 1.5rem auto 0;
}

.oauth-actions {
  width: min(100%, 440px);
  margin: 1.25rem auto 0;
  display: grid;
  gap: 0.75rem;
}

.oauth-provider-slot {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

/* Let Google's button keep its natural width and sit centered in the panel. */
.oauth-provider-slot > div {
  width: auto !important;
  margin-inline: auto;
}

.oauth-provider-slot iframe {
  margin-inline: auto;
}

.oauth-provider-slot.is-unavailable {
  border: 1px dashed rgba(83, 88, 98, 0.35);
  color: var(--text-muted);
  padding: 0.75rem;
  font-size: 0.82rem;
}

.oauth-provider-button {
  min-height: 44px;
  border: 1px solid #181d27;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.oauth-provider-button:hover:not(:disabled) {
  transform: translateY(-2px);
}

.oauth-provider-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.oauth-provider-button svg {
  width: 20px;
  height: 20px;
}

.oauth-provider-button--apple {
  color: #ffffff;
  background: #181d27;
}

.oauth-note {
  max-width: 50ch;
  margin: 1.25rem auto 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.oauth-orbit span {
  position: absolute;
  display: grid;
  place-items: center;
}

.oauth-orbit span:first-child,
.oauth-orbit .auth-mark {
  width: 64px;
  height: 64px;
  right: -18px;
  top: 16%;
  border-radius: 22px 30px 20px 28px;
  background: #4fbeff;
  transform: rotate(12deg);
}

.oauth-orbit .auth-mark {
  position: absolute;
  display: block;
  padding: 8px;
  object-fit: contain;
}

.oauth-orbit span:last-child {
  left: -18px;
  bottom: 18%;
  color: #9552e0;
  font-size: 2.7rem;
  transform: rotate(-14deg);
}

@media (max-width: 620px) {
  body[data-page="auth"] main {
    align-items: start;
  }

  .oauth-shell {
    margin-top: 1rem;
    padding: 2rem 1.25rem;
  }

  .oauth-orbit span:first-child {
    right: 8px;
    top: -24px;
    width: 48px;
    height: 48px;
  }

  .oauth-orbit span:last-child {
    left: 6px;
    bottom: -18px;
  }
}

/* OAuth setup diagnostics */
.oauth-provider-button--google {
  width: 100%;
  color: var(--text);
  background: var(--surface);
  border-color: rgba(83, 88, 98, 0.35);
}

.oauth-provider-button--google .oauth-g {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1;
  color: #fff;
  background: conic-gradient(from -45deg, #ea4335 0deg 90deg, #fbbc05 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg 360deg);
  margin-right: 0.55rem;
}

.oauth-provider-slot.is-unavailable {
  padding: 0;
  border: 0;
}

/* ── Profile stats ── */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.profile-stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg-elevated));
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.15rem;
  align-content: start;
}

.profile-stat-value {
  font-family: var(--font-head);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text);
}

.profile-stat-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.profile-stat-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.profile-stats-loading {
  color: var(--text-muted);
  margin: 0;
}

.profile-dist {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.profile-dist-title {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.dist-row {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 0.5rem;
}

.dist-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dist-track {
  height: 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}

.dist-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--primary), var(--accent-blue, #3a8dff));
  min-width: 2px;
  transition: width 400ms ease;
}

.dist-count {
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
  color: var(--text);
}

/* ── Post-game stats ── */
.post-game-stats {
  border: 1px solid color-mix(in srgb, var(--success) 32%, var(--line));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border-radius: var(--radius-m);
  padding: 0.7rem 0.9rem;
  display: grid;
  gap: 0.2rem;
  animation: clue-reveal 280ms ease;
}

.post-game-stats .pg-you {
  margin: 0;
  font-weight: 800;
  color: color-mix(in srgb, var(--primary) 82%, black);
}

.post-game-stats .pg-global {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Locked / frosted clue (guest auth gate) ── */
.clue-locked {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--radius-m);
  overflow: hidden;
  min-height: 96px;
  display: grid;
  align-items: center;
  background: var(--surface-muted);
}

.clue-locked-tag {
  position: absolute;
  top: 0.5rem;
  left: 0.6rem;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: var(--radius-btn);
  padding: 0.12rem 0.4rem;
}

.clue-locked-preview {
  margin: 0;
  padding: 1.9rem 1rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

.clue-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--surface-contrast) 48%, transparent);
  backdrop-filter: blur(2px);
}

.clue-lock-icon {
  font-size: 1.35rem;
  filter: drop-shadow(0 0 8px rgba(107, 255, 97, 0.5));
}

.clue-lock-copy {
  margin: 0;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
}

.clue-lock-cta {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.single-clue-card.is-guest-locked {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ── Post-solve results overlay ── */
.results-overlay.is-solved {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(4px);
}

.result-card--solved {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  box-shadow: var(--glow-accent-strong);
  animation: result-pop 260ms ease;
}

@keyframes result-pop {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.result-card--solved h3 {
  margin: 0;
  font-weight: 800;
  font-size: 1.6rem;
}

.result-card--solved .result-sub {
  margin: 0;
  color: var(--text-muted);
  font-weight: 300;
}

.result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  width: 100%;
  margin: 0.3rem 0;
}

.result-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-muted);
  padding: 0.7rem 0.5rem;
  display: grid;
  gap: 0.1rem;
}

.result-stat-value {
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
}

.result-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.result-stat-cmp {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.result-stat-cmp.is-better {
  color: var(--primary);
  font-weight: 700;
}

.result-stat-cmp.is-worse {
  color: var(--accent-orange);
}

.result-share {
  width: 100%;
  display: grid;
  gap: 0.5rem;
}

.result-share-text {
  margin: 0;
  text-align: left;
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-contrast);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 0.7rem 0.85rem;
}

/* ── Daily streak ── */
.daily-streak-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.2rem 0 0.1rem;
}

.daily-streak-pill {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: var(--radius-btn);
  padding: 0.28rem 0.7rem;
  box-shadow: var(--glow-accent);
}

.daily-streak-best {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 300;
}

/* ── Weekly locked board preview ── */
.level-board.is-locked-preview .level-grid {
  filter: blur(8px) saturate(0.7);
  pointer-events: none;
  transition: filter var(--transition-med);
}

.results-overlay.is-locked {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px);
}

.result-card--locked {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  box-shadow: var(--glow-accent);
}

.result-lock-icon {
  font-size: 2rem;
  filter: drop-shadow(0 0 12px rgba(107, 255, 97, 0.55));
}

/* ── Typography weight contrast - bold heads, light subtext. ── */
.section-title,
.card-title,
.hero-title,
.mxi-hero .section-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-copy,
.card-copy,
.landing-tagline,
.mxi-context,
.profile-stat-sub,
.switch-label-sub {
  font-weight: 300;
}

/* ── Legal / privacy pages ── */
.legal-section .card-title {
  font-size: 1.02rem;
  margin: 0 0 0.35rem;
}

.legal-list {
  margin: 0.4rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.4rem;
}

.legal-list li {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 300;
}

.legal-list li strong {
  color: var(--text);
  font-weight: 700;
}

.legal-section code {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  padding: 0.03rem 0.32rem;
  border-radius: 3px;
  font-size: 0.85em;
}

.legal-section .card a,
.legal-section .section-copy a {
  color: var(--primary);
  text-underline-offset: 2px;
}

.legal-operator {
  font-size: 0.86rem;
}

.legal-disclaimer {
  margin-top: var(--space-4);
  font-size: 0.83rem;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

/* Collapsible legal sections */
.legal-details {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  overflow: hidden;
}

.legal-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 1.1rem;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  user-select: none;
}

.legal-summary::-webkit-details-marker {
  display: none;
}

.legal-summary::after {
  content: "▾";
  color: var(--primary);
  font-size: 1rem;
  transition: transform var(--transition-fast);
}

.legal-details[open] > .legal-summary {
  border-bottom: 1px solid var(--line);
}

.legal-details[open] > .legal-summary::after {
  transform: rotate(180deg);
}

.legal-summary:hover {
  color: var(--primary);
}

.legal-details .legal-grid,
.legal-details .legal-operator {
  padding: 1rem 1.1rem;
}

.legal-details .legal-grid {
  padding-top: 0;
}

/* Anchored sections shouldn't hide under the sticky header when linked to. */
#privacy,
#terms,
#credits {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* ── About page: founder story ── */
.about-founder-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3.5rem;
  align-items: center;
}

.about-founder-photo-wrap {
  flex-shrink: 0;
}

.about-founder-photo {
  width: 100%;
  border-radius: var(--radius-l);
  object-fit: cover;
  aspect-ratio: 3 / 4;
  display: block;
}

.about-founder-text .section-copy {
  margin-top: 0.75rem;
}

.about-founder-text .section-copy a {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .about-founder-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-founder-photo {
    aspect-ratio: 4 / 3;
    max-height: 280px;
    width: 100%;
  }
}

/* ── Difficulty legend (level select) ── */
.level-difficulty-legend {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-m);
  padding: 0.7rem 1rem;
  margin-bottom: var(--space-3);
  display: grid;
  gap: 0.35rem;
}

.level-difficulty-legend:empty {
  display: none;
}

.level-difficulty-legend .legend-title {
  margin: 0;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.level-difficulty-legend .legend-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.level-difficulty-legend .legend-stars {
  color: var(--accent-orange, #ff8a3d);
  letter-spacing: 1px;
  margin-right: 0.25rem;
}

.level-difficulty-legend .legend-note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-muted);
}

/* ── Difficulty stars ── */
.difficulty-stars {
  display: inline-flex;
  gap: 1px;
  line-height: 1;
  white-space: nowrap;
}

.difficulty-stars .diff-star {
  color: color-mix(in srgb, var(--text-muted) 38%, transparent);
  font-size: 0.95em;
}

.difficulty-stars .diff-star.is-filled {
  color: var(--accent-orange, #ff8a3d);
}

.difficulty-stars.is-compact .diff-star {
  font-size: 0.7rem;
}

.level-tile .difficulty-stars {
  position: relative;
  z-index: 2;
  margin: 0.1rem 0;
}

.hud-difficulty .difficulty-stars {
  font-size: 1rem;
}

.dev-google-form {
  display: grid;
  gap: 0.5rem;
  width: 100%;
}

.dev-google-email {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(83, 88, 98, 0.32);
  background: #fff;
  color: var(--text);
  font: inherit;
}

.dev-google-email:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.dev-google-form .oauth-provider-button--google {
  display: flex;
  align-items: center;
  justify-content: center;
}

.oauth-diagnostics {
  width: min(100%, 520px);
  margin: 1.25rem auto 0;
  border: 1px solid rgba(83, 88, 98, 0.28);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  text-align: left;
  color: var(--color-stone, #535862);
  background: var(--surface);
}

.oauth-diagnostics summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}

.oauth-diagnostics ul {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.oauth-diagnostics li {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1fr);
  gap: 0.7rem;
  font-size: 0.72rem;
  line-height: 1.4;
}

.oauth-diagnostics li strong::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: #bb9915;
}

.oauth-diagnostics li.is-ok strong::before {
  background: #28a76b;
}

/* Missing XI: modern Geniestudio formation canvas */
body.sport-missingxi {
  --mxi-accent: #6bff61;
  --mxi-glow: rgba(107, 255, 97, 0.5);
  --primary: #6bff61;
  --primary-strong: #4fe048;
  --surface: #1a1f24;
  --surface-muted: #232a31;
  --bg-elevated: #1a1f24;
  --text: #ffffff;
  --text-muted: #aeb6be;
  --line: rgba(174, 182, 190, 0.16);
  --line-strong: rgba(174, 182, 190, 0.3);
  color: #ffffff;
  background:
    radial-gradient(circle at 8% 14%, rgba(107, 255, 97, 0.12) 0 8px, transparent 9px),
    radial-gradient(circle at 92% 28%, rgba(107, 255, 97, 0.08) 0 11px, transparent 12px),
    radial-gradient(circle at 82% 78%, rgba(79, 147, 255, 0.1), transparent 24%),
    #101418;
}

body.sport-missingxi .card,
body.sport-missingxi .mxi-shell {
  color: #ffffff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.sport-missingxi .section-title,
body.sport-missingxi .card-title,
body.sport-missingxi .card-copy,
body.sport-missingxi .kicker,
body.sport-missingxi .auth-pill,
body.sport-missingxi .top-nav-link,
body.sport-missingxi .brand strong,
body.sport-missingxi .brand brand-wordmark {
  color: #ffffff;
}

body.sport-missingxi .section-copy,
body.sport-missingxi .card-copy {
  color: var(--text-muted);
}

.mxi-shell {
  gap: 24px;
  padding: 0;
}

.mxi-hero {
  border: 1px solid rgba(83, 88, 98, 0.32);
  border-radius: 32px;
  padding: clamp(24px, 5vw, 48px);
  background:
    radial-gradient(circle at 88% 18%, rgba(149, 82, 224, 0.17), transparent 24%),
    radial-gradient(circle at 72% 95%, rgba(79, 190, 255, 0.24), transparent 30%),
    var(--surface);
  box-shadow: rgba(4, 69, 144, 0.08) 0 14px 20px 4px;
}

.mxi-hero .section-title {
  letter-spacing: -0.04em;
}

.mxi-local-nav {
  padding: 6px;
  border-radius: 999px;
  background: rgba(26, 31, 36, 0.8);
  border: 1px solid rgba(83, 88, 98, 0.22);
  width: fit-content;
}

.mxi-nav-btn {
  border: 0;
  color: var(--text-muted);
  background: transparent;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mxi-nav-btn.is-active {
  color: #ffffff;
  background: #181d27;
  border-color: var(--text);
}

.mxi-fixture-card,
.mxi-reveal-card,
.mxi-lineup-card,
.mxi-round-card,
.mxi-archive-card,
.mxi-leaderboard-card,
.mxi-profile-card {
  border: 1px solid rgba(83, 88, 98, 0.32);
  border-radius: 32px;
  padding: clamp(20px, 3vw, 32px);
  color: var(--text);
  background: var(--surface);
}

.mxi-fixture-card {
  background: linear-gradient(180deg, #fff9e0 0%, #ffeca3 100%);
}

.mxi-reveal-card {
  background: linear-gradient(180deg, #f4ebff 0%, #e4ccff 100%);
}

.mxi-fixture-card h2,
.mxi-reveal-head h3,
.mxi-lineup-head h3,
.mxi-round-card h3 {
  color: var(--text);
  letter-spacing: -0.02em;
}

.mxi-context,
.mxi-stage-copy,
#mxi-commentary {
  color: var(--text-muted);
}

.mxi-reveal-stage {
  border-top-color: rgba(83, 88, 98, 0.28);
}

.mxi-lineup-head {
  align-items: center;
  margin-bottom: 16px;
}

.mxi-give-up-btn {
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--text);
  border-color: rgba(24, 29, 39, 0.35);
  background: var(--surface);
}

.mxi-match-strip {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(83, 88, 98, 0.28);
  border-radius: 24px;
  background: var(--surface-muted);
}

.mxi-strip-competition,
.mxi-strip-date {
  color: var(--text-muted);
}

.mxi-strip-team strong,
.mxi-strip-score {
  color: var(--text);
  letter-spacing: -0.02em;
}

.mxi-team-crest {
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 91% 15%, 84% 76%, 50% 100%, 16% 76%, 9% 15%);
  color: #ffffff;
  background: #535862;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mxi-team-crest--target {
  color: var(--mxi-shirt-ink, #0a0d12);
  background: var(--mxi-shirt, #4fbeff);
}

.mxi-lineup {
  min-height: clamp(720px, 82vh, 920px);
  padding: clamp(18px, 3vw, 36px) clamp(8px, 2vw, 24px);
  gap: clamp(14px, 2vh, 24px);
  border: 0;
  border-radius: 32px;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(255, 255, 255, 0.55) 50%, transparent 50.15%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 10%, rgba(255, 255, 255, 0.085) 10% 20%),
    linear-gradient(180deg, #66a96b 0%, #4f955d 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.62);
}

.mxi-lineup::before {
  inset: 16px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 20px;
}

.mxi-lineup::after {
  width: 130px;
  border: 2px solid rgba(255, 255, 255, 0.62);
}

.mxi-line {
  align-items: center;
  gap: clamp(4px, 1vw, 14px);
}

.mxi-slot {
  width: clamp(94px, 12vw, 144px);
  min-height: 146px;
  padding: 7px;
  gap: 5px;
  border: 1px solid rgba(10, 13, 18, 0.14);
  border-radius: 16px;
  color: var(--text);
  background: rgba(26, 31, 36, 0.92);
  box-shadow: rgba(4, 69, 144, 0.12) 0 8px 16px;
  backdrop-filter: blur(8px);
}

.mxi-slot::before {
  content: none;
}

.mxi-slot.is-gk {
  background: rgba(255, 249, 224, 0.95);
}

.mxi-slot.is-solved,
.mxi-slot.is-revealed {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  box-shadow: var(--glow-accent);
}

.mxi-jersey {
  position: relative;
  width: 68px;
  height: 58px;
  margin: 0 auto;
  color: var(--mxi-shirt, #4fbeff);
}

.mxi-slot.is-gk .mxi-jersey {
  color: #f0c934;
}

.mxi-jersey-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(10, 13, 18, 0.18));
}

.mxi-jersey-body {
  fill: currentColor;
  stroke: var(--mxi-shirt-trim, rgba(10, 13, 18, 0.4));
  stroke-width: 2;
}

.mxi-jersey-trim {
  fill: var(--mxi-shirt-secondary, #ffffff);
}

.mxi-jersey-detail {
  fill: none;
  stroke: var(--mxi-shirt-trim, rgba(10, 13, 18, 0.4));
  stroke-width: 2;
  opacity: 0.6;
}

.mxi-jersey-number {
  position: absolute;
  inset: 25px 0 auto;
  color: var(--mxi-shirt-ink, #0a0d12);
  text-align: center;
  font-size: 0.82rem;
  line-height: 1;
}

.mxi-slot-pos {
  justify-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-muted);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.mxi-surname-blanks {
  min-height: 1.1em;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(0.54rem, 0.75vw, 0.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}

.mxi-slot-progress {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.5rem;
  line-height: 1.1;
}

.mxi-slot-form {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
}

.mxi-slot-input {
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(83, 88, 98, 0.32);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface);
  font-size: 0.62rem;
}

.mxi-slot-input:focus-visible {
  outline: 2px solid #0099ff;
}

.mxi-slot-submit {
  min-height: 28px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: #181d27;
  font-size: 0.58rem;
}

.mxi-player-name {
  margin: 0;
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.mxi-round-card {
  background: linear-gradient(180deg, #e5f6ff 0%, #c2e9ff 100%);
}

/* ── Light-background card text overrides ───────────────────────────────────
   The fixture, reveal, and round cards have light/cream/pastel backgrounds
   but the sport-missingxi theme sets --text to #fff. Force dark text on them.
─────────────────────────────────────────────────────────────────────────── */

/* Fixture card (cream/yellow) */
.mxi-fixture-card h2,
.mxi-fixture-card .mxi-competition,
.mxi-fixture-card .mxi-context,
.mxi-fixture-card .mxi-meta-row,
.mxi-fixture-card .pill {
  color: #0d1117;
}
.mxi-fixture-card .mxi-competition {
  color: #3a4452;
}
.mxi-fixture-card .mxi-context {
  color: #55627a;
}

/* The year/status pills sat dark-on-dark on the cream card - give them a
   solid dark chip with white text so they read instantly. */
.mxi-fixture-card .pill {
  background: rgba(13, 17, 23, 0.85);
  color: #ffffff;
  border-color: transparent;
}
.mxi-fixture-card .pill--lime {
  background: #6bff61;
  color: #06210b;
}

/* Reveal card (light purple) */
.mxi-reveal-card .mxi-reveal-head h3,
.mxi-reveal-card .mxi-stage-label,
.mxi-reveal-card .mxi-stage-copy,
.mxi-reveal-card #mxi-events-list,
.mxi-reveal-card #mxi-events-list li,
.mxi-reveal-card #mxi-score-hint,
.mxi-reveal-card #mxi-goals {
  color: #1a1232;
}
.mxi-reveal-card .mxi-stage-label {
  color: #4a3a6e;
}
.mxi-reveal-card .btn-outline {
  color: #2d1f56;
  border-color: rgba(45, 31, 86, 0.4);
  background: rgba(255, 255, 255, 0.35);
}

/* Round card (light blue) */
.mxi-round-card h3,
.mxi-round-card .mxi-feedback,
.mxi-round-card .mxi-guess-log-title,
.mxi-round-card #mxi-guess-log li,
.mxi-round-card .mxi-mini-stats span {
  color: #0a1a2e;
}
.mxi-round-card .mxi-feedback {
  color: #1a2e42;
}
.mxi-round-card .mxi-guess-log-title {
  color: #2e4a60;
}
.mxi-round-card #mxi-guess-log li {
  border-color: rgba(14, 38, 58, 0.2);
  background: rgba(255, 255, 255, 0.4);
  color: #0a1a2e;
}
.mxi-round-card #mxi-guess-log li.is-correct {
  border-color: rgba(22, 120, 60, 0.5);
  background: rgba(220, 255, 220, 0.5);
}
.mxi-round-card #mxi-guess-log li.is-wrong {
  border-color: rgba(180, 40, 20, 0.35);
  background: rgba(255, 220, 210, 0.4);
}
.mxi-round-card .mxi-mini-stats span {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(14, 38, 58, 0.18);
  color: #0a1a2e;
}
.mxi-round-card .mxi-mini-stats small {
  color: #2e5068;
}
.mxi-round-card .mxi-mini-stats strong {
  color: #0a1a2e;
}

.mxi-feedback.is-error {
  color: #9c3f16;
}

.mxi-mini-stats span,
.mxi-profile-tile {
  border-color: rgba(83, 88, 98, 0.25);
  color: var(--text);
  background: var(--surface-muted);
}

@media (max-width: 767px) {
  .mxi-local-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mxi-nav-btn {
    min-height: 38px;
    padding: 6px;
    font-size: 0.68rem;
  }

  .mxi-lineup-head {
    align-items: flex-start;
  }

  .mxi-match-strip {
    padding: 12px;
  }

  .mxi-strip-scoreline {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .mxi-team-crest {
    width: 36px;
    height: 41px;
    font-size: 0.54rem;
  }

  .mxi-strip-team strong {
    font-size: 0.7rem;
  }

  .mxi-lineup {
    min-height: 650px;
    padding: 18px 4px;
    gap: 10px;
    border-radius: 24px;
  }

  .mxi-lineup::before {
    inset: 8px;
    border-radius: 18px;
  }

  .mxi-lineup::after {
    width: 78px;
  }

  .mxi-line[data-row-size="2"] {
    padding-inline: 12px;
  }

  .mxi-slot {
    width: clamp(68px, 22vw, 88px);
    min-height: 128px;
    padding: 4px;
    border-radius: 12px;
  }

  .mxi-jersey {
    width: 48px;
    height: 42px;
  }

  .mxi-jersey-number {
    inset: 18px 0 auto;
    font-size: 0.62rem;
  }

  .mxi-surname-blanks {
    font-size: 0.44rem;
  }

  .mxi-slot-progress {
    display: grid;
    justify-content: center;
    text-align: center;
    font-size: 0.42rem;
  }

  .mxi-slot-form {
    grid-template-columns: 1fr;
  }

  .mxi-slot-input,
  .mxi-slot-submit {
    width: 100%;
    min-height: 22px;
    border-radius: 8px;
    font-size: 0.48rem;
  }

  .oauth-diagnostics li {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

/* ============================================================
   POLISH LAYER - Accessibility, Empty States, Skeletons,
   Focus improvements, Image load, Reduced Motion
   ============================================================ */

/* ── Reduced-motion: disable all animations / transitions ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .connector-line,
  .mbappe-demo-lines line,
  .kicker::before,
  .doodle-ball,
  .doodle-star,
  .home-intro,
  .home-intro.is-exit {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Skeleton loader ── */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--surface-muted) 90%, transparent) 25%,
    color-mix(in srgb, var(--line) 60%, transparent) 50%,
    color-mix(in srgb, var(--surface-muted) 90%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  border-radius: 4px;
  margin-bottom: 0.5em;
}

.skeleton-text.wide { width: 80%; }
.skeleton-text.narrow { width: 40%; }

/* ── Empty state ── */
.empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: clamp(2rem, 6vw, 4rem) var(--space-5);
  color: var(--text-muted);
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-m);
  background: var(--surface-muted);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}

.empty-state h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.empty-state p {
  margin: 0;
  max-width: 36ch;
}

.friend-list .empty-state {
  padding: 1.5rem 1rem;
  gap: var(--space-2);
}

.friend-list .empty-state-icon {
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
}

.friend-list .empty-state h3 {
  font-size: 1.2rem;
}

.friend-list .empty-state p {
  font-size: 0.83rem;
}

/* ── Image lazy-load fade-in ── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 350ms ease;
}

img[loading="lazy"].is-loaded,
img.loaded {
  opacity: 1;
}

/* ── Enhanced focus ring for interactive elements ── */
.btn:focus-visible,
.nav-tab:focus-visible,
.mode-switch-btn:focus-visible,
.scope-pill:focus-visible,
.auth-tab:focus-visible,
.mxi-nav-btn:focus-visible,
.sport-tab:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.guess-input:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 15%, transparent);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* ── Toast variants ── */
.toast.warning {
  border-color: color-mix(in srgb, var(--accent-orange) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-orange) 6%, var(--surface));
}

.toast.error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}

/* ── Leaderboard rank medals ── */
.rank-pill[data-rank="1"] {
  background: linear-gradient(135deg, #f5c842, #e8a800);
  border-color: #d49900;
  color: #4a3200;
}

.rank-pill[data-rank="2"] {
  background: linear-gradient(135deg, #d1d5db, #b0b4ba);
  border-color: #999ea6;
  color: #2a2d33;
}

.rank-pill[data-rank="3"] {
  background: linear-gradient(135deg, #e8a87c, #cd7f45);
  border-color: #b86c36;
  color: #3d2010;
}

/* ── Improved .card for non-hover contexts ── */
@media (hover: none) {
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .btn:hover {
    transform: none;
    filter: none;
  }

  .fp-player-card:hover {
    transform: none;
  }
}

/* ── Input autofill styling ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Improved auth form layout ── */
.auth-form input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* ── Level board loading placeholder ── */
.fp-player-card:empty {
  animation: skeletonShimmer 1.5s infinite;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--surface-muted) 90%, transparent) 25%,
    color-mix(in srgb, var(--line) 55%, transparent) 50%,
    color-mix(in srgb, var(--surface-muted) 90%, transparent) 75%
  );
  background-size: 200% 100%;
}

/* ── Success flash improvement - wider reveal ── */
.correct-player-flash.is-visible {
  pointer-events: auto;
}

/* ── Scroll-smooth for tab panel transitions ── */
.tab-panel {
  animation: panelFadeIn 160ms ease;
}

@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress bar animation ── */
.stat-bar-fill {
  transition: width 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Smooth HUD chip number changes ── */
.hud-chip strong {
  transition: color var(--transition-fast);
}

/* ── Link focus for accessibility ── */
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Improved leaderboard row highlight ── */
.leaderboard-table tr.is-me td {
  background: color-mix(in srgb, var(--accent-lime) 12%, var(--surface));
  font-weight: 600;
}

/* ── Print styles ── */
@media print {
  .site-header,
  .mobile-tabbar,
  .play-fab,
  .ad-slot,
  .theme-toggle-fab,
  #toast-root,
  #modal-root {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ─── Keyboard shortcuts modal ─────────────────────────────────── */
.kb-help-trigger {
  position: fixed;
  bottom: 5.5rem;
  right: 1.25rem;
  z-index: 400;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
  opacity: 0.6;
}
.kb-help-trigger:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  opacity: 1;
}

.kb-help-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem 1.25rem 6rem;
  pointer-events: none;
}
.kb-help-modal:not([hidden]) {
  pointer-events: auto;
}

.kb-help-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 1.25rem 1.5rem 1.5rem;
  min-width: 220px;
  max-width: 280px;
  position: relative;
  animation: kb-slide-in 180ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes kb-slide-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.kb-help-title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .03em;
  color: var(--text);
  margin: 0 0 .75rem;
}

.kb-help-close {
  position: absolute;
  top: .6rem;
  right: .75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  padding: .1rem .3rem;
  border-radius: var(--radius-s);
  transition: color 120ms, background 120ms;
}
.kb-help-close:hover { color: var(--text); background: var(--surface-alt); }

.kb-help-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .75rem;
  margin: 0;
}
.kb-help-list dt {
  display: flex;
  align-items: center;
}
.kb-help-list dd {
  margin: 0;
  font-size: .82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

kbd {
  display: inline-block;
  padding: .15em .4em;
  font-size: .72rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  box-shadow: 0 1px 0 var(--border);
  color: var(--text);
  white-space: nowrap;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .kb-help-trigger { display: none; }
  .kb-help-modal   { display: none !important; }
}

@media print {
  .kb-help-trigger, .kb-help-modal { display: none !important; }
}

/* ─── Featured modes grid (modes page) ─────────────────────────── */
.featured-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 1rem;
}

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

.featured-mode-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  text-decoration: none;
  color: var(--text);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.featured-mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%);
  pointer-events: none;
}

.featured-mode-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.featured-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .25rem;
}

.featured-mode-emoji {
  font-size: 2rem;
  line-height: 1;
}

.mode-status-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: var(--radius-pill);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.badge-live {
  background: var(--success);
  color: #fff;
}

.badge-beta {
  background: var(--accent-blue);
  color: #fff;
}

.badge-soon {
  background: var(--surface-muted);
  color: var(--text-muted);
  border: 1px solid var(--line);
}

.featured-mode-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  letter-spacing: .04em;
  line-height: 1;
  margin: 0;
}

.featured-mode-tagline {
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0;
}

.featured-mode-desc {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}

.featured-mode-stats {
  display: flex;
  gap: .5rem;
  margin-top: .25rem;
}

.fms-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  padding: .35rem .65rem;
  background: var(--surface-muted);
  border-radius: var(--radius-s);
  font-size: .72rem;
}

.fms-chip strong {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}

.fms-chip small {
  color: var(--text-muted);
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.featured-mode-cta {
  display: inline-block;
  margin-top: .5rem;
  align-self: flex-start;
  font-size: .82rem;
  padding: .45rem .9rem;
}

/* ─── "Did you mean?" chip ─────────────────────────────────────── */
.did-you-mean-chip {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--text-muted);
  padding: .5rem .75rem;
  margin: .4rem 0 0;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  animation: dym-in 180ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes dym-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.dym-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-style: dotted;
}
.dym-btn:hover { color: var(--primary-strong); }
.dym-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 .1rem;
  margin-left: auto;
  opacity: .55;
}
.dym-dismiss:hover { opacity: 1; }

/* ─── Hard Mode toggle ─────────────────────────────────────────── */
.hard-mode-toggle .switch-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.hard-mode-badge {
  font-size: .85rem;
  line-height: 1;
}
.switch-label-sub {
  display: block;
  width: 100%;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: .05rem;
}
.hard-mode-toggle input:checked ~ .switch-track {
  background: var(--accent-orange, #f97316);
}

/* ─── Daily completed / countdown screen ───────────────────────── */
.daily-done-card { text-align: center; }
.daily-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin: 1.25rem 0 .25rem;
  padding: 1rem 1.5rem;
  background: var(--surface-muted);
  border-radius: var(--radius-m);
}
.daily-countdown small {
  font-size: .75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.daily-countdown-value {
  font-family: var(--font-head);
  font-size: 2rem;
  letter-spacing: .04em;
  color: var(--primary);
  font-weight: 700;
}

/* ─── Weekly tab countdown badge ───────────────────────────────── */
.weekly-countdown-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  background: var(--accent-orange, #f97316);
  color: #fff;
  padding: .1rem .4rem;
  border-radius: var(--radius-pill);
  margin-left: .3rem;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* ─── Clue card improvements ───────────────────────────────────── */
.single-clue-card.is-unlocked .single-clue-text {
  animation: clue-reveal 260ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes clue-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.single-clue-text {
  font-style: italic;
  color: var(--text);
  font-size: .92rem;
  padding: .6rem .75rem;
  background: var(--surface-muted);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  margin-top: .5rem;
}

/* ============================================================
   Sport accent themes - subtle basketball (NBA) & gridiron (NFL).
   Defined last so they override the base green accent on the play
   and levels pages when body.sport-nba / body.sport-nfl is set.
   ============================================================ */
body.sport-nba {
  --primary: #ff7a2f;          /* basketball orange */
  --primary-strong: #e85f14;
  --primary-ink: #1a0d03;
  --accent-lime: #ff7a2f;
  --success: #ff7a2f;
  --focus: #ff7a2f;
  --glow-accent: 0 0 12px rgba(255, 122, 47, 0.42);
  --glow-accent-strong: 0 0 22px rgba(255, 122, 47, 0.58);
  --glow-accent-soft: 0 0 0 3px rgba(255, 122, 47, 0.16);
  background:
    radial-gradient(circle at 88% -10%, rgba(255, 122, 47, 0.16), transparent 40%),
    radial-gradient(circle at 6% 4%, rgba(255, 122, 47, 0.1), transparent 32%),
    var(--bg);
}

/* Basketball court arc, very subtle, fixed behind the app. */
body.sport-nba::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 50% -22%, transparent 0 30vw, rgba(255, 122, 47, 0.12) 30vw 30.4vw, transparent 30.7vw),
    radial-gradient(circle at 50% 122%, transparent 0 30vw, rgba(255, 122, 47, 0.12) 30vw 30.4vw, transparent 30.7vw);
}

body.sport-nfl {
  --primary: #e0a13c;          /* gridiron / pigskin gold */
  --primary-strong: #c1832a;
  --primary-ink: #1c1204;
  --accent-lime: #e0a13c;
  --success: #e0a13c;
  --focus: #e0a13c;
  --glow-accent: 0 0 12px rgba(224, 161, 60, 0.4);
  --glow-accent-strong: 0 0 22px rgba(224, 161, 60, 0.56);
  --glow-accent-soft: 0 0 0 3px rgba(224, 161, 60, 0.16);
  background:
    radial-gradient(circle at 90% -12%, rgba(224, 161, 60, 0.14), transparent 40%),
    var(--bg);
}

/* Gridiron yard lines - faint vertical stripes behind the app. */
body.sport-nfl::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 11.5%,
    rgba(224, 161, 60, 0.09) 11.5% 12%,
    transparent 12%
  );
}

/* ============================================================
   Box2Box grid bingo game (grid.html)
   ============================================================ */
.grid-game-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
  margin-inline: auto;
}

.grid-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}

.grid-reshuffle-btn {
  font-size: .82rem;
  padding: .35rem .85rem;
  opacity: .85;
  transition: opacity 0.2s;
}

/* ── Career Timeline (post-game result overlay) ─────────────────────────── */
.career-timeline {
  margin: 1.25rem 0 .5rem;
  padding: 1rem 1rem .85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.09);
  text-align: left;
  overflow: hidden;
}
.ct-heading {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .7rem;
}
.ct-inner-box {
  background: rgba(0,0,0,.22);
  border-radius: 9px;
  padding: .7rem .9rem .7rem 1rem;
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.ct-inner-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  border-radius: 3px 0 0 3px;
}
.ct-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .28rem;
}
.ct-list li {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.45;
}
.ct-loan {
  display: inline;
  font-size: .68rem;
  font-weight: 700;
  color: #f59e0b;
  letter-spacing: .02em;
  margin-left: .1em;
}
.ct-teammates {
  color: var(--primary);
  font-weight: 600;
}
.grid-reshuffle-btn:hover { opacity: 1; }

/* CrossField H2H record badge */
.grid-h2h-badge {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.grid-h2h-badge .h2h-w { color: var(--primary); }
.grid-h2h-badge .h2h-l { color: #ff7a4d; }

/* CrossField completion / share card */
.grid-vs-result-card {
  margin-top: 1rem;
  padding: 1.25rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(107, 255, 97, 0.25);
  background: linear-gradient(135deg, rgba(20,26,20,0.97), rgba(14,20,14,0.99));
  text-align: center;
  animation: gridResultFadeIn .5s ease both;
}
@keyframes gridResultFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.grid-vs-result-emoji { font-size: 2.4rem; display: block; margin-bottom: .3rem; }
.grid-vs-result-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--primary);
  letter-spacing: .05em;
  margin: 0 0 .25rem;
}
.grid-vs-result-title.is-loss { color: #ff7a4d; }
.grid-vs-result-title.is-draw { color: var(--text-muted); }
.grid-vs-result-sub { color: var(--text-muted); font-size: .9rem; margin-bottom: .85rem; }
.grid-vs-result-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

.grid-timer {
  font-family: var(--font-head);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--text);
  padding: .2rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-muted);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease, border-color .2s ease;
}

.grid-timer.is-low {
  color: #ff6b6b;
  border-color: #ff6b6b;
  animation: gridPulse 1s ease-in-out infinite;
}

@keyframes gridPulse {
  50% { opacity: .55; }
}

.grid-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.grid-stats strong {
  color: var(--primary);
  font-size: 1.05rem;
  font-family: var(--font-head);
}

.grid-search-row {
  position: relative;
}

.grid-search-wrap {
  position: relative;
}

.grid-search {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.grid-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--glow-accent-soft);
}

.grid-search:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.grid-search.is-error {
  border-color: #ff6b6b;
  animation: gridShake .32s ease;
}

@keyframes gridShake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.grid-suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: .25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  max-height: 240px;
  overflow-y: auto;
}

.grid-suggestion {
  padding: .5rem .65rem;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.grid-suggestion:hover {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-muted));
  color: var(--primary);
}

/* 4×4 board: corner + 3 column heads, then 3 rows of head + 3 cells. */
.grid-board {
  display: grid;
  grid-template-columns: 0.78fr repeat(3, 1fr);
  gap: 6px;
}

.grid-corner,
.grid-col-head,
.grid-row-head,
.grid-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: var(--radius-s);
  text-align: center;
  padding: .3rem;
}

.grid-corner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 26%, var(--surface)) , var(--surface-muted));
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-head);
  font-size: .7rem;
  letter-spacing: .06em;
  gap: .15rem;
}

.grid-corner-mark {
  font-size: 1.05rem;
  color: var(--primary);
}

.grid-corner-logo {
  width: 82%;
  max-width: 110px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.grid-col-head,
.grid-row-head {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--text);
}

.grid-crest {
  --crest: #333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--crest);
  color: #fff;
  font-family: var(--font-head);
  font-size: .82rem;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.grid-flag {
  font-size: 1.7rem;
  line-height: 1;
}

.grid-league-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  color: var(--primary);
  font-family: var(--font-head);
  font-size: .78rem;
}

.grid-head-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  line-height: 1.05;
}

.grid-cell {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 8px, transparent 8px 16px),
    var(--surface);
  border: 1px dashed var(--line-strong);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.grid-cell:hover:not(.is-filled) {
  border-color: var(--primary);
  color: var(--primary);
}

.grid-cell.is-active {
  border-style: solid;
  border-color: var(--primary);
  box-shadow: var(--glow-accent-soft), var(--glow-accent);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.grid-cell-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.grid-jersey {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: currentColor;
}

.grid-cell-tag {
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.grid-cell.is-filled {
  cursor: default;
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  color: var(--text);
  animation: gridPop .28s ease;
}

@keyframes gridPop {
  0% { transform: scale(.86); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.grid-cell.is-revealed {
  border-color: var(--line-strong);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.grid-cell-name {
  font-weight: 800;
  font-size: .72rem;
  line-height: 1.1;
  padding-inline: .15rem;
}

.grid-cell-sub {
  font-size: .56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary);
  opacity: .85;
}

.grid-cell.is-revealed .grid-cell-sub {
  color: var(--text-muted);
}

.grid-board.is-complete .grid-cell.is-filled {
  border-color: var(--primary);
  box-shadow: var(--glow-accent-soft);
}

.grid-hint {
  min-height: 1.3em;
  margin: 0;
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .9rem;
}

.grid-howto {
  max-width: 640px;
  margin-inline: auto;
}

/* Grid page gets a subtle pitch-green wash, distinct from play/levels. */
body.sport-grid {
  background:
    radial-gradient(circle at 88% -12%, rgba(107, 255, 97, 0.12), transparent 42%),
    radial-gradient(circle at 4% 6%, rgba(107, 255, 97, 0.08), transparent 34%),
    var(--bg);
}

@media (max-width: 520px) {
  .grid-crest,
  .grid-league-badge { width: 1.7rem; height: 1.7rem; font-size: .68rem; min-width: 1.7rem; }
  .grid-flag { font-size: 1.3rem; }
  .grid-head-label { font-size: .52rem; }
  .grid-cell-name { font-size: .62rem; }
  .grid-board { gap: 4px; }
  .grid-timer { font-size: 1.5rem; }
}

/* ── Box2Box "vs a friend" (tic-tac-toe) ─────────────────────── */
.grid-mode-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-muted);
}

.grid-mode-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .45rem 1rem;
  border-radius: calc(var(--radius-btn) - 1px);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.grid-mode-btn.is-active {
  background: var(--primary);
  color: var(--primary-ink, #0a1a08);
  box-shadow: var(--glow-accent);
}

.grid-versus-auth,
.grid-versus-lobby,
.grid-versus-game { max-width: 640px; margin-inline: auto; }

.grid-versus-new {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.grid-versus-new select {
  flex: 1 1 200px;
  padding: .6rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.grid-versus-note {
  min-height: 1.1em;
  margin: .5rem 0 0;
  color: #ff8f6b;
  font-weight: 600;
  font-size: .85rem;
}

.grid-versus-matches { margin-top: 1.25rem; }

.grid-versus-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

.grid-versus-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-muted);
}

.grid-versus-item.is-your-turn {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong));
  box-shadow: var(--glow-accent-soft);
}

.grid-versus-item-main { display: flex; flex-direction: column; gap: .1rem; }
.grid-versus-status { font-size: .78rem; color: var(--text-muted); font-weight: 700; }
.grid-versus-item.is-your-turn .grid-versus-status { color: var(--primary); }
.grid-versus-open { padding: .35rem .9rem; font-size: .82rem; }
.grid-versus-empty { color: var(--text-muted); font-size: .9rem; padding: .5rem 0; }

.grid-versus-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.grid-versus-back {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: .3rem .2rem;
}
.grid-versus-back:hover { color: var(--primary); }

.grid-versus-turn {
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .03em;
  color: var(--text);
  text-align: center;
  flex: 1;
}

.grid-versus-resign { padding: .35rem .9rem; font-size: .82rem; }

.grid-versus-scoreline {
  text-align: center;
  color: var(--text-muted);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
}

.grid-vs-mark {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1;
}

.grid-vs-cell.vs-me {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--line-strong));
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
  color: var(--text);
}
.grid-vs-cell.vs-me .grid-vs-mark { color: var(--primary); }

.grid-vs-cell.vs-them {
  border-color: color-mix(in srgb, #ff7a4d 52%, var(--line-strong));
  background: color-mix(in srgb, #ff7a4d 16%, var(--surface));
  color: var(--text);
}
.grid-vs-cell.vs-them .grid-vs-mark { color: #ff8f6b; }

.grid-vs-cell.vs-win {
  box-shadow: 0 0 0 2px var(--primary), var(--glow-accent);
}

.grid-vs-cell.is-locked {
  cursor: default;
  opacity: .6;
}
.grid-vs-cell.is-locked:hover { border-color: var(--line-strong); color: var(--text-muted); }

/* Squares auto-filled with the most obvious answer when a game ends early */
.grid-vs-cell.vs-revealed {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface-muted);
  color: var(--text-muted);
}
.grid-vs-cell.vs-revealed .grid-cell-sub { color: var(--text-muted); }

/* 30s shot clock in the versus HUD */
.grid-versus-timer {
  font-family: var(--font-head);
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--text-muted);
  min-width: 3ch;
  text-align: center;
}
.grid-versus-timer.is-mine { color: var(--primary); }
.grid-versus-timer.is-low {
  color: #ff5a5a;
  animation: gridTimerPulse 1s ease-in-out infinite;
}
@keyframes gridTimerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.grid-versus-reshuffle { padding: .35rem .9rem; font-size: .82rem; white-space: nowrap; }

/* Reshuffle offer banner */
.grid-versus-reshuffle-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: .6rem 0 .2rem;
  padding: .6rem .85rem;
  border-radius: var(--radius-s);
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  font-size: .88rem;
  font-weight: 600;
}
.grid-versus-reshuffle-actions { display: flex; gap: .5rem; }
.grid-versus-reshuffle-actions .btn { padding: .3rem .85rem; font-size: .8rem; }

/* Red cross on the "(x) beat you" card */
.grid-vs-result-cross {
  color: #ff5a5a;
  font-weight: 800;
  font-family: var(--font-head);
  line-height: 1;
}

/* Official club crests in the grid headers */
.grid-crest-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.grid-crest-logo {
  width: 2.3rem;
  height: 2.3rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.grid-flag-img {
  width: 2.1rem;
  height: 1.45rem;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   Motion & micro-interaction layer - sharp, quick, tasteful.
   Defined last so it wins the cascade. Fully disabled for
   prefers-reduced-motion users at the bottom of this block.
   ============================================================ */

/* Page entrance: content rises in as each page loads. */
@keyframes fpFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fpPopIn {
  0% { opacity: 0; transform: scale(0.92) translateY(8px); }
  70% { opacity: 1; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fpSheen {
  from { transform: translateX(-130%) skewX(-18deg); }
  to { transform: translateX(230%) skewX(-18deg); }
}

@keyframes fpFabPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107, 255, 97, 0.38), var(--glow-accent); }
  50% { box-shadow: 0 0 0 10px rgba(107, 255, 97, 0), var(--glow-accent); }
}

main {
  animation: fpFadeUp 0.42s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

/* Cards cascade in with a light stagger. */
main .card,
main .mxi-fixture-card,
main .mxi-round-card {
  animation: fpFadeUp 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
main .card:nth-child(2) { animation-delay: 60ms; }
main .card:nth-child(3) { animation-delay: 120ms; }
main section:nth-of-type(2) .card { animation-delay: 90ms; }
main section:nth-of-type(3) .card { animation-delay: 150ms; }

/* Level tiles pop in as a wave across the grid. */
#level-grid .level-tile {
  animation: fpPopIn 0.34s cubic-bezier(0.34, 1.4, 0.44, 1) both;
}
#level-grid .level-tile:nth-child(6n + 2) { animation-delay: 30ms; }
#level-grid .level-tile:nth-child(6n + 3) { animation-delay: 60ms; }
#level-grid .level-tile:nth-child(6n + 4) { animation-delay: 90ms; }
#level-grid .level-tile:nth-child(6n + 5) { animation-delay: 120ms; }
#level-grid .level-tile:nth-child(6n + 6) { animation-delay: 150ms; }
#level-grid .level-tile:nth-child(n + 25) { animation-delay: 180ms; }

#level-grid .level-tile:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), var(--glow-accent-soft);
}

.level-tile--weekly .level-weekly-star {
  animation: fpPopIn 0.5s 0.25s cubic-bezier(0.34, 1.6, 0.44, 1) both;
}

/* Box2Box board: cells ripple in; empty cells invite the tap. */
.grid-board .grid-corner,
.grid-board .grid-col-head,
.grid-board .grid-row-head,
.grid-board .grid-cell {
  animation: fpPopIn 0.3s cubic-bezier(0.34, 1.35, 0.44, 1) both;
}
.grid-board > *:nth-child(4n + 2) { animation-delay: 40ms; }
.grid-board > *:nth-child(4n + 3) { animation-delay: 80ms; }
.grid-board > *:nth-child(4n + 4) { animation-delay: 120ms; }
.grid-board > *:nth-child(n + 9) { animation-delay: 160ms; }

.grid-cell:hover:not(.is-filled):not(.is-locked) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--glow-accent-soft);
}

/* Primary buttons: sheen sweep on hover, tactile press. */
.btn { transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.btn:active { transform: scale(0.97); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after { animation: fpSheen 0.65s ease; }
.btn-primary:hover { box-shadow: var(--glow-accent-strong, var(--glow-accent)); }

/* The floating Play button breathes gently. */
.play-fab { animation: fpFabPulse 2.6s ease-in-out infinite; }

/* Nav dropdown: menu unfolds instead of snapping. */
.nav-dropdown[open] > .nav-dropdown-menu {
  animation: fpPopIn 0.2s cubic-bezier(0.3, 1.3, 0.4, 1) both;
  transform-origin: top center;
}

/* Player cards on the board lift slightly under the pointer. */
.fp-player-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.fp-player-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35); }

/* Other-games cards: livelier hover. */
.other-game-card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.other-game-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), var(--glow-accent-soft);
}

/* Crisp, consistent keyboard focus. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  main, main .card, main .mxi-fixture-card, main .mxi-round-card,
  #level-grid .level-tile, .level-tile--weekly .level-weekly-star,
  .grid-board > *, .nav-dropdown[open] > .nav-dropdown-menu {
    animation: none !important;
  }
  .play-fab { animation: none !important; }
  .btn-primary:hover::after { animation: none !important; }
  .btn, .fp-player-card, .other-game-card, .grid-cell, .level-tile { transition: none !important; }
}

/* CrossField board filter (league-only / international boards) */
.grid-filter-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.grid-filter-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.grid-filter {
  flex: 1;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-muted);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}
.grid-filter:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--glow-accent-soft);
}

/* Notification dot on the Profile nav links */
[data-nav-link="profile.html"],
[data-mobile-link="profile.html"] { position: relative; }
.nav-dot {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--bg), var(--glow-accent);
  animation: fpFabPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
[data-mobile-link="profile.html"] .nav-dot { top: 2px; right: 14px; }
@media (prefers-reduced-motion: reduce) { .nav-dot { animation: none !important; } }

/* Desktop-only ad placements + the "suggest an idea" strip */
.ad-slot--desktop-only { margin: 1.25rem auto 0; }
@media (max-width: 899px) {
  .ad-slot--desktop-only { display: none !important; }
}

.suggest-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.suggest-strip p { margin: 0; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
.suggest-idea-link { white-space: nowrap; }

/* Flash banner: prominent, self-dismissing notification (friend requests) */
@keyframes fpFlashIn {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.flash-banner {
  position: fixed;
  top: calc(var(--header-height, 64px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.8rem 1.3rem;
  border-radius: var(--radius-btn);
  border: 1px solid color-mix(in srgb, var(--primary) 65%, var(--line-strong));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--surface)), var(--surface));
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), var(--glow-accent);
  animation: fpFlashIn 0.3s cubic-bezier(0.3, 1.2, 0.4, 1) both;
  text-decoration: none;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.flash-banner.is-leaving { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; transform: translate(-50%, -12px); }
@media (prefers-reduced-motion: reduce) { .flash-banner { animation: none !important; } }

/* Top-right CTA: Play stays in line with Sign In/Out; the small Suggest
   pill hangs just underneath it without affecting the row alignment. */
.header-cta-stack {
  position: relative;
  display: flex;
  align-items: center;
}
.header-cta-stack .suggest-feature-btn {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
}
.suggest-feature-btn {
  display: inline-flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.suggest-feature-btn:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong));
}
@media (max-width: 899px) {
  /* On mobile the header Play button is hidden (the FAB covers it), so the
     icon pill sits right-aligned on its own compact row under the header. */
  .header-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .header-cta-stack { margin-left: auto; }
  .header-cta-stack .suggest-feature-btn { position: static; padding: 0.28rem 0.55rem; }
  .suggest-feature-btn .suggest-feature-label { display: none; }
}

/* ============================================================
   Football news side rail (desktop, football pages)
   A right-edge "News" tab slides out a fixed panel of live
   headlines from /api/news. Hidden entirely below 900px.
   ============================================================ */
.news-rail-toggle,
.news-rail {
  display: none;
}
@media (min-width: 900px) {
  .news-rail-toggle {
    position: fixed;
    right: 0;
    top: 42%;
    z-index: 120;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: 0;
    padding: 0.55rem 0.4rem 0.6rem;
    background: var(--surface, #1a1f24);
    color: var(--text, #e8edf2);
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.14));
    border-right: 0;
    border-radius: 12px 0 0 12px;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, color 0.15s ease;
  }
  .news-rail-toggle:hover { color: var(--primary); }
  .news-rail-toggle.is-open { transform: translateX(-316px); }
  .news-rail-toggle-label { writing-mode: vertical-rl; }

  .news-rail {
    position: fixed;
    right: 0;
    top: 96px;
    bottom: 24px;
    width: 316px;
    z-index: 119;
    display: block;
    overflow-y: auto;
    background: color-mix(in srgb, var(--surface, #1a1f24) 94%, transparent);
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.14));
    border-right: 0;
    border-radius: 16px 0 0 16px;
    padding: 0.9rem 1rem 1.1rem;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    transform: translateX(105%);
    transition: transform 0.24s ease;
  }
  .news-rail.is-open { transform: translateX(0); }
}
.news-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}
.news-rail-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary, #6bff61);
}
.news-rail-close {
  min-height: 0;
  padding: 0 0.35rem;
  background: transparent;
  border: 0;
  color: var(--muted, #aeb6be);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.news-rail-close:hover { color: var(--text, #e8edf2); }
.news-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.news-rail-list li {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.news-rail-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.news-rail-list a {
  display: block;
  color: var(--text, #e8edf2);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.news-rail-list a:hover { color: var(--primary, #6bff61); }
.news-rail-item-meta {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.66rem;
  color: var(--muted, #aeb6be);
  letter-spacing: 0.02em;
}

/* News rail: Latest Results block (top 3 big-competition finals) */
.news-rail-subtitle {
  margin: 0 0 0.45rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #aeb6be);
}
.news-rail-results {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.news-rail-results li {
  display: grid;
  gap: 0.14rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary, #6bff61) 6%, transparent);
}
.news-rail-result-comp {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary, #6bff61);
}
.news-rail-result-score {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text, #e8edf2);
  line-height: 1.3;
}

/* ============================================================
   Top Tens game
   ============================================================ */
.topten-shell {
  display: grid;
  gap: var(--space-5);
}
.topten-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: end;
}
.topten-hud {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topten-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}
.topten-board-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: clamp(1rem, 2.2vw, 1.4rem);
}
.topten-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  counter-reset: none;
}
.topten-row {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.topten-row.is-found {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  animation: fpPopIn 260ms ease;
}
.topten-row.is-revealed {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.topten-rank {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--text-muted);
  text-align: right;
}
.topten-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topten-name.is-blank {
  align-self: center;
  height: 2px;
  max-width: 11rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-muted) 38%, transparent);
}
.topten-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.topten-row.is-found .topten-value { color: var(--text); }
.topten-feedback {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-weight: 600;
  min-height: 1.3rem;
}
.topten-feedback.is-hit { color: var(--success); }
.topten-feedback.is-miss { color: color-mix(in srgb, var(--danger) 78%, var(--text)); }
.topten-side {
  display: grid;
  gap: var(--space-3);
}
.topten-input-card,
.topten-picker-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: 1rem;
}
.topten-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}
#topten-input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  padding: 0.7rem 1rem;
  font-weight: 600;
}
.topten-actions {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.topten-result {
  margin: var(--space-3) 0 0;
  min-height: 1.4rem;
  color: var(--text);
  font-weight: 700;
}
.topten-picker-card h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  font-size: 1.3rem;
}
.topten-select {
  width: 100%;
  margin-bottom: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text);
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
}
.topten-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}
@media (max-width: 1040px) {
  .topten-main { grid-template-columns: 1fr; }
  .topten-head { grid-template-columns: 1fr; align-items: start; }
  .topten-hud { justify-content: flex-start; }
}

/* ============================================================
   Matches rail (left edge): live games, fixtures, results.
   Mirror of the news rail; shares the inner list styles.
   ============================================================ */
.matches-rail-toggle,
.matches-rail {
  display: none;
}
@media (min-width: 900px) {
  .matches-rail-toggle {
    position: fixed;
    left: 0;
    top: 42%;
    z-index: 120;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: 0;
    padding: 0.55rem 0.4rem 0.6rem;
    background: var(--surface, #1a1f24);
    color: var(--text, #e8edf2);
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.14));
    border-left: 0;
    border-radius: 0 12px 12px 0;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, color 0.15s ease;
  }
  .matches-rail-toggle:hover { color: var(--primary); }
  .matches-rail-toggle.is-open { transform: translateX(316px); }
  .matches-rail-toggle .news-rail-toggle-label { writing-mode: vertical-rl; }

  .matches-rail {
    position: fixed;
    left: 0;
    top: 96px;
    bottom: 24px;
    width: 316px;
    z-index: 119;
    display: block;
    overflow-y: auto;
    background: color-mix(in srgb, var(--surface, #1a1f24) 94%, transparent);
    border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.14));
    border-left: 0;
    border-radius: 0 16px 16px 0;
    padding: 0.9rem 1rem 1.1rem;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    transform: translateX(-105%);
    transition: transform 0.24s ease;
  }
  .matches-rail.is-open { transform: translateX(0); }
}
.matches-rail .news-rail-results { margin-bottom: 1rem; }
.news-rail-results li.is-live {
  border-color: color-mix(in srgb, var(--danger, #ff5a5a) 45%, var(--line));
  background: color-mix(in srgb, var(--danger, #ff5a5a) 8%, transparent);
}
.news-rail-results li.is-live .news-rail-result-comp { color: var(--danger, #ff5a5a); }
.news-rail-results li.is-live .news-rail-item-meta {
  color: var(--danger, #ff5a5a);
  font-weight: 800;
  animation: fpLivePulse 1.6s ease-in-out infinite;
}
@keyframes fpLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Share buttons row in the results overlay */
.result-share-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Share result card: the primary share CTA ── */
.btn-share-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

/* ── Social share buttons ── */
.result-social-row {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.btn-social {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.52rem 0.9rem;
  border-radius: var(--radius-btn, 100px);
  border: none;
  cursor: pointer;
  transition: opacity 150ms ease, transform 120ms ease, filter 150ms ease;
  white-space: nowrap;
  min-height: 36px;
  letter-spacing: 0.01em;
}

.btn-social:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn-social:active { transform: translateY(0); opacity: 1; }

.btn-social--x {
  background: #000;
  color: #fff;
}

.btn-social--fb {
  background: #1877f2;
  color: #fff;
}

.btn-social--ig {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 40%, #8134af 70%, #515bd4 100%);
  color: #fff;
}

/* Compact variant used in the fail overlay */
.result-social-row--compact .btn-social {
  font-size: 0.78rem;
  padding: 0.44rem 0.75rem;
  min-height: 32px;
}

/* Secondary row: ghost utility links */
.result-share-secondary {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

.result-share-secondary .btn {
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  min-height: 32px;
  opacity: 0.7;
}

.result-share-secondary .btn:hover { opacity: 1; }

/* Result rows: "Show scorers" toggle + expandable scorer list */
.news-rail-result-comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.news-rail-scorers-btn {
  min-height: 0;
  padding: 0.12rem 0.5rem;
  background: transparent;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  color: var(--muted, #aeb6be);
  font: inherit;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.news-rail-scorers-btn:hover,
.news-rail-scorers-btn[aria-expanded="true"] {
  color: var(--primary, #6bff61);
  border-color: color-mix(in srgb, var(--primary, #6bff61) 55%, transparent);
}
.news-rail-scorers {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--line, rgba(255, 255, 255, 0.08));
  display: grid;
  gap: 0.2rem;
}
.news-rail-scorers-line {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--muted, #aeb6be);
}
.news-rail-scorers-line strong {
  color: var(--text, #e8edf2);
  font-weight: 700;
}
.news-rail-scorers-line strong::after {
  content: ":";
}

/* ── Share image certificate modal ─────────────────────────────────────── */
.share-image-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 9, 12, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: shareModalIn 200ms ease;
}
@keyframes shareModalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.share-image-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: min(92vw, 460px);
  max-height: 94vh;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 18px;
  background: var(--color-surface, #1a1f24);
  border: 1px solid rgba(107, 255, 97, 0.22);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.share-image-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 34px;
  height: 34px;
  min-height: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-silver, #aeb6be);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.share-image-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.share-image-preview {
  width: min(76vw, 360px);
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid #2a3540;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.share-image-panel .result-social-row { justify-content: center; }
.share-image-secondary {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.share-image-hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--color-silver, #aeb6be);
  opacity: 0.75;
  text-align: center;
  max-width: 34ch;
}
@media (max-width: 480px) {
  .share-image-panel { padding: 1rem 0.85rem 0.85rem; }
  .share-image-preview { width: min(84vw, 330px); }
}

/* ============================================================
   Broadcast "matchday" redesign - condensed display type, green
   ticker, squared edges, THE BOARD hero + Tonight strip.
   Lives at the END of the sheet so it wins the cascade.
   ============================================================ */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --font-head: "Anton", "Archivo Black", "Plus Jakarta Sans", sans-serif;
  --font-label: "Oswald", "Arial Narrow", sans-serif;
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-btn: 0;
}

/* Stark charcoal backdrop with faint diagonal panel slashes. */
body,
body.sport-nba {
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, 0.02) 58% 76%, transparent 76%),
    linear-gradient(115deg, transparent 0 20%, rgba(255, 255, 255, 0.012) 20% 30%, transparent 30%),
    var(--bg);
}
body::before,
body::after { opacity: 0.1; }

/* Condensed display headings; Anton is single-weight so drop faux bolding. */
h1, h2, h3,
.section-title,
.card-title,
.hero-title {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

.kicker,
.card-tag {
  font-family: var(--font-label);
  letter-spacing: 0.14em;
}

/* Every button speaks in broadcast caps. */
.btn,
button.btn {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

/* ── Ticker bar ── */
.fp-ticker {
  display: flex;
  align-items: stretch;
  background: var(--primary);
  color: #06210b;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  overflow: hidden;
  position: relative;
  z-index: 30;
}

.fp-ticker-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 1rem;
  background: #06210b;
  color: var(--primary);
  flex-shrink: 0;
}

.fp-ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: fp-ticker-pulse 1.6s ease-in-out infinite;
}

@keyframes fp-ticker-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.fp-ticker-viewport { overflow: hidden; flex: 1; display: flex; align-items: center; }

.fp-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  white-space: nowrap;
  padding-left: 1.4rem;
  animation: fp-ticker-scroll 36s linear infinite;
}

.fp-ticker-sep { opacity: 0.55; }

@keyframes fp-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fp-ticker-track { animation: none; }
  .fp-ticker-dot { animation: none; }
}

/* ── Header: uppercase broadcast nav ── */
.brand-wordmark {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 400;
}

.top-nav-link,
.nav-dropdown-summary {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 0.82rem;
}

.sport-tab {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Hero ── */
.fp-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}

.fp-hero-tags { display: flex; gap: 0.5rem; margin-bottom: 1.4rem; }

.fp-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.34rem 0.85rem;
}

.fp-tag--green { background: var(--primary); color: #06210b; }
.fp-tag--white { background: #ffffff; color: #0a0e12; }

.fp-hero-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(3.2rem, 7.4vw, 5.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text);
  max-width: 11ch;
}

.fp-hero-dot { color: var(--primary); }

.fp-hero-lead {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 1.6;
}

.fp-hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }

.fp-btn-kickoff { font-size: 1rem; padding: 0.85rem 1.9rem; }

.fp-hero-stats { display: flex; margin-top: 2.4rem; }

.fp-stat-box {
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--line);
  padding: 0.95rem 1.7rem;
  min-width: 118px;
}

.fp-stat-box + .fp-stat-box { border-left: none; }

.fp-stat-num {
  font-family: var(--font-head);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--text);
}

.fp-stat-box:first-child .fp-stat-num { color: var(--primary); }

.fp-stat-label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-muted);
}

/* ── THE BOARD panel ── */
.fp-board {
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  background: var(--surface-contrast);
  padding: 1.3rem 1.4rem 1.4rem;
}

.fp-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.fp-board-title {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.fp-board-link {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
}

.fp-board-link:hover { text-decoration: underline; }

/* Connector web: Mbappe in the middle, the four players around him,
   dashed green lines tying the careers together (the old demo layout,
   in the broadcast skin). */
.fp-web {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: clamp(0.45rem, 1.6vw, 0.9rem);
}

.fp-web-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.fp-web-lines line {
  stroke: rgba(107, 255, 97, 0.4);
  stroke-width: 2;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
}

.fp-web-c1 { grid-area: 1 / 1; }
.fp-web-c2 { grid-area: 1 / 3; }
.fp-web-c3 { grid-area: 2 / 1; }
.fp-web-c4 { grid-area: 2 / 3; }

.fp-web-center {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  z-index: 1;
  /* The connector stands apart from the four green teammate cards: white
     frame + white name bar so "who connects" reads at a glance. */
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}

.fp-web-center img { aspect-ratio: 5 / 6.4; }

.fp-web-center .fp-board-bar {
  background: #ffffff;
  color: #101418;
}

.fp-board-card {
  margin: 0;
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: #151b21;
  display: flex;
  flex-direction: column;
}

.fp-board-card img {
  width: 100%;
  /* Near the native Transfermarkt portrait ratio (300x390) so cover barely
     crops - head AND shoulders stay in frame instead of a zoomed face. */
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.fp-board-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  background: var(--primary);
  color: #06210b;
  font-family: var(--font-label);
  font-weight: 600;
  /* Scales with the viewport so narrow columns keep whole names. */
  font-size: clamp(0.55rem, 1.9vw, 0.74rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.5rem;
  margin-top: auto;
  min-width: 0;
}

.fp-board-bar span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-board-bar span:last-child { flex-shrink: 0; }

.fp-board-status {
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Tonight on FourPlayers ── */
.fp-tonight { padding-top: 1rem; padding-bottom: 2.5rem; }

.fp-tonight-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.fp-tonight-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
}

.fp-tonight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}

.fp-show-card {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  border: 1px solid var(--line);
  background: var(--surface-contrast);
  padding: 1.05rem 1.15rem 1.15rem;
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}

.fp-show-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.fp-show-chip {
  justify-self: start;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.22rem 0.55rem;
  margin-bottom: 0.35rem;
}

.fp-show-chip--green { background: var(--primary); color: #06210b; }
.fp-show-chip--blue { background: var(--accent-blue); color: #04121f; }
.fp-show-chip--orange { background: var(--accent-orange); color: #1f0d02; }
.fp-show-chip--white { background: #ffffff; color: #0a0e12; }

.fp-show-name {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}

.fp-show-sub { font-size: 0.82rem; color: var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 1020px) {
  .fp-hero { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 2.4rem; }
  .fp-hero-title { max-width: none; }
}

@media (max-width: 900px) {
  .fp-tonight-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .fp-ticker { font-size: 0.7rem; }
  .fp-hero-stats { flex-wrap: wrap; }
  .fp-stat-box { flex: 1 1 33%; min-width: 96px; padding: 0.8rem 1rem; }
}

@media (max-width: 520px) {
  .fp-tonight-grid { grid-template-columns: 1fr; }
}

/* ── Puzzle-pack waitlist page ── */
.packs-hero { align-items: start; }

.packs-use-cases {
  display: grid;
  gap: 0.8rem;
  margin-top: 2rem;
}

.packs-use-case {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--line);
  background: var(--surface-contrast);
  padding: 0.85rem 1rem;
}

.packs-use-case .fp-show-chip { margin-bottom: 0; flex-shrink: 0; }

.packs-use-case p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.packs-panel { position: sticky; top: 96px; }

.packs-form {
  display: grid;
  gap: 0.9rem;
}

.packs-form label {
  display: grid;
  gap: 0.35rem;
  font-family: var(--font-label);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.packs-optional { text-transform: none; letter-spacing: 0; opacity: 0.75; }

.packs-form input,
.packs-form textarea {
  background: #12181e;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.85rem;
  resize: vertical;
}

.packs-form input:focus,
.packs-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--glow-accent-soft);
}

.packs-status { margin: 0.8rem 0 0; min-height: 1.2em; font-size: 0.9rem; color: var(--text-muted); }
.packs-status.is-success { color: var(--primary); font-weight: 600; }
.packs-status.is-error { color: var(--danger); }

.packs-note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--text-muted); opacity: 0.8; }

@media (max-width: 1020px) {
  .packs-panel { position: static; }
}

.fp-ticker-link { color: inherit; text-decoration: none; }
.fp-ticker-link:hover { text-decoration: underline; }

.other-game-card--link { text-decoration: none; display: block; }
.other-game-card--link:hover { border-color: var(--primary); }

/* ── Responsive: everything shrinks proportionally, no min-content traps ── */
.fp-hero > *,
.fp-hero-copy > * { min-width: 0; }

@media (max-width: 640px) {
  .fp-board { padding: 0.85rem 0.85rem 1rem; }
  .fp-board-head { margin-bottom: 0.7rem; }
  .fp-board-title { font-size: 0.84rem; letter-spacing: 0.12em; }
  .fp-board-link { font-size: 0.68rem; }
  .fp-board-status { font-size: 0.82rem; }
  .fp-hero { padding-top: 1.6rem; gap: 1.8rem; }
  .fp-hero-lead { font-size: 1rem; }
  .fp-btn-kickoff { font-size: 0.9rem; padding: 0.75rem 1.4rem; }
  .packs-use-case { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
}

/* A 728x90 leaderboard unit cannot render on phones - do not reserve the
   space there (the 320x50 anchor covers mobile). */
@media (max-width: 767px) {
  .ad-slot--leaderboard { display: none; }
}

/* ── Levels page: puzzle-pack waitlist strip ── */
.packs-strip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  background: var(--surface-contrast);
  text-decoration: none;
  transition: border-color 150ms ease, transform 150ms ease;
}

.packs-strip:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.packs-strip-copy {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.packs-strip-copy strong { color: var(--text); }

.packs-strip-cta {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  white-space: nowrap;
}

/* ── Game timers (Footble + Missing XI) ──────────────────────────────────── */

.hud-chip--timer {
  border-color: color-mix(in srgb, var(--accent-lime) 55%, var(--line));
  background: color-mix(in srgb, var(--accent-lime) 8%, var(--bg-elevated));
}

.hud-chip--timer strong {
  color: var(--accent-lime);
  font-variant-numeric: tabular-nums;
}

#mxi-timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#mxi-timer-chip small {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  color: var(--text-muted);
}

#mxi-timer-chip strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--accent-lime);
  font-variant-numeric: tabular-nums;
}

/* ── Share result buttons ────────────────────────────────────────────────── */

.footble-share-btn,
.mxi-share-btn {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
}

/* ── Footble "You win!" celebration card ─────────────────────────────────── */

.footble-win-card {
  margin-top: 1rem;
  padding: 0 1rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(107, 255, 97, 0.3);
  background: linear-gradient(135deg, rgba(20, 26, 20, 0.97), rgba(14, 20, 14, 0.99));
  text-align: center;
  overflow: hidden;
  animation: gridResultFadeIn .5s ease both;
}

.footble-bunting {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto .35rem;
}

.footble-flag {
  transform-origin: center 20%;
  transform-box: fill-box;
  animation: footbleFlagSway 2.6s ease-in-out infinite;
}

@keyframes footbleFlagSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

.footble-win-title {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--primary);
  letter-spacing: .05em;
  margin: .1rem 0 .3rem;
}

.footble-win-sub {
  color: var(--text-muted);
  font-size: .95rem;
  margin: 0 0 .85rem;
}
.footble-win-sub strong { color: var(--text); }

.footble-win-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.footble-win-actions .footble-share-btn { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .footble-flag { animation: none; }
}

/* ── ChameLionel Messi (impostor party game) ─────────────────────────────── */

.chame-entry-row {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .8rem;
}
.chame-entry-row label { font-weight: 700; font-size: .88rem; color: var(--text-muted); }
.chame-entry-row select,
.chame-entry-row input {
  padding: .55rem .8rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.chame-entry-row input { text-transform: uppercase; letter-spacing: .12em; max-width: 220px; }
.chame-note { color: #ff7a6b; font-size: .85rem; min-height: 1.2em; margin: .5rem 0 0; }

.chame-mine { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.chame-mine-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-muted);
}
.chame-mine-status { display: block; font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.chame-mine-item .btn { padding: .3rem .85rem; font-size: .8rem; }

.chame-hud { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.chame-status {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .04em;
  text-align: center;
  flex: 1;
}
.chame-code-chip {
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--primary) 55%, var(--line-strong));
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
}

.chame-role-card {
  margin-top: 1rem;
  padding: 1.4rem 1rem;
  border-radius: 18px;
  text-align: center;
  border: 1px solid var(--line-strong);
  background: var(--surface-muted);
  animation: gridResultFadeIn .45s ease both;
}
.chame-role-villager {
  border-color: rgba(107, 255, 97, 0.4);
  background: linear-gradient(135deg, rgba(20, 26, 20, 0.97), rgba(14, 20, 14, 0.99));
  color: #fff;
}
.chame-role-cham {
  border-color: rgba(255, 138, 61, 0.5);
  background: linear-gradient(135deg, rgba(30, 22, 14, 0.97), rgba(22, 15, 10, 0.99));
  color: #fff;
}
.chame-role-emoji { font-size: 2.2rem; display: block; margin-bottom: .3rem; }
.chame-role-kicker {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 .2rem;
}
.chame-role-title {
  font-family: var(--font-head);
  font-size: 1.7rem;
  letter-spacing: .04em;
  margin: 0 0 .35rem;
  color: var(--primary);
}
.chame-role-cham .chame-role-title { color: #ff8a3d; }
.chame-role-line { color: var(--text-muted); font-size: .92rem; margin: 0; }
.chame-role-line strong { color: var(--text); }
.chame-role-villager .chame-role-line,
.chame-role-cham .chame-role-line { color: rgba(255,255,255,0.65); }
.chame-role-villager .chame-role-line strong,
.chame-role-cham .chame-role-line strong { color: #fff; }

.chame-players { display: grid; gap: .5rem; margin-top: 1rem; }
.chame-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-muted);
}
.chame-player.is-you { border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong)); }
.chame-player.is-out { opacity: .55; }
.chame-player-main { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.chame-score { font-weight: 800; font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chame-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.chame-badge-cham { color: #ff8a3d; border-color: rgba(255,138,61,0.5); }
.chame-badge-voted { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--line-strong)); }
.chame-guess-line { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.chame-vote-btn { padding: .3rem .85rem; font-size: .8rem; white-space: nowrap; }

.chame-guess-zone { margin-top: 1rem; display: grid; gap: .6rem; }
.chame-guess-label { font-weight: 700; margin: 0; }
.chame-guess-zone .grid-search-wrap { position: relative; }

.chame-entry-hint { font-size: .82rem; color: var(--text-muted); font-weight: 600; }

/* 30s guess countdown chip */
.chame-guess-clock {
  display: inline-block;
  margin-left: .5rem;
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .04em;
  color: #ff8a3d;
  min-width: 3ch;
}
.chame-guess-clock.is-low {
  color: #ff5a5a;
  animation: gridTimerPulse 1s ease-in-out infinite;
}

/* Rotating speaking order strip */
.chame-order {
  margin-top: .9rem;
  padding: .7rem .85rem;
  border-radius: var(--radius-s);
  border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--line-strong));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.chame-order-lead { margin: 0 0 .45rem; font-size: .9rem; }
.chame-order-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.chame-order-chip {
  font-size: .76rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.chame-order-chip.is-starter {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong));
}
.chame-order-chip.is-you { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent); }

/* Round points at the results screen */
.chame-round-pts {
  font-size: .76rem;
  font-weight: 800;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.chame-round-pts.is-plus {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line-strong));
}

.chame-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }
.chame-actions .is-pulsing { animation: chamePulse 1.4s ease-in-out infinite; }
@keyframes chamePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Homepage launch popup */
.chame-launch-pop {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 60;
  max-width: 290px;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(107, 255, 97, 0.4);
  background: linear-gradient(135deg, rgba(18, 26, 18, 0.98), rgba(12, 18, 12, 0.99));
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  animation: chameLaunchIn .5s ease both;
}
@keyframes chameLaunchIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.chame-launch-pop h4 {
  margin: 0 0 .3rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--primary, #6bff61);
}
.chame-launch-pop p { margin: 0 0 .7rem; font-size: .85rem; color: rgba(255,255,255,0.75); }
.chame-launch-close {
  position: absolute;
  top: .35rem;
  right: .55rem;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .2rem;
}
.chame-launch-close:hover { color: #fff; }
@media (max-width: 640px) {
  .chame-launch-pop { right: 10px; left: 10px; max-width: none; bottom: 76px; }
}

/* ── Missing XI completion card ──────────────────────────────────────────── */

.mxi-completion-card {
  margin-top: 1.25rem;
  padding: 0 1rem 1.25rem;
  border-radius: 20px;
  border: 1px solid rgba(107, 255, 97, 0.3);
  background: linear-gradient(135deg, rgba(26, 31, 36, 0.96), rgba(18, 24, 20, 0.98));
  text-align: center;
  overflow: hidden;
  animation: mxiCompletionFadeIn 0.5s ease both;
}

@keyframes mxiCompletionFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mxi-completion-emoji {
  margin: 0 0 0.4rem;
  font-size: 2.2rem;
  line-height: 1;
}

.mxi-completion-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-head);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  /* White on the dark green card - the green-on-dark title was hard to see. */
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Centre-screen congratulations flash (5s, then settles below the board) */
.mxi-completion-flash {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(6, 10, 16, 0.66);
  backdrop-filter: blur(4px);
  animation: mxiCompletionFadeIn 0.35s ease both;
}
.mxi-completion-flash .mxi-completion-card {
  margin-top: 0;
  width: min(480px, 94vw);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.mxi-completion-copy {
  margin: 0 0 1rem;
  color: #c8d6e0;
  font-size: 0.9rem;
}

.mxi-completion-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.mxi-completion-share-btn {
  font-size: 0.88rem;
}

.mxi-completion-archive-btn {
  font-size: 0.88rem;
  color: #a8c4d4;
  border-color: rgba(168, 196, 212, 0.4);
}

.mxi-completion-hint {
  margin: 0;
  font-size: 0.75rem;
  color: #607080;
}

/* ── Leaderboard rank medals ─────────────────────────────────────────────── */

.lb-medal {
  font-size: 1.2rem;
  line-height: 1;
}

.lb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.leaderboard-empty {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

/* ── £100 competition: entrance popup ── */
.comp-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 10, 8, 0.78);
  backdrop-filter: blur(3px);
}

.comp-popup {
  position: relative;
  width: min(480px, 100%);
  background: var(--surface-contrast);
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  padding: 1.6rem 1.7rem 1.7rem;
  animation: comp-popup-in 260ms ease;
}

@keyframes comp-popup-in {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.comp-popup-close {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}

.comp-popup-close:hover { color: var(--text); }

.comp-popup-title {
  margin: 0.9rem 0 0;
  font-family: var(--font-head);
  font-size: 1.7rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}

.comp-popup-copy {
  margin: 0.8rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.comp-popup-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

/* ── £100 competition: page tracker ── */
.comp-panel { align-self: start; }

.comp-tracker { display: grid; gap: 0.8rem; }

.comp-tracker-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.comp-condition {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  background: #12181e;
  padding: 0.85rem 0.95rem;
}

.comp-condition.is-met { border-color: var(--primary); }

.comp-condition-tick {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--font-label);
  font-weight: 700;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.comp-condition.is-met .comp-condition-tick {
  background: var(--primary);
  color: #06210b;
}

.comp-condition-body { display: grid; gap: 0.35rem; min-width: 0; flex: 1; }

.comp-condition-body strong {
  font-family: var(--font-label);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.comp-condition-body small { color: var(--text-muted); font-size: 0.8rem; }

.comp-progress {
  height: 8px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  overflow: hidden;
}

.comp-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 400ms ease;
}

#comp-eligible-badge.is-eligible { color: var(--primary); }

.comp-referral { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; }

.comp-referral-title {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.comp-referral-copy {
  margin: 0.45rem 0 0.7rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.comp-referral-row { display: flex; gap: 0.5rem; }

.comp-referral-row input {
  flex: 1;
  min-width: 0;
  background: #12181e;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.55rem 0.7rem;
}

.comp-referral-count {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 600;
}

/* ── Profile: refer-a-friend card ── */
.profile-referral-row { display: flex; gap: 0.5rem; max-width: 560px; }

.profile-referral-row input {
  flex: 1;
  min-width: 0;
  background: #12181e;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
}

/* ── Admin: sortable table headers ── */
.leaderboard-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.leaderboard-table th[data-sort]:hover { color: var(--primary); }
.leaderboard-table th .sort-arrow { font-size: 0.65rem; margin-left: 0.25rem; opacity: 0.9; }
.admin-eligible-pill { color: var(--primary); font-weight: 700; }

/* ============================================================================
   Sport switcher — NFL reads red, NBA reads orange so they stand out from the
   default Football tab. Placed at file end to win source-order over the earlier
   .sport-tab definitions.
   ============================================================================ */
.sports-switcher .sport-tab--nfl {
  color: #ff4d4d;
}
.sports-switcher .sport-tab--nba {
  color: #ff9838;
}
.sports-switcher .sport-tab--nfl:hover {
  color: #ff6b6b;
}
.sports-switcher .sport-tab--nba:hover {
  color: #ffab5e;
}
.sports-switcher .sport-tab--nfl.is-active {
  background: color-mix(in srgb, #ff4d4d 26%, var(--surface));
  color: #ff7070;
}
.sports-switcher .sport-tab--nba.is-active {
  background: color-mix(in srgb, #ff9838 26%, var(--surface));
  color: #ffb066;
}

/* ============================================================================
   Real light theme. The app previously kept dark values in both theme states,
   so the toggle changed nothing visible. These overrides give data-theme="light"
   an actual light palette; because almost everything is painted from CSS
   variables, flipping the tokens flips the whole UI. Placed last to win over the
   earlier html[data-theme="light"] blocks.
   ============================================================================ */
html[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f3f5f8;
  --color-surface: #ffffff;
  --color-text: #131820;

  --bg: #f3f5f8;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-muted: #eceff3;
  --surface-contrast: #e4e8ee;
  --text: #131820;
  --text-muted: #55606d;
  --text-on-dark: #ffffff;

  --primary: #22b34a;
  --primary-strong: #178a39;
  --primary-ink: #ffffff;
  --navy: #eceff3;
  --accent-lime: #22b34a;
  --accent-blue: #2f6ff0;
  --accent-orange: #f2721c;
  --danger: #e23b3b;
  --success: #22b34a;

  --line: #d9dee5;
  --line-strong: #c2c9d2;
  --focus: #22b34a;

  --glow-accent: 0 0 12px rgba(34, 179, 74, 0.28);
  --glow-accent-strong: 0 0 22px rgba(34, 179, 74, 0.36);
  --glow-accent-soft: 0 0 0 3px rgba(34, 179, 74, 0.16);

  --shadow-sm: 0 6px 18px rgba(23, 33, 48, 0.10);
  --shadow-md: 0 12px 30px rgba(23, 33, 48, 0.14);
  --shadow-lg: 0 22px 50px rgba(23, 33, 48, 0.18);
}

/* Clean light backdrop — replaces the dark diagonal-slash gradient, whose white
   overlays are invisible on a light page. */
html[data-theme="light"] body,
html[data-theme="light"] body.sport-nba {
  background:
    radial-gradient(circle at 88% -10%, rgba(47, 111, 240, 0.06), transparent 40%),
    radial-gradient(circle at 8% 0%, rgba(242, 114, 28, 0.06), transparent 38%),
    var(--bg);
}
html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  opacity: 0.04;
}

/* Keep the two accent tabs readable on the lighter switcher surface. */
html[data-theme="light"] .sports-switcher .sport-tab--nfl { color: #e23636; }
html[data-theme="light"] .sports-switcher .sport-tab--nba { color: #e0700f; }

/* ── Instagram follow button (competition £100 condition) ── */
.btn-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  color: #ffffff;
  border: none;
  background: linear-gradient(70deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
  box-shadow: 0 6px 18px rgba(221, 42, 123, 0.32);
}
.btn-instagram:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #ffffff;
}
.btn-instagram-icon { flex-shrink: 0; }

/* ============================================================================
   Light mode: fix hardcoded dark colors that don't respond to CSS variable
   changes. Placed last so these win over earlier rules.
   ============================================================================ */

/* Nav tabs / scope pills active state */
html[data-theme="light"] .nav-tabs-indicator,
html[data-theme="light"] .scope-pill.is-active {
  background: var(--surface-contrast);
  color: var(--text);
}

/* Auth tab active state */
html[data-theme="light"] .oauth-shell .auth-tab.is-active {
  background: var(--surface-contrast);
  color: var(--text);
}

/* Team chip (player cards) */
html[data-theme="light"] .team-chip {
  color: var(--text);
}

/* Rules / info card */
html[data-theme="light"] .rules-card {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="light"] .rules-card .kicker,
html[data-theme="light"] .rules-card .rules-list {
  color: var(--text-muted);
}

/* Level select header gradient */
html[data-theme="light"] .level-select-head {
  background: linear-gradient(155deg, #d8e8f5, #c8d8ec);
}

/* Connector burst node */
html[data-theme="light"] .connector-burst {
  background: var(--surface-contrast);
  color: var(--text);
}

/* Feed rows */
html[data-theme="light"] .feed-row strong {
  color: var(--text);
}

/* Other games shell + featured card */
html[data-theme="light"] .other-games-shell {
  background: linear-gradient(155deg, #e8f4e8, #d8ecda);
}
html[data-theme="light"] .other-game-card.is-featured {
  background: linear-gradient(155deg, #d8e8f5, #c8d8ec);
}

/* Missing XI nav active (dark pill on white pitch looks wrong) */
html[data-theme="light"] .mxi-nav-btn.is-active {
  background: var(--surface-contrast);
  color: var(--text);
}
html[data-theme="light"] .mxi-slot-submit {
  background: var(--surface-contrast);
  color: var(--text);
}
html[data-theme="light"] .mxi-local-nav {
  background: rgba(220, 228, 236, 0.92);
  border-color: var(--line);
}
html[data-theme="light"] .mxi-archive-item strong {
  color: var(--text);
}

/* Completed level tile overlay text — keep white + strengthen shadow so it
   reads on the player photo even on a light page */
html[data-theme="light"] .level-tile.is-completed.has-complete-art .level-num,
html[data-theme="light"] .level-tile.is-completed.has-complete-art .level-state {
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.75), 0 2px 14px rgba(0,0,0,0.55);
}

/* Card text on landing / info sections */
html[data-theme="light"] .card-title,
html[data-theme="light"] .section-title {
  color: var(--text);
}
html[data-theme="light"] .card-copy,
html[data-theme="light"] .section-copy,
html[data-theme="light"] .card-tag,
html[data-theme="light"] .kicker {
  color: var(--text-muted);
}

/* Input fields */
html[data-theme="light"] .input-group input,
html[data-theme="light"] .input-group select,
html[data-theme="light"] .input-group textarea,
html[data-theme="light"] .auth-form input,
html[data-theme="light"] .friend-search-form input,
html[data-theme="light"] .level-search input,
html[data-theme="light"] .admin-controls input,
html[data-theme="light"] .admin-controls select {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line-strong);
}

/* Profile / leaderboard tables */
html[data-theme="light"] .leaderboard-table td,
html[data-theme="light"] .leaderboard-table th,
html[data-theme="light"] table td,
html[data-theme="light"] table th {
  color: var(--text);
  border-color: var(--line);
}

/* Modals and overlays */
html[data-theme="light"] .modal-card,
html[data-theme="light"] .overlay-card {
  background: var(--surface);
  color: var(--text);
}

/* Toast / status messages */
html[data-theme="light"] .toast {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}

/* Pill / badge on surface-muted */
html[data-theme="light"] .pill,
html[data-theme="light"] .pill--neutral {
  background: var(--surface-muted);
  color: var(--text);
}

/* Admin tables */
html[data-theme="light"] .admin-table,
html[data-theme="light"] .admin-table td,
html[data-theme="light"] .admin-table th {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface);
}

/* ============================================================================
   Light mode, pass 2. In light mode var(--text) turns near-black, so any
   component still sitting on a hardcoded dark "glass" background lost its
   text (dark-on-dark). Each override below either lightens the surface so the
   variable-driven text works, or pins the text light where the surface must
   stay dark. Fixed dark cards with hardcoded light text (social buttons,
   footble board, Missing XI page, intro splash) are intentionally untouched -
   they are self-consistent in both themes.
   ============================================================================ */

/* Play page HUD shell - was rgba(26,31,36,.72) dark glass */
html[data-theme="light"] .game-hud {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
}

/* Header sports switcher - dark glass pill behind the sport tabs */
html[data-theme="light"] .sports-switcher {
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--line);
}

/* Mobile bottom tab bar + collapsed nav dropdown - dark glass panels */
html[data-theme="light"] .mobile-tabbar {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
}
html[data-theme="light"] .top-nav-links {
  background: rgba(255, 255, 255, 0.96);
}

/* Landing hero panel - translucent dark card over the (now light) backdrop */
html[data-theme="light"] .hero-panel {
  background: var(--surface);
  border-color: var(--line);
}

/* Activity feed rows - white-at-5% wash is invisible on a white card */
html[data-theme="light"] .feed-row {
  background: var(--surface-muted);
}

/* Missing XI local nav buttons (non-active) sit on a light pill in light mode */
html[data-theme="light"] .mxi-local-nav .mxi-nav-btn {
  color: var(--text-muted);
}

/* Hardcoded #12181e inputs: packs waitlist, competition + profile referral */
html[data-theme="light"] .packs-form input,
html[data-theme="light"] .packs-form textarea,
html[data-theme="light"] .comp-referral-row input,
html[data-theme="light"] .profile-referral-row input {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

/* Competition condition rows - hardcoded #12181e card */
html[data-theme="light"] .comp-condition {
  background: var(--surface-muted);
}

/* Footble entry card on the games page keeps a dark board - pin its copy
   light (belt and braces alongside the earlier footble overrides). */
html[data-theme="light"] .fp-board-card,
html[data-theme="light"] .fp-board-card .card-copy {
  color: #eef2f8;
}

/* Mbappe demo explainer card is a light panel - its line labels were tuned
   for dark mode */
html[data-theme="light"] .mbappe-demo-lines {
  color: #55606d;
}

/* Chameleon lobby/setup cards use var(--surface-muted): make sure copy
   follows the theme rather than the dark-mode default */
html[data-theme="light"] .chame-role-card:not(.chame-role-villager):not(.chame-role-cham) {
  color: var(--text);
}

/* ============================================================================
   First-visit onboarding walkthrough (scripts/onboarding.js)
   ============================================================================ */
.fp-onboard {
  position: fixed;
  inset: 0;
  z-index: 400;
  animation: fpOnboardIn 240ms ease both;
}

.fp-onboard.is-leaving {
  opacity: 0;
  transition: opacity 240ms ease;
}

@keyframes fpOnboardIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Spotlight ring: the giant box-shadow darkens everything around the target */
.fp-onboard-ring {
  position: fixed;
  border-radius: 22px;
  border: 2px solid var(--primary);
  box-shadow:
    0 0 0 9999px rgba(4, 8, 12, 0.72),
    var(--glow-accent-strong);
  transition: top 260ms ease, left 260ms ease, width 260ms ease, height 260ms ease, opacity 200ms ease;
  pointer-events: none;
}

/* Centered welcome step has no target: dim the whole screen instead */
.fp-onboard-card.is-centered ~ .fp-onboard-ring,
.fp-onboard-ring[style*="opacity: 0"] {
  box-shadow: 0 0 0 9999px rgba(4, 8, 12, 0.72);
}

.fp-onboard-card {
  position: fixed;
  z-index: 2;
  width: min(380px, calc(100vw - 28px));
  padding: 1.1rem 1.2rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  transition: top 260ms ease, left 260ms ease;
}

.fp-onboard-card.is-centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fp-onboard-step {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
}

.fp-onboard-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.fp-onboard-copy {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.fp-onboard-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.fp-onboard-dots {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.fp-onboard-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 160ms ease, transform 160ms ease;
}

.fp-onboard-dot.is-active {
  background: var(--primary);
  transform: scale(1.25);
}

.fp-onboard-replay {
  margin-top: 0.9rem;
  width: 100%;
}

/* ============================================================================
   Mobile gameplay pass: the four cards + guess input were cramped on small
   screens. Compact the cards (smaller photos, tighter type, less chrome),
   slim the HUD, and keep the guess input pinned within thumb reach while the
   round is live.
   ============================================================================ */
@media (max-width: 480px) {
  /* Slimmer HUD: chips scroll horizontally instead of wrapping into a tall block */
  body[data-page="play"] .game-hud {
    padding: 0.6rem;
    gap: 0.55rem;
  }

  body[data-page="play"] .hud-stats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.4rem;
    padding-bottom: 0.1rem;
  }

  body[data-page="play"] .hud-stats::-webkit-scrollbar { display: none; }

  body[data-page="play"] .hud-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Compact 2x2 card grid: smaller photos + tighter type = whole board plus
     input fits in far fewer viewport-heights */
  .level-board {
    padding: 0.55rem;
    border-radius: 22px;
  }

  .level-board .level-grid {
    gap: 0.55rem;
  }

  .fp-player-card {
    padding: 0.5rem 0.45rem;
    border-radius: 16px;
  }

  .fp-player-media {
    width: min(32vw, 132px);
    border-radius: 14px;
  }

  .fp-player-name {
    font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    line-height: 1.02;
  }

  .fp-player-card .team-chip {
    font-size: 0.72rem;
    padding: 0.28rem 0.5rem;
  }

  .hint-chip-stack {
    width: 100%;
    gap: 0.28rem;
  }

  /* Guess panel: input first, generous tap targets, sticky submit row so the
     input is always reachable without scrolling back down */
  .guess-core {
    padding: 0.75rem;
    gap: 0.55rem;
    border-radius: 18px;
  }

  .guess-kicker,
  .guess-rule {
    margin: 0;
  }

  .guess-rule {
    font-size: 0.82rem;
  }

  .guess-form {
    position: sticky;
    /* clear the mobile tab bar + anchor ad */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    z-index: 6;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 0.45rem;
    margin: 0 -0.25rem;
  }

  .guess-input {
    min-height: 48px;
    font-size: 1rem; /* 16px+ prevents iOS focus zoom */
  }

  .guess-input-wrap .btn {
    min-height: 46px;
  }

  /* Secondary UI shrinks so the essentials stay above the fold */
  .hard-mode-toggle {
    padding: 0.3rem 0;
  }

  .single-clue-card {
    padding: 0.6rem;
  }

  .level-stepper .level-step-btn {
    min-height: 40px;
    padding: 0.35rem 0.7rem;
  }
}

/* Very small phones (<= 360px): single-priority layout - photos shrink further */
@media (max-width: 360px) {
  .fp-player-media {
    width: min(30vw, 108px);
  }

  .fp-player-name {
    font-size: 1rem;
  }
}

/* ============================================================================
   Retention: daily-streak risk banner (scripts/main.js initStreakRiskNudge)
   ============================================================================ */
.toast.streak-nudge {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  max-width: 340px;
  border: 1px solid color-mix(in srgb, var(--accent-orange) 55%, var(--line-strong));
  box-shadow: var(--shadow-md), 0 0 18px rgba(242, 114, 28, 0.25);
}

.streak-nudge-copy {
  display: grid;
  gap: 0.15rem;
}

.streak-nudge-copy strong {
  font-size: 1rem;
}

.streak-nudge-copy span {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.streak-nudge-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.streak-nudge-actions .btn {
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
}