/* ============================================================
   STATIC-PAGE.CSS — The One Look Of The Plain Pages
   ============================================================
   The pages that are NOT the game: the privacy policy, the account deletion page
   and the how-to-play page. Each is a plain document with no JavaScript, readable
   by a store reviewer, a search engine or somebody on a phone who has never opened
   the game. They used to carry a copy of this stylesheet each, written out inline,
   and the two copies had already drifted apart (one knew about tables and a
   stepped list, the other did not). One file, linked by every plain page, so the
   look is defined once.

   It deliberately does NOT load the game's stylesheet or fonts: a reader of the
   privacy policy has not asked for two megabytes of artwork and brand fonts, and a
   store's reviewer fetches the page from a server that may not even have them.
   ============================================================ */

/* ---- THE COLOURS, IN BOTH THEMES ---- */
:root {
  color-scheme: light dark;
  --ink: #1b1a17;
  --paper: #f6f3ec;
  --muted: #5c574d;
  --rule: #d9d2c4;
  --accent: #7a5c2e;
  --panel: #efeade;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece7dc;
    --paper: #17161a;
    --muted: #a49d90;
    --rule: #35322c;
    --accent: #d4b071;
    --panel: #201e23;
  }
}

* { box-sizing: border-box; }

/* ---- THE PAGE ---- */
body {
  margin: 0;
  padding: 48px 20px 96px;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

main { max-width: 680px; margin: 0 auto; }

/* ---- HEADINGS ---- */
h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 6px;
  text-wrap: balance;
}

.updated { color: var(--muted); font-size: 15px; margin: 0 0 32px; }

h2 {
  font-size: 20px;
  margin: 40px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  text-wrap: balance;
}

/* The first heading under the title needs no rule above it: the title is the rule. */
h2.first { border-top: 0; padding-top: 0; margin-top: 0; }

h3 { font-size: 17px; margin: 22px 0 6px; }

/* ---- TEXT ---- */
p, li { margin: 0 0 12px; }
ul, ol { padding-left: 22px; }
strong { font-weight: 650; }
a { color: var(--accent); }

.lead {
  font-size: 18px;
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin-bottom: 28px;
}

/* A numbered list of things to do, set apart on a panel. */
.steps {
  background: var(--panel);
  border-left: 3px solid var(--accent);
  padding: 20px 20px 12px 42px;
  margin: 0 0 28px;
}

.steps li { margin-bottom: 10px; }

/* ---- TABLES ---- */
table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 16px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 650; }

/* A wide table on a narrow phone scrolls inside its own box rather than pushing
   the whole page sideways. */
.table-scroll { overflow-x: auto; margin: 0 0 20px; }
.table-scroll table { margin: 0; min-width: 520px; }

/* ---- THE WAY INTO THE GAME ---- */
.play-button {
  display: inline-block;
  padding: 12px 22px;
  margin: 6px 0 20px;
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  font-weight: 650;
  border-radius: 8px;
}

.play-button:hover, .play-button:focus-visible { filter: brightness(1.08); }

/* ---- THE FOOT OF THE PAGE ---- */
footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 15px;
}