/* Shared pixel farm background */
.pixel-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.pixel-sky {
  position: absolute;
  inset: 0 0 35%;
  background:
    linear-gradient(180deg, #0a0e17 0%, #1a1040 35%, #2d1b69 70%, #1e3a5f 100%);
}

.pixel-clouds .cloud {
  position: absolute;
  background: #fff;
  opacity: 0.12;
  image-rendering: pixelated;
  animation: cloud-drift linear infinite;
}

.pixel-clouds .c1 {
  width: 80px;
  height: 24px;
  top: 12%;
  left: -100px;
  box-shadow:
    16px -8px 0 0 #fff,
    32px 0 0 0 #fff,
    48px -4px 0 0 #fff;
  animation-duration: 45s;
}

.pixel-clouds .c2 {
  width: 64px;
  height: 20px;
  top: 22%;
  left: -80px;
  box-shadow:
    12px -6px 0 0 #fff,
    24px 0 0 0 #fff;
  animation-duration: 60s;
  animation-delay: -20s;
}

.pixel-clouds .c3 {
  width: 96px;
  height: 28px;
  top: 8%;
  left: -120px;
  box-shadow:
    20px -10px 0 0 #fff,
    40px 0 0 0 #fff,
    60px -6px 0 0 #fff;
  animation-duration: 75s;
  animation-delay: -35s;
}

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

.pixel-hills {
  position: absolute;
  bottom: 28%;
  left: 0;
  right: 0;
  height: 120px;
  background:
    repeating-linear-gradient(
      90deg,
      #1a472a 0px, #1a472a 32px,
      #14532d 32px, #14532d 64px
    );
  clip-path: polygon(
    0% 100%, 0% 60%,
    8% 45%, 16% 55%, 24% 40%, 32% 50%,
    40% 35%, 48% 48%, 56% 38%, 64% 52%,
    72% 42%, 80% 55%, 88% 45%, 96% 58%,
    100% 50%, 100% 100%
  );
  opacity: 0.7;
}

.pixel-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background:
    repeating-linear-gradient(
      0deg,
      #166534 0px, #166534 16px,
      #15803d 16px, #15803d 32px
    ),
    repeating-linear-gradient(
      90deg,
      #166534 0px, #166534 16px,
      #14532d 16px, #14532d 32px
    );
  opacity: 0.85;
}

.pixel-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(153, 69, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 69, 255, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}