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

body {
  font-family: 'Noto Sans SC', sans-serif;
  background: var(--night);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='8' height='8' fill='%23fff'/%3E%3Crect x='8' y='8' width='8' height='8' fill='%23fff'/%3E%3C/svg%3E") 0 0, auto;
}

/* ===== PIXEL SKY BACKGROUND ===== */
.sky-bg {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #0A1628 0%, #1A2E52 40%, #2D5A8E 70%, #4A7FB5 100%);
  z-index: 0;
}

.stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.star {
  position: absolute;
  background: white;
  image-rendering: pixelated;
  animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* pixel clouds */
.clouds {
  position: fixed;
  top: 60px;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.cloud {
  position: absolute;
  background: rgba(255,255,255,0.85);
  image-rendering: pixelated;
  animation: float-cloud 30s linear infinite;
}

@keyframes float-cloud {
  from { transform: translateX(-200px); }
  to { transform: translateX(110vw); }
}

/* Ground */
.ground {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 64px;
  z-index: 20;
  pointer-events: none;
}

.ground-grass {
  height: 20px;
  background: repeating-linear-gradient(90deg,
    var(--grass-top) 0px, var(--grass-top) 16px,
    #4a8a28 16px, #4a8a28 32px,
    var(--grass-top) 32px, var(--grass-top) 48px,
    #6ab03a 48px, #6ab03a 64px
  );
  image-rendering: pixelated;
}

.ground-dirt {
  height: 44px;
  background: repeating-linear-gradient(90deg,
    var(--dirt) 0px, var(--dirt) 16px,
    #8a6d3a 16px, #8a6d3a 32px,
    #b08050 32px, #b08050 48px,
    var(--dirt) 48px, var(--dirt) 64px
  );
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a1628; }
::-webkit-scrollbar-thumb { background: var(--grass-top); border-radius: 0; image-rendering: pixelated; }

/* ===== PIXEL DIVIDER ===== */
.pixel-divider {
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--gold) 0, var(--gold) 8px,
    transparent 8px, transparent 12px
  );
  margin: 24px 0;
  opacity: 0.4;
}