/* World backdrops — six per-boss scenes rendered at native 1080×1920 inside a
   <BackdropStage> that scales to fit. Class names mirror v2-assets/bg-boss
   originals so future re-imports remain mechanical. All animations are gated
   behind prefers-reduced-motion. */

/* ============ SHARED STAGE ============ */
.bg-stage-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
  height: 1920px;
  transform-origin: top left;
  pointer-events: none;
  /* transform: scale(...) is set inline by BackdropStage. */
}

/* ============ 01 · ALLEY ============ */
.bg-alley { position:relative; width:100%; height:100%; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 35% at 50% 62%, #4a2818 0%, transparent 60%),
    linear-gradient(180deg, #1d1018 0%, #2a1a14 38%, #1a0e10 70%, #0a0608 100%);
}
.bg-alley .sky-haze { position:absolute; left:0; right:0; top:0; height:380px; background:
  radial-gradient(ellipse 60% 100% at 50% 100%, rgba(214,118,42,0.35) 0%, transparent 70%),
  linear-gradient(180deg, #1a0c10 0%, #2a1410 100%);
}
.bg-alley .star { position:absolute; width:2px; height:2px; background:#fff8c8; opacity:0.6; border-radius:50%; }
.bg-alley .wall {
  position:absolute; top:80px; bottom:0; width:320px;
  background:
    repeating-linear-gradient(0deg, transparent 0 70px, rgba(0,0,0,0.45) 70px 74px),
    repeating-linear-gradient(90deg, transparent 0 130px, rgba(0,0,0,0.3) 130px 134px),
    linear-gradient(90deg, #2a1612 0%, #3d2218 60%, #321810 100%);
}
.bg-alley .wall.left { left:0; }
.bg-alley .wall.right { right:0; transform: scaleX(-1); }
.bg-alley .roof-l { position:absolute; left:0; top:60px; width:320px; height:40px; background:#0a0608;
  clip-path: polygon(0 100%, 0 30%, 60px 30%, 60px 0, 180px 0, 180px 50%, 280px 50%, 280px 20%, 320px 20%, 320px 100%); }
.bg-alley .roof-r { position:absolute; right:0; top:60px; width:320px; height:40px; background:#0a0608;
  clip-path: polygon(100% 100%, 100% 30%, 260px 30%, 260px 0, 140px 0, 140px 50%, 40px 50%, 40px 20%, 0 20%, 0 100%); }
.bg-alley .win { position:absolute; width:46px; height:62px; background:#fde18a;
  box-shadow: 0 0 24px rgba(253,225,138,0.5); border:3px solid #1a0e08;
  background-image: linear-gradient(rgba(0,0,0,0.25) 50%, transparent 50%),
                    linear-gradient(90deg, rgba(0,0,0,0.25) 50%, transparent 50%);
  background-size: 100% 50%, 50% 100%;
}
.bg-alley .win.dim { background:#5a4828; box-shadow:none; opacity:0.55; }
.bg-alley .fe-rail { position:absolute; right:300px; background:#1a0a06; }
.bg-alley .fe-floor { position:absolute; right:200px; height:8px; width:120px; background:#1a0a06; }
.bg-alley .fe-grate { position:absolute; right:200px; width:120px; height:34px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, #1a0a06 10px 14px);
  border-bottom:4px solid #1a0a06;
}
.bg-alley .tag { position:absolute; left:60px; top:560px; font-family: 'Brush Script MT', cursive;
  font-size:120px; color:#d04a78; transform: rotate(-8deg); opacity:0.8;
  text-shadow: 4px 4px 0 #4a1a30, 0 0 30px rgba(208,74,120,0.4);
  font-weight:900;
}
.bg-alley .neon { position:absolute; right:340px; top:300px; padding:14px 22px;
  border:3px solid #4ad8e8; border-radius:6px; color:#4ad8e8;
  font-family: 'Helvetica', sans-serif; font-weight:900; font-size:34px; letter-spacing:6px;
  text-shadow: 0 0 14px #4ad8e8, 0 0 28px #4ad8e8;
  box-shadow: 0 0 24px rgba(74,216,232,0.6), inset 0 0 10px rgba(74,216,232,0.3);
  background: rgba(10,30,40,0.4);
  animation: bg-alley-flicker 4s infinite;
}
@keyframes bg-alley-flicker { 0%,8%,12%,100% { opacity:1; } 10% { opacity:0.4; } 11% { opacity:0.9; } }
.bg-alley .lamp-pole { position:absolute; left:50%; top:60px; width:6px; height:300px; background:linear-gradient(180deg,#0a0608,#1a0e08); transform: translateX(-50%); }
.bg-alley .lamp-arm { position:absolute; left:50%; top:140px; width:120px; height:6px; background:#0a0608; transform: translateX(-50%); }
.bg-alley .lamp-shade { position:absolute; left:50%; top:144px; width:80px; height:34px;
  background: linear-gradient(180deg, #1a0a06 0%, #0a0404 100%); transform: translateX(-50%);
  border-radius: 0 0 50% 50%; border: 2px solid #1a0a06; }
.bg-alley .lamp-bulb { position:absolute; left:50%; top:170px; width:24px; height:24px;
  background: radial-gradient(circle, #fff8d8 0%, #fdd060 60%, #d68038 100%);
  transform: translateX(-50%); border-radius: 50%;
  box-shadow: 0 0 28px 8px #fdb058, 0 0 80px 30px rgba(253,176,88,0.4);
  animation: bg-alley-buzz 2.4s infinite;
}
@keyframes bg-alley-buzz { 0%,90%,100% { opacity:1; } 92% { opacity:0.7; } 94% { opacity:1; } 95% { opacity:0.6; } 97% { opacity:1; } }
.bg-alley .lamp-cone { position:absolute; left:50%; top:180px; width:920px; height:1100px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(253,176,88,0.22) 0%, rgba(214,128,56,0.10) 40%, transparent 80%);
  transform: translateX(-50%);
  clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0% 100%);
  pointer-events:none;
}
.bg-alley .pool { position:absolute; left:50%; top:1180px; width:760px; height:240px;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(253,176,88,0.32) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events:none;
}
.bg-alley .ground { position:absolute; left:0; right:0; bottom:0; height:480px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(253,176,88,0.12) 0%, transparent 70%),
    linear-gradient(180deg, #1a0e0a 0%, #0a0606 100%);
}
.bg-alley .ground::after { content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(110deg, transparent 0 80px, rgba(255,255,255,0.04) 80px 82px),
    repeating-linear-gradient(70deg, transparent 0 70px, rgba(255,255,255,0.03) 70px 72px);
  opacity:0.6;
}
.bg-alley .puddle { position:absolute; border-radius:50%;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(60,180,200,0.45) 0%, rgba(40,120,140,0.2) 50%, transparent 80%);
  filter: blur(1px);
}
.bg-alley .can { position:absolute; width:140px; height:170px;
  background: linear-gradient(180deg, #4a3020 0%, #2a1810 100%);
  border-radius: 8px 8px 4px 4px;
  border-top: 6px solid #5a3828;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}
.bg-alley .can::before { content:''; position:absolute; left:0; right:0; top:0; height:8px;
  background:#1a0e08; border-radius: 8px 8px 0 0; }
.bg-alley .can::after { content:''; position:absolute; inset: 30px 14px 30px 14px;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.4) 4px 6px);
  opacity:0.7;
}
.bg-alley .dumpster { position:absolute; width:340px; height:160px;
  background: linear-gradient(180deg, #5a8038 0%, #2a4a18 100%);
  border-radius: 6px 6px 14px 14px;
  border-top: 8px solid #6a9048;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 -8px 0 #1a3008 inset;
  transform: rotate(-18deg);
}
.bg-alley .dumpster::before { content:''; position:absolute; left:20px; right:20px; top:14px; height:18px;
  background: rgba(0,0,0,0.4); border-radius: 4px;
}
.bg-alley .trash { position:absolute; }
.bg-alley .wrap-1 { width:30px; height:14px; background:#d8c060; transform: rotate(20deg); }
.bg-alley .wrap-2 { width:24px; height:24px; background:#c0a0a0; border-radius:50% 0 50% 50%; transform: rotate(-30deg); }
.bg-alley .wrap-3 { width:40px; height:18px; background:#a04830; transform: rotate(45deg); }
.bg-alley .card-1 { width:80px; height:60px; background: linear-gradient(180deg, #8a6038 0%, #5a3818 100%); transform: rotate(-12deg); border-radius: 2px; }

/* ============ 02 · PARK ============ */
.bg-park {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 30% at 50% 66%, rgba(255,232,150,0.55) 0%, rgba(255,232,150,0.2) 40%, transparent 75%),
    radial-gradient(ellipse 90% 30% at 50% 48%, rgba(255,240,180,0.35) 0%, transparent 70%),
    linear-gradient(180deg,
      #6ab8d8 0%, #94d0e0 16%, #c8e8b8 36%, #98c868 52%, #6aa838 70%, #3e7a28 88%, #1e4a14 100%);
}
.bg-park .sky { position:absolute; left:0; right:0; top:0; height:380px;
  background: linear-gradient(180deg, #6ab8d8 0%, #8acce0 30%, #b8dde8 60%, rgba(184,221,232,0) 100%);
}
.bg-park .sun {
  position:absolute; left:50%; top:60px; width:220px; height:220px;
  transform: translateX(-50%); border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff4c0 35%, #ffd870 65%, rgba(255,216,112,0) 90%);
  box-shadow: 0 0 60px 20px rgba(255,236,160,0.55), 0 0 160px 60px rgba(255,200,80,0.35);
}
.bg-park .sun::after {
  content:''; position:absolute; inset:-30px; border-radius:50%;
  background: radial-gradient(circle, transparent 55%, rgba(255,200,80,0.18) 65%, transparent 80%);
}
.bg-park .rays { position:absolute; left:50%; top:0; width:2000px; height:1900px;
  transform: translateX(-50%); pointer-events:none; opacity:0.7;
  background:
    linear-gradient(178deg, transparent 49.4%, rgba(255,240,180,0.18) 50%, transparent 50.6%),
    linear-gradient(184deg, transparent 49.4%, rgba(255,240,180,0.13) 50%, transparent 50.6%),
    linear-gradient(192deg, transparent 49.4%, rgba(255,240,180,0.10) 50%, transparent 50.6%),
    linear-gradient(172deg, transparent 49.4%, rgba(255,240,180,0.13) 50%, transparent 50.6%),
    linear-gradient(165deg, transparent 49.4%, rgba(255,240,180,0.09) 50%, transparent 50.6%);
  mask-image: radial-gradient(ellipse 60% 80% at 50% 6%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 6%, black 0%, transparent 70%);
}
.bg-park .cloud {
  position:absolute;
  background: radial-gradient(ellipse 60% 100% at 30% 60%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%),
              radial-gradient(ellipse 50% 100% at 70% 60%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%),
              radial-gradient(ellipse 70% 100% at 50% 70%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%);
  filter: blur(1px);
}
.bg-park .canopy-arch { position:absolute; left:-40px; right:-40px; top:0; height:560px; pointer-events:none; }
.bg-park .leaf-mass {
  position:absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6aa838 0%, #4a8830 35%, #2e6818 75%, #1c4810 100%);
  box-shadow:
    inset -22px -34px 50px rgba(0,0,0,0.35),
    inset 26px 30px 50px rgba(180,220,80,0.35);
}
.bg-park .leaf-mass::before {
  content:''; position:absolute; left:14%; top:10%; width:50%; height:40%;
  background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(220,240,140,0.75) 0%, transparent 70%);
  border-radius: 50%; filter: blur(2px);
}
.bg-park .leaf-mass::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 22% 28%, rgba(120,180,60,0.5) 0 14px, transparent 16px),
    radial-gradient(circle at 38% 18%, rgba(160,200,70,0.45) 0 10px, transparent 12px),
    radial-gradient(circle at 65% 32%, rgba(120,180,60,0.4) 0 16px, transparent 18px),
    radial-gradient(circle at 75% 60%, rgba(60,120,30,0.5) 0 18px, transparent 20px),
    radial-gradient(circle at 25% 70%, rgba(60,120,30,0.45) 0 14px, transparent 16px),
    radial-gradient(circle at 55% 78%, rgba(40,100,20,0.5) 0 18px, transparent 20px),
    radial-gradient(circle at 88% 24%, rgba(160,200,70,0.4) 0 8px, transparent 10px);
  mix-blend-mode: multiply; opacity: 0.7;
}
.bg-park .tree { position:absolute; }
.bg-park .trunk-base {
  position:absolute;
  background: linear-gradient(90deg, #2a160a 0%, #4a2a14 22%, #7a4a26 50%, #5a3018 78%, #2a160a 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.45);
}
.bg-park .trunk-base::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(91deg, transparent 0 14px, rgba(0,0,0,0.45) 14px 16px, transparent 16px 32px),
    repeating-linear-gradient(89deg, transparent 0 22px, rgba(255,200,140,0.08) 22px 24px),
    radial-gradient(ellipse 50% 100% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 70%);
}
.bg-park .trunk-base::after {
  content:''; position:absolute; left:30%; top:30%; width:24px; height:34px;
  background: radial-gradient(ellipse, #1a0c04 0%, #3a1c0a 60%, transparent 100%);
  border-radius: 50%;
}
.bg-park .tree-shadow {
  position:absolute; border-radius:50%;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(0,40,10,0.55) 0%, transparent 75%);
  filter: blur(8px);
}
.bg-park .ground {
  position:absolute; left:0; right:0; top:1020px; bottom:0;
  background:
    radial-gradient(ellipse 60% 35% at 50% 35%, rgba(255,236,150,0.55) 0%, rgba(255,236,150,0.18) 50%, transparent 80%),
    linear-gradient(180deg, #7ec038 0%, #5ea428 30%, #4a8a20 60%, #2e5e14 100%);
}
.bg-park .ground::before {
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(82deg, transparent 0 6px, rgba(40,80,20,0.22) 6px 7px),
    repeating-linear-gradient(98deg, transparent 0 9px, rgba(255,240,160,0.07) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(0,0,0,0.06) 22px 24px);
  opacity:0.85;
}
.bg-park .ground::after {
  content:''; position:absolute; left:0; right:0; top:0; height:140px;
  background: linear-gradient(180deg, rgba(0,30,10,0.55) 0%, transparent 100%);
}
.bg-park .dapple {
  position:absolute; border-radius:50%; pointer-events:none; filter: blur(3px);
  background: radial-gradient(circle, rgba(255,238,160,0.55) 0%, rgba(255,236,140,0.18) 50%, transparent 80%);
  mix-blend-mode: screen;
}
.bg-park .bench { position:absolute; left:50%; top:760px; transform: translateX(-50%); width:380px; height:160px; }
.bg-park .bench-back {
  position:absolute; left:14px; right:14px; top:0; height:54px;
  background:
    repeating-linear-gradient(90deg, #3a200e 0 10px, rgba(0,0,0,0) 10px 18px),
    linear-gradient(180deg, #8c5028 0%, #5a3018 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 14px rgba(0,0,0,0.5), 0 4px 0 rgba(0,0,0,0.4);
}
.bg-park .bench-seat {
  position:absolute; left:0; right:0; top:60px; height:28px;
  background: linear-gradient(180deg, #a06038 0%, #6a3818 60%, #4a2410 100%);
  border-radius: 4px;
  box-shadow: 0 6px 0 rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.4);
}
.bg-park .bench-seat::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, transparent 70%, rgba(255,200,140,0.25) 100%);
}
.bg-park .bench-leg {
  position:absolute; bottom:0; width:18px; height:80px;
  background: linear-gradient(180deg, #2a1808 0%, #150a04 100%);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}
.bg-park .bench-armrest {
  position:absolute; top:14px; width:14px; height:64px;
  background: linear-gradient(180deg, #4a2410 0%, #2a1808 100%);
  border-radius: 6px;
}
.bg-park .bench-shadow {
  position:absolute; left:-10px; right:-10px; bottom:-30px; height:30px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,30,10,0.5) 0%, transparent 70%);
  filter: blur(4px);
}
.bg-park .fountain { position:absolute; right:50px; top:660px; width:260px; height:340px; }
/* Fountain. Read bottom-up: basin on the ground → column → upper dish → jet,
   with water falling from the dish back into the basin.

   The previous build put a 260px-wide stone ellipse under a 210px bowl, so the
   widest thing in the silhouette was the ground, not the water — it read as a
   blue dish resting on a mound of dirt. The basin is now the widest element and
   the falling water is what names the object. */
.bg-park .ft-basin {
  position:absolute; left:0; right:0; bottom:0; height:104px;
  background: radial-gradient(ellipse 78% 120% at 50% 8%, #ded3c0 0%, #b0a48e 30%, #7a6e58 68%, #443c2e 100%);
  border-radius: 50% / 42% 42% 58% 58%;
  box-shadow: inset 0 -26px 40px rgba(0,0,0,0.5), 0 10px 16px rgba(0,0,0,0.38);
}
/* Carved band around the outside — gives the stone visible thickness. */
.bg-park .ft-basin::after {
  content:''; position:absolute; left:6%; right:6%; top:44%; height:16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.28));
  border-radius: 50%;
}
.bg-park .ft-water {
  position:absolute; left:20px; right:20px; top:9px; height:52px;
  border-radius: 50%;
  background: radial-gradient(ellipse 55% 120% at 50% 26%, rgba(226,246,252,0.92) 0%, rgba(112,178,198,0.85) 34%, rgba(40,96,126,0.92) 100%);
  box-shadow: inset 0 7px 14px rgba(0,0,0,0.45), inset 0 -4px 10px rgba(200,240,255,0.35);
}
/* Concentric rings where the falling water lands. */
.bg-park .ft-water::after {
  content:''; position:absolute; left:22%; right:22%; top:34%; bottom:20%;
  border-radius:50%;
  border:2px solid rgba(235,250,255,0.5);
  box-shadow: 0 0 0 6px rgba(235,250,255,0.14), inset 0 0 0 5px rgba(235,250,255,0.2);
}
.bg-park .ft-column {
  position:absolute; left:50%; bottom:74px; width:44px; height:112px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #5a503e 0%, #cfc4b2 34%, #e6dccb 46%, #9a8e78 78%, #4e4636 100%);
  border-radius: 6px;
}
/* Moulding at the foot and the neck, so the column is turned stone and not a pipe. */
.bg-park .ft-column::before {
  content:''; position:absolute; left:-13px; right:-13px; bottom:-6px; height:20px;
  background: radial-gradient(ellipse 70% 120% at 50% 20%, #ded3c0 0%, #8a7e68 70%, #453d2f 100%);
  border-radius:50%;
}
.bg-park .ft-column::after {
  content:''; position:absolute; left:-9px; right:-9px; top:-4px; height:16px;
  background: radial-gradient(ellipse 70% 120% at 50% 25%, #ded3c0 0%, #8a7e68 75%, #453d2f 100%);
  border-radius:50%;
}
.bg-park .ft-dish {
  position:absolute; left:50%; bottom:176px; width:138px; height:44px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 62% 120% at 50% 12%, #ded3c0 0%, #a89c86 42%, #6a5e4a 100%);
  border-radius: 50% / 40% 40% 60% 60%;
  box-shadow: 0 7px 12px rgba(0,0,0,0.35);
}
/* The water the dish holds, brimming at its lip. */
.bg-park .ft-dish::after {
  content:''; position:absolute; left:11px; right:11px; top:6px; height:17px;
  border-radius:50%;
  background: radial-gradient(ellipse 55% 120% at 50% 30%, rgba(232,250,255,0.95) 0%, rgba(120,186,206,0.85) 60%, rgba(48,108,138,0.9) 100%);
}
/* Two curtains of water from the dish lip down into the basin. This is the
   element that makes the whole thing read as a fountain rather than a birdbath. */
.bg-park .ft-fall {
  position:absolute; bottom:88px; width:15px; height:92px;
  background: linear-gradient(180deg, rgba(236,250,255,0.85) 0%, rgba(178,222,238,0.62) 55%, rgba(150,205,225,0.22) 100%);
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
  filter: blur(0.6px);
}
.bg-park .ft-fall.left  { left:50%;  margin-left:-58px; transform: rotate(3deg); }
.bg-park .ft-fall.right { right:50%; margin-right:-58px; transform: rotate(-3deg); }
/* Splash where each curtain meets the basin. */
.bg-park .ft-fall::after {
  content:''; position:absolute; left:-11px; right:-11px; bottom:-7px; height:16px;
  background: radial-gradient(ellipse 50% 100% at 50% 60%, rgba(255,255,255,0.7) 0%, transparent 72%);
  filter: blur(2px);
}
.bg-park .ft-jet {
  position:absolute; left:50%; bottom:206px; width:13px; height:84px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, rgba(230,248,255,0.9) 34%, rgba(170,215,235,0.7) 100%);
  filter: blur(1px);
  border-radius: 50%;
}
/* The two arcs the jet throws out to the sides before they fall. */
.bg-park .ft-jet::before, .bg-park .ft-jet::after {
  content:''; position:absolute; top:14px; width:9px; height:64px;
  background: linear-gradient(180deg, transparent 0%, rgba(210,238,248,0.62) 45%, rgba(170,215,235,0.34) 100%);
  border-radius:50%;
}
.bg-park .ft-jet::before { left:-24px; transform: rotate(-15deg); }
.bg-park .ft-jet::after { right:-24px; transform: rotate(15deg); }
.bg-park .ft-mist {
  position:absolute; left:50%; bottom:262px; transform: translateX(-50%);
  width:150px; height:62px;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(255,255,255,0.5) 0%, transparent 70%);
  filter: blur(8px);
}
.bg-park .ft-shadow {
  position:absolute; left:-20px; right:-20px; bottom:-30px; height:36px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,30,10,0.55) 0%, transparent 70%);
  filter: blur(5px);
}
.bg-park .pebble {
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #b8a890 0%, #7a6a52 60%, #4a3e2a 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.bg-park .bird { position:absolute; color: rgba(40,40,30,0.55); font-size:24px; line-height:1; }
.bg-park .path {
  position:absolute; left:-40px; top:1280px; width:340px; height:260px;
  background:
    radial-gradient(circle at 18% 40%, #cfc4b2 0 16px, transparent 18px),
    radial-gradient(circle at 32% 30%, #b8a890 0 14px, transparent 16px),
    radial-gradient(circle at 48% 38%, #cfc4b2 0 18px, transparent 20px),
    radial-gradient(circle at 22% 70%, #948876 0 16px, transparent 18px),
    radial-gradient(circle at 60% 60%, #cfc4b2 0 20px, transparent 22px),
    radial-gradient(circle at 78% 38%, #b8a890 0 14px, transparent 16px),
    radial-gradient(circle at 90% 70%, #948876 0 18px, transparent 20px),
    radial-gradient(circle at 70% 80%, #cfc4b2 0 16px, transparent 18px);
  transform: rotate(-6deg);
  opacity: 0.85;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
}
.bg-park .stage-light {
  position:absolute; left:50%; top:1080px; transform: translateX(-50%);
  width: 880px; height: 740px;
  background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255,236,150,0.45) 0%, rgba(255,232,150,0.18) 45%, transparent 80%);
  pointer-events:none;
  mix-blend-mode: screen;
}
.bg-park .vignette { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 70% at 50% 60%, transparent 50%, rgba(0,0,0,0.35) 100%);
}
@keyframes bg-park-drift {
  0% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(14px, 18px) rotate(20deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.bg-park .leaf-drift { animation: bg-park-drift 6s ease-in-out infinite; }

/* ============ 03 · HARBOR ============ */
.bg-harbor { position:relative; width:100%; height:100%; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 35% at 50% 60%, rgba(80,140,160,0.25) 0%, transparent 60%),
    linear-gradient(180deg, #1a3a4a 0%, #14323e 30%, #0c2230 55%, #08161e 75%, #050a14 100%);
}
.bg-harbor .harb-sky { position:absolute; left:0; right:0; top:0; height:540px;
  background: linear-gradient(180deg, #2a4a5a 0%, #345868 40%, #406878 80%, transparent 100%);
}
.bg-harbor .harb-water { position:absolute; left:0; right:0; top:540px; height:520px;
  background: linear-gradient(180deg, #1a4858 0%, #0e2a36 60%, #061620 100%);
}
.bg-harbor .harb-water::before { content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(120,180,200,0.08) 14px 16px),
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(255,255,255,0.04) 36px 38px);
}
.bg-harbor .harb-lighthouse { position:absolute; right:140px; top:340px; width:40px; height:200px;
  background: linear-gradient(180deg, #d8d0c0 0%, #a89880 100%);
}
.bg-harbor .harb-lh-top { position:absolute; right:120px; top:300px; width:80px; height:50px;
  background: linear-gradient(180deg, #8a4030 0%, #5a2820 100%);
  border-radius: 8px 8px 0 0;
}
.bg-harbor .harb-lh-light { position:absolute; right:140px; top:340px; width:40px; height:30px;
  background: radial-gradient(circle, #ffe898 0%, #f8a040 60%, transparent 100%);
  box-shadow: 0 0 30px 10px rgba(248,160,64,0.6);
  animation: bg-harbor-lh-pulse 4s infinite;
}
@keyframes bg-harbor-lh-pulse { 0%,100%{ opacity:0.6;} 50%{ opacity:1;} }
.bg-harbor .harb-beam { position:absolute; right:160px; top:355px; width:1200px; height:600px;
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, rgba(248,200,120,0.25) 0%, rgba(248,200,120,0.06) 50%, transparent 90%);
  clip-path: polygon(0% 48%, 0% 52%, 100% 0%, 100% 100%);
  pointer-events:none;
  animation: bg-harbor-beam 7s ease-in-out infinite;
}
@keyframes bg-harbor-beam {
  0%,100% { transform: rotate(-30deg); }
  50% { transform: rotate(20deg); }
}
.bg-harbor .fog { position:absolute; left:-10%; right:-10%; height:200px;
  background: linear-gradient(180deg, transparent 0%, rgba(180,210,220,0.25) 30%, rgba(180,210,220,0.4) 50%, rgba(180,210,220,0.25) 70%, transparent 100%);
  filter: blur(30px); pointer-events:none;
}
.bg-harbor .ship { position:absolute; background: rgba(20,40,55,0.8); }
.bg-harbor .pier-deck { position:absolute; left:50%; top:1060px; transform: translateX(-50%);
  width:780px; height:860px;
  background:
    repeating-linear-gradient(0deg, #4a3220 0 60px, #5a3a26 60px 64px),
    linear-gradient(180deg, #5a3a26 0%, #3a2418 100%);
  box-shadow: 0 -8px 0 rgba(0,0,0,0.4) inset, inset 0 0 60px rgba(0,0,0,0.5);
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}
.bg-harbor .pier-deck::before { content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(0,0,0,0.4) 80px 84px),
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,0.04) 6px 7px);
}
.bg-harbor .pier-deck::after { content:''; position:absolute; left:0; right:0; top:0; height:30%;
  background: linear-gradient(180deg, rgba(120,180,200,0.18) 0%, transparent 100%);
}
.bg-harbor .post { position:absolute; bottom:-40px; width:40px; height:300px;
  background: linear-gradient(180deg, #4a3020 0%, #1a0e08 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
.bg-harbor .post::after { content:''; position:absolute; left:0; right:0; top:0; height:30px;
  background: linear-gradient(180deg, #2a1808 0%, #4a3020 100%);
  border-radius: 6px 6px 0 0;
}
.bg-harbor .rope { position:absolute; width:120px; height:60px; border-radius:50%;
  background: radial-gradient(ellipse, transparent 30%, #8a6038 30%, #6a4020 100%);
}
.bg-harbor .rope::before { content:''; position:absolute; inset:8px;
  background: radial-gradient(ellipse, transparent 30%, #a87038 30%, #5a3018 100%);
  border-radius: 50%;
}
.bg-harbor .rope::after { content:''; position:absolute; inset:0;
  background: repeating-conic-gradient(rgba(0,0,0,0.4) 0deg 8deg, transparent 8deg 14deg);
  border-radius: 50%; opacity:0.4;
}
.bg-harbor .trap { position:absolute; width:170px; height:90px;
  background:
    repeating-linear-gradient(0deg, #6a5028 0 4px, transparent 4px 18px),
    repeating-linear-gradient(90deg, #6a5028 0 4px, transparent 4px 18px),
    linear-gradient(180deg, rgba(60,40,20,0.6) 0%, rgba(40,24,12,0.8) 100%);
  border: 4px solid #5a3a1a;
  border-radius: 6px;
  box-shadow: 0 4px 0 #2a1808, inset 0 0 20px rgba(0,0,0,0.5);
}
.bg-harbor .lantern-rope { position:absolute; width:3px; background:#1a0e08; }
.bg-harbor .lantern { position:absolute; width:50px; height:70px; }
.bg-harbor .lantern-cap { position:absolute; left:8px; top:0; width:34px; height:14px;
  background: linear-gradient(180deg, #5a4830 0%, #2a1808 100%);
  border-radius: 4px 4px 0 0;
}
.bg-harbor .lantern-body { position:absolute; left:5px; top:14px; width:40px; height:46px;
  background: linear-gradient(180deg, rgba(248,180,80,0.4) 0%, rgba(248,160,40,0.6) 100%);
  border: 3px solid #2a1808;
  box-shadow: 0 0 24px 4px rgba(248,180,80,0.4), inset 0 0 8px rgba(255,220,140,0.6);
}
.bg-harbor .lantern-body::before { content:''; position:absolute; left:50%; top:30%; width:14px; height:18px;
  background: radial-gradient(circle, #fff8c8 0%, #f8a040 100%);
  border-radius: 50%; transform: translateX(-50%); filter: blur(0.5px);
}
.bg-harbor .lantern-body::after { content:''; position:absolute; left:0; right:0; top:50%; height:2px;
  background: rgba(0,0,0,0.4);
}
.bg-harbor .lantern-base { position:absolute; left:14px; top:60px; width:22px; height:8px; background:#2a1808; }
.bg-harbor .lurking { position:absolute; left:50%; top:780px; transform: translateX(-50%);
  width:540px; height:240px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(20,5,10,0.7) 0%, transparent 70%);
  pointer-events:none; filter: blur(20px);
}
.bg-harbor .pylon { position:absolute; width:14px; height:160px; background: linear-gradient(180deg, #3a2010 0%, #1a0e08 100%); }
.bg-harbor .gull { position:absolute; font-size:24px; color: rgba(220,220,200,0.7); }
.bg-harbor .post-hook { position:absolute; left:90px; top:1620px; width:20px; height:14px; background:#1a0e08; border-radius:4px; }
.bg-harbor .vignette { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 60% at 50% 60%, transparent 40%, rgba(0,0,0,0.5) 100%);
}

/* ============ 04 · ROOFTOP ============ */
.bg-roof { position:relative; width:100%; height:100%; overflow:hidden;
  background: linear-gradient(180deg,
    #4a2068 0%, #8a3060 18%, #d8584a 35%, #f08038 50%, #f0a058 60%, #b06848 70%, #4a2c38 85%, #1a1018 100%);
}
.bg-roof .roof-sun { position:absolute; left:50%; top:780px; transform: translateX(-50%);
  width:300px; height:300px;
  background: radial-gradient(circle, #fff8d8 0%, #fde078 30%, #f8a040 60%, transparent 80%);
  border-radius:50%;
  box-shadow: 0 0 200px 60px rgba(248,160,64,0.5);
  opacity: 0.8;
}
.bg-roof .streak { position:absolute; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, rgba(255,200,140,0.4), transparent);
}
.bg-roof .skyline { position:absolute; left:0; right:0; top:880px; height:200px; }
.bg-roof .bldg { position:absolute; bottom:0; background: #2a1a26; box-shadow: 0 0 0 2px #1a0e18; }
.bg-roof .bldg-win { position:absolute; width:6px; height:8px; background:#fcd878; opacity:0.9; }
.bg-roof .skyline-near { position:absolute; left:0; right:0; top:1020px; height:120px; }
.bg-roof .skyline-near .bldg { background: #1a0e18; }
.bg-roof .deck { position:absolute; left:0; right:0; top:1140px; bottom:0;
  background:
    radial-gradient(ellipse 70% 30% at 50% 0%, rgba(248,160,80,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a20 0%, #1a0e14 60%, #0e0810 100%);
}
.bg-roof .deck::before { content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(0,0,0,0.4) 40px 42px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(0,0,0,0.3) 40px 42px),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.02) 6px 7px);
}
.bg-roof .parapet { position:absolute; left:0; right:0; top:1140px; height:30px;
  background: linear-gradient(180deg, #3a2430 0%, #1a0e14 100%);
  box-shadow: 0 4px 0 rgba(0,0,0,0.5);
}
.bg-roof .water-tower { position:absolute; left:60px; top:740px; width:200px; height:280px; }
.bg-roof .wt-tank { position:absolute; left:0; top:0; width:200px; height:180px;
  background: linear-gradient(180deg, #5a3a28 0%, #3a2418 50%, #2a1810 100%);
  border-radius: 6px;
  box-shadow: inset -10px 0 30px rgba(0,0,0,0.5);
}
.bg-roof .wt-tank::before { content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,0,0,0.5) 22px 26px);
}
.bg-roof .wt-tank::after { content:''; position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  width:60px; height:36px;
  background: linear-gradient(180deg, #3a2418 0%, #2a1810 100%);
  border-radius: 50% 50% 0 0;
}
.bg-roof .wt-legs { position:absolute; left:0; top:180px; right:0; height:100px; }
.bg-roof .wt-leg { position:absolute; bottom:0; width:8px; height:100px; background:#1a0e08; }
.bg-roof .wt-cross { position:absolute; left:10px; right:10px; height:4px; background:#1a0e08; }
.bg-roof .sat-base { position:absolute; right:160px; top:1020px; width:8px; height:80px; background:#1a1018; }
.bg-roof .sat-dish { position:absolute; right:120px; top:980px; width:140px; height:100px;
  background: radial-gradient(ellipse 80% 100% at 50% 50%, #c0b8a8 0%, #6a6258 60%, #2a2820 100%);
  border-radius: 50%;
  transform: rotate(-20deg);
  box-shadow: inset 8px 8px 30px rgba(0,0,0,0.5);
}
.bg-roof .sat-arm { position:absolute; right:170px; top:1020px; width:50px; height:6px;
  background:#1a1018; transform: rotate(-30deg); transform-origin: right center;
}
.bg-roof .sat-feed { position:absolute; right:220px; top:1010px; width:14px; height:14px;
  background:#1a1018; border-radius:50%;
}
.bg-roof .ac { position:absolute; bottom:80px;
  background: linear-gradient(180deg, #b8b0a0 0%, #6a6258 50%, #3a3228 100%);
  box-shadow: 0 4px 0 rgba(0,0,0,0.6), inset 0 0 20px rgba(0,0,0,0.4);
  border: 4px solid #2a2820;
}
.bg-roof .ac::before { content:''; position:absolute; inset: 14px;
  background:
    repeating-linear-gradient(0deg, #1a1810 0 4px, transparent 4px 10px),
    repeating-linear-gradient(90deg, #1a1810 0 4px, transparent 4px 10px);
  opacity:0.6;
}
.bg-roof .ac::after { content:''; position:absolute; left:8px; top:8px; right:8px; height:24px;
  background: linear-gradient(180deg, #3a3228 0%, #1a1810 100%);
}
.bg-roof .line { position:absolute; left:140px; top:1320px; right:140px; height:3px;
  background: linear-gradient(90deg, transparent, #6a5840 10%, #6a5840 90%, transparent);
  transform: rotate(2deg);
}
.bg-roof .clip { position:absolute; width:14px; height:24px; background: linear-gradient(180deg, #6a5840 0%, #3a2818 100%); border-radius: 2px; }
.bg-roof .shirt { position:absolute; width:60px; height:80px;
  background: linear-gradient(180deg, #d04a78 0%, #a82858 100%);
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.bg-roof .shirt.cyan { background: linear-gradient(180deg, #4ad8e8 0%, #2a98b0 100%); }
.bg-roof .shirt.yellow { background: linear-gradient(180deg, #fcd068 0%, #d89028 100%); }
.bg-roof .vent { position:absolute; bottom:80px; width:50px; height:140px;
  background: linear-gradient(180deg, #3a2820 0%, #1a0e08 100%); border-radius: 4px 4px 0 0;
}
.bg-roof .vent::after { content:''; position:absolute; left:-8px; top:0; right:-8px; height:18px;
  background:#1a0e08; border-radius: 4px 4px 0 0;
}
.bg-roof .vent::before { content:''; position:absolute; left:50%; top:-4px; transform:translateX(-50%);
  width:20px; height:8px; background:#fcd878; opacity:0.4; filter: blur(4px);
}
.bg-roof .pigeon { position:absolute; font-size:34px; color: rgba(20,10,18,0.75); transform-origin:center; line-height:1; }
.bg-roof .antenna { position:absolute; bottom:0; width:3px; background:#1a0e18; }
.bg-roof .antenna::before { content:''; position:absolute; left:-2px; top:0; width:7px; height:3px; background:#1a0e18; }
.bg-roof .haze { position:absolute; left:0; right:0; top:1000px; height:160px;
  background: linear-gradient(180deg, transparent 0%, rgba(248,160,80,0.18) 50%, transparent 100%);
  pointer-events:none; filter: blur(8px);
}
.bg-roof .deck-shade {
  position:absolute; left:0; right:0; bottom:0; height:120px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%); pointer-events:none;
}

/* ============ 05 · FOREST ============ */
.bg-forest { position:relative; width:100%; height:100%; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 35% at 50% 60%, rgba(140,180,220,0.22) 0%, transparent 70%),
    linear-gradient(180deg, #0a1830 0%, #0e2040 30%, #0a1828 55%, #061018 80%, #020508 100%);
}
.bg-forest .moon { position:absolute; left:50%; top:140px; transform: translateX(-50%);
  width:380px; height:380px;
  background: radial-gradient(circle at 40% 35%, #fff 0%, #e8f0fa 30%, #b8c8d8 60%, #6a8098 90%, transparent 100%);
  border-radius: 50%;
  box-shadow:
    0 0 80px 30px rgba(220,235,250,0.3),
    0 0 200px 80px rgba(140,180,220,0.18),
    0 0 400px 120px rgba(100,140,200,0.1);
}
.bg-forest .crater { position:absolute; border-radius:50%;
  background: radial-gradient(circle, rgba(120,140,160,0.4) 0%, transparent 70%);
}
.bg-forest .halo { position:absolute; left:50%; top:840px; transform: translateX(-50%);
  width:920px; height:920px;
  background: radial-gradient(circle, rgba(180,210,240,0.16) 0%, rgba(120,160,200,0.08) 40%, transparent 70%);
  border-radius:50%; pointer-events:none;
}
.bg-forest .fog-f { position:absolute; left:-10%; right:-10%; height:240px;
  background: linear-gradient(180deg, transparent 0%, rgba(180,200,220,0.18) 40%, rgba(180,200,220,0.28) 60%, transparent 100%);
  filter: blur(40px); pointer-events:none;
}
.bg-forest .f-canopy { position:absolute; left:0; right:0; top:0; height:200px;
  background:
    radial-gradient(ellipse 30% 80% at 12% 0%, #020608 0%, transparent 60%),
    radial-gradient(ellipse 28% 70% at 32% 0%, #050a10 0%, transparent 60%),
    radial-gradient(ellipse 40% 100% at 78% 0%, #020608 0%, transparent 60%),
    radial-gradient(ellipse 30% 70% at 96% 0%, #040810 0%, transparent 60%);
}
.bg-forest .trunk { position:absolute; bottom:0;
  background: linear-gradient(90deg, #04080c 0%, #1a2228 40%, #04080c 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
}
.bg-forest .trunk::before { content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(0,0,0,0.5) 30px 34px),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,0.3) 8px 10px);
}
.bg-forest .root { position:absolute; bottom:0; background:#04080c; }
.bg-forest .log { position:absolute; left:50%; bottom:240px; transform: translateX(-50%);
  width:760px; height:80px;
  background: linear-gradient(180deg, #2a1a14 0%, #1a0e08 60%, #0a0604 100%);
  border-radius: 40px;
  box-shadow: 0 8px 0 rgba(0,0,0,0.5), inset 0 -8px 12px rgba(0,0,0,0.6);
}
.bg-forest .log::before { content:''; position:absolute; left:-10px; top:0; width:60px; height:80px;
  background: radial-gradient(ellipse, #1a0e08 30%, transparent 70%);
  border-radius:50%;
}
.bg-forest .log::after { content:''; position:absolute; right:-10px; top:0; width:60px; height:80px;
  background: radial-gradient(ellipse, #1a0e08 30%, transparent 70%);
  border-radius:50%;
}
.bg-forest .log-moss { position:absolute; left:50%; bottom:300px; transform: translateX(-50%);
  width:680px; height:24px;
  background: linear-gradient(180deg, rgba(80,140,80,0.5) 0%, transparent 100%);
  border-radius: 40px 40px 0 0;
  filter: blur(2px);
}
.bg-forest .mush { position:absolute; }
.bg-forest .mush-stem { position:absolute; left:50%; bottom:0; transform: translateX(-50%);
  width:14px; height:24px; background: linear-gradient(180deg, #f0e8d8 0%, #c8b890 100%);
  border-radius: 4px 4px 0 0;
}
.bg-forest .mush-cap { position:absolute; left:50%; top:0; transform: translateX(-50%);
  width:42px; height:24px;
  background: radial-gradient(ellipse 80% 100% at 50% 100%, #d8482a 0%, #a82820 60%, #6a1810 100%);
  border-radius: 50% 50% 0 0;
}
.bg-forest .mush-cap::before { content:''; position:absolute; left:18%; top:14%; width:14%; height:30%;
  background: rgba(255,255,255,0.4); border-radius:50%;
}
.bg-forest .mush-cap::after { content:''; position:absolute; right:24%; top:34%; width:10%; height:24%;
  background: rgba(255,255,255,0.3); border-radius:50%;
}
.bg-forest .ground-f { position:absolute; left:0; right:0; bottom:0; height:340px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(140,180,220,0.12) 0%, transparent 70%),
    linear-gradient(180deg, #0a1810 0%, #061008 60%, #020604 100%);
}
.bg-forest .ground-f::before { content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(85deg, transparent 0 12px, rgba(40,80,40,0.25) 12px 14px),
    repeating-linear-gradient(95deg, transparent 0 18px, rgba(20,40,20,0.4) 18px 20px);
  opacity:0.5;
}
.bg-forest .fern { position:absolute; }
.bg-forest .fern svg { display:block; }
.bg-forest .eyes { position:absolute; }
.bg-forest .eye { position:absolute; width:14px; height:8px;
  background: radial-gradient(ellipse, #fde078 0%, #f8a040 60%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 12px 4px rgba(248,200,80,0.7);
  animation: bg-forest-eye-blink 5s infinite;
}
@keyframes bg-forest-eye-blink { 0%,90%,100% { transform:scaleY(1);} 95% { transform:scaleY(0.1);} }
.bg-forest .mote { position:absolute; width:3px; height:3px; border-radius:50%;
  background: rgba(220,240,180,0.7);
  box-shadow: 0 0 6px rgba(180,220,140,0.5);
}
.bg-forest .vignette-f { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 75% 55% at 50% 55%, transparent 30%, rgba(0,0,0,0.7) 100%);
}

/* ============ 06 · VOID ============ */
.bg-void { position:relative; width:100%; height:100%; overflow:hidden;
  background: radial-gradient(ellipse 70% 45% at 50% 55%, #2a1850 0%, #1a0a3a 30%, #0a0420 70%, #02000a 100%);
}
.bg-void .starfield { position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 40px 70px, rgba(220,200,255,0.8), transparent),
    radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(180,200,255,0.8), transparent),
    radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 80px 200px, rgba(255,240,200,0.6), transparent),
    radial-gradient(1px 1px at 210px 60px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 230px 180px, rgba(220,200,255,0.6), transparent),
    radial-gradient(1px 1px at 270px 100px, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 320px 50px, rgba(180,200,255,0.6), transparent),
    radial-gradient(1px 1px at 350px 200px, rgba(255,255,255,0.6), transparent);
  background-size: 400px 400px;
}
.bg-void .starfield::after { content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 50px 80px, rgba(255,255,200,0.6), transparent),
    radial-gradient(1px 1px at 130px 30px, rgba(200,180,255,0.7), transparent),
    radial-gradient(2px 2px at 200px 220px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 280px 150px, rgba(180,220,255,0.5), transparent),
    radial-gradient(1px 1px at 350px 280px, rgba(255,240,180,0.7), transparent);
  background-size: 600px 600px;
  opacity:0.7;
}
.bg-void .nebula { position:absolute; border-radius:50%; filter: blur(40px); pointer-events:none; }
.bg-void .neb-purple { background: radial-gradient(circle, rgba(140,60,200,0.45) 0%, rgba(80,30,140,0.25) 50%, transparent 80%); }
.bg-void .neb-indigo { background: radial-gradient(circle, rgba(60,80,200,0.4) 0%, rgba(40,40,140,0.2) 50%, transparent 80%); }
.bg-void .neb-cyan { background: radial-gradient(circle, rgba(60,200,220,0.3) 0%, rgba(40,140,180,0.15) 50%, transparent 80%); }
.bg-void .neb-pink { background: radial-gradient(circle, rgba(220,80,180,0.3) 0%, rgba(140,40,100,0.15) 50%, transparent 80%); }
.bg-void .swirl { position:absolute; pointer-events:none; }
.bg-void .mandala { position:absolute; left:50%; top:920px; transform: translate(-50%, -50%);
  width:1100px; height:1100px;
  pointer-events:none;
  animation: bg-void-mandala 80s linear infinite;
}
@keyframes bg-void-mandala { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bg-void .cat-ghost { position:absolute; pointer-events:none;
  color: rgba(180,160,220,0.18);
  filter: blur(2px);
}
.bg-void .dais-shadow { position:absolute; left:50%; top:1240px; transform: translateX(-50%);
  width:920px; height:120px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(0,0,0,0.7) 0%, transparent 70%);
  filter: blur(20px); pointer-events:none;
}
.bg-void .dais { position:absolute; left:50%; top:1180px; transform: translateX(-50%);
  width:840px; height:200px;
}
.bg-void .dais-top { position:absolute; left:0; right:0; top:0; height:80px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, #2a2438 0%, #14101e 60%, #0a0814 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 -12px 24px rgba(0,0,0,0.7),
    inset 0 8px 18px rgba(180,160,220,0.18),
    0 0 60px rgba(180,140,220,0.2);
}
.bg-void .dais-top::before { content:''; position:absolute; inset:8px;
  background:
    linear-gradient(35deg, transparent 30%, rgba(220,180,80,0.4) 32%, transparent 34%),
    linear-gradient(-25deg, transparent 50%, rgba(80,200,220,0.35) 51%, transparent 52%),
    linear-gradient(75deg, transparent 65%, rgba(220,180,80,0.3) 66%, transparent 67%);
  border-radius: 50%;
  filter: blur(0.5px);
}
.bg-void .dais-top::after { content:''; position:absolute; inset:0;
  background:
    linear-gradient(20deg, transparent 48%, rgba(0,0,0,0.6) 49%, transparent 50%),
    linear-gradient(-40deg, transparent 60%, rgba(0,0,0,0.5) 61%, transparent 62%);
  border-radius: 50%;
}
.bg-void .dais-side { position:absolute; left:8%; right:8%; top:60px; height:60px;
  background: linear-gradient(180deg, #14101e 0%, #06040c 100%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.8);
}
.bg-void .dais-side::before { content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(0,0,0,0.4) 30px 32px),
    linear-gradient(180deg, transparent 0%, rgba(220,180,80,0.18) 100%);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.bg-void .shard { position:absolute;
  background: linear-gradient(135deg, #2a2438 0%, #0a0814 100%);
  box-shadow: 0 0 14px rgba(180,140,220,0.3);
  border: 1px solid rgba(220,180,80,0.3);
}
.bg-void .stage-glow { position:absolute; left:50%; top:780px; transform: translateX(-50%);
  width:600px; height:600px;
  background: radial-gradient(circle, rgba(220,180,255,0.18) 0%, rgba(140,100,200,0.08) 50%, transparent 80%);
  border-radius: 50%; pointer-events:none;
}
.bg-void .spark { position:absolute; width:2px; height:2px; border-radius:50%;
  background: rgba(255,240,200,0.9);
  box-shadow: 0 0 8px rgba(255,220,140,0.8);
}
.bg-void .spark.cyan { background: rgba(120,220,240,0.9); box-shadow: 0 0 8px rgba(120,220,240,0.8); }
.bg-void .vignette-v { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 60% at 50% 55%, transparent 30%, rgba(0,0,0,0.7) 100%);
}

/* Reduced-motion: pause every animated layer in the world backdrops. */
@media (prefers-reduced-motion: reduce) {
  .bg-alley .neon,
  .bg-alley .lamp-bulb,
  .bg-harbor .harb-lh-light,
  .bg-harbor .harb-beam,
  .bg-park .leaf-drift,
  .bg-forest .eye,
  .bg-void .mandala {
    animation: none !important;
  }
}