@property --top { syntax: "<color>"; inherits: true; initial-value: #56B4FF; }
@property --bot { syntax: "<color>"; inherits: true; initial-value: #D3F0FF; }

/* Scenery for every zone, drawn inside the game card (sizes use container units). */
/* ---------- Sky ---------- */
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--top), var(--bot));
  transition: --top 1400ms ease, --bot 1400ms ease;
  overflow: hidden;
}

.deco {
  position: absolute;
  inset: 0;
  transform: translateY(var(--shift, 0));
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.layer { position: absolute; inset: 0; transition: transform 1300ms cubic-bezier(.6,0,.2,1), opacity 1100ms ease; }
.layer.leaving { transform: translateY(70cqh); opacity: 0; }
.layer.entering { transform: translateY(-45cqh); opacity: 0; }

/* Flat clouds at three depths */
.cloud { position: absolute; height: auto; fill: #FFFFFF; }
.cloud.d1 { opacity: 0.96; }
.cloud.d2 { opacity: 0.7; }
.cloud.d3 { opacity: 0.45; }
/* Depth: as you climb, near clouds slide past faster than far ones */
.cloud { transition: translate 900ms cubic-bezier(.2,.8,.2,1); }
.cloud.d1 { translate: 0 calc(var(--shift, 0px) * 0.9); }
.cloud.d2 { translate: 0 calc(var(--shift, 0px) * 0.35); }
.cloud.d3 { translate: 0 calc(var(--shift, 0px) * -0.2); }
/* City silhouette: a pale far layer and a deeper near layer, tinted by the sky */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44cqh; }
.skyline .far { fill: color-mix(in srgb, var(--bot) 62%, var(--top)); }
.skyline .near { fill: color-mix(in srgb, var(--top) 82%, #0D2547); }
/* Jets as contrails: a bright head and a long fading tail */
.trail { position: absolute; left: 104%; height: 2px; border-radius: 2px; background: linear-gradient(to right, #FFFFFF 0 3px, rgba(255, 255, 255, 0.65) 4px, rgba(255, 255, 255, 0) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .fly-left { animation: fly-left var(--dur, 24s) linear infinite; animation-delay: var(--delay, 0s); }
}
@keyframes fly-left { to { transform: translateX(-140cqw); } }
.haze { position: absolute; left: 0; right: 0; bottom: 24%; height: 10%; background: linear-gradient(to bottom, transparent, rgba(160, 200, 255, 0.18), transparent); }
.sat { position: absolute; left: -4%; width: 3px; height: 3px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px 2px rgba(200, 225, 255, 0.8); }

.star { position: absolute; border-radius: 50%; background: #FFFFFF; }

.earth {
  position: absolute;
  left: 50%;
  bottom: calc(-140cqmax + var(--lift) * 40cqmax);
  width: 220cqmax;
  height: 160cqmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 30% 6% at 38% 3%, rgba(90, 160, 90, 0.55), transparent 70%),
    radial-gradient(ellipse 22% 4% at 64% 5%, rgba(220, 235, 255, 0.35), transparent 70%),
    radial-gradient(ellipse at 50% 0%, #4AA8F5 0%, #1E66C4 10%, #0F3C83 24%, #081F4A 46%);
  box-shadow: 0 -0.35cqmax 0 rgba(190, 235, 255, 0.95), 0 -1.6cqmax 4cqmax rgba(90, 170, 255, 0.55);
}


.planet { position: absolute; border-radius: 50%; transform: translate(-50%, 0); }
.moonball { background: radial-gradient(circle at 35% 30%, #F1F1EE, #B9B8B2 60%, #7E7D78); box-shadow: 0 0 80px rgba(240, 240, 230, 0.18); }
.moonball i { position: absolute; border-radius: 50%; background: rgba(90, 90, 85, 0.25); }
.moonball i:nth-child(1) { width: 18%; height: 18%; left: 22%; top: 30%; }
.moonball i:nth-child(2) { width: 11%; height: 11%; left: 58%; top: 52%; }
.moonball i:nth-child(3) { width: 8%; height: 8%; left: 40%; top: 68%; }
.earthball { background: radial-gradient(circle at 35% 30%, #8FD0FF, #2F7FD6 55%, #0C3A7A); box-shadow: 0 0 30px rgba(110, 180, 255, 0.5); }
.marsball { background: radial-gradient(circle at 35% 30%, #F2A06B, #C1542C 55%, #5E1F10); box-shadow: 0 0 90px rgba(220, 90, 50, 0.25); }
.jupiterball { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25), transparent 55%), repeating-linear-gradient(176deg, #E7C9A0 0 7%, #C98E5C 7% 12%, #F0DDBF 12% 18%, #B27548 18% 22%); box-shadow: 0 0 100px rgba(230, 170, 110, 0.2); }
.saturnball { background: radial-gradient(circle at 35% 30%, #F6E6BF, #D4B57A 55%, #7D6232); }
.saturnball .ring { position: absolute; left: -45%; top: 38%; width: 190%; height: 24%; border-radius: 50%; border: 1.6cqmin solid rgba(230, 210, 160, 0.75); transform: rotate(-14deg); }
.sunspeck { background: #FFF3C4; box-shadow: 0 0 30px 10px rgba(255, 230, 150, 0.6); }

.glow { position: absolute; width: 22cqmin; height: 22cqmin; border-radius: 50%; transform: translate(-50%, -50%); }
.glow.red { background: radial-gradient(circle, #FFD2B0 0%, #FF6A3D 18%, rgba(255, 70, 40, 0.25) 40%, transparent 70%); }

.spiral, .andromeda { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.spiral { width: 90cqmin; height: 46cqmin; background: radial-gradient(ellipse, #FFF4D9 0%, #E9B98A 10%, rgba(170, 110, 200, 0.45) 30%, rgba(80, 60, 170, 0.18) 55%, transparent 72%); transform: translate(-50%, -50%) rotate(-12deg); }
.andromeda { width: 70cqmin; height: 26cqmin; background: radial-gradient(ellipse, #F4ECFF 0%, #B8A6F0 14%, rgba(110, 90, 210, 0.35) 38%, transparent 70%); transform: translate(-50%, -50%) rotate(28deg); }
.web { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(140, 110, 255, 0.18), transparent 30%), radial-gradient(circle at 70% 65%, rgba(255, 120, 200, 0.14), transparent 28%); }

@media (prefers-reduced-motion: no-preference) {
  .drift { animation: drift var(--dur, 80s) linear infinite alternate; }
  .fly { animation: fly var(--dur, 20s) linear infinite; animation-delay: var(--delay, 0s); }
  .bob { animation: bob 5s ease-in-out infinite; }
  .star { animation: twinkle 4s ease-in-out infinite; }
}
@keyframes drift { to { transform: translateX(10cqw); } }
@keyframes fly { to { transform: translateX(130cqw); } }
@keyframes bob { 50% { transform: translateY(-14px); } }
@keyframes twinkle { 50% { opacity: 0.25; } }