/* The apps pages: /apps and everything under it. Served by HAProxy from
   files on disk, not by the game, so they carry their own stylesheet and
   nothing of the game's. No scripts, no fonts, nothing from anywhere else. */

:root {
  color-scheme: dark;
  --page: #171a21;
  --card: #20242d;
  --line: #2f3542;
  --ink: #fff4dc;
  --ink-soft: #c9cfda;
  --ink-faint: #8b93a1;
  --gold: #f2c33c;
  --accent: #e0483c;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-soft);
  font: 17px/1.6 var(--font);
}

/* No line ends with one word left alone on it (owner, 4 November 2026:
   "never leave one word dangling"): headings, titles and the words on
   buttons are balanced, and running text is set "pretty", which keeps a
   paragraph's last line from being a single word. */
h1, h2, h3, h4, button, label, figcaption, .dialog-title, .agreement-title { text-wrap: balance; }
p, li, dd, td, blockquote { text-wrap: pretty; }

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 40px 20px 72px;
}

a { color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 { color: var(--ink); line-height: 1.25; }
h1 { font-size: 32px; letter-spacing: -0.015em; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 34px 0 10px; }
h3 { font-size: 17px; margin: 22px 0 6px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 1.3em; }
li { margin-bottom: 7px; }
strong { color: var(--ink); font-weight: 650; }

.crumbs { font-size: 15px; margin: 0 0 28px; color: var(--ink-faint); }
.lead { font-size: 19px; color: var(--ink); }
.date { color: var(--ink-faint); font-size: 14px; margin: 0 0 26px; }

.brand { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.brand img { width: 64px; height: 64px; border-radius: 15px; }
.brand h1 { margin: 0; }
.brand p { margin: 2px 0 0; color: var(--ink-faint); }

/* One card per version of the game. */
.apps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.apps li { margin: 0; }
.app {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
}
a.app:hover { border-color: var(--gold); }
.app h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; font-size: 19px; }
.app h2 .badge { margin-left: 0; }
.app p { margin: 0; }
.app .go { display: inline-block; margin-top: 10px; color: var(--gold); font-weight: 600; }
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 500;
  vertical-align: 2px;
}

.cta {
  display: inline-block;
  margin: 6px 12px 6px 0;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
}
.cta.quiet { background: transparent; border: 1px solid var(--line); color: var(--ink); }

.links { margin-top: 40px; font-size: 15px; color: var(--ink-faint); }

/* The page in the site's other languages, under the footer's links (the apps pages and the articles). */
.langs { margin: 8px 0 0; }
.langs [aria-current] { color: var(--ink); }

/* The privacy policy's history: the list of versions, and the note at the
   top of an earlier one. */
.history { list-style: none; padding: 0; margin: 26px 0 0; }
.history li { border-top: 1px solid var(--line); padding: 4px 0 6px; margin: 0; }
.history h2 { font-size: 18px; margin: 14px 0 4px; }
.notice {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--ink);
}

@media (max-width: 600px) {
  main { padding: 26px 18px 56px; font-size: 16px; }
  h1 { font-size: 26px; }
}