:root {
  --bg: #FAF6F0;
  --ink: #1C1917;
  --muted: #87807A;
  --faint: #D9D2CA;
  --correct: #2D6A4F;
  --incorrect: #9B2226;
  --coinflip: #8B7335;
  --serif: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
  /* Reading measure: the single knob for the game content column width. Tune
     live in devtools. em-based so it tracks the prose size. */
  --measure: 32em;
}

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

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

body {
  font-family: var(--serif);
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.5rem;
}


/* ---- Layout ---- */

.site-header,
.site-footer {
  width: 100%;
  max-width: 36rem;
}

/* The game content column. --measure controls the whole column in one place, so
   the passage, candidate options, reveal, share area, and ESCAPE's node text,
   door choices, death text and findings all share these exact left/right edges.
   Centred; on viewports narrower than the measure it simply fills the available
   width (minus the body's horizontal padding) with no scroll or clipping. */
main {
  width: 100%;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}


/* ---- Header ---- */

.site-header {
  text-align: center;
  padding: 3.5rem 0 2.5rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

/* On a content page the wordmark is a home link, not the page's h1 (that h1
   belongs to the query). Renders identically to the game pages' wordmark: this
   rule only strips the anchor's default colour and underline. Lives here rather
   than with the content-page block because the header sits outside <main>. */
.wordmark-link {
  color: inherit;
  text-decoration: none;
}

.wordmark-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.tagline {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-style: italic;
}


/* ---- Game sections ---- */

.game-section {
  padding: 2.5rem 0;
}

.game-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

/* Quiet contextual subtitle under a game title — always visible, per-game text.
   Shared pattern: each game supplies its own copy (Doors' framing will differ). */
.game-subtitle {
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  /* Match the body passage's column width so the line fits on one row at
     laptop/desktop widths; on narrow viewports it wraps naturally (100% cap). */
  max-width: 36rem;
  margin: 0 auto 1.75rem;
}

.game-mount {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-placeholder {
  font-style: italic;
  color: var(--muted);
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 28rem;
}

.game-ready {
  font-style: italic;
  color: var(--muted);
  text-align: center;
  font-size: 1rem;
}

/* Graceful no-puzzle state — missing or malformed file (see shell.showNoPuzzle). */
.game-empty {
  font-style: italic;
  color: var(--muted);
  text-align: center;
  font-size: 1rem;
}

.game-meta {
  text-align: center;
  margin-top: 1.25rem;
  min-height: 1.4rem;
}

.streak-display {
  font-size: 0.84rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}


/* ---- Divider ---- */

.divider {
  border: none;
  border-top: 1px solid var(--faint);
  width: 3.5rem;
  margin: 0 auto;
}


/* ---- Footer ---- */

.site-footer {
  margin-top: auto;
  padding: 2.5rem 0 3rem;
  text-align: center;
}

.footer-credit {
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* Quiet doorway from the game pages into the content cluster: sits inside
   .site-footer directly above the credit, at the credit's own scale so the two
   read as one small block. The <a> inside wears the existing .footer-link. */
.footer-more {
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.footer-link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.footer-link:hover {
  color: var(--ink);
}

.footer-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Sits inside the header, directly under the tagline. Styled to match the
   tagline (italic, same size/colour/tracking) so the two read as a close pair;
   the header's own bottom padding provides the breathing room below. */
.countdown {
  font-size: 0.84rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-style: italic;
  text-align: center;
  margin-top: 0.15rem;
}


/* ---- Forgery game ---- */

.forgery-game {
  width: 100%;
}

.passage {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.passage-gap {
  color: var(--muted);
  font-variant: small-caps;
  font-size: 0.82em;
  letter-spacing: 0.06em;
  background: rgba(28, 25, 23, 0.05); /* --ink at 5%: a warm, faint neutral tint */
  padding: 0.05em 0.45em;
  border-radius: 3px;
  white-space: nowrap;
}

/* Brackets in CSS so the label text stays clean small-caps; nbsp keeps a
   small, non-breaking gutter inside the brackets. */
.passage-gap::before { content: '[\00a0'; }
.passage-gap::after { content: '\00a0]'; }

.passage-answer {
  background: rgba(45, 106, 79, 0.08);
  padding: 0.05em 0.2em;
  border-radius: 2px;
}

.forgery-prompt {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.candidates {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.candidate {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid var(--faint);
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background-color 0.15s;
}

.candidate:hover:not(:disabled):not(.candidate-revealed) {
  border-color: var(--muted);
}

.candidate:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.candidate-selected {
  border-color: var(--ink);
  background: rgba(28, 25, 23, 0.03);
}

.candidate-eliminated {
  opacity: 0.3;
  cursor: default;
  text-decoration: line-through;
}

.candidate-label {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  padding-top: 0.1em;
  min-width: 1.1rem;
}

.candidate-text {
  flex: 1;
}

.candidate-body {
  flex: 1;
}

/* Reveal states */

.candidate-revealed {
  cursor: default;
}

.candidate-correct {
  border-color: var(--correct);
  background: rgba(45, 106, 79, 0.05);
}

.candidate-incorrect {
  border-color: var(--incorrect);
  background: rgba(155, 34, 38, 0.05);
}

.candidates-revealed .candidate-eliminated {
  text-decoration: none;
  opacity: 0.35;
}

.candidate-mark {
  display: block;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 0.3rem;
}

.candidate-correct .candidate-mark {
  color: var(--correct);
}

.candidate-incorrect .candidate-mark {
  color: var(--incorrect);
}

.forgery-verdict {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.verdict-correct {
  color: var(--correct);
}

.verdict-incorrect {
  color: var(--incorrect);
}

.verdict-coinflip {
  color: var(--coinflip);
}

.forgery-source {
  text-align: center;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--faint);
  margin-top: 1.5rem;
}

.source-author {
  font-weight: 500;
  margin-bottom: 0.15rem;
}

.source-work {
  color: var(--muted);
  font-size: 0.95rem;
}

.source-about {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 0.5rem;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

.forgery-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.submit-btn,
.lifeline-btn,
.share-btn,
.crosslink-btn {
  font-family: var(--serif);
  font-size: 0.9rem;
  padding: 0.55rem 1.5rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background-color 0.15s;
}

.submit-btn:hover:not(:disabled),
.share-btn:hover,
.crosslink-btn:hover {
  background: rgba(28, 25, 23, 0.04);
}

.submit-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.lifeline-btn {
  border-color: var(--muted);
  color: var(--muted);
}

.lifeline-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.lifeline-tier2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 1.25rem;
  border-style: dashed;
}

.lifeline-label {
  font-size: 0.9rem;
}

.lifeline-note {
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.7;
}

.submit-btn:focus-visible,
.lifeline-btn:focus-visible,
.share-btn:focus-visible,
.crosslink-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.forgery-share {
  text-align: center;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.share-confirm {
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
}


/* ---- ESCAPE (internally "doors") game ---- */
/* v2 story-maze. Class names stay on the internal `doors-` prefix; only display
   strings say ESCAPE. Ported from design/escape-v2-prototype*.html, with the
   prototype's own palette swapped for the site tokens (the prototypes imitated
   the live site, so the live values win). */

.doors-game {
  width: 100%;
}

.doors-maze-header {
  text-align: center;
  margin-bottom: 1rem;
}

.doors-maze-title {
  display: block;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--ink);
}

.doors-genre {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

.doors-status {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

/* The two transient one-line prompts on the room view. */
.doors-safeline {
  text-align: center;
  font-style: italic;
  color: var(--correct);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.doors-backline {
  text-align: center;
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.doors-roomintro {
  line-height: 1.75;
  margin-bottom: 1.4rem;
}

/* Doors ------------------------------------------------------------------- */

.doors-choices {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}

/* Full-width, left-aligned, thin border that darkens to ink on hover. */
.doors-door {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--faint);
  padding: 1rem 1.15rem;
  margin-bottom: 0.9rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.doors-door:hover {
  border-color: var(--ink);
}

.doors-door:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* A door already died behind: muted, leading skull, re-reads its death. */
.doors-door.is-dead {
  color: var(--muted);
  border-color: var(--faint);
}

.doors-skull {
  color: var(--incorrect);
  margin-right: 0.7rem;
}

/* Death ------------------------------------------------------------------- */

.doors-death-text {
  color: var(--incorrect);
  line-height: 1.75;
  margin-bottom: 1.1rem;
}

/* Closing bang on every death and every museum entry. */
.doors-dead-line {
  color: var(--incorrect);
  letter-spacing: 0.24em;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 1.6rem;
}

.doors-actions {
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Thin-bordered uppercase primary button (prototype .btn), fills on hover. */
.doors-btn {
  display: inline-block;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 0.65rem 1.5rem;
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.doors-btn:hover {
  background: var(--ink);
  color: var(--bg);
}

.doors-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Out --------------------------------------------------------------------- */

.doors-exittext {
  line-height: 1.75;
  margin-bottom: 1rem;
}

.doors-verdict {
  text-align: center;
  color: var(--correct);
  letter-spacing: 0.26em;
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 1.6rem 0 1.2rem;
}

.doors-stats {
  text-align: center;
  margin-bottom: 1rem;
}

.doors-stat {
  margin-bottom: 0.4rem;
}

.doors-stat-label {
  color: var(--ink);
}

.doors-stat-value {
  font-weight: 600;
}

.doors-stat-note {
  color: var(--muted);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.doors-reveal {
  font-style: italic;
  color: var(--muted);
  text-align: center;
  max-width: 29em;
  margin: 1.6rem auto;
  line-height: 1.7;
}

/* Share ------------------------------------------------------------------- */

.doors-share {
  text-align: center;
  margin: 1.8rem 0 0.6rem;
}

.doors-copied {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.6rem;
  min-height: 1.2em;
}

.doors-fallback {
  display: none;
  width: 100%;
  font-family: var(--serif);
  font-size: 0.85rem;
  margin-top: 0.8rem;
  border: 1px solid var(--faint);
  background: transparent;
  color: var(--ink);
  padding: 0.6rem;
}

.doors-replay-wrap {
  text-align: center;
  margin-top: 0.4rem;
}

/* Quiet italic-underline text link (prototype .linky). */
.doors-replay {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.doors-replay:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Museum (collected deaths) ---------------------------------------------- */

.doors-findings {
  margin-top: 2.2rem;
}

.doors-findings > summary {
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
}

.doors-findings > summary::-webkit-details-marker {
  display: none;
}

.doors-findings > summary::before {
  content: '\203A\00a0';
}

.doors-findings[open] > summary::before {
  content: '\2039\00a0';
}

.doors-museum-entry {
  border-left: 2px solid var(--faint);
  padding-left: 1rem;
  margin: 1.2rem 0;
}

.doors-museum-entry .doors-death-text {
  margin-bottom: 0.4rem;
}

.doors-museum-entry .doors-dead-line {
  margin: 0;
  font-size: 0.8rem;
}


/* ---- ESCAPE how-to (always-visible instruction, /escape page) ---- */
/* Deliberately UPRIGHT (non-italic). The maze prose, subtitles and countdown are
   all italic "atmosphere"; setting the how-to upright is what tells a first-time
   player this block is instruction, not part of the story. Legible at a glance,
   centred to sit as a page header above the maze, closed with a faint rule so it
   reads as separate from the room text that follows. */
.escape-intro {
  text-align: center;
  border-bottom: 1px solid var(--faint);
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
}

.escape-intro-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

/* The one-line premise — full ink, upright: a plain statement of the stakes. */
.escape-intro-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* Where to find the rule — muted, upright, the quieter how-to line. Never names
   today's rule; states only that one exists and where it is readable. */
.escape-intro-rule {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}


/* ---- Cross-link between games ---- */
/* Subordinated by POSITION and SIZE (below the game, after a hairline, small) —
   NOT by looking uninteractive. The label is a real button in the site's single
   interactive language (it shares the .submit-btn/.share-btn rule verbatim). The
   letterspaced serif-caps heading treatment is deliberately gone: on this site
   that treatment means "game section", so the crosslink must never wear it. */
.game-crosslink {
  text-align: center;
  border-top: 1px solid var(--faint);
  padding: 2rem 0 0.5rem;
  margin-top: 1.5rem;
}

/* Context, read BEFORE the click, so it sits ABOVE the button. Small and muted to
   stay subordinate to Forgery, but UPRIGHT — not the italic .game-subtitle — so it
   cannot be mistaken for a section subtitle. */
.crosslink-context {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 26rem;
  margin: 0 auto 1rem;
}

/* Anchor-as-button: border, padding and type come verbatim from the shared button
   rule above; these two lines are only what an <a> needs that a <button> doesn't. */
.crosslink-btn {
  display: inline-block;
  text-decoration: none;
}


/* ---- Content pages (the SEO cluster: roundups and articles) ---- */
/* The cluster pages under public/ (games-like-wordle.html and its eight spokes)
   link this same stylesheet and reuse .site-header, .game-section, .game-title,
   .game-subtitle, .divider and the footer verbatim. The rules below cover only
   what article content needs and the game pages never did: no new colours, no
   new widths, every size off the existing scale. Content pages load no JS.

   ⚠ Only the anchor rule is scoped under .content-page. The rest are bare class
   selectors, safe today because none of these names appears in index.html or
   escape.html (verified). That is the whole guarantee, so keep it true: put
   .entry or .prose on a game page and the game UI moves with it. */

/* Page title on a content page: the same voice and scale as the ESCAPE page
   header (.escape-intro-title), kept as its own class so the two can drift. */
.content-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.content-subtitle {
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
  margin-bottom: 2rem;
}

/* Running prose (intros and closing notes). The universal reset zeroes every
   margin, so paragraph rhythm has to be restated here. Type matches .passage. */
.prose p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* In-content links: ink text under a faint underline that darkens on hover, the
   quiet cousin of .footer-link. Scoped, so game UI anchors are untouched. */
.content-page a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}

.content-page a:hover {
  text-decoration-color: var(--ink);
}

.content-page a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* One game in a roundup: linked name, a sentence or three of description, and a
   muted meta line carrying cadence and cost. */
.entry {
  margin-bottom: 1.6rem;
}

.entry:last-child {
  margin-bottom: 0;
}

.entry-name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.entry-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.2rem;
}

.entry-meta {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.02em;
}


/* ---- Responsive ---- */

@media (max-width: 480px) {
  html {
    font-size: 17px;
  }

  .site-header {
    padding: 2.5rem 0 1.75rem;
  }

  .wordmark {
    font-size: 2rem;
    letter-spacing: 0.2em;
  }

  .game-section {
    padding: 2rem 0;
  }
}