/* Cinematic game-world backgrounds for the landing page (loaded only for the "Cinematic" themes). */
.scenes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; display: none; background: var(--bg); }
html[data-fx] .scenes { display: block; }
html[data-fx] .bgfx { display: none; }
.scene { position: absolute; inset: 0; display: none; }
html[data-fx="warzone"] .sc-warzone, html[data-fx="neonrain"] .sc-neonrain, html[data-fx="space"] .sc-space,
html[data-fx="frost"] .sc-frost, html[data-fx="jungle"] .sc-jungle { display: block; }
.scene > * { position: absolute; }
.scene .sky { inset: 0; }
.scene .shade { inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.12) 36%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.62)); }
.scene .lay { left: 0; right: 0; bottom: 0; will-change: transform; }
.scene .lay svg { display: block; width: 100%; height: 100%; }
.l1 { height: 46vh; } .l2 { height: 36vh; } .l3 { height: 26vh; }
#fxc { position: absolute; inset: 0; width: 100%; height: 100%; }

/* content stays readable on top of the scene */
html[data-fx] .sec.alt, html[data-fx] .ticker, html[data-fx] .foot { background: color-mix(in srgb, var(--bg2) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-fx] .mc, html[data-fx] .fc, html[data-fx] .tile, html[data-fx] .step, html[data-fx] .statrow > div, html[data-fx] .board, html[data-fx] .drop, html[data-fx] .pill {
  background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-fx] .hero h1, html[data-fx] .hero .lead { text-shadow: 0 2px 26px rgba(0,0,0,.6); }

/* ---------- 1. Warzone dusk ---------- */
.sc-warzone { --s1: #3a1409; --s2: #240c06; --s3: #0e0503; }
.sc-warzone .sky { background: linear-gradient(180deg, #14070a 0%, #3b0f10 34%, #a8330c 66%, #f08a1c 88%, #ffc15a 100%); }
.sc-warzone .sun { left: 62%; bottom: 20vh; width: 38vmax; height: 38vmax; margin-left: -19vmax; border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0 18%, #ffb347 34%, rgba(255,120,30,.45) 52%, transparent 70%); animation: sunbeat 7s ease-in-out infinite alternate; }
@keyframes sunbeat { from { transform: scale(.94); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }
.sc-warzone svg, .sc-warzone .l1 svg { fill: var(--s1); } .sc-warzone .l2 svg { fill: var(--s2); } .sc-warzone .l3 svg { fill: var(--s3); }
.beam { bottom: 0; width: 30vmax; height: 96vh; transform-origin: 50% 100%; clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); background: linear-gradient(to top, rgba(255,236,190,.34), rgba(255,236,190,0) 88%); mix-blend-mode: screen; }
.sc-warzone .b1 { left: 8%; margin-left: -15vmax; animation: sweep 11s ease-in-out infinite alternate; }
.sc-warzone .b2 { left: 84%; margin-left: -15vmax; animation: sweep 13s ease-in-out -5s infinite alternate-reverse; }
@keyframes sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
.smk { border-radius: 50%; filter: blur(46px); background: rgba(20,8,6,.55); width: 60vmax; height: 24vmax; bottom: 18vh; animation: smoke 30s linear infinite; }
.sc-warzone .s1 { left: -30vmax; } .sc-warzone .s2 { left: -30vmax; bottom: 30vh; opacity: .6; animation-duration: 44s; animation-delay: -18s; }
@keyframes smoke { from { transform: translateX(0); } to { transform: translateX(150vw); } }

/* ---------- 2. Neon rain city ---------- */
.sc-neonrain { --s1: #1a0a33; --s2: #0f0620; --s3: #060211; }
.sc-neonrain .sky { background: linear-gradient(180deg, #05020d 0%, #12062b 42%, #3a0b5c 72%, #a21e86 92%, #ff4fa8 100%); }
.sc-neonrain .sun { left: 50%; bottom: 24vh; width: 34vmax; height: 34vmax; margin-left: -17vmax; border-radius: 50%; background: linear-gradient(180deg, #ffe45e 0%, #ff4fa8 55%, #8a2be2 100%); opacity: .9;
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 66%, transparent 66% 72%, #000 72% 80%, transparent 80% 87%, #000 87%); mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 66%, transparent 66% 72%, #000 72% 80%, transparent 80% 87%, #000 87%);
  animation: sunbeat 9s ease-in-out infinite alternate; }
.sc-neonrain .l1 svg { fill: var(--s1); } .sc-neonrain .l2 svg { fill: var(--s2); } .sc-neonrain .l3 svg { fill: var(--s3); }
.sc-neonrain .w { fill: #ffe6a8; opacity: .85; animation: blink 6s steps(1) infinite; }
.sc-neonrain .wins .w:nth-child(3n) { fill: #26e6ff; } .sc-neonrain .wins .w:nth-child(4n+1) { fill: #ff3da6; }
@keyframes blink { 0%, 38% { opacity: .9; } 40%, 58% { opacity: .08; } 60%, 100% { opacity: .9; } }
.sc-neonrain .beam { background: linear-gradient(to top, rgba(38,230,255,.3), rgba(38,230,255,0) 88%); height: 80vh; }
.sc-neonrain .b1 { left: 20%; margin-left: -15vmax; animation: sweep 9s ease-in-out infinite alternate; }
.sc-neonrain .b2 { left: 76%; margin-left: -15vmax; background: linear-gradient(to top, rgba(255,61,166,.3), rgba(255,61,166,0) 88%); animation: sweep 12s ease-in-out -4s infinite alternate-reverse; }
.flash { inset: 0; background: radial-gradient(ellipse at 30% 10%, #cfe6ff, rgba(130,170,255,.4) 40%, transparent 70%); opacity: 0; animation: flash 13s linear infinite; mix-blend-mode: screen; }
@keyframes flash { 0%, 91%, 100% { opacity: 0; } 92% { opacity: .5; } 93% { opacity: .05; } 94% { opacity: .62; } 97% { opacity: 0; } }

/* ---------- 3. Deep space arena ---------- */
.sc-space .sky { background: radial-gradient(ellipse at 50% 40%, #0e1240 0%, #060a24 45%, #02030c 100%); }
.neb { border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; animation: drift 36s ease-in-out infinite alternate; }
.sc-space .n1 { width: 70vmax; height: 46vmax; left: -20vmax; top: -8vmax; background: radial-gradient(closest-side, rgba(124,140,255,.5), transparent); }
.sc-space .n2 { width: 60vmax; height: 50vmax; right: -22vmax; top: 22vh; background: radial-gradient(closest-side, rgba(199,125,255,.42), transparent); animation-duration: 44s; animation-direction: alternate-reverse; }
.sc-space .n3 { width: 54vmax; height: 30vmax; left: 10vmax; bottom: -8vmax; background: radial-gradient(closest-side, rgba(38,230,255,.28), transparent); animation-duration: 52s; }
@keyframes drift { to { transform: translate3d(5vmax, 4vmax, 0) scale(1.12); } }
.pl { right: 4vmax; bottom: 6vh; width: 52vmin; height: 52vmin; animation: floaty 20s ease-in-out infinite alternate; }
@keyframes floaty { to { transform: translate3d(-1.2vmax, -1.4vmax, 0); } }
.pb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #a9b8ff 0%, #5a56d6 34%, #25186e 62%, #0a0724 100%); box-shadow: inset -3vmin -2vmin 6vmin rgba(0,0,10,.75), 0 0 9vmin rgba(124,140,255,.35); overflow: hidden; }
.pb::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(172deg, rgba(255,255,255,.07) 0 3%, transparent 3% 9%); mix-blend-mode: overlay; animation: bands 24s linear infinite; }
@keyframes bands { to { background-position: 0 40vmin; } }
.pl::before, .pl::after { content: ''; position: absolute; left: -34%; right: -34%; top: 38%; height: 26%; border-radius: 50%; border: .55vmin solid rgba(214,190,255,.5); box-shadow: 0 0 2vmin rgba(199,125,255,.3); transform: rotate(-16deg); }
.pl::before { z-index: -1; }
.pl::after { clip-path: inset(50% 0 0 0); }
.moon2 { position: absolute; width: 11vmin; height: 11vmin; border-radius: 50%; left: -26%; top: 6%; background: radial-gradient(circle at 34% 32%, #fff 0%, #b9c0dd 40%, #4b5173 100%); box-shadow: inset -1.4vmin -1vmin 2.4vmin rgba(0,0,10,.7); }

/* ---------- 4. Frozen frontier ---------- */
.sc-frost { --s1: #1d6180; --s2: #0e3d58; --s3: #04121d; }
.sc-frost .sky { background: linear-gradient(180deg, #020a18 0%, #05213a 46%, #0b4558 82%, #1b7a86 100%); }
.au { width: 78vw; height: 70vh; top: -4vh; filter: blur(34px); mix-blend-mode: screen; transform-origin: 50% 100%; opacity: .75;
  background: linear-gradient(180deg, transparent 0%, rgba(61,232,200,.62) 38%, rgba(106,168,255,.38) 70%, transparent 100%); animation: aurora 16s ease-in-out infinite alternate; }
.sc-frost .a1 { left: -14vw; transform: skewX(-18deg); } .sc-frost .a2 { left: 26vw; background: linear-gradient(180deg, transparent, rgba(120,255,160,.5) 40%, rgba(61,232,200,.3) 72%, transparent); animation-duration: 21s; animation-direction: alternate-reverse; }
.sc-frost .a3 { left: 52vw; width: 60vw; background: linear-gradient(180deg, transparent, rgba(170,120,255,.5) 42%, rgba(106,168,255,.3) 72%, transparent); animation-duration: 25s; }
@keyframes aurora { 0% { transform: skewX(-18deg) translateX(-4vw) scaleY(.82); opacity: .45; } 50% { opacity: .85; } 100% { transform: skewX(14deg) translateX(6vw) scaleY(1.08); opacity: .62; } }
.sc-frost .l1 svg { fill: var(--s1); } .sc-frost .l2 svg { fill: var(--s2); } .sc-frost .l3 svg { fill: var(--s3); }
.sc-frost .cap { fill: #e6f8ff; opacity: .7; }

/* ---------- 5. Jungle ruins ---------- */
.sc-jungle { --s1: #0c3a29; --s2: #072419; --s3: #020d08; }
.sc-jungle .sky { background: linear-gradient(180deg, #020c08 0%, #06281e 50%, #0e5a3e 88%, #2f9a6a 100%); }
.moon { left: 46%; top: 9vh; width: 15vmin; height: 15vmin; margin-left: -7.5vmin; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fbfff2 0%, #d9f5c8 45%, #9fd9a8 100%); box-shadow: 0 0 6vmin rgba(214,255,190,.55), 0 0 18vmin rgba(150,255,170,.3); animation: sunbeat 10s ease-in-out infinite alternate; }
.ray { left: 46%; top: 12vh; width: 30vmax; height: 120vh; transform-origin: 50% 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(22px); background: linear-gradient(180deg, rgba(214,255,190,.2), rgba(214,255,190,0) 75%); mix-blend-mode: screen; margin-left: -15vmax; animation: raysway 14s ease-in-out infinite alternate; }
.sc-jungle .r1 { transform: rotate(-20deg); } .sc-jungle .r2 { transform: rotate(14deg); animation-delay: -6s; opacity: .8; }
@keyframes raysway { from { opacity: .35; } to { opacity: 1; } }
.sc-jungle .l1 svg { fill: var(--s1); } .sc-jungle .l2 svg { fill: var(--s2); } .sc-jungle .l3 svg { fill: var(--s3); }
.mist { left: -40vw; width: 180vw; height: 22vh; border-radius: 50%; filter: blur(28px); background: radial-gradient(closest-side, rgba(190,255,220,.24), transparent); animation: mistmove 34s ease-in-out infinite alternate; }
.sc-jungle .m1 { bottom: 20vh; } .sc-jungle .m2 { bottom: 8vh; animation-duration: 46s; animation-direction: alternate-reverse; opacity: .8; }
@keyframes mistmove { to { transform: translateX(22vw); } }

@media (max-width: 700px) {
  .l1 { height: 40vh; } .l2 { height: 31vh; } .l3 { height: 22vh; }
  .pl { width: 62vmin; height: 62vmin; right: -10vmin; bottom: 8vh; }
}
@media (prefers-reduced-motion: reduce) { .scene *, .scene *::before, .scene *::after { animation: none !important; } }
.lite .scene *, .lite .scene *::before, .lite .scene *::after { animation: none !important; }