/*
 * SpotOn90 design system.
 * Single manifest file (Propshaft serves this as-is, no build step) —
 * see docs/brand.md for the full brand bible this implements.
 */

/* ---------- Brand fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("/assets/barlow-condensed-600-1a79f86d.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/assets/barlow-condensed-700-74ef7090.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("/assets/barlow-condensed-800-33344abb.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 900; font-display: swap; src: url("/assets/barlow-condensed-900-60e2a568.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 700; font-display: swap; src: url("/assets/oswald-700-4a42c5d0.woff2") format("woff2"); }

/* ---------- Design tokens ---------- */
:root {
  --canvas: #0B0C0F;
  --surface: #111318;
  --surface-2: #181921;
  --border: #1E2028;
  --border-2: #2A2C38;
  --text: #F0EFEC;
  --text-2: #C2C1CC;
  --text-3: #888898;
  --text-4: #7B7D8C; /* the dimmest legible tier. Brightened twice now (#4A4B58 -> #5E606D -> this, Jason 2026-07-25: "that brightness does not work at all throughout the app"). ~4.8:1 on the canvas; must stay visibly dimmer than --text-3 to keep the hierarchy. */
  --lime: #C2FF1F;

  --font-display: Impact, "Arial Black", Haettenschweiler, sans-serif;
  --font-cond: "Barlow Condensed", sans-serif;
  --font-num: "Oswald", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Scoped third role: data, timestamps, receipt meta only — ledger/almanac texture. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --radius-card: 12px;
  --radius-btn: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--canvas);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
}

h1 {
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

a { color: var(--text-2); }
a:hover { color: var(--text); }

.hint { color: var(--text-3); font-size: 13px; }

/* Empty states: a designed "nothing here yet" with a clear next step, not bare text. */
.empty-state { text-align: center; padding: 32px 18px; display: flex; flex-direction: column; align-items: center; }
.empty-state .empty-ico { color: var(--text-4); margin-bottom: 12px; }
.empty-state .empty-ico svg { width: 30px; height: 30px; display: block; }
.empty-title { color: var(--text); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.empty-sub { color: var(--text-3); font-size: 13.5px; line-height: 1.5; max-width: 32ch; }
.empty-state .btn { width: auto; margin-top: 16px; }
.empty-state .empty-link { margin-top: 14px; color: var(--lime); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.empty-state .empty-link:hover { text-decoration: underline; }
.empty-state.is-compact { padding: 18px 12px; }
.empty-state.is-compact .empty-title { font-size: 14px; }
.empty-state.is-compact .empty-ico { margin-bottom: 8px; }
.empty-state.is-compact .empty-ico svg { width: 24px; height: 24px; }

/* Tabular numbers for anything score-like */
.num { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
}

/* Extra bottom padding so a page's fixed .btn-sticky bar never covers content */
.page:has(.btn-sticky) {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .page { padding-top: 32px; }
}

@media (min-width: 1024px) {
  .page { max-width: 520px; }
}

/* Global max-width frame. Full-bleed elements constrain their inner content
   to this; content columns can also sit narrower inside it. */
.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 768px) {
  .shell { padding-left: 48px; padding-right: 48px; }
}

@media (min-width: 1024px) {
  .shell { padding-left: 64px; padding-right: 64px; }
}

/* Wordmark link wrapper (nav + footer) */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Wordmark: spot·on ⟨90⟩ (Barlow Condensed + Oswald) ---------- */
.wm { display: inline-flex; align-items: center; line-height: 1; font-size: 22px; }
.wm .spot, .wm .on { font-family: var(--font-cond); font-size: 1em; color: var(--text); text-transform: lowercase; letter-spacing: 0.02em; line-height: 1; }
.wm .spot { font-weight: 600; }
.wm .on { font-weight: 700; }
.wm .sep { font-family: var(--font-cond); font-weight: 900; font-size: 0.62em; color: var(--lime); opacity: 0.7; margin: 0 0.08em; line-height: 1; position: relative; top: -0.08em; }
.wm .cw { display: inline-flex; align-items: center; margin-left: 0.14em; }
.wm .circ { width: 1.16em; height: 1.16em; border: max(1px, 0.07em) solid var(--lime); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.wm .cn { font-family: var(--font-num); font-weight: 700; font-size: 0.56em; color: var(--lime); letter-spacing: 0.01em; line-height: 1; }
.wm-lg { font-size: 40px; }
.wm-md { font-size: 28px; }
.wm-xs { font-size: 18px; }

/* ---------- Global nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 12, 15, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  /* Edge-to-edge (viewport-fit=cover): keep the bar clear of the top notch when
     the site is added to the home screen. Zero in a normal browser. */
  padding-top: env(safe-area-inset-top);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
}

/* Inline clusters are desktop-only; mobile uses the bottom tab bar + scope row. */
.nav-center,
.nav-right { display: none; }

/* ---------- Mobile navigation: visible league scope + bottom tab bar ----------
   Nothing hidden on phones. Desktop keeps the inline top nav; these show <768px. */
.nav-mobile-actions { display: inline-flex; align-items: center; gap: 12px; }
/* On mobile the competition menu sits top-right, so its dropdown opens aligned
   to the right edge instead of running off-screen. */
.nav-mobile-actions .comp-panel { right: 0; left: auto; }

.tabbar { display: none; } /* desktop: the top tabs handle it */

@media (min-width: 768px) {
  .nav-mobile-actions { display: none; }
}

@media (max-width: 767px) {
  /* The bar must read as CHROME, not page: lifted a surface step, framed by
     a lime hairline, items legible at rest, the active tab anchored by a
     tint pill (a shape, not just a color change). Never invert to a lime
     slab — permanent chrome can't outshout the CTAs. */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--surface-2);
    border-top: 2px solid rgba(194, 255, 31, 0.45);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 8px 2px 9px; min-height: 56px;
    color: var(--text-2); text-decoration: none; position: relative;
  }
  .tab.is-active { color: var(--lime); }
  .tab.is-active .tab-ico { background: rgba(194, 255, 31, 0.14); border-radius: 10px; }
  .tab-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; box-sizing: content-box; padding: 3px 11px; margin: -3px 0; }
  .tab-label { font-family: var(--font-cond); font-weight: 600; font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
  .tab-avatar { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-family: var(--font-cond); font-weight: 700; font-size: 12px; }
  .tab .nav-badge { position: absolute; top: 6px; left: calc(50% + 5px); }
  .tab-signin { color: var(--lime); } /* the guest CTA */

  /* Every page clears the fixed tab bar, on top of its own bottom padding.
     (The .picks and .lockin-bar offsets live beside their base rules below, so
     source order doesn't shadow them.) */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* Gate screens (login / onboarding) and the guest landing hide the tab bar, so
     no bottom clearance needed. The guest home (main.guest-grid) is one of them:
     it has no tab bar, so it must not reserve the 58px tab-bar gap. */
  body:has(main.gate),
  body:has(main.landing),
  body:has(main.guest-grid) { padding-bottom: env(safe-area-inset-bottom); }
}

@media (min-width: 768px) {
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-center { display: flex; justify-content: center; }
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
  }
}

/* Desktop nav account avatar: a monogram that identifies who's signed in. */
.nav-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-2); background: var(--surface-2); color: var(--lime); font-family: var(--font-cond); font-weight: 700; font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer; }
.nav-avatar:hover { border-color: var(--text-3); }

/* The Board — a core destination, kept visible on desktop. */
.nav-board { color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 4px; white-space: nowrap; }
.nav-board:hover { color: var(--text); }

/* Primary destinations on the desktop bar — Season, This Week, Boards. The
   active page reuses the switcher's underline convention (no lime on the links;
   lime is reserved for the count badge). */
.nav-tab { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-tab:hover { color: var(--text); }
.nav-tab.is-active { color: var(--text); border-bottom-color: var(--text); }

/* "Picks left this week" pip on the This Week tab: a small count, or a bare lime
   dot pre-season. The one deliberate lime accent in the nav. */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--lime); color: var(--canvas); font-family: var(--font-num); font-weight: 700; font-size: 11px; line-height: 1; }
.nav-badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

/* World Cup — a live event chip, not a league tab. Static lime dot (no glow). */
.nav-wc { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(194,255,31,0.11); border: 1px solid rgba(194,255,31,0.26); color: var(--lime); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav-wc:hover { background: rgba(194,255,31,0.17); }
.nav-wc.is-active { border-color: var(--lime); }
.nav-wc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }

/* Guest sign-in button. */
.nav-signin { padding: 8px 16px; border-radius: 10px; background: var(--lime); color: var(--canvas); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.nav-signin:hover { background: #cbff4d; }

/* Account menu — the avatar opens a dropdown with identity, settings,
   scoring-as-help and one-tap sign out. Pure-CSS <details>. */
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; cursor: pointer; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-panel { position: absolute; top: calc(100% + 12px); right: 0; min-width: 224px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,0.5); z-index: 60; }
.acct-who { padding: 9px 12px 11px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.acct-who-l { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.acct-who-e { display: block; font-size: 13px; color: var(--text); margin-top: 3px; word-break: break-word; }
.acct-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; background: none; border: 0; color: var(--text-2); font-family: var(--font-body); font-size: 14px; cursor: pointer; text-decoration: none; }
.acct-item:hover { background: var(--surface); color: var(--text); }
.acct-help { color: var(--text-3); }
.acct-sep { height: 1px; background: var(--border); margin: 6px 6px; }
.acct-out-form { margin: 0; }
.acct-out { color: var(--text-3); }
.acct-out:hover { background: var(--surface); color: var(--text); }

/* ---------- Scoring explainer (nav "?" -> native <dialog>) ---------- */
.score-modal {
  width: min(380px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.score-modal::backdrop { background: rgba(0, 0, 0, 0.62); }
.score-modal-inner { position: relative; padding: 28px 24px 24px; }
.score-modal-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-size: 24px; line-height: 1;
}
.score-modal-x:hover { color: var(--text); }
.score-modal-kick {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 10px;
}
.score-modal-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 34px; line-height: 0.9; letter-spacing: -0.01em;
  color: var(--text); margin-bottom: 10px;
}
.score-modal-title .lime { color: var(--lime); }
.score-modal-sub { font-size: 14px; line-height: 1.5; color: var(--text-2); margin-bottom: 20px; }
.score-rows { display: flex; flex-direction: column; }
.score-rows li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-top: 1px solid var(--border);
}
.score-what { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 14.5px; }
.score-what .target-icon { flex: none; }
.score-row-spot .target-icon { color: var(--lime); }
.score-pts {
  font-family: var(--font-num); font-weight: 700; font-size: 17px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.score-pts.score-zero { color: var(--text-4); }
.score-pts.lime { color: var(--lime); }
.score-modal-foot { font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 16px; }

/* ---------- Competition menu (scalable comp selector) ---------- */
.comp-menu { position: relative; display: inline-flex; }
.comp-menu > summary { list-style: none; cursor: pointer; }
.comp-menu > summary::-webkit-details-marker { display: none; }
.comp-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px;
  padding: 8px 14px; color: var(--text); font-family: var(--font-cond);
  font-weight: 700; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap;
  transition: border-color 0.15s ease;
}
.comp-chip:hover { border-color: var(--text-3); }
.comp-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; box-shadow: 0 0 8px -1px var(--lime); }
.comp-chip-cv { display: flex; color: var(--text-3); margin-left: 2px; }
.comp-chip-cv svg { width: 14px; height: 14px; transition: transform 0.18s ease; }
.comp-menu[open] .comp-chip-cv svg { transform: rotate(180deg); color: var(--lime); }
.comp-menu[open] .comp-chip { border-color: rgba(194, 255, 31, 0.4); background: var(--surface-2); }

.comp-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 268px; background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: 14px; padding: 8px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  transform-origin: top left; animation: compMenuIn 0.18s ease;
}
@keyframes compMenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .comp-panel { animation: none; } }
.comp-group {
  display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 12px 12px 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
}
.comp-group:first-child { padding-top: 6px; }
.comp-group-note { font-size: 9px; letter-spacing: 0.08em; color: var(--text-4); }
.comp-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 10px; border: 0; background: none;
  color: var(--text-2); font-family: var(--font-cond); font-weight: 600; font-size: 15.5px;
  text-align: left; cursor: pointer; transition: background 0.12s ease;
}
.comp-row-form { display: block; }
.comp-row:hover { background: var(--surface); color: var(--text); }
.comp-row.is-active { background: rgba(194, 255, 31, 0.08); }
.comp-row.is-active .comp-row-name { color: var(--lime); }
.comp-row.is-soon { cursor: default; color: var(--text-3); }
.comp-row.is-soon:hover { background: none; }
.comp-row-name { flex: 1; min-width: 0; }
.comp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); flex: none; }
.comp-dot--live { background: var(--lime); box-shadow: 0 0 7px -1px var(--lime); }
.comp-row-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; flex: none; }
.comp-row-tag--here { color: var(--lime); font-size: 13px; }
.comp-row-tag--soon { color: var(--text-4); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 5px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  border: 0;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}

.btn-primary {
  background: var(--lime);
  color: var(--canvas);
}

.btn-primary:hover { background: #cbff4d; }

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

.btn-secondary:hover { border-color: var(--text-3); }

/* "Predict the other ties" nudge on a shared World Cup dare landing. */
.wc-more { margin: 14px 0 4px; }

.btn-tertiary {
  background: transparent;
  color: var(--text-3);
  padding: 12px 8px;
}

.btn-tertiary:hover { color: var(--text-2); }

/* Primary action pinned to the bottom of the viewport, never buried below
   the fold regardless of how long the page content is. */
.btn-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--canvas) 65%, transparent);
}

.btn-sticky > * {
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .btn-sticky > * { max-width: 520px; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
}

.card + .card { margin-top: 10px; }

/* ---------- Forms ---------- */
label { display: block; font-size: 13px; color: var(--text-3); margin-bottom: 16px; }

input[type="email"],
input[type="text"],
select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-btn);
  color: var(--text);
  font-size: 15px;
}

/* Neutral focus ring — lime is reserved for reward/primary-action states only */
input[type="email"]:focus,
input[type="text"]:focus,
select:focus {
  outline: 2px solid var(--text-3);
  outline-offset: 1px;
  border-color: var(--text-3);
}

/* Keyboard focus ring for every interactive control (neutral, same as above).
   The visually-hidden pick radios pass their ring to the label they control. */
:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: 3px; }
.team-option input:focus-visible ~ label,
.draw-option input:focus-visible ~ .draw-pill { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: 6px; }

input[type="email"]::placeholder,
input[type="text"]::placeholder { color: var(--text-4); }

.form-errors {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--text-2);
  font-size: 14px;
}

fieldset + fieldset,
.field-group + .field-group { margin-top: 20px; }

fieldset legend, .field-group-label {
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}

/* ---------- Match prediction cards ---------- */
.match-card { padding: 14px 16px; }

.match-picker {
  display: grid;
  /* minmax(0,1fr), not bare 1fr: 1fr floors at min-content, so the longest
     team name set the track width instead of wrapping inside it. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.team-option { position: relative; }
.team-option input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; }

.team-option label {
  display: block;
  cursor: pointer;
  margin: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team-option:last-child label { text-align: right; align-items: flex-end; }

.team-crest {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-bottom: 4px;
}

.team-name {
  color: var(--text-2);
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 4px;
  /* Dotted underline signals "tappable" without turning the name into a button. */
  border-bottom: 2px dotted var(--border-2);
  transition: color 150ms, border-color 150ms;
}

.team-option label:hover .team-name { color: var(--text); border-bottom-color: var(--text-3); }

.team-option input:checked ~ label .team-name {
  color: var(--text);
  border-bottom: 2px solid var(--lime);
}

.team-option input:disabled ~ label {
  cursor: not-allowed;
}

.draw-option { text-align: center; }
.draw-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.draw-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text-4);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.draw-option input:checked ~ .draw-pill {
  border-color: var(--text-2);
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.draw-option input:disabled ~ .draw-pill { cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  color: var(--text-4);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-correct { background: transparent; color: var(--canvas); }
.badge-correct-fill { background: var(--lime); color: var(--canvas); }
.badge-near { background: transparent; border: 1.5px solid var(--lime); color: var(--lime); }

/* ---------- Leaderboard table ---------- */
table { width: 100%; border-collapse: collapse; margin-top: 16px; }

th {
  text-align: left;
  color: var(--text-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 15px;
}

td:last-child, th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

tr.you td { color: var(--text); font-weight: 700; }
tr.you { background: var(--surface); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .card { animation: card-in 200ms cubic-bezier(0.34, 1.5, 0.64, 1) backwards; }
  .card:nth-of-type(1) { animation-delay: 0ms; }
  .card:nth-of-type(2) { animation-delay: 40ms; }
  .card:nth-of-type(3) { animation-delay: 80ms; }
  .card:nth-of-type(4) { animation-delay: 120ms; }
  .card:nth-of-type(5) { animation-delay: 160ms; }
}

@keyframes card-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- Shared: editorial eyebrow ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

/* ---------- Landing page (guest) ---------- */
.landing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px calc(24px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .landing { padding-left: 48px; padding-right: 48px; }
}

@media (min-width: 1024px) {
  .landing { padding-left: 64px; padding-right: 64px; }
}

.landing section + section { margin-top: 64px; }

/* Hero */
/* ---------- The front door (sign-in / check-email / onboarding) ----------
   A focused, vertically-centered gateway. The nav carries the persistent
   wordmark, so the gate leads with the Impact headline — same voice as the
   landing hero, sized down for a single-action page. */
.gate {
  max-width: 400px;
  margin: 0 auto;
  min-height: calc(100dvh - 148px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 20px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
}

.gate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gate-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }

.gate-title {
  font-family: var(--font-display);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
  font-size: clamp(44px, 13vw, 62px);
  margin-bottom: 16px;
  text-wrap: balance;
}
.gate-title .lime { color: var(--lime); }

.gate-sub {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
  max-width: 30ch;
  margin: 0 auto 24px;
}

/* Reassurance pill on the gate when a guest arrived mid-prediction (pending_gate). */
.gate-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin: 0 auto 22px;
  padding: 9px 15px;
  border: 1px solid rgba(194, 255, 31, 0.4);
  background: rgba(194, 255, 31, 0.07);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.3;
}
.gate-pending::before { content: "\2713"; color: var(--lime); font-weight: 700; }

.gate-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.gate-form input { margin-top: 0; }

.gate-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text-3);
  margin-top: 20px;
}

.gate-links { margin-top: 16px; font-size: 13px; }
.gate-links a { color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.gate-links a:hover { color: var(--text-2); }

/* The "Spot On" bullseye — the link is in flight to the target. */
.gate-target {
  width: 68px;
  height: 68px;
  margin: 0 auto 26px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  display: grid;
  place-items: center;
  position: relative;
}
.gate-target::before {
  content: "";
  width: 40px;
  height: 40px;
  border: 2px solid var(--border-2);
  border-radius: 50%;
}
.gate-target::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--lime);
  animation: gate-ping 2.2s ease-out infinite;
}
@keyframes gate-ping {
  0% { box-shadow: 0 0 0 0 rgba(194, 255, 31, 0.4); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(194, 255, 31, 0); }
}
@media (prefers-reduced-motion: reduce) { .gate-target::after { animation: none; } }

.hero { padding-top: 8px; }

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 24px;
  }
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--lime);
}
.hero-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--lime); flex: none; }

.hero-title {
  font-family: var(--font-display);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.96;
  font-size: clamp(33px, 6.4vw, 68px);
  margin-bottom: 22px;
}

.hero-title .lime { color: var(--lime); }

.hero-sub {
  color: var(--text-2);
  font-size: clamp(16px, 2.2vw, 19px);
  max-width: 46ch;
  line-height: 1.55;
  margin-bottom: 18px;
}

/* Leagues + launch date as a quiet credibility line under the hook (replaces the
   old top switcher for guests). Not a control — a launch signal. */
/* Trust row under the hook — honest, no pricing claim. */
.hero-trust { display: flex; flex-wrap: wrap; gap: 7px; }
.ht-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 11px; }
.ht-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; }

/* Game toggle above the preview — the two games, matchweek leading. Swaps the
   preview + retargets the CTA (hero_mode controller). */
.hm-tabs { display: flex; gap: 5px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.hm-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; background: none; border: 0; cursor: pointer; padding: 9px 6px; border-radius: 9px; transition: background 140ms; }
.hm-tab span { font-family: var(--font-cond); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-2); }
.hm-tab small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-4); }
.hm-tab:hover { background: var(--surface-2); }
.hm-tab.is-on { background: var(--lime); }
.hm-tab.is-on span { color: #0B0C0F; }
.hm-tab.is-on small { color: rgba(11, 12, 15, 0.55); }

/* On-board competition switch — a segmented toggle in the preview header. Tap =
   the fixtures/table flip. Live leagues only; cups ride the "more coming" line. */
.lg-switch { display: inline-flex; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-2); border-radius: 999px; padding: 2px; flex: none; }
.lg-switch-opt { font-family: var(--font-cond); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-3); text-decoration: none; padding: 4px 10px; border-radius: 999px; white-space: nowrap; transition: color 140ms; }
.lg-switch-opt:hover { color: var(--text); }
.lg-switch-opt.is-on { background: var(--lime); color: #0B0C0F; }

/* "More coming" roadmap line under the preview — cups as honest signal, not buttons. */
.hero-comps-more { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); }
.hcm-chip { font-family: var(--font-cond); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; color: var(--text-3); border: 1px dashed var(--border-2); border-radius: 999px; padding: 3px 10px; }

/* Season "final table" preview — the other game in the toggle. */
.hero-season { padding-bottom: 6px; }
.hs-row { padding: 10px 16px; border-top: 1px solid var(--border); }
.hs-lb { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
.hs-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-slot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-cond); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.01em; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; padding: 5px 9px; }
.hs-slot .team-crest { width: 18px; height: 18px; }
.hs-rank { font-family: var(--font-num); font-weight: 700; font-size: 11px; color: var(--text-4); min-width: 10px; }
.hs-slot.is-empty { color: var(--text-4); border-style: dashed; }

/* The predict -> share -> prove loop line under the headline. */
.hero-loop { font-family: var(--font-num); font-weight: 700; font-size: clamp(14px, 2vw, 16px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); margin: -8px 0 16px; }
.hero-loop b { color: var(--lime); font-weight: 700; }

/* Share hook under the board. */
.hero-share { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.hero-share .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; }

/* Save-to-compete payoff strip, right under the hero. */
.hero-gain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 30px 0 0; padding: 15px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.hg-lead { font-family: var(--font-cond); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-2); }
.hg-lead b { color: var(--lime); }
.hg-items { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.hg { font-family: var(--font-cond); font-weight: 400; font-size: 14px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; }
.hg::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); flex: none; }
.hg b { color: var(--text); font-weight: 700; }

.hero-actions { display: flex; gap: 10px; margin-top: 14px; }
.hero-actions .btn { width: auto; flex: 1; }

/* Hero matchweek card — a week of fixtures to call (the recurring game). */
.hero-mw { background: var(--surface-2); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--border-2), 0 22px 44px -16px rgba(0, 0, 0, 0.8); }
.hero-mw-head { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 16px 11px; }
.hero-mw-t { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: 0.01em; }
.hero-mw-fx { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.hero-mw-side { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 14px; }
.hero-mw-side.aw { justify-content: flex-end; }
.hero-mw-side .team-crest { width: 26px; height: 26px; flex: none; }
.hero-mw-sc { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--text-4); width: 50px; text-align: center; flex: none; }
.hero-mw-colon { margin: 0 3px; }
.hero-mw-more { text-align: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding: 11px; margin: 0; border-top: 1px solid var(--border); }


/* Benefits — the bragging-rights trio (PAR, groups, sharing). */
.lp-ben-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 20px; }
.lp-ben { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.lp-ben-badge { flex: none; }
.lp-ben-badge .crest-mini-svg { width: 54px; height: 54px; }
.lp-ben-ico { flex: none; width: 54px; height: 54px; border-radius: 14px; background: rgba(194, 255, 31, 0.06); border: 1px solid rgba(194, 255, 31, 0.18); display: flex; align-items: center; justify-content: center; color: var(--lime); }
.lp-ben-ico svg { width: 24px; height: 24px; }
.lp-ben-txt { min-width: 0; }
.lp-ben-t { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: 17px; line-height: 1; margin: 0; }
.lp-ben-t small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; font-weight: 400; }
.lp-ben-d { font-size: 13px; color: var(--text-2); line-height: 1.4; margin: 6px 0 0; }

.hero-match { margin-top: 34px; }

@media (min-width: 900px) {
  .hero-match { margin-top: 0; }
}

/* Hero visuals: the live match card + a season entry, stacked */
.hero-visuals { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; }
@media (min-width: 900px) { .hero-visuals { margin-top: 0; } }

/* World Cup band: two semis side by side on desktop (a full-width prediction
   card is absurd on a wide screen); stacked on mobile. */
.wc-cards { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 900px) { .wc-cards { grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } }

/* One-line orientation banner while the World Cup challenge is live. */
.wc-topline { text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--text-3); max-width: 640px; margin: 0 auto; padding: 12px 16px 14px; }
.wc-topline b { color: var(--text); font-weight: 600; white-space: nowrap; }
.wc-topline .lime { color: var(--lime); font-weight: 600; }
.flag-inline { display: inline-block; margin: 0 0.28em; }

/* The World Cup band's sub is redundant on a small screen — the title + card
   carry it, and the space matters more. Hidden on phones, kept on desktop. */
@media (max-width: 480px) { .wc-band-sub { display: none; } }

/* World Cup bracket — one vertical column, top to bottom by round. The live tie
   is a full predict card; finished ties grey to a score; undecided ties sit
   locked. Contrast does the work: only the live card pops. */
.wc-bracket { max-width: 460px; margin: 10px auto 0; display: flex; flex-direction: column; gap: 26px; }
.wc-round { display: flex; flex-direction: column; gap: 14px; }
.wc-round-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); text-align: center; }
.wc-round-ties { display: flex; flex-direction: column; gap: 14px; }

.wc-card { padding: 20px 18px; }
.wc-card .h2h { margin: 4px 0 0; }
.wc-card .h2h-team { cursor: default; }
.wc-card-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-4); text-align: center; }

/* Completed tie: winner clear, loser dim, a lime "through". */
.wc-result .h2h-team:not(.is-dim) .h2h-name { color: var(--text); }
.wc-score { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 8px; font-family: var(--font-num); font-weight: 700; }
.wc-score-n { font-size: 40px; color: var(--text-4); line-height: 1; }
.wc-score-n.wc-win { color: var(--text); }
.wc-score-dash { font-size: 24px; color: var(--text-4); }
.wc-verdict { text-align: center; font-family: var(--font-cond); text-transform: uppercase; font-size: 15px; letter-spacing: 0.02em; color: var(--text-4); margin-top: 10px; }
.wc-verdict .lime { color: var(--lime); }

/* Pending tie: locked, washed out — teams not decided yet. */
.wc-pending { opacity: 0.6; }
.wc-locked { color: var(--text-4); }
.wc-tbd { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed var(--border-2); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-num); font-weight: 700; font-size: 20px; color: var(--text-4); }
.h2h-name.is-tbd { font-family: var(--font-body); font-weight: 500; text-transform: none; font-size: 12px; letter-spacing: 0; color: var(--text-3); line-height: 1.3; max-width: 130px; }
.wc-pending-note { text-align: center; font-size: 12px; color: var(--text-4); margin-top: 12px; }
/* When the World Cup takes over the hero, drop the copy|card split. */
@media (min-width: 900px) {
  .hero.is-wc { grid-template-columns: 1fr; }
  .hero.is-wc .hero-copy { max-width: 720px; }
}

/* Ways to play (landing doors) + how it works */
.ways-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; font-size: clamp(30px, 5vw, 44px); color: var(--text); margin-bottom: 10px; }
.ways-title .lime { color: var(--lime); }
.ways-sub { color: var(--text-3); font-size: 15px; line-height: 1.55; max-width: 60ch; margin-bottom: 22px; }
.howsteps { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .howsteps { grid-template-columns: 1fr 1fr 1fr; gap: 24px; } }
.howstep { display: flex; flex-direction: column; }
.hs-n { font-family: var(--font-display); color: var(--lime); font-size: 30px; line-height: 1; margin-bottom: 8px; }
.howstep h3 { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 20px; letter-spacing: 0.01em; color: var(--text); margin-bottom: 6px; }
.howstep p { color: var(--text-3); font-size: 14px; line-height: 1.5; }
.how-soon { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 14px; line-height: 1.5; }
.inlink { color: var(--lime); font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.inlink:hover { text-decoration: underline; }

/* "Keep going" — cross-flow loop so a prediction page never dead-ends */
.keep-going { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border); }
.kg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.kg-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
@media (min-width: 620px) { .kg-actions { flex-direction: row; } .kg-actions .kg-card { flex: 1; min-width: 0; } }
.kg-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border-2); padding: 14px; text-decoration: none; transition: border-color 150ms, background 150ms; }
.kg-card:hover { border-color: var(--text-3); background: var(--surface-2); }
.kg-ico { display: inline-flex; color: var(--lime); flex: none; }
.kg-ico svg { width: 22px; height: 22px; }
.kg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kg-title { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 17px; color: var(--text); letter-spacing: 0.01em; }
.kg-hook { font-size: 12.5px; color: var(--text-3); }
.kg-arrow { color: var(--text-4); font-size: 20px; flex: none; }
.kg-signup { border-top: 2px solid var(--lime); }
.keep-going.is-lit .kg-card { border-color: var(--lime); background: rgba(194, 255, 31, 0.05); }

/* Featured fixture head */
.fixture-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.fixture-when {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.pick-prompt { text-align: center; font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.pick-prompt .lime { color: var(--lime); }

/* ---------- Featured call card (the card IS the control) ---------- */
.callcard {
  background: var(--canvas);
  border: 1px solid var(--border-2);
  border-top: 3px solid var(--lime);
  padding: 20px 18px 16px;
}
.callcard .receipt-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 700;
  margin-bottom: 10px;
}

.callstep { display: flex; align-items: center; gap: 8px; flex: none; }
.callstep .step-digit { min-width: 22px; }
.callstep .step-digit.is-win { color: var(--lime); }

/* Head-to-head layout: teams side by side (tap to call the winner) with one
   centered score dial below. Replaces the stacked rows whose stepper wrapped
   awkwardly on mobile; reads like a real scoreline and works two-up on desktop. */
.h2h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px 0 10px; }
.h2h-team { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 8px 4px 6px; border-radius: 10px; }
.h2h-team .team-crest { width: 44px; height: 44px; }
.h2h-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.05; letter-spacing: 0.01em; color: var(--text-3); text-align: center; transition: color .12s; }
.h2h-team:hover .h2h-name { color: var(--text-2); }
.h2h-team.is-picked { background: rgba(194, 255, 31, 0.05); }
.h2h-team.is-picked .h2h-name { color: var(--text); }
.h2h-team.is-picked::after { content: ""; width: 32px; height: 3px; background: var(--lime); border-radius: 2px; }
.h2h-team.is-dim { opacity: 0.42; }
.h2h-vs { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); }
.h2h-dial { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; }
.dial-side { display: flex; align-items: center; gap: 8px; }
.dial-num { font-family: var(--font-num); font-weight: 700; font-size: 40px; min-width: 28px; text-align: center; color: var(--text); line-height: 1; }
.dial-num.is-win { color: var(--lime); }
.dial-colon { font-family: var(--font-num); font-weight: 700; font-size: 26px; color: var(--text-4); }
.dial-scorewrap { display: inline-flex; align-items: baseline; }
.dial-pk { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--lime); margin-left: 3px; }

.callrow-draw { display: flex; justify-content: center; padding: 4px 0; }
.callrow-draw .draw-pill {
  min-width: 72px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: none;
  color: var(--text-4);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.callrow-draw .draw-pill:hover { color: var(--text-3); }
.callrow-draw .draw-pill.is-picked {
  border-color: var(--lime);
  color: var(--text);
  background: rgba(184, 255, 0, 0.06);
}

/* Knockout: "wins on pens" picker, revealed when the call is level. */
.callrow-pens { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; }
.callrow-pens[hidden] { display: none; }
.callrow-pens .pens-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); }
.callrow-pens .pens-opts { display: flex; gap: 8px; }
.pens-btn { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: 0.02em; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 7px 15px; cursor: pointer; }
.pens-btn:hover { color: var(--text-2); }
.pens-btn.is-picked { color: var(--text); border-color: var(--lime); background: rgba(194, 255, 31, 0.08); }

.callhook {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--text);
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 16px 0 0;
}
.callhook .lime { color: var(--lime); }

.callmeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-2);
}
.callmeta > span:last-child { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.04em; }

.step-btn:disabled { opacity: 0.28; cursor: default; }

.receipt-kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 700;
  margin-bottom: 8px;
}

.step-btn {
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: var(--radius-btn);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.step-btn:hover { color: var(--text); border-color: var(--text-3); }

.step-digit {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text);
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.featured-more { display: inline-flex; align-items: center; gap: 6px; margin: 16px auto 0; padding: 9px 16px; border: 1px solid rgba(194, 255, 31, 0.35); border-radius: 999px; font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: var(--lime); text-decoration: none; background: rgba(194, 255, 31, 0.06); }
.featured-more-wrap { text-align: center; }
.featured-more:hover { background: rgba(194, 255, 31, 0.14); border-color: rgba(194, 255, 31, 0.6); }
.receipt-actions { display: flex; gap: 10px; margin-top: 14px; }
.receipt-actions[hidden] { display: none; }
.receipt-actions .btn { width: auto; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- Season prediction boards (tap a crest into a ranked slot) ---------- */
.sboard-card { padding: 20px 16px; }
.sboard-card + .sboard-card { margin-top: 14px; }
.sboard-head { display: flex; justify-content: space-between; align-items: baseline; }
.sboard-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); }
.sboard-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(28px, 8vw, 36px); line-height: 0.92; color: var(--text); margin-top: 8px; letter-spacing: -0.01em; }
.sboard-title .lime { color: var(--lime); }
.sboard-sub { font-size: 13px; color: var(--text-3); margin-top: 8px; line-height: 1.45; }
.sboard-sub b { color: var(--text-2); font-weight: 600; }
.sboard-sub b.lime { color: var(--lime); }

.sboard-slots { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.sslot { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 9px; min-height: 56px; box-sizing: border-box; }
.sslot.is-filled { box-shadow: inset 3px 0 0 var(--border-2); background: var(--surface); }
.sslot.is-champ { box-shadow: inset 3px 0 0 var(--lime); background: rgba(194, 255, 31, 0.05); }
.sslot.is-empty { border: 1.5px dashed var(--border-2); }
.sslot-rank { font-family: var(--font-num); font-weight: 700; font-size: 22px; color: var(--text); width: 22px; text-align: center; flex: none; font-variant-numeric: tabular-nums; }
.sslot.is-champ .sslot-rank { color: var(--lime); }
.sslot-rank.is-dim { color: var(--text-4); }
.sslot-crest { width: 30px; height: 30px; object-fit: contain; flex: none; }
.sslot-name { flex: 1; min-width: 0; font-family: var(--font-cond); font-weight: 700; font-size: 19px; color: var(--text); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sslot-hint { flex: 1; font-size: 13px; color: var(--text-4); }
.sslot-move { display: flex; flex-direction: column; flex: none; }
.sslot-btn { width: 30px; height: 20px; border: 0; background: none; color: var(--text-4); cursor: pointer; font-size: 9px; line-height: 1; padding: 0; }
.sslot-btn:hover:not(:disabled) { color: var(--text-2); }
.sslot-btn:disabled { opacity: 0.25; cursor: default; }
.sslot-x { width: 36px; height: 36px; flex: none; border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 16px; border-radius: 6px; }
.sslot-x:hover { color: var(--text); background: var(--surface-2); }

.sboard-add { margin: 18px 0 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 10px; }
.sboard-add::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.sboard-pool { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.steam { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border: 1px solid var(--border); border-radius: 9px; background: none; cursor: pointer; position: relative; transition: border-color 120ms, opacity 120ms; min-height: 44px; }
.steam:hover { border-color: var(--text-4); }
.steam img { width: 30px; height: 30px; object-fit: contain; }
.steam span { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.03em; }
.steam.is-picked { opacity: 0.32; }
.steam.is-picked::after { content: "\2713"; position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); color: var(--canvas); font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; }

/* ---------- Season table (tap to fill two zones) ---------- */
.tt2-toggle { display: flex; gap: 6px; margin: 16px 0 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.tt2-toggle button { flex: 1; border: 0; background: none; color: var(--text-2); font-family: var(--font-cond); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; padding: 10px 6px; border-radius: 999px; cursor: pointer; }
.tt2-toggle button.on { background: var(--lime); color: var(--canvas); }
.tt2-toggle button span { font-family: var(--font-mono); font-size: 11px; opacity: 0.55; margin-left: 6px; }
.tt2-toggle button.on span { opacity: 0.7; }
.tt2-zone { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 2px 8px; }
.tt2-zonelbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.tt2-zonelbl.ucl { color: var(--lime); }
.tt2-rankhint { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.sslot.is-drop.is-filled { box-shadow: inset 3px 0 0 var(--text-4); }
.sslot.is-drop .sslot-name { color: var(--text-2); }

/* ---------- Season builder stepper: one group per screen ---------- */
/* The two table steps share one panel; show only the active zone's slots. */
[data-active-zone="top"] [data-zone-panel="drop"],
[data-active-zone="drop"] [data-zone-panel="top"] { display: none; }
/* The section count ("0/4") that used to sit in the toggle now rides the heading. */
.sboard-n { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: 6px; vertical-align: middle; }

/* Tappable progress rail — one dot per step, jump straight to any group. Pinned
   below the site nav (its height comes from season-stepper#syncStickyTop) so it
   stays visible while you scroll the team pool. */
.sstep-bar { display: flex; gap: 6px; position: sticky; top: var(--sticky-nav, 0px); z-index: 40; background: var(--canvas); padding: 10px 0 8px; margin: 0 0 12px; box-shadow: 0 1px 0 var(--border); }
.sstep-dot { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 2px; cursor: pointer; color: var(--text-4); }
.sstep-dot-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); font-family: var(--font-num); font-weight: 700; font-size: 13px; line-height: 1; }
.sstep-dot-lbl { font-family: var(--font-cond); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.sstep-dot.is-current { color: var(--text); }
.sstep-dot.is-current .sstep-dot-n { background: var(--lime); color: var(--canvas); box-shadow: none; }
.sstep-dot.is-done { color: var(--text-2); }
.sstep-dot.is-done .sstep-dot-n { background: transparent; color: var(--lime); box-shadow: inset 0 0 0 1.5px var(--lime); }
/* On a phone, four labels won't fit — fall back to numbered dots; the panel
   heading names the step. */
@media (max-width: 460px) { .sstep-dot-lbl { display: none; } }

/* Back / Next row under the active panel. */
.sstep-nav { display: flex; gap: 10px; margin-top: 18px; }
.sstep-nav .btn { width: auto; }
.sstep-back { flex: 0 0 auto; min-width: 96px; }
.sstep-next { flex: 1; }
.btn-ghost { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border-2); }
.btn-ghost:hover { color: var(--text-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* An author `display` rule beats the UA `[hidden]{display:none}`, so anything the
   stepper hides via the hidden attribute (Next/Back are .btn = inline-flex; the
   nav + confirm are flex; the guest save is display:contents) must restate it —
   otherwise those elements never actually disappear. */
.btn[hidden], .sstep-nav[hidden], .sstep-confirm[hidden], .season-save[hidden] { display: none; }

/* "Locked in" beat shown when a required step is finished, right before the
   stepper glides to the next step (replaces the nav for that moment). */
.sstep-confirm { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; min-height: 44px; font-family: var(--font-cond); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--lime); }
.sstep-confirm-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--canvas); font-size: 15px; font-weight: 900; }
.sstep-confirm:not([hidden]) { animation: sstep-confirm-in 220ms ease-out; }
.sstep-confirm:not([hidden]) .sstep-confirm-check { animation: sstep-check-pop 340ms cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes sstep-confirm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sstep-check-pop { 0% { transform: scale(0.2); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sstep-confirm:not([hidden]), .sstep-confirm:not([hidden]) .sstep-confirm-check { animation: none; }
}

/* Condense the builder on phones so most of a step lands on one screen. Only the
   season builder uses these classes, so the tightening is safe to apply here. */
@media (max-width: 520px) {
  .sboard-card { padding: 14px 13px; }
  .sboard-title { font-size: clamp(23px, 6.6vw, 28px); margin-top: 4px; }
  .sboard-sub { margin-top: 5px; line-height: 1.3; }
  .sboard-slots { margin-top: 10px; gap: 6px; }
  .sslot { min-height: 46px; padding: 7px 9px; }
  .sslot-rank { font-size: 18px; }
  .sslot-name { font-size: 17px; }
  .sslot-crest { width: 26px; height: 26px; }
  .tt2-zone { margin: 10px 2px 6px; }
  .sboard-add { margin: 10px 0 8px; }
  .sboard-pool { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .steam { padding: 7px 2px; min-height: 40px; }
  .steam img { width: 24px; height: 24px; }
  .sstep-bar { margin-bottom: 12px; }
  .sstep-nav { margin-top: 12px; }
}

/* Compact pick chips (Top 4 / Bottom 3) laid out in a grid, so the filled picks
   take little height and more of the 20-team pool stays on screen. Tap a chip to
   remove it; rank is the order you tapped (no reorder arrows). */
.sboard-slots--grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sboard-slots--grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sslot2 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 74px; padding: 10px 6px; border-radius: 10px; border: 1.5px dashed var(--border-2); background: none; box-sizing: border-box; }
.sslot2.is-filled { border-style: solid; border-color: var(--border); background: var(--surface); cursor: pointer; }
.sslot2.is-champ { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--lime); background: rgba(194, 255, 31, 0.06); }
.sslot2.is-drop.is-filled { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--text-4); }
.sslot2-rank { position: absolute; top: 6px; left: 8px; font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sslot2-rank.is-dim { position: static; font-size: 20px; color: var(--text-4); }
.sslot2.is-champ .sslot2-rank { color: var(--lime); }
.sslot2-crest { width: 28px; height: 28px; object-fit: contain; }
.sslot2-code { font-family: var(--font-cond); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.sslot2-x { position: absolute; top: 4px; right: 7px; font-size: 15px; line-height: 1; color: var(--text-4); }
.sslot2.is-filled:hover .sslot2-x { color: var(--text-2); }

/* ---------- Season prediction actions (share leads, save unlocks at 5/5) ---------- */
.season-actions { margin-top: 24px; }
.season-prog { font-family: var(--font-cond); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; color: var(--text-3); text-align: center; margin: 0 0 12px; }
.season-prog.is-done { color: var(--lime); }
.season-cta { display: flex; flex-wrap: wrap; gap: 10px; max-width: 480px; margin: 0 auto; }
.season-cta .btn { flex: 1; min-width: 150px; }
.season-save { display: contents; }

/* Season progress pips (at-a-glance "how many of the 5 sections are done") */
.sprog { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.sprog-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); }
.sprog-track { display: flex; align-items: center; gap: 6px; }
.sprog-pip { width: 22px; height: 5px; border-radius: 3px; background: var(--border-2); }
.sprog-pip.is-on { background: var(--lime); }
/* Optional (bonus) picks read as a hollow track until filled. */
.sprog-pip.is-optional { background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); }
.sprog-pip.is-optional.is-on { background: var(--lime); box-shadow: none; }
.sprog-n { font-family: var(--font-num); font-weight: 700; font-size: 12px; color: var(--text-3); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* Empty table slot reads as tappable; the pool flashes when you tap one */
.sslot.is-empty { cursor: pointer; }
.sboard-pool { transition: box-shadow 200ms; }
.sboard-pool.is-flash { box-shadow: 0 0 0 2px rgba(194, 255, 31, 0.55); }

/* "Share last week" results brag on the dashboard hero */
.dash-lastweek { margin-top: 16px; }
.dash-lastweek .btn { width: auto; }

/* Matchweek results scorecard (finished-match review + share) */
.mw-results { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border-2); border-top: 2px solid var(--lime); padding: 18px 16px; margin: 8px 0 18px; }
.mw-results-top { display: flex; flex-direction: column; gap: 4px; }
.mw-tier { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(26px, 8vw, 34px); line-height: 0.95; color: var(--text); letter-spacing: -0.01em; }
.mw-tally { font-size: 14px; color: var(--text-3); }
.mw-tally b { color: var(--text); font-family: var(--font-num); font-weight: 700; }
.mw-tally b.lime { color: var(--lime); }
.mw-results .btn { width: auto; align-self: flex-start; }

/* In-progress header: the running tally while a week is part-played. Deliberately
   quieter than the finished verdict (no big display tier) — it's a status, not a
   result. */
.mw-progress { background: var(--surface); border: 1px solid var(--border-2); border-top: 2px solid var(--lime); padding: 14px 16px; margin: 8px 0 16px; max-width: 640px; }
.mwp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mwp-phase { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.mwp-bank { font-family: var(--font-cond); font-weight: 600; font-size: 14px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; }
.mwp-bank b { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--lime); margin-right: 3px; }
.mwp-counts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.mwp-counts b { color: var(--text); font-family: var(--font-num); font-weight: 700; margin-right: 3px; }
.mwp-counts .is-live { color: var(--lime); display: inline-flex; align-items: center; gap: 6px; }
.mwp-counts .is-live b { color: var(--lime); }
.mwp-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 12px; }
.mwp-bar i { display: block; height: 100%; background: var(--lime); transition: width 0.3s; }
.mwp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); display: inline-block; flex: none; animation: mwp-pulse 1.4s infinite; }
@keyframes mwp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .mwp-dot { animation: none; } }

/* Group headings for the state-grouped scorecard (In play / Final / To come). */
.mw-grp { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); margin: 20px 2px 10px; display: flex; align-items: center; gap: 8px; }

.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; margin-bottom: 18px; }
.rcard { padding: 14px 16px; }
.rcard-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rcard .mmeta { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.08em; }
.rbadge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px; }
.rbadge.is-spoton { color: var(--canvas); background: var(--lime); font-weight: 700; }
.rbadge.is-correct { color: var(--text-2); border: 1px solid var(--border-2); }
.rbadge.is-miss { color: var(--text-4); border: 1px solid var(--border); }
.rbadge.is-pending { color: var(--text-3); border: 1px solid var(--border); }
.rvs { color: var(--text-4); font-size: 18px; font-weight: 600; }
.predict-result-share { margin-top: 16px; }
.predict-result-share .btn { width: auto; }
.rscore { display: flex; align-items: center; gap: 10px; }
.rteam { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.rteam.away { justify-content: flex-end; }
.rname { font-family: var(--font-cond); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rnum { font-family: var(--font-num); font-weight: 700; font-size: 24px; color: var(--text); flex: none; font-variant-numeric: tabular-nums; }
.rdash { color: var(--text-4); }
.rcard.is-miss .rname, .rcard.is-miss .rnum { color: var(--text-3); }
.rcall { font-size: 13px; color: var(--text-4); margin-top: 12px; }
.rcall b { color: var(--text-2); font-family: var(--font-cond); font-weight: 700; font-size: 15px; }

/* ---------- Searchable player picker (Golden Boot / assists) ---------- */
.ppick-row { margin-top: 16px; }
.ppick-row:first-of-type { margin-top: 18px; }
.ppick-label { display: block; font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.ppick-sub { color: var(--text-4); }
.ppick { position: relative; }
.ppick-field { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 8px; color: var(--text); cursor: pointer; text-align: left; }
.ppick-field:hover { border-color: var(--text-3); }
.ppick.is-open .ppick-field { border-color: var(--lime); }
.ppick-placeholder { color: var(--text-4); }
.ppick-crest { object-fit: contain; flex: none; }
.ppick-sel-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppick-sel-club { color: var(--text-4); font-size: 12px; margin-left: auto; flex: none; }
.ppick-panel { margin-top: 6px; border: 1px solid var(--lime); border-radius: 8px; background: var(--surface); overflow: hidden; }
.ppick-search { width: 100%; box-sizing: border-box; padding: 12px; background: var(--surface-2); border: 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 15px; }
.ppick-search:focus { outline: none; }
.ppick-search::placeholder { color: var(--text-4); }
.ppick-results { max-height: 262px; overflow-y: auto; }
.ppick-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--border); color: var(--text-2); cursor: pointer; text-align: left; }
.ppick-opt:hover { background: var(--surface-2); color: var(--text); }
.ppick-opt img { object-fit: contain; flex: none; }
.ppick-opt-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppick-opt-club { margin-left: auto; color: var(--text-4); font-size: 12px; flex: none; }
.ppick-empty { padding: 16px 12px; color: var(--text-4); text-align: center; font-size: 14px; }

/* Choose your game — the three prediction products as one fork */
.chooser { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
@media (min-width: 720px) { .chooser { flex-direction: row; } .chooser .cg-card { flex: 1; min-width: 0; } }

/* Season prediction: two columns on desktop (tall table beside the shorter picks) */
.page-wide { max-width: 480px; }
@media (min-width: 860px) { .page-wide { max-width: 900px; } }
.season-grid { display: flex; flex-direction: column; gap: 14px; }
.season-grid-side { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 860px) {
  .season-grid { flex-direction: row; align-items: flex-start; }
  .season-grid-main { flex: 1.05; min-width: 0; }
  .season-grid-side { flex: 0.95; min-width: 0; }
  .season-grid-main .sboard-card, .season-grid-side .sboard-card { margin-top: 0; }
}
.cg-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border-2); border-top: 2px solid var(--lime); padding: 16px 14px; text-decoration: none; transition: border-color 120ms, background 120ms; }
.cg-card:hover { border-color: var(--text-3); background: var(--surface-2); }
.cg-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-card-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); }
.cg-card-title { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--text); margin-top: 5px; letter-spacing: -0.01em; }
.cg-card-hook { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }
.cg-peek { display: flex; align-items: center; gap: 5px; flex: none; }
.cg-peek .team-crest { margin-bottom: 0; }
.cg-v { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.cg-peek-week { flex-direction: column; gap: 5px; align-items: flex-end; }
.cg-mini-fx { display: flex; align-items: center; gap: 4px; }
.cg-peek-season { flex-direction: column; gap: 3px; align-items: stretch; }
.cg-mini-row { display: flex; align-items: center; gap: 6px; box-shadow: inset 3px 0 0 var(--border-2); padding: 2px 8px 2px 6px; }
.cg-mini-row.ucl { box-shadow: inset 3px 0 0 var(--lime); }
.cg-mini-rank { font-family: var(--font-num); font-weight: 700; font-size: 12px; color: var(--text-3); width: 14px; }
.cg-mini-row.ucl .cg-mini-rank { color: var(--lime); }
.cg-mini-code { font-family: var(--font-cond); font-weight: 700; font-size: 12px; color: var(--text-2); text-transform: uppercase; }
.cg-mini-row .team-crest { margin-bottom: 0; flex: none; }
.cg-arrow { color: var(--lime); font-size: 20px; flex: none; }

/* Pick a match — fixtures browser + single-match save */
.predict-save { margin-top: 22px; }
.predict-save-label { display: block; font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
.predict-save .btn { width: 100%; }

.season-hd { margin-bottom: 20px; }
.season-hd-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); }
.season-hd-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(40px, 12vw, 60px); line-height: 0.9; color: var(--text); margin-top: 8px; letter-spacing: -0.01em; }
.season-hd-lock { font-size: 13px; color: var(--text-3); margin-top: 12px; line-height: 1.45; }
.season-hd-lock b { color: var(--text-2); font-weight: 600; }
.season-hd-lock.is-locked { color: var(--lime); }

.season-share { display: flex; gap: 10px; margin: 18px 0; }
.season-share .btn { width: auto; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Standings share buttons */
.lb-head-actions { display: inline-flex; align-items: center; gap: 14px; }
.lb-share { display: inline-flex; align-items: center; padding: 4px; background: none; border: 0; color: var(--text-3); cursor: pointer; border-radius: 6px; }
.lb-share:hover { color: var(--text); }
.lb-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-share-btn { width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; flex: none; }

/* Pre-season empty board: everyone starts at zero, #1 is up for grabs. A ghost of
   the real board — its shape, empty and waiting, top spot lit. */
.lb-empty { text-align: center; max-width: 420px; margin: 8px auto 0; }
.lb-empty-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 13px; }
.lb-empty-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.lb-empty-sub b { color: var(--text); font-weight: 700; }
.lb-empty-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(46px, 13vw, 64px); line-height: 0.9; letter-spacing: 0.01em; margin: 16px 0 14px; text-wrap: balance; }
.lb-empty-title .lime { color: var(--lime); }
.lb-empty-sub { color: var(--text-3); font-size: 14.5px; line-height: 1.55; margin: 0 auto 26px; max-width: 32ch; }
.lb-ghost { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 8px; }
.lb-ghost-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.lb-ghost-rank { font-family: var(--font-num); font-weight: 700; font-size: 16px; color: var(--text-4); text-align: left; }
.lb-ghost-name { text-align: left; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: 0.02em; color: var(--text-4); }
.lb-ghost-line { height: 8px; border-radius: 4px; background: var(--border-2); }
.lb-ghost-pts { font-family: var(--font-num); font-weight: 700; font-size: 16px; color: var(--text-4); }
.lb-ghost-row.is-first { border-color: rgba(194, 255, 31, 0.38); background: rgba(194, 255, 31, 0.05); }
.lb-ghost-row.is-first .lb-ghost-rank,
.lb-ghost-row.is-first .lb-ghost-name { color: var(--lime); }
.lb-ghost-row.is-first .lb-ghost-pts { color: var(--text-2); }
.lb-empty-cta { width: auto; }

/* Hidden canvas — renders the shareable PNG, never shown on the page */
.share-canvas { display: none; }

/* Section labels */
.section-label { margin-bottom: 26px; }

/* Board teaser */
.board-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.leaderboard-teaser table { margin-top: 8px; }
.board-more { font-size: 13px; color: var(--text-3); margin-top: 16px; }
.board-more a { color: var(--text-2); }

/* Signup */
.signup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px 24px;
}

@media (min-width: 768px) {
  .signup { padding: 40px; }
}

.signup h2 .lime { color: var(--lime); }
/* The whole-season sign-up block sits centered on the wide World Cup page. */
.wc-explainer { max-width: 560px; margin-left: auto; margin-right: auto; }
.wc-explainer .lead-prompt { color: var(--text-2); font-size: 15px; margin-bottom: 14px; }
.lead-done { text-align: center; padding: 6px 0 2px; }
.wc-explainer .lead-done-title { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; letter-spacing: 0.01em; color: var(--lime); margin: 0; }
.wc-explainer .lead-done-sub { color: var(--text-3); font-size: 14px; margin-top: 6px; }
.wc-explainer .lead-error { color: var(--text-2); font-size: 13px; margin-top: 8px; text-align: center; }
.signup h2 {
  font-family: var(--font-display);
  color: var(--text);
  text-transform: uppercase;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.signup p { color: var(--text-3); font-size: 15px; margin-bottom: 20px; }
.signup p.signup-launch { color: var(--text-2); font-size: 16px; margin-bottom: 10px; }
.signup-launch b { color: var(--text); font-weight: 700; white-space: nowrap; }

.signup-form { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 600px) {
  .signup-form { flex-direction: row; }
}

.signup-form input[type="email"] { margin-top: 0; flex: 1; }

@media (min-width: 600px) {
  .signup-form .btn { width: auto; }
}

/* ---------- Dashboard (member) ---------- */
.dash {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px calc(40px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) { .dash { padding-left: 48px; padding-right: 48px; } }

.dash .lime { color: var(--lime); }

/* Slim standing strip: your status + the door to the boards (tap it to go).
   Big heading-size numbers with small captions so the data reads bold. */
.stand-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; text-decoration: none; color: var(--text-3); font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; transition: border-color 150ms; }
.stand-strip:hover { border-color: var(--text-4); }
.stand-strip b { font-family: var(--font-num); font-weight: 700; font-size: 24px; color: var(--text); line-height: 1; }
.stand-strip small { color: var(--text-4); }
.ss-beating b, .ss-pts b { color: var(--lime); }
/* PAR reads as the on-brand tier roundel: an outline circle + the OVR, both in
   the tier's colour (slate/bronze/silver/gold/special), matching the crest. */
.ss-par { display: flex; align-items: center; gap: 8px; flex: none; }
.ss-par-ring { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--par-c, var(--lime)); display: grid; place-items: center; font-family: var(--font-num); font-weight: 700; font-size: 19px; color: var(--par-c, var(--lime)); line-height: 1; }
.ss-par-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ss-muted { color: var(--text-3); font-size: 15px; }
.ss-sep { width: 1px; height: 20px; background: var(--border-2); }
.ss-go { margin-left: auto; color: var(--lime); font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: 0.03em; white-space: nowrap; }

.dash-hero { margin-bottom: 20px; }
.dash-hero .eyebrow { display: block; margin-bottom: 12px; }

/* The eyebrow + a mobile-only PAR chip share a clean flex row (no absolute
   overlay, so it stays aligned across every week state). Desktop hides the chip
   (the account coin + right-column card carry the rating there). Tier-tinted:
   the number in the tier's metal, a soft tier glow ring. */
.dash-hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dash-hero-top .eyebrow { flex: 1; min-width: 0; margin-bottom: 0; }
.dash-par { display: none; }
@media (max-width: 767px) {
  .dash-par {
    display: inline-flex; flex-direction: column; align-items: center; gap: 1px; flex: none;
    min-width: 60px; padding: 7px 12px 6px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border-2);
    box-shadow: 0 0 0 3px var(--par-glow, transparent); text-decoration: none;
  }
  .dash-par-num { font-family: var(--font-num); font-weight: 800; font-size: 24px; line-height: 0.95; color: var(--par-num, var(--text)); }
  .dash-par-cap { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-3); }
}
.dash-h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--text);
  font-size: clamp(32px, 6vw, 50px);
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.dash-sub { font-size: 15px; color: var(--text-3); margin-top: 10px; }

.dash-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 820px) { .dash-grid { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.dash-col { display: flex; flex-direction: column; gap: 14px; }
.dash-col .card + .card { margin-top: 0; }

.dash-card { padding: 18px; }
.card-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}

/* Fixtures */
.fx { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.fxrow { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 7px; }
.fxrow:hover { background: var(--surface-2); }
.fx-side { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); font-weight: 600; min-width: 0; }
.fx-side.away { flex-direction: row-reverse; text-align: right; }
.fx-side .team-crest { margin-bottom: 0; flex: none; }
.fx-tm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-v { font-size: 11px; color: var(--text-4); font-family: var(--font-mono); text-align: center; min-width: 40px; flex: none; }
.fx-v.is-draw { color: var(--lime); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; }
.fx-v.is-score { color: var(--lime); font-family: var(--font-num); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
.fx-call { min-width: 64px; text-align: right; flex: none; font-size: 12px; color: var(--text-4); font-family: var(--font-mono); }
.fx-side.is-called .fx-tm { color: var(--text); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dash-lock { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.dash-lock b { color: var(--text-2); font-weight: 600; }

/* Weekly hero temperature: lit when there's a move to make, cool once locked. */
.dash-hero.is-locked .dash-h1 { color: var(--text-2); }
/* A calm status line, not a button: lock icon + lime countdown, no pill border
   (a bordered pill reads as tappable, and this is static text). */
.dash-lockcd {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--lime);
}
.dash-lockcd::before {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4.5'%20y='10.5'%20width='15'%20height='10.5'%20rx='2'/%3E%3Cpath%20d='M8%2010.5V7a4%204%200%200%201%208%200v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4.5'%20y='10.5'%20width='15'%20height='10.5'%20rx='2'/%3E%3Cpath%20d='M8%2010.5V7a4%204%200%200%201%208%200v3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dash-lockcd time { color: inherit; }

/* Matchweek "Call every score": one tap to open (or close) all Spot On dialers.
   A bordered pill because it IS interactive, matching the per-match SPOT ON chips. */
.spot-all-row { display: flex; justify-content: center; margin-bottom: 14px; }
.spot-all { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); background: none; border: 1px solid var(--border-2); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.spot-all svg { width: 14px; height: 14px; }
.spot-all:hover { color: var(--text-2); border-color: var(--text-3); }
.spot-all.is-on { color: var(--lime); border-color: rgba(194, 255, 31, 0.4); background: rgba(194, 255, 31, 0.06); }
.lastweek-tally { font-size: 13px; color: var(--text-2); margin-bottom: 10px; font-family: var(--font-mono); }
.lastweek-tally .lime { color: var(--lime); }

/* Season prediction: a quiet, set-and-forget second to the weekly hero. */
.dash-season .season-pitch { font-size: 14px; color: var(--text-2); line-height: 1.45; margin-bottom: 14px; }
.dash-season .season-pitch b { color: var(--text); }
.dash-season .btn { width: auto; }
/* Empty season card: the marketing "final table" preview + a full-width CTA. */
.dash-season-empty .card-label { margin-bottom: 10px; }
.dash-season-empty .hero-season { margin: 0; }
.dash-season-empty .btn { width: 100%; margin-top: 12px; }
.season-edit { color: var(--lime); }

/* Season summary: the table shape at a glance. */
.ssum-zone { margin-bottom: 14px; }
.ssum-zone + .ssum-zone { border-top: 1px solid var(--border); padding-top: 14px; }
.ssum-zhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.ssum-zlabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.ssum-zone.ucl .ssum-zlabel { color: var(--lime); }
.ssum-zrank { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }
.ssum-row { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.ssum-row .team-crest { flex: none; margin-bottom: 0; }
.ssum-rank { font-family: var(--font-num); font-weight: 700; font-size: 13px; color: var(--lime); width: 18px; text-align: center; flex: none; }
.ssum-rank-mute { color: var(--text-4); font-size: 12px; }
.ssum-name { flex: 1; min-width: 0; font-family: var(--font-cond); font-weight: 600; font-size: 15px; text-transform: uppercase; color: var(--text); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssum-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ssum-aw { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.ssum-aw-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ssum-aw-pick { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.ssum-aw-pick .team-crest { margin-bottom: 0; }
.ssum-aw-pick b { color: var(--text); font-weight: 600; }
.ssum-foot { margin-top: 12px; font-size: 13px; color: var(--text-3); }

/* A quiet share icon on a dashboard card head (matchweek + season). */
.card-share { background: none; border: 0; padding: 4px; margin: -4px; color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; border-radius: 6px; flex: none; }
.card-share:hover { color: var(--lime); background: var(--surface-2); }
.card-share svg { width: 18px; height: 18px; display: block; }
.dash-season.is-shareable { cursor: pointer; transition: border-color 0.15s; }
.dash-season.is-shareable:hover { border-color: var(--border-2); }
.dash-season.is-shareable:hover .card-share { color: var(--lime); }

/* Groups holding spot: dashboard glimpse card. */
.dash-leagues { display: block; text-decoration: none; transition: border-color 0.15s; }
.dash-leagues:hover { border-color: var(--border-2); }
.dl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dl-pitch { font-size: 14px; color: var(--text-2); line-height: 1.45; margin-bottom: 12px; }
.dl-pitch b { color: var(--text); }
.dl-link { font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 14px; color: var(--lime); }
.dl-groups { list-style: none; margin: 0 0 12px; padding: 0; }
.dl-groups li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.dl-groups li:first-child { border-top: 0; padding-top: 0; }
.dl-group-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 15px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-group-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); flex: none; }

/* The Boards switch: Global | Private groups, the hero-toggle grammar. Lives
   on BOTH board surfaces so they read as one plural "Boards" area. */
.board-tabs { display: flex; gap: 5px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 4px; margin: 4px 0 18px; max-width: 460px; }
.board-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; text-decoration: none; padding: 10px 8px; border-radius: 9px; font-family: var(--font-cond); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-2); transition: background 140ms; }
.board-tab small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-4); font-weight: 400; }
a.board-tab:hover { background: var(--surface-2); }
.board-tab.is-on { background: var(--lime); color: #0B0C0F; }
.board-tab.is-on small { color: rgba(11, 12, 15, 0.55); }

/* Welcome: what-your-picks-unlock — the landing's benefit cards as doors. */
.welcome-unlocks { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border); }
.lp-ben--link { text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.lp-ben--link:hover { border-color: var(--border-2); transform: translateY(-1px); }

/* ---------- Groups (#25): private boards ---------- */
.grp-head { margin-bottom: 22px; }
.grp-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; font-size: clamp(30px, 6vw, 44px); margin: 10px 0 8px; }
.grp-sub { color: var(--text-2); font-size: 15px; margin: 0; }

.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 18px; }
.grp-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 40px 16px 16px; text-decoration: none; transition: border-color 0.15s; }
.grp-card:hover { border-color: var(--border-2); }
.grp-card-name { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: 19px; line-height: 1.05; color: var(--text); }
.grp-card-meta { font-size: 13px; color: var(--text-2); }
.grp-card-meta b { font-weight: 700; }
.grp-card-leader { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.grp-card-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--text-3); }

.grp-actions { margin-bottom: 26px; }
.grp-create { width: auto; }

.grp-join { margin-top: 6px; }
.grp-join-hint { font-size: 13px; color: var(--text-3); margin: 2px 0 12px; }
.grp-join-form { display: flex; gap: 10px; align-items: stretch; }
.grp-join-input { flex: 0 1 180px; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 10px; color: var(--text); font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; padding: 10px 14px; }
.grp-join-input:focus { outline: none; border-color: var(--lime); }
.grp-join-form .btn { width: auto; }

/* Creator-only "you're the gaffer" note: a quiet whisper above the invite,
   rewarding the organizer and setting the season-seat expectation for mates. */
.grp-gaffer { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; }
.grp-gaffer-tag { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin-right: 6px; }
.grp-gaffer-link { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.grp-gaffer-link:hover { color: var(--lime); }

/* The invite block: a SLIM utility row (the board is the page's main event;
   the invite is a tool). The code is itself the copy button. */
.grp-invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; }
.grp-invite-code-wrap { display: flex; align-items: center; gap: 10px; }
.grp-invite-code { display: inline-block; background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: 8px; color: var(--lime); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.18em; padding: 6px 10px; cursor: pointer; }
.grp-invite-code:hover { border-color: var(--lime); }
.grp-invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.grp-invite-actions .btn { width: auto; padding: 9px 14px; font-size: 13px; }
/* Mobile: stop the awkward wrap lottery — code row full-width on top, the
   two buttons as an equal 50/50 pair beneath. */
@media (max-width: 560px) {
  .grp-invite { flex-direction: column; align-items: stretch; }
  .grp-invite-code-wrap { justify-content: space-between; }
  .grp-invite-code { font-size: 17px; }
  .grp-invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .grp-invite-actions .btn { width: 100%; padding: 11px 8px; }
}

.grp-form { max-width: 460px; }
.grp-form-errors { color: #ff7a7a; font-size: 13px; margin: 0 0 12px; padding-left: 18px; }
.grp-form-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.grp-form-input { display: block; width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 10px; color: var(--text); font-size: 16px; padding: 11px 14px; margin-bottom: 14px; }
.grp-form-input:focus { outline: none; border-color: var(--lime); }

/* The invite landing's sign-in block. */
.grp-invite-cta { max-width: 460px; }
.grp-invite-cta .btn { width: auto; }
.grp-invite-line { font-size: 15px; color: var(--text-2); margin: 0 0 14px; }
.grp-invite-cta .hint { margin: 12px 0 0; }

/* The popped back chip — for pages where back IS the primary nav (a group ->
   your groups). The quiet .back-dash stays for pages where back is secondary. */
.back-pop { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-cond); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lime); background: rgba(194, 255, 31, 0.06); border: 1px solid rgba(194, 255, 31, 0.35); border-radius: 999px; padding: 8px 16px 8px 12px; text-decoration: none; margin-bottom: 18px; transition: background 0.15s, border-color 0.15s; }
.back-pop:hover { background: rgba(194, 255, 31, 0.12); border-color: var(--lime); }
.back-pop-arrow { font-size: 18px; line-height: 1; }

.grp-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.grp-share-btn { width: auto; display: inline-flex; align-items: center; gap: 7px; }

.grp-showall { margin: 12px 0 0; text-align: center; font-size: 14px; }

/* Where you stand: the Global scope tag + the percentile hero line. */
.wys-scope { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--lime); }
.stand-beating { margin: 10px 0 2px; font-family: var(--font-cond); font-weight: 700; font-size: 24px; letter-spacing: 0.01em; color: var(--text); }
.stand-beating b.lime { font-family: var(--font-num); }
/* Your private groups: your rank per row once scoring is live. */
.dl-group-rank { color: var(--lime); font-family: var(--font-num); font-weight: 700; }
.dl-group-rank small { color: var(--text-3); font-family: var(--font-mono); font-weight: 400; }

/* Add-to-Home-Screen nudge (#84): quiet strip, dismissible forever.
   MOBILE-ONLY at the same breakpoint as the tab bar — CSS backstop on top of
   the JS device gate, so no desktop viewport ever shows it (iPadOS
   masquerades as a Mac in the UA, which can slip pure device sniffing). */
.a2hs { display: none; }
@media (max-width: 767px) {
  .a2hs:not([hidden]) { display: flex; }
}
.a2hs { align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); }
.a2hs-copy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); flex: 1; }
.a2hs-copy b { color: var(--text); }
.a2hs-how { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.a2hs-x { flex: none; background: none; border: 0; padding: 0 2px; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; }
.a2hs-x:hover { color: var(--text); }

/* The founding window (#67 pre-launch): free-now urgency framed as a gift. */
.founding-strip { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 2px; padding: 11px 14px; border: 1px solid rgba(194, 255, 31, 0.35); border-radius: 12px; background: rgba(194, 255, 31, 0.05); }
.fs-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.fs-copy { font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* The member identity plaque — one chip family for membership status
   (Founding Member today; Free/Club/Gold render through it at #67). A quiet
   luxury object: bordered chip, soft lime wash, a real explainer line. */
.member-plaque { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; margin: 22px auto 0; padding: 14px 22px; border: 1px solid rgba(194, 255, 31, 0.35); border-radius: 14px; background: linear-gradient(180deg, rgba(194, 255, 31, 0.07), rgba(194, 255, 31, 0.02)); box-shadow: 0 0 24px rgba(194, 255, 31, 0.07); }
.mb-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.mb-diamond { font-size: 10px; }
.mb-note { font-size: 13px; line-height: 1.5; color: var(--text-2); max-width: 40ch; }
.member-plaque.is-tease { border-style: dashed; box-shadow: none; }
/* Your seat: the membership story card — seat (purple), seal (lime), ladder. */
.seat-card { --box-purple: #a78bfa; }
.seat-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 26px; letter-spacing: 0.02em; color: var(--box-purple); margin: 6px 0 2px; }
.seat-seal { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); border: 1px solid rgba(194, 255, 31, 0.4); border-radius: 999px; padding: 4px 11px; margin: 0 0 12px; }
.seat-why { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0 0 14px; max-width: 52ch; }
.seat-ladder { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Grid, not wrapping flex: every rung is the SAME two-line shape — name (and
   the you-chip) on line one, subcopy always on line two. */
.seat-rung { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; row-gap: 3px; padding: 9px 12px; border: 1px solid var(--border-2); border-radius: 10px; }
.seat-rung .sr-sub { grid-column: 1 / -1; }
.seat-rung .sr-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; color: var(--text); }
.seat-rung .sr-sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
/* Your rung is lime by default; purple only when your rung IS the Box (the
   style predates non-founder seat states, when only Box could be "you"). */
.seat-rung.is-you { border-color: rgba(194, 255, 31, 0.45); background: rgba(194, 255, 31, 0.05); }
.seat-rung.is-you:has(.sr-name--box) { border-color: rgba(167, 139, 250, 0.55); background: rgba(167, 139, 250, 0.07); }
.sr-name--box { color: var(--box-purple) !important; }
.seat-you { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
/* The price on each rung: Oswald, colored to its tier, right-aligned — the
   "it's only $5" that used to require a click. */
/* Price stacks over its cadence, so "how much + how often" reads in one
   glance — "once · the season" kills any "is this $5/month?" doubt. */
.seat-rung .sr-price { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-num); font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: 0.01em; color: var(--text-3); white-space: nowrap; }
.seat-rung .sr-price--lime { color: var(--lime); }
.seat-rung .sr-price--box { color: var(--box-purple); }
/* Legible, not a whisper: 10px + text-3 so the cadence actually registers. */
.seat-rung .sr-per { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
/* The plain-words backstop under the ladder: readable, centered, the fear
   named and negated. */
.seat-once { font-size: 13px; line-height: 1.5; color: var(--text-2); text-align: center; margin: 0 0 12px; }
.seat-once b.lime { color: var(--lime); }
.seat-foot { font-size: 12px; color: var(--text-3); margin: 0; }
.seat-upgrade { margin-top: 2px; }

/* ---------- The seats page (/membership, #67) ---------- */
/* Rides the account seat-card language (same ladder names, same box purple)
   scaled up to a selling surface: three cards, one grid. */
.mem-hero { margin: 8px 0 18px; }
.mem-title { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: clamp(38px, 9vw, 56px); line-height: 0.95; letter-spacing: 0.01em; color: var(--text); margin: 6px 0 10px; }
.mem-title .lime { color: var(--lime); }
.mem-sub { font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 52ch; }
/* The context lead: the gate's "why you're here", finishing the sentence. */
.mem-context { border-color: rgba(194, 255, 31, 0.35); margin-bottom: 14px; }
.mem-context-head { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: 22px; letter-spacing: 0.02em; color: var(--text); margin: 0 0 4px; }
.mem-context-copy { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; }
/* ---------- The group-nudge system (#67 funnel, groupless members only) ---------- */
/* One shape everywhere: a slim lime-edged strip, line left, actions right. */
.nudge-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1px solid rgba(194, 255, 31, 0.4); border-left: 3px solid var(--lime); border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; background: linear-gradient(90deg, rgba(194, 255, 31, 0.06), var(--surface) 45%); }
.nudge-line { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; flex: 1; min-width: 220px; }
.nudge-line b { color: var(--text); }
.nudge-line b.lime { color: var(--lime); }
.nudge-ctas { display: flex; gap: 8px; flex: none; }
.nudge-btn { width: auto; min-height: 0; padding: 9px 14px; font-size: 13px; }
/* N2: the dashboard group slot's ghost board — two dashed rows, you second. */
.dl-ghost { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.dl-ghost li { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); border: 1px dashed var(--border-2); border-radius: 8px; padding: 7px 10px; }
.dl-ghost .dl-ghost-rank { font-family: var(--font-num); font-weight: 700; font-size: 12px; }
.dl-ghost li.is-you { border-color: rgba(194, 255, 31, 0.4); color: var(--text-2); }
.dl-ghost li.is-you .dl-ghost-rank { color: var(--lime); }
/* The post-purchase welcome-up moment on the account page. */
.seat-welcome { border: 1px solid rgba(194, 255, 31, 0.45); border-radius: var(--radius-card); padding: 22px 20px; margin: 0 0 16px; background: linear-gradient(180deg, rgba(194, 255, 31, 0.09), rgba(194, 255, 31, 0.02) 60%, transparent); }
.seat-welcome--box { border-color: rgba(167, 139, 250, 0.55); background: linear-gradient(180deg, rgba(167, 139, 250, 0.12), rgba(167, 139, 250, 0.03) 60%, transparent); }
.sw-kick { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin: 0 0 8px; }
.seat-welcome--box .sw-kick { color: #a78bfa; }
.sw-title { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 6vw, 40px); line-height: 1; color: var(--text); margin: 0 0 8px; }
.sw-title .sw-yours { color: var(--lime); }
.seat-welcome--box .sw-title .sw-yours { color: #a78bfa; }
.sw-sub { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin: 0; max-width: 52ch; }

/* N5: the post-share afterglow line on the PAR page. */
.share-afterglow { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 10px 0 0; }
.share-afterglow a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* The login page's reassurance chips (borrowing the landing hero's ht-chip). */
.gate-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; }
/* On the login gate the chips ARE the copy, not garnish: white and a size up. */
.gate-chips .ht-chip { font-size: 11.5px; color: var(--text); border-color: var(--border-2); }
/* The check-email page's inbox door + resend. */
.gate-inbox { margin: 4px 0 14px; }
.gate-resend { margin: 14px 0 0; }
.gate-resend .btn { width: 100%; }
/* The pre-click signpost under Create a group. */
.grp-members-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); text-align: center; margin: 8px 0 0; }
.mem-invite { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); border: 1px solid rgba(194, 255, 31, 0.35); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.mem-invite .lime { color: var(--lime); }
.mem-founding { margin-bottom: 14px; border-color: rgba(194, 255, 31, 0.3); }
.mem-founding-seal { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin: 0 0 8px; }
.mem-founding-copy { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; max-width: 60ch; }
.mem-grid { display: grid; gap: 10px; margin: 0 0 16px; }
/* Equal-height cards (stretch, not start) + .mem-cta pinned with margin-top:
   auto = every CTA sits on the same bottom line across all three cards. */
@media (min-width: 900px) { .mem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mem-grid .card + .card { margin-top: 0; } }
.mem-seat { display: flex; flex-direction: column; padding: 20px; --seat-accent: var(--text); }
.mem-cta { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.mem-seat--box { --seat-accent: #a78bfa; }
/* No card-outline for is-you: the bullseye marker below carries the state
   alone (outline + pill was saying "you're here" twice). */
/* The flagship: purple presence without shouting. */
.mem-seat.is-featured { border-color: rgba(167, 139, 250, 0.5); background: linear-gradient(180deg, rgba(167, 139, 250, 0.08), rgba(167, 139, 250, 0.02) 55%, transparent); }
.mem-seat--box.is-you { border-color: rgba(167, 139, 250, 0.65); }
.mem-seat.is-nudged { border-color: rgba(167, 139, 250, 0.85); box-shadow: 0 0 24px rgba(167, 139, 250, 0.18); }
/* The flagship tag floats ON the card border so all three cards' name/price
   rows stay on the same lines. */
.mem-seat { position: relative; }
.mem-seat-tag { position: absolute; top: -9px; left: 14px; background: var(--canvas); padding: 2px 9px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--seat-accent); margin: 0; white-space: nowrap; }
.mem-seat-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: 0.05em; color: var(--seat-accent); margin: 0 0 6px; white-space: nowrap; }
/* Ownership answered in the FIRST eye-sweep (names + prices): your seat's
   name wears the same bullseye as the big marker below — one system, echoed,
   not a second signal. */
.mem-seat.is-you .mem-seat-name::before { content: "\25C9\00a0"; color: var(--lime); font-size: 14px; }
/* Price is the hero: the one thing each card must answer at a glance. The
   per-label sits UNDER the number (beside it, it overflowed narrow cards). */
.mem-seat-price { font-family: var(--font-num); font-weight: 700; font-size: 44px; line-height: 1; color: var(--text); margin: 0 0 14px; }
/* No nowrap: on narrow cards the label WRAPS inside its box — overflowing
   the card edge (Jason's screenshots, twice) is the one unacceptable outcome. */
.mem-seat-per { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; line-height: 1.5; }
.mem-per-strong { display: block; color: var(--lime); font-weight: 700; margin-top: 4px; }
.mem-seat-line { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0 0 18px; }
.mem-seat-line b { color: var(--text); }
/* The house P-A-R spell-out (same trick as the account doorway's apc-sub):
   lime initials teach the acronym mid-sentence. */
.mem-seat-line .mem-spell b { color: var(--lime); }
.mem-seat-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4); text-align: center; margin: 0; }
.mem-buy-form { margin: 0; }
/* The you-are-here marker: same rectangle as the buy buttons (one shape
   language), reverse-colored — dark ground, lime type, bullseye mark. */
.mem-seat-you { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 14px; border-radius: var(--radius-btn); background: rgba(194, 255, 31, 0.08); border: 1px solid rgba(194, 255, 31, 0.45); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); margin: 0; white-space: nowrap; }
.mem-seat-you span { font-size: 17px; line-height: 0; }
.mem-seat-cta-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: center; margin: 0; padding: 8px 0 0; }
.mem-buy-form + .mem-seat-cta-note { padding-top: 8px; }

/* ---- Focused join arrival: a terraces invitee mid-join (defined AFTER the
   base .mem-seat rules so the pick highlight/tag win the cascade) ---- */
.mem-jhead { margin: 8px 0 20px; }
.mem-jbrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.mem-lead { font-size: 15px; line-height: 1.55; color: var(--text-2); margin: 10px 0 18px; max-width: 46ch; }
.mem-lead-code { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.03em; color: var(--lime); font-weight: 700; }
.mem-join .mem-seat { margin-bottom: 12px; }
.mem-seat--pick { border-color: rgba(194, 255, 31, 0.5); background: linear-gradient(180deg, rgba(194, 255, 31, 0.06), transparent 55%); }
.mem-seat--pick .mem-seat-tag { color: var(--lime); }
.mem-terr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--border-2); border-radius: var(--radius-card); margin-top: 4px; }
.mem-terr-l { flex: 1; min-width: 190px; }
.mem-terr-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; color: var(--text-2); margin: 0; }
.mem-terr-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-3); margin: 3px 0 0; }
.mem-terr-skip { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.mem-terr-skip:hover { color: var(--lime); }
.mem-terr-you { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); border: 1px solid rgba(194, 255, 31, 0.4); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.mem-terr-you span { font-size: 15px; line-height: 0; }

.mem-foot { font-size: 12px; color: var(--text-3); margin: 18px 0 6px; }
/* The Terraces beat on onboarding: the post-window seat identity moment. */
.onb-terraces { margin-top: 18px; text-align: left; }
.onb-terraces-kick { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin: 0 0 8px; }
.onb-terraces-copy { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0 0 10px; }
.onb-terraces-link { margin: 0; font-size: 13px; }
.onb-terraces-link a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.onb-terraces-link a:hover { color: var(--lime); }

/* The account-menu tier line: a whisper under the name. */
.acct-who-tier { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); margin-top: 3px; }

/* The week nudge, folded into the board header: one quiet mono line. */
.gbh-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.gbh-nudge { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--text-3); line-height: 1.5; }
.gbh-nudge b.lime { font-weight: 700; color: var(--lime); }
.gbh-allin { color: var(--lime); }
.gbh-nudge-btn { background: none; border: 0; padding: 0; margin-left: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--lime); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gbh-nudge-btn:disabled { opacity: 0.6; cursor: default; }
/* Share button sized to the header it lives in, not to the board below. */
.grp-share-btn { width: auto; flex: none; padding: 7px 12px; font-size: 12px; }

/* Creator-only rename, mirroring the account name-edit details pattern. */
.grp-rename { margin-top: 10px; }
.grp-rename-toggle { display: inline-block; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px; user-select: none; }
.grp-rename-toggle::-webkit-details-marker { display: none; }
.grp-rename[open] .grp-rename-toggle { color: var(--text); border-color: var(--text-3); }
.grp-rename-form { display: flex; gap: 8px; margin-top: 12px; max-width: 420px; }
.grp-rename-form input[type=text] { flex: 1; min-width: 0; }
.grp-rename-form .btn { flex: none; width: auto; }
.grp-danger { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
.grp-danger-btn { background: none; border: 1px solid var(--border-2); border-radius: 10px; color: var(--text-3); font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 13px; padding: 9px 16px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.grp-danger-btn:hover { color: #ff7a7a; border-color: rgba(255, 122, 122, 0.5); }

/* Groups holding page (/leagues). */
.leagues-soon { max-width: 640px; }
.ls-hero { margin: 8px 0 28px; }
.ls-hero .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.ls-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(40px, 9vw, 68px); line-height: 0.9; letter-spacing: -0.01em; color: var(--text); }
.ls-sub { font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 16px 0 18px; max-width: 52ch; }
.ls-soon { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); border: 1px solid rgba(194, 255, 31, 0.35); background: rgba(194, 255, 31, 0.07); border-radius: 999px; padding: 6px 13px; }
.ls-steps { display: grid; gap: 10px; margin-bottom: 24px; }
@media (min-width: 640px) { .ls-steps { grid-template-columns: repeat(3, 1fr); } }
.ls-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ls-n { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--lime); }
.ls-st { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 16px; color: var(--text); }
.ls-sh { font-size: 13px; color: var(--text-3); line-height: 1.4; }
.ls-preview { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-card); padding: 16px; margin-bottom: 22px; }
.ls-pv-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin-bottom: 12px; }
.ls-board { display: flex; flex-direction: column; gap: 8px; }
.ls-brow { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.ls-brow .rk { font-family: var(--font-num); font-weight: 700; color: var(--text-3); width: 20px; }
.ls-brow .nm { flex: 1; color: var(--text-2); }
.ls-brow .pt { font-family: var(--font-mono); color: var(--text-3); }
.ls-brow.is-you .nm { color: var(--text); font-weight: 600; }
.ls-brow.is-you .rk, .ls-brow.is-you .pt { color: var(--lime); }
.ls-foot { font-size: 14px; color: var(--text-3); line-height: 1.6; }
.ls-foot a { color: var(--lime); }

/* Standing */
.stand { display: flex; align-items: flex-end; gap: 12px; }
.stand-rank { font-family: var(--font-num); font-weight: 700; color: var(--lime); font-size: 46px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.stand-rank small { color: var(--text-3); font-size: 14px; font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; }
.stand-pts { margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-4); }
.stand-pts b { display: block; font-family: var(--font-num); font-weight: 700; font-size: 30px; color: var(--text); letter-spacing: 0; text-transform: none; line-height: 1; }
.stand-quietly { font-size: 12px; color: var(--text-4); margin-top: 10px; font-family: var(--font-mono); letter-spacing: 0.02em; }
.stand-record { display: flex; gap: 8px; margin-top: 16px; }
.rec-stat { flex: 1; text-align: center; padding: 11px 4px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.rec-stat b { display: block; font-family: var(--font-num); font-weight: 700; font-size: 24px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.rec-stat span { display: block; margin-top: 6px; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); font-family: var(--font-mono); }
.stand-spotons { font-size: 13px; color: var(--text-3); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.stand-spotons .lime { color: var(--lime); font-family: var(--font-num); font-weight: 700; font-size: 18px; }
.stand-accuracy { font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; color: var(--text); margin: 12px 0 0; }
.stand-accuracy .lime { color: var(--lime); }

/* Mini leaderboard */
.lb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lb-full { font-size: 12px; color: var(--text-3); text-decoration: none; }
.lb-full:hover { color: var(--text-2); }
/* ---------- Standings: league table (columns under headers) + brand pop ---------- */
.board { display: flex; flex-direction: column; }
.board-row, .board-headrow { display: flex; align-items: center; gap: 7px; padding: 11px 8px; border-bottom: 1px solid #14151b; }
.board-row:last-child { border-bottom: 0; }
.board-row.is-leader { background: rgba(194, 255, 31, 0.04); box-shadow: inset 3px 0 0 var(--lime); }
.board-row.is-you { background: rgba(194, 255, 31, 0.06); box-shadow: inset 3px 0 0 var(--lime); }
/* Header row: labels the columns; spacers keep them aligned over the rank/av/name. */
.board-headrow { align-items: flex-start; padding-top: 4px; padding-bottom: 8px; border-bottom-color: var(--border); }
.board-headrow .board-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.board-headrow .bh-l { font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); line-height: 1; }
.board-headrow .board-col-so .bh-l { color: var(--lime); }
.board-headrow .bh-p { font-family: var(--font-num); font-weight: 600; font-size: 11px; color: var(--lime); line-height: 1; }
.board-headrow .bh-p.is-zero { color: var(--text-4); }
.board-headrow .board-av { border: 0; }
.board-rank { font-family: var(--font-num); font-weight: 700; font-size: 19px; color: var(--text-4); width: 20px; text-align: center; flex: none; font-variant-numeric: tabular-nums; }
.board-row.is-leader .board-rank, .board-row.is-you .board-rank { color: var(--lime); }
.board-av { width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-cond); font-weight: 700; font-size: 13px; color: var(--text-3); flex: none; }
.board-row.is-you .board-av { border-color: var(--lime); color: var(--lime); }
/* crest tier rings on the board avatar (the identifier) */
.board-av--gold, .board-av--silver, .board-av--bronze, .board-av--special, .board-av--slate { font-family: var(--font-num); border-width: 2px; font-size: 12px; }
.board-av--gold { border-color: #e2c264; color: #f7e39c; }
.board-av--silver { border-color: #cbd2d9; color: #eef2f6; }
.board-av--bronze { border-color: #cf9256; color: #e6b483; }
.board-av--special { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 10px -3px rgba(194, 255, 31, 0.55); }
.board-av--slate { border-color: #6b6f55; color: #c9cebc; }
.board-name { flex: 1; min-width: 0; font-family: var(--font-cond); font-weight: 700; font-size: 18px; color: var(--text); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.board-you { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; color: var(--canvas); background: var(--lime); padding: 2px 6px; border-radius: 3px; margin-left: 8px; flex: none; }
/* The prediction-model whisper marker: a quiet blue-grey signal, never a loud
   BOT badge. Diamond avatar + "model" tag + the strategy tagline. */
.board-row.is-model { background: rgba(120, 130, 160, 0.05); }
.board-av--model { border-color: rgba(140, 150, 180, 0.6); color: #9aa6c4; }
.board-av--model svg { width: 15px; height: 15px; display: block; }
/* Number columns: W/D/L brighter, SO green, Pts the hero. */
.board-col { flex: none; width: 28px; text-align: right; font-family: var(--font-num); font-weight: 600; font-size: 17px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.board-col-so { color: var(--lime); font-weight: 700; }
.board-col-so.is-zero { color: var(--text-4); }
.board-col-pts { width: 42px; font-weight: 700; font-size: 20px; color: var(--text); }
.board-headrow .board-col-pts { font-size: 9px; }
.board-gap { text-align: center; color: var(--text-4); padding: 4px 0; font-size: 15px; }
/* compact = dashboard preview: rank + monogram + name + points, no columns. */
.board-compact .board-row { padding: 9px 8px; gap: 10px; }
.board-compact .board-av { width: 26px; height: 26px; font-size: 12px; }
.board-compact .board-name { font-size: 17px; }
.board-compact .board-col-pts { width: auto; font-size: 19px; }

/* ---------- Match Picks screen ---------- */
.picks {
  max-width: 1120px;
  margin: 0 auto;
  /* Bottom room for the Lock In bar, which on mobile floats above the tab bar. */
  padding: 20px 16px 172px;
}
@media (min-width: 768px) { .picks { padding: 24px 24px 40px; } }
/* The share summary stays a readable single-column width; the scorecard (.rcards)
   now tiles like the pick grid. */
.picks .mw-results { max-width: 640px; }

/* A quiet contextual back-link (World Cup, admin, legal pages). NOT a pill — the
   primary way home is the Home nav tab + wordmark; this is just a breadcrumb, so
   it reads as a mono meta-link that blends with the app's eyebrows, not a
   floating button that matches nothing. */
.back-dash { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 16px; color: var(--text-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; text-decoration: none; }
.back-dash:hover { color: var(--text); }

/* Dare arrival: "someone called it 2-1, beat it" banner above the match card */
.dare-banner { background: linear-gradient(180deg, rgba(194, 255, 31, 0.08), var(--surface)); border: 1px solid rgba(194, 255, 31, 0.3); border-radius: var(--radius-card); padding: 15px 18px; margin-bottom: 18px; }
.dare-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lime); display: inline-flex; align-items: center; gap: 7px; }
.dare-eyebrow::before { content: "\25C9"; }
.dare-line { color: var(--text-2); font-size: 16px; line-height: 1.5; margin-top: 8px; }
.dare-line b { color: var(--text); font-weight: 600; }
.dare-score { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.02em; }
.dare-line .lime { color: var(--lime); }
.dare-score .dare-pks { text-transform: none; }
.dare-prompt { display: block; color: var(--text-3); font-size: 14px; margin-top: 6px; }

/* Season dare arrival: a read-only "beat this table" panel above the builder. */
.season-dare { background: linear-gradient(180deg, rgba(194, 255, 31, 0.08), var(--surface)); border: 1px solid rgba(194, 255, 31, 0.3); border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 20px; }
.season-dare-head { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; color: var(--text); font-size: 24px; line-height: 1.05; letter-spacing: 0.01em; margin-top: 8px; }
.season-dare-head .lime { color: var(--lime); }
.season-dare-grid { display: flex; flex-direction: column; gap: 13px; margin-top: 15px; }
.sd-row { display: flex; flex-direction: column; gap: 7px; }
.sd-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.sd-teams { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.sd-teams li { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px 4px 6px; }
.sd-rank { font-family: var(--font-mono); font-size: 11px; color: var(--lime); min-width: 11px; text-align: center; }
.sd-name { font-size: 13px; color: var(--text); font-weight: 500; }
.sd-teams .team-crest { border-radius: 3px; }
.sd-individuals { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.sd-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.sd-pick .team-crest { border-radius: 3px; }
.sd-pick-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }
.season-dare-prompt { color: var(--text-3); font-size: 14px; margin-top: 15px; }

/* Account page: who you're signed in as + a light "your game" hub. */
.acct-hero { margin-bottom: 16px; }
.acct-title { font-family: var(--font-display); text-transform: uppercase; color: var(--text); font-size: 34px; line-height: 0.98; letter-spacing: -0.01em; margin-top: 8px; }
.acct-title .lime { color: var(--lime); }
.acct-id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acct-av { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--border-2); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-cond); font-weight: 700; font-size: 22px; color: var(--lime); }
/* Seat-colored avatar: Directors Box purple for founders. */
.acct-av--box { border-color: rgba(167, 139, 250, 0.65); color: #a78bfa; background: rgba(167, 139, 250, 0.08); }
.acct-founder-chip { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); border: 1px solid rgba(194, 255, 31, 0.4); border-radius: 999px; padding: 2px 8px; margin-left: 9px; vertical-align: 3px; }
.acct-id-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acct-name { font-family: var(--font-cond); font-weight: 700; font-size: 20px; color: var(--text); line-height: 1.1; }
.acct-email { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); word-break: break-all; }
.acct-edit { flex-basis: 100%; }
.acct-edit-toggle { display: inline-block; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px; user-select: none; }
.acct-edit-toggle::-webkit-details-marker { display: none; }
.acct-edit[open] .acct-edit-toggle { color: var(--text); border-color: var(--text-3); }
.acct-edit-form { display: flex; gap: 8px; margin-top: 12px; }
.acct-edit-form input[type=text] { flex: 1; min-width: 0; }
.acct-edit-form .btn { flex: none; width: auto; }
.acct-signout { margin-top: 18px; }
.acct-signout .btn { width: 100%; }

.mwnav { display: flex; justify-content: center; margin-bottom: 6px; }
.mwnav h1 {
  font-family: var(--font-display); text-transform: uppercase; color: var(--text);
  font-size: 26px; letter-spacing: -0.01em; line-height: 1; text-align: center;
}
.mwnav h1 .lg { display: block; font-size: 11px; letter-spacing: 0.14em; color: var(--lime); font-family: var(--font-body); font-weight: 600; margin-top: 4px; }

.picks-lock { text-align: center; margin-bottom: 14px; }
/* The single instruction line sitting right above the pick grid (guest home +
   This Week). Subheader weight, not fine-print — it's the "what do I do here". */
.picks-lead { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 0 0 14px; }

.pips { display: flex; gap: 5px; justify-content: center; margin-bottom: 18px; }
.pips .pip { flex: 1; max-width: 26px; height: 4px; border-radius: 2px; background: var(--border-2); }
.pips .pip.on { background: var(--lime); }

/* min-width 0: fieldsets default to min-width min-content, so a long team
   name made the CARD wider than the viewport and dragged the whole PAGE into
   horizontal overflow (457px doc at 375 vw) — which also aggravates iOS
   Safari's toolbar transitions over the fixed tab bar. */
.mcard { padding: 14px 16px; min-width: 0; }
.mcard.locked { opacity: 0.6; }
.mcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mmeta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); font-family: var(--font-mono); flex: 1; min-width: 0; white-space: nowrap; }
.stad-icon { color: var(--text-4); flex: none; }
.venue { color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mmeta .stad-icon { flex: none; }
.mlock { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); border: 1px solid var(--border-2); border-radius: 999px; padding: 3px 9px; }

.team-side { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-4); margin-bottom: 3px; }

/* Lock In — a slim sticky floater at the bottom on EVERY viewport: a progression
   LINE across the top + "X of N called" over the lock deadline + the Lock In /
   Share actions, always in reach as you scroll the grid (and the dashboard). */
.lockin-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: linear-gradient(to top, var(--canvas) 58%, rgba(11, 12, 15, 0));
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
}
/* A floating rounded pill with a thin lime outline, not an edge-to-edge bar. */
.lockin-row {
  max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 16px;
  background: rgba(20, 22, 27, 0.98);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(194, 255, 31, 0.65); border-radius: 14px;
  padding: 12px 16px;
  transition: border-color 0.2s ease;
}
.lockin-bar.is-full .lockin-row { border-color: var(--lime); }
/* A fully-called, already-saved week doesn't need the bar sitting there — it
   wakes the moment the member edits a pick (matchweek#wakeBar). */
.lockin-bar.is-dormant { display: none; }
/* One notch per match. Each pops as it fills (a spring scale), and when the whole
   week is called the notches close ranks into a solid lime bar — the small,
   unnameable satisfaction. */
.lockin-notches { display: flex; align-items: center; gap: 4px; flex: none; transition: gap 0.25s ease; }
.notch { width: 16px; height: 6px; border-radius: 3px; background: var(--border-2); transform-origin: center; transition: background 0.18s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1); }
.notch.on { background: var(--lime); }
.lockin-bar.is-full .notch { background: var(--lime); }
.lockin-bar.is-full .lockin-notches { gap: 2px; }
@media (prefers-reduced-motion: no-preference) { .notch.on { transform: scaleY(1.28); } }
@media (max-width: 520px) { .notch { width: 10px; } }

.mwprog-count { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 19px; color: var(--text); white-space: nowrap; }
.mwprog-count .lime { color: var(--lime); }
.lockin-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lockin-actions .lockbtn { width: auto; }
.lockin-actions .lockin-share { width: auto; display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; }
/* The dashboard's This-Week preview card (shown once the week is locked/scored)
   keeps its own static count + fill. */
.dash-progress { margin: 0 0 14px; }
.dash-progress .mwprog-count { display: block; font-size: 13px; margin-bottom: 8px; }
.dash-progress .mwprog-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dash-progress .mwprog-fill { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
/* Mobile: a slim single-row pill above the bottom tab bar. Tighter padding, a
   smaller count, and the decorative notch row drops out (the count carries the
   progress) so it never wraps to a second line and eats the screen. */
@media (max-width: 767px) {
  .lockin-bar { bottom: calc(58px + env(safe-area-inset-bottom)); padding: 8px 10px; }
  /* A quiet dark dock, not a glowing pill: opaque (no card bleeding through), no
     lime outline (it read as an alert floating over the card), and the Share
     button drops out (sharing lives on each card). Lime is reserved for the Lock
     in button so exactly one thing pops. */
  .lockin-row {
    flex-wrap: wrap; gap: 8px 10px; padding: 9px 12px; border-radius: 12px;
    background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: rgba(194, 255, 31, 0.4); /* thin lime edge: brand, not alarm */
  }
  .lockin-bar.is-full .lockin-row { border-color: var(--lime); } /* full lime once the week's called */
  /* The progression line comes back on mobile as its own full-width top row,
     each notch stretching to fill — the satisfying part, now the pill's slim
     enough (Share dropped) to carry it without crowding the count + Lock in. */
  .lockin-notches { flex: 1 0 100%; order: -1; gap: 4px; }
  .notch { flex: 1 1 auto; width: auto; }
  .lockin-share { display: none; }
  .mwprog-count { font-size: 14px; }
  .lockin-actions { gap: 6px; }
  .lockin-actions .lockbtn { padding: 9px 16px; font-size: 14px; }
  /* Guest home has no tab bar, so the bar sits FLUSH at the bottom (with its own
     safe-area padding) instead of floating 58px up in empty space. The grid then
     only needs to clear the bar's own height. */
  body:has(main.guest-grid) .lockin-bar { bottom: 0; padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  body:has(main.guest-grid) .picks { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}

/* Dashboard: expand the rest of the week's fixtures */
.fx-rest { display: contents; }
.fx-rest > summary {
  list-style: none; cursor: pointer;
  font-size: 13px; color: var(--text-3); text-align: center;
  padding: 8px 0 2px; margin-top: 4px;
}
.fx-rest > summary::-webkit-details-marker { display: none; }
.fx-rest > summary:hover { color: var(--text-2); }
.fx-rest[open] > summary { color: var(--text-4); }
.fx-rest[open] > summary::after { content: " · hide"; }

/* Flash messages as auto-dismissing toasts */
.toasts {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
  width: min(560px, calc(100% - 32px));
}
/* Mobile nav is taller (wordmark row + league scope row), so drop the toast
   below it instead of overlapping the pills. */
@media (max-width: 767px) { .toasts { top: 112px; } }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-btn); padding: 13px 12px 13px 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); animation: toast-in 0.25s ease;
}
.toast-msg { flex: 1; font-size: 14px; color: var(--text); }
.toast-alert { border-color: #5a2b2b; }
.toast-x {
  flex: none; width: 26px; height: 26px; border: 0; background: none;
  color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.toast-x:hover { color: var(--text); background: var(--surface); }
.toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.is-leaving { transition: none; }
}

/* Interactive Spot On (exact-score call) on the match-picks screen */
.spchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-3); background: none;
  border: 1px dashed var(--border-2); border-radius: 999px; padding: 4px 11px;
  cursor: pointer;
}
.spchip:hover { color: var(--text-2); border-color: var(--text-4); }
.spchip .lime { color: var(--lime); }
.spchip .target-icon { flex: none; }
.spchip.is-open { border-style: solid; border-color: var(--lime); color: var(--text); }

.spoton { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.spoton-board { display: flex; align-items: center; justify-content: center; gap: 10px; }
.spoton-nm { min-width: 42px; text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-2); }
.spoton-x { color: var(--text-4); font-family: var(--font-mono); }
.spoton-note { text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--text-3); margin-top: 10px; }
.spoton-note .lime { color: var(--lime); }
/* The score is the focus: big, bright digits with smaller, quieter +/- controls. */
.spoton .callstep { gap: 6px; }
.spoton .step-btn { width: 38px; height: 38px; font-size: 20px; background: var(--surface); color: var(--text-3); }
.spoton .step-btn:hover { color: var(--text); border-color: var(--text-3); }
.spoton-digit { font-size: 30px; min-width: 30px; color: var(--text); }
/* Narrow phones: tighten the score board so the HOME [− n +] : [− n +] AWAY row
   never runs off the card (long team codes + two steppers is a wide row). */
@media (max-width: 480px) {
  .spoton-board { gap: 5px; }
  .spoton-nm { min-width: 26px; }
  .spoton .callstep { gap: 3px; }
  .spoton .step-btn { width: 34px; height: 34px; font-size: 18px; }
  .spoton-digit { min-width: 26px; }
}

/* Flash the featured pick when its CTA is clicked (on desktop the card is
   already in view, so the click would otherwise do nothing visible). */
@keyframes call-flash { 0%, 100% { box-shadow: none; } 25% { box-shadow: 0 0 0 3px var(--lime); } }
.hero-match:target { animation: call-flash 1.1s ease 2; }
@media (prefers-reduced-motion: reduce) { .hero-match:target { animation: none; } }

/* Share a single Spot On call (shown once an exact score is set) */
.spoton-share {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin: 12px auto 0;
  background: none; border: 1px solid var(--border-2); color: var(--text-2);
  border-radius: var(--radius-btn); padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.spoton-share:hover { color: var(--text); border-color: var(--text-3); }

/* Share the whole matchweek slate */
.spoton-share .share-icon, .lockin-share .share-icon { color: var(--lime); flex: none; }

/* ---------- Pick grid + canonical card ----------
   The pick UI (shared/_matchweek_picks) used by BOTH the matchweek page and the
   home dashboard. Card styles are global (one shared card); the .dash-picks
   wrapper only adds the dashboard's league strip + inline Lock In bar. */
.dash-picks { margin-bottom: 26px; }

/* League switcher on the dashboard — the fix for the missed nav competition chip. */
.leaguebar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; padding-bottom: 2px; }
.leaguebar::-webkit-scrollbar { display: none; }
.leaguebar-tab {
  flex: none; text-decoration: none; white-space: nowrap; line-height: 1;
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 14px;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 9px 16px 8px;
  transition: color 150ms, border-color 150ms, background 150ms;
}
.leaguebar-tab:hover { color: var(--text); border-color: var(--text-4); }
.leaguebar-tab.is-on { background: var(--lime); color: var(--canvas); border-color: var(--lime); }

.dash-picks-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-picks-title { margin: 0; font-family: var(--font-display); text-transform: uppercase; font-size: 24px; letter-spacing: -0.01em; line-height: 1; color: var(--text); }
.dash-picks-sub { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

/* Guest home = the pick grid with a one-strip hero (no big marketing hero; that
   moved to /about). */
.guest-grid .guest-hero { padding: 6px 0 16px; }
.guest-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.guest-eyebrow .lime { color: var(--lime); }
.guest-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 5vw, 44px); line-height: 0.98; letter-spacing: 0.005em; margin: 8px 0; }
.guest-title .lime { color: var(--lime); }
.guest-sub { color: var(--text-2); font-size: 15px; max-width: 62ch; margin: 0; }
/* Trust strip: free / not gambling / shareable, said plainly so a first-timer
   isn't left wondering "is this a betting site?". Scannable pills, not prose. */
.guest-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.guest-trust li { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px 6px 10px; }
.guest-trust .gt-ck { width: 14px; height: 14px; flex: none; color: var(--lime); }

/* the tiled fixture grid: 2-up where it fits, 1-up on mobile */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; margin-bottom: 18px; }
@media (max-width: 520px) { .mgrid { grid-template-columns: 1fr; } }

.mcard { padding: 15px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mcard.is-called { border-color: #3a4a12; }
.mcard-top { display: flex; align-items: center; gap: 10px; }
.mcard-top .mmeta { flex: 1; min-width: 0; }
.mcalled-tag { display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lime); }
.mcard.is-called .mcalled-tag { display: inline; }
.mcard-share { flex: none; background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 4px; display: inline-flex; border-radius: 6px; }
.mcard-share:hover { color: var(--text); }
.mcard-share .share-icon { color: var(--lime); }

.mteams { display: flex; align-items: center; gap: 10px; }
.mteam { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
.mteam.away { flex-direction: row-reverse; }
.mteam .team-crest { width: 30px; height: 30px; margin: 0; }
/* Full name (the decide surface keeps real names, not the 3-letter code that's
   already on the buttons), shrunk and wrapped to at most two lines so long names
   like "Wolverhampton Wanderers" read cleanly instead of ellipsizing. */
.mtn { font-family: var(--font-cond); font-weight: 700; font-size: 17px; line-height: 1.03; color: var(--text); min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mteam.away .mtn { text-align: right; }
.mv { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }

/* sentiment bar: neutral greys, your pick lights lime (lime stays "you") */
.msenti { display: flex; gap: 2px; height: 5px; }
.mseg { border-radius: 2px; background: var(--border-2); }
.mseg[data-seg="home"] { background: #4a4d5a; }
.mseg[data-seg="away"] { background: #3a3d47; }
.mseg.is-you { background: var(--lime); }

.mpicks { display: grid; grid-template-columns: 1fr 0.82fr 1fr; gap: 8px; }
.pk { cursor: pointer; border: 1.5px solid var(--border-2); background: var(--surface-2); color: var(--text-2); border-radius: 10px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; transition: border-color .13s, background .13s, color .13s; }
.pk b { font-family: var(--font-cond); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.pk em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
.pk:hover { border-color: var(--text-4); color: var(--text); }
.pk.is-on { background: var(--lime); border-color: var(--lime); }
.pk.is-on b { color: var(--canvas); }
.pk.is-on em { color: rgba(11, 12, 15, 0.55); }

/* reveal-on-call: disagreement + points + exact score */
.mreveal { display: none; flex-direction: column; gap: 8px; }
.mcard.is-called .mreveal { display: flex; }
.mrev-top { display: flex; align-items: center; gap: 10px; padding-top: 9px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; }
.mdisagree { color: var(--lime); }
.mdisagree b { color: var(--lime); }
.mdisagree.against { color: #d98b3a; }
.mdisagree.against b { color: #d98b3a; }
.mdisagree.split { color: var(--text-2); }
.mdisagree.split b { color: var(--text); }
.mundo { margin-left: auto; background: none; border: 0; color: var(--text-4); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; text-decoration: underline; padding: 0; }
.mundo:hover { color: var(--text-2); }
.mrev-score { display: flex; flex-direction: column; gap: 6px; }
.mes-label { text-align: center; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; color: var(--text-3); }
.mes-label b { color: var(--lime); }
/* The Spot On term as a small inline mark: lime, condensed, and mixed-case on
   purpose so it stands out against surrounding uppercase captions. */
.term-spoton { text-transform: none; color: var(--lime); font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.term-spoton .target-icon { vertical-align: -1px; margin-right: 2px; }
/* Columns mirror .mpicks (1fr 0.82fr 1fr) so each team's stepper lands directly
   under its result button — no doubt who the score is for. */
.mscore-grid { display: grid; grid-template-columns: 1fr 0.82fr 1fr; gap: 8px; align-items: center; }
.mstep { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mpm { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font-family: var(--font-num); font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.mpm:hover { color: var(--text); border-color: var(--text-4); }
.mdig { font-family: var(--font-num); font-weight: 700; font-size: 21px; min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
.mcolon { justify-self: center; font-family: var(--font-mono); font-size: 18px; color: var(--text-4); }
.mcard.is-spot .mes-label { color: var(--text-2); }

/* dashboard tweaks: left-align the lock hint; the Lock In bar is now the global
   sticky floater, and the dashboard scrolls behind it (room reserved on .dash). */
.dash-picks .picks-lock { text-align: left; margin-bottom: 12px; }
.dash { padding-bottom: 92px; }

/* Matchweek strip — browse and jump to any week of the season from the dashboard */
.wkstrip-wrap { margin-bottom: 22px; }
.wkstrip-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.wkstrip-hint { font-size: 12px; color: var(--text-4); }
.wkstrip-rail { display: flex; align-items: stretch; gap: 6px; }
.wkstrip-rail .wkstrip { flex: 1; min-width: 0; }
.wkstrip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.wkstrip::-webkit-scrollbar { display: none; }
.wkstrip-arrow {
  flex: none; width: 34px; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2);
  border-radius: 10px; font-size: 18px; cursor: pointer;
}
.wkstrip-arrow:hover { color: var(--text); border-color: var(--text-3); }
.wkstrip-arrow[hidden] { display: none; }
.wk-chip {
  position: relative;
  flex: none; width: 50px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-3); text-decoration: none;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
}
.wk-chip:hover { color: var(--text); border-color: var(--text-3); }
.wk-chip.is-locked { opacity: 0.5; }
.wk-chip.is-current { border-color: var(--lime); color: var(--text); background: var(--surface-2); }
.wk-chip.is-open { border-color: var(--border-2); }
.wk-chip.is-open .wk-dot { border-color: var(--text-3); }
.wk-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--text-4); box-sizing: border-box; }
.wk-chip.is-partial .wk-dot { background: var(--text-3); border-color: var(--text-3); }
.wk-chip.is-set .wk-dot { background: var(--lime); border-color: var(--lime); }
.wk-chip.is-reviewed { color: var(--text-2); }
/* Reviewed-week glyphs share one mono size so the tally and the sat-out check
   read as the same family. Numerator lime = your correct calls; denominator
   muted = your settled picks. */
.wk-score { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-4); line-height: 1; }
.wk-score b { color: var(--lime); font-weight: 700; }
.wk-score.is-nil b { color: var(--text-4); }      /* rubbish week: don't paint a 0 lime */
.wk-score.is-perfect { color: var(--lime); }        /* final clean sweep: whole tally lime */
.wk-done { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-3); line-height: 1; }
/* In-progress week: a pulsing lime dot in the corner marks the tally as live
   ("so far"); it disappears once every match is settled (final tally). */
.wk-chip.is-live::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
  animation: wk-live-pulse 1.6s ease-in-out infinite;
}
@keyframes wk-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .wk-chip.is-live::after { animation: none; } }

/* Leaderboard — full record table, Premier-League-table columns */

/* Admin: the waitlist. Internal-only, so it stays plain — legible rows, no chrome. */
.adminleads { max-width: 720px; }
.al-head { margin-bottom: 18px; }
.al-title { font-family: var(--font-display); font-size: clamp(34px, 8vw, 52px); line-height: 0.92; letter-spacing: -0.5px; text-transform: uppercase; margin: 8px 0 10px; }
/* Counts lead, in the dashboard's own .rec-stat treatment so this reads as part
   of the same app rather than a bolted-on admin screen. */
.al-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
/* The dashboard's business-at-a-glance metrics (#67). Same visual family as
   the players-page stats, but these deep-link rather than filter-in-place. */
.adash-metrics { margin: 0 0 22px; }
.adash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 6px; }
@media (min-width: 560px) { .adash-grid { grid-template-columns: repeat(4, 1fr); } }
.adash-metric { display: block; text-align: center; padding: 14px 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.adash-metric .num { display: block; font-family: var(--font-num); font-weight: 700; font-size: 30px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.adash-metric span { display: block; margin-top: 7px; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); font-family: var(--font-mono); }
.adash-metric--club .num { color: var(--lime); }
.adash-metric--box .num { color: #a78bfa; }
.adash-foot { margin-top: 6px; }
/* Each stat is a click filter (button reset + pointer). is-on = active filter. */
.al-stat { flex: 1; text-align: center; padding: 12px 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font: inherit; transition: border-color .12s, background .12s; }
.al-stat:hover { border-color: var(--text-3); }
.al-stat b { display: block; font-family: var(--font-num); font-weight: 700; font-size: 26px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.al-stat span { display: block; margin-top: 6px; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); font-family: var(--font-mono); }
.al-stat b { color: var(--text); } /* all stat numbers white by default */
.al-stat.is-junk b { color: #c98; } /* the junk count keeps its amber flag */
/* The ONLY green outline is the active filter — one at a time, on click. No
   stat carries a permanent border. */
.al-stat.is-on { border-color: var(--lime); background: rgba(194, 255, 31, 0.07); }
.al-stat.is-on b { color: var(--lime); }
.al-stat.is-on span { color: var(--text-2); }
.al-stat:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.al-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.al-source { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 12px; letter-spacing: 0.02em; }
.al-source-n { font-family: var(--font-num); color: var(--lime); }

.al-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; }
.al-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--surface); }
.al-row + .al-row { border-top: 1px solid var(--border-2); }
.al-row.is-today { box-shadow: inset 2px 0 0 var(--lime); }
.al-row.is-today .al-email { color: var(--text); font-weight: 600; }
.al-email { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.al-meta { display: flex; align-items: center; gap: 10px; flex: none; color: var(--text-3); font-family: var(--font-mono); font-size: 11px; }
.al-src { padding: 2px 7px; border: 1px solid var(--border-2); border-radius: 999px; }

@media (max-width: 480px) {
  .al-row { flex-direction: column; align-items: flex-start; gap: 5px; }
}

/* Admin users page: the test-account flag + its toggle button. */
.al-test { color: var(--text-3); border-color: var(--border-2); text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; }
.al-row.is-test { opacity: 0.6; }
.al-toggle { background: none; border: 1px solid var(--border-2); border-radius: 999px; padding: 2px 9px; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); cursor: pointer; }
.al-toggle:hover { border-color: var(--lime); color: var(--text); }

/* Admin hub (/admin): a plain link list to every other internal surface. */
.al-hub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.al-hub-link { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; text-decoration: none; transition: border-color 0.15s; }
.al-hub-link:hover { border-color: var(--lime); }
.al-hub-name { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; color: var(--text); }
.al-hub-desc { font-size: 12.5px; color: var(--text-3); }

/* An untouched match locks in as a draw (MatchweeksController#update), so say so
   on the row — but keep it visibly weaker than a deliberate call. A dashed
   outline reads as "this is what you'll get" rather than "this is your pick". */
.mcard.is-default .draw-pill { border-style: dashed; opacity: 0.72; }
/* A non-breaking space, not a plain one: a leading space in `content` collapses.
   The trailing space after \00a0 terminates the hex escape — without it CSS eats
   the "b" as a sixth hex digit and renders U+0A0B. */
.mcard.is-default .draw-pill::after { content: "\00a0 by default"; font-size: 9px; letter-spacing: 0.08em; opacity: 0.75; }
.mcard.is-default:focus-within .draw-pill, .mcard.is-default:hover .draw-pill { opacity: 0.9; }

/* Admin users page reuses the .al-* block; these are the only additions. */
.al-note { font-size: 13px; color: var(--text-3); margin: 6px 0 0; }
.al-testtoggle { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-3); margin: 0 0 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-testtoggle b { color: var(--text-2); font-weight: 700; }
.al-testtoggle b.lime { color: var(--lime); }
.al-xlink { color: var(--text-2); text-decoration: none; border-bottom: 1px solid var(--border-2); }
.al-xlink:hover { color: var(--lime); border-color: var(--lime); }
.al-email .al-name { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }
.al-src.al-idle { color: var(--text-4); border-style: dashed; }
.al-src.al-unverified { color: #c98; border-color: rgba(204, 153, 136, 0.4); text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em; }
.al-row.is-unverified { opacity: 0.62; }
/* A class, not the hidden attribute: .al-row's display:flex overrides
   [hidden]{display:none}, so filtering silently did nothing. */
.al-row.is-filtered { display: none; }

/* Cold-start welcome (#54): a signed-up member with no picks yet. A focused,
   high-pop arrival, not the standing dashboard full of empty cards. */
.welcome { max-width: 620px; }
.welcome-hero { margin: 8px 0 26px; }
.welcome-title { font-family: var(--font-display); font-size: clamp(44px, 13vw, 74px); line-height: 0.9; letter-spacing: -0.5px; text-transform: uppercase; margin: 12px 0 14px; text-wrap: balance; }
.welcome-sub { color: var(--text-2); font-size: 16px; line-height: 1.55; max-width: 40ch; }
.welcome-sub b { color: var(--text); font-weight: 700; }
.welcome-sub b.lime { color: var(--lime); }
.welcome-choose { margin: 0 0 20px; }
/* First card leads: give it the lime edge so the primary move reads instantly. */
.welcome-choose .cg-card:first-child { border-color: rgba(194, 255, 31, 0.4); background: linear-gradient(180deg, rgba(194,255,31,0.05), var(--surface)); }
.welcome-choose .cg-card:first-child .cg-arrow { color: var(--lime); }
.welcome-foot { color: var(--text-3); font-size: 13.5px; line-height: 1.5; }
.welcome-foot b { color: var(--text-2); font-weight: 700; }
.welcome-foot b.lime { color: var(--lime); }

/* Frames the featured card as an example of the mechanic ("one of N — here's how
   easy a call is"), so a single fixture never reads as an arbitrary choice. */

/* Global footer — every page. Quiet, structured, legal links always reachable. */
.site-foot { border-top: 1px solid var(--border); margin-top: 56px; padding: 30px 0 40px; }
.site-foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.site-foot-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.site-foot-tag { font-size: 12.5px; color: var(--text-3); }
.site-foot-links { display: flex; gap: 20px; }
.site-foot-links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); text-decoration: none; }
.site-foot-links a:hover { color: var(--lime); }
.site-foot-legal { flex-basis: 100%; margin: 4px 0 0; font-size: 11px; color: var(--text-4); font-family: var(--font-mono); }
@media (max-width: 560px) { .site-foot-brand { margin-right: 0; flex-basis: 100%; } }

/* Legal + contact pages — readable long-form. */
.legal { max-width: 680px; }
.legal-head { margin-bottom: 26px; }
.legal-title { font-family: var(--font-display); font-size: clamp(38px, 10vw, 56px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.5px; margin: 10px 0 8px; }
.legal-updated { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.legal-body { color: var(--text-2); font-size: 15px; line-height: 1.65; }
.legal-body h2 { font-family: var(--font-cond); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); margin: 28px 0 8px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 14px; padding-left: 20px; }
.legal-body li { margin: 0 0 8px; }
.legal-body b { color: var(--text); font-weight: 700; }
.legal-link { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(194, 255, 31, 0.35); }
.legal-link:hover { border-color: var(--lime); }
.legal-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 14px; }
.legal-contact .contact-email { margin: 20px 0 22px; }

/* Clickwrap consent line under the sign-up / sign-in forms. */
.consent-note { font-size: 12px; line-height: 1.5; color: var(--text-4); margin: 14px 0 0; max-width: 40ch; }
.signup .consent-note { margin-inline: auto; text-align: center; }
.consent-note a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.consent-note a:hover { color: var(--lime); }

/* Weekly-summary opt-in — a card that lights lime the moment it's ticked, so the
   choice reads at a glance. Whole card is the label; native checkbox restyled. */
.optin { display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left; padding: 15px 16px; border: 1px solid var(--border-2); border-radius: 13px; background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; margin: 6px 0 4px; }
.optin:hover { border-color: var(--text-3); }
.optin:has(.optin-input:checked) { border-color: rgba(194, 255, 31, 0.5); background: rgba(194, 255, 31, 0.06); }
.optin-input { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; margin: 1px 0 0; border: 1.5px solid var(--border-2); border-radius: 999px; background: var(--surface-2); cursor: pointer; position: relative; transition: background .15s, border-color .15s; }
.optin-input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s; }
.optin-input:checked { background: var(--lime); border-color: var(--lime); }
.optin-input:checked::after { transform: translateX(18px); background: #10140a; }
.optin-input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.optin-copy { display: flex; flex-direction: column; gap: 3px; }
.optin-title { font-family: var(--font-cond); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.optin-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-4); border: 1px solid var(--border-2); border-radius: 999px; padding: 2px 7px; font-weight: 400; }
.optin-sub { font-size: 13px; line-height: 1.5; color: var(--text-3); }
.acct-prefs-hint { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }

/* ---- Predictor Crest ---------------------------------------------------- */
.crest-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.crest { display: block; margin: 0; }
.crest-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.6)); }
.crest-arc { font-family: var(--font-num), "Arial Narrow", sans-serif; }

.crestpage { max-width: 920px; margin: 0 auto; padding: 12px 16px 72px; text-align: center; }
.crestpage-head { max-width: 46ch; margin: 0 auto 26px; }
.crestpage-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin: 0 0 14px; }
.crestpage-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 7.5vw, 54px); line-height: 0.94; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 14px; }
.crestpage-lede { color: var(--text-2); font-size: clamp(15px, 2.2vw, 17px); line-height: 1.5; margin: 0 auto; max-width: 44ch; }

.crestpage-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 8px auto 0; }
.crest-halo { position: relative; width: min(360px, 86vw); margin: 0 auto; flex: none; }
.crest-halo::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 128%; aspect-ratio: 1; background: radial-gradient(circle, var(--crest-glow, transparent) 0%, transparent 60%); pointer-events: none; }
.crest-halo > * { position: relative; }
.crest-halo { display: flex; flex-direction: column; align-items: center; }
/* Scope switcher (Global / league) — the top-level PAR toggle, above each
   scope's own Numbers/Radar flip. A column of: tabs, then the active panel. */
.crest-scopes { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.crest-scope-tabs { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin: 0 auto 6px; flex-wrap: wrap; justify-content: center; }
.crest-scope-tab { font-family: var(--font-cond); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); background: none; border: 0; border-radius: 999px; padding: 7px 18px; cursor: pointer; }
.crest-scope-tab.is-on { background: var(--lime); color: #0B0C0F; }
.crest-scope-tab:hover:not(.is-on) { color: var(--text); }
.crest-scope-panel { width: 100%; }
.crest-scope-panel[hidden] { display: none; }

.crest-flip-tabs { display: inline-flex; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin: 0 0 14px; }
.crest-flip-tab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); background: none; border: 0; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.crest-flip-tab.is-on { background: var(--lime); color: #0B0C0F; font-weight: 700; }
.crest-flip-tab:hover:not(.is-on) { color: var(--text-2); }
.crest-face { width: 100%; }
.crest-face[hidden] { display: none; }
@media (min-width: 800px) {
  .crestpage-stage { flex-direction: row; justify-content: center; align-items: center; gap: 48px; }
  .crest-verdict { margin: 0; text-align: left; max-width: 300px; }
  .cv-tier { justify-content: flex-start; }
}

.crest-verdict { margin: 16px auto 0; max-width: 42ch; }
.cv-tier { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 27px; line-height: 1; margin: 0 0 8px; display: flex; gap: 14px; align-items: baseline; justify-content: center; }
.cv-ovr { color: var(--text); } .cv-ovr small { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); font-weight: 400; }
.cv-metal--gold { color: #e2c264; } .cv-metal--silver { color: #cbd2d9; } .cv-metal--bronze { color: #cf9256; } .cv-metal--slate { color: #9aa2ab; } .cv-metal--special { color: var(--lime); }
.cv-line { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.cv-btn { display: inline-block; background: var(--lime); color: #0B0C0F; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 15px; padding: 11px 22px; border-radius: 999px; text-decoration: none; }
.cv-btn:hover { filter: brightness(1.06); }

.crest-trend-wrap { margin: 48px auto 0; max-width: 600px; }
.crest-trend { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 4px; }
.ct-bar { flex: 1; max-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ct-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ct-track { width: 100%; height: 104px; display: flex; align-items: flex-end; }
.ct-fill { width: 100%; background: linear-gradient(180deg, var(--lime), #6f9e00); border-radius: 4px 4px 0 0; min-height: 3px; }
.ct-wk { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }

.crest-ladder-wrap { margin: 48px auto 0; }
.crest-sec-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); margin: 0 0 16px; }
.crest-sec-label--lime { color: var(--lime); }
/* Section heading matched to the verdict's "Your crest is forming" line. */
.crest-sec-head { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 27px; line-height: 1; color: var(--text); margin: 0 0 16px; }
.crest-ladder { display: flex; gap: 8px; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 640px; margin: 0 auto; }
.rung { position: relative; flex: 1 1 100px; min-width: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 8px 14px; opacity: 0.9; transition: transform 0.15s ease, border-color 0.15s ease; }
.rung.is-current { opacity: 1; border-color: var(--text-4); transform: translateY(-6px); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.85); }
.rung-medal { display: block; width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 11px; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 3px 9px -2px rgba(0, 0, 0, 0.65); }
.rung--slate .rung-medal { background: linear-gradient(155deg, #7a7e62, #333727); }
.rung--bronze .rung-medal { background: linear-gradient(155deg, #efc194, #8f5b2c); }
.rung--silver .rung-medal { background: linear-gradient(155deg, #f4f7fa, #929aa3); }
.rung--gold .rung-medal { background: linear-gradient(155deg, #f9e7a2, #b18628); }
.rung--special .rung-medal { background: linear-gradient(155deg, #eaffa6, #83c30d); }
.rung.is-current .rung-medal { width: 44px; height: 44px; margin-bottom: 12px; }
.rung--gold.is-current .rung-medal { box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.45), 0 0 20px -2px rgba(233, 196, 106, 0.65); }
.rung--special.is-current .rung-medal { box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), 0 0 22px -2px rgba(194, 255, 31, 0.7); }
.rung--silver.is-current .rung-medal { box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.45), 0 0 20px -3px rgba(203, 210, 217, 0.6); }
.rung--bronze.is-current .rung-medal { box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 20px -3px rgba(207, 146, 86, 0.6); }
.rung-name { display: block; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 16px; line-height: 1; }
.rung-band { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--lime); margin-top: 5px; }
.rung-you { display: inline-block; margin-top: 9px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0B0C0F; background: var(--lime); border-radius: 999px; padding: 2px 8px; }
.crest-ladder-note { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-3); margin: 18px 0 0; }

.crestpage-key { margin: 48px auto 0; max-width: 620px; }
.crest-key-lead { max-width: 46ch; margin: 0 auto 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.crest-key-lead .lime { color: var(--lime); }
.crest-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; text-align: left; }
.ck-row { display: flex; gap: 14px; align-items: baseline; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.ck-ab { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--lime); width: 36px; flex: none; }
.ck-txt { min-width: 0; }
.ck-nm { display: block; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 1.1; }
.ck-ds { display: block; color: var(--text-3); font-size: 13px; margin-top: 3px; line-height: 1.35; }
/* "crest is live" reveal moment */
.crest-reveal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center;
  background: radial-gradient(circle at 50% 42%, var(--crest-glow, transparent) 0%, rgba(11, 12, 15, 0.95) 56%), rgba(11, 12, 15, 0.96);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: crestRevealIn 0.35s ease both; }
.crest-reveal-card { max-width: 440px; }
.cr-kick { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); margin: 0 0 10px; }
.cr-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 11vw, 62px); line-height: 0.92; text-transform: uppercase; margin: 0 0 22px; }
.cr-badge { width: 148px; margin: 0 auto 18px; animation: crestBadgePop 0.5s 0.12s both cubic-bezier(0.22, 1.2, 0.36, 1); }
.cr-badge .crest-mini-svg { width: 148px; height: 148px; }
.cr-verdict { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 24px; margin: 0 0 24px; }
.cr-verdict b { color: var(--text); }
.cr-btn { display: inline-block; background: var(--lime); color: #0B0C0F; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 16px; padding: 13px 26px; border-radius: 999px; text-decoration: none; }
.cr-btn:hover { filter: brightness(1.06); }
@keyframes crestRevealIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes crestBadgePop { from { transform: scale(0.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .crest-reveal, .cr-badge { animation: none; } }

/* tasteful entrance motion for the crest page (reduced-motion opts out) */
@media (prefers-reduced-motion: no-preference) {
  .crest-halo { animation: crestRise 0.6s cubic-bezier(0.2, 1, 0.36, 1) both; }
  @keyframes crestRise { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
  .ct-fill { animation: ctGrow 0.7s cubic-bezier(0.2, 1, 0.36, 1) both; transform-origin: bottom; }
  @keyframes ctGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

.crest-account { margin: 40px 0 0; }
.crest-account a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-3); text-decoration: none; }
.crest-account a:hover { color: var(--text-2); }

.crest-mini { margin: 0; flex: none; }
.crest-mini-svg { width: 82px; height: 82px; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }

/* Dashboard PAR showpiece — the trophy card. A tier-tinted glow, the acronym
   spelled out with its P·A·R initials lit, and the tier-metal roundel anchoring
   it. --par-glow is set inline per tier. */
.par-hero { position: relative; overflow: hidden; display: block; text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.par-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(135% 100% at 16% -15%, var(--par-glow, transparent), transparent 60%); opacity: 0.3; pointer-events: none; }
.par-hero:hover { border-color: var(--border-2); }
.par-hero > * { position: relative; }
.par-hero-eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin: 0 0 14px; }
.par-hero-body { display: flex; align-items: center; gap: 18px; }
.par-hero-badge { flex: none; }
.par-hero-badge .crest-mini-svg { width: 100px; height: 100px; }
.par-hero-copy { min-width: 0; }
.par-hero-expand { font-family: var(--font-cond); font-weight: 800; font-size: 27px; line-height: 1; letter-spacing: 0.005em; color: var(--text); margin: 0 0 9px; text-wrap: balance; }
.par-hero-expand .lime { color: var(--lime); }
.par-hero-line { font-size: 13.5px; color: var(--text-2); margin: 0 0 12px; line-height: 1.4; }
.par-hero-line .cv-metal { font-family: var(--font-cond); font-weight: 800; text-transform: uppercase; }
.par-hero-cta { display: inline-block; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; color: var(--lime); }

.crest-new { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0B0C0F; background: var(--lime); border-radius: 999px; padding: 2px 6px; vertical-align: middle; }

/* account page → crest link */
/* The PAR doorway: badge-first, lime-washed, with the acronym spelled out.
   Forming state leads with the ghost coin (the boards' future language). */
.acct-par-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); margin: 0 0 16px; border-color: rgba(194, 255, 31, 0.28); background: linear-gradient(135deg, rgba(194, 255, 31, 0.06), rgba(194, 255, 31, 0.01) 60%); }
.acct-par-card:hover { border-color: rgba(194, 255, 31, 0.55); }
.apc-coin { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-weight: 700; font-size: 17px; color: var(--text-2); }
.apc-coin--ghost { border-style: dashed; color: var(--text-3); }
.apc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.apc-title { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 19px; line-height: 1.1; }
.apc-parword { color: var(--lime); }
.apc-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.apc-sub b { color: var(--lime); font-weight: 700; }
.apc-state { font-size: 13px; color: var(--text-2); }
.acct-crest-card-arrow { color: var(--text-3); font-size: 18px; }

/* account coin — filled with the member's global tier, initial in tier ink */
.nav-avatar--gold, .tab-avatar--gold { background: linear-gradient(155deg, #f7e39a, #b9902f); color: #2e2205; border-color: #8a6b22; }
.nav-avatar--silver, .tab-avatar--silver { background: linear-gradient(155deg, #eef2f6, #9aa2ab); color: #1f242b; border-color: #7d848c; }
.nav-avatar--bronze, .tab-avatar--bronze { background: linear-gradient(155deg, #e6b483, #9a6533); color: #3a2506; border-color: #7a4e28; }
.nav-avatar--special, .tab-avatar--special { background: linear-gradient(155deg, #e8ff9e, #8bcb10); color: #12200a; border-color: #6f9e00; box-shadow: 0 0 12px -3px rgba(194, 255, 31, 0.55); }
.nav-avatar--slate, .tab-avatar--slate { background: linear-gradient(155deg, #6b6f55, #333727); color: #e6ead8; border-color: #4a4e39; }
/* The founder's ring: the one always-on status signal — a quiet lime halo
   around the avatar coin on every page, wordless. Outline (not box-shadow)
   so it composes with any PAR-tier fill, including --special's glow. */
.nav-avatar.is-founding, .tab-avatar.is-founding { outline: 1.5px solid rgba(194, 255, 31, 0.75); outline-offset: 2px; }
.nav-avatar--provisional, .tab-avatar--provisional { border-color: var(--border-2); color: var(--text-3); }

/* "Your Crest" in the account menu */
.acct-crest { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acct-crest-ovr { font-family: var(--font-num); font-weight: 800; font-size: 13px; padding: 1px 8px; border-radius: 999px; line-height: 1.5; }
.acct-crest-ovr--gold { color: #f7e39c; background: rgba(226, 194, 100, 0.14); }
.acct-crest-ovr--silver { color: #eef2f6; background: rgba(203, 210, 217, 0.14); }
.acct-crest-ovr--bronze { color: #e6b483; background: rgba(207, 146, 86, 0.14); }
.acct-crest-ovr--special { color: var(--lime); background: rgba(194, 255, 31, 0.14); }
.acct-crest-ovr--slate { color: #c9cebc; background: rgba(120, 124, 98, 0.14); }

/* guest landing crest pitch */

/* Global board — your standing pin + pager (leaderboard paging) */
.lb-you-strip { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(194, 255, 31, 0.4); border-left: 3px solid var(--lime); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: linear-gradient(90deg, rgba(194, 255, 31, 0.08), var(--surface) 55%); }
.lb-you-rank { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: var(--lime); min-width: 2.2em; }
.lb-you-label { font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 15px; }
.lb-you-of { opacity: 0.55; font-weight: 600; }
.lb-you-pts { margin-left: auto; font-family: var(--font-num); font-weight: 700; font-size: 18px; }
.lb-you-pts small { font-size: 11px; opacity: 0.55; font-weight: 600; }

.lb-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; }
.lb-pager-at { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; opacity: 0.7; }
.lb-pager-btn.is-disabled { opacity: 0.4; pointer-events: none; }