/* Gens Prima: colours from the game's palette (engine/data/terrain_palette.json) */
:root {
  --sky-0: #2e3858; --sky-1: #394465; --sky-2: #445072; --sky-3: #545d7e; --sky-4: #656a8b;
  --sky-5: #767694; --sky-6: #87819c; --sky-7: #988a9f; --sky-8: #aa909f; --sky-9: #ba979c;
  --sky-10: #c89f99; --sky-11: #d5a796; --sky-12: #deb297; --sky-13: #e7be99;
  --turf-dark: #3f3118; --turf: #595329; --turf-lite: #6a6936;
  --copper-dark: #372112; --copper: #a46136; --copper-lite: #dd874d; --copper-glint: #f79a58;
  --verdigris: #398a73; --verdigris-lite: #62d2af; --glow: #79f3cb;
  --chalk: #f1eede; --chalk-dim: #cdc2ae; --peach: #ecc9a1;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sky-0); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sky-0);
  color: var(--chalk);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
img { display: block; max-width: 100%; height: auto; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--verdigris-lite); }
a:hover, a:focus-visible { color: var(--glow); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- hero: the game's own dawn sky (engine/data/terrain/sky.png) with the title stone on a chalk down.
   All art is 1x pixel art shown at 2x. Layers, back to front:
   .backdrop  the sky, repeating sideways (its own layer, so a looping gameplay clip can replace it later)
   .downs     the downs without the stone, repeating sideways past the edges of the title picture
   h1 img     the downs with the stone, 2048 x 600, centred */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 600px;
}
.backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--sky-1) url("/img/sky.png") repeat-x;
  background-size: 1024px 660px;
  background-position: center bottom 96px;
  image-rendering: pixelated;
}
.backdrop video, .backdrop img { width: 100%; height: 100%; object-fit: cover; }
.downs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 600px;
  z-index: -1;
  background: url("/img/downs.png") repeat-x center bottom / 2048px 600px;
  image-rendering: pixelated;
}
.hero h1 {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2048px;
  margin: 0 0 0 -1024px;
}
.hero h1 img { width: 2048px; height: 600px; max-width: none; }

/* ---- content on the land at dusk */
main {
  flex: 1 0 auto;
  background: var(--turf-dark);
  padding: 0 1rem 3rem;
}
.inner { max-width: 46rem; margin: 0 auto; }
.pitch {
  margin: 0;
  padding: 1.5rem 0 2rem;
  text-align: center;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  font-style: italic;
  color: var(--peach);
}
.shot {
  margin: 0 0 2.25rem;
  padding: 4px;
  background: var(--copper-lite);
  border: 4px solid var(--copper-dark);
  box-shadow: 6px 6px 0 rgba(28, 17, 9, 0.6);
}
.shot img { width: 100%; aspect-ratio: 16 / 9; }
.shot figcaption {
  padding: 0.35rem 0.5rem 0.15rem;
  background: var(--copper-dark);
  color: var(--chalk-dim);
  font-size: 0.85rem;
  text-align: right;
}
.about p { margin: 0 0 1.1rem; }
.status {
  margin: 2.25rem 0 0;
  padding: 1rem 1.25rem;
  border: 2px solid var(--verdigris);
  background: rgba(28, 67, 56, 0.55);
  text-align: center;
}
.status strong {
  display: block;
  color: var(--glow);
  font-weight: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.status p { margin: 0.35rem 0 0; color: var(--chalk-dim); font-size: 1rem; }

footer {
  background: var(--copper-dark);
  color: var(--chalk-dim);
  text-align: center;
  font-size: 0.9rem;
  padding: 1.25rem 1rem;
}
footer p { margin: 0; }

/* ---- 404 */
.lost main { text-align: center; }
.lost main h2 { margin: 0; padding-top: 1.5rem; font-weight: normal; font-style: italic; color: var(--peach); font-size: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  .backdrop video { display: none; }
}