PR #351 · The Illuminated Codex — a code-level reading

What this is, and why it exists

A ground-up rebuild of the game's presentation layer under one thesis: the UI is not a website about a magical manuscript — the UI is the manuscript, and the app is the desk it rests on. The prior contrast pass on this branch had made thirty-four individually-correct fixes and played worse; the diagnosis (committed as docs/design/illuminated-codex-problem-book.md) traced the failure to the design system itself — a hairlines-only "Spine Console" manifesto that outlawed the material tools the codex fiction needs.

The replacement language was designed before it was coded: full-fidelity HTML mockups (committed under docs/design/atelier/), two competing art directions blind-judged by four panels, a synthesis spec (docs/design/illuminated-codex-language.md), a twelve-surface rebuild, and a five-persona playtest round whose twenty-three adjudicated fixes are all in. No store, server, or mechanics code changed; every test-id and aria contract survived. lint 0 errors · vitest 1430/1430 · typecheck clean · e2e 38/38.

Materials and inks — the token system

main.css opens with the manifesto's replacement and the material system: paper (three tones + rules), ink (five voices: reading ink, quiet, faint, rubrication, ceremonial gold), wax, and the desk. Dark mode is a re-lighting — lamplit vellum, ember rubric, near-black desk — expressed entirely through the same tokens. Legacy --ew-* names alias onto the new materials so the legal/settings/steward surfaces keep working untouched.

Materials, inks, and the aliases; then the candlelit dark block.

assets/css/main.css · 968 lines

assets/css/main.css968 lines · CSS

⋯ 25 lines hidden (lines 1–25)1/**
* Main CSS — Everwhen · THE ILLUMINATED CODEX
*
* The UI is not a website about a magical manuscript. The UI IS the manuscript,
* and the app is the desk it rests on. Materials over chrome: paper has fiber,
* light exists, wax has relief. One accent — rubrication (red ink marks what
* matters; the wax seal is its material twin). Gold is ceremonial, at most once
* per screen, never interactive. Every glyph is drawn in the seal's hand
* (components/codex/marks/) — no OS emoji, no dingbat fonts.
*
* The material test for any effect: does it describe paper, ink, wax, or
* light? If not, it doesn't ship.
*
* Full language: docs/design/illuminated-codex-language.md (spec) and
* docs/design/illuminated-codex-problem-book.md (the diagnosis it answers).
*
* Two class families:
*   .cx-*  — the codex dialects (game surfaces).
*   .ew-*  — legacy helpers kept for legal/settings/steward surfaces; they now
*            resolve to codex materials via the alias tokens below.
*/
22 
23@import "tailwindcss";
24@import "@nuxt/ui";
25 
26/* ── Materials & inks ────────────────────────────────────────────────────── */
root {
/* paper */
--ew-paper-hi: #faf4e6;
--ew-paper: #f4ecd8;
--ew-paper-lo: #e8dcc0;
--ew-rule: #cbb894; /* drawn rules */
--ew-rule-feint: #ddd0b0; /* baseline feints, hairline folds */
34 
/* ink */
--ew-ink: #2a2118;
--ew-ink-quiet: #5f5240;
--ew-ink-faint: #857358;
--ew-rubric: #96291c; /* THE accent — rubrication */
--ew-gold: #a97e1c; /* ceremonial only */
--ew-ok: #43601f;
--ew-bad: #6d1a10;
43 
/* wax */
--ew-wax: #a84b28;
--ew-wax-hi: #c96f43;
--ew-wax-lo: #7c3116;
48 
/* the desk */
--ew-desk: #2e2013;
--ew-desk-hi: #4a3620;
--ew-desk-ink: #cdbb96; /* legible directly on the desk */
/* stacked page-edge inks (pre-resolved: color-mix inside box-shadow
   shorthands poisons chromium's rasterizer — resolve mixes here, in
   custom-property values, never inline in a shadow list) */
--ew-page-edge-1: var(--ew-paper-lo);
--ew-page-edge-2: color-mix(in srgb, var(--ew-paper-lo) 78%, black);
--ew-page-edge-3: color-mix(in srgb, var(--ew-paper-lo) 58%, black);
--ew-rubric-halo: color-mix(in srgb, var(--ew-rubric) 14%, transparent);
/* leaf texture + lighting, themed HERE (tokens only): styling a
   :global(html.dark) descendant from scoped CSS once compiled down to a bare
   html.dark rule and screen-blended the ROOT over the white canvas — the
   whole app rendered white in chromium. Theme via inherited custom
   properties, never global selectors (see CLAUDE.md scoped-CSS traps). */
--ew-tex-blend: multiply;
--ew-tex-op-laid: 1;
--ew-tex-op-mottle: 0.35;
--ew-leaf-shadow:
  2px 2px 0 0 var(--ew-page-edge-1), 4px 4px 0 0 var(--ew-page-edge-2),
  6px 6px 0 0 var(--ew-page-edge-3), 0 24px 70px -18px rgba(0, 0, 0, 0.65),
  0 60px 130px -40px rgba(0, 0, 0, 0.5);
--ew-scrim: color-mix(in srgb, var(--ew-desk) 60%, black);
73 
/* faces */
--ew-serif:
  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
--ew-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
78 
/* type scale (the ladder survives; display/title retuned to the spec) */
--ew-fs-micro: 10px;
--ew-fs-label: 11px;
--ew-fs-meta: 12.5px; /* scribe mono */
--ew-fs-note: 13.5px; /* glosses, footnotes */
--ew-fs-body: 15px;
--ew-fs-lede: 18px;
--ew-fs-title: 30px;
--ew-fs-display: 44px;
88 
/* motion */
--ew-dur-1: 140ms; /* micro */
--ew-dur-2: 280ms; /* standard */
--ew-dur-3: 520ms; /* expressive */
--ew-beat: 900ms; /* dramatic — climaxes only */
--ew-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--ew-ease-spring: cubic-bezier(0.2, 1.4, 0.4, 1);
--ew-ease-strike: cubic-bezier(0.5, 0, 0.2, 1.35); /* anticipation → strike */
97 
/* ── legacy aliases (legal / settings / steward surfaces) ─────────────── */
--ew-fg: var(--ew-ink);
--ew-mut: var(--ew-ink-quiet);
--ew-faint: var(--ew-ink-faint);
--ew-hair: var(--ew-rule);
--ew-line: var(--ew-rule-feint);
⋯ 1 line hidden (lines 104–104)104  --ew-edge: #97876a;
--ew-gauge: color-mix(in srgb, var(--ew-ink-faint) 85%, var(--ew-paper));
--ew-bg: var(--ew-paper);
--ew-tint: color-mix(in srgb, var(--ew-paper) 82%, var(--ew-paper-lo));
--ew-raise: var(--ew-paper-hi);
--ew-raise-line: var(--ew-rule);
--ew-accent: var(--ew-rubric);
--ew-warn: #8a5a16;
--ew-desk-edge: color-mix(in srgb, var(--ew-desk) 70%, black);
--ew-desk-ink-strong: #f6efe2;
--ew-desk-ink-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
115}
116 
117/* Night is a re-lighting, not a palette swap: the same page by candlelight.
 The paper darkens to lamplit vellum, the rubric warms to ember, the desk
 falls to near-black, and the leaf carries an inset warm glow (the candle). */
dark {
--ew-paper-hi: #322917;
--ew-paper: #241d12;
--ew-paper-lo: #170f08;
--ew-rule: #4d4128;
--ew-rule-feint: #352c1b;
126 
--ew-ink: #e6dbc4;
--ew-ink-quiet: #b3a688;
--ew-ink-faint: #8d7f64;
--ew-rubric: #d96b4a;
--ew-gold: #cfa143;
--ew-ok: #9dc178;
--ew-bad: #e0705c;
134 
--ew-wax: #b85731;
--ew-wax-hi: #e08a58;
--ew-wax-lo: #6e2c12;
138 
--ew-desk: #0d0906;
--ew-desk-hi: #1f1509;
⋯ 828 lines hidden (lines 141–968)141  --ew-desk-ink: #b5a583;
142 
--ew-edge: #80735c;
--ew-warn: #d8a34d;
145 
/* night: textures lighten instead of darken; the candle glows in the leaf */
--ew-tex-blend: screen;
--ew-tex-op-laid: 0.5;
--ew-tex-op-mottle: 0.18;
--ew-leaf-shadow:
  2px 2px 0 0 #2b2214, 4px 4px 0 0 #201a0f, 6px 6px 0 0 #16110a,
  0 24px 70px -18px rgba(0, 0, 0, 0.9),
  inset 0 0 140px -20px rgba(255, 170, 80, 0.16);
154}
155 
156/* ── Base ────────────────────────────────────────────────────────────────── */
157body {
background: var(--ew-paper);
color: var(--ew-ink);
/* the manuscript's voice is the app's voice */
font-family: var(--ew-serif);
font-size: var(--ew-fs-body);
line-height: 1.55;
164}
165 
:selection {
background: color-mix(in srgb, var(--ew-rubric) 22%, transparent);
168}
169* {
scrollbar-width: thin;
scrollbar-color: var(--ew-rule) transparent;
172}
:-webkit-scrollbar {
width: 11px;
height: 11px;
176}
:-webkit-scrollbar-track {
background: transparent;
179}
:-webkit-scrollbar-thumb {
background: var(--ew-rule);
border-radius: 999px;
border: 3px solid var(--ew-paper);
184}
:-webkit-scrollbar-thumb:hover {
background: var(--ew-ink-faint);
187}
188 
189/* Focus: rubric ink, everywhere. */
190button:focus-visible,
191a:focus-visible,
192summary:focus-visible,
193[role="button"]:focus-visible,
194[tabindex]:focus-visible {
outline: 2px solid var(--ew-rubric);
outline-offset: 2px;
border-radius: 3px;
198}
199 
200/* ══ THE CODEX DIALECTS ═══════════════════════════════════════════════════
 Five voices, and only five: rubric caps · glosses · inked actions ·
 instruments (drawn per-component in SVG on these tokens) · tables. */
203 
204/* 1 · Rubric caps — running heads, kickers, table titles, the seal word.
    Serif, uppercase, letterspaced. Never bold-sans. */
cx-caps {
font-family: var(--ew-serif);
font-size: 12.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ew-ink-quiet);
212}
cx-caps--rubric {
color: var(--ew-rubric);
215}
cx-caps--small {
font-size: var(--ew-fs-label);
letter-spacing: 0.18em;
219}
220 
221/* 2 · Glosses — every secondary read lives in the margin voice: italic serif,
    paraph- or dagger-marked, quiet ink with rubric emphasis spans. */
cx-gloss {
position: relative;
padding-left: 20px;
font-size: var(--ew-fs-note);
line-height: 1.5;
font-style: italic;
color: var(--ew-ink-quiet);
230}
cx-gloss .codex-mark {
position: absolute;
left: 0;
top: 3px;
color: var(--ew-rubric);
236}
cx-gloss b,
cx-gloss strong {
font-style: normal;
font-weight: 600;
color: var(--ew-ink);
242}
cx-gloss .cx-em {
color: var(--ew-rubric);
font-style: normal;
font-weight: 600;
247}
cx-gloss .cx-quiet {
color: var(--ew-ink-faint);
250}
251 
252/* 3 · Inked actions — every interactive that is not the seal: rubric caps with
    a drawn mark; underline arrives on hover; press settles like a stamp. */
cx-action {
appearance: none;
background: none;
border: 0;
padding: 0;
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--ew-serif);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: var(--ew-rubric);
cursor: pointer;
text-decoration: none;
transition:
  color var(--ew-dur-1) var(--ew-ease),
  transform var(--ew-dur-1) var(--ew-ease);
273}
cx-action:hover {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
278}
cx-action:active {
transform: translateY(0.5px);
281}
cx-action:disabled {
color: var(--ew-ink-faint);
cursor: not-allowed;
text-decoration: none;
286}
cx-action--quiet {
color: var(--ew-ink-faint);
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-size: var(--ew-fs-note);
294}
cx-action--quiet:hover {
color: var(--ew-ink-quiet);
297}
298 
299/* 4 · Instruments — quantities are engraved scales with an index, drawn in
    component SVG on these inks. The shared primitive here is only the
    inkwell rule (characters / simple fills). */
cx-inkrule {
height: 3px;
background: var(--ew-rule-feint);
position: relative;
306}
cx-inkrule > i {
position: absolute;
inset: 0;
right: auto;
background: var(--ew-ink-quiet);
transition: width var(--ew-dur-2) var(--ew-ease);
313}
314 
315/* 5 · Tables — disclosed rules. Serif rows, scribe-mono figures, the struck
    row in full ink with its valence name. */
cx-table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
321}
cx-table td {
padding: 6px 4px;
border-top: 1px solid var(--ew-rule-feint);
color: var(--ew-ink-faint);
326}
cx-table tr:first-child td {
border-top: 0;
329}
cx-table .cx-mono {
font-family: var(--ew-mono);
font-size: var(--ew-fs-meta);
333}
cx-table tr.struck td {
color: var(--ew-ink);
font-weight: 600;
border-top-color: var(--ew-rule);
338}
cx-table tr.struck + tr td {
border-top-color: var(--ew-rule);
341}
342 
343/* Scribe mono — the one non-serif register: equations, of-N counters, ranges. */
cx-mono {
font-family: var(--ew-mono);
font-size: var(--ew-fs-meta);
347}
348 
349/* Footnotes — the dagger apparatus. */
cx-footnote {
font-size: var(--ew-fs-note);
color: var(--ew-ink-faint);
font-style: italic;
354}
cx-footnote .codex-mark,
cx-fnmark {
color: var(--ew-rubric);
358}
cx-fnmark {
font-style: normal;
font-size: 0.8em;
vertical-align: super;
line-height: 0;
margin-left: 2px;
365}
366 
367/* ── Writing on the page (the core verb) ─────────────────────────────────── */
368/* Ruled feints drawn on the paper itself; the caret is the player's pen. */
cx-writing {
width: 100%;
background: transparent;
border: 0;
resize: none;
color: var(--ew-ink);
caret-color: var(--ew-rubric);
font-family: var(--ew-serif);
font-size: 21px;
line-height: 44px;
background-image: repeating-linear-gradient(
  to bottom,
  transparent 0 43px,
  var(--ew-rule-feint) 43px 44px
);
background-origin: content-box;
outline: none;
padding: 0;
387}
cx-writing::placeholder {
color: var(--ew-ink-faint);
font-style: italic;
391}
392/* iOS zoom floor: never under 16px on touch. */
393@media (pointer: coarse) {
.cx-writing {
  font-size: 19px;
  line-height: 40px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 39px,
    var(--ew-rule-feint) 39px 40px
  );
}
403}
404 
405/* ── Ink behaviours (motion) ─────────────────────────────────────────────── */
406/* Rules draw in from their anchor. */
cx-rule-in {
transform-origin: left center;
animation: cx-rule-in var(--ew-dur-3) var(--ew-ease) both;
410}
411@keyframes cx-rule-in {
from {
  transform: scaleX(0);
}
to {
  transform: scaleX(1);
}
418}
419/* Rubric words ink themselves: blur resolves to a sharp stroke. */
cx-ink-in {
animation: cx-ink-in var(--ew-dur-3) var(--ew-ease) both;
422}
423@keyframes cx-ink-in {
from {
  opacity: 0;
  filter: blur(2px);
}
to {
  opacity: 1;
  filter: blur(0);
}
432}
433/* The stamp strike: drop, squash, settle. For wax and verdicts. */
cx-strike {
animation: cx-strike var(--ew-dur-3) var(--ew-ease-spring) both;
436}
437@keyframes cx-strike {
0% {
  opacity: 0;
  transform: scale(1.35);
}
55% {
  opacity: 1;
  transform: scale(0.94);
}
100% {
  opacity: 1;
  transform: scale(1);
}
450}
451/* Page content arrives like a settled sheet. */
cx-settle {
animation: cx-settle var(--ew-dur-3) var(--ew-ease) both;
454}
455@keyframes cx-settle {
from {
  opacity: 0;
  transform: translateY(8px);
}
to {
  opacity: 1;
  transform: none;
}
464}
465/* The one spinner survives as an inked ring. */
ew-spinner {
display: inline-block;
width: 0.9em;
height: 0.9em;
border: 2px solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
animation: ew-spin 0.7s linear infinite;
vertical-align: -0.12em;
475}
476@keyframes ew-spin {
to {
  transform: rotate(360deg);
}
480}
481/* Pending shimmer — an ink wash while the chronicler writes. */
ew-shimmer {
background: linear-gradient(
  90deg,
  var(--ew-rule-feint) 20%,
  var(--ew-rule) 40%,
  var(--ew-rule-feint) 60%
);
background-size: 200% 100%;
animation: ew-shimmer 1.5s ease-in-out infinite;
border-radius: 2px;
492}
493@keyframes ew-shimmer {
from {
  background-position: 200% 0;
}
to {
  background-position: -200% 0;
}
500}
501 
502/* ── Legacy helpers (legal · settings · steward · not the game surface) ──── */
ew-fg {
color: var(--ew-fg);
505}
ew-muted {
color: var(--ew-mut);
508}
ew-hair-c {
color: var(--ew-hair);
511}
ew-faint {
color: var(--ew-faint);
514}
ew-accent {
color: var(--ew-accent);
517}
ew-bg {
background: var(--ew-bg);
520}
ew-tint {
background: var(--ew-tint);
523}
ew-mono {
font-family: var(--ew-mono);
526}
ew-ok {
color: var(--ew-ok);
529}
ew-warn {
color: var(--ew-warn);
532}
ew-bad {
color: var(--ew-bad);
535}
ew-serif {
font-family: var(--ew-serif);
538}
ew-line {
border-color: var(--ew-line);
541}
ew-edge {
border-color: var(--ew-edge);
544}
ew-hover:hover:not(:disabled) {
background: var(--ew-tint);
547}
ew-hover-fg {
color: var(--ew-mut);
550}
ew-hover-fg:hover {
color: var(--ew-fg);
553}
ew-dim {
opacity: 0.68;
transition: opacity var(--ew-dur-2) var(--ew-ease);
557}
ew-label {
font-size: var(--ew-fs-label);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--ew-mut);
564}
ew-label--rule {
display: block;
padding-bottom: 6px;
border-bottom: 1px solid var(--ew-line);
margin-bottom: 12px;
570}
ew-prompt {
font-size: var(--ew-fs-note);
color: var(--ew-mut);
text-transform: none;
letter-spacing: normal;
576}
ew-hint {
font-size: var(--ew-fs-note);
line-height: 1.4;
color: var(--ew-mut);
581}
ew-hint::before {
content: "\203A\00a0\00a0";
color: var(--ew-accent);
font-weight: 700;
586}
ew-blocked {
border-left: 2px solid var(--ew-bad);
padding-left: 8px;
color: var(--ew-mut);
591}
ew-blocked .ew-blocked-tag {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ew-bad);
597}
ew-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
flex: none;
604}
ew-dot--ok {
background: var(--ew-ok);
607}
ew-dot--warn {
background: var(--ew-warn);
610}
ew-dot--bad {
background: var(--ew-bad);
613}
ew-dot--mut {
background: var(--ew-faint);
616}
ew-dot--accent {
background: var(--ew-accent);
619}
ew-dot--hollow {
background: transparent;
border: 2px solid var(--ew-faint);
623}
ew-input {
width: 100%;
background: var(--ew-bg);
color: var(--ew-fg);
border: 1px solid var(--ew-edge);
border-radius: 2px;
padding: 9px 11px;
font: inherit;
632}
ew-input::placeholder {
color: var(--ew-faint);
635}
ew-input:focus,
ew-input:focus-visible {
outline: 2px solid var(--ew-accent);
outline-offset: -1px;
border-color: transparent;
641}
ew-select {
width: 100%;
background: var(--ew-bg);
color: var(--ew-fg);
border: 1px solid var(--ew-edge);
border-radius: 2px;
padding: 8px 11px;
font: inherit;
cursor: pointer;
651}
ew-select:focus,
ew-select:focus-visible {
outline: 2px solid var(--ew-accent);
outline-offset: -1px;
border-color: transparent;
657}
ew-btn {
font: inherit;
font-weight: 600;
color: var(--ew-fg);
background: transparent;
border: 1px solid var(--ew-edge);
border-radius: 2px;
padding: 6px 14px;
cursor: pointer;
transition:
  border-color var(--ew-dur-1) var(--ew-ease),
  color var(--ew-dur-1) var(--ew-ease),
  background var(--ew-dur-1) var(--ew-ease),
  opacity var(--ew-dur-1) var(--ew-ease),
  transform var(--ew-dur-1) var(--ew-ease);
673}
ew-btn:hover:not(:disabled) {
border-color: var(--ew-fg);
676}
ew-btn:active:not(:disabled) {
transform: translateY(0.5px) scale(0.975);
679}
ew-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
683}
ew-btn--primary {
color: #fff;
background: var(--ew-accent);
border-color: var(--ew-accent);
688}
dark .ew-btn--primary {
color: #0d0d0d;
691}
ew-btn--primary:hover:not(:disabled) {
filter: brightness(1.08);
border-color: var(--ew-accent);
695}
ew-btn--primary:disabled {
color: var(--ew-faint);
background: transparent;
border-color: var(--ew-line);
opacity: 1;
701}
ew-field {
width: 100%;
background: transparent;
color: var(--ew-fg);
border: 0;
border-bottom: 2px solid var(--ew-edge);
border-radius: 0;
padding: 6px 2px;
font: inherit;
transition:
  border-color var(--ew-dur-1) var(--ew-ease),
  background-color var(--ew-dur-1) var(--ew-ease);
714}
ew-field::placeholder {
color: var(--ew-faint);
717}
ew-field:focus,
ew-field:focus-visible {
outline: none;
border-bottom-color: var(--ew-accent);
background: var(--ew-tint);
723}
ew-field:disabled {
color: var(--ew-faint);
border-bottom-color: var(--ew-line);
cursor: not-allowed;
728}
729@media (pointer: coarse) {
.ew-field,
.ew-input {
  font-size: 16px;
}
734}
ew-card {
background: var(--ew-tint);
border: 1px solid var(--ew-line);
border-radius: 3px;
739}
ew-tap {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
746}
747input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 18px;
background: transparent;
cursor: pointer;
754}
755input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
background: var(--ew-gauge);
758}
759input[type="range"]::-moz-range-track {
height: 2px;
background: var(--ew-gauge);
762}
763input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 5px;
height: 16px;
margin-top: -7px;
background: var(--ew-accent);
border: 0;
border-radius: 1.5px;
772}
773input[type="range"]::-moz-range-thumb {
width: 5px;
height: 16px;
background: var(--ew-accent);
border: 0;
border-radius: 1.5px;
779}
780input[type="range"]:focus-visible {
outline: 2px solid var(--ew-accent);
outline-offset: 4px;
783}
784input[type="range"]:disabled {
opacity: 0.5;
cursor: not-allowed;
787}
ew-track {
height: 6px;
background: var(--ew-gauge);
border-radius: 999px;
overflow: hidden;
793}
ew-track > .ew-fill {
height: 100%;
background: var(--ew-fg);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--ew-bg);
transition: width 0.4s var(--ew-ease);
800}
ew-rail {
border-top: 1px solid var(--ew-line);
padding-top: 10px;
804}
ew-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
811}
ew-summary::-webkit-details-marker {
display: none;
814}
ew-summary::before {
content: "\25B8";
color: var(--ew-faint);
font-size: 11px;
line-height: 1;
820}
821details[open] > .ew-summary::before {
content: "\25BE";
823}
ew-summary--static {
cursor: default;
pointer-events: none;
827}
ew-summary--static::before {
display: none;
830}
ew-press {
transition:
  transform var(--ew-dur-1) var(--ew-ease),
  background var(--ew-dur-1) var(--ew-ease),
  border-color var(--ew-dur-1) var(--ew-ease),
  color var(--ew-dur-1) var(--ew-ease);
837}
ew-press:active:not(:disabled) {
transform: scale(0.97);
840}
ew-press:disabled {
opacity: 0.6;
cursor: not-allowed;
844}
ew-loading-bar {
position: relative;
height: 2px;
overflow: hidden;
background: var(--ew-line);
850}
ew-loading-bar::after {
content: "";
position: absolute;
inset: 0;
background: var(--ew-accent);
transform-origin: left;
animation: ew-load-sweep 1.15s var(--ew-ease) infinite;
858}
859@keyframes ew-load-sweep {
0% {
  transform: translateX(-100%) scaleX(0.35);
}
55% {
  transform: translateX(40%) scaleX(0.6);
}
100% {
  transform: translateX(160%) scaleX(0.35);
}
869}
ew-panel {
animation: ew-panel-in var(--ew-dur-2) var(--ew-ease);
872}
873@keyframes ew-panel-in {
from {
  transform: translateY(8px);
}
to {
  transform: translateY(0);
}
880}
ew-fade-in {
animation: ew-fade-in var(--ew-dur-3) var(--ew-ease) both;
883}
884@keyframes ew-fade-in {
from {
  opacity: 0;
  transform: translateY(6px);
}
to {
  opacity: 1;
  transform: none;
}
893}
pct-pop {
animation: ew-pct-pop var(--ew-dur-2) var(--ew-ease-spring);
896}
897@keyframes ew-pct-pop {
0% {
  transform: scale(1);
}
35% {
  transform: scale(1.14);
}
100% {
  transform: scale(1);
}
907}
908/* The chronicle's illuminated initial — the one earned ornament. */
909[data-testid="chronicle-body"] p:first-of-type::first-letter,
910[data-testid="end-chronicle-body"] p:first-of-type::first-letter {
font-family: var(--ew-serif);
font-size: 2.8em;
line-height: 0.78;
float: left;
margin: 0.04em 0.09em 0 0;
color: var(--ew-rubric);
font-weight: 600;
918}
919/* A floated cap needs a paragraph guaranteed ≥3 lines to wrap it (spec §2) —
 shorter, it strands the prose in the cap's indent. Surfaces gate it with
 .cx-cap-raise (a char-count proxy on the opening paragraph), falling back
 to the sanctioned raised initial: same rubric ink, in the line. */
cx-cap-raise p:first-of-type::first-letter {
float: none;
font-size: 1.24em;
line-height: inherit;
margin: 0;
928}
929 
930/* ── Reduced motion: the same staging, translated ────────────────────────── */
931@media (prefers-reduced-motion: reduce) {
.ew-dim {
  transition: none;
}
.ew-spinner {
  animation-duration: 1.4s;
}
.ew-shimmer,
.ew-loading-bar::after,
.ew-panel,
.ew-fade-in,
.pct-pop {
  animation: none;
}
.ew-fade-in {
  opacity: 1;
  transform: none;
}
.cx-rule-in,
.cx-ink-in,
.cx-settle,
.cx-strike {
  animation: none;
}
.cx-strike {
  opacity: 1;
  transform: none;
}
.ew-press:active:not(:disabled),
.ew-btn:active:not(:disabled),
.cx-action:active {
  transform: none;
}
.ew-track > .ew-fill,
.cx-inkrule > i {
  transition: none;
}
968}

The five dialects

Every component idiom in the game now descends from five voices: rubric caps (running heads, kickers, table titles), margin glosses (every secondary read — italic serif, mark-opened), inked actions (every interactive that is not the seal), engraved instruments (quantities as drawn scales with an index), and disclosed tables. The player's writing itself is .cx-writing: a real textarea whose chrome is ruled feints drawn on the paper, with a rubric caret.

Rubric caps, glosses, inked actions; then the ruled writing surface.

assets/css/main.css · 968 lines

assets/css/main.css968 lines · CSS

⋯ 199 lines hidden (lines 1–199)1/**
* Main CSS — Everwhen · THE ILLUMINATED CODEX
*
* The UI is not a website about a magical manuscript. The UI IS the manuscript,
* and the app is the desk it rests on. Materials over chrome: paper has fiber,
* light exists, wax has relief. One accent — rubrication (red ink marks what
* matters; the wax seal is its material twin). Gold is ceremonial, at most once
* per screen, never interactive. Every glyph is drawn in the seal's hand
* (components/codex/marks/) — no OS emoji, no dingbat fonts.
*
* The material test for any effect: does it describe paper, ink, wax, or
* light? If not, it doesn't ship.
*
* Full language: docs/design/illuminated-codex-language.md (spec) and
* docs/design/illuminated-codex-problem-book.md (the diagnosis it answers).
*
* Two class families:
*   .cx-*  — the codex dialects (game surfaces).
*   .ew-*  — legacy helpers kept for legal/settings/steward surfaces; they now
*            resolve to codex materials via the alias tokens below.
*/
22 
23@import "tailwindcss";
24@import "@nuxt/ui";
25 
26/* ── Materials & inks ────────────────────────────────────────────────────── */
root {
/* paper */
--ew-paper-hi: #faf4e6;
--ew-paper: #f4ecd8;
--ew-paper-lo: #e8dcc0;
--ew-rule: #cbb894; /* drawn rules */
--ew-rule-feint: #ddd0b0; /* baseline feints, hairline folds */
34 
/* ink */
--ew-ink: #2a2118;
--ew-ink-quiet: #5f5240;
--ew-ink-faint: #857358;
--ew-rubric: #96291c; /* THE accent — rubrication */
--ew-gold: #a97e1c; /* ceremonial only */
--ew-ok: #43601f;
--ew-bad: #6d1a10;
43 
/* wax */
--ew-wax: #a84b28;
--ew-wax-hi: #c96f43;
--ew-wax-lo: #7c3116;
48 
/* the desk */
--ew-desk: #2e2013;
--ew-desk-hi: #4a3620;
--ew-desk-ink: #cdbb96; /* legible directly on the desk */
/* stacked page-edge inks (pre-resolved: color-mix inside box-shadow
   shorthands poisons chromium's rasterizer — resolve mixes here, in
   custom-property values, never inline in a shadow list) */
--ew-page-edge-1: var(--ew-paper-lo);
--ew-page-edge-2: color-mix(in srgb, var(--ew-paper-lo) 78%, black);
--ew-page-edge-3: color-mix(in srgb, var(--ew-paper-lo) 58%, black);
--ew-rubric-halo: color-mix(in srgb, var(--ew-rubric) 14%, transparent);
/* leaf texture + lighting, themed HERE (tokens only): styling a
   :global(html.dark) descendant from scoped CSS once compiled down to a bare
   html.dark rule and screen-blended the ROOT over the white canvas — the
   whole app rendered white in chromium. Theme via inherited custom
   properties, never global selectors (see CLAUDE.md scoped-CSS traps). */
--ew-tex-blend: multiply;
--ew-tex-op-laid: 1;
--ew-tex-op-mottle: 0.35;
--ew-leaf-shadow:
  2px 2px 0 0 var(--ew-page-edge-1), 4px 4px 0 0 var(--ew-page-edge-2),
  6px 6px 0 0 var(--ew-page-edge-3), 0 24px 70px -18px rgba(0, 0, 0, 0.65),
  0 60px 130px -40px rgba(0, 0, 0, 0.5);
--ew-scrim: color-mix(in srgb, var(--ew-desk) 60%, black);
73 
/* faces */
--ew-serif:
  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
--ew-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
78 
/* type scale (the ladder survives; display/title retuned to the spec) */
--ew-fs-micro: 10px;
--ew-fs-label: 11px;
--ew-fs-meta: 12.5px; /* scribe mono */
--ew-fs-note: 13.5px; /* glosses, footnotes */
--ew-fs-body: 15px;
--ew-fs-lede: 18px;
--ew-fs-title: 30px;
--ew-fs-display: 44px;
88 
/* motion */
--ew-dur-1: 140ms; /* micro */
--ew-dur-2: 280ms; /* standard */
--ew-dur-3: 520ms; /* expressive */
--ew-beat: 900ms; /* dramatic — climaxes only */
--ew-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--ew-ease-spring: cubic-bezier(0.2, 1.4, 0.4, 1);
--ew-ease-strike: cubic-bezier(0.5, 0, 0.2, 1.35); /* anticipation → strike */
97 
/* ── legacy aliases (legal / settings / steward surfaces) ─────────────── */
--ew-fg: var(--ew-ink);
--ew-mut: var(--ew-ink-quiet);
--ew-faint: var(--ew-ink-faint);
--ew-hair: var(--ew-rule);
--ew-line: var(--ew-rule-feint);
--ew-edge: #97876a;
--ew-gauge: color-mix(in srgb, var(--ew-ink-faint) 85%, var(--ew-paper));
--ew-bg: var(--ew-paper);
--ew-tint: color-mix(in srgb, var(--ew-paper) 82%, var(--ew-paper-lo));
--ew-raise: var(--ew-paper-hi);
--ew-raise-line: var(--ew-rule);
--ew-accent: var(--ew-rubric);
--ew-warn: #8a5a16;
--ew-desk-edge: color-mix(in srgb, var(--ew-desk) 70%, black);
--ew-desk-ink-strong: #f6efe2;
--ew-desk-ink-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
115}
116 
117/* Night is a re-lighting, not a palette swap: the same page by candlelight.
 The paper darkens to lamplit vellum, the rubric warms to ember, the desk
 falls to near-black, and the leaf carries an inset warm glow (the candle). */
dark {
--ew-paper-hi: #322917;
--ew-paper: #241d12;
--ew-paper-lo: #170f08;
--ew-rule: #4d4128;
--ew-rule-feint: #352c1b;
126 
--ew-ink: #e6dbc4;
--ew-ink-quiet: #b3a688;
--ew-ink-faint: #8d7f64;
--ew-rubric: #d96b4a;
--ew-gold: #cfa143;
--ew-ok: #9dc178;
--ew-bad: #e0705c;
134 
--ew-wax: #b85731;
--ew-wax-hi: #e08a58;
--ew-wax-lo: #6e2c12;
138 
--ew-desk: #0d0906;
--ew-desk-hi: #1f1509;
--ew-desk-ink: #b5a583;
142 
--ew-edge: #80735c;
--ew-warn: #d8a34d;
145 
/* night: textures lighten instead of darken; the candle glows in the leaf */
--ew-tex-blend: screen;
--ew-tex-op-laid: 0.5;
--ew-tex-op-mottle: 0.18;
--ew-leaf-shadow:
  2px 2px 0 0 #2b2214, 4px 4px 0 0 #201a0f, 6px 6px 0 0 #16110a,
  0 24px 70px -18px rgba(0, 0, 0, 0.9),
  inset 0 0 140px -20px rgba(255, 170, 80, 0.16);
154}
155 
156/* ── Base ────────────────────────────────────────────────────────────────── */
157body {
background: var(--ew-paper);
color: var(--ew-ink);
/* the manuscript's voice is the app's voice */
font-family: var(--ew-serif);
font-size: var(--ew-fs-body);
line-height: 1.55;
164}
165 
:selection {
background: color-mix(in srgb, var(--ew-rubric) 22%, transparent);
168}
169* {
scrollbar-width: thin;
scrollbar-color: var(--ew-rule) transparent;
172}
:-webkit-scrollbar {
width: 11px;
height: 11px;
176}
:-webkit-scrollbar-track {
background: transparent;
179}
:-webkit-scrollbar-thumb {
background: var(--ew-rule);
border-radius: 999px;
border: 3px solid var(--ew-paper);
184}
:-webkit-scrollbar-thumb:hover {
background: var(--ew-ink-faint);
187}
188 
189/* Focus: rubric ink, everywhere. */
190button:focus-visible,
191a:focus-visible,
192summary:focus-visible,
193[role="button"]:focus-visible,
194[tabindex]:focus-visible {
outline: 2px solid var(--ew-rubric);
outline-offset: 2px;
border-radius: 3px;
198}
199 
200/* ══ THE CODEX DIALECTS ═══════════════════════════════════════════════════
 Five voices, and only five: rubric caps · glosses · inked actions ·
 instruments (drawn per-component in SVG on these tokens) · tables. */
203 
204/* 1 · Rubric caps — running heads, kickers, table titles, the seal word.
    Serif, uppercase, letterspaced. Never bold-sans. */
cx-caps {
font-family: var(--ew-serif);
font-size: 12.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ew-ink-quiet);
212}
cx-caps--rubric {
color: var(--ew-rubric);
215}
cx-caps--small {
font-size: var(--ew-fs-label);
letter-spacing: 0.18em;
219}
220 
221/* 2 · Glosses — every secondary read lives in the margin voice: italic serif,
    paraph- or dagger-marked, quiet ink with rubric emphasis spans. */
cx-gloss {
position: relative;
padding-left: 20px;
font-size: var(--ew-fs-note);
line-height: 1.5;
font-style: italic;
color: var(--ew-ink-quiet);
230}
cx-gloss .codex-mark {
position: absolute;
left: 0;
top: 3px;
color: var(--ew-rubric);
236}
cx-gloss b,
cx-gloss strong {
font-style: normal;
font-weight: 600;
color: var(--ew-ink);
242}
cx-gloss .cx-em {
color: var(--ew-rubric);
font-style: normal;
font-weight: 600;
247}
cx-gloss .cx-quiet {
color: var(--ew-ink-faint);
250}
251 
252/* 3 · Inked actions — every interactive that is not the seal: rubric caps with
    a drawn mark; underline arrives on hover; press settles like a stamp. */
cx-action {
appearance: none;
background: none;
border: 0;
padding: 0;
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--ew-serif);
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: var(--ew-rubric);
cursor: pointer;
text-decoration: none;
transition:
  color var(--ew-dur-1) var(--ew-ease),
  transform var(--ew-dur-1) var(--ew-ease);
273}
cx-action:hover {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
278}
cx-action:active {
transform: translateY(0.5px);
281}
cx-action:disabled {
color: var(--ew-ink-faint);
cursor: not-allowed;
text-decoration: none;
⋯ 79 lines hidden (lines 286–364)286}
cx-action--quiet {
color: var(--ew-ink-faint);
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-size: var(--ew-fs-note);
294}
cx-action--quiet:hover {
color: var(--ew-ink-quiet);
297}
298 
299/* 4 · Instruments — quantities are engraved scales with an index, drawn in
    component SVG on these inks. The shared primitive here is only the
    inkwell rule (characters / simple fills). */
cx-inkrule {
height: 3px;
background: var(--ew-rule-feint);
position: relative;
306}
cx-inkrule > i {
position: absolute;
inset: 0;
right: auto;
background: var(--ew-ink-quiet);
transition: width var(--ew-dur-2) var(--ew-ease);
313}
314 
315/* 5 · Tables — disclosed rules. Serif rows, scribe-mono figures, the struck
    row in full ink with its valence name. */
cx-table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
321}
cx-table td {
padding: 6px 4px;
border-top: 1px solid var(--ew-rule-feint);
color: var(--ew-ink-faint);
326}
cx-table tr:first-child td {
border-top: 0;
329}
cx-table .cx-mono {
font-family: var(--ew-mono);
font-size: var(--ew-fs-meta);
333}
cx-table tr.struck td {
color: var(--ew-ink);
font-weight: 600;
border-top-color: var(--ew-rule);
338}
cx-table tr.struck + tr td {
border-top-color: var(--ew-rule);
341}
342 
343/* Scribe mono — the one non-serif register: equations, of-N counters, ranges. */
cx-mono {
font-family: var(--ew-mono);
font-size: var(--ew-fs-meta);
347}
348 
349/* Footnotes — the dagger apparatus. */
cx-footnote {
font-size: var(--ew-fs-note);
color: var(--ew-ink-faint);
font-style: italic;
354}
cx-footnote .codex-mark,
cx-fnmark {
color: var(--ew-rubric);
358}
cx-fnmark {
font-style: normal;
font-size: 0.8em;
vertical-align: super;
line-height: 0;
margin-left: 2px;
365}
366 
367/* ── Writing on the page (the core verb) ─────────────────────────────────── */
368/* Ruled feints drawn on the paper itself; the caret is the player's pen. */
cx-writing {
width: 100%;
background: transparent;
border: 0;
resize: none;
color: var(--ew-ink);
caret-color: var(--ew-rubric);
font-family: var(--ew-serif);
font-size: 21px;
line-height: 44px;
background-image: repeating-linear-gradient(
  to bottom,
  transparent 0 43px,
  var(--ew-rule-feint) 43px 44px
);
background-origin: content-box;
outline: none;
padding: 0;
387}
cx-writing::placeholder {
color: var(--ew-ink-faint);
font-style: italic;
391}
392/* iOS zoom floor: never under 16px on touch. */
393@media (pointer: coarse) {
.cx-writing {
  font-size: 19px;
  line-height: 40px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 39px,
    var(--ew-rule-feint) 39px 40px
⋯ 568 lines hidden (lines 401–968)401    );
}
403}
404 
405/* ── Ink behaviours (motion) ─────────────────────────────────────────────── */
406/* Rules draw in from their anchor. */
cx-rule-in {
transform-origin: left center;
animation: cx-rule-in var(--ew-dur-3) var(--ew-ease) both;
410}
411@keyframes cx-rule-in {
from {
  transform: scaleX(0);
}
to {
  transform: scaleX(1);
}
418}
419/* Rubric words ink themselves: blur resolves to a sharp stroke. */
cx-ink-in {
animation: cx-ink-in var(--ew-dur-3) var(--ew-ease) both;
422}
423@keyframes cx-ink-in {
from {
  opacity: 0;
  filter: blur(2px);
}
to {
  opacity: 1;
  filter: blur(0);
}
432}
433/* The stamp strike: drop, squash, settle. For wax and verdicts. */
cx-strike {
animation: cx-strike var(--ew-dur-3) var(--ew-ease-spring) both;
436}
437@keyframes cx-strike {
0% {
  opacity: 0;
  transform: scale(1.35);
}
55% {
  opacity: 1;
  transform: scale(0.94);
}
100% {
  opacity: 1;
  transform: scale(1);
}
450}
451/* Page content arrives like a settled sheet. */
cx-settle {
animation: cx-settle var(--ew-dur-3) var(--ew-ease) both;
454}
455@keyframes cx-settle {
from {
  opacity: 0;
  transform: translateY(8px);
}
to {
  opacity: 1;
  transform: none;
}
464}
465/* The one spinner survives as an inked ring. */
ew-spinner {
display: inline-block;
width: 0.9em;
height: 0.9em;
border: 2px solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
animation: ew-spin 0.7s linear infinite;
vertical-align: -0.12em;
475}
476@keyframes ew-spin {
to {
  transform: rotate(360deg);
}
480}
481/* Pending shimmer — an ink wash while the chronicler writes. */
ew-shimmer {
background: linear-gradient(
  90deg,
  var(--ew-rule-feint) 20%,
  var(--ew-rule) 40%,
  var(--ew-rule-feint) 60%
);
background-size: 200% 100%;
animation: ew-shimmer 1.5s ease-in-out infinite;
border-radius: 2px;
492}
493@keyframes ew-shimmer {
from {
  background-position: 200% 0;
}
to {
  background-position: -200% 0;
}
500}
501 
502/* ── Legacy helpers (legal · settings · steward · not the game surface) ──── */
ew-fg {
color: var(--ew-fg);
505}
ew-muted {
color: var(--ew-mut);
508}
ew-hair-c {
color: var(--ew-hair);
511}
ew-faint {
color: var(--ew-faint);
514}
ew-accent {
color: var(--ew-accent);
517}
ew-bg {
background: var(--ew-bg);
520}
ew-tint {
background: var(--ew-tint);
523}
ew-mono {
font-family: var(--ew-mono);
526}
ew-ok {
color: var(--ew-ok);
529}
ew-warn {
color: var(--ew-warn);
532}
ew-bad {
color: var(--ew-bad);
535}
ew-serif {
font-family: var(--ew-serif);
538}
ew-line {
border-color: var(--ew-line);
541}
ew-edge {
border-color: var(--ew-edge);
544}
ew-hover:hover:not(:disabled) {
background: var(--ew-tint);
547}
ew-hover-fg {
color: var(--ew-mut);
550}
ew-hover-fg:hover {
color: var(--ew-fg);
553}
ew-dim {
opacity: 0.68;
transition: opacity var(--ew-dur-2) var(--ew-ease);
557}
ew-label {
font-size: var(--ew-fs-label);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--ew-mut);
564}
ew-label--rule {
display: block;
padding-bottom: 6px;
border-bottom: 1px solid var(--ew-line);
margin-bottom: 12px;
570}
ew-prompt {
font-size: var(--ew-fs-note);
color: var(--ew-mut);
text-transform: none;
letter-spacing: normal;
576}
ew-hint {
font-size: var(--ew-fs-note);
line-height: 1.4;
color: var(--ew-mut);
581}
ew-hint::before {
content: "\203A\00a0\00a0";
color: var(--ew-accent);
font-weight: 700;
586}
ew-blocked {
border-left: 2px solid var(--ew-bad);
padding-left: 8px;
color: var(--ew-mut);
591}
ew-blocked .ew-blocked-tag {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ew-bad);
597}
ew-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
flex: none;
604}
ew-dot--ok {
background: var(--ew-ok);
607}
ew-dot--warn {
background: var(--ew-warn);
610}
ew-dot--bad {
background: var(--ew-bad);
613}
ew-dot--mut {
background: var(--ew-faint);
616}
ew-dot--accent {
background: var(--ew-accent);
619}
ew-dot--hollow {
background: transparent;
border: 2px solid var(--ew-faint);
623}
ew-input {
width: 100%;
background: var(--ew-bg);
color: var(--ew-fg);
border: 1px solid var(--ew-edge);
border-radius: 2px;
padding: 9px 11px;
font: inherit;
632}
ew-input::placeholder {
color: var(--ew-faint);
635}
ew-input:focus,
ew-input:focus-visible {
outline: 2px solid var(--ew-accent);
outline-offset: -1px;
border-color: transparent;
641}
ew-select {
width: 100%;
background: var(--ew-bg);
color: var(--ew-fg);
border: 1px solid var(--ew-edge);
border-radius: 2px;
padding: 8px 11px;
font: inherit;
cursor: pointer;
651}
ew-select:focus,
ew-select:focus-visible {
outline: 2px solid var(--ew-accent);
outline-offset: -1px;
border-color: transparent;
657}
ew-btn {
font: inherit;
font-weight: 600;
color: var(--ew-fg);
background: transparent;
border: 1px solid var(--ew-edge);
border-radius: 2px;
padding: 6px 14px;
cursor: pointer;
transition:
  border-color var(--ew-dur-1) var(--ew-ease),
  color var(--ew-dur-1) var(--ew-ease),
  background var(--ew-dur-1) var(--ew-ease),
  opacity var(--ew-dur-1) var(--ew-ease),
  transform var(--ew-dur-1) var(--ew-ease);
673}
ew-btn:hover:not(:disabled) {
border-color: var(--ew-fg);
676}
ew-btn:active:not(:disabled) {
transform: translateY(0.5px) scale(0.975);
679}
ew-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
683}
ew-btn--primary {
color: #fff;
background: var(--ew-accent);
border-color: var(--ew-accent);
688}
dark .ew-btn--primary {
color: #0d0d0d;
691}
ew-btn--primary:hover:not(:disabled) {
filter: brightness(1.08);
border-color: var(--ew-accent);
695}
ew-btn--primary:disabled {
color: var(--ew-faint);
background: transparent;
border-color: var(--ew-line);
opacity: 1;
701}
ew-field {
width: 100%;
background: transparent;
color: var(--ew-fg);
border: 0;
border-bottom: 2px solid var(--ew-edge);
border-radius: 0;
padding: 6px 2px;
font: inherit;
transition:
  border-color var(--ew-dur-1) var(--ew-ease),
  background-color var(--ew-dur-1) var(--ew-ease);
714}
ew-field::placeholder {
color: var(--ew-faint);
717}
ew-field:focus,
ew-field:focus-visible {
outline: none;
border-bottom-color: var(--ew-accent);
background: var(--ew-tint);
723}
ew-field:disabled {
color: var(--ew-faint);
border-bottom-color: var(--ew-line);
cursor: not-allowed;
728}
729@media (pointer: coarse) {
.ew-field,
.ew-input {
  font-size: 16px;
}
734}
ew-card {
background: var(--ew-tint);
border: 1px solid var(--ew-line);
border-radius: 3px;
739}
ew-tap {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
746}
747input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 18px;
background: transparent;
cursor: pointer;
754}
755input[type="range"]::-webkit-slider-runnable-track {
height: 2px;
background: var(--ew-gauge);
758}
759input[type="range"]::-moz-range-track {
height: 2px;
background: var(--ew-gauge);
762}
763input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 5px;
height: 16px;
margin-top: -7px;
background: var(--ew-accent);
border: 0;
border-radius: 1.5px;
772}
773input[type="range"]::-moz-range-thumb {
width: 5px;
height: 16px;
background: var(--ew-accent);
border: 0;
border-radius: 1.5px;
779}
780input[type="range"]:focus-visible {
outline: 2px solid var(--ew-accent);
outline-offset: 4px;
783}
784input[type="range"]:disabled {
opacity: 0.5;
cursor: not-allowed;
787}
ew-track {
height: 6px;
background: var(--ew-gauge);
border-radius: 999px;
overflow: hidden;
793}
ew-track > .ew-fill {
height: 100%;
background: var(--ew-fg);
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--ew-bg);
transition: width 0.4s var(--ew-ease);
800}
ew-rail {
border-top: 1px solid var(--ew-line);
padding-top: 10px;
804}
ew-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
811}
ew-summary::-webkit-details-marker {
display: none;
814}
ew-summary::before {
content: "\25B8";
color: var(--ew-faint);
font-size: 11px;
line-height: 1;
820}
821details[open] > .ew-summary::before {
content: "\25BE";
823}
ew-summary--static {
cursor: default;
pointer-events: none;
827}
ew-summary--static::before {
display: none;
830}
ew-press {
transition:
  transform var(--ew-dur-1) var(--ew-ease),
  background var(--ew-dur-1) var(--ew-ease),
  border-color var(--ew-dur-1) var(--ew-ease),
  color var(--ew-dur-1) var(--ew-ease);
837}
ew-press:active:not(:disabled) {
transform: scale(0.97);
840}
ew-press:disabled {
opacity: 0.6;
cursor: not-allowed;
844}
ew-loading-bar {
position: relative;
height: 2px;
overflow: hidden;
background: var(--ew-line);
850}
ew-loading-bar::after {
content: "";
position: absolute;
inset: 0;
background: var(--ew-accent);
transform-origin: left;
animation: ew-load-sweep 1.15s var(--ew-ease) infinite;
858}
859@keyframes ew-load-sweep {
0% {
  transform: translateX(-100%) scaleX(0.35);
}
55% {
  transform: translateX(40%) scaleX(0.6);
}
100% {
  transform: translateX(160%) scaleX(0.35);
}
869}
ew-panel {
animation: ew-panel-in var(--ew-dur-2) var(--ew-ease);
872}
873@keyframes ew-panel-in {
from {
  transform: translateY(8px);
}
to {
  transform: translateY(0);
}
880}
ew-fade-in {
animation: ew-fade-in var(--ew-dur-3) var(--ew-ease) both;
883}
884@keyframes ew-fade-in {
from {
  opacity: 0;
  transform: translateY(6px);
}
to {
  opacity: 1;
  transform: none;
}
893}
pct-pop {
animation: ew-pct-pop var(--ew-dur-2) var(--ew-ease-spring);
896}
897@keyframes ew-pct-pop {
0% {
  transform: scale(1);
}
35% {
  transform: scale(1.14);
}
100% {
  transform: scale(1);
}
907}
908/* The chronicle's illuminated initial — the one earned ornament. */
909[data-testid="chronicle-body"] p:first-of-type::first-letter,
910[data-testid="end-chronicle-body"] p:first-of-type::first-letter {
font-family: var(--ew-serif);
font-size: 2.8em;
line-height: 0.78;
float: left;
margin: 0.04em 0.09em 0 0;
color: var(--ew-rubric);
font-weight: 600;
918}
919/* A floated cap needs a paragraph guaranteed ≥3 lines to wrap it (spec §2) —
 shorter, it strands the prose in the cap's indent. Surfaces gate it with
 .cx-cap-raise (a char-count proxy on the opening paragraph), falling back
 to the sanctioned raised initial: same rubric ink, in the line. */
cx-cap-raise p:first-of-type::first-letter {
float: none;
font-size: 1.24em;
line-height: inherit;
margin: 0;
928}
929 
930/* ── Reduced motion: the same staging, translated ────────────────────────── */
931@media (prefers-reduced-motion: reduce) {
.ew-dim {
  transition: none;
}
.ew-spinner {
  animation-duration: 1.4s;
}
.ew-shimmer,
.ew-loading-bar::after,
.ew-panel,
.ew-fade-in,
.pct-pop {
  animation: none;
}
.ew-fade-in {
  opacity: 1;
  transform: none;
}
.cx-rule-in,
.cx-ink-in,
.cx-settle,
.cx-strike {
  animation: none;
}
.cx-strike {
  opacity: 1;
  transform: none;
}
.ew-press:active:not(:disabled),
.ew-btn:active:not(:disabled),
.cx-action:active {
  transform: none;
}
.ew-track > .ew-fill,
.cx-inkrule > i {
  transition: none;
}
968}

The marks — no glyph the OS rendered for us

Twenty-three drawn marks — manicule, paraph, hourglass, lens, quill, die, leaf-corner, bookmark, candle, daggers, fleuron, laurel, jewel and kin — one hand, one stroke weight, currentColor. Every emoji and dingbat on a game surface died in this PR; objective icons became engraved roundels drawn in the mission index.

The registry's head: the pointing hand, the paraph, the hourglass.

components/codex/CodexMark.vue · 191 lines

components/codex/CodexMark.vue191 lines · Vue

⋯ 21 lines hidden (lines 1–21)1<template>
<svg
  class="codex-mark"
  viewBox="0 0 16 16"
  aria-hidden="true"
  :style="{ width: size, height: size }"
>
  <g
    v-for="(p, i) in mark"
    :key="i"
    :fill="p.f ? 'currentColor' : 'none'"
    :stroke="p.f ? 'none' : 'currentColor'"
    :stroke-width="p.w ?? 1.4"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path :d="p.d" :opacity="p.o" />
  </g>
</svg>
20</template>
21 
22<script setup lang="ts">
23/** The game's marks — one drawn set, single-stroke sepia, in the seal's hand.
*  16px grid, stroke 1.4, round caps. Every glyph the game surface shows comes
*  from here: no OS emoji, no dingbat fonts (the world stays one hand's work,
*  and identical on every platform). Marks inherit `currentColor`; interactive
*  parents carry the aria-label — the svg itself is decorative.
*  NOTE: template stays comment-free (a leading template comment makes the
*  component multi-root in dev and Vue drops class fallthrough). */
30import { computed } from "vue";
31 
32type Stroke = { d: string; f?: boolean; w?: number; o?: number };
33 
34const MARKS: Record<string, Stroke[]> = {
/* the pointing hand — marks what matters (solid, like metal type) */
manicule: [
  {
    d: "M1.5 5.6 L4.4 5.6 L4.4 10.4 L1.5 10.4 Z M4.4 6.2 L9.6 6.2 L9.6 4.9 C9.6 4.1 10.7 3.9 11 4.7 L11.9 7 L14.8 7.4 C15.5 7.5 15.5 8.4 14.8 8.5 L10.4 9.2 C10 10.6 8.9 11.2 7.5 11.2 L4.4 11.2 Z",
    f: true,
  },
],
/* opens a gloss */
paraph: [
  {
    d: "M11.2 2.5 C6 2.5 3.6 4.9 3.6 7.6 C3.6 10 5.5 11.4 7.4 11.4 L7.4 13.5",
  },
  { d: "M11.2 2.5 L11.2 13.5" },
],
/* time, the chain of eras */
hourglass: [
  { d: "M4.6 2.5 L11.4 2.5 M4.6 13.5 L11.4 13.5" },
  {
    d: "M5.5 2.5 C5.5 6 8 7 8 8 C8 9 5.5 10 5.5 13.5 M10.5 2.5 C10.5 6 8 7 8 8 C8 9 10.5 10 10.5 13.5",
    w: 1.3,
  },
  { d: "M8 11.2 L8 12.4", w: 1.8 },
],
/* the archive */
lens: [
  {
⋯ 131 lines hidden (lines 61–191)61      d: "M12.8 6.8 A5.4 5.4 0 1 1 2 6.8 A5.4 5.4 0 1 1 12.8 6.8 Z M11.2 10.6 L14.6 14",
  },
],
/* craft, the judge's pen */
quill: [
  {
    d: "M13.8 2.2 C10 2.6 6.6 5.4 4.8 10.6 M13.8 2.2 C13.6 6.4 11 9.8 5.6 11.2 M4.8 10.6 L3.4 13.4 M3.4 13.4 L4.6 12.9",
    w: 1.3,
  },
  { d: "M8.4 5 C9.2 6.6 10.6 7.4 12.2 7.4", w: 0.9, o: 0.6 },
],
/* fate */
die: [
  { d: "M8 1.6 L13.6 4.8 L13.6 11.2 L8 14.4 L2.4 11.2 L2.4 4.8 Z" },
  { d: "M8 4.6 L11 9.6 L5 9.6 Z", w: 1.2 },
  {
    d: "M8 1.6 L8 4.6 M13.6 4.8 L11 9.6 M2.4 4.8 L5 9.6 M8 14.4 L8 9.6",
    w: 0.9,
    o: 0.65,
  },
],
/* turn the leaf */
"leaf-corner": [
  { d: "M3 2.5 L13 2.5 L13 8 L8.5 13.5 L3 13.5 Z" },
  { d: "M13 8 C10.5 8.6 9 10.5 8.5 13.5", w: 1.2 },
],
/* the record */
bookmark: [{ d: "M4.5 2 L11.5 2 L11.5 14 L8 11.2 L4.5 14 Z" }],
/* sound */
note: [
  { d: "M9.4 11.6 A2.2 2.2 0 1 1 9.39 11.55 Z", f: true },
  { d: "M11.4 11.6 L11.4 2.6 C12.6 3.6 13.6 4.6 13 6.8", w: 1.3 },
  { d: "M9.4 11.6 L11.4 11.6", w: 1.3 },
],
/* theme — a candle: the codex is read by its light */
candle: [
  { d: "M5.5 7.5 L10.5 7.5 L10.2 13.5 L5.8 13.5 Z" },
  { d: "M8 5.8 C9.4 4.6 9.2 3.2 8 2 C6.8 3.2 6.6 4.6 8 5.8 Z", w: 1.2 },
],
/* begin again */
reset: [
  { d: "M12.9 8 A4.9 4.9 0 1 1 9.8 3.5" },
  { d: "M9.4 1.4 L10.1 3.7 L7.8 4.4", w: 1.2 },
],
close: [{ d: "M4 4 L12 12 M12 4 L4 12" }],
dagger: [
  { d: "M8 2.2 L8 13.8 M5.6 4.8 L10.4 4.8" },
  { d: "M8 12 L7 13.8 L9 13.8 Z", f: true },
],
"double-dagger": [{ d: "M8 2.2 L8 13.8 M5.6 4.6 L10.4 4.6 M5.6 9 L10.4 9" }],
/* the ornament */
fleuron: [
  { d: "M8 2.6 C10.4 5 10.4 8.4 8 10.8 C5.6 8.4 5.6 5 8 2.6 Z", f: true },
  { d: "M8 10.8 L8 13.6", w: 1.2 },
],
/* victory */
laurel: [
  {
    d: "M5.2 3 C3.2 6.6 3.6 10.4 7 13 M10.8 3 C12.8 6.6 12.4 10.4 9 13",
    w: 1.3,
  },
  {
    d: "M4.2 5.8 C5.4 6.3 6.3 6.1 7 5.3 C5.9 4.9 4.9 5 4.2 5.8 Z M4.4 9 C5.6 9.5 6.5 9.3 7.2 8.5 C6.1 8.1 5.1 8.2 4.4 9 Z M11.8 5.8 C10.6 6.3 9.7 6.1 9 5.3 C10.1 4.9 11.1 5 11.8 5.8 Z M11.6 9 C10.4 9.5 9.5 9.3 8.8 8.5 C9.9 8.1 10.9 8.2 11.6 9 Z",
    f: true,
  },
],
/* defeat — the bar sinister */
bar: [
  { d: "M8 1.8 A6.2 6.2 0 1 1 7.99 1.8 Z" },
  { d: "M3.8 12.2 L12.2 3.8", w: 1.6 },
],
/* the stake */
flag: [{ d: "M5 2 L5 14" }, { d: "M5 2.8 L12.6 5 L5 7.2 Z", f: true }],
/* pin a moment — a scribe's pin laid across the page */
pin: [
  { d: "M13.6 4.4 A1.9 1.9 0 1 1 13.59 4.35 Z", f: true },
  { d: "M10.5 5.9 L3.2 13.2" },
],
/* anachronism — the wager against time (solid, like the manicule) */
bolt: [
  {
    d: "M9.4 1.6 L4.2 8.8 L7.3 8.8 L6.2 14.4 L11.8 6.7 L8.7 6.7 Z",
    f: true,
  },
],
/* the causal chain */
chain: [
  { d: "M6.8 9.2 A2.6 2.6 0 1 1 3.2 5.6 L4.6 4.2 A2.6 2.6 0 0 1 8.2 7.8" },
  {
    d: "M9.2 6.8 A2.6 2.6 0 1 1 12.8 10.4 L11.4 11.8 A2.6 2.6 0 0 1 7.8 8.2",
  },
],
/* momentum */
jewel: [
  { d: "M8 2.8 L13.2 8 L8 13.2 L2.8 8 Z" },
  { d: "M8 5.6 L10.4 8 L8 10.4 L5.6 8 Z", w: 1, o: 0.7 },
],
/* the figure writes back */
scroll: [
  { d: "M4 3.4 C4 2.4 4.8 2 5.6 2 L13 2 C12 2.6 12 3.4 12 4.4 L12 11.4" },
  {
    d: "M12 11.4 C12 13 11 14 9.4 14 L4.6 14 C3.4 14 2.6 13 2.6 11.8 C2.6 10.8 3.4 10.2 4.2 10.2 L4.2 3.4",
  },
],
/* attention, honestly marked */
notabene: [
  { d: "M8 2.2 L14.2 13 L1.8 13 Z" },
  { d: "M8 6 L8 9.4 M8 11 L8 11.4", w: 1.6 },
],
/* the account — the key to your own ledger */
key: [
  { d: "M7.4 8 A2.7 2.7 0 1 1 7.39 7.93 Z" },
  { d: "M7.4 8 L13.8 8" },
  { d: "M11 8 L11 10.4 M13.8 8 L13.8 11", w: 1.3 },
],
176};
177 
178const props = withDefaults(
defineProps<{ name: keyof typeof MARKS | string; size?: string }>(),
{ size: "1em" },
181);
182const mark = computed(() => MARKS[props.name] ?? MARKS.fleuron);
183</script>
184 
185<style scoped>
codex-mark {
display: inline-block;
vertical-align: -0.14em;
flex: none;
190}
191</style>

The shell — desk, leaf, ribbon, turnline

pages/play.vue renders the environment: the desk (radial pool of light, leather grain), the leaf (laid-paper texture, fibrous mottle, stacked under-pages, candle glow at night), the running head band with the app's utilities as quiet margin marks, the wax ribbon bookmark that carries the run's five pips and its timeline figure, and the turnline whose primary verb is now "Turn the leaf ›" beside the page's own curling corner. All conductor, soundscape, coaching, and overlay logic is untouched.

The folio's materials; the ribbon instrument.

pages/play.vue · 1231 lines

pages/play.vue1231 lines · Vue

⋯ 733 lines hidden (lines 1–733)1<template>
<!--
  THE ILLUMINATED CODEX. The desk is the app; the leaf is the game. The
  conductor (provided once here) owns the phase; each leaf is a focused page;
  the store's two-phase actions land the SFX-bearing writes at leaf arrival,
  so the soundscape stays in lockstep for free.
7 
  This is THE game at /play; the classic board UI was retired here.
-->
<div class="desk">
  <!-- Post-checkout banner: a credited confirmation, or a gentle no-charge on
       cancel. A slip laid on the desk over the codex; self-dismisses. -->
  <div
    v-if="economyStore.purchaseNotice"
    data-testid="purchase-notice"
    role="status"
    aria-live="polite"
    class="desk-slip purchase-banner"
    :class="economyStore.purchaseNotice"
  >
    <CodexMark
      :name="economyStore.purchaseNotice === 'success' ? 'laurel' : 'close'"
      size="15px"
    />
    <span class="pn-text">{{
      economyStore.purchaseNotice === "success"
        ? "Payment received — your runs have been added to your balance."
        : "Checkout canceled — you weren't charged."
    }}</span>
    <button
      type="button"
      data-testid="purchase-notice-close"
      class="slip-close"
      aria-label="Dismiss"
      @click="economyStore.clearPurchaseNotice()"
    >
      <CodexMark name="close" size="13px" />
    </button>
  </div>
  <!-- Blocked-dispatch banner: a moderation block refunds the turn and keeps
       the player's words. Fixed over the desk so the block is unmissable from
       any leaf and never shifts the codex. -->
  <div
    v-if="gameStore.moderationNotice"
    data-testid="moderation-alert"
    role="alert"
    aria-live="assertive"
    class="desk-slip blocked-banner"
  >
    <span class="bb-tag"
      ><CodexMark name="notabene" size="13px" /> blocked</span
    >
    <span class="bb-text"
      >{{ gameStore.moderationNotice }}
      <span class="bb-hint"
        >Your words are kept — edit and send again.</span
      ></span
    >
    <button
      type="button"
      data-testid="moderation-close"
      class="slip-close"
      aria-label="Dismiss"
      @click="gameStore.clearModerationNotice()"
    >
      <CodexMark name="close" size="13px" />
    </button>
  </div>
69 
  <div class="codex">
    <!-- The running head — the page's own head band (hidden during the End
         takeover, which carries its own verdict heading). The utilities sit
         at the outer corner as quiet margin marks: the app annotates the
         page's margin, it never prints on the page. -->
    <header v-if="conductor.phase.value !== 'end'" class="running-head-band">
      <div class="running-head">
        <span class="rh-left"><GameTitle /></span>
        <span class="rh-centre">
          <ObjectiveDisplay v-if="gameStore.currentObjective" />
        </span>
        <span class="rh-rail">
          <RunsBalance class="shrink-0" />
          <button
            type="button"
            class="margin-mark"
            :class="{ on: recordOpen }"
            data-testid="codex-record-toggle"
            title="The record"
            aria-label="Open the record"
            @click="toggleRecord"
          >
            <CodexMark name="bookmark" size="15px" /><span
              class="mark-word"
              aria-hidden="true"
              >record</span
            >
          </button>
          <button
            type="button"
            class="margin-mark"
            :class="{ muted: audio.muted }"
            data-testid="mute-toggle"
            :aria-pressed="!audio.muted"
            :title="audio.muted ? 'Sound off' : 'Sound on'"
            :aria-label="
              audio.muted ? 'Unmute sound effects' : 'Mute sound effects'
            "
            @click="toggleMute"
          >
            <CodexMark name="note" size="15px" />
          </button>
          <button
            type="button"
            class="margin-mark"
            :aria-label="
              isDark ? 'Switch to light mode' : 'Switch to dark mode'
            "
            :title="isDark ? 'Daylight' : 'Candlelight'"
            @click="toggleDark"
          >
            <CodexMark name="candle" size="15px" />
          </button>
          <template v-if="gameStore.currentObjective">
            <span v-if="resetArmed" class="reset-confirm">
              <span class="rc-ask">abandon this history?</span>
              <button
                type="button"
                class="margin-mark rc-yes"
                data-testid="reset-confirm"
                aria-label="Yes — abandon this history"
                @click="performReset"
              >
                yes
              </button>
              <button
                type="button"
                class="margin-mark"
                data-testid="reset-cancel"
                aria-label="Keep playing"
                @click="disarmReset"
              >
                no
              </button>
            </span>
            <button
              v-else
              type="button"
              class="margin-mark"
              data-testid="reset-button"
              title="New timeline"
              aria-label="New timeline"
              @click="handleReset"
            >
              <CodexMark name="reset" size="15px" />
            </button>
          </template>
        </span>
      </div>
      <div class="headpiece" aria-hidden="true">
        <svg viewBox="0 0 1000 14" preserveAspectRatio="none">
          <line
            x1="0"
            y1="4"
            x2="452"
            y2="4"
            stroke="currentColor"
            stroke-width="1"
          />
          <line
            x1="548"
            y1="4"
            x2="1000"
            y2="4"
            stroke="currentColor"
            stroke-width="1"
          />
          <line
            x1="0"
            y1="8"
            x2="452"
            y2="8"
            stroke="currentColor"
            stroke-width=".5"
            opacity=".6"
          />
          <line
            x1="548"
            y1="8"
            x2="1000"
            y2="8"
            stroke="currentColor"
            stroke-width=".5"
            opacity=".6"
          />
          <g
            class="hp-fleuron"
            fill="currentColor"
            transform="translate(500,6)"
          >
            <path d="M0,-6 C4,-2.5 4,2.5 0,6 C-4,2.5 -4,-2.5 0,-6 Z" />
            <path
              d="M-16,0 C-13,-2 -11,-2 -8,0 C-11,2 -13,2 -16,0 Z"
              opacity=".8"
            />
            <path d="M16,0 C13,-2 11,-2 8,0 C11,2 13,2 16,0 Z" opacity=".8" />
          </g>
        </svg>
      </div>
    </header>
210 
    <!-- The ribbon bookmark — the run's one persistent instrument: five
         dispatch pips and the timeline figure, a silk ribbon over the leaf. -->
    <div
      v-if="conductor.phase.value !== 'end' && gameStore.currentObjective"
      class="ribbon"
      :class="trackClass"
      :title="needLine"
    >
      <span
        class="ribbon-pips"
        data-testid="messages-counter"
        aria-hidden="true"
      >
        <span
          v-for="i in TOTAL_MESSAGES"
          :key="i"
          class="pip"
          :class="{ spent: i <= spent }"
        />
      </span>
      <span class="ribbon-pct" data-testid="masthead-progress"
        >{{ Math.round(gameStore.objectiveProgress) }}%</span
      >
    </div>
235 
    <!-- The leaf stage — pages turn with a quick settle (within-turn reveal
         beats) or a 3D page-turn (a new page begins). -->
    <div id="stage" class="stage" @click="onStageClick">
      <Transition :name="transitionName">
        <KeepAlive :include="['LeafDispatch']">
          <component
            :is="currentLeaf"
            v-if="conductor.phase.value !== 'end'"
            :key="conductor.phase.value"
          />
        </KeepAlive>
      </Transition>
      <EndGameScreen
        v-if="conductor.phase.value === 'end'"
        @play-again="performReset"
      />
      <RecordOverlay :open="recordOpen" @close="recordOpen = false" />
      <!-- a11y: a polite live region narrates each reveal beat. -->
      <div class="sr-only" role="status" aria-live="polite">
        {{ announce }}
      </div>
    </div>
258 
    <!-- The turnline — the explicit-continue model as the book's own verb.
         Tap-anywhere + arrow/Enter stay as accelerators. -->
    <div v-if="isRevealLeaf && !recordOpen" class="turnline">
      <button
        v-if="conductor.canBack.value"
        type="button"
        class="cx-action cx-action--quiet"
        data-testid="codex-back"
        @click="conductor.back()"
      >
        ‹ the leaf before
      </button>
      <span v-else aria-hidden="true" />
      <button
        type="button"
        class="cx-action turn-next"
        data-testid="codex-continue"
        @click="conductor.advance()"
      >
        {{ continueLabel }} ›
      </button>
    </div>
    <!-- The page's own corner, curling under the turnline. -->
    <div
      v-if="isRevealLeaf && !recordOpen"
      class="page-corner"
      aria-hidden="true"
    >
      <svg viewBox="0 0 88 88">
        <defs>
          <!-- the curled-back face by candlelight: paper-hi catching the
               lamp, sinking slightly toward the fold (dark only — light
               keeps the flat paper-lo underside via .pc-fill) -->
          <linearGradient id="pc-face" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" class="pc-stop-fold" />
            <stop offset="1" class="pc-stop-corner" />
          </linearGradient>
        </defs>
        <path d="M0 88 L88 88 L88 0 C60 8 20 40 0 88 Z" class="pc-fill" />
        <path
          d="M88 88 L88 0 C60 8 20 40 0 88 Z"
          fill="none"
          class="pc-edge"
          stroke-width="1"
        />
      </svg>
    </div>
  </div>
307 
  <!-- Persistent AI/fiction/adults-only disclosure — printed on the desk,
       never on the page. Present on every viewport during a run. -->
  <p
    v-if="gameStore.currentObjective && conductor.phase.value !== 'end'"
    data-testid="footer-disclosure"
    class="desk-disclosure"
  >
    Figures are AI, not real people · replies are AI-generated fiction, not
    historical fact · for adults (18+)
  </p>
318 
  <SiteFooter variant="desk" full />
320 
  <!-- Fixed-position overlays — mounted at the desk level (OUTSIDE the
       overflow-hidden codex, which would clip them). -->
  <RunPacksModal />
  <ClientOnly><FictionNotice /></ClientOnly>
  <ClientOnly><CoachMark /></ClientOnly>
  <ClientOnly><DevPanel /></ClientOnly>
</div>
328</template>
329 
330<script setup lang="ts">
331import { ref, computed, onMounted, onUnmounted, watch } from "vue";
332import { useGameStore } from "~/stores/game";
333import { useChronicleStore } from "~/stores/chronicle";
334import { useEconomyStore } from "~/stores/economy";
335import { useAudioStore } from "~/stores/audio";
336import { useCoachingStore } from "~/stores/coaching";
337import { useLegalStore } from "~/stores/legal";
338import { useGameSoundscape } from "~/composables/useGameSoundscape";
339import {
useCodexConductor,
CODEX_CONDUCTOR,
342} from "~/composables/useCodexConductor";
343import { CODEX_SOUNDSCAPE } from "~/components/codex/keys";
344import { TOTAL_MESSAGES, MAX_PROGRESS } from "~/utils/game-config";
345import {
readAuthReturnParams,
hasAuthReturn,
finalizeAuthReturn,
349} from "~/utils/auth-return";
350import LeafMission from "~/components/codex/LeafMission.vue";
351import LeafDispatch from "~/components/codex/LeafDispatch.vue";
352import LeafSending from "~/components/codex/LeafSending.vue";
353import LeafJudgment from "~/components/codex/LeafJudgment.vue";
354import LeafDice from "~/components/codex/LeafDice.vue";
355import LeafReply from "~/components/codex/LeafReply.vue";
356import LeafRipple from "~/components/codex/LeafRipple.vue";
357import LeafChronicle from "~/components/codex/LeafChronicle.vue";
358import RecordOverlay from "~/components/codex/RecordOverlay.vue";
359 
360const gameStore = useGameStore();
361const chronicleStore = useChronicleStore();
362const economyStore = useEconomyStore();
363const audio = useAudioStore();
364const soundscape = useGameSoundscape(); // mounted ONCE here — the store-bridge cues
365const conductor = useCodexConductor();
366 
367// Share the conductor + soundscape down to the leaves.
368provide(CODEX_CONDUCTOR, conductor);
369provide(CODEX_SOUNDSCAPE, soundscape);
370 
371const LEAVES = {
mission: LeafMission,
dispatch: LeafDispatch,
sending: LeafSending,
judgment: LeafJudgment,
dice: LeafDice,
reply: LeafReply,
ripple: LeafRipple,
chronicle: LeafChronicle,
380} as const;
381const currentLeaf = computed(
() => LEAVES[conductor.phase.value as keyof typeof LEAVES] ?? null,
383);
384 
385// Leaf transition: a quick settle for the within-turn reveal beats, a 3D page-turn
386// when a NEW page begins (mission/chronicle → dispatch, end → mission). flush:'pre'
387// sets the name before <Transition> reads it for the pending phase change.
388const transitionName = ref<"codex-leaf" | "codex-turn">("codex-leaf");
389watch(
() => conductor.phase.value,
(to, from) => {
  const boundary =
    (to === "dispatch" && (from === "mission" || from === "chronicle")) ||
    to === "mission";
  transitionName.value = boundary ? "codex-turn" : "codex-leaf";
},
{ flush: "pre" },
398);
399 
400const spent = computed(() => TOTAL_MESSAGES - gameStore.remainingMessages);
401const trackClass = computed(() => {
const p = gameStore.objectiveProgress;
return p >= MAX_PROGRESS ? "win" : p >= 75 ? "brink" : "";
404});
405const needLine = computed(() => {
const p = Math.round(gameStore.objectiveProgress);
return p >= 100
  ? "history rewritten"
  : p === 0
    ? "a history unwritten"
    : `need +${100 - p}% to win`;
412});
413 
414// ── The record overlay ────────────────────────────────────────────────────
415const recordOpen = ref(false);
416function toggleRecord() {
recordOpen.value = !recordOpen.value;
418}
419 
420// A tap anywhere on a reveal leaf turns the page (skips the dwell). Not while the
421// record is open, not on the compose/mission/end pages, and never when the tap
422// landed on a control (so buttons/inputs still work).
423function onStageClick(e: MouseEvent) {
if (recordOpen.value) return;
const p = conductor.phase.value;
if (p === "dispatch" || p === "mission" || p === "sending" || p === "end")
  return;
const t = e.target as HTMLElement;
if (t.closest('button, a, input, textarea, select, summary, [role="button"]'))
  return;
// Selecting prose to copy ends in a click on the stage when the drag is released —
// don't read that release as a page-turn. A non-collapsed selection means the player
// is highlighting (the reply, the chronicle, the ripple), not asking to advance.
const sel = typeof window !== "undefined" ? window.getSelection() : null;
if (sel && !sel.isCollapsed && sel.toString().trim()) return;
conductor.advance();
437}
438 
439// ── Reveal a11y: keyboard parity + screen-reader announcements ─────────────
440const REVEAL_LEAVES = ["judgment", "dice", "reply", "ripple", "chronicle"];
441const isRevealLeaf = computed(() =>
REVEAL_LEAVES.includes(conductor.phase.value),
443);
444// The reveal pages own the bottom of the screen with the Continue/Back footer. Flag
445// the body while one shows so the shared CoachMark keeps its card clear of that
446// footer (else its bottom-anchored fallback covers the primary Continue control).
447watch(
isRevealLeaf,
(v) => {
  if (typeof document !== "undefined")
    document.body.classList.toggle("codex-reveal", v);
},
{ immediate: true },
454);
455// The Continue affordance hands the pen back on the last reveal page of a turn.
456// The codex verb ("Turn the leaf"), not web chrome ("Continue") — the chronicle
457// boundary keeps "Next dispatch".
458const continueLabel = computed(() =>
conductor.phase.value === "chronicle" ? "Next dispatch" : "Turn the leaf",
460);
461// This turn's resolved AI message (held in pendingTurn during the animated
462// reveal, else the latest committed one) — the source for the announcements.
463const turnMsg = computed(() => gameStore.revealMessage);
464// A polite live region narrates each reveal beat so a screen-reader user follows
465// the auto-advancing flow without watching the animation.
466const announce = computed(() => {
const p = conductor.phase.value;
const m = turnMsg.value;
const node = gameStore.timelineEvents[gameStore.timelineEvents.length - 1];
if (p === "judgment" && m?.craft)
  return `The Judge grades your craft: ${m.craft}${m.rollModifier ? `, ${m.rollModifier > 0 ? "+" : ""}${m.rollModifier} to the roll of fate` : ""}.`;
if (p === "dice" && m?.diceRoll != null)
  return `The dice of fate land on ${m.diceRoll}: ${m.diceOutcome}.`;
if (p === "reply" && m) return `${m.figureName || "History"} answers.`;
if (p === "ripple" && node)
  return `History bends. ${node.headline} ${node.progressChange >= 0 ? "Up" : "Down"} ${Math.abs(node.progressChange)} percent — now ${Math.round(gameStore.objectiveProgress)} percent toward the objective.`;
if (p === "chronicle")
  return chronicleStore.chronicle
    ? `The history, retold: ${chronicleStore.chronicle.title}.`
    : "The history is being retold.";
if (p === "end")
  return gameStore.gameStatus === "victory"
    ? "History rewritten — victory."
    : "The run is over.";
return "";
486});
487 
488// Keyboard parity for tap-to-advance: → / Enter / Space turn a reveal page;
489// Escape closes the record. Never hijack a key while a control or the composer
490// holds focus (so typing + buttons keep working).
491function onKeydown(e: KeyboardEvent) {
if (recordOpen.value) {
  if (e.key === "Escape") {
    recordOpen.value = false;
    e.preventDefault();
  }
  return;
}
if (!isRevealLeaf.value) return;
const ae = document.activeElement as HTMLElement | null;
if (
  ae &&
  ae.closest(
    'input, textarea, select, button, a, summary, [role="button"], [contenteditable="true"]',
  )
)
  return;
if (
  e.key === "ArrowRight" ||
  e.key === "Enter" ||
  e.key === " " ||
  e.key === "Spacebar"
) {
  e.preventDefault();
  conductor.advance();
}
517}
518onMounted(() => window.addEventListener("keydown", onKeydown));
519onUnmounted(() => {
window.removeEventListener("keydown", onKeydown);
if (typeof document !== "undefined")
  document.body.classList.remove("codex-reveal");
523});
524 
525// ── Controls (ported from play.vue) ───────────────────────────────────────
526const colorMode = useColorMode();
527const isDark = computed(() => colorMode.value === "dark");
528function toggleDark() {
colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
530}
531 
532function toggleMute() {
audio.toggleMute();
if (!audio.muted) {
  soundscape.unlock();
  soundscape.play("uiTick");
}
538}
539 
540// New-timeline reset: two-step confirm once a run is underway, one tap when there's
541// nothing to lose. resetGame bumps the epoch → the conductor snaps back to mission.
542const resetArmed = ref(false);
543let resetTimer: ReturnType<typeof setTimeout> | null = null;
544function handleReset() {
// One tap only when there's nothing to lose: no resolved turns AND no contact
// chosen (a typed first dispatch is work too — a chosen figure marks it dirty).
const composerDirty = !!gameStore.activeFigureName?.trim();
if (gameStore.timelineEvents.length === 0 && !composerDirty) {
  performReset();
  return;
}
resetArmed.value = true;
if (resetTimer) clearTimeout(resetTimer);
resetTimer = setTimeout(() => {
  resetArmed.value = false;
}, 3500);
557}
558function disarmReset() {
resetArmed.value = false;
if (resetTimer) clearTimeout(resetTimer);
561}
562function performReset() {
disarmReset();
recordOpen.value = false;
gameStore.resetGame();
566}
567 
568// ── Guided first run (issue #60) — adapted to the leaf flow ────────────────
569// The shell is the single orchestration site; the coaching store stays
570// game-agnostic. Beats anchor to live controls on the current leaf. The
571// roll-swing beat keys off the Dice leaf's ARRIVAL — `timelineEvents` now lands
572// later (at the Ripple leaf's commitRipple), so the old length-watch would skip
573// the dice anchor.
574const coaching = useCoachingStore();
575const legal = useLegalStore();
576const autoStartCtx = () => ({
hasObjective: !!gameStore.currentObjective,
isPlaying: gameStore.gameStatus === "playing",
isFirstTurn: gameStore.timelineEvents.length === 0,
580});
581const tourBaseTurns = ref(0);
582watch(
() => gameStore.currentObjective,
(obj) => {
  if (obj && !legal.shouldShowNotice) coaching.maybeAutoStart(autoStartCtx());
  else if (!obj) coaching.stop();
},
588);
589// The one-time fiction notice owns the first beat (#330): while it's up the tour
590// holds, and its dismissal re-offers the auto-start it deferred.
591watch(
() => legal.shouldShowNotice,
(show, was) => {
  if (was && !show) coaching.maybeAutoStart(autoStartCtx());
},
596);
597watch(
() => coaching.isRunning,
(running) => {
  if (running) tourBaseTurns.value = gameStore.timelineEvents.length;
},
602);
603// Picking who & when clears the first beat (a real grounded contact + a chosen year).
604watch(
() => !!gameStore.figureGrounding?.resolved && gameStore.contactWhen != null,
(ready) => {
  if (ready) coaching.advanceFrom("who-when");
},
609);
610// The roll & swing beat fires when the Dice leaf is reached.
611watch(
() => conductor.phase.value,
(p) => {
  if (coaching.isRunning && (p === "dice" || p === "ripple"))
    coaching.advanceTo("roll-swing");
},
617);
618// A second resolved turn means the loop has plainly landed — an overstaying tour bows out.
619watch(
() => gameStore.timelineEvents.length,
(n) => {
  if (coaching.isRunning && n >= tourBaseTurns.value + 2) coaching.complete();
},
624);
625 
626// ── Run lifecycle (ported from play.vue) ──────────────────────────────────
627const route = useRoute();
628const router = useRouter();
629const supabase = useSupabaseClient();
630// Readable companion to the httpOnly ew_ref marker — grabbed in setup (a Nuxt composable
631// can't be called after an await in onMounted). Non-empty ⇒ a referral claim is pending.
632const referralPending = useCookie<string | null>("ew_ref_pending");
633onMounted(async () => {
audio.hydrate();
coaching.hydrate();
legal.hydrate();
const authReturn = readAuthReturnParams(route.query);
if (hasAuthReturn(authReturn)) {
  const result = await finalizeAuthReturn(authReturn, {
    settle: async () => {
      const { data } = await supabase.auth.getSession();
      return Boolean(data.session && !data.session.user.is_anonymous);
    },
  });
  if (result.status === "error") {
    console.warn(
      "[auth] sign-in link could not be finalized:",
      authReturn.error,
      authReturn.errorDescription,
    );
  }
  // A signed-in result needs no special-case claim here: the unified self-healing
  // referral claim below fires for any pending referral once the balance load confirms a
  // non-anonymous session.
  await economyStore.loadBalance();
  router.replace({ query: {} });
} else {
  const purchase = route.query.purchase;
  if (purchase === "success" || purchase === "cancel") {
    await economyStore.notePurchaseReturn(purchase);
    router.replace({ query: {} });
    if (purchase === "success") {
      const before = economyStore.runsRemaining;
      for (let i = 0; i < 4; i++) {
        await new Promise((r) => setTimeout(r, 1500));
        await economyStore.loadBalance();
        if (economyStore.runsRemaining !== before) break;
      }
    }
  } else {
    await economyStore.loadBalance();
  }
}
674 
// Self-healing referral claim (#96): a referred visitor's marker is claimed once they're
// signed in. Fire whenever a claim is still pending — the readable hint the /r/ middleware
// set beside the httpOnly marker (REFERRAL_PENDING_HINT / "ew_ref_pending") — and the
// session is non-anonymous, so a transient failure or a tab closed mid-flow simply retries
// on the next /play load rather than stranding the referee's welcome bonus. Idempotent
// server-side; the hint clears once the claim reaches a terminal outcome.
if (!economyStore.accountAnonymous && referralPending.value) {
  await economyStore.claimReferral();
  await economyStore.loadBalance();
}
// Flush a clickwrap tick parked across the OAuth redirect (#330) — only once a
// non-anonymous session exists, so the record keys on the final account id
// (email-less OAuth identities still flush). A failed or refused record keeps
// the tick parked for a retry later in this tab; the server refuses anonymous
// subjects, so a stale gate here can't record junk.
if (!economyStore.accountAnonymous) void legal.flushPendingAcceptance();
// Resume an in-progress run onto the first dispatch (the conductor lands there).
if (!gameStore.currentObjective) await gameStore.resumeDraft();
if (!legal.shouldShowNotice) coaching.maybeAutoStart(autoStartCtx());
694});
695 
696useHead({
title: "Everwhen — Rewrite History",
meta: [
  {
    name: "description",
    content:
      "Send 160-character messages to anyone in history. A D20 and an AI decide how the timeline bends.",
  },
],
705});
706</script>
707 
708<style scoped>
709/* ══ THE DESK — the environment the codex rests in ═══════════════════════ */
desk {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background: radial-gradient(
  120% 90% at 50% 38%,
  var(--ew-desk-hi),
  var(--ew-desk) 70%
);
723}
desk::after {
/* leather grain — procedural, pointer-transparent */
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.5;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>');
732}
733 
734/* ══ THE LEAF — a real folio with materials ══════════════════════════════ */
codex {
position: relative;
z-index: 1;
width: min(1180px, calc(100vw - 56px));
height: min(824px, calc(100vh - 96px));
display: flex;
flex-direction: column;
border-radius: 2px;
background: radial-gradient(
  140% 110% at 50% 30%,
  var(--ew-paper-hi),
  var(--ew-paper) 55%,
  var(--ew-paper-lo) 100%
);
/* the leaves beneath — the rest of the codex — then the desk's shadow
   (dark carries the candle glow; themed in the token, never a global rule) */
box-shadow: var(--ew-leaf-shadow);
752}
753/* laid-paper: fine laid lines + chain lines, then a fibrous mottle */
codex::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
border-radius: 2px;
background:
  repeating-linear-gradient(
    0deg,
    rgba(90, 70, 40, 0.028) 0 1px,
    transparent 1px 4px
  ),
  repeating-linear-gradient(
    90deg,
    rgba(90, 70, 40, 0.02) 0 1px,
    transparent 1px 88px
  );
mix-blend-mode: var(--ew-tex-blend);
opacity: var(--ew-tex-op-laid);
774}
codex::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: var(--ew-tex-op-mottle);
border-radius: 2px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="420" height="420"><filter id="m"><feTurbulence type="fractalNoise" baseFrequency="0.012 0.02" numOctaves="3" seed="7"/><feColorMatrix values="0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.14  0 0 0 0.06 0"/></filter><rect width="420" height="420" filter="url(%23m)"/></svg>');
mix-blend-mode: var(--ew-tex-blend);
785}
786 
⋯ 89 lines hidden (lines 787–875)787/* ══ THE RUNNING HEAD ════════════════════════════════════════════════════ */
running-head-band {
position: relative;
z-index: 3;
flex: none;
padding: 26px 64px 0;
793}
running-head {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
799}
rh-left {
justify-self: start;
802}
rh-centre {
justify-self: center;
min-width: 0;
806}
rh-rail {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 2px;
/* clear the ribbon hanging at the leaf's right edge */
padding-right: 64px;
814}
headpiece {
margin-top: 12px;
color: var(--ew-ink-faint);
818}
headpiece svg {
display: block;
width: 100%;
height: 14px;
823}
hp-fleuron {
color: var(--ew-rubric);
826}
827 
828/* the margin marks — the app annotating the page's outer margin */
margin-mark {
appearance: none;
background: none;
border: 0;
min-width: 34px;
min-height: 40px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
color: var(--ew-ink-faint);
font-family: var(--ew-serif);
font-size: var(--ew-fs-label);
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: color var(--ew-dur-1) var(--ew-ease);
847}
margin-mark:hover {
color: var(--ew-ink);
850}
margin-mark.on {
color: var(--ew-rubric);
853}
margin-mark.muted {
opacity: 0.55;
856}
mark-word {
display: inline-block;
859}
reset-confirm {
display: inline-flex;
align-items: center;
gap: 2px;
864}
rc-ask {
font-style: italic;
font-size: var(--ew-fs-note);
color: var(--ew-rubric);
margin-right: 4px;
white-space: nowrap;
871}
rc-yes {
color: var(--ew-rubric);
874}
875 
876/* ══ THE RIBBON ══════════════════════════════════════════════════════════ */
ribbon {
position: absolute;
top: -8px;
right: 24px;
z-index: 4;
width: 42px;
padding: 14px 0 0;
min-height: 118px;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
background: linear-gradient(
  180deg,
  var(--ew-wax-lo),
  var(--ew-wax) 30%,
  var(--ew-wax)
);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 14px), 0 100%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
897}
ribbon.win {
background: linear-gradient(180deg, #6d5312, var(--ew-gold) 40%, #8a6a16);
900}
ribbon-pips {
display: flex;
flex-direction: column;
gap: 7px;
905}
pip {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.4px solid rgba(255, 240, 220, 0.85);
background: transparent;
912}
pip.spent {
background: rgba(255, 240, 220, 0.9);
border-color: transparent;
916}
ribbon-pct {
font-family: var(--ew-mono);
font-size: 11px;
color: #ffe9d2;
padding-bottom: 20px;
922}
923 
924/* ══ THE STAGE ═══════════════════════════════════════════════════════════ */
stage {
position: relative;
flex: 1 1 auto;
min-height: 0;
perspective: 1600px;
z-index: 1;
931}
932 
⋯ 299 lines hidden (lines 933–1231)933/* ══ THE TURNLINE ════════════════════════════════════════════════════════ */
turnline {
position: relative;
z-index: 3;
flex: none;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 8px 110px 18px 64px;
942}
turn-next {
font-size: 14.5px;
945}
page-corner {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 84px;
height: 84px;
pointer-events: none;
954}
page-corner svg {
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(-3px -3px 4px rgba(0, 0, 0, 0.1));
960}
pc-fill {
fill: var(--ew-paper-lo);
963}
964/* In dark, paper-lo is near-black — the curl read as a hole burned in the
 leaf. Candlelit, the curled-back face catches the lamp instead: warmed
 paper-hi easing toward the fold, with a soft shadow beneath. */
dark .pc-fill {
fill: url(#pc-face);
969}
pc-stop-fold {
stop-color: color-mix(in srgb, var(--ew-paper-hi) 72%, var(--ew-paper));
972}
pc-stop-corner {
stop-color: var(--ew-paper-hi);
975}
dark .page-corner svg {
filter: drop-shadow(-4px -4px 6px rgba(0, 0, 0, 0.5));
978}
pc-edge {
stroke: var(--ew-rule);
981}
982 
983/* ══ DESK FURNITURE ══════════════════════════════════════════════════════ */
desk-disclosure {
order: 10;
margin: 2px 0 6px;
font-size: var(--ew-fs-label);
font-style: italic;
letter-spacing: 0.04em;
color: var(--ew-desk-ink);
opacity: 0.85;
white-space: nowrap;
993}
994 
995/* slips laid on the desk: purchase + moderation notices */
desk-slip {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
max-width: min(680px, calc(100vw - 24px));
padding: 10px 14px;
border-radius: 2px;
background: var(--ew-paper-hi);
color: var(--ew-ink);
font-size: var(--ew-fs-note);
box-shadow:
  0 1px 0 var(--ew-rule-feint) inset,
  0 10px 30px rgba(0, 0, 0, 0.4);
1014}
desk-slip.success .codex-mark {
color: var(--ew-ok);
1017}
blocked-banner {
border-left: 3px solid var(--ew-bad);
1020}
bb-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--ew-fs-label);
color: var(--ew-bad);
flex: none;
1031}
bb-text {
min-width: 0;
1034}
bb-hint {
display: block;
font-style: italic;
color: var(--ew-ink-quiet);
font-size: var(--ew-fs-label);
margin-top: 2px;
1041}
slip-close {
appearance: none;
background: none;
border: 0;
margin-left: auto;
color: var(--ew-ink-faint);
cursor: pointer;
min-width: 34px;
min-height: 34px;
display: grid;
place-items: center;
1053}
slip-close:hover {
color: var(--ew-ink);
1056}
1057 
1058/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */
1059@media (max-width: 1023px) {
.running-head-band {
  padding: 20px 28px 0;
}
/* The tablet band's real recipe: the centre takes exactly the leftover
   width (minmax(0,1fr)) and its title truncates — the base auto track
   grows to max-content and overprinted the wordmark and the rail. */
.running-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.rh-centre {
  justify-self: stretch;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.turnline {
  padding: 8px 96px 14px 28px;
}
.mark-word {
  display: none;
}
1081}
1082@media (max-width: 640px) {
/* the leaf IS the screen */
.desk {
  display: block;
}
.codex {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}
.running-head-band {
  padding: max(10px, env(safe-area-inset-top)) 16px 0;
}
.running-head {
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.rh-centre {
  display: none;
}
.rh-rail {
  padding-right: 48px;
}
.ribbon {
  right: 12px;
  top: -6px;
  width: 34px;
  min-height: 96px;
  padding-top: 10px;
  gap: 5px;
}
.pip {
  width: 6px;
  height: 6px;
}
.ribbon-pct {
  font-size: 10px;
  padding-bottom: 16px;
}
.turnline {
  padding: 6px 84px 12px 16px;
}
.page-corner {
  width: 64px;
  height: 64px;
}
.desk-disclosure {
  position: static;
  transform: none;
  order: 9;
  text-align: center;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: var(--ew-desk);
  width: 100%;
  white-space: normal;
  line-height: 1.4;
}
1141}
1142 
1143/* ══ REDUCED MOTION ══════════════════════════════════════════════════════ */
1144@media (prefers-reduced-motion: reduce) {
.margin-mark,
.cx-action {
  transition: none;
}
1149}
1150</style>
1151 
1152<style>
1153/* settle — within-turn reveal beats (III→VII): a quick fade + lift cross-fade.
 Overlapping (never mode=out-in, which would add a wait); both leaves go absolute
 during the swap so they cross-fade in place. */
codex-leaf-enter-active,
codex-leaf-leave-active {
position: absolute;
inset: 0;
1160}
1161/* Leaving leaves keep their entrance animation UNTOUCHED: Vue timed the leave
 on that animation's end event — silencing it stalls the page-turn forever.
 The e2e walk guards against the crossfade window by class, and the old page
 merely loses hit-testing while it exits. */
codex-leaf-leave-active,
codex-turn-leave-active {
pointer-events: none;
1168}
codex-leaf-enter-active {
transition:
  opacity var(--ew-dur-2) var(--ew-ease),
  transform var(--ew-dur-2) var(--ew-ease);
1173}
codex-leaf-leave-active {
transition:
  opacity var(--ew-dur-1) var(--ew-ease),
  transform var(--ew-dur-1) var(--ew-ease);
1178}
codex-leaf-enter-from {
opacity: 0;
transform: translateY(10px) scale(0.994);
1182}
codex-leaf-leave-to {
opacity: 0;
transform: translateY(-8px) scale(0.99);
1186}
1187 
1188/* page-turn — a NEW page begins: the outgoing leaf turns away around the spine
 while the fresh page settles in. */
codex-turn-enter-active,
codex-turn-leave-active {
position: absolute;
inset: 0;
transform-origin: left center;
backface-visibility: hidden;
1196}
codex-turn-leave-active {
transition:
  transform 560ms var(--ew-ease),
  opacity 560ms var(--ew-ease);
box-shadow: 40px 0 60px -20px rgba(20, 12, 4, 0.45);
1202}
codex-turn-leave-to {
transform: rotateY(-110deg);
opacity: 0.2;
1206}
codex-turn-enter-active {
transition:
  opacity 380ms var(--ew-ease) 150ms,
  transform 380ms var(--ew-ease) 150ms;
1211}
codex-turn-enter-from {
opacity: 0;
transform: translateY(8px);
1215}
1216 
1217@media (prefers-reduced-motion: reduce) {
.codex-leaf-enter-active,
.codex-leaf-leave-active,
.codex-turn-enter-active,
.codex-turn-leave-active {
  transition: opacity 120ms linear !important;
}
.codex-leaf-enter-from,
.codex-leaf-leave-to,
.codex-turn-enter-from,
.codex-turn-leave-to {
  transform: none !important;
}
1230}
1231</style>

The dispatch — a letter with a scholarly margin

The compose screen is letter anatomy: an ordinal salute, the addressee in rubric with dagger footnote marks that tie to the wager and chain glosses in a true margin column, writing on ruled lines, and a letterfoot where a matte pressed-wax seal sits on its pressed ring. The address fold keeps its auto-collapse mechanics; the ink instrument in the margin drains as the player writes (character-counter still lives there for the tests). The stake, when offered, is an ember gloss whose arming lights the seal's staked ring.

The letterhead fold and the seal station.

components/codex/LeafDispatch.vue · 1100 lines

components/codex/LeafDispatch.vue1100 lines · Vue

⋯ 5 lines hidden (lines 1–5)1<template>
<LeafFrame numeral="I" name="Your dispatch">
  <!-- The folio scoped per dispatch ("… · dispatch ii") — the leaf-within-turn
       ordinal alone contradicted the salute from turn 2 on. -->
  <template #sub>dispatch {{ dispatchRoman }}</template>
  <div class="dispatch">
    <div class="spread">
      <div class="textblock">
        <p class="salute">{{ saluteLine }}</p>
10 
        <details
          class="address"
          :open="addressOpen"
          @toggle="onAddressToggle"
        >
          <summary class="letterhead" data-testid="address-toggle">
            <span class="addr-line">
              <span class="addr-to">To</span>
              <span class="addr-name" :class="{ unset: !addresseeName }">{{
                addresseeName || "whom in history?"
              }}</span
              ><template v-if="addresseeName"
                ><span class="cx-fnmark" aria-hidden="true">†</span
                ><span v-if="chainRead" class="cx-fnmark" aria-hidden="true"
                  >‡</span
                ></template
              >
            </span>
            <span class="addr-bio">
              <template v-if="bioDescription"
                >{{ bioDescription }} ·
              </template>
              <span class="lh-date" :class="{ nudge: nudgeAddress }">
                <span class="lh-year" :class="{ unset: !dateline }">{{
                  dateline || "in what year?"
                }}</span
                ><span v-if="contactAge != null" class="lh-age">
                  · age {{ contactAge }}</span
                >
              </span>
            </span>
            <!-- While the fold is open the inputs are the invitation — no
                 completion verb over empty fields; the closed letterhead
                 keeps its quiet reopen cue. -->
            <span
              v-if="!addressOpen"
              class="addr-edit cx-action"
              aria-hidden="true"
            >
              <CodexMark name="quill" size="12px" />
              change the addressee
            </span>
          </summary>
          <div class="address-body">
            <FigurePicker
              v-model="figure"
              :disabled="!gameStore.canSendMessage"
            />
            <!-- The concluding action, after the fields it concludes — shown
                 only once addressee + year hold values. -->
⋯ 21 lines hidden (lines 61–81)61              <button
              v-if="addressed"
              type="button"
              class="addr-done cx-action"
              @click="closeAddress"
            >
              <CodexMark name="quill" size="12px" />
              done addressing
            </button>
          </div>
        </details>
72 
        <div class="writing-block">
          <p v-if="salutation" class="salutation">{{ salutation }}</p>
          <MessageInput ref="messageInputRef" />
        </div>
77 
        <div class="letterfoot">
          <p class="valediction">
            Press the seal to send — one message can bend the whole timeline
            <span class="vale-register"
              >Wax, once cooled, cannot be unpressed.</span
            >
          </p>
          <div class="seal-station">
            <button
              type="button"
              data-testid="send-button"
              class="seal-btn"
              :class="{ staked: stakeArmed, sending: gameStore.isLoading }"
              :disabled="sealDisabled"
              aria-label="Send message"
              @click="onSeal"
            >
              <span class="seal-wax"><CodexSeal class="seal-face" /></span>
              <span class="seal-word cx-caps cx-caps--small">{{
                sealWord
              }}</span>
            </button>
          </div>
⋯ 1000 lines hidden (lines 101–1100)101          </div>
102 
        <div
          v-if="gameStore.error"
          data-testid="error-alert"
          role="status"
          aria-live="polite"
          class="notice ew-blocked"
        >
          <span class="ew-blocked-tag notice-tag"
            ><CodexMark name="notabene" size="12px" /> notice</span
          >
          <span class="notice-text">{{ gameStore.error }}</span>
          <button
            type="button"
            data-testid="error-close"
            class="dismiss"
            aria-label="Dismiss notice"
            @click="gameStore.setError(null)"
          >
            <CodexMark name="close" size="12px" />
          </button>
        </div>
        <!-- A content-moderation block is surfaced as a fixed top banner in the
             shell (pages/play.vue) — unmissable from any leaf — rather than a strip
             at the foot of this letter, where it was easy to miss after the page
             turned back. The composer keeps the player's words for the next try. -->
      </div>
129 
      <!-- The margin — the dagger apparatus: the † and ‡ on the addressee line
           resolve to these glosses; the archive and the ink instrument follow. -->
      <aside class="margin">
        <div
          v-if="wagerRead"
          data-testid="wager-chip"
          class="cx-gloss gloss"
          :class="wagerRead.tier === 'in-period' ? 'ew-muted' : 'ew-warn'"
        >
          <CodexMark name="dagger" size="13px" />
          {{ wagerRead.text }}
        </div>
        <div v-else data-testid="wager-line" class="cx-gloss gloss ew-warn">
          <CodexMark name="dagger" size="13px" />
          Reaching beyond their era widens the swing — gains gently, losses
          hard.
        </div>
147 
        <div
          v-if="chainRead"
          data-testid="chain-chip"
          class="cx-gloss gloss"
          :class="
            chainRead.tier === 'at-hinge'
              ? 'ew-ok'
              : chainRead.tier === 'diffuse'
                ? 'ew-warn'
                : 'ew-muted'
          "
        >
          <CodexMark name="double-dagger" size="13px" />
          {{ chainRead.text }}
        </div>
163 
        <div
          v-if="chainRead && chainRead.bonus > 1"
          data-testid="chain-bonus-chip"
          class="cx-gloss gloss ew-ok"
        >
          <CodexMark name="chain" size="13px" />
          {{ chainRead.bonusText }}
        </div>
172 
        <div
          v-if="gameStore.canStake"
          data-testid="stake-control"
          class="stake"
          :class="{ armed: stakeArmed }"
        >
          <input
            id="stake-toggle"
            v-model="stakeArmed"
            type="checkbox"
            class="stake-box"
          />
          <label for="stake-toggle" class="stake-label">
            <span class="stake-head"
              ><CodexMark name="flag" size="13px" /> Stake the timeline — the
              last stand</span
            >
            <span class="stake-body"
              >Your final swing
              <span class="stake-em">doubles, both ways</span>: a hit ≈
              {{ stakeRead?.hit }}, a miss ≈ {{ stakeRead?.miss }}. You need
              +{{ stakeRead?.need }}% to win.</span
            >
          </label>
        </div>
        <div
          v-else-if="finalReach"
          data-testid="final-reach"
          class="cx-gloss gloss"
        >
          <CodexMark name="manicule" size="13px" />
          <b>Final dispatch</b> — no stake needed: you need +{{
            finalReach.need
          }}%, still inside one dispatch’s reach.
        </div>
208 
        <hr class="gloss-rule" aria-hidden="true" />
210 
        <div class="archive">
          <button
            type="button"
            data-testid="archive-toggle"
            class="cx-action"
            :aria-expanded="lookupOpen ? 'true' : 'false'"
            @click="toggleLookup"
          >
            <CodexMark name="lens" size="14px" />
            {{ lookupOpen ? "Close the archive" : "Consult the archive" }}
          </button>
          <p v-if="!lookupOpen" class="archive-hint">
            look up an idea before you stake a message on it
          </p>
          <div v-else class="archive-inline">
            <ArchiveLookup bare />
          </div>
        </div>
229 
        <hr class="gloss-rule" aria-hidden="true" />
231 
        <div class="inkwell">
          <div class="ink-head">
            <span class="cx-caps cx-caps--small">Ink remaining</span>
            <span
              id="character-counter"
              data-testid="character-counter"
              class="cx-mono ink-n"
              :class="{ low: inkLow }"
              aria-live="polite"
              >{{ remainingCharacters }} of {{ MAX_MESSAGE_CHARS }}</span
            >
          </div>
          <div class="cx-inkrule" aria-hidden="true">
            <i :style="{ width: inkPercent + '%' }" />
          </div>
        </div>
      </aside>
    </div>
  </div>
</LeafFrame>
252</template>
253 
254<script setup lang="ts">
255/**
* I · Your dispatch — a LETTER on the page (the A1 composition): salute line
* (the ordinal, in fiction) → addressee in rubric with the †/‡ footnote marks →
* biographical line → the ruled writing area (ink on the page, never a form
* control) → valediction + the seal station over its pressed ring. The margin
* column is the dagger apparatus: the wager (†) and chain (‡) glosses, the
* stake as an ember gloss, the archive, and the INK REMAINING instrument
* (which carries the #character-counter the textarea describes itself by).
* Ports the compose mechanics whole — picker grounding, seal gating, stake,
* epoch-guard — and is kept alive across the reveal leaves (see the shell) so
* a blocked/failed send returns here with the words intact.
*/
267import {
ref,
computed,
watch,
nextTick,
inject,
onMounted,
onActivated,
275} from "vue";
276import { useGameStore, formatContactYear } from "~/stores/game";
277import { useArchiveStore } from "~/stores/archive";
278import { CODEX_CONDUCTOR } from "~/composables/useCodexConductor";
279import { CODEX_SOUNDSCAPE } from "./keys";
280import { parseKnownSinceYear, wagerTier } from "~/utils/known-since";
281import { smarten, bindYearEra } from "~/utils/text";
282import { prefersReducedMotionNow } from "~/utils/prefers-reduced-motion";
283import { CHAIN_HINT } from "~/utils/causal-chain";
284import { ANACHRONISM_LABEL } from "~/utils/anachronism";
285import { SWING_BANDS, STAKE_MULTIPLIER } from "~/utils/swing-bands";
286import {
MAX_PROGRESS,
TOTAL_MESSAGES,
MAX_MESSAGE_CHARS,
290} from "~/utils/game-config";
291import { DiceOutcome } from "~/utils/dice";
292import LeafFrame from "./LeafFrame.vue";
293import CodexSeal from "./CodexSeal.vue";
294import CodexMark from "./CodexMark.vue";
295 
296defineOptions({ name: "LeafDispatch" });
297 
298const gameStore = useGameStore();
299const archiveStore = useArchiveStore();
300const conductor = inject(CODEX_CONDUCTOR)!;
301const soundscape = inject(CODEX_SOUNDSCAPE, null);
302 
303const figure = ref("");
304watch(figure, (name) => gameStore.setActiveFigure((name || "").trim()));
305 
306const messageInputRef = ref<{ message: string; isValid: boolean } | null>(null);
307const messageInputValid = computed(
() => messageInputRef.value?.isValid ?? false,
309);
310const canSend = computed(
() =>
  messageInputValid.value &&
  figure.value.trim().length > 0 &&
  gameStore.canContact,
315);
316 
317// The wax seal is the only send control (the e2e locates it by the 'Send message'
318// accessible name): disabled by messages-left / validation / contact, with a small
319// state word struck under the seal.
320const sealDisabled = computed(
() => !gameStore.canSendMessage || !canSend.value,
322);
323const sealWord = computed(() =>
gameStore.isRateLimited
  ? "wait"
  : gameStore.isLoading
    ? "sealing…"
    : "Seal & send",
329);
330 
331const dispatchOrdinal = computed(
() => TOTAL_MESSAGES - gameStore.remainingMessages + 1,
333);
334 
335// The folio's dispatch scope, in the folio's lowercase voice ("dispatch ii") —
336// fed to LeafFrame's sub slot so the leaf-within-turn folio line can't
337// contradict the salute ("The second of five dispatches…") from turn 2 on.
338const ROMAN_ORDINALS = ["i", "ii", "iii", "iv", "v", "vi", "vii"];
339const dispatchRoman = computed(
() =>
  ROMAN_ORDINALS[dispatchOrdinal.value - 1] ?? String(dispatchOrdinal.value),
342);
343 
344// The salute — the ordinal line above the address, in fiction. Words are derived
345// from the same constants the pips count, so the copy can never drift from the
346// mechanics ("The first of five dispatches…").
347const ORDINAL_WORDS = [
"first",
"second",
"third",
"fourth",
"fifth",
"sixth",
"seventh",
355];
356const COUNT_WORDS: Record<number, string> = {
3: "three",
4: "four",
5: "five",
6: "six",
7: "seven",
362};
363const saluteLine = computed(() => {
const ord =
  ORDINAL_WORDS[dispatchOrdinal.value - 1] ?? `${dispatchOrdinal.value}th`;
const total = COUNT_WORDS[TOTAL_MESSAGES] ?? String(TOTAL_MESSAGES);
return `The ${ord} of ${total} dispatches, to be carried backward through time —`;
368});
369 
370// --- The letterhead: addressee + biographical line, read from the same grounding
371// state the picker manages (display only — every mechanic computes off the store). ---
372// Model output is smartened at the render seam (straight apostrophes → ’); the
373// player's own typed fallback passes through untouched. Dateline years bind to
374// their era with a no-break space so "49 BC" can never split across a line.
375const addresseeName = computed(() =>
gameStore.figureGrounding?.resolved
  ? smarten(gameStore.figureGrounding.name)
  : figure.value.trim(),
379);
380const bioDescription = computed(() =>
gameStore.figureGrounding?.resolved
  ? smarten(gameStore.figureGrounding.description ?? "")
  : "",
384);
385const dateline = computed(() =>
gameStore.contactWhen != null
  ? bindYearEra(formatContactYear(gameStore.contactWhen))
  : "",
389);
390const contactAge = computed(() => gameStore.contactAge);
391// A soft salutation once a real recipient is grounded — the first name (or a mononym
392// whole). Pure letter flavor; absent until the letter is addressed.
393const salutation = computed(() => {
const g = gameStore.figureGrounding;
if (!g?.resolved || !g.name) return "";
const first = g.name.split(/\s+/)[0];
return first ? `Dear ${first},` : "";
398});
399 
400// The pre-send wager read (†): Archive known-since × chosen contact year → tier.
401const wagerRead = computed(() => {
const lookup = archiveStore.archiveResult;
const when = gameStore.contactWhen;
if (!lookup?.knownSince || when == null) return null;
const knownYear = parseKnownSinceYear(lookup.knownSince);
if (knownYear == null) return null;
const tier = wagerTier(knownYear, when);
const text =
  tier === "in-period"
    ? `${lookup.topic}: already known by ${formatContactYear(when)} — steady ground`
    : `${lookup.topic}: reads ≈ ${ANACHRONISM_LABEL[tier].toLowerCase()} for ${formatContactYear(when)} — a wider swing, losses harder than gains`;
return { tier, text: bindYearEra(smarten(text)) };
413});
414 
415// The pre-send chain reads (‡): the DECAY read (how far the moment lands from the
416// nearest foothold) and, when you have built a chain here, the BONUS read (how much
417// your prior nearby changes will compound this gain) — the reward twin, legible
418// before the roll.
419const chainRead = computed(() => {
const s = gameStore.causalChainRead;
if (!s) return null;
const bonus = s.bonus ?? 1;
const stones = s.depth ?? 0;
return {
  tier: s.tier,
  text: CHAIN_HINT[s.tier],
  bonus,
  bonusText: `chain ×${Number(bonus.toFixed(2))} — ${stones} ${stones === 1 ? "foothold" : "footholds"} compound your gain`,
};
430});
431 
432const stakeArmed = ref(false);
433watch(stakeArmed, (armed) => {
if (armed) soundscape?.play("stake");
435});
436 
437const fmtSwing = (b: { min: number; max: number }) =>
`${b.min >= 0 ? "+" : ""}${b.min}…${b.max >= 0 ? "+" : ""}${b.max}%`;
439const stakeRead = computed(() => {
if (!gameStore.canStake) return null;
const dbl = (n: number) => n * STAKE_MULTIPLIER;
return {
  need: MAX_PROGRESS - gameStore.objectiveProgress,
  hit: fmtSwing({
    min: dbl(SWING_BANDS[DiceOutcome.SUCCESS].min),
    max: dbl(SWING_BANDS[DiceOutcome.CRITICAL_SUCCESS].max),
  }),
  miss: fmtSwing({
    min: dbl(SWING_BANDS[DiceOutcome.CRITICAL_FAILURE].min),
    max: dbl(SWING_BANDS[DiceOutcome.FAILURE].max),
  }),
};
453});
454 
455const finalReach = computed(() => {
if (
  gameStore.gameStatus !== "playing" ||
  gameStore.remainingMessages !== 1 ||
  gameStore.canStake
)
  return null;
const need = MAX_PROGRESS - gameStore.objectiveProgress;
return need > 0 ? { need } : null;
464});
465 
466// --- The ink instrument: the letter's character budget, read from the composer's
467// exposed message and shown in the margin (label + inkrule + scribe-mono counter).
468// The rule holds the ink REMAINING — full inkwell fresh, draining as the player
469// writes — so the fill agrees with its label and counter. The counter carries
470// #character-counter, which the textarea's aria-describedby points at, so the
471// accessible wiring survives the move to the margin. ---
472const remainingCharacters = computed(
() => MAX_MESSAGE_CHARS - (messageInputRef.value?.message.length ?? 0),
474);
475const inkPercent = computed(() =>
Math.max(0, (remainingCharacters.value / MAX_MESSAGE_CHARS) * 100),
477);
478const inkLow = computed(() => remainingCharacters.value <= 20);
479 
480async function onSeal() {
const text = (messageInputRef.value?.message ?? "").trim();
const target = figure.value.trim();
if (
  !text ||
  !messageInputRef.value?.isValid ||
  !target ||
  !gameStore.canContact
)
  return;
// A blocked/failed send returns false; the conductor lands us back here and the
// composer keeps the words (we only clear on a real resolve).
const resolved = await conductor.seal(text, target, {
  stake: stakeArmed.value,
});
if (resolved) {
  stakeArmed.value = false;
  if (messageInputRef.value) messageInputRef.value.message = "";
  figure.value = "";
  resetAddress(); // next dispatch opens fresh on the letterhead
}
501}
502 
503// A new run / reset (epoch bump) wipes the composer; a failed send (no epoch bump)
504// keeps it.
505watch(
() => gameStore.runEpoch,
() => {
  figure.value = "";
  if (messageInputRef.value) messageInputRef.value.message = "";
  stakeArmed.value = false;
  resetAddress();
},
513);
514 
515// --- The address fold: open while you address the letter, then auto-collapses to
516// the letterhead once a contactable recipient + year is set, so attention moves to
517// the body. Manual toggling takes over (we stop auto-managing it for this dispatch).
518const addressOpen = ref(true);
519const addressTouched = ref(false);
520const autoCollapsed = ref(false);
521function onAddressToggle(e: Event) {
const open = (e.target as HTMLDetailsElement).open;
// A programmatic collapse (auto) also fires toggle — don't treat that as the user
// taking manual control. Only a divergence from our intended state is a real touch.
if (open !== addressOpen.value) addressTouched.value = true;
addressOpen.value = open;
527}
528function resetAddress() {
addressOpen.value = true;
addressTouched.value = false;
autoCollapsed.value = false;
532}
533// Auto-collapse once, when the letter becomes addressable (a contactable figure with
534// a year). Skipped if the player has taken manual control of the fold this dispatch.
535watch(
() => gameStore.canContact,
(ok) => {
  if (
    ok &&
    addressOpen.value &&
    !addressTouched.value &&
    !autoCollapsed.value
  ) {
    addressOpen.value = false;
    autoCollapsed.value = true;
    nextTick(() =>
      (
        document.querySelector(
          '[data-testid="message-input"] textarea',
        ) as HTMLElement | null
      )?.focus(),
    );
  }
},
555);
556 
557// A gentle "pick your moment" nudge. The year is auto-set to mid-lifetime when a
558// figure grounds, then the fold auto-collapses to the letterhead — so the dateline
559// can read as fixed decoration. While it sits at that untouched default, the year
560// inks itself in rubric on a slow breath, flagging that choosing a deliberate year
561// is the next step. It drops the instant the player opens the address fold (they've
562// found the when-control) and resets each dispatch via resetAddress().
563const nudgeAddress = computed(
() => autoCollapsed.value && !addressOpen.value && !addressTouched.value,
565);
566 
567// The explicit "done addressing" close, offered after the fields only once the
568// letter is actually addressed (a name + a year hold values) — a fresh open fold
569// shows no completion verb; the empty inputs are the invitation. Closing this way
570// is the player taking manual control, so the auto-collapse never fights it.
571const addressed = computed(() => !!addresseeName.value && !!dateline.value);
572function closeAddress() {
addressTouched.value = true;
addressOpen.value = false;
575}
576 
577// The Archive lookup unfolds inline beneath its action in the margin — the reach it
578// informs — collapsed by default so the letter body leads.
579const lookupOpen = ref(false);
580// On a phone (≤640) the margin folds beneath the letter, so the unfolded lookup
581// can land below the fold and the tap looks like a no-op — bring the field into
582// view and hand it the pen. Desktop's in-margin unfold stays put.
583function toggleLookup() {
lookupOpen.value = !lookupOpen.value;
if (!lookupOpen.value) return;
if (
  typeof window === "undefined" ||
  !window.matchMedia?.("(max-width: 640px)").matches
)
  return;
nextTick(() => {
  const field = document.querySelector(
    '[data-testid="lookup-input"]',
  ) as HTMLElement | null;
  if (!field) return;
  field.scrollIntoView?.({
    block: "center",
    behavior: prefersReducedMotionNow() ? "auto" : "smooth",
  });
  field.focus({ preventScroll: true });
});
602}
603 
604// Focus the recipient field when the dispatch leads with an unaddressed letterhead;
605// once addressed (fold collapsed), there's nothing to focus there.
606function focusFigure() {
if (!addressOpen.value) return;
nextTick(() =>
  (
    document.querySelector(
      '[data-testid="figure-input"]',
    ) as HTMLElement | null
  )?.focus(),
);
615}
616onMounted(focusFigure);
617onActivated(focusFigure);
618</script>
619 
620<style scoped>
621/* The letter scrolls inside the leaf when tall, never sideways (a lone
 overflow-y would make the browser compute overflow-x to auto, so pin it). */
dispatch {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
628}
629 
630/* The spread: one textblock + a true outer margin for the glosses. */
spread {
display: grid;
grid-template-columns: minmax(0, 1fr) 248px;
gap: 0 48px;
padding: 26px 6px 26px 88px;
636}
textblock {
max-width: 620px;
width: 100%;
min-width: 0;
641}
642 
643/* ── The letter opening ──────────────────────────────────────────────────── */
salute {
font-size: var(--ew-fs-body);
font-style: italic;
color: var(--ew-ink-quiet);
648}
649 
address {
margin-top: 6px;
min-width: 0;
653}
letterhead {
display: block;
cursor: pointer;
list-style: none;
user-select: none;
659}
letterhead::-webkit-details-marker {
display: none;
662}
letterhead::marker {
content: "";
665}
addr-line {
display: block;
line-height: 1.2;
669}
addr-to {
font-style: italic;
font-size: 19px;
color: var(--ew-ink-quiet);
margin-right: 8px;
675}
addr-name {
font-size: var(--ew-fs-title);
font-weight: 600;
color: var(--ew-rubric);
680}
addr-name.unset {
color: var(--ew-ink-faint);
font-style: italic;
font-weight: 400;
685}
addr-line .cx-fnmark {
font-size: 15px;
688}
addr-bio {
display: block;
margin-top: 5px;
font-size: var(--ew-fs-body);
font-style: italic;
color: var(--ew-ink-quiet);
695}
lh-year {
color: var(--ew-ink);
font-weight: 600;
font-style: normal;
/* the year reads as adjustable: a feint dotted underline in the paper */
text-decoration: underline dotted;
text-underline-offset: 3px;
text-decoration-color: var(--ew-rule);
704}
lh-year.unset {
color: var(--ew-ink-faint);
font-weight: 400;
font-style: italic;
text-decoration: none;
710}
lh-age {
color: var(--ew-ink-faint);
713}
letterhead:hover .lh-year:not(.unset) {
text-decoration-color: var(--ew-rubric);
716}
717/* The "pick your moment" nudge (nudgeAddress): while the year sits at its
 auto-picked default, it inks itself rubric on a slow breath — an invitation,
 not an alarm. Drops the instant the fold reopens. */
lh-date.nudge .lh-year {
animation: year-breathe 2.1s var(--ew-ease) infinite;
722}
723@keyframes year-breathe {
0%,
100% {
  color: var(--ew-ink);
  text-decoration-color: var(--ew-rule);
}
50% {
  color: var(--ew-rubric);
  text-decoration-color: var(--ew-rubric);
}
733}
addr-edit {
margin-top: 10px;
font-size: var(--ew-fs-label);
737}
letterhead:hover .addr-edit {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
742}
address-body {
padding: 14px 0 4px;
745}
addr-done {
margin-top: 12px;
font-size: var(--ew-fs-label);
749}
750 
751/* ── The writing — ink on ruled feints ───────────────────────────────────── */
writing-block {
margin-top: 34px;
754}
salutation {
font-size: 21px;
line-height: 44px;
color: var(--ew-ink);
759}
760 
761/* ── The letterfoot: valediction + the seal station ──────────────────────── */
letterfoot {
margin-top: 46px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
768}
valediction {
font-style: italic;
font-size: var(--ew-fs-body);
color: var(--ew-ink-faint);
max-width: 34ch;
line-height: 1.5;
775}
vale-register {
display: block;
margin-top: 4px;
779}
780 
seal-station {
position: relative;
text-align: center;
flex: none;
padding: 6px 12px 0;
786}
787/* the pressed ring where wax meets paper */
seal-station::before {
content: "";
position: absolute;
left: 50%;
top: 48px;
transform: translate(-50%, -50%);
width: 104px;
height: 104px;
border-radius: 50%;
box-shadow:
  inset 1px 2px 3px color-mix(in srgb, var(--ew-ink) 15%, transparent),
  inset -1px -1px 2px color-mix(in srgb, var(--ew-paper-hi) 85%, transparent);
pointer-events: none;
801}
802 
803/* The send control IS the wax seal. States — ready / disabled (dry wax) /
 sending (pulse) / staked (ember double ring). */
seal-btn {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 9px;
background: none;
border: 0;
padding: 2px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
816}
seal-wax {
width: 84px;
height: 84px;
border-radius: 50%;
display: grid;
place-items: center;
transform: rotate(-4deg);
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
transition:
  transform var(--ew-dur-1) var(--ew-ease-spring),
  filter var(--ew-dur-1) var(--ew-ease),
  box-shadow var(--ew-dur-1) var(--ew-ease);
829}
seal-face {
width: 100%;
height: 100%;
833}
seal-word {
color: var(--ew-ink-quiet);
transition: color var(--ew-dur-1) var(--ew-ease);
837}
seal-btn:not(:disabled):hover .seal-wax {
transform: rotate(-1deg) scale(1.04);
filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.32));
841}
seal-btn:not(:disabled):hover .seal-word {
color: var(--ew-rubric);
844}
seal-btn:not(:disabled):active .seal-wax {
transform: rotate(-3deg) translateY(1px) scale(0.94);
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
848}
seal-btn:disabled {
cursor: not-allowed;
851}
852/* Disabled = dry wax: re-inked to the faint ink, flat (filter:none also drops
 the drop shadow), relief quieted — never a sub-3:1 ghost. */
seal-btn:disabled .seal-wax {
--seal-fill: var(--ew-ink-faint);
--seal-shade: color-mix(in srgb, var(--ew-ink-faint) 70%, var(--ew-paper));
--seal-light: transparent;
filter: none;
859}
seal-btn:disabled .seal-word {
color: var(--ew-ink-faint);
862}
863/* Dark: dry wax sinks toward the candlelit page. ink-faint (#8d7f64) sits far
 BRIGHTER than dark paper, so the light-mode re-ink made the disabled seal
 outshine live wax — mix it ~35% into the paper instead, flat (shade = fill
 kills the relief), the state word staying ink-faint for text contrast.
 :not(.sending) keeps the sealing pulse's wax fill winning while disabled. */
dark .seal-btn:disabled:not(.sending) .seal-wax {
--seal-fill: color-mix(in srgb, var(--ew-ink-faint) 35%, var(--ew-paper));
--seal-shade: color-mix(in srgb, var(--ew-ink-faint) 35%, var(--ew-paper));
--seal-light: transparent;
872}
873/* Sealing wins over the disabled re-ink (same specificity, later in source). */
seal-btn.sending .seal-wax {
--seal-fill: var(--ew-wax);
animation: seal-pulse 1.1s var(--ew-ease) infinite;
877}
878/* The last stand, armed: the seal takes an ember double ring. */
seal-btn.staked .seal-wax {
box-shadow:
  0 0 0 2px var(--ew-paper),
  0 0 0 3.5px color-mix(in srgb, var(--ew-rubric) 75%, var(--ew-wax)),
  0 0 0 7px color-mix(in srgb, var(--ew-rubric) 22%, transparent),
  0 0 18px 5px color-mix(in srgb, var(--ew-rubric) 28%, transparent);
885}
886/* The seal's focus halo is its own pressed ring. */
seal-btn:focus-visible {
outline: none;
889}
seal-btn:focus-visible .seal-wax {
box-shadow:
  0 0 0 2px var(--ew-paper),
  0 0 0 4px var(--ew-rubric);
894}
895@keyframes seal-pulse {
0%,
100% {
  transform: rotate(-4deg) scale(1);
}
50% {
  transform: rotate(-4deg) scale(1.06);
}
903}
904 
905/* ── The notice — honest, marked nota bene ───────────────────────────────── */
notice {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 14px;
font-size: var(--ew-fs-note);
912}
notice-tag {
display: inline-flex;
align-items: center;
gap: 5px;
flex: none;
918}
notice-text {
min-width: 0;
color: var(--ew-ink-quiet);
922}
dismiss {
margin-left: auto;
background: none;
border: 0;
cursor: pointer;
color: var(--ew-ink-faint);
min-width: 34px;
min-height: 34px;
display: grid;
place-items: center;
933}
dismiss:hover {
color: var(--ew-ink);
936}
937 
938/* ── The margin — glosses, the stake, the archive, the ink instrument ────── */
margin {
min-width: 0;
padding-top: 10px;
942}
gloss {
margin-bottom: 22px;
945}
946/* Valence rides the marks, not the prose: the gloss text stays in the quiet
 margin ink; the e2e-visible ew-* classes tint only the drawn mark. */
margin .gloss.ew-ok,
margin .gloss.ew-warn,
margin .gloss.ew-muted {
color: var(--ew-ink-quiet);
952}
margin .gloss.ew-ok :deep(.codex-mark) {
color: var(--ew-ok);
955}
margin .gloss.ew-muted :deep(.codex-mark) {
color: var(--ew-ink-faint);
958}
gloss b {
font-style: normal;
font-weight: 600;
color: var(--ew-ink);
963}
gloss-rule {
border: 0;
border-top: 1px solid var(--ew-rule-feint);
margin: 18px 0;
968}
969 
970/* The stake — an ember gloss: wax-adjacent, rubric-ruled, never a form box. */
stake {
display: flex;
align-items: flex-start;
gap: 9px;
border-left: 2px solid var(--ew-rubric);
padding: 2px 0 2px 12px;
margin-bottom: 22px;
978}
stake-box {
margin-top: 3px;
accent-color: var(--ew-rubric);
982}
stake-label {
cursor: pointer;
font-size: var(--ew-fs-note);
line-height: 1.5;
987}
stake-head {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ew-serif);
font-size: var(--ew-fs-label);
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: var(--ew-rubric);
998}
stake-body {
display: block;
margin-top: 3px;
font-style: italic;
color: var(--ew-ink-quiet);
1004}
stake-em {
font-style: normal;
font-weight: 600;
color: var(--ew-rubric);
1009}
1010 
archive-hint {
margin: 5px 0 0 21px;
font-size: var(--ew-fs-note);
font-style: italic;
color: var(--ew-ink-faint);
line-height: 1.45;
1017}
archive-inline {
margin-top: 10px;
1020}
1021 
inkwell {
padding-bottom: 6px;
1024}
ink-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
1031}
ink-n {
font-size: 11.5px;
color: var(--ew-ink-faint);
1035}
ink-n.low {
color: var(--ew-rubric);
font-weight: 700;
1039}
1040 
1041/* ── Responsive: the gloss column narrows, then folds beneath the letter ─── */
1042@media (max-width: 1023px) {
.spread {
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 0 28px;
  padding: 16px 4px 20px 8px;
}
1048}
1049@media (max-width: 640px) {
.spread {
  display: block;
  padding: 10px 2px 20px;
}
.textblock {
  max-width: none;
}
.addr-name {
  font-size: 24px;
}
.writing-block {
  margin-top: 24px;
}
.letterfoot {
  margin-top: 30px;
}
.margin {
  border-top: 1px solid var(--ew-rule-feint);
  margin-top: 30px;
  padding-top: 18px;
}
1071}
1072@media (pointer: coarse) {
.salutation {
  font-size: 19px;
  line-height: 40px;
}
1077}
1078 
1079/* ── Reduced motion: the same information, at rest ───────────────────────── */
1080@media (prefers-reduced-motion: reduce) {
.seal-wax,
.seal-word {
  transition: none;
}
.seal-btn:not(:disabled):hover .seal-wax,
.seal-btn:not(:disabled):active .seal-wax {
  transform: rotate(-4deg);
}
.seal-btn.sending .seal-wax {
  animation: none;
}
/* No breathing — hold a static rubric emphasis on the year so the "pick a
   year" cue still reads, without animation. */
.lh-date.nudge .lh-year {
  animation: none;
  color: var(--ew-rubric);
  text-decoration-color: var(--ew-rubric);
}
1099}
1100</style>

History bends — the proclamation and the gauge

The climax leaf composes as one document: rubric kicker, drop-cap display headline, a rotated SEALED-AT stamp-mark, then the instruments. The swing gauge is the panel-endorsed steal from the competing 'bureau' direction, redrawn in page inks: loss and gain arcs with fine ticks, a rubric needle that sweeps from zero on a 900ms beat with an overshoot curve, a dotted trail, and the signed figure at display scale in valence ink. Beneath it, a hundred-mark ledger ruler carries the run's cumulative state, and the swing equation prints as a dagger footnote that reconciles (+18 · sharp ×1.2 → +22%) — or collapses to a plain statement when nothing scaled the turn.

The engraved dial: bands, ticks, needle, trail, and the valence figure.

components/codex/LeafRipple.vue · 953 lines

components/codex/LeafRipple.vue953 lines · Vue

⋯ 27 lines hidden (lines 1–27)1<template>
<LeafFrame numeral="VI" name="History bends">
  <div class="ripple-page" :style="`--reveal-after:${HEADLINE_TYPE_MS}ms`">
    <div class="entry">
      <div class="kicker cx-caps cx-caps--rubric cx-ink-in">
        The timeline is rewritten
      </div>
      <div class="headline" :class="{ inked: !!node }">
        <TypeOn
          v-if="node?.headline"
          :text="node.headline"
          :duration-ms="HEADLINE_TYPE_MS"
        />
        <span v-else class="weighing" data-testid="ripple-weighing">
          <span class="weighing-label">The timeline weighs your move</span>
          <span class="ink-dots" aria-hidden="true"><i /><i /><i /></span>
        </span>
      </div>
      <p v-if="node?.detail" class="detail">{{ node.detail }}</p>
      <div class="dateline" :class="{ landed }">
        <CodexSeal class="stamp" />
        <span class="stamp-mark"
          >Sealed at {{ node?.era }} — {{ node?.figureName }}</span
        >
      </div>
    </div>
27 
    <div class="gauge-col" :class="{ pending: !node, landed }">
      <div class="gauge">
        <svg class="dial" viewBox="0 0 520 212" aria-hidden="true">
          <path class="dial-frame" :d="dialArc(-ARC_SWEEP, ARC_SWEEP, 170)" />
          <path class="band band-loss" :d="dialArc(-ARC_SWEEP, 0, 164)" />
          <path class="band band-gain" :d="dialArc(0, ARC_SWEEP, 164)" />
          <line
            v-for="t in dialTicks"
            :key="t.v"
            class="tick"
            :x1="t.x1"
            :y1="t.y1"
            :x2="t.x2"
            :y2="t.y2"
            :stroke-width="t.major ? 1.3 : 0.8"
          />
          <text
            v-for="n in dialNumerals"
            :key="n.v"
            class="dial-num dial-num--full"
            :x="n.x"
            :y="n.y"
            text-anchor="middle"
          >
            {{ n.label }}
          </text>
          <text
            v-for="n in dialNumeralsCompact"
            :key="'c' + n.v"
            class="dial-num dial-num--compact"
            :x="n.x"
            :y="n.y"
            text-anchor="middle"
          >
            {{ n.label }}
          </text>
          <text
            class="dial-word word-loss"
            x="96"
            y="192"
            text-anchor="middle"
          >
            LOSS
          </text>
          <text
            class="dial-word word-gain"
            x="424"
            y="192"
            text-anchor="middle"
          >
            GAIN
          </text>
          <text class="hub-word" x="260" y="132" text-anchor="middle">
            HISTORY BENDS
          </text>
          <path
            v-if="trailPath"
            class="trail"
            :class="swingInk"
            :d="trailPath"
            stroke="currentColor"
          />
          <g transform="translate(260, 198)">
            <path
              class="needle"
              d="M -2.6 0 L 0 -132 L 2.6 0 Z"
              :style="{ transform: `rotate(${needleDeg}deg)` }"
            />
          </g>
          <circle class="hub" cx="260" cy="198" r="6.5" />
          <circle class="hub-dot" cx="260" cy="198" r="2.2" />
        </svg>
        <div v-if="node" class="swing-figure">
          <span
            class="swing-value"
⋯ 851 lines hidden (lines 103–953)103              :class="swingInk"
            data-testid="ripple-swing"
            >{{ signed(node.progressChange) + "%" }}</span
          >
          <span class="swing-chip cx-caps cx-caps--small" :class="swingInk">{{
            swingWord
          }}</span>
        </div>
      </div>
112 
      <div class="ledger">
        <svg class="ruler" viewBox="0 0 760 52" aria-hidden="true">
          <line class="rule-main" x1="8" y1="30" x2="748" y2="30" />
          <line class="rule-feint" x1="8" y1="33" x2="748" y2="33" />
          <line
            v-for="t in ledgerTicks"
            :key="t.p"
            class="tick"
            :x1="t.x"
            :y1="t.y1"
            :x2="t.x"
            y2="30"
            :stroke-width="t.major ? 1.1 : 0.7"
          />
          <text
            v-for="n in ledgerNumerals"
            :key="n.p"
            class="ruler-num"
            :class="{ 'lab-minor': n.p !== 0 && n.p !== 100 }"
            :x="n.x"
            y="46"
            text-anchor="middle"
          >
            {{ n.p }}
          </text>
          <line
            class="span-done"
            x1="8"
            y1="30"
            :x2="ledgerSpans.doneX"
            y2="30"
          />
          <line
            v-if="ledgerSpans.gain"
            class="span-gain"
            :x1="ledgerSpans.gain.x1"
            y1="30"
            :x2="ledgerSpans.gain.x2"
            y2="30"
          />
          <line
            v-if="ledgerSpans.lost"
            class="span-lost"
            :x1="ledgerSpans.lost.x1"
            y1="30"
            :x2="ledgerSpans.lost.x2"
            y2="30"
          />
          <path
            class="index"
            :d="`M ${ledgerSpans.doneX} 24 l -4.5 -8 h 9 Z`"
          />
          <text
            class="index-num"
            :x="ledgerSpans.doneX"
            y="12"
            text-anchor="middle"
          >
            {{ nowPct }}
          </text>
          <g class="goal" transform="translate(748, 30)">
            <circle r="4.5" class="goal-ring" />
            <circle r="1.5" class="goal-dot" />
          </g>
          <text
            v-if="nowPct < 76"
            class="goal-word"
            x="740"
            y="14"
            text-anchor="end"
          >
            history rewritten
          </text>
        </svg>
        <p class="ledger-line">{{ ledgerLine }}</p>
        <p
          v-if="node"
          class="equation cx-footnote"
          data-testid="swing-equation"
        >
          <CodexMark name="dagger" size="12px" />
          <span class="fn-lead">how the swing was weighed:</span>
          <span class="eq-run">
            <span>{{
              "(" + signed(node.baseProgressChange ?? node.progressChange)
            }}</span>
            <SymbolHint
              v-for="tok in scalerTokens"
              :key="tok.kind"
              :text="tok.hint"
            >
              <span :data-testid="`equation-${tok.kind}`">{{
                tok.label
              }}</span>
            </SymbolHint>
            <span :class="swingInk">{{
              "→ " + signed(node.progressChange) + "%)"
            }}</span>
          </span>
        </p>
      </div>
214 
      <div class="momentum-row">
        <span class="cx-caps cx-caps--small">Momentum</span>
        <span class="jewels" aria-hidden="true">
          <svg
            v-for="i in MOMENTUM_MAX"
            :key="i"
            class="jewel"
            :class="{ lit: i <= momentum }"
            viewBox="0 0 14 14"
          >
            <path d="M7 1.6 L12.4 7 L7 12.4 L1.6 7 Z" />
          </svg>
        </span>
        <span class="mom-fact cx-mono" :class="{ live: momentum > 0 }"
          >×{{ momFactor.toFixed(1) }} to gains</span
        >
      </div>
    </div>
233 
    <div class="sr-only" role="status" aria-live="polite">
      {{ announceLine }}
    </div>
  </div>
</LeafFrame>
239</template>
240 
241<script setup lang="ts">
242/**
* VI · History bends — the turn's payoff: cause (your words) flowing into
* effect (history moving), one document, one melody. The conductor fires
* `commitRipple` on entry: the swing applies, momentum advances, and the
* change is sealed onto the record while this leaf reveals it.
*
* Composition (spec §6/§10): rubric kicker → display headline (TypeOn) +
* italic detail → wax dateline stamp → THE SWING GAUGE (an engraved half-arc
* instrument in page inks: loss arc left, gain right, a rubric needle that
* sweeps 0 → this turn's swing with a dotted trail, the signed figure at
* display scale beneath) → THE LEDGER RULER (the run's cumulative hundred-mark
* rule, the just-gained span in valence ink, the swing equation as a dagger
* footnote) → momentum jewels. The whole instruments block dims while the
* turn is still weighing, and every animation settles to store values —
* reduced motion renders the needle at rest at the final value.
*
* (Docs live here, not as a template comment: a leading template comment
* makes the component multi-root in dev and Vue drops class fallthrough.)
*/
261import { computed, ref, watch } from "vue";
262import { useGameStore } from "~/stores/game";
263import { equationTokens } from "~/utils/swing-equation";
264import { MAX_PROGRESS, MAX_PROGRESS_SWING } from "~/utils/game-config";
265import { MOMENTUM_MAX, momentumFactor } from "~/utils/momentum";
266import LeafFrame from "./LeafFrame.vue";
267import CodexSeal from "./CodexSeal.vue";
268import CodexMark from "./CodexMark.vue";
269import TypeOn from "./TypeOn.vue";
270 
271// The headline writes itself in over this long (handed to TypeOn). The detail,
272// dateline, needle sweep, and footnote are the consequence of the change, so their
273// reveal delays are bound to this same value via the --reveal-after custom property —
274// they arrive once the change is named, and the two can't drift.
275const HEADLINE_TYPE_MS = 800;
276 
277const gameStore = useGameStore();
278// During the reveal the CURRENT turn's ripple lives in pendingTurn (null until the
279// `ripple` frame lands → the weighing beat); once committed it's the last ledger
280// event. Sourcing from pendingTurn first means a fast-reached leaf shows a clean
281// pending state, never a blank or a STALE prior-turn headline.
282const node = computed(() =>
gameStore.pendingTurn
  ? gameStore.pendingTurn.ripple
  : (gameStore.timelineEvents[gameStore.timelineEvents.length - 1] ?? null),
286);
287const landed = ref(false);
288// One polite line, spoken once per land (this leaf's single live region — the
289// shell narrates the beat separately in its own). The landed watch that fills
290// it lives below the ledger computeds it reads.
291const announceLine = ref("");
292const signed = (n: number) => (n >= 0 ? "+" : "") + n;
293// One valence ink for every signed statement of this turn's swing.
294const swingInk = computed(() => {
const delta = node.value?.progressChange ?? 0;
return delta > 0 ? "ink-ok" : delta < 0 ? "ink-bad" : "ink-held";
297});
298const swingWord = computed(() => {
const delta = node.value?.progressChange ?? 0;
return delta > 0 ? "gain" : delta < 0 ? "loss" : "held";
301});
302// The footnote's × tokens print only when the disclosed base truly differs from
303// the final swing. A missing base falls back to the final for display, and a
304// base that merely echoes the final proves nothing scaled — either way the
305// equation collapses to "(+N → +N%)" rather than printing a base a ×-token
306// then contradicts (the "+22 ✒ ×1.2 → +22%" wound).
307const scalerTokens = computed(() => {
const n = node.value;
if (!n) return [];
return n.baseProgressChange == null ||
  n.baseProgressChange === n.progressChange
  ? []
  : equationTokens(n);
314});
315 
316/* ── The swing gauge (drawn geometry) ─────────────────────────────────────
 Half-arc instrument: hub at (260,198), the scale spans ±ARC_SWEEP degrees
 for ±MAX_PROGRESS_SWING points — the unstaked per-turn fuse. A staked
 swing beyond the cap pins the needle at the cap; the figure beneath tells
 the truth. */
321const ARC_SWEEP = 80; // degrees swept each side of vertical
322const ARC_CAP = MAX_PROGRESS_SWING;
323const DIAL_CX = 260;
324const DIAL_CY = 198;
325const rad = (deg: number) => (deg * Math.PI) / 180;
326const dialPt = (deg: number, r: number) => ({
x: +(DIAL_CX + r * Math.sin(rad(deg))).toFixed(1),
y: +(DIAL_CY - r * Math.cos(rad(deg))).toFixed(1),
329});
330const dialArc = (from: number, to: number, r: number) => {
const a = dialPt(from, r);
const b = dialPt(to, r);
return `M ${a.x} ${a.y} A ${r} ${r} 0 0 ${to >= from ? 1 : 0} ${b.x} ${b.y}`;
334};
335const degOf = (v: number) =>
(Math.max(-ARC_CAP, Math.min(ARC_CAP, v)) / ARC_CAP) * ARC_SWEEP;
337 
338// Fine ticks every 5 points, taller every 10 — engraved once (static scale).
339const dialTicks = (() => {
const out: {
  v: number;
  major: boolean;
  x1: number;
  y1: number;
  x2: number;
  y2: number;
}[] = [];
for (let v = -ARC_CAP; v <= ARC_CAP; v += 5) {
  const major = v % 10 === 0;
  const a = degOf(v);
  const o = dialPt(a, 160);
  const i = dialPt(a, major ? 149 : 154);
  out.push({ v, major, x1: o.x, y1: o.y, x2: i.x, y2: i.y });
}
return out;
356})();
357const dialNumerals = (() => {
const out: { v: number; label: number; x: number; y: number }[] = [];
for (let v = -ARC_CAP; v <= ARC_CAP; v += 10) {
  const p = dialPt(degOf(v), 138);
  out.push({ v, label: Math.abs(v), x: p.x, y: +(p.y + 4).toFixed(1) });
}
return out;
364})();
365// ≤640 the arc keeps every engraved tick but sheds labels to the half- and
366// full-scale marks (±25, ±50) at a legible size — thin the labels, never the
367// engraving. Rendered as a second, CSS-swapped set (no resize listeners).
368const dialNumeralsCompact = [-ARC_CAP, -ARC_CAP / 2, ARC_CAP / 2, ARC_CAP].map(
(v) => {
  const p = dialPt(degOf(v), 138);
  return { v, label: Math.abs(v), x: p.x, y: +(p.y + 4).toFixed(1) };
},
373);
374 
375const needleDeg = computed(() => degOf(node.value?.progressChange ?? 0));
376// The dotted sweep trail — the needle's path from 0, kept visible at rest.
377const trailPath = computed(() => {
const delta = node.value?.progressChange ?? 0;
if (!delta) return null;
return dialArc(0, degOf(delta), 124);
381});
382 
383/* ── The ledger ruler (the run's cumulative state) ────────────────────────
 A hundred-mark engraved rule: the done-span inked, the JUST-gained span in
 valence ink (a loss shows the receded span as a struck feint past the
 index). While the turn is uncommitted (pendingTurn still holds it) the
 store's progress is pre-swing, so the shown "now" adds the landed change —
 it settles onto the exact committed value. */
389const LEDGER_X0 = 8;
390const LEDGER_DX = 7.4;
391const ledgerXOf = (p: number) => +(LEDGER_X0 + p * LEDGER_DX).toFixed(1);
392const ledgerTicks = (() => {
const out: { p: number; major: boolean; x: number; y1: number }[] = [];
for (let p = 0; p <= 100; p++) {
  const major = p % 10 === 0;
  out.push({
    p,
    major,
    x: ledgerXOf(p),
    y1: 30 - (major ? 13 : p % 5 === 0 ? 9 : 6),
  });
}
return out;
404})();
405const ledgerNumerals = ledgerTicks
.filter((t) => t.major)
.map((t) => ({ p: t.p, x: t.x }));
408 
409const clampPct = (p: number) => Math.max(0, Math.min(MAX_PROGRESS, p));
410const nowPct = computed(() => {
const change = node.value?.progressChange ?? 0;
return Math.round(
  gameStore.pendingTurn
    ? clampPct(gameStore.objectiveProgress + change)
    : gameStore.objectiveProgress,
);
417});
418const ledgerSpans = computed(() => {
const change = node.value?.progressChange ?? 0;
const now = nowPct.value;
const prev = clampPct(now - change);
return {
  doneX: ledgerXOf(now),
  gain: change > 0 ? { x1: ledgerXOf(prev), x2: ledgerXOf(now) } : null,
  lost: change < 0 ? { x1: ledgerXOf(now), x2: ledgerXOf(prev) } : null,
};
427});
428// The run's state in plain words, mechanically honest (the old needLine/pace).
429const ledgerLine = computed(() => {
const p = nowPct.value;
const n = gameStore.remainingMessages;
if (p >= MAX_PROGRESS)
  return `${MAX_PROGRESS} of 100 rewritten · history rewritten`;
if (n <= 0) return `${p} of 100 rewritten · no dispatches remain`;
const apiece = Math.ceil((MAX_PROGRESS - p) / n);
return `${p} of 100 rewritten · ${n} ${n === 1 ? "dispatch remains" : "dispatches remain"} · need +${apiece} apiece`;
437});
438 
439// Momentum — the run's arc, read live from the store (as MomentumMeter did).
440const momentum = computed(() => gameStore.momentum);
441const momFactor = computed(() => momentumFactor(momentum.value));
442 
443// The landed watch — flips the reveal staging on and speaks the one polite
444// line, once per land (immediate, so a committed node at mount still lands).
445watch(
node,
(n) => {
  if (n && !landed.value) {
    landed.value = true;
    announceLine.value = `history bends ${signed(n.progressChange)}%, now ${nowPct.value} of 100`;
  }
},
{ immediate: true },
454);
455</script>
456 
457<style scoped>
ripple-page {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
467}
468 
469/* ── The proclamation entry ──────────────────────────────────────────────── */
kicker {
display: flex;
align-items: center;
gap: 14px;
474}
kicker::before,
kicker::after {
content: "";
height: 1px;
flex: 0 0 84px;
background: color-mix(in srgb, var(--ew-rubric) 36%, transparent);
481}
headline {
font-family: var(--ew-serif);
/* The climax beat owns the largest type on any leaf. */
font-size: clamp(30px, 4.2vw, 44px);
line-height: 1.14;
letter-spacing: -0.005em;
margin-top: 18px;
489}
headline.inked::first-letter {
color: var(--ew-rubric);
font-size: 1.24em;
493}
494/* The weighing beat — shown until the Timeline frame lands. */
weighing {
display: inline-flex;
align-items: center;
gap: 11px;
font-style: italic;
font-size: var(--ew-fs-title);
color: var(--ew-ink-quiet);
502}
ink-dots {
display: inline-flex;
gap: 5px;
506}
ink-dots i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ew-rubric);
opacity: 0.3;
animation: ink-pulse 1.15s ease-in-out infinite;
514}
ink-dots i:nth-child(2) {
animation-delay: 0.19s;
517}
ink-dots i:nth-child(3) {
animation-delay: 0.38s;
520}
521@keyframes ink-pulse {
0%,
100% {
  opacity: 0.25;
  transform: translateY(0);
}
50% {
  opacity: 0.9;
  transform: translateY(-2px);
}
531}
532/* The detail holds (the animation's backwards fill keeps it at opacity 0 through
 the delay, so nothing reflows), then rises in just as the headline lands. */
detail {
margin-top: 12px;
font-size: var(--ew-fs-lede);
line-height: 1.55;
font-style: italic;
color: var(--ew-ink-quiet);
max-width: 58ch;
animation: reveal-rise var(--ew-dur-3) var(--ew-ease)
  var(--reveal-after, 800ms) both;
543}
544@keyframes reveal-rise {
from {
  opacity: 0;
  transform: translateY(6px);
}
to {
  opacity: 1;
  transform: none;
}
553}
554/* The dateline — wax + the bordered rubric stamp-mark. Strikes as the
 headline finishes naming the change (gated on the landed watch). */
dateline {
display: flex;
align-items: center;
gap: 14px;
margin-top: 18px;
opacity: 0;
562}
dateline.landed {
animation: cx-strike var(--ew-dur-3) var(--ew-ease-spring)
  calc(var(--reveal-after, 800ms) + 100ms) both;
566}
stamp {
width: 44px;
height: 44px;
flex: none;
transform: rotate(6deg);
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
573}
stamp-mark {
font-family: var(--ew-serif);
font-size: var(--ew-fs-label);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ew-rubric);
border: 1px solid color-mix(in srgb, var(--ew-rubric) 55%, transparent);
padding: 5px 10px 4px;
transform: rotate(-1.6deg);
583}
584 
585/* ── The instruments (dim until the node lands) ──────────────────────────── */
gauge-col {
margin-top: 26px;
transition: opacity var(--ew-dur-2) var(--ew-ease);
589}
590/* Dim the instruments while the swing is still being computed, so the current
 cumulative % never reads as the (not-yet-known) result; it lifts the instant
 the node lands. 0.75 keeps the live numbers readable while it weighs. */
gauge-col.pending {
opacity: 0.75;
595}
596 
597/* the swing gauge */
dial {
display: block;
width: min(100%, 470px);
height: auto;
margin: 0 auto;
603}
dial-frame {
fill: none;
stroke: var(--ew-rule);
stroke-width: 1.25;
608}
band {
fill: none;
stroke-width: 6;
stroke-linecap: round;
613}
band-loss {
stroke: var(--ew-bad);
opacity: 0.32;
617}
band-gain {
stroke: var(--ew-ok);
opacity: 0.42;
621}
dial .tick {
stroke: var(--ew-ink-faint);
624}
dial-num {
font-family: var(--ew-serif);
font-size: 12.5px;
fill: var(--ew-ink-faint);
629}
630/* the phone-only endpoint labels sleep until the ≤640 block swaps the sets */
dial-num--compact {
display: none;
633}
dial-word {
font-family: var(--ew-serif);
font-size: 11px;
letter-spacing: 0.2em;
638}
word-loss {
fill: var(--ew-bad);
opacity: 0.8;
642}
word-gain {
fill: var(--ew-ok);
opacity: 0.85;
646}
hub-word {
font-family: var(--ew-serif);
font-size: 11px;
letter-spacing: 0.2em;
fill: var(--ew-ink-quiet);
652}
trail {
fill: none;
stroke-width: 2.4;
stroke-linecap: round;
stroke-dasharray: 1 7;
opacity: 0;
659}
gauge-col.landed .trail {
animation: trail-ink var(--ew-beat) var(--ew-ease)
  calc(var(--reveal-after, 800ms) + 200ms) both;
663}
664@keyframes trail-ink {
to {
  opacity: 0.9;
}
668}
669/* The rubric needle. Its resting transform is the store's final value; the
 sweep animates FROM zero to that computed rest, so the data is never gated
 on the animation (reduced motion simply shows the rest state). */
needle {
fill: var(--ew-rubric);
transform-box: fill-box;
transform-origin: 50% 100%;
676}
gauge-col.landed .needle {
animation: needle-sweep var(--ew-beat) var(--ew-ease-strike)
  var(--reveal-after, 800ms) both;
680}
681@keyframes needle-sweep {
from {
  transform: rotate(0deg);
}
685}
hub {
fill: var(--ew-ink);
688}
hub-dot {
fill: var(--ew-paper-hi);
691}
692/* the signed figure — serif at display scale, in valence ink; inks in AFTER
 the needle has swung (the loudest beat lands last). */
swing-figure {
display: flex;
align-items: baseline;
justify-content: center;
gap: 14px;
margin-top: 4px;
700}
gauge-col.landed .swing-figure {
animation: cx-ink-in var(--ew-dur-3) var(--ew-ease)
  calc(var(--reveal-after, 800ms) + 420ms) both;
704}
swing-value {
font-family: var(--ew-serif);
font-size: clamp(44px, 5vw, 56px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
711}
swing-chip {
border: 1px solid currentColor;
padding: 3px 9px 2px;
transform: rotate(2deg) translateY(-6px);
716}
ink-ok {
color: var(--ew-ok);
719}
ink-bad {
color: var(--ew-bad);
722}
ink-held {
color: var(--ew-ink);
725}
726 
727/* the ledger ruler */
ledger {
margin-top: 18px;
730}
ruler {
display: block;
width: 100%;
height: auto;
735}
rule-main {
stroke: var(--ew-rule);
stroke-width: 1.25;
739}
rule-feint {
stroke: var(--ew-rule-feint);
stroke-width: 1;
743}
ruler .tick {
stroke: var(--ew-ink-faint);
746}
ruler-num {
font-family: var(--ew-serif);
font-size: 10.5px;
fill: var(--ew-ink-faint);
751}
span-done {
stroke: var(--ew-ink);
stroke-width: 3.5;
stroke-linecap: round;
756}
span-gain {
stroke: var(--ew-ok);
stroke-width: 3.5;
stroke-linecap: round;
761}
span-lost {
stroke: var(--ew-bad);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 2 4;
opacity: 0.8;
768}
index {
fill: var(--ew-rubric);
771}
index-num {
font-family: var(--ew-serif);
font-size: 12.5px;
font-weight: 600;
fill: var(--ew-ink);
777}
goal-ring {
fill: none;
stroke: var(--ew-gold);
stroke-width: 1.5;
782}
goal-dot {
fill: var(--ew-gold);
785}
goal-word {
font-family: var(--ew-serif);
font-size: 11px;
font-style: italic;
fill: var(--ew-ink-faint);
791}
ledger-line {
margin-top: 6px;
font-size: var(--ew-fs-note);
font-style: italic;
color: var(--ew-ink-quiet);
797}
798/* the dagger footnote — the honest weighing, in the scribe's register */
equation {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--ew-rule-feint);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
animation: reveal-rise var(--ew-dur-3) var(--ew-ease)
  calc(var(--reveal-after, 800ms) + 90ms) both;
809}
eq-run {
font-family: var(--ew-mono);
font-size: var(--ew-fs-meta);
font-style: normal;
color: var(--ew-ink-quiet);
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px;
819}
820 
821/* momentum */
momentum-row {
margin-top: 18px;
display: flex;
align-items: center;
gap: 12px;
827}
jewels {
display: inline-flex;
align-items: center;
gap: 6px;
832}
jewel {
width: 11px;
height: 11px;
display: block;
837}
jewel path {
fill: none;
stroke: var(--ew-ink-faint);
stroke-width: 1.3;
stroke-linejoin: round;
843}
jewel.lit path {
fill: var(--ew-ok);
stroke: var(--ew-ok);
847}
mom-fact {
color: var(--ew-ink-faint);
850}
mom-fact.live {
color: var(--ew-ok);
853}
854 
855/* ── Reduced motion: the same staging, translated — everything rests at the
    store's final values (needle at rest, trail visible, no delays). ────── */
857@media (prefers-reduced-motion: reduce) {
.ink-dots i {
  animation: none;
  opacity: 0.5;
  transform: none;
}
.detail,
.equation {
  animation: none;
}
.dateline.landed {
  animation: none;
  opacity: 1;
}
.gauge-col {
  transition: none;
}
.gauge-col.landed .needle,
.gauge-col.landed .trail,
.gauge-col.landed .swing-figure {
  animation: none;
}
.trail {
  opacity: 0.9;
}
882}
883 
884/* ── Mobile: one column, the gauge scales to the page ────────────────────── */
885@media (max-width: 640px) {
.ripple-page {
  justify-content: flex-start;
  padding-top: 12px;
}
.kicker::before,
.kicker::after {
  flex-basis: 34px;
}
.weighing {
  font-size: 22px;
}
.detail {
  font-size: 16px;
}
.gauge-col {
  margin-top: 18px;
}
.swing-figure {
  gap: 10px;
}
.momentum-row {
  flex-wrap: wrap;
}
/* The engraving keeps its full tick density; only the LABELS thin and grow.
   SVG text scales with the viewBox (the 760-wide ruler paints at ~340px,
   the 520-wide dial at ~0.65), so these sizes land ≈9–10px on screen —
   the readable floor — instead of ~5px fuzz. */
.dial-num--full {
  display: none;
}
.dial-num--compact {
  display: initial;
  font-size: 16px;
}
.dial-word {
  font-size: 14px;
}
.hub-word {
  font-size: 15px;
}
.ruler {
  /* the grown endpoint + index numerals may poke past the viewBox edge */
  overflow: visible;
}
.ruler-num {
  font-size: 20px;
  transform: translateY(3px);
}
.ruler-num.lab-minor {
  display: none;
}
/* the index flag and its numeral — the ruler's one live reading — enlarge */
.index {
  transform: scale(1.35);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.index-num {
  font-size: 20px;
  transform: translateY(-1px);
}
/* the plain-words ledger line beneath carries the goal; the micro-caption
   at this scale was unreadable dressing */
.goal-word {
  display: none;
}
952}
953</style>

The dice of fate — instrument and rubric

The die is an engraved icosahedron (paper-tinted facets, ink strokes, serif numeral) that tumbles, hangs, and strikes; crits burst in radiating ink strokes rather than neon glow. Beneath it, the Table of Fates is a disclosed .cx-table whose struck band lights in its outcome ink with a marginal manicule — the gambler's rubric the diagnosis asked for. The verdict line self-reconciles the natural face with the craft tilt.

The fates table with its struck-band logic.

components/codex/LeafDice.vue · 270 lines

components/codex/LeafDice.vue270 lines · Vue

⋯ 25 lines hidden (lines 1–25)1<template>
<LeafFrame numeral="IV" name="The dice of fate">
  <div class="casting">
    <p class="cue">
      <template v-if="reveal?.staked"
        >a staked throw — the swing doubles, both ways</template
      >
      <template v-else-if="mod"
        >craft has tilted the die
        <b class="cue-em">{{ signedMod }}</b></template
      >
      <template v-else>how fate is weighed, disclosed below</template>
    </p>
14 
    <div class="die-stage"><DiceRoller /></div>
16 
    <p class="tilt-note" :class="{ 'cx-ink-in': tiltShown }">
      <template v-if="tiltShown">
        <CodexMark name="manicule" size="17px" class="man" />
        the die shows <b>{{ natural }}</b
        >; your craft carries it to <b>{{ effective }}</b> —
        <span class="fate" :class="fateClass">a {{ landedOutcome }}</span>
      </template>
    </p>
25 
    <div class="fates" data-testid="roll-legend">
      <div class="fates-title cx-caps">The table of fates</div>
      <table class="cx-table fates-table" :class="{ landed: landedOutcome }">
        <tbody>
          <tr
            v-for="row in rollLegend"
            :key="row.label"
            :class="{ struck: row.label === landedOutcome }"
          >
            <td class="range cx-mono">
              <CodexMark
                v-if="row.label === landedOutcome"
                name="manicule"
                size="15px"
                class="row-man"
              />{{ row.range }}
            </td>
            <td
              class="fate-name"
              :class="row.label === landedOutcome ? row.cls : ''"
            >
              {{ row.label }}
            </td>
            <td class="swing cx-mono">{{ row.swing }}</td>
          </tr>
        </tbody>
      </table>
      <p class="fates-note cx-footnote">
        <CodexMark name="quill" size="12px" /> craft tilts the roll (±2) ·
        <CodexMark name="notabene" size="12px" /> anachronism widens the
        result · <CodexMark name="flag" size="12px" /> a staked final dispatch
        doubles everything
      </p>
    </div>
  </div>
⋯ 210 lines hidden (lines 61–270)61  </LeafFrame>
62</template>
63 
64<script setup lang="ts">
65/** IV · The dice of fate — the throw: tumble, hang, strike. The DiceRoller
*  mounts here in its rolling state (the turn is still `isLoading`); the
*  conductor lands it via `commitReveal` after a wind-up, so the fresh
*  component can't dedupe its own land away. The composition is the gambler's
*  rubric: cue above, the engraved die at centerpiece scale, the tilt
*  annotation reconciling natural → effective, and the Table of Fates with
*  the struck band in full ink and a marginal manicule.
*  (Doc lives here, not as a template comment: a leading template comment
*  makes the component multi-root in dev and Vue drops class fallthrough.) */
74import { computed } from "vue";
75import { useGameStore } from "~/stores/game";
76import { SWING_BANDS } from "~/utils/swing-bands";
77import {
DiceOutcome,
CRIT_FAIL_MAX,
FAILURE_MAX,
NEUTRAL_MAX,
CRIT_SUCCESS_MIN,
83} from "~/utils/dice";
84import LeafFrame from "./LeafFrame.vue";
85 
86const gameStore = useGameStore();
87const reveal = computed(() => gameStore.revealMessage);
88// The struck band, once the die has landed (null while it still tumbles).
89const landedOutcome = computed(() =>
gameStore.isLoading ? null : (reveal.value?.diceOutcome ?? null),
91);
92const mod = computed(() => reveal.value?.rollModifier ?? 0);
93const signedMod = computed(() => `${mod.value > 0 ? "+" : ""}${mod.value}`);
94// The reconciliation: the face the die shows vs the roll the rules judged.
95const natural = computed(
() => reveal.value?.naturalRoll ?? reveal.value?.diceRoll,
97);
98const effective = computed(() => reveal.value?.diceRoll);
99// The tilt annotation appears once landed, when a craft modifier gives the
100// natural → effective gap something to reconcile.
101const tiltShown = computed(() => !!landedOutcome.value && !!mod.value);
102const fateClass = computed(
() => rollLegend.find((r) => r.label === landedOutcome.value)?.cls ?? "f-mut",
104);
105 
106const fmtSwing = (b: { min: number; max: number }) =>
`${b.min >= 0 ? "+" : ""}${b.min}…${b.max >= 0 ? "+" : ""}${b.max}%`;
108const rollLegend = [
{
  range: `${CRIT_SUCCESS_MIN}–20`,
  label: "Critical Success",
  swing: fmtSwing(SWING_BANDS[DiceOutcome.CRITICAL_SUCCESS]),
  cls: "f-ok",
},
{
  range: `${NEUTRAL_MAX + 1}–${CRIT_SUCCESS_MIN - 1}`,
  label: "Success",
  swing: fmtSwing(SWING_BANDS[DiceOutcome.SUCCESS]),
  cls: "f-ok",
},
{
  range: `${FAILURE_MAX + 1}–${NEUTRAL_MAX}`,
  label: "Neutral",
  swing: fmtSwing(SWING_BANDS[DiceOutcome.NEUTRAL]),
  cls: "f-mut",
},
{
  range: `${CRIT_FAIL_MAX + 1}–${FAILURE_MAX}`,
  label: "Failure",
  swing: fmtSwing(SWING_BANDS[DiceOutcome.FAILURE]),
  cls: "f-bad",
},
{
  range: `1–${CRIT_FAIL_MAX}`,
  label: "Critical Failure",
  swing: fmtSwing(SWING_BANDS[DiceOutcome.CRITICAL_FAILURE]),
  cls: "f-bad",
},
139];
140</script>
141 
142<style scoped>
casting {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: min(720px, 100%);
margin: 0 auto;
153}
cue {
font-size: var(--ew-fs-body);
font-style: italic;
color: var(--ew-ink-quiet);
158}
cue-em {
font-style: normal;
font-weight: 600;
color: var(--ew-rubric);
163}
164 
165/* the die at centerpiece scale on its own leaf */
die-stage {
margin: 10px auto 0;
168}
die-stage :deep(.die) {
width: 232px;
height: 232px;
172}
173 
174/* the tilt: an inked annotation beside the die (space reserved so the land
 doesn't shove the table) */
tilt-note {
min-height: 26px;
margin-top: 2px;
font-size: 17px;
font-style: italic;
color: var(--ew-ink-quiet);
182}
tilt-note .man {
color: var(--ew-rubric);
margin-right: 6px;
vertical-align: -0.22em;
187}
tilt-note b {
font-style: normal;
font-weight: 600;
color: var(--ew-rubric);
192}
tilt-note .fate {
font-style: normal;
font-weight: 600;
196}
197 
198/* ── the table of fates ─────────────────────────────────────────────────── */
fates {
width: min(520px, 100%);
margin: 14px auto 0;
text-align: left;
203}
fates-title {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
210}
fates-title::before,
fates-title::after {
content: "";
height: 1px;
background: var(--ew-rule-feint);
flex: 0 0 56px;
217}
fates-table {
margin-top: 10px;
220}
221/* while the die still tumbles, the whole rubric reads at consulting weight;
 once struck, the other bands recede to the table's faint default */
fates-table:not(.landed) td {
color: var(--ew-ink-quiet);
225}
fates-table td.range {
position: relative;
width: 74px;
229}
fates-table td.swing {
width: 108px;
text-align: right;
233}
234/* the struck band's valence ink (over .cx-table's full-ink struck row) */
fates-table tr.struck td.f-ok {
color: var(--ew-ok);
237}
fates-table tr.struck td.f-bad {
color: var(--ew-bad);
240}
fates-table tr.struck td.f-mut {
color: var(--ew-ink-quiet);
243}
244/* the marginal manicule pointing at the struck band */
row-man {
position: absolute;
left: -26px;
top: 50%;
transform: translateY(-50%);
color: var(--ew-rubric);
251}
fates-note {
margin-top: 12px;
text-align: center;
line-height: 1.5;
256}
257 
258@media (max-width: 640px) {
.die-stage :deep(.die) {
  width: 188px;
  height: 188px;
}
.fates {
  width: 100%;
}
.row-man {
  display: none;
}
269}
270</style>

The record and the colophons

The record opens as an inserted quire — a second sheet with its own paper and shadow laid over the leaf, not a scrim ghost — carrying the Spine (an inked timeline with wax nodes in valence ink), the Chronicle, and the Thread. The end screens are the game's colophons: victory strikes the brand seal in gold-warmed wax between laurel marks over the epilogue and a printed table of the run's figures in serif numerals; defeat is the same page with dry wax, unlit, a step dimmer.

The quire's structure — Spine, Chronicle, Thread.

components/codex/RecordOverlay.vue · 338 lines

components/codex/RecordOverlay.vue338 lines · Vue

1<template>
<div
  v-if="open"
  ref="root"
  class="record"
  role="dialog"
  aria-modal="true"
  aria-label="The record — the timeline so far"
  tabindex="-1"
  data-testid="codex-record"
  @click.self="emit('close')"
  @keydown="onKeydown"
>
  <div class="quire">
    <header class="quire-head">
      <CodexMark name="bookmark" size="16px" class="qh-mark" />
      <span class="qh-title">The record</span>
      <button
        type="button"
        class="rec-close"
        aria-label="Close the record"
        @click="emit('close')"
      >
        <CodexMark name="close" size="15px" />
      </button>
    </header>
    <div class="quire-body">
      <section class="quire-section">
        <h3 class="section-head">
          <span class="head-inner"
            ><CodexMark name="hourglass" size="13px" class="head-mark" /><span
              class="cx-caps"
              >The Spine</span
            ></span
          >
        </h3>
        <TimelineLedger bare />
      </section>
      <section class="quire-section">
        <h3 class="section-head">
          <span class="head-inner"
            ><CodexMark name="scroll" size="13px" class="head-mark" /><span
              class="cx-caps"
              >The Chronicle</span
            ></span
          >
        </h3>
        <Chronicle force-open bare />
      </section>
      <details class="quire-section thread-fold">
        <summary class="section-head" data-testid="record-thread-toggle">
          <span class="head-inner"
            ><CodexMark name="quill" size="13px" class="head-mark" /><span
              class="cx-caps"
              >Thread</span
⋯ 283 lines hidden (lines 56–338)56              ><svg class="fold-mark" viewBox="0 0 16 16" aria-hidden="true">
              <path
                d="M6 3.5 L11 8 L6 12.5"
                fill="none"
                stroke="currentColor"
                stroke-width="1.4"
                stroke-linecap="round"
                stroke-linejoin="round"
              /></svg
          ></span>
        </summary>
        <MessageHistory />
      </details>
    </div>
  </div>
</div>
72</template>
73 
74<script setup lang="ts">
75/**
* The record — an inserted quire. A second, smaller sheet laid over the leaf at
* full opacity with its own paper, shadow, and rule border (never a scrim
* ghost); the leaf beneath is simply under it, like paper — its own cast shadow
* and smaller footprint do the separating, with only a whisper of desk shadow
* behind. Summonable from any leaf (the bookmark margin-mark), so the page-by-page
* focus never hides past or current information. Reuses the live Spine, the
* Chronicle, and the conversation Thread (their public contracts untouched, so
* the shared /runs + /r read pages keep working). Dismiss returns to the leaf
* in place — the live game doesn't auto-run, so no pause is needed.
* (Doc lives here, not as a template comment: a leading template comment makes
* the component multi-root in dev and Vue drops class fallthrough.)
*/
88import { ref, watch, nextTick } from "vue";
89const props = defineProps<{ open: boolean }>();
90const emit = defineEmits<{ close: [] }>();
91 
92// Move focus into the dialog on open and remember what had it; restore that on close so
93// dismissing the record (close mark / click-out / Escape) returns focus to the bookmark
94// toggle that opened it, instead of dropping to <body> when the button unmounts (#232).
95// Mirrors EndGameScreen's prev-focus + Tab-trap pattern.
96const root = ref<HTMLElement | null>(null);
97let prevFocus: HTMLElement | null = null;
98watch(
() => props.open,
async (o) => {
  if (typeof document === "undefined") return;
  if (o) {
    prevFocus = document.activeElement as HTMLElement | null;
    await nextTick();
    root.value?.focus();
  } else if (prevFocus) {
    prevFocus.focus?.();
    prevFocus = null;
  }
},
111);
112 
113// aria-modal="true" promises AT that Tab stays inside the dialog, but without a trap it
114// walks out into the background running-head/leaf controls. Cycle first↔last within .record.
115function onKeydown(e: KeyboardEvent) {
if (e.key !== "Tab" || !root.value) return;
const focusables = root.value.querySelectorAll<HTMLElement>(
  'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])',
);
if (!focusables.length) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
const active = document.activeElement;
if (e.shiftKey && active === first) {
  e.preventDefault();
  last.focus();
} else if (!e.shiftKey && active === last) {
  e.preventDefault();
  first.focus();
}
131}
132</script>
133 
134<style scoped>
135/* Behind the quire the leaf is simply UNDER it, like paper — a whisper of the
 desk's shadow at most, never the rejected scrim wash. The quire's own cast
 shadow and smaller footprint do the separating. */
record {
position: absolute;
inset: 0;
z-index: 8;
background: color-mix(in srgb, var(--ew-desk) 8%, transparent);
animation: rec-fade var(--ew-dur-2) var(--ew-ease);
144}
145 
146/* The inserted quire: its own smaller sheet, full opacity, the leaf's paper. */
quire {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(1000px, calc(100% - 64px));
height: 88%;
display: flex;
flex-direction: column;
border: 1px solid var(--ew-rule);
border-radius: 2px;
background: radial-gradient(
  140% 110% at 50% 30%,
  var(--ew-paper-hi),
  var(--ew-paper) 55%,
  var(--ew-paper-lo) 100%
);
box-shadow:
  0 14px 40px -10px rgba(0, 0, 0, 0.45),
  0 34px 80px -28px rgba(0, 0, 0, 0.4);
animation: quire-settle var(--ew-dur-3) var(--ew-ease) both;
168}
169 
170/* Night: the inserted sheet sits a step LIGHTER than the leaf it covers — its
 own candle key-light — and casts a warm-black shadow, so it lifts off the
 page instead of dissolving into a hairline box at the same tonal value. */
dark .quire {
border-color: color-mix(in srgb, var(--ew-rule) 70%, var(--ew-ink-faint));
background: radial-gradient(
  140% 110% at 50% 30%,
  color-mix(in srgb, var(--ew-paper-hi) 86%, var(--ew-ink) 14%),
  var(--ew-paper-hi) 55%,
  var(--ew-paper) 100%
);
box-shadow:
  0 14px 40px -10px rgba(14, 7, 2, 0.8),
  0 34px 90px -24px rgba(10, 5, 1, 0.75),
  inset 0 0 110px -30px rgba(255, 170, 80, 0.14);
185}
186 
quire-head {
flex: none;
display: flex;
align-items: center;
gap: 10px;
padding: 16px 22px 12px 30px;
border-bottom: 1px solid var(--ew-rule-feint);
194}
qh-mark {
color: var(--ew-rubric);
197}
qh-title {
font-family: var(--ew-serif);
font-size: 22px;
color: var(--ew-ink);
202}
rec-close {
appearance: none;
background: none;
border: 0;
margin-left: auto;
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--ew-ink-faint);
cursor: pointer;
transition: color var(--ew-dur-1) var(--ew-ease);
215}
rec-close:hover {
color: var(--ew-ink);
218}
219 
220/* One internal scroll for the whole quire. */
quire-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 30px 26px;
227}
quire-section {
margin-top: 18px;
230}
quire-section:first-child {
margin-top: 6px;
233}
234 
235/* Ribbon-marked heads: rubric-marked caps between drawn rules. */
section-head {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-weight: normal;
242}
section-head::before,
section-head::after {
content: "";
flex: 1;
height: 1px;
background: var(--ew-rule-feint);
249}
head-inner {
display: inline-flex;
align-items: center;
gap: 8px;
254}
head-mark {
color: var(--ew-rubric);
257}
258 
259/* The Thread fold — collapsed by default, its head the summary itself. */
thread-fold > summary {
cursor: pointer;
list-style: none;
263}
thread-fold > summary::-webkit-details-marker {
display: none;
266}
fold-mark {
width: 12px;
height: 12px;
color: var(--ew-ink-faint);
transition: transform var(--ew-dur-1) var(--ew-ease);
272}
thread-fold[open] .fold-mark {
transform: rotate(90deg);
275}
276 
277/* The Chronicle sizes to its content here — the quire body owns the scroll
 (same override the retold-history leaf uses on the shared component). */
quire-body :deep([data-testid="chronicle"]) {
display: block;
height: auto;
border-top: 0;
padding-top: 0;
284}
quire-body :deep([data-testid="chronicle"] > div) {
flex: none;
min-height: 0;
overflow: visible;
289}
290 
291@keyframes rec-fade {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
298}
299@keyframes quire-settle {
from {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px));
}
to {
  opacity: 1;
  transform: translate(-50%, -50%);
}
308}
309@media (prefers-reduced-motion: reduce) {
.record,
.quire {
  animation: none;
}
.fold-mark {
  transition: none;
}
317}
318 
319/* The quire IS the screen on a phone. */
320@media (max-width: 640px) {
.quire {
  left: 0;
  top: 0;
  transform: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  animation: none;
}
.quire-head {
  padding: 12px 12px 10px 16px;
}
.quire-body {
  padding: 8px 16px 20px;
}
337}
338</style>

What broke on the way, and what it taught

Three engineering finds worth keeping: the html.dark root-blend compile trap and the color-mix-in-shadow rasterizer poison (both now documented at their fixes in main.css), and a Vue transition subtlety — the page-turn's leave phase is timed by the leaf's entrance animation end event, so silencing that animation on leaving leaves stalls the turn forever. The e2e reveal-walk was instead hardened test-side: a settled-composer guard that treats any *-leave-active class as "the page is still turning".

The hardened walk: settle guard + an iteration budget sized to the turn.

tests/e2e/support/game.ts · 451 lines

tests/e2e/support/game.ts451 lines · TypeScript

⋯ 370 lines hidden (lines 1–370)1import type { Page } from "@playwright/test";
2import { expect } from "@nuxt/test-utils/playwright";
3import type { TurnFixture } from "../../../utils/fixtures/turn-fixture";
4 
5/**
* Shared e2e helpers. The game is AI-backed, so real runs would be slow, costly,
* and non-deterministic — every spec mocks the two API routes (`page.route`) and
* drives the real UI flow against fixed responses. No OpenAI key is needed.
*/
10 
11/**
* A scripted turn. Aliased to the canonical `TurnFixture` (issue #105) so the e2e
* mocks and dev mode's fixture lane share ONE shape and can't drift — the import is
* type-only (erased at build), so it adds no runtime coupling to the Playwright run.
*/
16export type RippleFixture = TurnFixture;
17 
18/** Builds a /api/send-message payload in the exact shape the game store consumes. */
19function sendMessageResponse(f: RippleFixture = {}) {
const progressChange = f.progressChange ?? 20;
const era = f.era ?? "Alexandria, 48 BC";
const diceRoll = f.diceRoll ?? 14;
return {
  success: true,
  message: "Timeline updated",
  data: {
    userMessage: "mocked",
    figure: {
      name: f.figureName ?? "Cleopatra",
      era,
      descriptor: f.descriptor ?? "Queen of Egypt",
    },
    diceRoll,
    diceOutcome: f.diceOutcome ?? "Success",
    // Judge-of-craft fields: the default is an untilted die (sound, ±0),
    // so specs that predate the judge keep their exact dice displays.
    naturalRoll: f.naturalRoll ?? diceRoll,
    rollModifier: f.rollModifier ?? 0,
    craft: f.craft ?? "sound",
    craftReason: f.craftReason ?? "",
    staked: f.staked ?? false,
    characterResponse: {
      message: f.message ?? "A bold notion — I shall weigh it.",
      action:
        f.action ?? "Cleopatra dispatches envoys to Rome a decade early",
    },
    timeline: {
      headline: f.headline ?? "Envoys redraw the map of power",
      detail:
        f.detail ??
        "Egypt courts Rome ahead of schedule and alliances shift.",
      era,
      progressChange,
      // Defaults baseProgressChange to the final swing. Since #135 the
      // reveal's equation always renders (collapsing to (+N → +N%) on an
      // unamplified turn); a fixture only changes its CONTENTS, not whether
      // it appears.
      baseProgressChange: f.baseProgressChange ?? progressChange,
      valence:
        f.valence ??
        (progressChange > 0
          ? "positive"
          : progressChange < 0
            ? "negative"
            : "neutral"),
      anachronism: f.anachronism ?? "in-period",
    },
    error: null,
  },
};
71}
72 
73/** Routes /api/send-message to a fixed ripple (or a per-call function for variation). */
74export async function mockSendMessage(
page: Page,
fixture: RippleFixture | (() => RippleFixture) = {},
77) {
await page.route("**/api/send-message", async (route) => {
  const f = typeof fixture === "function" ? fixture() : fixture;
  // Echo back the figure the player actually addressed (the store registers
  // contacts from the response), unless the fixture pins one explicitly.
  let requested: string | undefined;
  try {
    requested = (route.request().postDataJSON() as { figureName?: string })
      ?.figureName;
  } catch {
    /* no/!json body */
  }
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify(
      sendMessageResponse({ ...f, figureName: f.figureName ?? requested }),
    ),
  });
});
97}
98 
99/** Routes /api/objective to a fixed, freshly "composed" objective. */
100export async function mockObjective(
page: Page,
objective: { title: string; description: string; era: string; icon: string },
103) {
await page.route("**/api/objective", async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ success: true, objective }),
  });
});
111}
112 
113/** A resolved, DECEASED figure — the default contact fixture. #73 requires a
*  grounded, deceased figure to send, so a deceased default keeps the happy-path
*  specs sending without each re-registering grounding. (Cleopatra, 69–30 BC.) */
116const RESOLVED_FIGURE = {
resolved: true,
name: "Cleopatra",
description: "Queen of Egypt",
born: { signed: -69, display: "69 BC" },
died: { signed: -30, display: "30 BC" },
living: false,
123};
124 
125/**
* Routes /api/figure (the grounding lookup FigurePicker fires on selection) to a
* fixed result. Defaults to a resolved, deceased figure (RESOLVED_FIGURE) so the
* contact is sendable under the #73 require-grounding gate without every spec
* re-registering. Pass `{ resolved: false }` to exercise the unresolved/blocked path.
*
* NOTE: the route pattern must NOT swallow /api/figure-search (the autocomplete),
* which has its own mock below — hence the exact-or-query matcher.
*/
134export async function mockFigure(
page: Page,
figure: Record<string, unknown> = RESOLVED_FIGURE,
137) {
await page.route(/\/api\/figure(\?|$)/, async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ name: "", resolved: false, ...figure }),
  });
});
145}
146 
147/**
* Routes /api/figure-search (the name-autocomplete combobox, fired while typing)
* to a fixed result set — default empty, so existing specs type without a
* dropdown appearing and never touch live Wikipedia.
*/
152export async function mockFigureSearch(
page: Page,
results: Array<{
  name: string;
  description?: string;
  thumbnail?: string;
}> = [],
159) {
await page.route("**/api/figure-search*", async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ results }),
  });
});
167}
168 
169const DEFAULT_SUGGESTIONS = [
{
  name: "Wilhelm II",
  reason:
    "German Emperor who could restrain Vienna before the crisis spread.",
  lifespan: "1859 – 1941",
},
{
  name: "Edward Grey",
  reason:
    "Britain's foreign secretary — early mediation could cool the crisis.",
  lifespan: "1862 – 1933",
},
{
  name: "Nicholas II",
  reason: "Russian Emperor; limiting mobilization could avert escalation.",
  lifespan: "1868 – 1918",
},
187];
188 
189/**
* Routes /api/suggestions (the tool-using agent FigurePicker loads on mount) to a
* fixed set, so specs never trigger the live agent. Registered inside startCuratedRun
* because the load fires as the board mounts (and by chain-chip.spec, which sets
* up its own board to read a specific objective's anchor).
*/
195export async function mockSuggestions(
page: Page,
suggestions = DEFAULT_SUGGESTIONS,
198) {
await page.route("**/api/suggestions", async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ success: true, suggestions, fallback: false }),
  });
});
206}
207 
208/**
* Routes /api/chronicle (the non-blocking living-chronicle refresh fired after each
* resolved turn) to a fixed telling, so specs stay offline + deterministic. The call
* is fire-and-forget, so most specs never assert on it — but it must be mocked or it
* would hit the live network mid-run.
*/
214export async function mockChronicle(
page: Page,
chronicle: { title: string; paragraphs: string[] } = {
  title: "The Account So Far",
  paragraphs: [
    "History bends under a stranger's words.",
    "The old certainties waver.",
  ],
},
223) {
await page.route("**/api/chronicle", async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ success: true, chronicle }),
  });
});
231}
232 
233/**
* Routes /api/research (the Archivist study, fired when the player clicks "Study
* them") to a fixed brief, so specs stay offline + deterministic.
*/
237async function mockResearch(
page: Page,
study = {
  atThisMoment: "At the height of their powers.",
  grasp: ["the state of their art"],
  reaching: ["the next problem before them"],
  cannotYetKnow: "what the centuries after them would discover",
},
245) {
await page.route("**/api/research", async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ success: true, study }),
  });
});
253}
254 
255/** Routes /api/lookup (the Archive's freeform topic lookup) to a fixed result. */
256async function mockLookup(
page: Page,
lookup = {
  topic: "Gunpowder",
  summary: "An explosive mix of saltpeter, charcoal, and sulfur.",
  requires: ["saltpeter", "charcoal", "sulfur"],
  knownSince: "China, ~9th century",
},
264) {
await page.route("**/api/lookup", async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({ success: true, lookup }),
  });
});
272}
273 
274/** From the mission briefing, choose the first curated objective and begin the run. */
275export async function startCuratedRun(page: Page) {
// FigurePicker grounds whoever you select and loads suggestions on mount; default
// both to deterministic, offline fixtures. (A later mockFigure call wins, since
// route handlers run last-registered-first; suggestions load on mount, so they're
// mocked here, before the board appears.) The chronicle refresh fires after the
// first turn resolves, and the Archive study fires on demand — mock both here too.
await mockFigure(page);
await mockFigureSearch(page);
await mockSuggestions(page);
await mockChronicle(page);
await mockResearch(page);
await mockLookup(page);
await expect(page.locator('[data-testid="mission-select"]')).toBeVisible();
await page.locator('[data-testid="objective-option"]').first().click();
await page.locator('[data-testid="begin-button"]').click();
// The board is now live.
await expect(page.locator('[data-testid="message-input"]')).toBeVisible();
292}
293 
294/** Picks a figure by typing into the contact input (decoupled from the now
*  objective-relevant suggestion chips). */
296export async function selectFigure(page: Page, name: string) {
// Grounding is selection-driven (#197): typing only builds the autocomplete list;
// the figure is grounded when you PICK from it. So stub the list to offer this name,
// type it, then click the option — the way a player actually addresses a contact.
// (Clear first so re-addressing the SAME figure across turns still re-fires.)
await mockFigureSearch(page, [{ name }]);
// A prior pick auto-collapses the fold (the figure is addressed); reopen it — and let
// any pending collapse settle — so the combobox is visible before we address again.
await ensureAddressOpen(page);
const combo = page
  .locator('[data-testid="figure-picker"]')
  .getByRole("combobox");
await combo.click();
await combo.fill(""); // clear any prior name (re-addressing across turns)
await combo.pressSequentially(name, { delay: 20 }); // real typing drives the autocomplete
await page
  .locator('[data-testid="figure-search-option"]')
  .filter({ hasText: name })
  .first()
  .click();
316}
317 
318/**
* The send button (the wax seal). Located by its ARIA name rather than data-testid:
* the testid is a fallthrough attr on the send-control wrapper and doesn't reach the
* rendered <button>, but the static aria-label does (and survives the seal's changing
* state word, since aria-label fixes the accessible name to 'Send message').
*/
324export function sendButton(page: Page) {
return page.getByRole("button", { name: "Send message" });
326}
327 
328/** Fills the composer and sends, asserting the button is ready first. */
329export async function fillAndSend(page: Page, text: string) {
await page.locator('[data-testid="message-input"] textarea').fill(text);
const send = sendButton(page);
await expect(send).toBeEnabled();
await send.click();
334}
335 
336// ── Reveal-flow helpers ──────────────────────────────────────────────
337// The game now lives on the page-by-page leaf flow at /play: a turn resolves onto the
338// Judgment page, the player turns each reveal page (explicit Continue), the change
339// commits at the Ripple page, and the full Spine + Chronicle + Thread are read from
340// the summonable ❖ Record overlay.
341 
342/** Turn the page — the explicit Continue control (auto-waits for the reveal page). */
343export async function turnPage(page: Page) {
await page.locator('[data-testid="codex-continue"]').click();
345}
346 
347/** Open the ❖ Record overlay (the live Spine + Chronicle + conversation Thread).
*  The Thread fold (the reused MessageHistory) is collapsed by default — open it so
*  its reply / action / dice / craft / equation reads are present. */
350export async function openRecord(page: Page) {
await page.locator('[data-testid="codex-record-toggle"]').click();
const record = page.locator('[data-testid="codex-record"]');
await expect(record).toBeVisible();
// The Thread fold (the reused MessageHistory) is collapsed by default — open it
// so its reply / action / dice / craft / equation reads are present.
const thread = page.locator('[data-testid="record-thread-toggle"]');
await thread.click();
return record;
359}
360 
361/** Dismiss the Record overlay (Escape). */
362export async function closeRecord(page: Page) {
await page.keyboard.press("Escape");
364}
365 
366/**
* Walk the explicit-Continue reveal from the post-send Judgment page to the END of
* the turn — the next Dispatch (non-terminal) or the End screen (terminal). Returns
* which it landed on. Clicks Continue until one appears (no auto-advance now).
*/
371export async function revealWalk(page: Page): Promise<"dispatch" | "end"> {
// 18 iterations: five Continue clicks plus the transition windows the
// settled-composer guard below deliberately waits out (520-560ms each).
for (let i = 0; i < 18; i++) {
  if (
    await page
      .locator('[data-testid="end-game-screen"]')
      .isVisible()
      .catch(() => false)
  )
    return "end";
  if (
    (await page
      .locator('[data-testid="message-input"]')
      .isVisible()
      .catch(() => false)) &&
    // Mid page-turn the leaving (KeepAlive-cached) dispatch is still visibly
    // crossfading under the incoming leaf — only a SETTLED composer means the
    // turn is over (the leave classes exist for exactly the transition window).
    (await page
      .locator(".codex-leaf-leave-active, .codex-turn-leave-active")
      .count()) === 0
  ) {
    // The explicit walk clicks through faster than the 1s send window, so a
    // following send would be rate-limited — clear the window before returning.
    await page.waitForTimeout(1100);
    return "dispatch";
  }
  const cont = page.locator('[data-testid="codex-continue"]');
  if (await cont.isVisible().catch(() => false))
    await cont.click().catch(() => {});
  else await page.waitForTimeout(250);
}
throw new Error(
  "revealWalk: neither the next Dispatch nor the End screen appeared",
⋯ 46 lines hidden (lines 406–451)406  );
407}
408 
409/**
* The address fold (the letterhead) auto-collapses once a contactable figure is
* grounded, hiding the FigurePicker's dossier / when-slider / pin-moment. Reopen it
* so those are assertable again. (No-op if already open.)
*/
414export async function ensureAddressOpen(page: Page) {
await page.waitForTimeout(700); // let grounding + the auto-collapse settle
const details = page.locator("details.address");
const isOpen = await details
  .evaluate((d) => (d as HTMLDetailsElement).open)
  .catch(() => false);
if (!isOpen) await page.locator('[data-testid="address-toggle"]').click();
await expect(details).toHaveJSProperty("open", true);
422}
423 
424/** Count of spent message-pips in the masthead counter (it shows pips, not
*  "N/5" text): spent = TOTAL − remaining. */
426export function spentPips(page: Page) {
return page.locator('[data-testid="messages-counter"] .pip.spent');
428}
429 
430/** Suppress the one-time fiction notice (#330) — the disclosure dialog a fresh
*  device sees on /play, which would sit over whatever a spec drives. MUST be
*  called before goto. The notice's own coverage seeds nothing. */
433export async function suppressFictionNotice(page: Page) {
await page.addInitScript((k) => {
  localStorage.setItem(
    k,
    JSON.stringify({ noticeAckAt: "2026-01-01T00:00:00.000Z" }),
  );
}, "everwhen:legal:v1");
440}
441 
442/** Suppress the guided first-run tour (its coach-mark can overlap the Continue
*  control mid-reveal) AND the fiction notice that would otherwise cover the
*  board first. MUST be called before goto. coaching.spec drives the tour
*  itself, so it seeds only suppressFictionNotice. */
446export async function suppressTour(page: Page) {
await page.addInitScript((k) => {
  localStorage.setItem(k, JSON.stringify({ status: "completed" }));
}, "everwhen:coaching:v1");
await suppressFictionNotice(page);
451}

Verification and artifacts

Full battery on the production build: lint 0 errors, vitest 1430/1430 (specs updated faithfully where presentation moved — each noted in agent reports), typecheck clean, e2e 38/38 with all routes mocked. Eighty-eight screenshots per round across five viewport/theme configs drove three critique rounds; the before/after comparison page linked from the PR pairs the original build against the shipped codex. The process artifacts — problem book, design language, atelier mockups — are committed under docs/design/ so future surfaces can be built to the same hand.