/* ═══════════════════════════════════════════════════════════════════════
   FANTASYV3 — SHARED CHROME (background + pointer only)
   For pages OUTSIDE the league app shell: create-league, the setup wizard,
   and anything else that should feel like the launch site.

   Scoped under html.fs-v3 so it can never touch a page that hasn't opted in.

   This is deliberately NOT css/ff_night.css. That file is a full skin — it
   restyles cards, tables, forms and every Bootstrap surface. The setup pages
   have their own considered card/form design (white cards, light inputs);
   dropping the whole skin on them would half-restyle those and look broken.
   Here we change only the two things asked for: the ground and the cursor.

   NOTE: the aurora below intentionally mirrors the one in ff_night.css. Keep
   the palettes in step if you change either — they are separate so that the
   app skin and these standalone pages can never break each other.
   ═══════════════════════════════════════════════════════════════════════ */

html.fs-v3 {
  --v3-void:   #04060C;
  --v3-cyan:   #56DCFF;
  --v3-blue:   #2E8BFF;
  --v3-deep:   #094F90;
  color-scheme: dark;
  background: var(--v3-void);
}

/* The page's own background must step aside or the sky is invisible. */
html.fs-v3 body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ══ AURORA ═════════════════════════════════════════════════════════════
   Three oversized radial gradients drifting on transform only — compositor
   work, no per-frame JavaScript. Injected by js/ff_v3_chrome.js. */
html.fs-v3 #fsNightSky {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: var(--v3-void);
}
html.fs-v3 #fsNightSky .fsSky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 78% at 50% -6%, rgba(9,79,144,.34) 0%, transparent 62%),
    radial-gradient(90% 60% at 88% 100%, rgba(46,139,255,.13) 0%, transparent 62%);
}
html.fs-v3 #fsNightSky .fsSky > i {
  position: absolute; display: block; border-radius: 50%; opacity: .55;
}
html.fs-v3 #fsNightSky .fsA1 {
  width: 85vw; height: 85vw; left: -22vw; top: -34vw;
  background: radial-gradient(circle closest-side,
    color-mix(in srgb, var(--v3-deep) 70%, var(--v3-blue)) 0%, transparent 72%);
  animation: v3Aur1 38s ease-in-out infinite alternate;
}
html.fs-v3 #fsNightSky .fsA2 {
  width: 70vw; height: 70vw; right: -20vw; top: -12vw;
  background: radial-gradient(circle closest-side, rgba(86,220,255,.55) 0%, transparent 70%);
  animation: v3Aur2 46s ease-in-out infinite alternate;
}
html.fs-v3 #fsNightSky .fsA3 {
  width: 95vw; height: 95vw; left: 8vw; bottom: -52vw;
  background: radial-gradient(circle closest-side, rgba(46,139,255,.40) 0%, transparent 72%);
  animation: v3Aur3 54s ease-in-out infinite alternate;
}
@keyframes v3Aur1 { to { transform: translate3d(14vw, 8vh, 0) scale(1.18); } }
@keyframes v3Aur2 { to { transform: translate3d(-16vw, 12vh, 0) scale(1.25); } }
@keyframes v3Aur3 { to { transform: translate3d(-10vw, -10vh, 0) scale(1.12); } }

/* Grid + scanline, masked to fade at the edges; vignette on its own layer so
   the mask can't erase it exactly where it does its work. */
html.fs-v3 #fsNightSky::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(90deg,  rgba(140,190,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(180deg, rgba(140,190,255,.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.013) 0 1px, transparent 1px 3px);
  -webkit-mask-image: radial-gradient(115% 95% at 50% 38%, #000 25%, transparent 82%);
          mask-image: radial-gradient(115% 95% at 50% 38%, #000 25%, transparent 82%);
}
html.fs-v3 #fsNightSky::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(120% 100% at 50% 45%, transparent 40%, rgba(4,6,12,.72) 100%);
}

/* ══ CURSOR ═════════════════════════════════════════════════════════════ */
html.fs-v3 .fs-cur,
html.fs-v3 .fs-cur-ring {
  position: fixed; top: 0; left: 0; z-index: 2000;
  pointer-events: none; border-radius: 50%;
  opacity: 0; transition: opacity .25s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
html.fs-v3 .fs-cur {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: #fff; box-shadow: 0 0 8px -1px rgba(120,225,255,.9);
}
html.fs-v3 .fs-cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(255,255,255,.55);
}
html.fs-v3.fs-cursor-on .fs-cur,
html.fs-v3.fs-cursor-on .fs-cur-ring { opacity: 1; }

html.fs-v3.fs-cursor-on,
html.fs-v3.fs-cursor-on a,
html.fs-v3.fs-cursor-on button,
html.fs-v3.fs-cursor-on .sport-btn,
html.fs-v3.fs-cursor-on .type-card { cursor: none; }

/* Give the native pointer back where an I-beam or a drag affordance genuinely
   matters — these are data-entry pages, not a landing page.
   Kept deliberately NARROW: `cursor:none` only hides the OS pointer, it does
   not hide the dot and ring. So every element listed here shows BOTH cursors
   at once. `table` and `label` were in this list and had to come out — the
   draft board is a table, which meant a doubled pointer across the whole
   board. Text selection still works fine without an I-beam. */
html.fs-v3.fs-cursor-on input,
html.fs-v3.fs-cursor-on textarea,
html.fs-v3.fs-cursor-on select,
html.fs-v3.fs-cursor-on [contenteditable],
html.fs-v3.fs-cursor-on [draggable="true"] { cursor: auto; }

@media (pointer: coarse) {
  html.fs-v3 .fs-cur, html.fs-v3 .fs-cur-ring { display: none; }
  html.fs-v3.fs-cursor-on, html.fs-v3.fs-cursor-on * { cursor: auto; }
}

/* ══ BRAND LOCKUP ═══════════════════════════════════════════════════════
   The wordmark ships with its own dark ground baked in, so it sits on the
   night background without a plate behind it. */
html.fs-v3 .v3-logo { display: inline-block; line-height: 0; }
html.fs-v3 .v3-logo img {
  height: 44px; width: auto; max-width: 100%;
  vertical-align: middle;
  /* Drops the wordmark's baked-in dark plate against the night ground. Safe
     here because every surface it sits on is dark; on a light background it
     would wash out. */
  mix-blend-mode: screen;
}
@media (max-width: 640px) { html.fs-v3 .v3-logo img { height: 34px; } }

@media (prefers-reduced-motion: reduce) {
  html.fs-v3 *, html.fs-v3 *::before, html.fs-v3 *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}