/* =========================================================
   MINDFUL RELAX — Themes
   Each theme defines the scene background and 4 shape
   appearances via CSS custom properties.
   Transitions on .shape ensure smooth crossfade when
   the theme class changes on #scene.
   ========================================================= */

/* ---------------------------------------------------------
   Scene & shape base — crossfade transitions
   --------------------------------------------------------- */
#scene {
  transition: background 1.4s ease;
}

.shape {
  position: absolute;
  border-radius: var(--shape-radius, 50%);
  background: var(--shape-bg, rgba(255,255,255,0.1));
  filter: blur(var(--shape-blur, 50px));
  opacity: var(--shape-opacity, 0.7);
  transition:
    background     1.4s ease,
    border-radius  1.4s ease,
    width          1.4s ease,
    height         1.4s ease,
    top            1.4s ease,
    left           1.4s ease,
    opacity        1.4s ease,
    filter         1.4s ease;
}

/* =========================================================
   THEME: SUNRISE
   Warm oranges, deep pinks, golden glow
   ========================================================= */
.scene.theme-sunrise {
  background: radial-gradient(ellipse at 50% 80%, #2a0a00 0%, #0d0005 60%, #020005 100%);
}

.scene.theme-sunrise .shape-1 {
  width: 70vw;
  height: 70vw;
  top: 10vh;
  left: -15vw;
  --shape-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  --shape-bg: radial-gradient(ellipse at 40% 40%, rgba(255, 140, 30, 0.55), rgba(220, 60, 20, 0.20) 60%, transparent 80%);
  --shape-blur: 60px;
  --shape-opacity: 0.8;
}

.scene.theme-sunrise .shape-2 {
  width: 55vw;
  height: 55vw;
  top: 30vh;
  right: -10vw;
  --shape-radius: 45% 55% 40% 60% / 60% 45% 55% 40%;
  --shape-bg: radial-gradient(ellipse at 60% 50%, rgba(255, 80, 60, 0.50), rgba(200, 30, 80, 0.20) 60%, transparent 80%);
  --shape-blur: 70px;
  --shape-opacity: 0.7;
}

.scene.theme-sunrise .shape-3 {
  width: 45vw;
  height: 45vw;
  bottom: 5vh;
  left: 20vw;
  --shape-radius: 55% 45% 60% 40% / 40% 55% 45% 60%;
  --shape-bg: radial-gradient(ellipse at 50% 60%, rgba(255, 200, 50, 0.45), rgba(255, 120, 0, 0.15) 60%, transparent 80%);
  --shape-blur: 55px;
  --shape-opacity: 0.65;
}

.scene.theme-sunrise .shape-4 {
  width: 35vw;
  height: 35vw;
  top: 5vh;
  right: 15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(255, 180, 80, 0.40), transparent 70%);
  --shape-blur: 45px;
  --shape-opacity: 0.6;
}

/* =========================================================
   THEME: FOREST
   Deep greens, earthy moss tones
   ========================================================= */
.scene.theme-forest {
  background: radial-gradient(ellipse at 30% 70%, #020d02 0%, #050f03 50%, #010501 100%);
}

.scene.theme-forest .shape-1 {
  width: 65vw;
  height: 65vw;
  top: 5vh;
  left: -10vw;
  --shape-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
  --shape-bg: radial-gradient(ellipse at 45% 45%, rgba(30, 120, 50, 0.55), rgba(10, 70, 20, 0.25) 60%, transparent 80%);
  --shape-blur: 65px;
  --shape-opacity: 0.80;
}

.scene.theme-forest .shape-2 {
  width: 50vw;
  height: 55vw;
  bottom: 10vh;
  right: -5vw;
  --shape-radius: 60% 40% 30% 70% / 40% 60% 50% 45%;
  --shape-bg: radial-gradient(ellipse at 55% 55%, rgba(20, 90, 35, 0.50), rgba(40, 100, 30, 0.20) 60%, transparent 80%);
  --shape-blur: 70px;
  --shape-opacity: 0.70;
}

.scene.theme-forest .shape-3 {
  width: 40vw;
  height: 40vw;
  top: 40vh;
  left: 25vw;
  --shape-radius: 70% 30% 50% 50% / 30% 70% 45% 55%;
  --shape-bg: radial-gradient(ellipse at 50% 40%, rgba(80, 160, 60, 0.40), rgba(20, 100, 40, 0.15) 60%, transparent 80%);
  --shape-blur: 55px;
  --shape-opacity: 0.60;
}

.scene.theme-forest .shape-4 {
  width: 30vw;
  height: 30vw;
  top: 10vh;
  right: 20vw;
  --shape-radius: 50% 50% 60% 40% / 60% 50% 50% 45%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(50, 140, 40, 0.35), transparent 70%);
  --shape-blur: 45px;
  --shape-opacity: 0.55;
}

/* =========================================================
   THEME: SEA / WATER
   Ocean blues, teals, aquamarine depths
   ========================================================= */
.scene.theme-ocean {
  background: radial-gradient(ellipse at 50% 100%, #000d1a 0%, #000812 60%, #000508 100%);
}

.scene.theme-ocean .shape-1 {
  width: 80vw;
  height: 50vw;
  top: 20vh;
  left: -20vw;
  --shape-radius: 50% 50% 60% 40% / 30% 40% 60% 70%;
  --shape-bg: radial-gradient(ellipse at 40% 50%, rgba(0, 140, 180, 0.55), rgba(0, 80, 140, 0.20) 60%, transparent 80%);
  --shape-blur: 70px;
  --shape-opacity: 0.80;
}

.scene.theme-ocean .shape-2 {
  width: 60vw;
  height: 40vw;
  bottom: 15vh;
  right: -10vw;
  --shape-radius: 40% 60% 50% 50% / 60% 40% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 60% 60%, rgba(0, 180, 160, 0.50), rgba(0, 120, 140, 0.20) 60%, transparent 80%);
  --shape-blur: 65px;
  --shape-opacity: 0.70;
}

.scene.theme-ocean .shape-3 {
  width: 45vw;
  height: 35vw;
  top: 10vh;
  right: 5vw;
  --shape-radius: 60% 40% 40% 60% / 50% 60% 40% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 45%, rgba(20, 160, 200, 0.45), rgba(0, 100, 160, 0.15) 60%, transparent 80%);
  --shape-blur: 60px;
  --shape-opacity: 0.65;
}

.scene.theme-ocean .shape-4 {
  width: 35vw;
  height: 30vw;
  bottom: 5vh;
  left: 15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(0, 200, 180, 0.35), transparent 70%);
  --shape-blur: 50px;
  --shape-opacity: 0.55;
}

/* =========================================================
   THEME: DESERT
   Sandy beiges, warm burnt oranges, dry earth
   ========================================================= */
.scene.theme-desert {
  background: radial-gradient(ellipse at 50% 60%, #0f0800 0%, #0a0500 50%, #050200 100%);
}

.scene.theme-desert .shape-1 {
  width: 90vw;
  height: 40vw;
  bottom: 10vh;
  left: -20vw;
  --shape-radius: 50% 50% 30% 70% / 80% 80% 20% 20%;
  --shape-bg: radial-gradient(ellipse at 50% 70%, rgba(200, 140, 50, 0.55), rgba(160, 90, 20, 0.25) 60%, transparent 80%);
  --shape-blur: 65px;
  --shape-opacity: 0.80;
}

.scene.theme-desert .shape-2 {
  width: 70vw;
  height: 35vw;
  bottom: 25vh;
  right: -15vw;
  --shape-radius: 50% 50% 60% 40% / 80% 80% 20% 20%;
  --shape-bg: radial-gradient(ellipse at 60% 70%, rgba(220, 160, 60, 0.45), rgba(180, 100, 20, 0.20) 60%, transparent 80%);
  --shape-blur: 60px;
  --shape-opacity: 0.70;
}

.scene.theme-desert .shape-3 {
  width: 50vw;
  height: 50vw;
  top: 5vh;
  left: 20vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 40%, rgba(240, 180, 80, 0.35), rgba(200, 120, 30, 0.15) 60%, transparent 80%);
  --shape-blur: 70px;
  --shape-opacity: 0.60;
}

.scene.theme-desert .shape-4 {
  width: 30vw;
  height: 20vw;
  top: 20vh;
  right: 10vw;
  --shape-radius: 40% 60% 55% 45% / 70% 70% 30% 30%;
  --shape-bg: radial-gradient(ellipse at 50% 60%, rgba(255, 200, 100, 0.30), transparent 70%);
  --shape-blur: 45px;
  --shape-opacity: 0.50;
}

/* =========================================================
   THEME: BUTTERFLIES
   Soft lavenders, deep purples, rose pinks
   ========================================================= */
.scene.theme-butterflies {
  background: radial-gradient(ellipse at 50% 50%, #08000f 0%, #04000a 55%, #020005 100%);
}

.scene.theme-butterflies .shape-1 {
  width: 55vw;
  height: 60vw;
  top: 5vh;
  left: -5vw;
  --shape-radius: 50% 30% 50% 70% / 30% 50% 70% 50%;
  --shape-bg: radial-gradient(ellipse at 45% 40%, rgba(160, 60, 200, 0.55), rgba(100, 20, 160, 0.20) 60%, transparent 80%);
  --shape-blur: 65px;
  --shape-opacity: 0.80;
}

.scene.theme-butterflies .shape-2 {
  width: 50vw;
  height: 55vw;
  top: 10vh;
  right: -5vw;
  --shape-radius: 30% 50% 70% 50% / 50% 70% 30% 50%;
  --shape-bg: radial-gradient(ellipse at 55% 40%, rgba(200, 80, 160, 0.50), rgba(160, 40, 120, 0.20) 60%, transparent 80%);
  --shape-blur: 60px;
  --shape-opacity: 0.75;
}

.scene.theme-butterflies .shape-3 {
  width: 45vw;
  height: 35vw;
  bottom: 15vh;
  left: 10vw;
  --shape-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(140, 100, 220, 0.45), rgba(80, 40, 180, 0.15) 60%, transparent 80%);
  --shape-blur: 55px;
  --shape-opacity: 0.65;
}

.scene.theme-butterflies .shape-4 {
  width: 30vw;
  height: 40vw;
  bottom: 10vh;
  right: 15vw;
  --shape-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(220, 120, 200, 0.40), transparent 70%);
  --shape-blur: 50px;
  --shape-opacity: 0.60;
}

/* =========================================================
   THEME: MOONLIGHT
   Cool silver-blues, deep navy, ethereal glow
   ========================================================= */
.scene.theme-moonlight {
  background: radial-gradient(ellipse at 40% 20%, #010412 0%, #000208 55%, #000104 100%);
}
.scene.theme-moonlight .shape-1 {
  width: 65vw; height: 65vw; top: 5vh; left: -15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 40% 35%, rgba(110,150,225,0.50), rgba(70,110,200,0.20) 60%, transparent 80%);
  --shape-blur: 70px; --shape-opacity: 0.80;
}
.scene.theme-moonlight .shape-2 {
  width: 50vw; height: 50vw; top: 30vh; right: -10vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 55% 50%, rgba(60,90,185,0.45), rgba(40,70,165,0.18) 60%, transparent 80%);
  --shape-blur: 65px; --shape-opacity: 0.70;
}
.scene.theme-moonlight .shape-3 {
  width: 40vw; height: 40vw; bottom: 10vh; left: 20vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(190,210,245,0.35), rgba(150,180,235,0.12) 60%, transparent 80%);
  --shape-blur: 60px; --shape-opacity: 0.65;
}
.scene.theme-moonlight .shape-4 {
  width: 30vw; height: 30vw; top: 8vh; right: 10vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(225,235,255,0.40), transparent 70%);
  --shape-blur: 50px; --shape-opacity: 0.60;
}

/* =========================================================
   THEME: RAIN
   Dark storm greys, steel blues, elongated shapes
   ========================================================= */
.scene.theme-rain {
  background: radial-gradient(ellipse at 50% 0%, #020508 0%, #010305 60%, #000102 100%);
}
.scene.theme-rain .shape-1 {
  width: 45vw; height: 80vw; top: 0; left: -5vw;
  --shape-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
  --shape-bg: radial-gradient(ellipse at 40% 30%, rgba(40,80,135,0.55), rgba(20,60,115,0.22) 60%, transparent 80%);
  --shape-blur: 60px; --shape-opacity: 0.80;
}
.scene.theme-rain .shape-2 {
  width: 38vw; height: 70vw; top: 10vh; right: -5vw;
  --shape-radius: 50% 50% 40% 60% / 55% 45% 55% 45%;
  --shape-bg: radial-gradient(ellipse at 55% 40%, rgba(60,100,155,0.50), rgba(30,70,125,0.18) 60%, transparent 80%);
  --shape-blur: 65px; --shape-opacity: 0.70;
}
.scene.theme-rain .shape-3 {
  width: 32vw; height: 55vw; bottom: 5vh; left: 22vw;
  --shape-radius: 45% 55% 50% 50% / 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(80,120,175,0.40), rgba(50,90,145,0.15) 60%, transparent 80%);
  --shape-blur: 55px; --shape-opacity: 0.60;
}
.scene.theme-rain .shape-4 {
  width: 25vw; height: 50vw; top: 5vh; right: 18vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 40%, rgba(100,140,195,0.35), transparent 70%);
  --shape-blur: 45px; --shape-opacity: 0.55;
}

/* =========================================================
   THEME: SNOW
   Icy pale blues, soft whites, diffuse and vast
   ========================================================= */
.scene.theme-snow {
  background: radial-gradient(ellipse at 50% 30%, #e8eef8 0%, #b5bdc7 60%, #838aa9 100%);
}
.scene.theme-snow .shape-1 {
  width: 85vw; height: 65vw; top: 0; left: -20vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 45% 40%, rgba(135, 154, 181, 0.55), rgba(116, 138, 167, 0.25) 60%, transparent 80%);
  --shape-blur: 80px; --shape-opacity: 0.85;
}
.scene.theme-snow .shape-2 {
  width: 65vw; height: 55vw; bottom: 10vh; right: -15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 55% 55%, rgba(143, 157, 178, 0.48), rgba(99, 113, 134, 0.2) 60%, transparent 80%);
  --shape-blur: 75px; --shape-opacity: 0.75;
}
.scene.theme-snow .shape-3 {
  width: 45vw; height: 45vw; top: 35vh; left: 18vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(210,228,255,0.42), rgba(195,215,248,0.18) 60%, transparent 80%);
  --shape-blur: 70px; --shape-opacity: 0.68;
}
.scene.theme-snow .shape-4 {
  width: 35vw; height: 35vw; top: 5vh; right: 10vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(225,238,255,0.38), transparent 70%);
  --shape-blur: 60px; --shape-opacity: 0.62;
}

/* =========================================================
   THEME: CHERRY BLOSSOM
   Soft pinks, rose, blush, organic petal shapes
   ========================================================= */
.scene.theme-cherry-blossom {
  background: radial-gradient(ellipse at 50% 50%, #f5e8ef 0%, #f0dde8 55%, #ead5e2 100%);
}
.scene.theme-cherry-blossom .shape-1 {
  width: 65vw; height: 65vw; top: 5vh; left: -15vw;
  --shape-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  --shape-bg: radial-gradient(ellipse at 40% 40%, rgba(210,100,145,0.45), rgba(190,70,120,0.18) 60%, transparent 80%);
  --shape-blur: 65px; --shape-opacity: 0.80;
}
.scene.theme-cherry-blossom .shape-2 {
  width: 55vw; height: 55vw; top: 25vh; right: -10vw;
  --shape-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  --shape-bg: radial-gradient(ellipse at 60% 50%, rgba(230,120,165,0.40), rgba(210,90,140,0.16) 60%, transparent 80%);
  --shape-blur: 60px; --shape-opacity: 0.75;
}
.scene.theme-cherry-blossom .shape-3 {
  width: 40vw; height: 40vw; bottom: 10vh; left: 20vw;
  --shape-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
  --shape-bg: radial-gradient(ellipse at 50% 55%, rgba(240,155,190,0.35), rgba(220,125,165,0.12) 60%, transparent 80%);
  --shape-blur: 55px; --shape-opacity: 0.65;
}
.scene.theme-cherry-blossom .shape-4 {
  width: 30vw; height: 30vw; top: 5vh; right: 15vw;
  --shape-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(245,185,215,0.32), transparent 70%);
  --shape-blur: 50px; --shape-opacity: 0.60;
}

/* =========================================================
   THEME: MOUNTAINS
   Deep slate blues, layered atmospheric shapes
   ========================================================= */
.scene.theme-mountains {
  background: radial-gradient(ellipse at 50% 100%, #d8e4f0 0%, #cad9ec 55%, #bdd0e8 100%);
}
.scene.theme-mountains .shape-1 {
  width: 100vw; height: 42vw; bottom: 8vh; left: -10vw;
  --shape-radius: 50% 50% 30% 70% / 75% 75% 25% 25%;
  --shape-bg: radial-gradient(ellipse at 50% 80%, rgba(80,115,175,0.50), rgba(60,95,155,0.22) 60%, transparent 80%);
  --shape-blur: 55px; --shape-opacity: 0.85;
}
.scene.theme-mountains .shape-2 {
  width: 80vw; height: 36vw; bottom: 25vh; right: -10vw;
  --shape-radius: 50% 50% 40% 60% / 75% 75% 25% 25%;
  --shape-bg: radial-gradient(ellipse at 55% 75%, rgba(100,140,200,0.42), rgba(80,118,178,0.18) 60%, transparent 80%);
  --shape-blur: 60px; --shape-opacity: 0.75;
}
.scene.theme-mountains .shape-3 {
  width: 60vw; height: 55vw; top: 8vh; left: 10vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 40%, rgba(130,168,220,0.35), rgba(110,148,205,0.14) 60%, transparent 80%);
  --shape-blur: 65px; --shape-opacity: 0.65;
}
.scene.theme-mountains .shape-4 {
  width: 40vw; height: 32vw; top: 5vh; right: 5vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(155,190,235,0.30), transparent 70%);
  --shape-blur: 50px; --shape-opacity: 0.55;
}

/* =========================================================
   THEME: CLOUDS
   Soft grey-whites, billowing, large diffuse shapes
   ========================================================= */
.scene.theme-clouds {
  background: radial-gradient(ellipse at 50% 30%, #c6dbfd 0%, #a9cdfa 55%, #4d96ff 100%);
}
.scene.theme-clouds .shape-1 {
  width: 90vw; height: 55vw; top: 5vh; left: -20vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 45% 45%, rgba(232, 235, 239, 0.55), rgba(187, 193, 204, 0.22) 60%, transparent 80%);
  --shape-blur: 20px; --shape-opacity: 1;
}
.scene.theme-clouds .shape-2 {
  width: 75vw; height: 50vw; bottom: 8vh; right: -15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 55% 55%, rgba(195,205,225,0.48), rgba(175,188,210,0.18) 60%, transparent 80%);
  --shape-blur: 75px; --shape-opacity: 0.70;
}
.scene.theme-clouds .shape-3 {
  width: 55vw; height: 42vw; top: 38vh; left: 12vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(208,218,235,0.40), rgba(192,205,225,0.15) 60%, transparent 80%);
  --shape-blur: 70px; --shape-opacity: 0.62;
}
.scene.theme-clouds .shape-4 {
  width: 42vw; height: 38vw; top: 5vh; right: 5vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(218,228,242,0.35), transparent 70%);
  --shape-blur: 65px; --shape-opacity: 0.55;
}

/* =========================================================
   THEME: SPACE
   Deep blacks, nebula purples, cosmic blues and magentas
   ========================================================= */
.scene.theme-space {
  background: radial-gradient(ellipse at 60% 40%, #04000a 0%, #020006 55%, #000002 100%);
}
.scene.theme-space .shape-1 {
  width: 70vw; height: 70vw; top: 0; left: -20vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 40% 35%, rgba(100,20,165,0.55), rgba(70,10,135,0.22) 60%, transparent 80%);
  --shape-blur: 70px; --shape-opacity: 0.80;
}
.scene.theme-space .shape-2 {
  width: 55vw; height: 55vw; top: 30vh; right: -15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 60% 55%, rgba(20,40,155,0.50), rgba(10,25,125,0.20) 60%, transparent 80%);
  --shape-blur: 65px; --shape-opacity: 0.75;
}
.scene.theme-space .shape-3 {
  width: 42vw; height: 42vw; bottom: 8vh; left: 15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(165,28,105,0.42), rgba(135,18,82,0.16) 60%, transparent 80%);
  --shape-blur: 60px; --shape-opacity: 0.65;
}
.scene.theme-space .shape-4 {
  width: 32vw; height: 32vw; top: 10vh; right: 10vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(122,58,205,0.38), transparent 70%);
  --shape-blur: 55px; --shape-opacity: 0.60;
}

/* =========================================================
   THEME: ZEN GARDEN
   Raked sand base, deep moss greens, charcoal ink stones,
   crisp white accents — sparse, contemplative
   ========================================================= */
.scene.theme-zen-garden {
  background: radial-gradient(ellipse at 50% 60%, #f2f0eb 0%, #f3e9d3 55%, #f8e8c3 100%);
}
.scene.theme-zen-garden .shape-1 {
  width: 75vw; height: 55vw; bottom: 5vh; left: -15vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 40% 65%, rgba(22, 142, 22, 0.22), rgba(40, 137, 40, 0.08) 65%, transparent 85%);
  --shape-blur: 30px; --shape-opacity: 0.90;
}
.scene.theme-zen-garden .shape-2 {
  width: 30vw; height: 38vw; top: 10vh; right: 8vw;
  --shape-radius: 48% 52% 55% 45% / 52% 48% 52% 48%;
  --shape-bg: radial-gradient(ellipse at 50% 45%, rgba(15, 20, 15, 0.30), rgba(10, 14, 10, 0.12) 60%, transparent 80%);
  --shape-blur: 20px; --shape-opacity: 0.75;
}
.scene.theme-zen-garden .shape-3 {
  width: 50vw; height: 35vw; top: 15vh; left: 5vw;
  --shape-radius: 50% 50% 50% 50%;
  --shape-bg: radial-gradient(ellipse at 55% 50%, rgba(114, 114, 114, 0.55), rgba(72, 72, 70, 0.22) 60%, transparent 80%);
  --shape-blur: 55px; --shape-opacity: 0.65;
}
.scene.theme-zen-garden .shape-4 {
  width: 22vw; height: 28vw; bottom: 20vh; right: 15vw;
  --shape-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  --shape-bg: radial-gradient(ellipse at 50% 50%, rgba(55, 100, 55, 0.28), rgba(30, 70, 30, 0.10) 60%, transparent 80%);
  --shape-blur: 30px; --shape-opacity: 0.80;
}

/* =========================================================
   LIGHT THEME TEXT OVERRIDES
   Snow, Mountains, Clouds, Cherry Blossom have light
   backgrounds — override white UI text to dark tones.
   ========================================================= */
body:has(#scene.theme-snow),
body:has(#scene.theme-mountains),
body:has(#scene.theme-clouds),
body:has(#scene.theme-cherry-blossom),
body:has(#scene.theme-zen-garden) {
  /* Tailwind text-white/* classes use literal white.
     We override them by increasing specificity on the
     common text elements. */
  --light-theme-text: rgba(30, 40, 60, VAR_ALPHA);
}

body:has(#scene.theme-snow) h1,
body:has(#scene.theme-snow) p,
body:has(#scene.theme-snow) span,
body:has(#scene.theme-snow) button,
body:has(#scene.theme-mountains) h1,
body:has(#scene.theme-mountains) p,
body:has(#scene.theme-mountains) span,
body:has(#scene.theme-mountains) button,
body:has(#scene.theme-clouds) h1,
body:has(#scene.theme-clouds) p,
body:has(#scene.theme-clouds) span,
body:has(#scene.theme-clouds) button,
body:has(#scene.theme-cherry-blossom) h1,
body:has(#scene.theme-cherry-blossom) p,
body:has(#scene.theme-cherry-blossom) span,
body:has(#scene.theme-cherry-blossom) button,
body:has(#scene.theme-zen-garden) h1,
body:has(#scene.theme-zen-garden) p,
body:has(#scene.theme-zen-garden) span,
body:has(#scene.theme-zen-garden) button {
  color: rgba(30, 40, 60, 0.55) !important;
  border-color: rgba(30, 40, 60, 0.20) !important;
}

body:has(#scene.theme-snow) h1,
body:has(#scene.theme-mountains) h1,
body:has(#scene.theme-clouds) h1,
body:has(#scene.theme-cherry-blossom) h1,
body:has(#scene.theme-zen-garden) h1 {
  color: rgba(30, 40, 60, 0.35) !important;
}

body:has(#scene.theme-snow) .play-btn,
body:has(#scene.theme-mountains) .play-btn,
body:has(#scene.theme-clouds) .play-btn,
body:has(#scene.theme-cherry-blossom) .play-btn,
body:has(#scene.theme-zen-garden) .play-btn {
  background: rgba(30, 40, 60, 0.10) !important;
  border-color: rgba(30, 40, 60, 0.25) !important;
}

body:has(#scene.theme-snow) .play-btn svg path,
body:has(#scene.theme-mountains) .play-btn svg path,
body:has(#scene.theme-clouds) .play-btn svg path,
body:has(#scene.theme-cherry-blossom) .play-btn svg path,
body:has(#scene.theme-zen-garden) .play-btn svg path {
  fill: rgba(30, 40, 60, 0.65);
  stroke: rgba(30, 40, 60, 0.45);
}

/* Breathing flower: switch from screen to multiply on light themes
   and darken petals so they're visible against light backgrounds */
body:has(#scene.theme-snow) .petal-outer,
body:has(#scene.theme-mountains) .petal-outer,
body:has(#scene.theme-clouds) .petal-outer,
body:has(#scene.theme-cherry-blossom) .petal-outer,
body:has(#scene.theme-zen-garden) .petal-outer {
  background: rgba(80, 100, 160, 0.18);
  mix-blend-mode: multiply;
}

body:has(#scene.theme-snow) .petal-mid,
body:has(#scene.theme-mountains) .petal-mid,
body:has(#scene.theme-clouds) .petal-mid,
body:has(#scene.theme-cherry-blossom) .petal-mid,
body:has(#scene.theme-zen-garden) .petal-mid {
  background: rgba(60, 80, 140, 0.25);
  mix-blend-mode: multiply;
}

body:has(#scene.theme-snow) .petal-inner,
body:has(#scene.theme-mountains) .petal-inner,
body:has(#scene.theme-clouds) .petal-inner,
body:has(#scene.theme-cherry-blossom) .petal-inner,
body:has(#scene.theme-zen-garden) .petal-inner {
  background: rgba(50, 70, 130, 0.35);
  mix-blend-mode: multiply;
}

body:has(#scene.theme-snow) .petal-center,
body:has(#scene.theme-mountains) .petal-center,
body:has(#scene.theme-clouds) .petal-center,
body:has(#scene.theme-cherry-blossom) .petal-center,
body:has(#scene.theme-zen-garden) .petal-center {
  background: radial-gradient(circle, rgba(80, 100, 180, 0.28) 0%, transparent 70%);
  mix-blend-mode: multiply;
}

/* Cherry blossom: use warm pinks for the flower */
body:has(#scene.theme-cherry-blossom) .petal-outer {
  background: rgba(180, 80, 120, 0.18);
}
body:has(#scene.theme-cherry-blossom) .petal-mid {
  background: rgba(160, 60, 100, 0.25);
}
body:has(#scene.theme-cherry-blossom) .petal-inner {
  background: rgba(140, 40, 90, 0.35);
}
body:has(#scene.theme-cherry-blossom) .petal-center {
  background: radial-gradient(circle, rgba(180, 80, 130, 0.28) 0%, transparent 70%);
}

/* Zen garden: deep moss green ink flower */
body:has(#scene.theme-zen-garden) .petal-outer {
  background: rgba(30, 65, 30, 0.20);
}
body:has(#scene.theme-zen-garden) .petal-mid {
  background: rgba(20, 50, 20, 0.28);
}
body:has(#scene.theme-zen-garden) .petal-inner {
  background: rgba(15, 38, 15, 0.38);
}
body:has(#scene.theme-zen-garden) .petal-center {
  background: radial-gradient(circle, rgba(25, 55, 25, 0.30) 0%, transparent 70%);
}

/* Session loader: dark ring on light themes */
body:has(#scene.theme-snow) .loader-spinner,
body:has(#scene.theme-mountains) .loader-spinner,
body:has(#scene.theme-clouds) .loader-spinner,
body:has(#scene.theme-cherry-blossom) .loader-spinner,
body:has(#scene.theme-zen-garden) .loader-spinner {
  border-color: rgba(30, 40, 60, 0.12);
  border-top-color: rgba(30, 40, 60, 0.55);
}