* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: "Courier New", Courier, monospace;
  background: #241539;
  overflow-x: hidden;
}

.scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #211235 0%,
    #37204f 15%,
    #572a5d 32%,
    #8a3a58 48%,
    #bd5645 62%,
    #e5803e 76%,
    #f8b559 100%
  );
}

.sun {
  position: absolute;
  left: 21%;
  bottom: 16vw;
  width: clamp(58px, 8vw, 104px);
  height: clamp(58px, 8vw, 104px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff5d2 0%, #ffd379 55%, #ff9f57 100%);
  box-shadow:
    0 0 60px 26px rgba(255, 188, 98, 0.55),
    0 0 150px 72px rgba(255, 140, 80, 0.26);
  z-index: 1;
}

.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 2;
}

.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 3;
}

.grass-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 5;
  pointer-events: none;
}

.pals {
  position: absolute;
  left: 50%;
  bottom: 17vw;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 2.4vw, 18px);
  z-index: 4;
}

.pal {
  position: relative;
}

.pal::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 116px;
  height: 12px;
  transform: translateX(-50%);
  background: rgba(18, 8, 22, 0.25);
  border-radius: 50%;
  z-index: -1;
}

.pal canvas {
  display: block;
  width: clamp(120px, 24vw, 240px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.title {
  position: absolute;
  bottom: clamp(12px, 2.4vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  font-size: clamp(16px, 5.6vw, 46px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff1da;
  padding: 0.32em 0.8em;
  max-width: 96vw;
  border-radius: 12px;
  background: rgba(16, 7, 22, 0.66);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  text-shadow: 3px 3px 0 #7c2f3b, 0 0 16px rgba(255, 170, 90, 0.5);
  white-space: nowrap;
}