/* Sereniton site. Design rules, in order of importance:
   1. It should feel like the game: the game's own dusk palette, its own
      Nunito face, its own artwork. Nothing borrowed from trend kits.
   2. Calm means static. No hover tricks, no parallax, no orbs, no
      animated anything. The only motion on this site is scrolling.
   3. Honest means real. Real screenshots, real terms, real policy,
      no testimonials of any kind, no invented numbers.
   Palette is lifted from the game: dusk #2c365e -> #546286, warm gold
   #ffd97a, paper #faf7f1, ink #383e4c. */

@font-face {
  font-family: "Nunito";
  src: url("assets/Nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --dusk: #2c365e;
  --dusk-deep: #232b4c;
  --dusk-soft: #546286;
  --gold: #ffd97a;
  --gold-ink: #8a6b25;
  --paper: #faf7f1;
  --ink: #383e4c;
  --ink-soft: #6a7080;
  --line: rgba(44, 54, 94, 0.16);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.06rem;
}

/* ---------------- hero ---------------- */

.hero {
  background: linear-gradient(180deg, var(--dusk-deep) 0%, var(--dusk) 46%, var(--dusk-soft) 100%);
  color: #f2f0ea;
  text-align: center;
  padding: 4.5rem 1.5rem 5rem;
}

.hero img.mark {
  width: 88px;
  height: 88px;
  border-radius: 22px;
}

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-top: 1.4rem;
  text-indent: 0.22em; /* balances the letter-spacing */
}

.hero p.tagline {
  font-size: 1.25rem;
  color: rgba(242, 240, 234, 0.85);
  margin-top: 0.6rem;
}

.hero p.status {
  display: inline-block;
  margin-top: 2.2rem;
  padding: 0.55rem 1.5rem;
  border: 1px solid rgba(255, 217, 122, 0.45);
  border-radius: 999px;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---------------- shared ---------------- */

main { max-width: 66rem; margin: 0 auto; padding: 0 1.5rem; }

section { padding: 3.6rem 0 1rem; }

h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--dusk);
  margin-bottom: 1rem;
}

.prose { max-width: 42rem; }
.prose p + p { margin-top: 1rem; }

a { color: var(--dusk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--dusk-soft); }

/* ---------------- screenshots ---------------- */

.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
  margin-top: 2rem;
}

.shots figure { width: min(250px, 44vw); }

.shots img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.shots figcaption {
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 0.55rem;
}

/* ---------------- quiet fact rows ---------------- */

.facts { max-width: 42rem; }
.facts li {
  list-style: none;
  margin-top: 1.5rem;
}
.facts li strong { color: var(--dusk); font-weight: 800; }

/* ---------------- price ---------------- */

.price {
  max-width: 42rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem 1.8rem;
  margin-top: 1.4rem;
  background: #fff;
}
.price p + p { margin-top: 0.8rem; }

/* ---------------- footer ---------------- */

footer {
  margin-top: 4.5rem;
  border-top: 1px solid var(--line);
  padding: 2.2rem 1.5rem 3rem;
  text-align: center;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
footer p + p { margin-top: 0.5rem; }
footer nav a { margin: 0 0.8rem; }

/* ---------------- legal pages ---------------- */

.legal { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem; }
.legal h1 { font-size: 2rem; font-weight: 900; color: var(--dusk); margin-bottom: 0.4rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.legal p, .legal li { margin-top: 0.8rem; }
.legal ul { padding-left: 1.4rem; }
.legal .updated { color: var(--ink-soft); font-size: 0.95rem; }
.legal .fillme {
  background: #fdf1cf;
  border: 1px dashed var(--gold-ink);
  border-radius: 6px;
  padding: 0 0.35rem;
  font-weight: 700;
}
.backlink { display: inline-block; margin-bottom: 2rem; }