/* ============================================================
   momentum.css — the shared design system for the "Comeback Betting"
   site (static/). Every page loads this first and
   layers page-specific styles on top.

   The three comeback stages ARE the brand: each owns a color,
   and the signature gradient runs through them in stage order —
   brewing (cyan) → gaining (amber) → verge (rose). Gold is
   reserved for winners and "prime setup" games (home + primetime),
   so it always signals "this is the special thing on the page".
   ============================================================ */

:root {
  --bg:      #05060f;
  --bg-2:    #0a0d1f;
  --glass:   rgba(255,255,255,0.045);
  --glass-2: rgba(255,255,255,0.085);
  --line:    rgba(255,255,255,0.09);
  --line-2:  rgba(255,255,255,0.17);
  --text:    #eef0ff;
  --muted:   #8b91b5;

  /* the stage ladder */
  --brew:  #4cc2ff;
  --gain:  #ffb224;
  --verge: #ff3d68;

  /* winners + prime setups */
  --gold:      #f7c948;
  --gold-soft: rgba(247,201,72,0.14);
  --gold-line: rgba(247,201,72,0.42);

  /* comeback-quality signals */
  --home:  #2fd48f;
  --prime: #a78bfa;

  --grad-brand: linear-gradient(90deg, #4cc2ff, #a78bfa 45%, #ff3d68 78%, #ffb224);
  --grad-stage: linear-gradient(90deg, var(--brew), var(--gain) 55%, var(--verge));

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius: 18px;
}

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

html { background: var(--bg); scroll-behavior: smooth; }

body {
  /* body stays transparent so the fixed FX canvas + aurora orbs
     (z-index -1) show through everywhere */
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* slow-drifting aurora orbs behind everything — pure CSS so every
   page gets them for free, even if the JS never runs */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -2;
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
body::before {
  top: -22vw; right: -18vw;
  background: radial-gradient(circle at 40% 60%, rgba(167,139,250,0.20), rgba(255,61,104,0.10) 55%, transparent 72%);
  animation: orbA 26s ease-in-out infinite alternate;
}
body::after {
  bottom: -26vw; left: -20vw;
  background: radial-gradient(circle at 60% 40%, rgba(76,194,255,0.16), rgba(47,212,143,0.07) 55%, transparent 72%);
  animation: orbB 32s ease-in-out infinite alternate;
}
@keyframes orbA { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vw, 6vh) scale(1.12); } }
@keyframes orbB { from { transform: translate(0,0) scale(1.08); } to { transform: translate(6vw, -5vh) scale(1); } }

#fx {  /* particle canvas injected by momentum.js */
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
}

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brew); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(167,139,250,0.35); }

/* Server-rendered crawl baseline (AUDIT-0012): what search/social/LLM crawlers
   and no-JS visitors see; the page's JS replaces it on first paint. */
.ssr { max-width: 1160px; margin: 0 auto; padding: 8px clamp(16px,4vw,40px) 44px; }
.ssr h2 { font-family: var(--font-display); font-size: clamp(20px,3vw,26px); font-weight: 700; color: var(--text); margin-bottom: 14px; letter-spacing: -0.01em; }
.ssr ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ssr li { padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.03); font-size: 14px; color: #c3c8e8; }
.ssr li b { color: var(--text); }
.ssr a { color: inherit; text-decoration: none; }
.ssr a:hover { text-decoration: underline; }
.ssr p { font-size: 14px; line-height: 1.65; max-width: 70ch; color: #c3c8e8; margin-top: 6px; }

/* Skip link (a11y): hidden until a keyboard user tabs to it (it's the first
   focusable element), then it drops into view so they can jump past the fixed
   nav + hero straight to <main>. */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  padding: 10px 16px; border-radius: 10px;
  background: var(--text); color: var(--bg);
  font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--brew); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 99px; border: 2px solid var(--bg); }

.mwrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ============================================================
   Nav — fixed glass bar, injected by momentum.js on every page
   ============================================================ */
.mnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(5,6,15,0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.mnav-inner {
  max-width: 1160px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand .mark { width: 30px; height: 30px; display: block; filter: drop-shadow(0 0 10px rgba(167,139,250,0.45)); }
.brand .wordmark {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; letter-spacing: 0.22em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mnav-links { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mlink {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted); text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.mlink:hover { color: var(--text); background: var(--glass-2); }
.mlink.on { color: var(--text); background: var(--glass-2); box-shadow: inset 0 -2px 0 0 var(--verge); }
.mlink .pill {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: #120b02; background: linear-gradient(180deg, #ffe08a, var(--gold));
  padding: 1px 7px; border-radius: 999px;
}
.mcta {
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  color: #fff; white-space: nowrap;
  background: linear-gradient(120deg, #ff3d68, #a05bff);
  padding: 9px 16px; border-radius: 999px; margin-left: 6px;
  box-shadow: 0 4px 18px rgba(255,61,104,0.35);
  transition: transform .15s, box-shadow .15s;
}
.mcta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,61,104,0.5); }

/* The links + CTA stop fitting beside the wordmark well above phone widths —
   the rail used to overflow with `overflow-x: visible` and no scroll, which put
   "Get Alerts" off-screen and genuinely unreachable between ~640 and ~900px.
   A hidden wordmark is a far smaller loss than an unreachable CTA, so drop to
   the mark alone here and let the rail swipe. The threshold is set for the
   longest brand string the nav carries, not the shortest. */
@media (max-width: 900px) {
  .brand .wordmark { display: none; }   /* the mark alone reads fine here */
  .mnav-links { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 0; }
  .mnav-links::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
  .mnav-inner { height: 58px; }
  .mlink { padding: 8px 10px; font-size: 12px; }
  .mcta { padding: 8px 12px; font-size: 12px; }
}

/* every page's content starts below the fixed nav */
.mpage { padding-top: 64px; }
@media (max-width: 640px) { .mpage { padding-top: 58px; } }

/* ============================================================
   Hero — cinematic backdrop image fading into the page
   ============================================================ */
.mhero {
  position: relative;
  background-color: var(--bg-2);
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
  perspective: 900px;   /* gives the parallax art layer real 3D depth */
}
.mhero-art {
  /* the backdrop, re-homed onto its own layer by momentum.js so it can
     tilt and drift in 3D; oversized so edges never peek in while moving */
  position: absolute; inset: -7%;
  z-index: 0;
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
  transform: scale(1.06);
}
video.mhero-art {
  /* the Higgsfield-animated backdrop (data-video heroes): same layer, same
     framing as the still it animates — width/height make the oversized inset
     box concrete so object-fit can cover it */
  width: 114%; height: 114%;
  object-fit: cover;
  object-position: center 30%;
}
.mhero[data-art] {
  /* generative heroes (heroart.js): pure page-black canvas scenes — no
     backdrop still, no video loop. Grid-centering the inner block gives
     the scene room to breathe without touching any page's inner markup. */
  background-color: var(--bg);
  display: grid;
  align-items: center;
  min-height: clamp(330px, 46vh, 560px);
}
.mhero[data-art]::after {
  /* the photo-melt seam is far too heavy for scenes that manage their own
     darkness — a whisper up top, clear through the body, and the melt into
     the page confined to the bottom quarter */
  background: linear-gradient(180deg,
    rgba(5,6,15,0.28), rgba(5,6,15,0.02) 30%,
    rgba(5,6,15,0.02) 72%, var(--bg) 98%);
}
.mhero-canvas {
  position: absolute; inset: 0;
  z-index: 0;
}
.mhero::after {   /* seam: melt the artwork into the page background */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,15,0.55), rgba(5,6,15,0.25) 45%, var(--bg) 96%);
  pointer-events: none;
}
.mhero-inner {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  /* deep bottom padding: pages dock a panel over the hero seam (-34px),
     so the content needs clearance under the tagline */
  padding: clamp(40px, 7vw, 84px) clamp(16px, 4vw, 40px) clamp(64px, 9vw, 92px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text);
  background: rgba(5,6,15,0.5);
  border: 1px solid var(--line-2);
  padding: 7px 14px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.eyebrow .zap { color: var(--gain); }
.mhero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.02;
  margin-top: 20px;
  text-wrap: balance;
}
.mhero h1 .grad {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mhero .tagline {
  color: #c3c8e8;
  font-size: clamp(14px, 1.8vw, 17px); font-weight: 500;
  margin-top: 16px; max-width: 62ch;
  text-shadow: 0 1px 12px rgba(5,6,15,0.8);
}
.mhero .tagline b { color: var(--text); font-weight: 700; }

/* ============================================================
   Shared components
   ============================================================ */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip[aria-pressed="true"] {
  color: var(--text); background: var(--glass-2); border-color: var(--line-2);
  box-shadow: 0 0 0 1px var(--line-2), 0 0 18px rgba(167,139,250,0.15);
}
.chip .n {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--muted); background: rgba(255,255,255,0.07);
  padding: 1px 7px; border-radius: 999px;
}
/* signal-filter variants tint when active so the rail itself teaches
   the color language: emerald = home, violet = primetime, pink = favorite */
.chip.f-home[aria-pressed="true"]  { color: var(--home);  border-color: color-mix(in srgb, var(--home) 55%, transparent);  box-shadow: 0 0 18px color-mix(in srgb, var(--home) 25%, transparent); }
.chip.f-prime[aria-pressed="true"] { color: var(--prime); border-color: color-mix(in srgb, var(--prime) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--prime) 25%, transparent); }
.chip.f-star[aria-pressed="true"]  { color: var(--gold);  border-color: var(--gold-line); box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 30%, transparent); }
.chip.f-fav[aria-pressed="true"]   { color: var(--verge); border-color: color-mix(in srgb, var(--verge) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--verge) 25%, transparent); }

/* signal badges on cards */
.sig {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent);
  color: var(--sc);
  background: color-mix(in srgb, var(--sc) 12%, transparent);
}
.sig.home  { --sc: var(--home); }
.sig.prime { --sc: var(--prime); }
.sig svg { width: 12px; height: 12px; flex: none; }

/* "prime setup" — home AND primetime. Gold, animated shine, unmissable. */
.sig-star {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  color: #171001;
  background: linear-gradient(120deg, #ffe08a, var(--gold) 55%, #e0a72e);
  border: 1px solid #ffdf83;
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 0 18px rgba(247,201,72,0.5);
}
.sig-star::after {  /* light sweep every few seconds */
  content: "";
  position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.sig-star svg { width: 12px; height: 12px; flex: none; }

.sport-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  color: var(--text);
  background: var(--glass-2);
  border: 1px solid var(--line-2);
  padding: 12px 20px; border-radius: 999px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--muted); transform: translateY(-1px); }
.btn-grad {
  color: #fff; border: none;
  background: linear-gradient(120deg, #ff3d68, #a05bff);
  box-shadow: 0 4px 20px rgba(255,61,104,0.35);
}
.btn-grad:hover { box-shadow: 0 8px 28px rgba(255,61,104,0.5); }

/* notices + empty states */
.notice {
  background: var(--glass); border: 1px solid var(--line);
  border-left: 3px solid var(--gain); border-radius: 12px;
  padding: 14px 18px; font-size: 14px; margin-bottom: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.notice b { font-weight: 700; }
.notice button {
  margin-left: 10px; font-size: 12px; font-weight: 700;
  color: var(--text); background: var(--glass-2);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 12px;
}
.empty {
  background: var(--glass); border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 48px 28px; text-align: center; color: var(--muted); font-size: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.empty b { color: var(--text); font-family: var(--font-display); font-weight: 700; display: block; font-size: 19px; margin-bottom: 8px; letter-spacing: -0.01em; }
.empty .pulse-line { width: 130px; height: 34px; margin: 0 auto 18px; display: block; }
.empty .pulse-line path {
  fill: none; stroke: url(#emptyGrad); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 220; stroke-dashoffset: 220;
  animation: dash 3s ease-in-out infinite;
}
@keyframes dash { 0% { stroke-dashoffset: 220; } 55%, 100% { stroke-dashoffset: -220; } }
.empty .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* footer */
.mfoot {
  max-width: 1160px; margin: 56px auto 0;
  padding: 26px clamp(16px, 4vw, 40px) 40px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px; letter-spacing: 0.02em;
  text-align: center; line-height: 1.8;
}
.mfoot .fbrand {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2em; font-size: 12px;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mfoot .disclaim { display: block; margin-top: 4px; opacity: 0.8; }
.mfoot .flinks { display: block; margin-top: 10px; font-weight: 600; }
.mfoot .flinks a { color: var(--text); text-decoration: none; opacity: 0.85; }
.mfoot .flinks a:hover { opacity: 1; text-decoration: underline; }

/* cookie notice (essential-cookie disclosure, not a consent gate) */
.mcookie {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
  width: min(680px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(12, 14, 26, 0.92); backdrop-filter: blur(10px);
  color: var(--muted); font-size: 13px; line-height: 1.5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.mcookie a { color: var(--text); font-weight: 600; }
.mcookie-ok {
  flex: none; cursor: pointer; border: 0; border-radius: 9px;
  padding: 8px 16px; font-weight: 700; font-size: 13px;
  background: var(--grad-brand); color: #05060f;
}
@media (prefers-reduced-motion: reduce) { .mcookie { backdrop-filter: none; } }

/* motion hygiene */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}