/* The Terms, Privacy and Updates pages (terms.html, privacy.html, and updates.html, which the build writes from the
   release notes: src/updates-html.ts): paper on black, as
   in the ESC menu, in the game's own fonts (public/fonts/README.txt). One file
   for both, since the site's CSP allows no inline styles. Greys are paper at
   an opacity. Section numbers come from a CSS counter, so they aren't text. */

@font-face {
  font-family: 'Sedgwick Ave Display';
  src: url('/fonts/sedgwick-ave-display.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --paper: #ebe5d6;
  --ink: #111;
  --body: rgba(235, 229, 214, 0.72);
  --intro: rgba(235, 229, 214, 0.85);
  --link-rule: rgba(235, 229, 214, 0.35);
  --faint: rgba(235, 229, 214, 0.35);
  --meta: rgba(235, 229, 214, 0.45);
  --muted: rgba(235, 229, 214, 0.55);
  --soft: rgba(235, 229, 214, 0.65);
  --rule: rgba(235, 229, 214, 0.12);
  --header-rule: rgba(235, 229, 214, 0.1);
  --code-bg: rgba(235, 229, 214, 0.08);
  --display: 'Sedgwick Ave Display', cursive;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: #000;
  color: var(--paper);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(235, 229, 214, 0.2) transparent;
}

body {
  margin: 0;
  background: #000;
}

a {
  color: var(--paper);
  text-decoration: none;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}

a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* Header: wordmark left, Terms / Privacy / Play right. */
.top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 40px;
  border-bottom: 1px solid var(--header-rule);
  background: #000;
}

.mark {
  font: 400 26px / 1 var(--display);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.top nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13px;
}

.top nav a {
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  color: var(--muted);
}

.top nav a:hover,
.top nav a[aria-current='page'] {
  color: var(--paper);
}

.top nav a[aria-current='page'] {
  border-bottom-color: var(--paper);
}

.top nav .play {
  padding: 7px 14px;
  border: 0;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
}

.top nav .play:hover {
  background: #fff;
  color: var(--ink);
}

/* The column. */
main {
  width: 600px;
  margin: 0 auto;
  padding: 72px 0 96px;
  counter-reset: section;
}

h1 {
  margin: 0;
  padding-bottom: 20px;
  font: 400 80px / 1 var(--display);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

p {
  margin: 0;
}

.updated {
  margin-top: 28px;
  font-size: 13px;
  color: var(--meta);
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0 36px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.6;
  color: var(--intro);
  text-wrap: pretty;
}

section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 36px;
  counter-increment: section;
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}

section::before {
  content: counter(section, decimal-leading-zero);
  position: absolute;
  top: 38px;
  left: -56px;
  width: 36px;
  text-align: right;
  font-size: 12px;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  color: var(--paper);
}

ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  padding-left: 20px;
}

li::before {
  content: '–';
  position: absolute;
  left: 0;
  width: 6px;
  color: var(--faint);
}

strong {
  font-weight: 600;
  color: var(--paper);
}

code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--code-bg);
  color: var(--paper);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

:is(p, li) a {
  border-bottom: 1px solid var(--link-rule);
}

:is(p, li) a:hover {
  color: #fff;
  border-bottom-color: var(--paper);
}

/* Updates: one article a release, newest first; its picture as wide as the column. */
.updates article {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 48px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}

.updates article h2 {
  font: 400 40px / 1 var(--display);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.updates article h2 a:hover {
  color: #fff;
}

.updates article + article {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}

.updates article .updated {
  margin-top: 0;
}

.updates .lead {
  font-size: 15px;
  color: var(--intro);
}

.updates article img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.updates h3 {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
}

/* Page footer: the other page, and back to the game. */
main > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
}

main > footer .other {
  color: var(--soft);
}

main > footer .other:hover {
  color: var(--paper);
}

main > footer a:not(.other):hover {
  color: #fff;
}

@media (max-width: 720px) {
  .top {
    padding: 18px 24px;
  }

  /* A phone's header holds the page it's on and Play; the other pages are in the footer. */
  .top nav a:not(.play, [aria-current='page']) {
    display: none;
  }

  main {
    width: auto;
    padding: 72px 24px 96px;
  }

  h1 {
    font-size: 56px;
  }

  section::before {
    position: static;
    width: auto;
    margin-bottom: -6px;
    text-align: left;
  }
}