* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: var(--primary-bg, #6dd3e7);
  padding: 100px;
  overflow-x: hidden;
}

/* ==================== HORIZON & MOUNTAINS ==================== */

/*
 * Parallax depth illusion — layers from back to front:
 *   .horizon       — mountain silhouettes, peaks near mid-screen
 *   .ground-far    — rolling hills, just below mountains
 *   .ground-mid    — closer terrain, darker
 *   .ground-near   — nearest dark foreground strip
 *
 * .horizon has height: 70vh so peaks (at ~10-25% of container height)
 * land around 37-48% from the top of the viewport — visible middle area.
 */

.horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70vh;
  pointer-events: none;
}

.mtn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.mtn-far {
  background: var(--bg-mtn-far);
  background-size: auto 100%;
}

.mtn-mid {
  display: var(--mtn-mid-display);
  background: var(--bg-mtn-mid);
  background-size: auto 100%;
}

.mtn-near {
  background: var(--bg-mtn-near);
  background-size: auto 100%;
}

.mtn-closest {
  display: var(--mtn-closest-display);
  background: var(--bg-mtn-closest);
  background-size: auto 100%;
}

/* ==================== PARALLAX GROUND LAYERS ==================== */

.parallax-ground {
  display: none;
}

/* Far ground — rolling hills just below the mountain bases */
.ground-far {
  height: 28vh;
  background: var(--ground-far);
  clip-path: polygon(
    0% 100%,
    0% 28%,  8% 18%, 18% 30%, 30% 14%, 42% 26%,
   54% 11%, 65% 22%, 76% 13%, 88% 25%, 96% 17%,
    100% 22%, 100% 100%
  );
}

/* Mid ground — closer, more pronounced undulations */
.ground-mid {
  height: 18vh;
  background: var(--ground-mid);
  clip-path: polygon(
    0% 100%,
    0% 34%, 10% 20%, 22% 36%, 36% 18%, 50% 34%,
   64% 16%, 78% 30%, 90% 20%, 100% 28%,
    100% 100%
  );
}

/* Near ground — closest layer, large slow curves, darkest */
.ground-near {
  height: 10vh;
  background: var(--ground-near);
  clip-path: polygon(
    0% 100%,
    0% 45%, 15% 25%, 32% 48%, 52% 18%, 70% 40%,
    86% 20%, 100% 35%,
    100% 100%
  );
}

/* ==================== RESPONSIVE: ground layers on narrow screens ==================== */
@media (max-width: 600px) {
  .ground-far {
    clip-path: polygon(
      0% 100%,
      0% 30%, 25% 14%, 52% 28%, 76% 12%, 100% 22%,
      100% 100%
    );
  }

  .ground-mid {
    clip-path: polygon(
      0% 100%,
      0% 38%, 30% 18%, 62% 34%, 88% 20%, 100% 28%,
      100% 100%
    );
  }

  .ground-near {
    clip-path: polygon(
      0% 100%,
      0% 50%, 38% 22%, 68% 44%, 100% 28%,
      100% 100%
    );
  }
}

/* ==================== CLOUDS ==================== */

.cloud {
  -webkit-animation: clouds 60s infinite linear;
  -moz-animation: clouds 60s infinite linear;
  -ms-animation: clouds 60s infinite linear;
  -o-animation: clouds 60s infinite linear;
  animation: clouds 60s infinite linear;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  position: relative;
  margin: 33px 0 0 0;
  width: 54px;
  height: 5px;
  background: var(--cloud-bg, #f7e7eb);
  /* Promote each cloud to its own compositor layer. Without this the drift is
     still animated on the main thread and repaints the area behind it every
     frame — which, over the world map, is a very large area. */
  will-change: transform;
}
.cloud.tiny {
  -moz-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
}
.cloud.small {
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.cloud.normal {
  -moz-transform: scale(2, 2);
  -ms-transform: scale(2, 2);
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}
.cloud.large {
  -moz-transform: scale(4, 4);
  -ms-transform: scale(4, 4);
  -webkit-transform: scale(4, 4);
  transform: scale(4, 4);
}
.cloud div {
  -moz-box-shadow: inset -2px -3px 0 0 var(--cloud-bg, #f7e7eb);
  -webkit-box-shadow: inset -2px -3px 0 0 var(--cloud-bg, #f7e7eb);
  box-shadow: inset -2px -3px 0 0 var(--cloud-bg, #f7e7eb);
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: -3px;
  bottom: 0;
  background: var(--cloud-bg2, #fafbf0);
  z-index: 10;
}
.cloud div:first-child + div {
  -moz-transform: scale(1.6, 1.6);
  -ms-transform: scale(1.6, 1.6);
  -webkit-transform: scale(1.6, 1.6);
  transform: scale(1.6, 1.6);
  margin: 0 0 4px 13px;
  z-index: 9;
}
.cloud div:first-child + div + div {
  -moz-transform: scale(2.4, 2.4);
  -ms-transform: scale(2.4, 2.4);
  -webkit-transform: scale(2.4, 2.4);
  transform: scale(2.4, 2.4);
  margin: 0 0 9px 32px;
  z-index: 8;
}
.cloud div:first-child + div + div + div {
  -moz-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -webkit-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
  margin: 0 0 2px 50px;
  z-index: 7;
}

/* Drift with transform, never `left`.
 *
 * `left` is a layout property: animating it made the browser lay the whole page
 * out again on every frame, and with the world map's ~100k nodes behind these
 * clouds that pinned the main thread at ~98% busy on an idle page. transform is
 * composited and skips layout entirely — same motion, 7% busy.
 *
 * vw rather than % because transform percentages resolve against the element's
 * own width (54px) instead of the containing block. The clouds' container is
 * viewport-wide, so 100vw reproduces what `left: 100%` used to mean. */
@-webkit-keyframes clouds {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
@-moz-keyframes clouds {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
@-ms-keyframes clouds {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
@keyframes clouds {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(120vw);
  }
}
.cloud-1 {
  -webkit-animation-duration: 263s;
  -moz-animation-duration: 263s;
  -ms-animation-duration: 263s;
  -o-animation-duration: 263s;
  animation-duration: 263s;
  margin-left: 20%;
}

.cloud-2 {
  -webkit-animation-duration: 99s;
  -moz-animation-duration: 99s;
  -ms-animation-duration: 99s;
  -o-animation-duration: 99s;
  animation-duration: 99s;
  margin-left: 90%;
}

.cloud-3 {
  -webkit-animation-duration: 142s;
  -moz-animation-duration: 142s;
  -ms-animation-duration: 142s;
  -o-animation-duration: 142s;
  animation-duration: 142s;
  margin-left: 50%;
}

.cloud-4 {
  -webkit-animation-duration: 152s;
  -moz-animation-duration: 152s;
  -ms-animation-duration: 152s;
  -o-animation-duration: 152s;
  animation-duration: 152s;
  margin-left: 43%;
}

.cloud-5 {
  -webkit-animation-duration: 215s;
  -moz-animation-duration: 215s;
  -ms-animation-duration: 215s;
  -o-animation-duration: 215s;
  animation-duration: 215s;
  margin-left: 83%;
}

.cloud-6 {
  -webkit-animation-duration: 139s;
  -moz-animation-duration: 139s;
  -ms-animation-duration: 139s;
  -o-animation-duration: 139s;
  animation-duration: 139s;
  margin-left: 73%;
}

.cloud-7 {
  -webkit-animation-duration: 109s;
  -moz-animation-duration: 109s;
  -ms-animation-duration: 109s;
  -o-animation-duration: 109s;
  animation-duration: 109s;
  margin-left: 69%;
}

.cloud-8 {
  -webkit-animation-duration: 121s;
  -moz-animation-duration: 121s;
  -ms-animation-duration: 121s;
  -o-animation-duration: 121s;
  animation-duration: 121s;
  margin-left: 100%;
}

.cloud-9 {
  -webkit-animation-duration: 101s;
  -moz-animation-duration: 101s;
  -ms-animation-duration: 101s;
  -o-animation-duration: 101s;
  animation-duration: 101s;
  margin-left: 10%;
}

.cloud-10 {
  -webkit-animation-duration: 126s;
  -moz-animation-duration: 126s;
  -ms-animation-duration: 126s;
  -o-animation-duration: 126s;
  animation-duration: 126s;
  margin-left: 14%;
}

.cloud-11 {
  -webkit-animation-duration: 96s;
  -moz-animation-duration: 96s;
  -ms-animation-duration: 96s;
  -o-animation-duration: 96s;
  animation-duration: 96s;
  margin-left: 73%;
}

.cloud-12 {
  -webkit-animation-duration: 83s;
  -moz-animation-duration: 83s;
  -ms-animation-duration: 83s;
  -o-animation-duration: 83s;
  animation-duration: 83s;
  margin-left: 51%;
}

/* ── Night sky ──────────────────────────────────────────────────────────────
   Stars, only after dark. The element ships on every page inside #background
   (views/clouds.jsx) and does nothing until the theme is dark, keyed on BOTH
   signals the way the scenic background does it: the in-game toggle
   (html[data-theme="dark"]) and the OS preference, with an explicit light
   override so a forced-light toggle still wins over a dark OS.

   No image: two tiled fields of radial-gradient dots, one fine and faint, one
   sparser and brighter, drifting at different rates. That keeps it a couple of
   hundred bytes and lets the density follow the tile rather than a fixed
   bitmap that would repeat visibly on an ultrawide screen. */
.night-stars {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Behind the far mountains (z1) and the ground band (z2) that the scenic
     background draws on #background's own pseudo-elements. */
  z-index: 0;
}

.night-stars::before,
.night-stars::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-repeat: repeat;
}

/* The fine field: many small, dim stars. */
.night-stars::before {
  background-image:
    radial-gradient(1px 1px at 24px 38px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 118px 92px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 191px 22px, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 63px 158px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 232px 131px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 149px 199px, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 12px 214px, rgba(255, 255, 255, 0.65), transparent);
  background-size: 260px 240px;
  opacity: 0.55;
  animation: nightStarsTwinkleFine 7s ease-in-out infinite;
}

/* The bright field: fewer, larger, with a faint halo. */
.night-stars::after {
  background-image:
    radial-gradient(2px 2px at 84px 56px, rgba(255, 252, 226, 0.95), transparent),
    radial-gradient(2px 2px at 318px 176px, rgba(226, 240, 255, 0.9), transparent),
    radial-gradient(1.6px 1.6px at 208px 288px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(2px 2px at 402px 74px, rgba(255, 244, 214, 0.8), transparent);
  background-size: 470px 420px;
  opacity: 0.75;
  animation: nightStarsTwinkleBright 11s ease-in-out infinite;
}

@keyframes nightStarsTwinkleFine {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.68; }
}

@keyframes nightStarsTwinkleBright {
  0%, 100% { opacity: 0.6; }
  45%      { opacity: 0.95; }
}

:root[data-theme="dark"] .night-stars {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .night-stars {
    display: block;
  }
}

:root[data-theme="light"] .night-stars {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .night-stars::before,
  .night-stars::after {
    animation: none;
  }
}