/* The hull, flattened into a document. The game is a fullscreen canvas that
   can't hold a page of prose, so the static pages get their own sheet — same
   palette, same bitmap face, no build step. */

:root {
  --abyss: #03080f;
  --deep: #0c1a2b;
  --hairline: #1f3b5c;
  --foam: #e6f0fa;
  --drift: #7590b4;
  --beacon: #3fd8f0;
  --coral: #ff5277;
}

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

body {
  min-height: 100%;
  background:
    radial-gradient(120% 80% at 50% -30%, #14304e 0%, #0b1d33 34%, #050d19 62%, #03080f 100%)
    no-repeat fixed;
  color: var(--foam);
  font-family: "VT323", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: none;
  padding: 0 20px calc(56px + env(safe-area-inset-bottom));
}

/* the CRT glass, kept faint — this is a page you have to actually read */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity: .45;
}

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

.mast {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--hairline);
}

.mast a.wordmark {
  font-size: 30px;
  letter-spacing: 0.06em;
  color: var(--foam);
  text-decoration: none;
  text-shadow: -2px 2px var(--coral), 2px -2px rgba(63, 216, 240, .85);
}

.mast .crumb { font-size: 19px; letter-spacing: 0.2em; color: var(--drift); }

h1 {
  margin: 34px 0 6px;
  font-size: 44px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--beacon);
  text-shadow: 0 0 18px rgba(63, 216, 240, .35);
}

.stamp { color: var(--drift); font-size: 18px; letter-spacing: 0.16em; }

h2 {
  margin: 30px 0 8px;
  font-size: 27px;
  font-weight: normal;
  letter-spacing: 0.08em;
  color: var(--foam);
}

p, li { color: #c3d4e8; }
p { margin: 12px 0; }
ul { margin: 12px 0 12px 22px; }
li { margin: 5px 0; }

code {
  font-family: inherit;
  color: var(--beacon);
  background: rgba(31, 59, 92, .3);
  padding: 0 4px;
}

a { color: var(--beacon); text-underline-offset: 3px; }
a:hover { color: var(--coral); }

strong { color: var(--foam); font-weight: normal; text-shadow: 0 0 10px rgba(230, 240, 250, .25); }

.panel {
  margin: 20px 0;
  padding: 16px 18px;
  background: rgba(12, 26, 43, .72);
  box-shadow: 0 0 0 2px var(--abyss), 0 0 0 4px var(--hairline);
}

footer {
  max-width: 46rem;
  margin: 48px auto 0;
  padding-top: 16px;
  border-top: 2px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 18px;
  letter-spacing: 0.14em;
  color: var(--drift);
}

footer a { text-decoration: none; }

@media (max-width: 640px) {
  body { font-size: 20px; }
  h1 { font-size: 36px; }
  main { padding-top: 28px; }
}

/* ── added for the content pages ─────────────────────────────────────────
   The site grew a real set of documents (how to play, scoring, strategy,
   FAQ) on top of the four legal-ish ones, so the sheet grew a nav, a table
   and a Q&A block. Same palette, still no build step. */

nav.site {
  max-width: 46rem;
  margin: 14px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 17px;
  letter-spacing: 0.14em;
  color: var(--drift);
}

nav.site a { text-decoration: none; }
nav.site a[aria-current="page"] { color: var(--foam); }

/* the one-paragraph answer to the page's title, for readers and for the
   snippet — kept first so it is the first thing a crawler chunks */
.lede { font-size: 23px; color: var(--foam); }

h3 {
  margin: 22px 0 4px;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: var(--beacon);
}

/* wide on desktop, scrollable rather than squeezed on a phone */
.scroller { overflow-x: auto; margin: 20px 0; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 19px;
}

caption {
  caption-side: bottom;
  padding-top: 10px;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--drift);
  text-align: left;
}

th, td {
  padding: 7px 12px 5px;
  text-align: left;
  border-bottom: 2px solid rgba(31, 59, 92, .55);
}

thead th {
  font-weight: normal;
  letter-spacing: 0.14em;
  font-size: 17px;
  color: var(--drift);
  text-transform: uppercase;
}

td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody th { font-weight: normal; color: var(--foam); }

/* each question is self-contained, so it survives being chunked out of the
   page by a model that is quoting one answer */
.qa { margin: 26px 0; }
.qa h2 { margin-bottom: 6px; font-size: 24px; color: var(--beacon); }

.next {
  margin: 34px 0 0;
  padding: 16px 18px;
  background: rgba(12, 26, 43, .72);
  box-shadow: 0 0 0 2px var(--abyss), 0 0 0 4px var(--hairline);
}

.next h2 { margin-top: 0; font-size: 22px; }
.next ul { margin-bottom: 0; }

.cta {
  display: inline-block;
  margin: 6px 0 2px;
  padding: 9px 22px 7px;
  color: var(--abyss);
  background: var(--beacon);
  text-decoration: none;
  letter-spacing: 0.14em;
  box-shadow: 0 0 0 2px var(--abyss), 0 0 0 4px var(--beacon);
}

.cta:hover { color: var(--abyss); background: var(--foam); box-shadow: 0 0 0 2px var(--abyss), 0 0 0 4px var(--foam); }

/* ── reachable by keyboard, hittable by thumb ────────────────────────────
   The pages are read on phones as often as the game is played on one, and
   a 17px link with no padding is a 17px-tall thing to hit. */

a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--beacon);
  outline-offset: 3px;
}

nav.site a,
footer a {
  /* the target is set by min-height rather than padding: the type is 17px, and
     a 17px-tall thing is not something a thumb can hit */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* the masthead is a wordmark beside a label; on a narrow screen the label
   drops under it rather than pushing the wordmark off the edge */
.mast { flex-wrap: wrap; }

/* long words in a bitmap face at 21px overflow a 320px screen before they
   wrap — URLs and long answer names especially */
p, li, td, th, h1, h2, h3 { overflow-wrap: break-word; }

@media (max-width: 640px) {
  nav.site { gap: 2px 12px; font-size: 16px; letter-spacing: 0.1em; }
  .lede { font-size: 21px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  table { font-size: 18px; }
  /* the caption explains a table the reader may have to scroll sideways to
     finish, so it must not be the smallest thing on the page */
  caption { font-size: 16px; }
}

/* a very small phone, where the wordmark is the first thing to give */
@media (max-width: 380px) {
  body { font-size: 19px; padding-left: 16px; padding-right: 16px; }
  .mast a.wordmark { font-size: 26px; }
  .mast .crumb { font-size: 17px; }
  h1 { font-size: 32px; }
}

/* ── figures ─────────────────────────────────────────────────────────────
   Flat SVG, a couple of KB each, sharp at any size. The game pages carried
   their own copy of these rules inline; the document pages share them. */

figure { margin: 22px 0; }

figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--abyss);
}

figcaption {
  padding-top: 10px;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--drift);
}