/* DuelVerse — Colour layer (Jay, Oct 29, 2026): choosing the Shuffle Classic
   theme sets the dark stage and the purple brand frame — it does NOT make
   everything purple. Every game, promo and panel family carries its own
   vivid colour identity, the way Shuffle's tiles do. This file loads last
   in the head so it wins over the calmer richness layer. Lite mode
   flattens it all back to plain panels. No new bytes of imagery: gradients
   and the recoloured per-game icons only. */
:root{
  --c-amber:#f59e0b; --c-orange:#fb923c; --c-red:#fb4d5e; --c-rose:#f43f5e;
  --c-pink:#ec4899; --c-magenta:#d946ef; --c-violet:#8b5cf6; --c-blue:#38bdf8;
  --c-cyan:#22d3ee; --c-teal:#2dd4bf; --c-green:#22c55e; --c-lime:#a3e635;
  --c-gold:#e8b34b;
}

/* ---------- stage: several quiet glows, not one purple wash ---------- */
body{
  background:
    radial-gradient(1000px 480px at 88% -10%,rgba(124,58,237,.20),transparent 60%),
    radial-gradient(760px 420px at -12% 26%,rgba(34,211,238,.10),transparent 55%),
    radial-gradient(820px 460px at 108% 72%,rgba(245,158,11,.08),transparent 58%),
    radial-gradient(700px 420px at 18% 112%,rgba(236,72,153,.07),transparent 55%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);
  background-attachment:fixed;
}
.wordmark-accent{
  background:linear-gradient(92deg,var(--accent-2) 10%,var(--c-magenta) 55%,var(--c-amber) 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wallet-coin{color:var(--c-gold)}
.btn-primary{
  background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 42%,#c026d3 100%);
}
.support-fab{background:linear-gradient(150deg,#8b5cf6,#db2777 58%,#f59e0b)}

/* ---------- sidebar: every stop a different colour ---------- */
.side-nav a:nth-child(1) .ico{color:var(--c-cyan)}
.side-nav a:nth-child(2) .ico{color:var(--c-pink)}
.side-nav a:nth-child(3) .ico{color:var(--c-gold)}
.side-nav a:nth-child(4) .ico{color:var(--c-teal)}
.side-nav a:nth-child(5) .ico{color:var(--c-green)}
.side-promo:nth-of-type(1){background:linear-gradient(150deg,rgba(232,179,75,.20),rgba(124,58,237,.10) 60%,var(--panel));border-color:rgba(232,179,75,.35)}
.side-promo:nth-of-type(2){background:linear-gradient(150deg,rgba(56,189,248,.18),rgba(34,197,94,.08) 60%,var(--panel));border-color:rgba(56,189,248,.32)}
.side-promo:nth-of-type(3){background:linear-gradient(150deg,rgba(251,77,94,.18),rgba(56,189,248,.10) 60%,var(--panel));border-color:rgba(251,77,94,.32)}

/* ---------- shared accents ---------- */
.panel::before{background:linear-gradient(90deg,transparent,var(--c-cyan),var(--c-magenta),var(--c-amber),transparent)}
.row-head h2::before{background:linear-gradient(180deg,var(--c-gold),var(--c-pink) 55%,var(--accent));box-shadow:0 0 12px rgba(236,72,153,.4)}
.live-strip{
  background:linear-gradient(110deg,rgba(34,197,94,.14),rgba(34,211,238,.08) 45%,rgba(124,58,237,.14));
  border-color:rgba(45,212,191,.35);
}
.countdown-fill{background:linear-gradient(90deg,var(--c-teal),var(--c-blue),var(--accent-2))}
.countdown-fill.season{background:linear-gradient(90deg,var(--c-amber),var(--c-rose),var(--c-magenta))}

/* ---------- game tiles: six scenes, six palettes ---------- */
.tile-art{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -34px 54px rgba(0,0,0,.38)}
.tile-art::before{background:radial-gradient(120% 72% at 50% 0%,rgba(255,255,255,.20),transparent 62%)}
.art-oware{background:
  linear-gradient(180deg,rgba(69,26,3,.06),rgba(69,26,3,.52)),
  url("../img/motif-pits.svg") center 118%/150% auto no-repeat,
  linear-gradient(155deg,#f59e0b,#b45309 46%,#572b07 88%)}
.art-ludo{background:
  radial-gradient(circle at 24% 22%,rgba(251,77,94,.85) 0 26px,transparent 30px),
  radial-gradient(circle at 76% 22%,rgba(56,189,248,.85) 0 26px,transparent 30px),
  radial-gradient(circle at 50% 52%,rgba(250,204,21,.9) 0 24px,transparent 28px),
  radial-gradient(circle at 24% 78%,rgba(34,197,94,.8) 0 26px,transparent 30px),
  radial-gradient(circle at 76% 78%,rgba(217,70,239,.75) 0 26px,transparent 30px),
  linear-gradient(155deg,#312e81,#171034 78%)}
.art-draughts{background:
  linear-gradient(180deg,rgba(2,32,54,.10),rgba(2,32,54,.5)),
  repeating-conic-gradient(rgba(255,255,255,.20) 0% 25%,transparent 0% 50%) 0 0/62px 62px,
  linear-gradient(155deg,#0ea5e9,#0369a1 48%,#7c2d12 130%)}
.art-whot{background:
  linear-gradient(180deg,rgba(80,7,36,.08),rgba(80,7,36,.52)),
  url("../img/motif-star.svg") center 112%/135% auto no-repeat,
  linear-gradient(155deg,#ec4899,#a21caf 52%,#155e75 125%)}
.art-chess{background:
  linear-gradient(180deg,rgba(2,44,34,.10),rgba(2,44,34,.5)),
  repeating-conic-gradient(rgba(255,255,255,.18) 0% 25%,transparent 0% 50%) 0 0/62px 62px,
  linear-gradient(155deg,#10b981,#065f46 52%,#78350f 135%)}
.art-pool{background:
  linear-gradient(180deg,rgba(4,47,46,.08),rgba(4,47,46,.5)),
  url("../img/motif-rack.svg") center 110%/140% auto no-repeat,
  linear-gradient(155deg,#14b8a6,#0f766e 42%,#164e63 88%)}
.art-cribbage{background:
  linear-gradient(180deg,rgba(60,4,4,.08),rgba(60,4,4,.5)),
  url("../img/logo-mark.svg") center 110%/140% auto no-repeat,
  linear-gradient(155deg,#e53935,#b71c1c 48%,#3d0a06 92%)}
.tile:has(.art-oware){border-color:rgba(245,158,11,.45);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(245,158,11,.16)}
.tile:has(.art-ludo){border-color:rgba(244,63,94,.45);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(244,63,94,.16)}
.tile:has(.art-draughts){border-color:rgba(56,189,248,.45);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(56,189,248,.16)}
.tile:has(.art-whot){border-color:rgba(236,72,153,.45);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(236,72,153,.16)}
.tile:has(.art-chess){border-color:rgba(16,185,129,.45);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(16,185,129,.16)}
.tile:has(.art-pool){border-color:rgba(45,212,191,.45);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(45,212,191,.16)}
.tile:has(.art-cribbage){border-color:rgba(239,83,80,.5);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(198,40,40,.22)}
.tile:has(.art-oware) .btn-primary{background:linear-gradient(135deg,#fbbf24,#d97706 55%,#b45309)}
.tile:has(.art-ludo) .btn-primary{background:linear-gradient(135deg,#fb7185,#e11d48 55%,#7c3aed)}
.tile:has(.art-draughts) .btn-primary{background:linear-gradient(135deg,#38bdf8,#0284c7 55%,#0369a1)}
.tile:has(.art-whot) .btn-primary{background:linear-gradient(135deg,#f472b6,#db2777 55%,#a21caf)}
.tile:has(.art-chess) .btn-primary{background:linear-gradient(135deg,#34d399,#059669 55%,#065f46)}
.tile:has(.art-pool) .btn-primary{background:linear-gradient(135deg,#2dd4bf,#0d9488 55%,#155e75)}
.tile:has(.art-cribbage) .btn-primary{background:linear-gradient(135deg,#ef5350,#c62828 55%,#7f1d1d)}

/* ---------- promo banners: scenes with their own weather ---------- */
.promo-card.art-cup{background:
  radial-gradient(340px 170px at 92% -10%,rgba(255,224,130,.35),transparent 60%),
  linear-gradient(150deg,#b45309,#7c2d12 46%,#2a1650 105%)}
.promo-card.art-cup .promo-kicker{color:#fde68a}
.promo-card.art-race{background:
  radial-gradient(340px 170px at 92% -10%,rgba(103,232,249,.30),transparent 60%),
  linear-gradient(150deg,#0369a1,#1d4ed8 48%,#3b0764 110%)}
.promo-card.art-race .promo-kicker{color:#a5f3fc}
.promo-card.art-league{background:
  radial-gradient(340px 170px at 92% -10%,rgba(252,211,77,.28),transparent 60%),
  linear-gradient(150deg,#065f46,#0f766e 50%,#312e81 110%)}
.promo-card.art-league .promo-kicker{color:#fcd34d}
.promo-card.art-ludo{background:
  radial-gradient(240px 140px at 96% 0%,rgba(251,77,94,.4),transparent 62%),
  radial-gradient(240px 140px at 0% 108%,rgba(56,189,248,.32),transparent 62%),
  radial-gradient(200px 120px at 55% 115%,rgba(34,197,94,.28),transparent 62%),
  linear-gradient(150deg,#4c0519,#1e1b4b 62%)}
.promo-card.art-ludo .promo-kicker{color:#fda4af}

/* ---------- lobby panels ---------- */
.panel.race{border-color:rgba(245,158,11,.38);background:linear-gradient(165deg,rgba(245,158,11,.10),var(--panel) 58%)}
.panel.winners{border-color:rgba(45,212,191,.34);background:linear-gradient(165deg,rgba(45,212,191,.09),var(--panel) 58%)}
.vip-card:nth-child(1){background:linear-gradient(155deg,rgba(232,179,75,.24),rgba(232,179,75,.05));border-color:rgba(232,179,75,.4)}
.vip-card:nth-child(2){background:linear-gradient(155deg,rgba(236,72,153,.22),rgba(236,72,153,.05));border-color:rgba(236,72,153,.38)}
.vip-card:nth-child(3){background:linear-gradient(155deg,rgba(45,212,191,.22),rgba(45,212,191,.05));border-color:rgba(45,212,191,.38)}

/* ---------- house ads: each creative its own colours ---------- */
.adslot .ad-creative.ad-crown{background:
  radial-gradient(500px 190px at 88% -45%,rgba(245,158,11,.38),transparent 62%),
  linear-gradient(120deg,#3a2405,var(--panel) 72%)}
.adslot .ad-creative.ad-crown .ad-badge{background:linear-gradient(145deg,#f59e0b,#b45309);box-shadow:0 8px 22px rgba(245,158,11,.35)}
.adslot .ad-creative.ad-crown .ad-cta{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.adslot .ad-creative.ad-brand{background:
  radial-gradient(500px 190px at 10% -45%,rgba(34,211,238,.32),transparent 62%),
  linear-gradient(120deg,#082f3f,var(--panel) 72%)}
.adslot .ad-creative.ad-brand .ad-cta{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.adslot .ad-creative.ad-cross{background:
  radial-gradient(300px 150px at 6% -30%,rgba(251,77,94,.32),transparent 60%),
  radial-gradient(300px 150px at 96% 120%,rgba(56,189,248,.28),transparent 60%),
  linear-gradient(120deg,#2b0a18,var(--panel) 74%)}
.adslot .ad-creative.ad-cross .ad-badge{background:linear-gradient(145deg,#e11d48,#7c3aed);box-shadow:0 8px 22px rgba(225,29,72,.35)}
.adslot .ad-creative.ad-cross .ad-cta{background:linear-gradient(135deg,#e11d48,#7c3aed)}
.adslot .ad-creative.ad-house-rect{background:
  radial-gradient(330px 210px at 50% -30%,rgba(217,70,239,.34),transparent 62%),
  linear-gradient(170deg,#2a0a2e,var(--panel))}

/* ---------- league page ---------- */
.league-hero{background:
  radial-gradient(560px 240px at 94% -12%,rgba(232,179,75,.20),transparent 60%),
  radial-gradient(520px 240px at -6% 112%,rgba(34,211,238,.14),transparent 60%),
  linear-gradient(150deg,#3b2a10,#1b1440 55%,#0b2e2a 115%)}
.cd-card:nth-child(1){border-color:rgba(232,179,75,.4)}
.cd-card:nth-child(2){border-color:rgba(56,189,248,.38)}
.my-stat:nth-child(1){border-top:3px solid var(--c-gold)}
.my-stat:nth-child(2){border-top:3px solid var(--c-cyan)}
.my-stat:nth-child(3){border-top:3px solid var(--c-pink)}
.my-stat:nth-child(5){border-top:3px solid var(--c-teal)}
.my-stat:nth-child(6){border-top:3px solid var(--c-lime)}
.split-chip:nth-child(1) strong{color:var(--c-gold)}
.split-chip:nth-child(2) strong{color:var(--c-cyan)}
.split-chip:nth-child(3) strong{color:var(--c-pink)}
.split-chip:nth-child(4) strong{color:var(--c-green)}
.split-chip:nth-child(5) strong{color:var(--c-orange)}
.division-gold{border-top:3px solid var(--c-gold)}
.division-silver{border-top:3px solid #cbd5e1}
.division-bronze{border-top:3px solid #d08a4e}

/* ---------- game hero bands ---------- */
.game-hero-oware{background:
  radial-gradient(480px 200px at 95% -20%,rgba(251,191,36,.30),transparent 60%),
  linear-gradient(140deg,#92400e,#451a03 58%,#14532d 130%)}
.game-hero-ludo{background:
  radial-gradient(400px 190px at 0% -20%,rgba(251,77,94,.4),transparent 60%),
  radial-gradient(400px 190px at 100% 120%,rgba(56,189,248,.34),transparent 60%),
  radial-gradient(320px 160px at 55% 130%,rgba(34,197,94,.26),transparent 60%),
  linear-gradient(140deg,#4c0519,#1e1b4b 64%)}
.game-hero-draughts{background:
  radial-gradient(480px 200px at 95% -20%,rgba(56,189,248,.3),transparent 60%),
  linear-gradient(140deg,#075985,#0c2a4d 58%,#7c2d12 135%)}
.game-hero-whot{background:
  radial-gradient(480px 200px at 95% -20%,rgba(244,114,182,.34),transparent 60%),
  linear-gradient(140deg,#9d174d,#701a75 55%,#155e75 130%)}
.game-hero-chess{background:
  radial-gradient(480px 200px at 95% -20%,rgba(52,211,153,.3),transparent 60%),
  linear-gradient(140deg,#065f46,#064e3b 58%,#78350f 135%)}
.game-hero-pool{background:
  radial-gradient(480px 200px at 95% -20%,rgba(45,212,191,.32),transparent 60%),
  linear-gradient(140deg,#0f766e,#134e4a 55%,#1e3a8a 130%)}
.game-hero-cribbage{background:
  radial-gradient(480px 200px at 95% -20%,rgba(239,83,80,.34),transparent 60%),
  radial-gradient(420px 190px at 0% 120%,rgba(245,158,11,.16),transparent 60%),
  linear-gradient(140deg,#b71c1c,#7f1d1d 55%,#2a0808 130%)}

/* ---------- per-page ambience glows ---------- */
.amb-lobby{background:
  radial-gradient(760px 340px at 88% -4%,rgba(124,58,237,.18),transparent 62%),
  radial-gradient(560px 280px at 2% 62%,rgba(34,211,238,.08),transparent 60%),
  radial-gradient(620px 300px at 96% 108%,rgba(245,158,11,.09),transparent 60%)}
.amb-oware{background:
  radial-gradient(700px 320px at 85% 0%,rgba(245,158,11,.16),transparent 60%),
  radial-gradient(520px 260px at 4% 100%,rgba(132,204,22,.07),transparent 60%)}
.amb-ludo{background:
  radial-gradient(620px 300px at 85% 0%,rgba(244,63,94,.14),transparent 60%),
  radial-gradient(560px 280px at 4% 100%,rgba(56,189,248,.10),transparent 60%)}
.amb-whot{background:
  radial-gradient(700px 320px at 85% 0%,rgba(236,72,153,.16),transparent 60%),
  radial-gradient(520px 260px at 4% 100%,rgba(34,211,238,.08),transparent 60%)}
.amb-pool{background:
  radial-gradient(700px 320px at 85% 0%,rgba(45,212,191,.14),transparent 60%),
  radial-gradient(520px 260px at 4% 100%,rgba(163,230,53,.06),transparent 60%)}
.amb-cribbage{background:
  radial-gradient(700px 320px at 85% 0%,rgba(198,40,40,.18),transparent 60%),
  radial-gradient(520px 260px at 4% 100%,rgba(245,158,11,.09),transparent 60%)}

/* Rainbow Rush lobby scene (its in-page scene lives in rainbow.css) */
.art-rainbow{background:
  radial-gradient(circle at 22% 22%,rgba(239,68,68,.5) 0 24px,transparent 29px),
  radial-gradient(circle at 78% 20%,rgba(59,130,246,.5) 0 24px,transparent 29px),
  radial-gradient(circle at 50% 52%,rgba(250,204,21,.45) 0 21px,transparent 26px),
  radial-gradient(circle at 24% 80%,rgba(34,197,94,.48) 0 24px,transparent 29px),
  radial-gradient(circle at 78% 80%,rgba(217,70,239,.42) 0 24px,transparent 29px),
  linear-gradient(155deg,#232c6e,#0d1030 78%)}
.tile:has(.art-rainbow){border-color:rgba(96,165,250,.5);box-shadow:0 18px 40px rgba(0,0,0,.5),0 6px 22px rgba(59,130,246,.18)}

/* ---------- Lite mode: flatten the colour layer too ---------- */
html[data-experience="lite"] .art-oware,
html[data-experience="lite"] .art-ludo,
html[data-experience="lite"] .art-draughts,
html[data-experience="lite"] .art-whot,
html[data-experience="lite"] .art-chess,
html[data-experience="lite"] .art-pool,
html[data-experience="lite"] .art-cribbage,
html[data-experience="lite"] .art-rainbow,
html[data-experience="lite"] .promo-card,
html[data-experience="lite"] .promo-card.art-cup,
html[data-experience="lite"] .promo-card.art-race,
html[data-experience="lite"] .promo-card.art-league,
html[data-experience="lite"] .promo-card.art-ludo,
html[data-experience="lite"] .panel.race,
html[data-experience="lite"] .panel.winners,
html[data-experience="lite"] .vip-card,
html[data-experience="lite"] .league-hero,
html[data-experience="lite"] .game-hero,
html[data-experience="lite"] .game-hero-oware,
html[data-experience="lite"] .game-hero-ludo,
html[data-experience="lite"] .game-hero-draughts,
html[data-experience="lite"] .game-hero-whot,
html[data-experience="lite"] .game-hero-chess,
html[data-experience="lite"] .game-hero-pool,
html[data-experience="lite"] .game-hero-cribbage,
html[data-experience="lite"] .side-promo,
html[data-experience="lite"] .adslot .ad-creative{background:var(--panel)}
html[data-experience="lite"] .tile,
html[data-experience="lite"] .division-gold,
html[data-experience="lite"] .division-silver,
html[data-experience="lite"] .division-bronze{border-color:var(--line);box-shadow:var(--shadow)}
html[data-experience="lite"] .tile .btn-primary,
html[data-experience="lite"] .adslot .ad-cta{background:var(--accent)}
html[data-experience="lite"] .wordmark-accent{background:none;color:var(--accent-2);-webkit-background-clip:initial;background-clip:initial}
html[data-experience="lite"] .panel::before,
html[data-experience="lite"] .row-head h2::before{background:var(--accent-2);box-shadow:none}
html[data-experience="lite"] .my-stat{border-top:1px solid var(--line)}