/* ── Day/Night Scene — Clouds, Lighthouse ── */

/* ===========================
   Day/Night Variable Setup
   Day = default, Night = body.night
   =========================== */

:root {
  --lh-red: #972627;
  --lh-red-2: #c17d7d;
  --lh-white: #e2b59a;
  --lh-base-1: #335e53;
  --lh-base-2: #142c2c;
  --lh-shine: #fff6;
  --lh-windows: #5f3300;
  --lh-light: #f60;
  --cloud-high: rgba(255,255,255,0.8);
  --sun-color: #FFD700;
  --sun-glow: rgba(255,200,50,0.5);
  --sea-top: #7aabb8;
  --sea-bot: #3a6a7a;
  --island-top: #4a7a3a;
  --island-bot: #1a3a1a;
  --mt-back: #7a9eb5;
  --mt-mid: #4a7a6a;
  --mt-front: #2a5a4a;
  --tree-0: #003a1d;
  --tree-1: #004728;
  --tree-2: #005738;
  --tree-3: #3f916d;
  --house-body: #864800;
  --house-roof: #864800;
  --house-window: red;
}

/* ===========================
   Night Overlay
   =========================== */

.uiverse-midnight-sky .night-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 6, 20, 0.65);
  opacity: 0;
  transition: opacity 3s ease;
  pointer-events: none;
  z-index: 100;
}

body.night .night-overlay {
  opacity: 1;
}

/* ===========================
   Day Sky Overlay
   =========================== */

.uiverse-midnight-sky .day-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4a90d9 0%, #87CEEB 30%, #f5d6b8 70%, #e8c9a0 100%);
  opacity: 0;
  transition: opacity 3s ease;
  pointer-events: none;
}

body:not(.night) .day-sky {
  opacity: 1;
}

/* ===========================
   Moon → Sun morphing
   =========================== */

.uiverse-midnight-sky .moon {
  transition:
    box-shadow 3s ease,
    background 3s ease,
    filter 3s ease;
}

body:not(.night) .uiverse-midnight-sky .moon {
  background: radial-gradient(circle at 50% 50%, #FFD700, #FFA500);
  box-shadow: 0 0 0 0 transparent;
  animation: sunPulse 6s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(255,200,50,0.6));
}

body:not(.night) .uiverse-midnight-sky .moon::before,
body:not(.night) .uiverse-midnight-sky .moon::after {
  opacity: 0;
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px var(--sun-glow)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 35px var(--sun-glow)); }
}

/* ===========================
   Cartoon Background Scene
   =========================== */

.uiverse-midnight-sky .cartoon-scene {
  position: absolute;
  bottom: 12%;
  left: -20%;
  width: 140%;
  height: 45%;
  transform-style: preserve-3d;
  perspective: 1000px;
  z-index: 0;
  pointer-events: none;
}

.uiverse-midnight-sky .cartoon-scene div {
  position: absolute;
  box-sizing: border-box;
}

.uiverse-midnight-sky .cartoon-scene .layer {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.uiverse-midnight-sky .cartoon-scene .tree-layer-0 {
  transform: translate3d(0, 0, 0);
  background: var(--tree-0);
  clip-path: polygon(-1.00% 87.88%,2.57% 87.25%,6.86% 88.38%,6.57% 86.88%,9.43% 91.62%,11.14% 90.75%,14.43% 91.12%,15.86% 89.50%,18.86% 88.50%,21.86% 89.12%,24.00% 91.38%,25.00% 86.62%,26.00% 86.62%,25.00% 90.38%,26.14% 89.00%,27.43% 89.25%,25.14% 91.12%,28.43% 90.25%,32.14% 90.25%,36.71% 94.25%,39.29% 91.25%,40.71% 90.75%,40.71% 89.38%,37.71% 89.50%,39.00% 84.88%,38.00% 84.88%,39.29% 81.12%,38.00% 81.12%,41.14% 71.12%,43.86% 80.62%,42.86% 81.00%,44.43% 84.75%,43.43% 84.75%,44.86% 89.00%,41.43% 89.00%,41.71% 90.25%,45.71% 90.50%,47.00% 89.75%,45.57% 86.25%,47.00% 87.62%,48.57% 85.50%,47.43% 88.62%,49.14% 88.62%,53.43% 86.62%,53.57% 84.50%,51.29% 84.62%,52.43% 80.38%,51.00% 80.38%,52.71% 76.62%,51.57% 76.75%,54.57% 67.50%,57.14% 76.38%,56.14% 76.50%,58.00% 80.50%,56.86% 80.62%,58.29% 84.50%,55.29% 84.25%,55.57% 86.62%,57.43% 86.50%,61.71% 86.38%,65.29% 87.75%,69.71% 91.62%,70.29% 89.75%,74.14% 88.00%,77.86% 87.62%,78.00% 85.75%,75.00% 85.88%,76.71% 81.25%,75.71% 81.25%,77.29% 76.00%,76.14% 76.12%,79.14% 64.00%,82.71% 75.12%,81.86% 75.88%,83.14% 80.38%,82.14% 80.62%,83.57% 85.50%,80.14% 85.75%,80.14% 87.75%,82.86% 87.75%,85.71% 88.00%,87.43% 89.50%,89.43% 87.88%,91.71% 87.50%,91.71% 83.38%,86.71% 83.38%,89.00% 75.25%,87.43% 75.25%,89.57% 68.25%,88.14% 68.38%,92.71% 50.88%,97.43% 68.62%,96.00% 68.62%,98.57% 75.62%,96.43% 75.38%,98.86% 83.50%,94.43% 83.38%,94.14% 86.88%,96.14% 87.62%,97.86% 89.50%,99.00% 85.75%,101.71% 82.38%,103.00% 103.88%,-3.00% 102.88%);
}

.uiverse-midnight-sky .cartoon-scene .tree-layer-1 {
  transform: translate3d(0, 0, -20px);
  background: var(--tree-1);
  clip-path: polygon(-3.29% 92.0%,9.57% 84.62%,11.00% 79.50%,11.71% 83.88%,17.29% 84.00%,15.57% 82.50%,17.86% 83.38%,17.86% 81.38%,18.57% 83.00%,20.71% 81.75%,19.14% 84.12%,23.00% 84.25%,25.57% 75.62%,27.57% 83.88%,33.86% 82.38%,35.57% 76.25%,36.57% 81.12%,44.14% 76.38%,44.86% 73.38%,45.43% 75.25%,47.43% 74.38%,56.14% 80.12%,61.00% 81.12%,64.57% 67.75%,67.71% 81.38%,72.14% 76.00%,80.29% 75.88%,84.29% 71.50%,82.29% 67.88%,84.29% 69.62%,85.29% 67.12%,84.86% 71.12%,86.00% 69.38%,87.43% 64.25%,89.86% 70.00%,93.57% 62.75%,97.29% 66.00%,98.43% 61.25%,106.71% 85.50%,104.14% 108.38%,-4.71% 104.88%);
}

.uiverse-midnight-sky .cartoon-scene .tree-layer-2 {
  transform: translate3d(0, 0, -40px);
  background: var(--tree-2);
  clip-path: polygon(-1.00% 88.25%,1.29% 77.00%,4.57% 84.50%,5.71% 77.25%,8.14% 82.50%,10.14% 72.12%,13.14% 81.25%,14.57% 73.12%,17.29% 79.00%,18.00% 71.62%,19.43% 77.38%,20.86% 69.62%,22.57% 76.12%,22.71% 69.88%,24.43% 74.62%,25.57% 71.38%,26.57% 74.38%,27.00% 70.12%,28.00% 74.38%,28.57% 71.75%,30.43% 74.00%,31.71% 66.88%,34.71% 72.50%,36.57% 68.38%,38.14% 71.88%,40.43% 64.00%,42.43% 71.38%,45.14% 64.25%,47.43% 69.38%,50.43% 60.00%,52.71% 68.38%,53.71% 62.50%,56.14% 66.88%,56.86% 63.50%,58.00% 66.75%,60.71% 56.75%,63.29% 65.62%,64.14% 61.50%,66.14% 64.62%,66.43% 59.38%,68.00% 63.25%,70.00% 56.38%,71.86% 61.88%,74.00% 53.12%,76.00% 60.25%,77.00% 57.00%,78.14% 61.00%,81.29% 49.88%,85.00% 59.88%,85.86% 54.62%,88.00% 59.12%,89.71% 47.75%,93.00% 57.38%,95.29% 51.62%,97.00% 58.38%,100.71% 43.12%,102.57% 105.62%,-2.43% 103.75%);
}

.uiverse-midnight-sky .cartoon-scene .tree-layer-3 {
  transform: translate3d(0, 0, -60px);
  background: var(--tree-3);
  clip-path: polygon(-1.71% 70.00%,1.29% 76.00%,2.57% 69.75%,5.14% 76.25%,5.29% 72.12%,6.86% 74.75%,10.00% 63.88%,11.57% 72.88%,12.71% 69.88%,13.57% 71.75%,14.00% 68.00%,15.00% 69.62%,17.71% 62.25%,19.00% 67.75%,19.71% 66.25%,20.43% 68.50%,22.29% 59.88%,25.29% 68.62%,26.29% 64.38%,27.86% 67.12%,29.29% 59.00%,31.00% 62.12%,31.29% 60.00%,33.57% 65.00%,35.29% 56.88%,38.14% 62.00%,38.14% 59.00%,40.00% 60.50%,41.71% 54.25%,43.86% 58.75%,44.86% 55.62%,46.14% 59.25%,48.00% 51.00%,50.57% 57.38%,51.71% 51.75%,53.57% 55.00%,54.71% 47.50%,57.14% 55.62%,58.14% 51.25%,59.57% 54.12%,60.57% 48.50%,61.43% 52.75%,63.57% 43.62%,65.86% 52.00%,67.86% 45.62%,70.29% 51.00%,70.29% 45.62%,71.57% 49.50%,74.14% 42.00%,75.29% 47.62%,76.71% 38.88%,79.00% 46.38%,80.29% 43.38%,81.14% 47.00%,82.57% 39.25%,84.29% 45.25%,86.43% 35.12%,89.14% 43.38%,90.29% 36.88%,91.86% 45.25%,93.71% 38.38%,95.71% 41.00%,98.29% 33.38%,102.14% 49.00%,102.29% 104.00%,-2.86% 102.00%);
}

.uiverse-midnight-sky .cartoon-scene .house {
  transform: translate3d(0, 0, -80px);
  width: 10%;
  height: 61%;
  left: 41.5%;
  top: 39%;
  color: var(--house-body);
  box-sizing: border-box;
  background-image: linear-gradient(to bottom, var(--house-body) 8%, transparent 0), linear-gradient(transparent 90%, var(--house-body) 0), linear-gradient(22deg, transparent 48%, var(--house-body) 0 52%, transparent 0), linear-gradient(-22deg, transparent 48%, var(--house-body) 0 52%, transparent 0);
  background-size: 100% 100%, 100% 7%, 100% 7%, 100% 7%;
  border-right: 0.5vmin solid var(--house-body);
  border-left: 0.5vmin solid var(--house-body);
}

.uiverse-midnight-sky .cartoon-scene .house::before,
.uiverse-midnight-sky .cartoon-scene .house::after {
  content: "";
  display: block;
  position: absolute;
}

.uiverse-midnight-sky .cartoon-scene .house::before {
  width: 150%;
  left: -25%;
  top: -6.5%;
  height: 7%;
  background: var(--house-roof);
  clip-path: polygon(0% 90%, 50% 0%, 100% 90%, 92% 90%, 92% 100%, 8% 100%, 8% 90%);
}

.uiverse-midnight-sky .cartoon-scene .house::after {
  top: 4%;
  height: 4%;
  background: var(--house-window);
  width: 100%;
  left: -33%;
  border-bottom: 0.25vmin solid var(--house-body);
  border-top: 0.125vmin solid var(--house-body);
  box-sizing: border-box;
  background: linear-gradient(to right, var(--house-body) 20%, transparent 0);
  background-size: 8% 100%;
}

/* ===========================
   Mountains
   =========================== */

.uiverse-midnight-sky .mountains {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.uiverse-midnight-sky .mountains .range {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.uiverse-midnight-sky .range-back {
  height: 70%;
  background: var(--mt-back);
  clip-path: polygon(
    0% 100%, 0% 55%, 2% 60%, 5% 48%, 8% 52%, 11% 41%, 15% 46%, 18% 38%,
    22% 42%, 26% 30%, 30% 37%, 34% 33%, 38% 40%, 42% 28%, 46% 36%,
    50% 32%, 54% 40%, 58% 26%, 62% 35%, 66% 30%, 70% 38%, 74% 22%,
    78% 32%, 82% 28%, 86% 36%, 90% 31%, 94% 40%, 98% 35%, 100% 42%, 100% 100%
  );
  z-index: 0;
  animation: sway-back 18s ease-in-out infinite;
}

.uiverse-midnight-sky .range-mid {
  height: 55%;
  background: var(--mt-mid);
  clip-path: polygon(
    0% 100%, 0% 62%, 3% 55%, 7% 60%, 11% 50%, 15% 55%, 19% 48%,
    24% 52%, 28% 42%, 33% 48%, 37% 45%, 42% 50%, 46% 38%, 50% 44%,
    54% 40%, 58% 48%, 63% 35%, 67% 43%, 72% 39%, 76% 46%, 80% 40%,
    85% 30%, 89% 38%, 93% 34%, 97% 42%, 100% 46%, 100% 100%
  );
  z-index: 2;
  animation: sway-mid 14s ease-in-out infinite 2s;
}

.uiverse-midnight-sky .range-front {
  height: 40%;
  background: var(--mt-front);
  clip-path: polygon(
    0% 100%, 0% 72%, 4% 65%, 9% 70%, 14% 60%, 19% 66%, 23% 58%,
    28% 64%, 33% 72%, 38% 56%, 42% 62%, 47% 55%, 51% 60%, 56% 68%,
    61% 52%, 66% 58%, 71% 50%, 75% 56%, 79% 62%, 84% 52%, 88% 58%,
    92% 50%, 96% 56%, 100% 60%, 100% 100%
  );
  z-index: 3;
  animation: sway-front 10s ease-in-out infinite 4s;
}

@keyframes sway-back {
  0%, 100% { transform: translateY(0); }
  33%      { transform: translateY(-0.3vmin); }
  66%      { transform: translateY(0.2vmin); }
}

@keyframes sway-mid {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.4vmin); }
}

@keyframes sway-front {
  0%, 100% { transform: translateY(0); }
  33%      { transform: translateY(0.3vmin); }
  66%      { transform: translateY(-0.3vmin); }
}

/* ===========================
   Sea
   =========================== */

.uiverse-midnight-sky .sea {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12%;
  background: linear-gradient(180deg, var(--sea-top), var(--sea-bot));
  z-index: 4;
  pointer-events: none;
}

.uiverse-midnight-sky .sea::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 30%),
    repeating-linear-gradient(180deg, transparent 0 1.5vmin, rgba(255,255,255,0.03) 0 1.6vmin),
    radial-gradient(ellipse, rgba(255,255,255,0.1) 50%, transparent 50%) 20% 15% / 30vmin 0.4vmin no-repeat,
    radial-gradient(ellipse, rgba(255,255,255,0.07) 50%, transparent 50%) 60% 30% / 40vmin 0.3vmin no-repeat,
    radial-gradient(ellipse, rgba(255,255,255,0.08) 50%, transparent 50%) 40% 50% / 35vmin 0.4vmin no-repeat,
    radial-gradient(ellipse, rgba(255,255,255,0.05) 50%, transparent 50%) 70% 70% / 45vmin 0.3vmin no-repeat,
    radial-gradient(ellipse, rgba(255,255,255,0.06) 50%, transparent 50%) 30% 85% / 25vmin 0.2vmin no-repeat;
}

/* ===========================
   Ship
   =========================== */

.uiverse-midnight-sky .ship {
  position: absolute;
  bottom: 4vmin;
  left: -30vmin;
  width: 80vmin;
  height: 70vmin;
  z-index: 5;
  transform: scale(0.35);
  transform-origin: bottom center;
  animation: sail 100s linear infinite;
  pointer-events: none;
  background:
    /* mast 1 */
    linear-gradient(90deg, transparent 1vmin, #5a3a2a 1vmin, #5a3a2a 2vmin, transparent 1vmin) 48vmin 7vmin / 30vmin 45vmin no-repeat,
    radial-gradient(ellipse at -5% 50%, transparent 8vmin, #f5f0e8 8vmin, #f5f0e8 20vmin, transparent 1vmin) 38vmin 13vmin / 7vmin 18vmin no-repeat,
    linear-gradient(10deg, #f5f0e8 18vmin, transparent 1vmin) 45vmin -8.75vmin / 12vmin 40vmin no-repeat,
    radial-gradient(ellipse at -5% 50%, #f5f0e8 6.5vmin, transparent 1vmin) 56vmin 3vmin / 15vmin 40vmin no-repeat,
    radial-gradient(ellipse at -5% 50%, transparent 8vmin, #f5f0e8 8vmin, #f5f0e8 20vmin, transparent 1vmin) 38vmin 30vmin / 7vmin 18vmin no-repeat,
    linear-gradient(10deg, #f5f0e8 18vmin, transparent 1vmin) 45vmin 8vmin / 12vmin 40vmin no-repeat,
    radial-gradient(ellipse at -5% 50%, #f5f0e8 6.5vmin, transparent 1vmin) 56vmin 20vmin / 15vmin 40vmin no-repeat,
    linear-gradient(30deg, #f5f0e8 3vmin, transparent 1vmin) 49.5vmin 6.5vmin / 6vmin 4vmin no-repeat,
    /* mast 2 */
    linear-gradient(90deg, transparent 1vmin, #5a3a2a 1vmin, #5a3a2a 2vmin, transparent 1vmin) 31vmin 4vmin / 30vmin 50vmin no-repeat,
    linear-gradient(75deg, transparent 5vmin, #f5f0e8 5vmin, #f5f0e8 5.75vmin, transparent 1vmin) 32vmin 4vmin / 60vmin 50vmin no-repeat,
    linear-gradient(-75deg, transparent 5vmin, #f5f0e8 5vmin, #f5f0e8 5.75vmin, transparent 1vmin) 22vmin 4vmin / 10vmin 50vmin no-repeat,
    linear-gradient(5deg, #f5f0e8 2.5vmin, transparent 1vmin) 21vmin 32vmin / 23vmin 3vmin no-repeat,
    radial-gradient(ellipse, #fc0 3vmin, transparent 1vmin) 17vmin 32vmin / 14vmin 6vmin no-repeat,
    radial-gradient(ellipse, #fc0 3vmin, transparent 1vmin) 23vmin 32.25vmin / 14vmin 6vmin no-repeat,
    radial-gradient(ellipse, #fc0 3vmin, transparent 1vmin) 29vmin 32.5vmin / 14vmin 6vmin no-repeat,
    radial-gradient(ellipse, #fc0 3vmin, transparent 1vmin) 34vmin 32.75vmin / 14vmin 6vmin no-repeat,
    radial-gradient(ellipse at -5% 50%, transparent 8vmin, #f5f0e8 8vmin, #f5f0e8 20vmin, transparent 1vmin) 20vmin 13vmin / 7vmin 18vmin no-repeat,
    linear-gradient(10deg, #f5f0e8 18vmin, transparent 1vmin) 27vmin -8.75vmin / 12vmin 40vmin no-repeat,
    radial-gradient(ellipse at -5% 50%, #f5f0e8 6.5vmin, transparent 1vmin) 38vmin 3vmin / 15vmin 40vmin no-repeat,
    linear-gradient(30deg, #f5f0e8 3vmin, transparent 1vmin) 32vmin 3vmin / 6vmin 4vmin no-repeat,
    /* mast 3 */
    linear-gradient(90deg, transparent 1vmin, #5a3a2a 1vmin, #5a3a2a 2vmin, transparent 1vmin) 17vmin 17vmin / 30vmin 45vmin no-repeat,
    linear-gradient(-75deg, transparent 5vmin, #f5f0e8 5vmin, #f5f0e8 5.75vmin, transparent 1vmin) 3vmin -7vmin / 15vmin 50vmin no-repeat,
    linear-gradient(75deg, transparent 5vmin, #f5f0e8 5vmin, #f5f0e8 5.75vmin, transparent 1vmin) 18vmin -7vmin / 15vmin 50vmin no-repeat,
    /* mast 4 */
    linear-gradient(80deg, transparent 2vmin, #5a3a2a 2vmin, #5a3a2a 3vmin, transparent 1vmin) 7vmin -3vmin / 30vmin 45vmin no-repeat,
    radial-gradient(ellipse at -5% 50%, #f5f0e8 4vmin, transparent 1vmin) 8vmin 18vmin / 15vmin 30vmin no-repeat,
    /* front hull */
    linear-gradient(-12deg, transparent 9vmin, #6a4a2a 9vmin, #6a4a2a 9.5vmin, transparent 1vmin) 50vmin 22vmin / 30vmin 30vmin no-repeat,
    linear-gradient(-25deg, transparent 3vmin, #6a4a2a 3vmin, #6a4a2a 5vmin, transparent 1vmin) 20vmin 22vmin / 46vmin 30vmin no-repeat,
    radial-gradient(ellipse at 0% 0%, #6a4a2a 6vmin, transparent 1vmin) 57vmin 50vmin / 35vmin 30vmin no-repeat,
    radial-gradient(ellipse at 0% 0%, #6a4a2a 9vmin, transparent 1vmin) 50vmin 55vmin / 35vmin 30vmin no-repeat,
    linear-gradient(#6a4a2a 9vmin, transparent 1vmin) 11vmin 50vmin / 46vmin 30vmin no-repeat,
    linear-gradient(#4a2a1a 9vmin, transparent 1vmin) 11vmin 53.5vmin / 40vmin 30vmin no-repeat,
    /* back hull */
    radial-gradient(ellipse at 100% 0%, transparent 8.75vmin, #6a4a2a 8.75vmin, #6a4a2a 22vmin, transparent 1vmin) 3vmin 44vmin / 30vmin 20vmin no-repeat,
    linear-gradient(15deg, #6a4a2a 4.5vmin, transparent 1vmin) 8vmin 39vmin / 30vmin 5vmin no-repeat,
    linear-gradient(-40deg, #5a3a2a 3vmin, transparent 1vmin) 5vmin 56.5vmin / 6vmin 6vmin no-repeat,
    radial-gradient(ellipse at 100% 0%, #6a4a2a 5vmin, transparent 1vmin) -2vmin 42vmin / 15vmin 30vmin no-repeat;
}

@keyframes sail {
  from { left: -30vmin; }
  to { left: 120vw; }
}

/* ===========================
   Lighthouse
   =========================== */

.uiverse-midnight-sky .lighthouse-scene {
  position: absolute;
  bottom: 0;
  left: 75%;
  transform: translateX(-50%) scale(1.5);
  transform-origin: bottom center;
  width: 11vmin;
  height: 30vmin;
  perspective: 80vmin;
  z-index: 6;
  pointer-events: none;
}

.uiverse-midnight-sky .lighthouse-scene .island {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80vmin;
  height: 10vmin;
  clip-path: polygon(0% 100%, 2% 95%, 4% 88%, 8% 83%, 12% 76%, 16% 70%, 20% 64%, 24% 58%, 28% 53%, 32% 48%, 36% 43%, 40% 40%, 44% 37%, 48% 35%, 52% 34%, 56% 35%, 60% 37%, 64% 40%, 68% 43%, 72% 48%, 76% 53%, 80% 58%, 84% 64%, 88% 70%, 92% 76%, 96% 83%, 98% 88%, 99% 94%, 100% 100%);
  background: linear-gradient(180deg, var(--island-top) 0%, var(--island-bot) 100%);
  z-index: 0;
  pointer-events: none;
}

.uiverse-midnight-sky .lighthouse-scene .lighthouse {
  background: transparent;
  width: 11vmin;
  height: 30vmin;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

/* ── Base ── */
.uiverse-midnight-sky .lighthouse-scene .base {
  --r1: var(--lh-base-1) 1.1vmin, transparent calc(1.1vmin + 3px) 100%;
  --r2: var(--lh-base-1) 1vmin, transparent calc(1vmin + 1px) 100%;
  background:
    radial-gradient(ellipse at 14% 37%, var(--r2)),
    radial-gradient(ellipse at 86% 37%, var(--r2)),
    radial-gradient(ellipse at 19% 6%, var(--r1)),
    radial-gradient(ellipse at 81% 6%, var(--r1)),
    radial-gradient(ellipse at 63% 32%, var(--r1)),
    radial-gradient(ellipse at 37% 32%, var(--r1)),
    radial-gradient(ellipse at 76% 60%, var(--r1)),
    radial-gradient(ellipse at 24% 60%, var(--r1)),
    radial-gradient(ellipse at 98% 84%, var(--r1)),
    radial-gradient(ellipse at 73% 96%, var(--r1)),
    radial-gradient(ellipse at 50% 72%, var(--r1)),
    radial-gradient(ellipse at 27% 96%, var(--r1)),
    radial-gradient(ellipse at 2% 84%, var(--r1)),
    linear-gradient(180deg, var(--lh-base-1) 0 0.25vmin, transparent 0 100%),
    linear-gradient(90deg, transparent 1vmin, var(--lh-base-2) 0 calc(100% - 1vmin), transparent 0 100%),
    linear-gradient(-119deg, transparent 0 1.25vmin, var(--lh-base-2) calc(0.9vmin) 70%, transparent 0 100%),
    linear-gradient(119deg, transparent 0 1.25vmin, var(--lh-base-2) calc(0.9vmin + 1px) 70%, transparent 0 100%),
    linear-gradient(90deg, transparent 0 0.75vmin, var(--lh-base-1) 0 calc(100% - 0.75vmin), transparent 0 100%),
    linear-gradient(-119deg, transparent 0 0.9vmin, var(--lh-base-1) calc(0.9vmin + 1px) 70%, transparent 0 100%),
    linear-gradient(119deg, transparent 0 0.9vmin, var(--lh-base-1) calc(0.9vmin + 1px) 70%, transparent 0 100%);
  width: 11vmin;
  height: 3vmin;
  position: absolute;
  bottom: 0;
  border-radius: 1.55vmin 1.55vmin 0 0;
}

.uiverse-midnight-sky .lighthouse-scene .base:before {
  content: "";
  background:
    linear-gradient(-95deg, transparent 0 0.25vmin, var(--lh-red-2) calc(0.25vmin + 1px) 0.65vmin, var(--lh-red) calc(0.65vmin + 1px) 6vmin, transparent 0 100%),
    linear-gradient(95deg, transparent 0 0.25vmin, var(--lh-red-2) calc(0.25vmin + 1px) 0.65vmin, var(--lh-red) calc(0.65vmin + 1px) 6vmin, transparent 0 100%);
  width: 7.5vmin;
  height: 2vmin;
  position: absolute;
  top: -2vmin;
  left: 1.75vmin;
}

.uiverse-midnight-sky .lighthouse-scene .base:after {
  content: "";
  background:
    linear-gradient(-112deg, var(--lh-red) 0 1vmin, var(--lh-white) calc(1vmin + 1px) 1.25vmin, transparent calc(1.25vmin + 1px) 100%),
    linear-gradient(112deg, var(--lh-red) 0 1vmin, var(--lh-white) calc(1vmin + 1px) 1.25vmin, transparent calc(1.25vmin + 1px) 100%),
    repeating-linear-gradient(0deg, var(--lh-base-2) 0 0.3vmin, var(--lh-base-1) 0 0.5vmin);
  width: 4.1vmin;
  height: 2vmin;
  position: absolute;
  top: -2vmin;
  left: 3.5vmin;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0, 5% 0;
  background-size: 100% 100%, 100% 100%, 90% 100%;
}

/* ── Tower ── */
.uiverse-midnight-sky .lighthouse-scene .tower {
  background:
    radial-gradient(circle at 50% 100%, var(--lh-windows) 0.4vmin, transparent calc(0.4vmin + 1px) 100%),
    radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--lh-windows) 0.4vmin, transparent calc(0.4vmin + 1px) 100%),
    radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--lh-windows) 0.4vmin, transparent calc(0.4vmin + 1px) 100%),
    radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--lh-windows) 0.4vmin, transparent calc(0.4vmin + 1px) 100%),
    radial-gradient(circle at 50% calc(100% - 1vmin), var(--lh-windows) 0.4vmin, transparent calc(0.4vmin + 1px) 100%),
    linear-gradient(-94.5deg, var(--lh-shine) 0 1.85vmin, transparent calc(1.85vmin + 1px) 100%),
    linear-gradient(94.5deg, var(--lh-shine) 0 1.85vmin, transparent calc(1.85vmin + 1px) 100%),
    radial-gradient(circle at 50% 125%, var(--lh-white) 0 9vmin, var(--lh-red) calc(9vmin + 1px) 13vmin, var(--lh-white) calc(13vmin + 1px) 17vmin, var(--lh-red) calc(17vmin + 1px) 21vmin, var(--lh-white) calc(21vmin + 1px) 23vmin);
  width: 6vmin;
  height: 19vmin;
  left: 2.5vmin;
  top: 6vmin;
  position: absolute;
  clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
}

/* Tower windows */
.uiverse-midnight-sky .lighthouse-scene .tower:before,
.uiverse-midnight-sky .lighthouse-scene .tower:after {
  content: "";
  position: absolute;
  background:
    linear-gradient(90deg, transparent 0 0.3vmin, var(--lh-white) 0 0.45vmin, transparent 0 100%),
    linear-gradient(180deg, var(--lh-windows) 0 0.35vmin, transparent 0 0.45vmin, var(--lh-windows) 0 0.75vmin, transparent 0 0.85vmin, var(--lh-windows) 0 100%);
  width: 0.7vmin;
  height: 1.3vmin;
  border-radius: 1vmin 1vmin 0 0;
  left: 2.6vmin;
  top: 0.5vmin;
  background-repeat: no-repeat;
  background-size: 100% 75%, 100% 100%;
  background-position: 0 100%, 0 0;
}

.uiverse-midnight-sky .lighthouse-scene .tower:after {
  top: 8vmin;
}

/* ── Top ── */
.uiverse-midnight-sky .lighthouse-scene .top {
  background:
    linear-gradient(90deg, var(--lh-shine) 0 0.75vmin, transparent 0 100%),
    linear-gradient(90deg, var(--lh-shine) 0 0.75vmin, transparent 0 100%),
    linear-gradient(90deg, var(--lh-shine) 0 0.7vmin, transparent 0 100%),
    linear-gradient(90deg, var(--lh-shine) 0 0.7vmin, transparent 0 100%),
    conic-gradient(from -1deg at 8% 89%, transparent 0 35%, var(--lh-shine) 36% 100%),
    conic-gradient(from 0deg at 92% 89%, var(--lh-shine) 0 64%, transparent 65% 100%),
    radial-gradient(circle at 50% 1.55vmin, #fff, #fc0 0.25vmin, var(--lh-red-2) calc(0.25vmin + 1px) 0.35vmin, transparent calc(0.35vmin + 1px) 100%),
    radial-gradient(circle at 50% 187%, var(--lh-white) 0 7vmin, transparent calc(7vmin + 1px) 7.5vmin, var(--lh-white) calc(7.5vmin + 1px) 8.35vmin, transparent calc(8.35vmin + 1px) 9.5vmin, var(--lh-white) calc(9.5vmin + 1px) 100%),
    linear-gradient(-95deg, transparent 0 1.4vmin, var(--lh-shine) calc(1.4vmin + 1px) 1.65vmin, var(--lh-red) calc(1.65vmin + 1px) 2.85vmin, transparent 0 100%),
    linear-gradient(95deg, transparent 0 1.4vmin, var(--lh-shine) calc(1.4vmin + 1px) 1.65vmin, var(--lh-red) calc(1.65vmin + 1px) 2.85vmin, transparent 0 100%);
  width: 4.65vmin;
  height: 5.5vmin;
  left: 3.15vmin;
  top: 0.75vmin;
  position: absolute;
  border-radius: 0.5vmin;
  clip-path: polygon(0% 96%, 0% 70%, 22% 63%, 24% 53%, 7% 56%, 8% 41%, 25% 38%, 27% 17%, 15% 18%, 16% 10%, 22% 8%, 35% 6%, 54% 5%, 74% 8%, 73% 8%, 82% 10%, 83% 18%, 72% 17%, 75% 37%, 88% 41%, 89% 56%, 77% 54%, 78% 62%, 100% 70%, 100% 96%, 85% 100%, 15% 100%);
  background-repeat: no-repeat;
  background-size: 1vmin 1.1vmin, 1vmin 1.1vmin, 1vmin 1.15vmin, 0.45vmin 1.15vmin, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 3.45vmin 0.25vmin, 0.35vmin 0.25vmin, 0vmin 2.1vmin, 3.75vmin 2.1vmin, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* ── Roof ── */
.uiverse-midnight-sky .lighthouse-scene .roof {
  border: 0.65vmin solid transparent;
  border-bottom-color: var(--lh-red);
  left: 4.9vmin;
  top: -0.2vmin;
  position: absolute;
}

/* ── Light & Beam ── */
.uiverse-midnight-sky .lighthouse-scene .light {
  width: 0.75vmin;
  height: 0.75vmin;
  background: var(--lh-light);
  border-radius: 100%;
  left: 5.1vmin;
  top: 1.95vmin;
  position: absolute;
  animation: spin 6s linear 0s infinite;
  animation-play-state: paused;
  perspective: 10vmin;
}

body.night .lighthouse-scene .light {
  animation-play-state: running;
}

.uiverse-midnight-sky .lighthouse-scene .light:before,
.uiverse-midnight-sky .lighthouse-scene .light:after {
  content: "";
  position: absolute;
  width: 30vmin;
  height: 4vmin;
  background: radial-gradient(circle at 0% 50%, #fdf8cc6e, transparent);
  margin-top: -1.85vmin;
  clip-path: polygon(100% 0, 0 53%, 100% 100%);
  margin-left: 0.375vmin;
  transition: opacity 3s ease;
}

body:not(.night) .lighthouse-scene .light:before,
body:not(.night) .lighthouse-scene .light:after {
  opacity: 0;
}

.uiverse-midnight-sky .lighthouse-scene .light:after {
  transform: rotateX(60deg);
}

@keyframes spin {
  25% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { transform: rotateY(360deg); }
}

/* ===========================
   Birds
   =========================== */

.uiverse-midnight-sky .birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.uiverse-midnight-sky .birds span {
  position: absolute;
  width: 16px;
  height: 8px;
  opacity: 0;
  transition: opacity 3s ease;
}

body:not(.night) .birds span {
  opacity: 0.55;
}

.uiverse-midnight-sky .birds span::before,
.uiverse-midnight-sky .birds span::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 9px;
  height: 4px;
  background: #444;
  border-radius: 50% 50% 0 0;
}

.uiverse-midnight-sky .birds span::before {
  left: 0;
  transform: rotate(-18deg);
  transform-origin: right bottom;
}

.uiverse-midnight-sky .birds span::after {
  right: 0;
  transform: rotate(18deg);
  transform-origin: left bottom;
}

.uiverse-midnight-sky .birds span:nth-child(1) {
  top: 22%;
  left: -10vw;
}

.uiverse-midnight-sky .birds span:nth-child(2) {
  top: 32%;
  left: -15vw;
}

.uiverse-midnight-sky .birds span:nth-child(3) {
  top: 16%;
  left: -5vw;
}

body:not(.night) .birds span:nth-child(1) {
  animation: fly1 16s ease-in-out infinite;
}

body:not(.night) .birds span:nth-child(2) {
  animation: fly2 20s ease-in-out infinite 4s;
}

body:not(.night) .birds span:nth-child(3) {
  animation: fly3 14s ease-in-out infinite 8s;
}

@keyframes fly1 {
  0%   { transform: translateX(-10vw) translateY(0); }
  25%  { transform: translateX(25vw) translateY(-2vh); }
  50%  { transform: translateX(55vw) translateY(1vh); }
  75%  { transform: translateX(85vw) translateY(-1.5vh); }
  100% { transform: translateX(110vw) translateY(0); }
}

@keyframes fly2 {
  0%   { transform: translateX(-15vw) translateY(0); }
  30%  { transform: translateX(30vw) translateY(-1vh); }
  60%  { transform: translateX(65vw) translateY(2vh); }
  100% { transform: translateX(115vw) translateY(0); }
}

@keyframes fly3 {
  0%   { transform: translateX(-5vw) translateY(0); }
  20%  { transform: translateX(20vw) translateY(-3vh); }
  50%  { transform: translateX(50vw) translateY(1vh); }
  80%  { transform: translateX(80vw) translateY(-2vh); }
  100% { transform: translateX(105vw) translateY(0); }
}

/* ===========================
   Star Reflections on Sea
   =========================== */

.uiverse-midnight-sky .star-reflections {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 3s ease;
}

body.night .star-reflections {
  opacity: 1;
}

.uiverse-midnight-sky .star-reflections span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  box-shadow: 0 0 3px 1px rgba(255,255,255,0.3);
}

.uiverse-midnight-sky .star-reflections span:nth-child(1) {
  left: 15%;
  top: 20%;
  animation: reflectTwinkle 4s ease-in-out infinite;
}

.uiverse-midnight-sky .star-reflections span:nth-child(2) {
  left: 32%;
  top: 45%;
  animation: reflectTwinkle 5s ease-in-out infinite 1s;
}

.uiverse-midnight-sky .star-reflections span:nth-child(3) {
  left: 55%;
  top: 30%;
  animation: reflectTwinkle 3.5s ease-in-out infinite 0.5s;
}

.uiverse-midnight-sky .star-reflections span:nth-child(4) {
  left: 72%;
  top: 55%;
  animation: reflectTwinkle 6s ease-in-out infinite 2s;
}

.uiverse-midnight-sky .star-reflections span:nth-child(5) {
  left: 88%;
  top: 15%;
  animation: reflectTwinkle 4.5s ease-in-out infinite 1.5s;
}

.uiverse-midnight-sky .star-reflections span:nth-child(6) {
  left: 42%;
  top: 65%;
  width: 3px;
  height: 3px;
  animation: reflectTwinkle 7s ease-in-out infinite 3s;
}

.uiverse-midnight-sky .star-reflections span:nth-child(7) {
  left: 8%;
  top: 50%;
  animation: reflectTwinkle 5.5s ease-in-out infinite 0.3s;
}

@keyframes reflectTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 1;     transform: scale(1.5); }
}

/* ===========================
   Fireflies
   =========================== */

.uiverse-midnight-sky .fireflies {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  height: 15%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 3s ease;
}

body.night .fireflies {
  opacity: 1;
}

.uiverse-midnight-sky .fireflies span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #cf6;
  border-radius: 50%;
  box-shadow: 0 0 6px 3px rgba(200,255,100,0.4);
  animation: firefly 3s ease-in-out infinite;
}

.uiverse-midnight-sky .fireflies span::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,255,100,0.15), transparent 70%);
}

.uiverse-midnight-sky .fireflies span:nth-child(1) {
  left: 12%;
  bottom: 30%;
  animation: firefly 3.2s ease-in-out infinite 0.5s;
}

.uiverse-midnight-sky .fireflies span:nth-child(2) {
  left: 30%;
  bottom: 50%;
  animation: firefly 2.8s ease-in-out infinite 1.2s;
}

.uiverse-midnight-sky .fireflies span:nth-child(3) {
  left: 55%;
  bottom: 25%;
  animation: firefly 4s ease-in-out infinite 2s;
}

.uiverse-midnight-sky .fireflies span:nth-child(4) {
  left: 75%;
  bottom: 60%;
  width: 3px;
  height: 3px;
  animation: firefly 3.5s ease-in-out infinite 0.8s;
}

.uiverse-midnight-sky .fireflies span:nth-child(5) {
  left: 90%;
  bottom: 40%;
  width: 5px;
  height: 5px;
  animation: firefly 2.5s ease-in-out infinite 1.8s;
}

.uiverse-midnight-sky .fireflies span:nth-child(6) {
  left: 20%;
  bottom: 70%;
  width: 4px;
  height: 4px;
  animation: firefly 3.8s ease-in-out infinite 0.3s;
}

.uiverse-midnight-sky .fireflies span:nth-child(7) {
  left: 60%;
  bottom: 55%;
  width: 3px;
  height: 3px;
  animation: firefly 2.2s ease-in-out infinite 2.5s;
}

.uiverse-midnight-sky .fireflies span:nth-child(8) {
  left: 45%;
  bottom: 80%;
  width: 5px;
  height: 5px;
  animation: firefly 4.2s ease-in-out infinite 1s;
}

@keyframes firefly {
  0%, 100% { opacity: 0.1; transform: translateY(0) scale(0.8); }
  25%      { opacity: 1;   transform: translateY(-8px) scale(1.2); }
  50%      { opacity: 0.4; transform: translateY(0) scale(0.9); }
  75%      { opacity: 0.8; transform: translateY(-4px) scale(1.1); }
}

/* ===========================
   Sunrise / Sunset Blush
   =========================== */

.uiverse-midnight-sky .blush {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 30% at 50% 55%, rgba(255,160,80,0.3) 0%, transparent 70%),
    linear-gradient(180deg, transparent 35%, rgba(255,140,70,0.1) 45%, rgba(255,180,120,0.1) 50%, transparent 55%);
  opacity: 0;
  transition: opacity 3s ease;
  z-index: 0;
}

body.sunrise .blush,
body.sunset .blush {
  opacity: 0.6;
}

/* ── Daytime Clouds ── */

.uiverse-midnight-sky .day-clouds {
  position: absolute;
  top: 5%;
  left: 10%;
  width: 200px;
  height: 130px;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
}

body:not(.night) .day-clouds {
  opacity: 1;
}

.day-clouds .cloud {
  position: absolute;
  border-radius: 50px;
}

.day-clouds .cloud-1 {
  width: 140px;
  height: 50px;
  background: rgba(220,236,248,0.85);
  top: 20px;
  left: 10px;
  animation: dayClouds 8s infinite ease-in-out;
}

.day-clouds .cloud-1::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(220,236,248,0.85);
  border-radius: 50%;
  top: -30px;
  left: 20px;
}

.day-clouds .cloud-1::after {
  content: '';
  position: absolute;
  width: 45px;
  height: 45px;
  background: rgba(220,236,248,0.85);
  border-radius: 50%;
  top: -22px;
  right: 30px;
}

.day-clouds .cloud-2 {
  width: 100px;
  height: 36px;
  background: rgba(196,221,239,0.8);
  top: 85px;
  left: 75px;
  animation: dayClouds 12s infinite ease-in-out;
}

.day-clouds .cloud-2::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(196,221,239,0.8);
  border-radius: 50%;
  top: -20px;
  left: 16px;
}

.day-clouds .cloud-2::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: rgba(196,221,239,0.8);
  border-radius: 50%;
  top: -14px;
  right: 20px;
}

@keyframes dayClouds {
  0%   { transform: translateX(15px); }
  50%  { transform: translateX(0px); }
  100% { transform: translateX(15px); }
}

@media (max-width: 640px) {
  .uiverse-midnight-sky .day-clouds {
    top: 2%;
    left: 3%;
    transform: scale(0.6);
    transform-origin: top right;
  }
}