/* WAVEFALL's own styling. Deliberately NOT ../style.css: a player arriving from
   the store listing should land on something that looks like the game they
   just tapped.

   The palette is lifted from the game's own icon art (Game Wave
   tool/make_icons.mjs), not approximated:
     void    #15122a   undecided ground, the page
     dot     #26213f   the faint wave of maybes
     road    #c2ab80   roads and brass: headings
     stone   #9ea3b5   the keep: rules and quiet text
     blueHi  #a9ccff   your banner: links
   Dark only, on purpose: the game's first screen is the void. Every colour is
   set explicitly so a light-mode browser still gets the night.

   No web fonts, no build step, no external requests. These pages have to keep
   loading for an App Store reviewer years from now. */

:root {
  --void:   #15122a;
  --dot:    #26213f;
  --ghost:  #1d2a4e;
  --ink:    #e6e1d3;
  --dim:    #a7a3b8;
  --road:   #c2ab80;
  --edge:   #8f7b57;
  --stone:  #9ea3b5;
  --link:   #a9ccff;
  --grass:  #6cb863;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--void); }

body {
  margin: 0;
  padding: 2.5rem 1rem 4rem;
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* the undecided wave: a sparse pixel grid of maybes behind everything */
  background:
    radial-gradient(var(--dot) 1.5px, transparent 1.6px) 0 0 / 28px 28px,
    var(--void);
}

main { max-width: 38rem; margin: 0 auto; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: #fff; }

.back {
  display: inline-block;
  margin-bottom: 2rem;
  font: 600 0.8rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone);
}

.keep {
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  margin: 0 0 1.25rem;
  border: 3px solid var(--edge);
}

h1 {
  margin: 0;
  font: 800 2.4rem/1.1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--road);
}

.sub {
  margin: 0.5rem 0 2rem;
  font: 1.1rem/1.4 var(--mono);
  color: var(--link);
}

h2 {
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 3px solid var(--dot);
  font: 700 0.95rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--road);
}

ul { padding-left: 1.2rem; }
li { margin: 0.3rem 0; }
li::marker { color: var(--edge); }

strong { color: #fff; }

.facts {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  background: rgba(29, 42, 78, 0.55);
  border-left: 4px solid var(--grass);
}
.facts p { margin: 0.2rem 0; }

.q { margin: 1.4rem 0 0.2rem; font-weight: 700; color: #fff; }
.q + p { margin-top: 0.2rem; }

h3 {
  margin: 1.6rem 0 0.5rem;
  font: 700 0.85rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

code { font: 0.9em var(--mono); color: var(--road); }

/* the privacy "at a glance" table: scrolls sideways on its own, never the page */
.scroll { overflow-x: auto; margin: 1rem 0; border: 2px solid var(--dot); }
table { border-collapse: collapse; min-width: 34rem; font-size: 0.92rem; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--dot); }
th { font: 700 0.75rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--road); background: rgba(29, 42, 78, 0.55); }

.updated {
  margin-top: 3rem;
  font: 0.8rem/1.4 var(--mono);
  color: var(--dim);
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.9rem; }
}