/* DuelVerse — Visual Richness layer (Shuffle-technique study, original art).
   Scenes, watermarks and glows that sit BEHIND content. CSS/SVG only, no
   raster, no external requests. Boards and text are never touched.
   Lite mode (html[data-experience="lite"]) flattens everything below back
   to the plain calm site; reduced-motion kills the sheen sweep. */
:root{--gold:#e8b34b;--gold-soft:rgba(232,179,75,.16)}

/* ================= ambience: page atmosphere layer ================= */
.ambience{
  position:fixed;top:var(--topbar-h);right:0;bottom:0;left:var(--sidebar-w);
  z-index:-1;pointer-events:none;overflow:hidden;
}
/* Split Crown watermark tiling — kills dead flat space at ~zero bytes */
.ambience::after{
  content:"";position:absolute;inset:0;
  background-image:url("../img/crown-pattern.svg");
  background-size:170px 170px;opacity:.05;
}
/* per-page motif, large and soft, right side */
.ambience::before{
  content:"";position:absolute;right:-70px;top:26px;width:430px;height:430px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.055;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 74%);
          mask-image:radial-gradient(closest-side,#000 25%,transparent 74%);
}
.amb-lobby{
  background:
    radial-gradient(760px 340px at 88% -4%,rgba(124,58,237,.20),transparent 62%),
    radial-gradient(620px 300px at 4% 108%,rgba(232,179,75,.07),transparent 60%);
}
.amb-lobby::before{background-image:url("../img/logo-mark.svg");opacity:.05}
.amb-league{
  background:
    radial-gradient(760px 340px at 85% -4%,rgba(232,179,75,.10),transparent 60%),
    radial-gradient(680px 320px at 6% 110%,rgba(124,58,237,.16),transparent 62%);
}
.amb-league::before{background-image:url("../img/logo-mark.svg")}
.amb-oware{background:radial-gradient(700px 320px at 85% 0%,rgba(232,179,75,.09),transparent 60%)}
.amb-oware::before{background-image:url("../img/motif-pits.svg")}
.amb-ludo{background:radial-gradient(700px 320px at 85% 0%,rgba(124,58,237,.16),transparent 60%)}
.amb-ludo::before{background-image:url("../img/motif-dice.svg")}
.amb-whot{background:radial-gradient(700px 320px at 85% 0%,rgba(124,58,237,.18),transparent 60%)}
.amb-whot::before{background-image:url("../img/motif-star.svg")}
.amb-pool{background:radial-gradient(700px 320px at 85% 0%,rgba(45,212,191,.08),transparent 60%)}
.amb-pool::before{background-image:url("../img/motif-rack.svg")}
.amb-cribbage{background:radial-gradient(700px 320px at 85% 0%,rgba(198,40,40,.15),transparent 60%)}
.amb-cribbage::before{background-image:url("../img/logo-mark.svg")}
.amb-draughts::before,.amb-chess::before{
  background-image:repeating-conic-gradient(rgba(244,242,255,.5) 0% 25%,transparent 0% 50%);
  background-size:92px 92px;background-repeat:repeat;opacity:.028;
}

/* ================= shared panel lift ================= */
.panel{position:relative}
.panel::before{
  content:"";position:absolute;top:0;left:18px;right:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.45),transparent);
  pointer-events:none;
}
.row-head h2{display:flex;align-items:center;gap:10px}
.row-head h2::before{
  content:"";flex:0 0 auto;width:4px;height:22px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--accent));
  box-shadow:0 0 12px rgba(232,179,75,.35);
}
.live-strip{
  background:linear-gradient(120deg,rgba(124,58,237,.16),var(--panel) 65%);
  border-color:rgba(167,139,250,.28);
}

/* ================= lobby: game tile scenes ================= */
.tile-icon{
  width:104px;height:104px;position:relative;z-index:1;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
.tile-art{background-blend-mode:normal}
.art-oware{background:
  linear-gradient(180deg,rgba(11,9,18,.55),rgba(11,9,18,.88)),
  url("../img/motif-pits.svg") center 118%/150% auto no-repeat,
  linear-gradient(160deg,#3a2266,#180d33 72%)}
.art-ludo{background:
  radial-gradient(circle at 30% 26%,rgba(167,139,250,.38) 0 10px,transparent 12px),
  radial-gradient(circle at 70% 26%,rgba(167,139,250,.38) 0 10px,transparent 12px),
  radial-gradient(circle at 50% 48%,rgba(232,179,75,.45) 0 10px,transparent 12px),
  radial-gradient(circle at 30% 70%,rgba(167,139,250,.38) 0 10px,transparent 12px),
  radial-gradient(circle at 70% 70%,rgba(167,139,250,.38) 0 10px,transparent 12px),
  linear-gradient(160deg,#3d1d63,#1b0f38 72%)}
.art-draughts{background:
  linear-gradient(180deg,rgba(10,8,20,.42),rgba(10,8,20,.85)),
  repeating-conic-gradient(rgba(244,242,255,.16) 0% 25%,transparent 0% 50%) 0 0/64px 64px,
  linear-gradient(160deg,#2a1c55,#130b2e 72%)}
.art-chess{background:
  linear-gradient(180deg,rgba(8,10,22,.42),rgba(8,10,22,.85)),
  repeating-conic-gradient(rgba(191,219,254,.14) 0% 25%,transparent 0% 50%) 0 0/64px 64px,
  linear-gradient(160deg,#232048,#0f0d24 72%)}
.art-whot{background:
  linear-gradient(180deg,rgba(11,9,18,.5),rgba(11,9,18,.88)),
  url("../img/motif-star.svg") center 115%/135% auto no-repeat,
  linear-gradient(160deg,#38186a,#1a0c36 72%)}
.art-pool{background:
  linear-gradient(180deg,rgba(6,14,12,.45),rgba(6,14,12,.86)),
  url("../img/motif-rack.svg") center 112%/140% auto no-repeat,
  linear-gradient(160deg,#123a2c,#0b1a24 74%)}
.art-cribbage{background:
  linear-gradient(180deg,rgba(20,4,6,.55),rgba(20,4,6,.88)),
  url("../img/logo-mark.svg") center 118%/150% auto no-repeat,
  linear-gradient(160deg,#4a0e0e,#20060a 72%)}

/* ================= lobby: promo banner scenes ================= */
.promo-card::before{
  content:"";position:absolute;right:-26px;top:50%;width:176px;height:176px;
  transform:translateY(-50%) rotate(-8deg);
  background:url("../img/logo-mark.svg") center/contain no-repeat;
  opacity:.13;pointer-events:none;
}
.promo-card h2,.promo-card .promo-text,.promo-card .promo-kicker,.promo-card .promo-days{position:relative}
.promo-card.art-cup{background:linear-gradient(150deg,#3d2a10,#1d1430 58%,var(--panel))}
.promo-card.art-cup::before{background-image:url("../img/logo-mark.svg");opacity:.17}
.promo-card.art-race{background:linear-gradient(150deg,#2b1660,#160b31 60%,var(--panel))}
.promo-card.art-league{background:linear-gradient(150deg,#1d2a5e,#130f31 60%,var(--panel))}
.promo-card.art-ludo{background:
  radial-gradient(300px 160px at 92% 0%,rgba(251,77,94,.20),transparent 60%),
  radial-gradient(300px 160px at 0% 110%,rgba(56,189,248,.16),transparent 60%),
  linear-gradient(150deg,#2b1660,#160b31 60%,var(--panel))}
.vip-card{position:relative;overflow:hidden}
.vip-card::after{
  content:"";position:absolute;right:-14px;bottom:-18px;width:84px;height:84px;
  background:url("../img/logo-mark.svg") center/contain no-repeat;
  opacity:.08;pointer-events:none;transform:rotate(-10deg);
}

/* ================= league page ================= */
.league-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(560px 240px at 92% -10%,rgba(232,179,75,.13),transparent 60%),
    radial-gradient(640px 280px at 0% 115%,rgba(124,58,237,.20),transparent 62%),
    linear-gradient(150deg,#241640,#140d29 62%,var(--panel));
}
.league-hero::before{
  content:"";position:absolute;right:-30px;top:50%;width:250px;height:250px;
  transform:translateY(-50%) rotate(-8deg);
  background:url("../img/logo-mark.svg") center/contain no-repeat;
  opacity:.10;pointer-events:none;
}
.league-hero>*{position:relative}
.division .panel-head h2{display:flex;align-items:center;gap:10px}
.division .panel-head h2::before{
  content:"";flex:0 0 auto;width:4px;height:20px;border-radius:2px;background:var(--accent-2);
}
.division-gold .panel-head h2::before{background:linear-gradient(180deg,#f5cd6b,var(--gold));box-shadow:0 0 10px rgba(232,179,75,.45)}
.division-silver .panel-head h2::before{background:linear-gradient(180deg,#e8ecf4,#9aa3b5)}
.division-bronze .panel-head h2::before{background:linear-gradient(180deg,#eda96f,#b06a32)}
.grand-cup{
  overflow:hidden;
  border-color:rgba(232,179,75,.38);
  background:
    radial-gradient(520px 220px at 95% -20%,rgba(232,179,75,.16),transparent 62%),
    linear-gradient(160deg,#2e2110,#171126 58%,var(--panel));
}
.grand-cup::before{
  content:"";position:absolute;right:-24px;top:50%;width:230px;height:230px;
  transform:translateY(-50%) rotate(-8deg);left:auto;
  background:url("../img/logo-mark.svg") center/contain no-repeat;
  opacity:.13;pointer-events:none;
}
.grand-cup>*{position:relative}

/* ================= game hero bands ================= */
.game-hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:20px;
  padding:20px 22px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.07);
  background:linear-gradient(140deg,#241640,#130c26 62%,var(--panel));
}
.game-hero .play-head{flex:1 1 auto;min-width:0;margin:0;align-items:center;position:relative;z-index:1}
.game-hero-icon{
  flex:0 0 auto;width:88px;height:88px;position:relative;z-index:1;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));
}
.game-hero::before{
  content:"";position:absolute;right:-24px;top:50%;width:290px;height:290px;
  transform:translateY(-50%);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.08;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 74%);
          mask-image:radial-gradient(closest-side,#000 25%,transparent 74%);
}
/* slow sheen sweep — the only motion in this layer */
.game-hero::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.05) 50%,transparent);
  transform:translateX(-160%) skewX(-12deg);
  animation:heroSheen 8s ease-in-out infinite;pointer-events:none;
}
@keyframes heroSheen{0%,55%{transform:translateX(-160%) skewX(-12deg)}85%,100%{transform:translateX(320%) skewX(-12deg)}}
.game-hero-oware{background:
  radial-gradient(480px 200px at 95% -20%,rgba(232,179,75,.15),transparent 60%),
  linear-gradient(140deg,#2c1c50,#150e2c 62%,var(--panel))}
.game-hero-oware::before{background-image:url("../img/motif-pits.svg")}
.game-hero-ludo{background:
  radial-gradient(420px 200px at 0% -20%,rgba(251,77,94,.16),transparent 60%),
  radial-gradient(420px 200px at 100% 120%,rgba(56,189,248,.15),transparent 60%),
  linear-gradient(140deg,#2a1655,#130c26 62%,var(--panel))}
.game-hero-ludo::before{background-image:url("../img/motif-dice.svg")}
.game-hero-whot{background:
  radial-gradient(480px 200px at 95% -20%,rgba(167,139,250,.20),transparent 60%),
  linear-gradient(140deg,#2f1760,#150e2c 62%,var(--panel))}
.game-hero-whot::before{background-image:url("../img/motif-star.svg")}
.game-hero-pool{background:
  radial-gradient(480px 200px at 95% -20%,rgba(45,212,191,.12),transparent 60%),
  linear-gradient(140deg,#10382a,#0d1522 62%,var(--panel))}
.game-hero-pool::before{background-image:url("../img/motif-rack.svg")}
.game-hero-cribbage{background:
  radial-gradient(480px 200px at 95% -20%,rgba(198,40,40,.16),transparent 60%),
  linear-gradient(140deg,#3d0d10,#180609 62%,var(--panel))}
.game-hero-cribbage::before{background-image:url("../img/logo-mark.svg")}
.game-hero-draughts::before,.game-hero-chess::before{
  background-image:repeating-conic-gradient(rgba(244,242,255,.55) 0% 25%,transparent 0% 50%);
  background-size:84px 84px;background-repeat:repeat;opacity:.035;
}
.game-hero-chess{background:linear-gradient(140deg,#201c48,#100e26 62%,var(--panel))}

@media (max-width:700px){
  .game-hero{gap:14px;padding:16px}
  .game-hero-icon{width:60px;height:60px}
  .game-hero::before{width:200px;height:200px}
  .ambience::before{width:280px;height:280px}
}

/* ================= Lite mode: flatten everything ================= */
html[data-experience="lite"] .ambience{display:none}
html[data-experience="lite"] .panel::before{display:none}
html[data-experience="lite"] .promo-card::before,
html[data-experience="lite"] .vip-card::after,
html[data-experience="lite"] .league-hero::before,
html[data-experience="lite"] .grand-cup::before,
html[data-experience="lite"] .game-hero::before,
html[data-experience="lite"] .game-hero-cribbage::before,
html[data-experience="lite"] .game-hero::after{display:none}
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"] .league-hero,
html[data-experience="lite"] .grand-cup,
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-whot,
html[data-experience="lite"] .game-hero-pool,
html[data-experience="lite"] .game-hero-cribbage,
html[data-experience="lite"] .game-hero-chess{background:var(--panel)}
html[data-experience="lite"] .art-oware,
html[data-experience="lite"] .art-ludo,
html[data-experience="lite"] .art-draughts,
html[data-experience="lite"] .art-chess,
html[data-experience="lite"] .art-whot,
html[data-experience="lite"] .art-cribbage,
html[data-experience="lite"] .art-pool{background:linear-gradient(160deg,var(--panel-2),var(--panel) 72%)}
html[data-experience="lite"] .live-strip{background:var(--panel);border-color:var(--line)}
html[data-experience="lite"] .grand-cup{border-color:var(--line)}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  .game-hero::after{animation:none;display:none}
}