/* База: ресет, типографика, фон-мир */
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scrollbar-color: var(--edge) rgba(0, 0, 0, .3); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

button, input, select { font: inherit; }
a { color: var(--sky); text-decoration-color: color-mix(in srgb, var(--sky) 45%, transparent); }
a:hover { filter: brightness(1.15); }
code { color: var(--gold); }
.hidden { display: none !important; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Мир на заднем плане ---------- */
.world { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.world > div { position: absolute; inset: 0; pointer-events: none; }

.world-sky {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-bottom) 100%);
}

/* пиксельные звёзды */
.world-stars {
  background-image:
    radial-gradient(1.5px 1.5px at 25px 35px, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(2px 2px at 121px 88px, rgba(255,255,215,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 201px 41px, rgba(185,212,255,.85), transparent 60%),
    radial-gradient(1px 1px at 81px 161px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(2px 2px at 168px 201px, rgba(255,241,199,.75), transparent 60%),
    radial-gradient(1px 1px at 45px 220px, rgba(255,255,255,.5), transparent 60%);
  background-size: 240px 240px;
  opacity: var(--stars-opacity);
  animation: twinkle 5s ease-in-out infinite alternate;
  mask-image: linear-gradient(to bottom, #000 0 42%, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 42%, transparent 72%);
}
@keyframes twinkle {
  from { opacity: calc(var(--stars-opacity) * .5); }
  to { opacity: var(--stars-opacity); }
}

/* медленно плывущие облака */
.world-clouds {
  background-image:
    radial-gradient(70px 22px at 15% 16%, var(--cloud) 60%, transparent 61%),
    radial-gradient(110px 28px at 46% 28%, var(--cloud) 60%, transparent 61%),
    radial-gradient(80px 20px at 76% 12%, var(--cloud) 60%, transparent 61%),
    radial-gradient(130px 30px at 92% 34%, var(--cloud) 60%, transparent 61%);
  background-size: 1600px 100%;
  background-repeat: repeat-x;
  animation: drift 120s linear infinite;
}
@keyframes drift { to { background-position: 1600px 0; } }

/* силуэты холмов */
.world-hills {
  background:
    radial-gradient(60vw 30vh at 10% 102%, var(--hills-far) 60%, transparent 61%),
    radial-gradient(72vw 36vh at 90% 104%, var(--hills-far) 60%, transparent 61%),
    radial-gradient(85vw 26vh at 45% 104%, var(--hills-near) 60%, transparent 61%);
}

/* земля с травяной кромкой */
.world-ground {
  top: auto;
  height: 96px;
  background:
    linear-gradient(180deg, var(--grass) 0 10px, rgba(0, 0, 0, .18) 10px 12px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 16px, transparent 16px 32px),
    linear-gradient(180deg, var(--ground), var(--ground-deep));
  box-shadow: 0 -8px 26px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  .world-stars, .world-clouds { animation: none; }
}