/* Mingli Books — the shell every book is read in.
 *
 * Design target: a twelve-year-old on a phone. That is a different person
 * from the five-year-old the games are built for, and almost every rule
 * inverts. Reading is the point, not the obstacle. Text is the subject. The
 * palette is a printed book's, not a toy's.
 *
 * What carries over from the games is the discipline: no build step, no font
 * files, no image files, no emoji, no accounts, no analytics. Everything on
 * screen is either type or a drawing the browser made from a seed.
 */

:root {
  /* Ink and paper. Every book overrides --ink and --accent; the paper stays
   * the same across the shelf so the collection reads as one press. */
  --paper: #efe6d4;
  --paper-deep: #e5dac4;
  --ink: #1c1712;
  --ink-soft: #5d5346;
  --accent: #a8482a;
  --rule: rgba(28, 23, 18, 0.16);

  /* A serif, because this is a book. There is no font file on this site and
   * there never will be — the same rule the games keep. `ui-serif` is New
   * York on Apple platforms and is genuinely good; the rest of the stack is
   * what each platform actually ships. Charter and Iowan Old Style are on
   * every Mac and iPhone; Palatino covers Windows; Noto Serif covers Android. */
  --serif: ui-serif, "Iowan Old Style", "Charter", "Palatino Linotype",
    Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
  /* Everything that is not the story: the shelf, the buttons, the afterword
   * headings. A humanist sans keeps the chrome from competing with the type. */
  --sans: ui-sans-serif, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue",
    system-ui, sans-serif;

  --measure: 34rem;
  --page-pad: clamp(20px, 5vw, 56px);

  /* The plate's own palette. Kept separate from the page's because a drawing
   * and a paragraph want different things from the same theme — and because
   * a plate is inline SVG, which can read these, where an <img> could not.
   * Each book overrides --p-accent and nothing else. */
  --p-paper: #efe6d4;
  --p-ink: #1c1712;
  --p-accent: #a8482a;
  --p-blend: multiply;
  --p-grain-a: 0.5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-paper: #14110d;
    --p-ink: #e2d6bf;
    --p-blend: screen;
    /* A dark ground shows noise far more readily than a light one, so the
     * same grain that reads as paper on cream reads as television static on
     * near-black. It comes down, it does not come off. */
    --p-grain-a: 0.22;
  }
}
:root[data-theme="dark"] {
  --p-paper: #14110d;
  --p-ink: #e2d6bf;
  --p-blend: screen;
  --p-grain-a: 0.22;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16130f;
    --paper-deep: #100e0b;
    --ink: #e8ddc8;
    --ink-soft: #a2957f;
    --rule: rgba(232, 221, 200, 0.18);
  }
}
:root[data-theme="dark"] {
  --paper: #16130f;
  --paper-deep: #100e0b;
  --ink: #e8ddc8;
  --ink-soft: #a2957f;
  --rule: rgba(232, 221, 200, 0.18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  /* 19px on a phone is the smallest that a twelve-year-old reads comfortably
   * for more than a minute, and it grows with the viewport rather than
   * jumping at a breakpoint. */
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { text-wrap: pretty; hyphens: none; }

/* Easier reading — a real setting, not a gesture.
 *
 * The obvious thing to offer is a "dyslexia font", and it does not work:
 * Wery & Diliberto (2016) found OpenDyslexic no better than Arial or Times
 * for reading rate or accuracy, and the 2026 meta-analysis over 15 studies
 * and 688 readers put dyslexia-friendly fonts at g = −0.04 against ordinary
 * ones. What *does* have an effect, immediately and without training, is
 * SPACING: Zorzi et al. (PNAS 2012) widened letter spacing for 94 dyslexic
 * children and reading improved on the spot. So this setting spaces the text
 * out and leaves the letterforms alone.
 *
 * It also switches the story to the sans stack, which the British Dyslexia
 * Association asks for, and drops the measure so no line runs long. */
:root[data-ease="on"] {
  --measure: 27rem;
}
:root[data-ease="on"] body,
:root[data-ease="on"] .words {
  font-family: var(--sans);
  letter-spacing: 0.055em;
  word-spacing: 0.19em;
  line-height: 1.95;
}
:root[data-ease="on"] .words p { margin-bottom: 1.15em; }

a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ chrome */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: linear-gradient(var(--paper) 62%, transparent);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* The chrome gets out of the way while the reader is reading, and comes back
 * the moment they move. A control that is always visible over a picture is a
 * control that is always in the picture. */
body.reading .bar { opacity: 0; transform: translateY(-8px); pointer-events: none; }

.bar .spacer { flex: 1; }

.btn {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.82rem;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.on { color: var(--accent); border-color: var(--accent); }
.btn svg { flex: none; }

/* Where the reader is in the book. A hairline, not a percentage — a number
 * that climbs turns reading into a task with a score. */
.progress {
  position: fixed;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--rule);
  z-index: 40;
}
.progress i {
  display: block; height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}