/* ═══════════════════════════════════════════
   WORLD CUP EVENT SKIN — Phase 0: Foundation
   ───────────────────────────────────────────
   A date-gated visual overlay layered OVER the base dark/light theme.
   Everything here is scoped under [data-event="worldcup"] so the file is
   completely inert until the gate (see index.html) sets that attribute.

   FIFA tricolor identity (from share-card.html .wc-promo):
     green #3CAC3B → blue #2A398D → red #E61D25.  No gold.
   CTAs use the FULL gradient, not a single shade. Body type stays Barlow.

   Cascade note: this stylesheet must load AFTER theme.css. The token block
   below has the same specificity as theme.css's :root / [data-theme="light"]
   (one selector each), so source order is what makes it win.

   Build order: Phase 0 here = tokens + reusable primitives. Later phases
   (splash, chrome, SureBOOM, matches, …) append their per-page blocks below.
   ═══════════════════════════════════════════ */

/* ═══════ 1. TOKEN LAYER ═══════
   Remaps the base accent tokens to the tournament palette so every existing
   component inherits the World Cup look for free, plus adds tricolor gradient
   tokens for the primitives below. Applies to both dark and light. */
[data-event="worldcup"] {
  /* Palette */
  --wc-green: #3CAC3B;
  --wc-blue:  #2A398D;        /* deep navy — kept for shadows/depth */
  --wc-blue-vivid: #3350D6;   /* luminous blue — gradient middle, pops on dark */
  --wc-red:   #E61D25;
  --wc-lgray: #D1D4D1;
  --wc-dgray: #474A4A;

  --wc-orange: #D9763A;   /* warm bloom in the mesh */

  /* Grain — grayscale fractal noise (matches the Figma "multitone noise"),
     baked as the top layer of the mesh so every gradient surface is textured. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");

  /* ── Signature gradient = MESH ──
     Soft blue→green→warm colour blooms (cool→warm blends cleanly, no muddy
     zones), a dark pass to mute/deepen, a faint top gloss, and grain on top.
     Blooms are positioned in % so the mesh scales to any element size. */
  --wc-grad:
    var(--grain),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 42%),
    linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22)),
    radial-gradient(75% 160% at 8% 35%,  #3760D8 0%, transparent 58%),
    radial-gradient(60% 170% at 36% 70%, #3AA641 0%, transparent 55%),
    radial-gradient(55% 170% at 56% 30%, #86B231 0%, transparent 55%),
    radial-gradient(60% 170% at 78% 68%, var(--wc-orange) 0%, transparent 55%),
    radial-gradient(42% 150% at 92% 52%, #C0392F 0%, transparent 55%),
    radial-gradient(60% 150% at 100% 45%, #2F4FC0 0%, transparent 60%),
    #274AC8;
  /* Horizontal tricolor for thin seams / bunting (cool→warm, OKLAB below) */
  --wc-grad-h:  linear-gradient(90deg, var(--wc-blue-vivid) 0%, var(--wc-green) 38%, var(--wc-orange) 72%, var(--wc-red) 100%);
  --wc-darken:  linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22));
  --wc-sheen:   linear-gradient(105deg, rgba(255,255,255,0.22) 0%, transparent 38%, transparent 62%, rgba(255,255,255,0.12) 100%);

  /* ── Accent remap — base components read these directly. Brighter than the
     deep navy so accents pop on dark and read cleanly on light. ── */
  --blue:        #3A57D6;
  --blue-10:     #3A57D61A;
  --blue-15:     #3A57D626;
  --blue-20:     #3A57D633;
  --blue-50:     #3A57D680;
  --blue-bright: #6B82F0;
  --blue-rgb:    58, 87, 214;   /* retints hardcoded rgba(var(--blue-rgb)) usages */

  /* Atmospheric / pitch tokens — retinted to tournament blue */
  --pitch-line:     rgba(42, 57, 141, 0.10);
  --pitch-faint:    rgba(42, 57, 141, 0.06);
  --pitch-grad:     rgba(42, 57, 141, 0.08);
  --atmo:           rgba(42, 57, 141, 0.04);
  --overlay:        rgba(42, 57, 141, 0.10);
  --overlay-strong: rgba(42, 57, 141, 0.14);
  --fab-shadow:     0 6px 24px rgba(42, 57, 141, 0.45);

  /* Tricolor streak banner wash */
  --streak-bg: linear-gradient(135deg,
                 rgba(60,172,59,0.10) 0%,
                 rgba(42,57,141,0.08) 50%,
                 rgba(230,29,37,0.10) 100%);

  /* Active date pill stays a solid, legible blue (gradient handled per-page) */
  --date-active-bg:   var(--blue);
  --date-active-text: #fff;
}

/* Light mode gets gentler atmospherics, same accents. */
[data-theme="light"][data-event="worldcup"] {
  --pitch-line:  rgba(58, 87, 214, 0.06);
  --pitch-faint: rgba(58, 87, 214, 0.035);
  --pitch-grad:  rgba(58, 87, 214, 0.05);
  --atmo:        rgba(58, 87, 214, 0.02);
  --fab-shadow:  0 6px 24px rgba(58, 87, 214, 0.28);
}

/* OKLAB interpolation for the thin seam/bunting gradient where supported, so
   its blue→green→orange→red stays vivid (sRGB blends adjacent stops muddy).
   The mesh --wc-grad needs no OKLAB — its blooms fade to transparent and layer. */
@supports (background: linear-gradient(in oklab, red, blue)) {
  [data-event="worldcup"] {
    --wc-grad-h: linear-gradient(90deg in oklab, var(--wc-blue-vivid) 0%, var(--wc-green) 38%, var(--wc-orange) 72%, var(--wc-red) 100%);
  }
}

/* ═══════ 2. PRIMITIVES ═══════
   Reusable building blocks every page drops in. Static (no infinite
   animation, no new fixed layers) so they respect the iOS compositor budget
   already enforced in theme.css / backgrounds.css. */

/* ── 2a. Tricolor banner — the signature hero surface (.wc-promo, generalised) ── */
[data-event="worldcup"] .wc-banner {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 20px 24px;
  color: #fff;
  background: var(--wc-darken), var(--wc-grad);
  box-shadow: 0 6px 22px rgba(42, 57, 141, 0.30);
}
/* Glossy diagonal sheen sweeping across the gradient */
[data-event="worldcup"] .wc-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wc-sheen);
  pointer-events: none;
}
/* Keep banner content above the sheen */
[data-event="worldcup"] .wc-banner > * {
  position: relative;
  z-index: 1;
}
/* Text shadow for legibility over the tricolor, matching the share-card */
[data-event="worldcup"] .wc-banner :where(h1, h2, h3, .wc-banner-title) {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ── 2b. Tricolor seam — recurring divider / accent edge ── */
[data-event="worldcup"] .wc-seam {
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--wc-grad-h);
}
/* Hairline variant for inline dividers */
[data-event="worldcup"] .wc-seam--thin { height: 2px; opacity: 0.9; }

/* ── 2c. Gradient CTA — primary actions use the full tricolor, never one shade ── */
[data-event="worldcup"] .wc-cta {
  position: relative;
  overflow: hidden;
  border: none;
  color: #fff;
  background: var(--wc-grad);
  box-shadow: 0 6px 22px rgba(42, 57, 141, 0.35);
}
[data-event="worldcup"] .wc-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wc-sheen);
  pointer-events: none;
}
[data-event="worldcup"] .wc-cta > * {
  position: relative;
  z-index: 1;
}
[data-event="worldcup"] .wc-cta:active { transform: scale(0.98); }

/* ═══════ 3. PHASE 1 — SPLASH / AUTH BOOT ═══════
   The first brand moment. The token layer above already retints the rings,
   glow and accents to tournament blue; this block adds the distinctly World
   Cup flourishes. Everything is static or reuses the base overlay's existing
   (iOS-exempt) animations — no new compositor layers. */

/* Tournament halo — the two breathing rings (auth.css ::before/::after) pick
   up tricolor edges: a green inner ring and a red outer ring around WC blue. */
[data-event="worldcup"] .auth-overlay::before { border-color: rgba(60, 172, 59, 0.16); }  /* green */
[data-event="worldcup"] .auth-overlay::after  { border-color: rgba(230, 29, 37, 0.12); }  /* red   */

/* Faint tricolor diagonal sweep in place of the single-tone atmosphere slash */
[data-event="worldcup"] .auth-atmo {
  background: linear-gradient(165deg,
    transparent 36%,
    rgba(60, 172, 59, 0.05) 46%,
    rgba(42, 57, 141, 0.07) 50%,
    rgba(230, 29, 37, 0.05) 54%,
    transparent 64%);
}

/* Logo badge → full tricolor gradient (the existing pulse glow stays, now WC blue) */
[data-event="worldcup"] .auth-logo { background: var(--wc-grad); }

/* "WORLD CUP 2026" kicker above the wordmark in the loading state.
   CSS-only (decorative) so it leaves no residue when the skin is off. */
[data-event="worldcup"] .auth-content::before {
  content: 'WORLD CUP 2026';
  order: -1;
  margin-bottom: 18px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #fff;
  background: var(--wc-grad);
  box-shadow: 0 4px 14px rgba(42, 57, 141, 0.40);
}

/* Loading dots become the tricolor — green · blue · red (stay animated on iOS) */
[data-event="worldcup"] .auth-dots span:nth-child(1) { background: var(--wc-green); }
[data-event="worldcup"] .auth-dots span:nth-child(2) { background: var(--wc-blue); }
[data-event="worldcup"] .auth-dots span:nth-child(3) { background: var(--wc-red); }

/* Primary auth buttons (retry / web login / dev login) → gradient CTA */
[data-event="worldcup"] .auth-retry-btn {
  background: var(--wc-grad);
  box-shadow: 0 6px 22px rgba(42, 57, 141, 0.35);
}

/* ═══════ 4. PHASE 2 — SHARED CHROME ═══════
   The persistent shell on every page: header brand, bottom nav, FAB, and the
   route progress bar. The token layer already turned icons/labels/borders to
   tournament blue; this block adds the tricolor signatures. All static. */

/* Header brand logo → tricolor badge (matches the splash logo) */
[data-event="worldcup"] .brand-logo { background: var(--wc-grad); }

/* Bottom-nav active indicator → tricolor bar. The active icon + label stay
   solid WC blue (var(--blue)) so only the indicator carries the tricolor. */
[data-event="worldcup"] .nav-item.active::before { background: var(--wc-grad-h); }

/* FAB → full tricolor (its shadow is already WC blue via --fab-shadow) */
[data-event="worldcup"] .fab { background: var(--wc-grad); }

/* SPA route-progress comet → tricolor sweep (keeps the sliding keyframes,
   which animate background-position over the 200%-wide gradient) */
[data-event="worldcup"] .spa-progress {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--wc-green) 30%,
    var(--wc-blue)  50%,
    var(--wc-red)   70%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
}

/* SureBOOM flagship icon glow → tournament blue (base desktop.css hardcodes
   the old brand blue; this also gives the active bolt a subtle glow on mobile) */
[data-event="worldcup"] .nav-sureboom.active svg,
[data-event="worldcup"] .nav-sureboom:hover svg {
  filter: drop-shadow(0 0 6px rgba(42, 57, 141, 0.6));
}

/* ═══════ 5. PHASE 3 — SUREBOOM HUB ═══════
   Flagship landing (sureboom.css). It hardcodes the old brand blue
   (rgba 13,79,247) and a blue/gold/red card scheme, so these need explicit
   overrides, not token inheritance. The three features map onto the tricolor:
     Optimizer = green · Merger = blue · Splitter = red.

   NOTE: per-page CSS (sureboom.css) loads AFTER worldcup.css, so these rules
   are prefixed with :root[data-event="worldcup"] to outrank the base
   [data-theme="light"] .x rules on equal specificity. */

/* — Atmosphere: WC-blue burst, tricolor expanding rings, retinted dot grid — */
:root[data-event="worldcup"] .sb-burst {
  background: radial-gradient(ellipse at center,
    rgba(42, 57, 141, 0.14) 0%, rgba(42, 57, 141, 0.04) 30%, transparent 65%);
}
:root[data-event="worldcup"] .sb-ring--1 { border-color: rgba(60, 172, 59, 0.11); }  /* green */
:root[data-event="worldcup"] .sb-ring--2 { border-color: rgba(42, 57, 141, 0.11); }  /* blue  */
:root[data-event="worldcup"] .sb-ring--3 { border-color: rgba(230, 29, 37, 0.09); }  /* red   */
:root[data-event="worldcup"] .sb-grid-overlay {
  background-image: radial-gradient(circle, rgba(42, 57, 141, 0.04) 1px, transparent 1px);
}

/* — Hero trophy badge + tricolor "BOOM" — */
:root[data-event="worldcup"] .sb-badge-icon {
  background: var(--wc-grad);
  box-shadow: 0 0 0 4px rgba(42, 57, 141, 0.18), 0 8px 32px rgba(42, 57, 141, 0.32);
}
:root[data-event="worldcup"] .sb-badge-glow {
  background: radial-gradient(circle, rgba(42, 57, 141, 0.28), transparent 70%);
}
:root[data-event="worldcup"] .sb-title-boom {
  color: transparent;
  background: var(--wc-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-event="worldcup"] .sb-title-boom::after { background: var(--wc-grad-h); }

/* — Optimizer card = GREEN — */
:root[data-event="worldcup"] .sb-card--optimizer {
  background: linear-gradient(145deg, rgba(60,172,59,0.14) 0%, var(--slab) 42%, rgba(60,172,59,0.05) 100%);
  border-color: rgba(60, 172, 59, 0.20);
}
:root[data-event="worldcup"] .sb-card--optimizer::before { background: radial-gradient(circle, rgba(60,172,59,0.14), transparent 70%); }
:root[data-event="worldcup"] .sb-card--optimizer::after  { border-color: rgba(60,172,59,0.08); }
:root[data-event="worldcup"] .sb-card-icon--optimizer {
  background: rgba(60,172,59,0.16); color: var(--wc-green);
  box-shadow: 0 4px 16px rgba(60,172,59,0.12);
}

/* — Merger card = BLUE (replaces gold) — */
:root[data-event="worldcup"] .sb-card--merger {
  background: linear-gradient(145deg, rgba(42,57,141,0.16) 0%, var(--slab) 42%, rgba(42,57,141,0.06) 100%);
  border-color: rgba(42, 57, 141, 0.22);
}
:root[data-event="worldcup"] .sb-card--merger::before { background: radial-gradient(circle, rgba(42,57,141,0.16), transparent 70%); }
:root[data-event="worldcup"] .sb-card--merger::after  { border-color: rgba(42,57,141,0.08); }
:root[data-event="worldcup"] .sb-card-icon--merger {
  background: rgba(42,57,141,0.18); color: var(--blue-bright);
  box-shadow: 0 4px 16px rgba(42,57,141,0.12);
}

/* — Splitter card = RED — */
:root[data-event="worldcup"] .sb-card--splitter {
  background: linear-gradient(145deg, rgba(230,29,37,0.10) 0%, var(--slab) 42%, rgba(230,29,37,0.05) 100%);
  border-color: rgba(230, 29, 37, 0.16);
}
:root[data-event="worldcup"] .sb-card--splitter::before { background: radial-gradient(circle, rgba(230,29,37,0.12), transparent 70%); }
:root[data-event="worldcup"] .sb-card--splitter::after  { border-color: rgba(230,29,37,0.07); }
:root[data-event="worldcup"] .sb-card-icon--splitter {
  background: rgba(230,29,37,0.13); color: #ff5159;
  box-shadow: 0 4px 16px rgba(230,29,37,0.10);
}

/* — Shared card action arrow → tricolor gradient CTA — */
:root[data-event="worldcup"] .sb-card-arrow {
  background: var(--wc-grad);
  box-shadow: 0 4px 20px rgba(42, 57, 141, 0.35);
}
:root[data-event="worldcup"] .sb-card:active .sb-card-arrow {
  box-shadow: 0 4px 28px rgba(42, 57, 141, 0.55);
}

/* — Light-mode atmosphere softeners (outrank base [data-theme="light"] rules) — */
:root[data-theme="light"][data-event="worldcup"] .sb-burst {
  background: radial-gradient(ellipse at center,
    rgba(42,57,141,0.07) 0%, rgba(42,57,141,0.02) 30%, transparent 65%);
}
:root[data-theme="light"][data-event="worldcup"] .sb-ring--1 { border-color: rgba(60,172,59,0.06); }
:root[data-theme="light"][data-event="worldcup"] .sb-ring--2 { border-color: rgba(42,57,141,0.06); }
:root[data-theme="light"][data-event="worldcup"] .sb-ring--3 { border-color: rgba(230,29,37,0.05); }
:root[data-theme="light"][data-event="worldcup"] .sb-grid-overlay {
  background-image: radial-gradient(circle, rgba(42,57,141,0.025) 1px, transparent 1px);
}

/* ═══════ 6. PHASE 3B — SUREBOOM TOOL PAGES ═══════
   Optimizer / Merger / Splitter share a unified WC-blue base: their hardcoded
   brand blue is now tokenised (rgba(var(--blue-rgb))) so it retints with the
   theme, and var(--blue*) usages already inherit Phase 0. This block adds the
   tricolor "pops" — primary action CTAs get the full gradient. Semantic
   win/loss/draw states and the .copied success feedback are deliberately kept. */
:root[data-event="worldcup"] .opt-load-btn,
:root[data-event="worldcup"] .opt-run-btn,
:root[data-event="worldcup"] .mrg-merge-btn,
:root[data-event="worldcup"] .spl-load-btn,
:root[data-event="worldcup"] .spl-run-btn,
:root[data-event="worldcup"] .opt-action-primary:not(.copied),
:root[data-event="worldcup"] .mrg-action-primary:not(.copied),
:root[data-event="worldcup"] .spl-action-primary:not(.copied) {
  background: var(--wc-grad);
}

/* ═══════ 7. PHASE 4 — MATCHES (list + detail) ═══════
   The large list/detail stylesheets (match-details, basketball-matches/-match)
   ride on var(--blue*) and already inherit Phase 0. betslip/converter/filter had
   26 hardcoded brand-blue rgba, now tokenised (rgba(var(--blue-rgb))) — base
   unchanged, WC retints. This block adds the tricolor pops: primary CTAs and the
   header icon badges. Semantic live/win/loss/draw and team-crest colors untouched. */

/* Primary action CTAs → tricolor gradient (disabled states stay opacity-dimmed) */
:root[data-event="worldcup"] .bs-action-btn,
:root[data-event="worldcup"] .cvt-convert-btn,
:root[data-event="worldcup"] .cvt-action-btn.primary,
:root[data-event="worldcup"] .flt-done-btn {
  background: var(--wc-grad);
}

/* Header icon badges → tricolor (consistent with the brand / SureBOOM badges) */
:root[data-event="worldcup"] .bs-header-icon,
:root[data-event="worldcup"] .cvt-header-icon,
:root[data-event="worldcup"] .flt-header-icon {
  background: var(--wc-grad);
}

/* ═══════ 8. PHASE 5 — QUICK SLIPS ═══════
   coped-slips / coped-preview / custom-slip. Most blue rides on var(--blue*)
   (incl. toggle tracks, progress fills, active pills — the unified blue base);
   36 hardcoded brand-blue rgba were tokenised. This block adds tricolor pops to
   the primary CTAs and the header icon badges only. Semantic win/loss/draw and
   the tier (low/mid/high) fills are left intact. */

/* Primary action CTAs → tricolor gradient (disabled/loading stay opacity-dimmed) */
:root[data-event="worldcup"] .cp-build-btn,
:root[data-event="worldcup"] .cp-overlay-apply,
:root[data-event="worldcup"] .cpv-continue-btn {
  background: var(--wc-grad);
}

/* Header icon badges → tricolor (consistent with the other badges) */
:root[data-event="worldcup"] .cp-header-badge,
:root[data-event="worldcup"] .cp-overlay-icon {
  background: var(--wc-grad);
}

/* ═══════ 9. PHASE 6 — REMAINDER (profile · plans · slips · payment) ═══════
   profile / edit-profile / complete-profile / slips / premium-gate ride on
   var(--blue*) plus 14 hardcoded brand-blue rgba (+2 hex in profile), now
   tokenised. This block adds tricolor pops to the primary CTAs + the profile
   referral promo (→ signature banner) and the premium-gate lock badge.
   The plans page keeps its premium gold/silver/bronze tier identity — only its
   atmosphere blue retints; its tier-coloured subscribe CTA is left intact. */

/* Primary action CTAs → tricolor gradient (success/disabled states preserved) */
:root[data-event="worldcup"] .ep-save-btn:not(.saved),
:root[data-event="worldcup"] .cprof-submit,
:root[data-event="worldcup"] .pg-cta {
  background: var(--wc-grad);
}

/* Promo CTA cards → the signature tricolor banner
   (.prof-referral-card = profile; .cta-card = shared matches/home promo) */
:root[data-event="worldcup"] .prof-referral-card,
:root[data-event="worldcup"] .cta-card {
  background: var(--wc-grad);
}

/* Premium-gate lock badge → tricolor (consistent with the other badges) */
:root[data-event="worldcup"] .pg-lock-icon {
  background: var(--wc-grad);
}

/* ═══════ 10. FESTIVE ATMOSPHERE ═══════
   Stadium-light flares on the body background, behind everything. */

/* Stadium floodlight flares — green (top-left) · red (top-right) · blue (bottom) */
[data-event="worldcup"] body {
  background:
    radial-gradient(ellipse 55% 42% at 6% -4%,  rgba(60, 172, 59, 0.13) 0%, transparent 55%),
    radial-gradient(ellipse 55% 42% at 94% -4%, rgba(230, 29, 37, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 90% 45% at 50% 106%, rgba(58, 87, 214, 0.13) 0%, transparent 60%),
    var(--ink);
}
/* Light mode — flares much fainter so they tint rather than smudge on white */
[data-theme="light"][data-event="worldcup"] body {
  background:
    radial-gradient(ellipse 55% 42% at 6% -4%,  rgba(60, 172, 59, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 55% 42% at 94% -4%, rgba(230, 29, 37, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 90% 45% at 50% 106%, rgba(58, 87, 214, 0.06) 0%, transparent 60%),
    var(--ink);
}

/* ═══════ THEME COMPLETE — all phases (0–6) + festive atmosphere ═══════
   Activation: data-event="worldcup" (date-gated Jun 11–Jul 20 2026; override
   via localStorage.wc_theme). Everything above is inert until that is set. */