/* style.css — the worn manorial ledger. Parchment-grey, ink, ox-blood rubric.
   Portrait, touch-first, large tap targets, legible outdoors. Mouse works too. */

:root {
  --parchment: #cdc3a5; /* barely washed-out from #cabf9e — a whisper of age (USER) */
  --parchment-dark: #b8ad8d;
  --parchment-shade: #9e9271;
  --ink: #2b2419;
  --ink-soft: #4a4233;
  --rubric: #7a2b22;
  --woad: #2f4858;
  --bad: #6e2018;
  --good: #4d5a32;
  --line: rgba(43, 36, 25, 0.25);
  --tap: 48px; /* minimum tap target */
}

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

html,
body {
  margin: 0;
  min-height: 100%; /* min- (not fixed height) so body grows with content, never forcing extra scroll */
  background: #1c1812;
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

#app {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* dynamic viewport: tracks the iOS URL-bar show/hide so #app fills exactly
                         the visible area — no document taller than the viewport, so no scroll past
                         the content end into the dark body bg (USER P1 scroll-void, cycle 65). */
  display: flex;
  flex-direction: column;
  background-color: var(--parchment);
  /* Parchment TOOTH, not graph paper (USER 2026-06-16 19:46, re-flagged): the old regular 4px dot lattice
     read as a mechanical grid. Replaced with an ORGANIC texture — fine fractal-noise fibre (an SVG turbulence
     tile, large + irregular so no grid emerges) under two soft, off-centre mottling blots. */
  background-image:
    radial-gradient(ellipse at 22% 26%, rgba(150, 124, 74, 0.05), transparent 58%),
    radial-gradient(ellipse at 80% 70%, rgba(116, 92, 52, 0.05), transparent 54%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23p)' opacity='0.05'/></svg>");
  background-size: 140% 140%, 160% 160%, 220px 220px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

/* The scene canvas sits at the top like a full illuminated miniature. */
#scene {
  display: block;
  width: 100%;
  height: 62vh; /* fallback */
  height: 62svh; /* small-viewport height: the scene claims 62% of the URL-bar-SHOWN viewport, so
                    it never over-reserves the large-viewport height and pushes the overlay past the
                    fold (the root of the scroll-void); pairs with #app's 100dvh. */
  min-height: 360px;
  max-height: 600px;
  border-bottom: 3px solid var(--ink);
  background: #ddd5c2;
}

#overlay {
  flex: 1;
  padding: 12px 12px 24px;
}

/* ---------- Headings & shared ---------- */
h1,
h2,
h3 {
  /* the period uncial display face for panel headers (self-hosted, offline-safe);
     short titles only, so the wide uncial letterforms stay tidy — body prose keeps
     the readable serif. */
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0.4em 0 0.3em;
}

/* The bottom-nav bar. Position/colour come from the inline fallback in ui.js (position:fixed;bottom:0).
   HARDEN it against the iOS dynamic-viewport / momentum-scroll jank where a fixed bottom bar can "come
   unstuck" and scroll with the page (USER 2026-06-16 20:36): promote it to its own compositing layer so
   the compositor keeps it pinned, and pad for the home-indicator safe area so it never sits under it. */
.tabbar {
  will-change: transform;
  transform: translateZ(0);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* The bottom-nav tab labels: the same period uncial display face, kept small + spaced. */
.tabbar-label {
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  letter-spacing: 0.02em;
}

/* The one-line PERIOD rubric under a view's title (USER 2026-06-16: say plainly what each tab
   is — Folk / Chronicle / Codex). A quiet faded-ink incipit beneath the uncial h2. CLOUD's
   tabIntro() carries an italic-muted inline fallback, so these values also stand alone if it's
   ever dropped; the extras (faded ink, a readable measure) layer on top now. */
.tab-intro {
  margin: 0.1em 0 0.95em;
  max-width: 48ch;
  color: #5b4a30;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
/* The same rubric for the Vill SCENE tab, which has no h2 — a faint line above the canvas
   teaching the tap-to-lore gesture. Centred, a touch quieter; shown only on the scene tab
   (main.js toggles it with the canvas). */
.scene-intro {
  display: none;
  margin: 0.15rem 0.7rem 0.5rem;
  text-align: center;
  color: #6a5638;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* Drawn parchment TAB ICONS over CLOUD's text-glyph fallbacks (USER 2026-06-16: period-sense
   marks — a lodestar for Home, a hamlet for The Vill, folk for The Folk, a book for the Codex).
   The text glyph is hidden and a manuscript ink icon is MASKED in, so it follows the tab's ink
   colour (active/inactive) and never depends on an emoji font. Chronicle/More keep the glyph. */
.tabbar-btn.tab-play .tabbar-glyph,
.tabbar-btn.tab-scene .tabbar-glyph,
.tabbar-btn.tab-vill .tabbar-glyph,
.tabbar-btn.tab-chronicle .tabbar-glyph,
.tabbar-btn.tab-codex .tabbar-glyph {
  position: relative;
  color: transparent; /* hide the ✶/⌂/❧/✒/❦ text fallback beneath the drawn icon */
}
.tabbar-btn.tab-play .tabbar-glyph::before,
.tabbar-btn.tab-scene .tabbar-glyph::before,
.tabbar-btn.tab-vill .tabbar-glyph::before,
.tabbar-btn.tab-chronicle .tabbar-glyph::before,
.tabbar-btn.tab-codex .tabbar-glyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.55rem;
  height: 1.55rem;
  transform: translate(-50%, -50%);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.55;             /* inactive tabs dimmed so the ACTIVE tab's emblem reads brighter */
  transition: opacity 0.15s ease;
}
/* COLOUR tab emblems (USER 2026-06-16: all tab icons to colour). Full-colour images, so the old
   ink-MASK tint is gone — active/inactive now reads via opacity (active = full below). Bespoke
   folk-hand emblems where they exist (book=Codex, family=Folk, charter=Chronicle's written
   record); the colour scene sprites for the rest (sheaf=Home's harvest, croft=The Vill). */
.tabbar-btn.active .tabbar-glyph::before { opacity: 1; }
.tab-play .tabbar-glyph::before { background-image: url("./assets/scene/plants/sheaf.png"); }
.tab-scene .tabbar-glyph::before { background-image: url("./assets/scene/crofts/dwelling_cottage_flat.png"); }
.tab-vill .tabbar-glyph::before { background-image: url("./assets/scene/emblems/emblem_family.png"); }
.tab-chronicle .tabbar-glyph::before { background-image: url("./assets/scene/emblems/emblem_charter.png"); }
.tab-codex .tabbar-glyph::before { background-image: url("./assets/scene/emblems/emblem_book.png"); }

.section-label,
.work-label,
.log-label {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  margin: 14px 0 8px;
  padding-bottom: 3px;
  font-size: 0.82rem;
}

.btn {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--parchment-dark);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 10px 12px;
  min-height: var(--tap);
  cursor: pointer;
  transition: transform 0.05s ease, background 0.1s ease;
}
.btn:active {
  transform: translateY(1px);
  background: var(--parchment-shade);
}
.btn.small {
  min-height: 40px;
  font-size: 0.85rem;
  padding: 8px 10px;
}
.btn.big {
  width: 100%;
  margin-top: 10px;
  font-size: 1.15rem;
  padding: 14px;
}
.btn-primary {
  background: var(--rubric);
  color: var(--parchment);
  border-color: #2b1410;
}
.btn.danger {
  border-color: var(--bad);
  color: var(--bad);
}

/* ---------- Start screen ---------- */
.start-screen {
  padding: 6px 4px 30px;
}

/* The title SPLASH — the hero key-art as a full title card on first entry; a tap
   advances to the start screen (region select) already rendered beneath it. It is
   pinned to the #app column (max-width 560px) so it matches the game's portrait
   presentation rather than stretching across a wide desktop window. */
.title-splash {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  cursor: pointer;
  background: #1c1812 url("./assets/hero/title-keyart.jpg") center center / cover no-repeat;
  /* dark scrims top and bottom so the title and credit stay legible over the art */
  box-shadow: inset 0 110px 80px -50px rgba(18, 14, 9, 0.92),
    inset 0 -150px 90px -50px rgba(18, 14, 9, 0.95);
  /* The splash RESTS VISIBLE (opacity:1); the fade-in is an enhancement only. Fill-mode is
     left at the default (none) so that whenever the reveal animation does NOT run — a browser
     that skips/throttles it, prefers-reduced-motion, or the tab loaded HIDDEN so the document
     timeline is frozen at frame 0 — the splash still shows at full opacity instead of being
     stranded invisible. (Was `both` + from{opacity:0}, which could leave it stuck at 0 — the
     USER P1 "I don't see the splash screen when I load the URL".) */
  opacity: 1;
  animation: splashIn 0.6s ease;
  -webkit-tap-highlight-color: transparent;
}
@keyframes splashIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .title-splash { animation: none; } /* honour reduced-motion: no fade, just the visible splash */
}
/* Dismiss fade: lets the title air (started by the tap) breathe over the splash
   for a beat as it dissolves into the game. */
.title-splash.fading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.85s ease;
}
.splash-top {
  padding: 6.5vh 18px 0;
}
.splash-title {
  margin: 0;
  /* the period uncial display face (self-hosted, offline-safe) — early-medieval and
     historically apt for 1086, unlike the later blackletter hand. */
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  font-size: clamp(2.4rem, 12.5vw, 3.7rem); /* uncial is wide — keep safe side margins on narrow phones */
  letter-spacing: 0.04em;
  color: #9e3a2c; /* ox-blood / rubric red, lifted just enough to read over the dark sky */
  text-shadow: 0 0 2px rgba(20, 6, 4, 0.9), 0 2px 18px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.95);
}
.splash-foot {
  width: 100%;
  margin-top: 3.4vh; /* sit the credit cluster up in the open sky below the title, clear of the figure */
  padding: 0 18px;
}
.splash-tap {
  margin-top: 2px;
  font-family: "Domesday Latin", "Uncial Antiqua", Georgia, serif;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: #93a7b2; /* a cold, lightened woad — a distinct period hue, bleak against the warm title */
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.92);
  animation: tapBreathe 6.5s ease-in-out infinite; /* very slow, guttering breath — bleak, not jaunty */
}
@keyframes tapBreathe {
  0%, 100% { opacity: 0.36; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.018); }
}
/* Studio credit — cinematic small-caps, subtle; the copyright tiniest of all. */
.splash-studio {
  margin-top: 34px; /* the credit sits lower, well below 'tap to start' */
  font-variant: small-caps;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: rgba(208, 197, 166, 0.46); /* faded parchment — recessive, subtle */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.splash-copy {
  margin-top: 7px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(208, 197, 166, 0.3); /* the faintest line of all */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.78);
}
.title-illum {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto; /* show the full peasant-harvest scene, not a cropped slice */
  max-height: 46vh;
  object-fit: cover;
  object-position: center;
  border: 2px solid var(--ink);
  outline: 1px solid #b08b3a;
  outline-offset: 2px;
  box-shadow: 0 2px 8px rgba(20, 14, 8, 0.5);
  margin: 4px 0 10px;
}
/* Decision key-art — a framed banner above each forced-choice modal (USER-authorised set;
   CLOUD wired the <figure class="decision-art"> into showDecision, hidden until the image
   lands). A 16:9 cinematic scene that reads at a glance without dominating the modal; same
   ink+gold frame as the hero illumination, for one coherent family. Consistent across all 25. */
.decision-art { margin: 0 0 0.75rem; }
.decision-art-img {
  display: block;
  width: 100%;
  max-width: 100%;
  /* The banner set was regenerated to 16:9 (USER 2026-06-17) — match it so each cinematic
     scene shows UN-CROPPED (a 2.36:1 slot letterboxed them / a 3:2 slot side-cropped them).
     (murrained_ox is the lone 2.36 exception, side-cropped here pending a USER ratio call.) */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: 2px solid var(--ink);
  outline: 1px solid #b08b3a;
  outline-offset: 2px;
  box-shadow: 0 2px 8px rgba(20, 14, 8, 0.5);
  filter: sepia(0.05);
}
/* The forced-choice box (USER 2026-06-16 20:36: the TOP LINE bold, in colour, in the game uncial face,
   with a clear break before the body). The "A choice…" tag + the title read as one rubric heading block,
   then a gap, then the prose. */
.decision-tag {
  font-variant: small-caps;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  color: var(--rubric);
  opacity: 0.85;
  margin-bottom: 0.1rem;
}
.decision-title {
  /* the TOP LINE — bold, in the rubric colour, in the period uncial display face (h2 already sets the face) */
  font-weight: 700;
  color: var(--rubric);
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0 0 0.7rem;            /* the line break / gap after the opening heading, before the prose */
}
.decision-prose {
  line-height: 1.55;
  margin: 0 0 0.4rem;
}
/* The prose's opening SENTENCE is split into its own lead element (structure). It reads in the SAME
   body font as the rest of the prose — the uncial display face was illegible in a long paragraph (USER
   2026-06-19: "the first paragraph being in the same form as the title is hard to read"). Just a touch
   heavier for a lead-in, but the same letterforms/size as the body. */
.decision-lead {
  display: block;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 0.4rem;
}
/* Each forced-choice OPTION button stacks its parts: the CHOICE itself on its own line, bold and oxblood;
   the consequence/detail beneath in normal text (USER 2026-06-19: the two were running together inline). */
.decision-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.25rem;
}
.decision-opt-label {
  display: block;
  font-weight: 700;
  color: var(--rubric);
  line-height: 1.3;
}
.decision-opt-hint {
  display: block;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
}
.game-title {
  /* the same period uncial as the splash title, so the splash → start page reads as one piece */
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  font-size: 2.9rem;
  text-align: center;
  letter-spacing: 0.03em;
  color: var(--rubric);
  margin: 6px 0 0;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.subtitle {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 10px;
}
.flavour {
  line-height: 1.45;
  margin: 8px 2px 4px;
}
.region-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.region-card {
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 10px 12px;
  background: var(--parchment-dark);
  cursor: pointer;
  overflow: hidden;
}
/* A manuscript banner heads each country card: a peaceful ploughing border for the
   working South, the harrying battle for the laid-waste North. Self-hides if unkeyed. */
.region-banner {
  display: none;
  height: 118px; /* tall enough to show the scene's figures, not a thin sliver */
  margin: -10px -12px 8px;
  border-bottom: 2px solid var(--ink);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 50%;
  filter: sepia(0.16);
}
.region-south .region-banner {
  display: block;
  background-image: url("assets/manuscript/journal/queenmary-reeve.jpg");
  background-position: center 78%; /* drop the plain red wall above; show the reeve & reapers */
}
.region-north .region-banner {
  display: block;
  background-image: url("assets/manuscript/journal/bayeux-battle3.jpg");
  background-position: center 42%; /* the mounted knights, not just the slain in the border */
}
.region-card.selected {
  border-color: var(--rubric);
  background: var(--parchment);
  box-shadow: inset 0 0 0 2px var(--rubric);
}
.region-card h3 {
  margin: 0;
}
.region-sub {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.region-card p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.region-warning {
  margin-top: 6px !important;
  color: var(--bad);
  font-weight: bold;
  font-size: 0.85rem !important;
}
.name-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: stretch;
}
.name-input {
  flex: 1;
  min-width: 0; /* let the input shrink so the row never overflows on a phone */
  padding: 12px;
  font-family: inherit;
  font-size: 1rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--parchment);
  color: var(--ink);
}
.name-input.needs-name {
  border-color: var(--bad);
  background: #e7d3c4;
}
.name-input.needs-name::placeholder { color: var(--bad); }
.name-suggest {
  flex: 0 0 auto;
  white-space: nowrap;
}
.start-foot {
  text-align: center;
  margin-top: 14px;
}

/* ── The START PAGE goes DARK (this page ONLY — the rest of the game keeps the faded
   parchment ledger). The peasant illumination glows against the slate, and the page flows
   straight out of the dark title splash. Everything is scoped to .start-screen /
   #app:has(.start-screen) so no other screen is touched. */
#app:has(.start-screen) { background: #201e1a; background-image: none; }
.start-screen { background: #201e1a; color: #cdc0a3; }
.start-screen .game-title { color: #bb4636; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.start-screen .title-illum { border-color: #4a4334; outline-color: #9a7b3a; }
.start-screen .subtitle { color: #b3a888; }
.start-screen .flavour { color: #c7bb9b; }
.start-screen .title-flourish .flourish-gloss { color: #a99f87; }
.start-screen .flourish-oe .flourish-word { color: #c9986a; }
.start-screen .flourish-la .flourish-word { color: #c98a4a; }
/* Rubricated section headings — ox-blood, then woad (the period red-and-blue alternation),
   lifted so they read over the slate. */
.start-screen .section-label { color: #d76a58; border-bottom-color: rgba(215, 106, 88, 0.42); } /* 4.83 contrast on slate — clears AA small-text (REVIEWER cyc-90) */
.start-screen .section-rubric { color: #d76a58; border-bottom-color: rgba(215, 106, 88, 0.42); }
.start-screen .section-woad { color: #8aa6b6; border-bottom-color: rgba(138, 166, 182, 0.42); }
/* Region cards on dark */
.start-screen .region-card { background: #2a2820; border-color: #4a4334; color: #d8cbb0; }
.start-screen .region-card h3 { color: #e7dcc1; }
.start-screen .region-sub { color: #a99f87; }
.start-screen .region-banner { border-bottom-color: #4a4334; }
.start-screen .region-warning { color: #e89079; } /* brightened for ≥4.5 small-text contrast on slate (REVIEWER cyc-88 P3) */
.start-screen .region-card.selected { background: #322f26; border-color: #9a7b3a; box-shadow: inset 0 0 0 2px #9a7b3a; }
/* Name input on dark */
.start-screen .name-input { background: #26241e; border-color: #4a4334; color: #ddd0b5; }
.start-screen .name-input::placeholder { color: #8a8270; }
.start-screen .name-input.needs-name { border-color: #c2503f; background: #2e2620; }
/* Foot/secondary buttons go dark; the primary Begin keeps its ox-blood (declared AFTER so it wins) */
.start-screen .btn { background: #2c2a23; border-color: #4a4334; color: #d4c8ad; }
.start-screen .btn-primary { background: #8a2f24; border-color: #20100c; color: #f0e4c8; }
.start-screen .build-stamp { color: #8a8270 !important; }

/* ---------- HUD ---------- */
.hud-header {
  text-align: center;
}
.date-line {
  font-variant: small-caps;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.season-line {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pill {
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 0.8rem;
  background: var(--parchment-dark);
}
.pill.weather {
  background: var(--woad);
  color: var(--parchment);
  border-color: #1c2c36;
}
.pill.cycle {
  background: var(--ink-soft);
  color: var(--parchment);
}
.feast-line {
  margin-top: 6px;
  font-style: italic;
  color: var(--rubric);
  font-size: 0.9rem;
}
.feast-warn {
  display: inline-block;
  font-style: normal;
  font-weight: bold;
  font-size: 0.8rem;
}
/* A work action on a holy-day week: marked so the player knows, before tapping,
   that labouring it is a sin against the conscience. */
.action.breaks-holy {
  border-color: var(--rubric);
  box-shadow: inset 0 0 0 1px rgba(122, 43, 34, 0.5);
}
.holy-warn { color: var(--rubric); font-weight: bold; }
.action.breaks-holy .action-hint { color: var(--rubric); font-style: italic; }

.ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 8px;
}
/* The larder groups grain + victuals (the things you eat) under one heading. */
.larder {
  margin-top: 2px; /* inside the .hud-sec fold now — no big gap needed (USER: take less room) */
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 6px 9px;
  background: rgba(120, 100, 60, 0.07);
}
.larder-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.larder-title {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-weight: bold;
}
.larder-weeks {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.larder-weeks.bad {
  color: var(--bad);
  font-weight: bold;
}
.larder-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.stat {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.06);
}
/* Per-resource illuminated watermark: a faint oak-gall glyph in the top-right of
   each ledger box (assets/icons/ledger/*.svg). Hidden until a stat carries a key. */
.stat-icon {
  display: none;
  position: absolute;
  top: 5px;
  right: 6px;
  width: 18px;
  height: 18px;
  opacity: 0.34;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.stat-grain .stat-icon { display: block; background-image: url("assets/icons/ledger/grain.svg"); }
.stat-victuals .stat-icon { display: block; background-image: url("assets/icons/ledger/victuals.svg"); }
.stat-seed .stat-icon { display: block; background-image: url("assets/icons/ledger/seed.svg"); }
.stat-firewood .stat-icon { display: block; background-image: url("assets/icons/ledger/firewood.svg"); }
.stat-silver .stat-icon { display: block; background-image: url("assets/icons/ledger/silver.svg"); }
.stat-salt .stat-icon { display: block; background-image: url("assets/icons/ledger/salt.svg"); }
.stat-beasts .stat-icon { display: block; background-image: url("assets/icons/ledger/beasts.svg"); }
.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.stat-value {
  font-size: 1rem;
  font-weight: bold;
  overflow-wrap: anywhere; /* a value never overflows its grid cell at phone width */
}
/* The Beasts box holds a long compound value ("2 ox · 1 cow · 2 swine · 3 sheep · 4 hens")
   in a third-width ledger cell — set it smaller and let it wrap to a tidy stack rather than
   bursting the box or forcing a wide row. */
.stat-beasts .stat-value {
  font-size: 0.82rem;
  line-height: 1.25;
}
/* The last turn's net change, shown small beside the value so a choice's effect
   is felt at a glance: green up, ox-blood down. */
.stat-delta {
  font-size: 0.72rem;
  font-weight: bold;
  margin-left: 5px;
  vertical-align: middle;
}
.stat-delta.up { color: var(--good); }
.stat-delta.down { color: var(--bad); }
.stat-sub {
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.bars {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bar-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.bar-track {
  height: 12px;
  background: var(--parchment-shade);
  border: 1px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--good);
}
.bar-fill.bad {
  background: var(--bad);
}

.souls {
  margin-top: 12px;
}
.souls-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.souls-label {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.souls-folk {
  font-family: inherit;
  font-size: 0.82rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--woad);
  background: rgba(88, 106, 118, 0.09);
  border: 1px solid var(--woad);
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.souls-folk:active { color: var(--rubric); background: rgba(122, 43, 34, 0.1); }
.souls-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.soul {
  font-family: inherit;
  color: var(--ink);
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.soul:active { background: var(--parchment-shade); }
.soul.elder {
  font-style: italic;
}
.soul.child {
  color: var(--ink-soft);
}
/* A soul abed (sick or wounded) is marked in ox-blood; one frail with age or hurt
   reads muted and italic — so who is struggling shows at a glance. */
.soul.soul-ill {
  color: var(--bad);
  border-color: var(--bad);
}
.soul.soul-frail {
  font-style: italic;
  color: var(--ink-soft);
  border-style: dashed;
}

.cycle-hint {
  margin-top: 10px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Critical alerts — the few things that kill or ruin a household, shown
   prominently right under "This week". `crit` is loud ox-blood; `warn` amber. */
.alerts {
  margin: 10px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alert {
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 3px;
  border-left: 4px solid;
}
.alert-mark { font-weight: bold; }
.alert-crit {
  color: var(--parchment);
  background: var(--bad);
  border-left-color: #2b1410;
}
.alert-crit .gloss-link { color: var(--parchment); }
.alert-warn {
  color: var(--ink);
  background: rgba(176, 139, 58, 0.16);
  border-left-color: #b08b3a;
}

/* Counsel — situational hints (LOCAL may restyle) */
/* Counsel — a rubricated marginal gloss, as a scribe's note in the margin. */
/* Counsel — the season's advice. CLOUD's inline fallback paints it in the FIELD-GREEN
   accent (the green left edge + tint), so the CSS here agrees with that idiom rather
   than fighting it: the old rubric-red edge + gilt inset shadow read as a different,
   mismatched callout once the inline green won the colour properties (a layering clash).
   Now both views read as one green "counsel" callout. */
.counsel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #6f7d3a;
  border-radius: 3px;
  padding: 7px 10px 8px;
  background: rgba(111, 125, 58, 0.11);
}
.counsel-label {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: #5a6b2e;
  font-size: 0.78rem;
  margin-bottom: 3px;
}
.counsel-line {
  font-size: 0.86rem;
  line-height: 1.4;
  margin-top: 2px;
  font-style: italic;
}

/* How-to-play help screen — a glossary of parchment cards. */
.help-intro {
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.help-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-entry {
  background: var(--parchment-dark);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rubric);
  border-radius: 3px;
  padding: 7px 10px 8px;
}
.help-entry dt {
  font-variant: small-caps;
  font-weight: bold;
  color: var(--rubric);
  letter-spacing: 0.04em;
}
.help-entry dd {
  margin: 3px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* The manorial-yoke panel */
.obligations {
  margin-top: 12px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 8px 10px;
  background: rgba(122, 43, 34, 0.08); /* faint ox-blood wash */
}
.ob-label {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--rubric);
  font-size: 0.82rem;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.ob-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.86rem;
  padding: 2px 0;
  min-width: 0;
}
.ob-key {
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.ob-val {
  font-weight: bold;
  text-align: right;
  /* The values can be long ("Lady Day: 1d rent, 1bu corn") — let them wrap inside the
     row at phone width rather than overflow the key or the panel. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.ob-val.bad {
  color: var(--bad);
}
.ob-val.good {
  color: var(--good);
}
.ob-commute {
  /* Slimmed: a neat centred button, not a full-width rubric bar. */
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 4px 14px;
  font-size: 0.82rem;
  /* Read unmistakably as a tappable button, not another label row. */
  background: var(--rubric);
  color: var(--parchment);
  border-color: #2b1410;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
/* A period coin-mark in place of the old anachronistic play-glyph: the Anglo-Norman
   silver penny bore a cross on its reverse (the "cross penny", cut for halves/farthings),
   so a cross reads as money and is unmistakably of the period. */
.ob-commute::before { content: "\271C\00A0"; opacity: 0.85; }

/* Collapsible HUD status sections (CLOUD's collapsible() → <details class="hud-sec">): parchment
   fold-sections with a tappable small-caps summary + a ▸/▾ affordance (USER 2026-06-16 Home rework). */
.hud-sec {
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: rgba(120, 100, 60, 0.045);
  margin: 8px 0;
  overflow: hidden;
}
.hud-sec-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: var(--ink-soft);
  -webkit-tap-highlight-color: transparent;
}
.hud-sec-sum::-webkit-details-marker { display: none; }
.hud-sec-sum::after {
  content: "▸";
  font-size: 0.82em;
  color: var(--ink-soft);
  flex: none;
}
.hud-sec[open] > .hud-sec-sum::after { content: "▾"; }
.hud-sec-sum:hover { color: var(--ink); }
.hud-sec-body { padding: 0 10px 9px; }
.hud-sec[open] > .hud-sec-body { border-top: 1px solid var(--line); padding-top: 7px; }

.work-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Category sub-headings within the week's-work panel. */
.work-cat {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin: 8px 0 1px;
}
.work-cat-deal {
  color: var(--woad);
  font-style: italic;
}
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* Dealings — decisions/transactions that don't spend the week: a woad tint and
   a small ✓-of-time marker, distinct from the labour that costs you a week. */
.btn.action.action-deal {
  border-color: var(--woad);
  background: rgba(47, 72, 88, 0.07);
}
/* (Removed the ".btn.action.action-deal .action-hint::after { '· does not use the week' }" tag —
   redundant with the "Dealings — a moment's business, the week goes on" group header, and it collided
   with the peril line. USER 2026-06-16 19:12.) */
/* Notices — the results of this week's dealings, shown before the week is spent. */
.notices {
  margin-top: 10px;
  border-left: 3px solid var(--woad);
  padding: 4px 0 4px 9px;
}
.notices-label {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--woad);
}
.notice-line {
  font-size: 0.85rem;
  line-height: 1.35;
  margin-top: 2px;
}
.btn.action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: 0;
  min-height: 38px; /* smaller — USER 2026-06-16 19:12 "buttons read chunky"; content already trimmed by CLOUD */
  padding: 5px 8px;
  font-size: 0.88rem;
  line-height: 1.18;
}
/* Special actions — the situational decisions and opportunities (take on more
   land, become the reeve, abscond, deal at market, eat the seed) — set apart
   from the ordinary weekly labour by a heavier woad-blue double border and a
   faint tint, so a momentous choice never looks like a routine chore. */
/* The counselled action in the first year — a gentle gilt highlight so a new
   player learns the rhythm; it never appears after the first year. */
.btn.action.action-suggested {
  border-color: #b08b3a;
  box-shadow: inset 0 0 0 1px #b08b3a, 0 0 0 1px rgba(176, 139, 58, 0.4);
}
.action-suggest-mark { color: #9c6f1e; }

.btn.action.action-special {
  border-width: 2px;
  border-color: var(--woad);
  box-shadow: inset 0 0 0 1px var(--woad);
  background: rgba(47, 72, 88, 0.10);
}
.btn.action.action-special .action-name::before {
  content: "❧ ";
  color: var(--woad);
}
/* When a special action also breaks a holy day, the rubric warning wins the border. */
.btn.action.action-special.breaks-holy {
  border-color: var(--rubric);
  box-shadow: inset 0 0 0 1px var(--rubric);
}
/* Per-action illuminated icon slot. Icons are set INLINE per action by ui.js
   (EXTRA_ACTION_ICONS → a manuscript-art folk/emblem sprite), which also flips display
   on; this rule is just the box. Sized so the detailed figure-sprites read (USER/CLOUD
   build …18o flagged 22px too small for ploughteam/reaper/etc.). */
.action-icon {
  display: none;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.92;
}
/* (The per-action `.act-<id>` SVG icon rules were retired — the line-glyph SVGs in
   assets/icons/ were a wrong turn and are deleted (build …18o). Action icons are now
   manuscript-art sprites set INLINE per action via ui.js EXTRA_ACTION_ICONS, same idiom
   as the Codex; the slot styling lives on `.action-icon` above.) */
.action-name {
  font-weight: bold;
  font-size: 0.9rem; /* slightly smaller — USER 2026-06-16 19:12 (less chunky) */
}
.action-hint {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.2;
}
.btn.pass {
  width: 100%;
  margin-top: 8px;
  font-style: italic;
}

.log {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
}
.log-entry {
  border-bottom: 1px dotted var(--line);
  padding-bottom: 6px;
}
.log-entry:last-child {
  border-bottom: none;
}
.log-when {
  font-size: 0.72rem;
  color: var(--rubric);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}
.log-line {
  font-size: 0.9rem;
  line-height: 1.46;
  margin-top: 7px; /* real paragraph spacing between report lines (was cramped at 2px) */
}
.log-line:first-child { margin-top: 0; }
/* "This week" — the latest day, pinned under the header and shown IN FULL (no
   inner scroll box), set apart in ox-blood so the result of the turn just taken
   is read at once. The older "Earlier days" log keeps its compact scroll box. */
.this-week { margin-top: 10px; }
.log-label-now { color: var(--rubric); border-bottom-color: var(--rubric); }
.this-week .log {
  max-height: none;
  overflow: visible;
  border: 2px solid var(--rubric);
  background: rgba(122, 43, 34, 0.06);
}
.log-entry-latest .log-line { font-size: 0.95rem; }
.earlier-days { margin-top: 14px; }
.earlier-days .log { max-height: 240px; margin-top: 6px; }
/* The collapsible "Earlier days" summary reads as a tappable section heading with
   a turning marker; folded away by default to keep the HUD short. */
.earlier-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.earlier-summary::-webkit-details-marker { display: none; }
.earlier-summary::before {
  content: "▸ ";
  color: var(--ink-soft);
  font-size: 0.8em;
}
.earlier-days[open] .earlier-summary::before { content: "▾ "; }
/* Glossary links in the journal — subtle, not loud: a faint dotted underline in
   the ink colour, so a curious player notices they can tap a term for its codex
   entry, but the prose still reads as prose. (CLOUD placeholder — LOCAL, refine
   to taste in the parchment idiom.) */
/* Glossary links read as a scribe's rubricated annotation: a faint ox-blood
   dotted underline under the ink text, firming to a solid rubric on hover. */
.gloss-link {
  cursor: help;
  color: inherit;
  text-decoration: underline dotted var(--rubric);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.gloss-link:hover,
.gloss-link:focus {
  color: var(--rubric);
  text-decoration-style: solid;
  background: rgba(122, 43, 34, 0.1);
  border-radius: 2px;
  outline: none;
}
/* The single-entry codex pop-up opened from a glossary link. */
.codex-single { max-width: 34rem; }
.codex-single-cat {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.codex-single-term { margin: 0.1rem 0 0.5rem; }
.codex-single-gloss { display: block; line-height: 1.5; }
.codex-single-more { margin-top: 0.9rem; }
/* CODEX ILLUSTRATIONS (CLOUD hooks the emblem/rank cut-outs onto terms; LOCAL frames them).
   A mounted MANUSCRIPT PLATE: the transparent cut-out sits on a faint parchment ground inside
   an ink border, so it reads as an illumination pasted into the leaf rather than a floating PNG.
   Sizing/float/margin come inline from ui.js (a floor); this adds the frame + ground + fit. */
.codex-illus, .codex-single-illus {
  background: #d7cdaf;                         /* a light parchment mount, a touch lighter than the leaf */
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(20, 14, 8, 0.35);
  object-fit: contain;
}
.codex-illus { padding: 2px; }                /* the small list THUMB — a tidy framed chip, floated right */
.codex-single-illus {                          /* the large centred PLATE — gilt-edged like a real illumination */
  padding: 5px;
  border-width: 2px;
  outline: 1px solid #b08b3a;                 /* a thin gilt rule, matching the decision/omen plates */
  outline-offset: 2px;
  box-shadow: 0 2px 9px rgba(20, 14, 8, 0.5);
  filter: sepia(0.05);
}
/* Journal illumination — a manuscript scene inset in the margin of the entry,
   gold-keyed like a real illuminated initial; the text wraps around it. */
.log-illum {
  position: relative;
  float: right;
  width: 42%;
  max-width: 168px;
  margin: 1px 0 5px 10px;
  padding: 3px;
  background: #ded6c2;
  border: 2px solid var(--ink);
  outline: 1px solid #b08b3a;
  outline-offset: 1px;
  box-shadow: 0 1px 3px rgba(40, 28, 14, 0.3);
}
.log-illum-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 98px;
  object-fit: cover; /* a clean filled thumbnail (USER) — the crop is a teaser; TAP opens the whole plate. */
  object-position: center top; /* bias the crop to the TOP so figures' HEADS show on tall plates and
                                  aren't cut by a centred crop (USER); neutral for wide plates (they fill
                                  vertically). Bas-de-page plates have their top text trimmed so the
                                  figures sit at the top. */
  border: 1px solid rgba(40, 28, 14, 0.5);
  filter: sepia(0.1) saturate(0.95);
  cursor: pointer; /* the whole illumination is tappable → opens the enlarged view */
}
.log-illum-img:active { filter: sepia(0.1) saturate(0.95) brightness(0.94); }
/* A small gilt-roundel info button, top-left of the illumination. Big enough to
   tap on a phone; opens the snippet + credit pop-up. */
.log-illum-info {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #5a4824;
  background: rgba(222, 214, 194, 0.92);
  color: #5a4824;
  font-size: 0.8rem;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(40, 28, 14, 0.4);
}
.log-illum-info:active { background: var(--parchment-shade); }
.log-illum-credit {
  margin-top: 2px;
  font-size: 0.6rem;
  font-style: italic;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.15;
}
/* The illumination info pop-up. */
.illum-info { max-width: 32rem; }
.illum-info-head { margin: 0 0 0.5rem; }
/* The larger view of the illumination, shown above its history snippet. */
.illum-info-figure { margin: 0 0 0.8rem; text-align: center; }
.illum-info-img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 64vh;
  object-fit: contain;
  border: 1px solid var(--ink);
  outline: 2px solid #b08b3a;
  outline-offset: 2px;
  background: var(--parchment-shade);
  filter: sepia(0.08);
}
.illum-info-fact { line-height: 1.5; margin: 0 0 0.7rem; }
.illum-info-subject { font-style: italic; color: var(--ink-soft); margin: 0 0 0.5rem; }
.illum-info-credit {
  font-size: 0.78rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
  margin: 0;
}

/* --- Defensive: nothing in the journal should force horizontal scroll on a
   narrow phone. Break long words, keep media within the column. --- */
.log-entry, .log-line { overflow-wrap: anywhere; word-break: break-word; }
.log, .log-entry { max-width: 100%; }
#app img { max-width: 100%; }

.hud-footer {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap; /* room for the Feedback button without crowding on a phone */
  gap: 8px;
  justify-content: space-between;
}
.hud-footer .btn {
  flex: 1 1 28%;
}
/* Meta controls (out-of-world: feedback, sound) on their own line, in woad so
   they read apart from the in-world buttons above. */
.hud-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.btn.meta {
  flex: 0 1 auto;
  border-color: var(--woad);
  color: var(--woad);
  background: rgba(47, 72, 88, 0.07);
}
.btn.meta:active { background: rgba(47, 72, 88, 0.18); }
/* Feedback form */
.feedback .fb-label {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 10px 0 3px;
  font-size: 0.8rem;
}
.feedback .fb-cat,
.feedback .fb-msg {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--parchment);
  color: var(--ink);
  padding: 8px;
}
.feedback .fb-msg { resize: vertical; }
.feedback .fb-status { margin-top: 8px; color: var(--rubric); font-style: italic; min-height: 1.2em; }
.feedback .btn-primary { margin-top: 10px; }

/* ---------- Modal ---------- */
/* Corner zoom controls over the scene canvas (USER 2026-06-16: pinch/zoom + re-centre).
   Fixed above the tab bar; JS toggles display to follow the canvas's visibility, and keeps
   them below the modal (z 20) so a popup still covers them. */
.scene-zoom {
  position: fixed;
  right: 10px;
  bottom: 96px;
  z-index: 15;
  display: none;
  flex-direction: column;
  gap: 6px;
}
.scene-zoom button {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1.5px solid #2b1d12;
  background: rgba(233, 220, 192, 0.94);
  color: #2b1d12;
  font: 700 22px/1 Georgia, "Times New Roman", serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.scene-zoom button:active { background: #d8c79f; transform: translateY(1px); }

/* The tap-a-thing lore PANEL below the Vill scene (USER 2026-06-16): a parchment register seated
   under the canvas, reusing the card's child type (cp-name / cp-lore / cp-fact). The display
   toggle stays inline in main.js; everything visual lives here. */
.scene-info {
  display: block;
  position: relative;
  background: linear-gradient(180deg, #e7dcc0, #dccfb0);
  border-top: 2px solid #2b1d12;
  box-shadow: inset 0 3px 7px rgba(43, 29, 18, 0.13);
  padding: 0.6rem 2rem 0.85rem 0.85rem;
  max-height: 38vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #2b1d12;
  font-size: 0.86rem;
  line-height: 1.45;
}
.scene-info-x {
  position: absolute;
  top: 0.2rem;
  right: 0.45rem;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  background: none;
  font: 400 1.4rem/1 Georgia, "Times New Roman", serif;
  color: #6a5234;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scene-info-x:hover,
.scene-info-x:active { color: #2b1d12; }
/* Neutralise the floating-popup container so the card reads as an in-flow panel. */
.scene-info .croft-popup {
  position: static;
  max-width: none;
  max-height: none;
  min-width: 0;
  margin: 0;
  box-shadow: none;
  border: 0;
  background: none;
  padding: 0;
  overflow: visible;
}

/* The Labours-of-the-Months frieze, moved off the scene canvas onto the HOME tab, under the
   date (USER 2026-06-16: "keep the frieze on the home tab, cleaner Vill"). main.js paints the
   month's register into a canvas inside this slot; the slot self-hides until the image loads. */
.home-frieze {
  margin: 2px 0 10px;
  line-height: 0;
}
.home-frieze-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(43, 29, 18, 0.22);
}

#modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 8, 0.78);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 10px;
  overflow-y: auto;
  z-index: 20;
}
#modal.hidden {
  display: none;
}
.modal-box {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--parchment);
  border: 3px solid var(--ink);
  border-radius: 5px;
  padding: 16px 16px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--ink);
}

/* Save/Load */
.slot-row {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px;
  margin-bottom: 8px;
}
.slot-name {
  font-variant: small-caps;
  font-weight: bold;
}
.slot-meta {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 2px 0 6px;
}
.slot-btns {
  display: flex;
  gap: 6px;
}
/* File backup is the safe save net (iOS PWA): surfaced first, with a plain rationale. */
.save-backup {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: rgba(122, 43, 34, 0.06);
}
.save-note {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.save-io-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.save-io {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.save-io > summary {
  cursor: pointer;
  margin-bottom: 4px;
}
.save-text {
  width: 100%;
  font-family: monospace;
  font-size: 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.4);
}

/* Codex */
/* A contemporary voice at the head of the Codex (Civilization-style epigraph). */
.codex-epigraph {
  margin: 6px 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--rubric);
  background: rgba(122, 43, 34, 0.06);
}
.codex-epigraph-text {
  display: block;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.codex-epigraph-cite {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  font-style: normal;
  color: var(--ink-soft);
}
.codex-intro {
  font-style: italic;
  color: var(--ink-soft);
}
.codex-search {
  width: 100%;
  margin: 6px 0 8px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 0.95rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--parchment);
  color: var(--ink);
}
.codex-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.codex-tab {
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--parchment-dark);
  color: var(--ink);
  cursor: pointer;
}
.codex-tab.active {
  background: var(--rubric);
  color: var(--parchment);
  border-color: #2b1410;
}
/* The reference tabs (How to play · Timeline · How we know) sit on their OWN
   row, set apart in woad blue and divided by a rule — marked out-of-world so they
   don't read like the immersive historical entries. */
.codex-tabs-meta {
  margin-top: -4px;
  padding-top: 8px;
  border-top: 1px dashed var(--woad);
}
.codex-tab-meta {
  border-color: var(--woad);
  color: var(--woad);
  border-style: dashed;
  background: rgba(47, 72, 88, 0.07);
}
.codex-tab-meta.active {
  background: var(--woad);
  color: var(--parchment);
  border-color: #1c2c36;
  border-style: solid;
}
.mech-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--woad);
  border-left: 3px solid var(--woad);
  padding-left: 8px;
  margin-bottom: 8px;
}
.mech-entry dt { color: var(--woad); }
.tl-row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.7; /* years outside the game's window are dimmed */
  align-items: start;
}
/* The left rail: the year, with a small illumination beneath it on the marquee
   years. Stays narrow so the colour-text has room on a phone. */
.tl-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* A small contemporary illumination beside the marquee timeline years (keyed by
   the tl-y<year> class). Self-hides on the years left unillustrated. */
.tl-illum {
  display: none;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid var(--ink);
  outline: 1px solid #b08b3a;
  outline-offset: 1px;
  background-size: cover;
  background-position: center;
  filter: sepia(0.15);
}
/* The primary-source colour, beneath each year's summary. */
.tl-source {
  margin: 8px 0 0;
  padding: 6px 0 6px 10px;
  border-left: 2px solid var(--rubric);
}
.tl-quote {
  display: block;
  font-style: italic;
  line-height: 1.5;
  font-size: 0.86rem;
  color: var(--ink);
}
.tl-cite {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  font-style: normal;
  color: var(--ink-soft);
}
.tl-y1066 .tl-illum { display: block; background-image: url("assets/manuscript/journal/bayeux-comet.jpg"); }
.tl-y1069 .tl-illum { display: block; background-image: url("assets/manuscript/journal/bayeux-battle2.jpg"); }
.tl-y1070 .tl-illum { display: block; background-image: url("assets/manuscript/journal/bayeux-foragers.jpg"); }
.tl-y1075 .tl-illum { display: block; background-image: url("assets/manuscript/journal/bayeux-rally.jpg"); }
.tl-y1086 .tl-illum { display: block; background-image: url("assets/manuscript/journal/hexateuch.jpg"); }
.tl-y1087 .tl-illum { display: block; background-image: url("assets/manuscript/journal/bayeux-deathbed.jpg"); }
.tl-row.tl-inplay { opacity: 1; }
.tl-year { font-weight: bold; font-variant: small-caps; color: var(--ink-soft); }
.tl-row.tl-inplay .tl-year { color: var(--rubric); }
.tl-title { font-weight: bold; font-size: 0.9rem; }
.tl-note { font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); margin-top: 2px; }
.tl-row.tl-climax { background: rgba(122, 43, 34, 0.08); }
.tl-row.tl-now {
  background: rgba(47, 72, 88, 0.14);
  box-shadow: inset 3px 0 0 var(--woad);
}
.tl-row.tl-now .tl-title { color: var(--woad); }
.tl-here { display: inline-block; margin-left: 8px; vertical-align: middle; }

/* The two period display faces for the flourishes (self-hosted, so they work
   offline through the service worker). 'Domesday Latin' is Uncial Antiqua — an
   early-medieval uncial that reads as ancient Latin (and takes the forced
   lowercase well); 'Domesday OE' is UnifrakturMaguntia — a heavier insular/
   blackletter hand, distinct for the Old English. Both SIL OFL; see CREDITS.md. */
@font-face {
  font-family: "Domesday Latin";
  src: url("assets/fonts/domesday-latin.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Domesday OE";
  src: url("assets/fonts/domesday-oe.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* --- Period flourishes: a Latin or Old-English word with a modern gloss. -----
   'Domesday Latin'  : a Bayeux-Tapestry-capital style (used ALL LOWERCASE);
   'Domesday OE'      : a distinct insular / blackletter hand for Old English. */
.flourish {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  vertical-align: middle;
}
.flourish-word { color: var(--rubric); }
.flourish-gloss {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 0.6rem;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}
/* Latin — Bayeux style, always lowercase. */
.flourish-la .flourish-word {
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
}
/* Old English — a different, heavier hand. */
.flourish-oe .flourish-word {
  font-family: "Domesday OE", "UnifrakturMaguntia", "Cardo", Georgia, serif;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
}
.completion-flourish { text-align: center; margin: 2px 0 6px; }
/* A restrained period flourish under a modal heading (e.g. the Folk screen). */
.modal-flourish { margin: -2px 0 8px; }
.codex-result-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 6px;
}
.codex-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.codex-entry dt {
  font-variant: small-caps;
  font-weight: bold;
  color: var(--rubric);
  letter-spacing: 0.04em;
}
.codex-entry dd {
  margin: 2px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Chronicle */
.chron-sub,
.muted {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.85rem;
}
.chron-section-label {
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--rubric);
  border-bottom: 1px solid var(--line);
  margin: 14px 0 6px;
  padding-bottom: 3px;
  font-size: 0.82rem;
}
.chron-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chron-entry {
  display: flex;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.35;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 3px;
}
.chron-year {
  flex: 0 0 auto;
  color: var(--rubric);
  font-variant: small-caps;
  min-width: 64px;
}
.chron-line {
  flex: 1;
}
.chron-section {
  margin-top: 10px;
}

/* Folk of the vill */
/* The open-field strip readout on the scene tab — each strip keyed by a Roman-numeral
   LOZENGE that matches the numbered lozenge drawn out on the scene's own strips, so the
   list and the picture line up ("strip Ⅲ is choked" → find Ⅲ on the field). This took
   over from the retired top-down plan, which keyed strips the same way. A RIPE strip
   takes a gilt lozenge (its row also gets .field-ripe). */
.field-row .field-num {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 0.04rem 0.32rem;
  text-align: center;
  font: 700 0.72rem Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  color: #241a0e;
  background: #f1ead6;
  border: 1px solid var(--ink, #3a2a18);
  border-radius: 0.55rem;
}
.field-row.field-ripe .field-num {
  background: var(--gold, #b08b3a);
}

/* Tap-a-croft popup — tap a croft in the scene and a small parchment card names that
   household (the Vill social map, now interactive in the one scene view): who holds it,
   their rank & souls, the croft's state, and your mutual-aid bond with them. */
.croft-popup {
  position: fixed;
  z-index: 60;
  min-width: 7.5rem;
  max-width: 16.5rem;
  max-height: 62vh;
  overflow-y: auto;
  padding: 0.5rem 0.6rem;
  background: #ddd5c2;
  border: 1px solid #3a2a18;
  border-radius: 0.4rem;
  box-shadow: 0 5px 16px rgba(20, 14, 6, 0.38);
  color: #3a2a18;
  font-size: 0.82rem;
  line-height: 1.35;
}
.croft-popup .cp-portrait {
  display: block;
  width: 100%;
  /* sized up from 132px (the old 3D cut-out thumb) for the painterly VIGNETTE cards (USER 2026-06-18),
     which are now the tap-card feature — a contain-fit so the whole oil painting reads, never cropped. */
  max-height: 168px;
  object-fit: contain;
  margin: -0.12rem 0 0.45rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  image-rendering: auto;
}
.croft-popup .cp-name { font-weight: 700; font-family: 'Domesday Latin', 'Uncial Antiqua', 'Iowan Old Style', Georgia, serif; }
.croft-popup .cp-sub { font-size: 0.72rem; color: #5a4630; }
.croft-popup .cp-bond { margin-top: 0.2rem; font-size: 0.75rem; color: #5a4630; }
.croft-popup .cp-lore-name {
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(58, 42, 24, 0.28);
  font-weight: 700;
  font-style: italic;
  color: #2e2114;
}
.croft-popup .cp-lore { margin-top: 0.25rem; font-size: 0.78rem; color: #4a3826; }
.croft-popup .cp-fact {
  margin-top: 0.4rem;
  padding-left: 0.5rem;
  border-left: 2px solid rgba(122, 30, 22, 0.5);
  font-size: 0.72rem;
  font-style: italic;
  color: #5a4630;
}

/* The vill-at-a-glance band: your standing, and the vill's spirits and health. */
.folk-vital {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px;
}
.folk-stat {
  flex: 1 1 30%;
  min-width: 7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.04);
}
.folk-stat-k {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.folk-stat-v {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
}
.folk-mood-line {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.folk-neighbour .folk-name { font-weight: normal; }
.folk-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.folk-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 6px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
}
/* A named figure of the vill carries a little gilt roundel emblem of their office
   (assets/icons/role/<key>.svg), keyed by the role-<key> class on the row. */
.folk-figure {
  grid-template-columns: 30px 1fr 1fr 1.4fr;
  align-items: center;
}
.role-roundel {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #b08b3a;
  background-color: rgba(222, 214, 194, 0.85);
  background-size: 68% 68%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(43, 36, 25, 0.25);
}
.role-lord .role-roundel { background-image: url("assets/icons/role/lord.svg"); }
.role-reeve .role-roundel { background-image: url("assets/icons/role/reeve.svg"); }
.role-hayward .role-roundel { background-image: url("assets/icons/role/hayward.svg"); }
.role-priest .role-roundel { background-image: url("assets/icons/role/priest.svg"); }
.role-wisewoman .role-roundel { background-image: url("assets/icons/role/wisewoman.svg"); }
.role-miller .role-roundel { background-image: url("assets/icons/role/miller.svg"); }
.role-smith .role-roundel { background-image: url("assets/icons/role/smith.svg"); }
.folk-name { font-weight: bold; }
.folk-role { color: var(--ink-soft); font-style: italic; font-size: 0.8rem; }
.folk-cond { color: var(--ink-soft); }
.folk-cond.ill { color: var(--bad); font-style: italic; }
.folk-oldlord {
  margin-top: 8px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* Completion share */
.completion-share { margin: 12px 0; }
.completion-share-preview {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--ink);
  background: rgba(120, 100, 60, 0.08);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
}

/* The opening scene */
.opening-title {
  text-align: center;
  color: var(--rubric);
  font-size: 1.5rem;
  margin-bottom: 0;
}
.opening-place {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.opening-para { line-height: 1.55; margin: 0 0 0.7rem; }
.opening-lot {
  border-left: 3px solid var(--rubric);
  padding: 4px 0 4px 10px;
  margin: 10px 0;
  background: rgba(122, 43, 34, 0.06);
}
.opening-lot-label {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--rubric);
  font-weight: bold;
  font-size: 0.8rem;
}
.opening-lot-line { line-height: 1.5; margin: 4px 0 0; font-size: 0.92rem; }

/* The Domesday completion page */
.completion-title {
  color: var(--rubric);
  text-align: center;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
}
.completion-art {
  display: block;
  /* The ending splashes are now 9:16 PORTRAIT oil hero-art (USER/CLOUD build …18s) — size by HEIGHT with
     auto width so the tall splash keeps its aspect and sits as a CROWN, centred. (Was width:100% + object-fit
     cover, which cropped/over-filled the portrait.) */
  width: auto;
  max-width: 100%;
  max-height: 60vh;
  border: 2px solid var(--ink);
  outline: 1px solid #b08b3a;
  outline-offset: 2px;
  margin: 8px auto 12px;
}
/* The mock Domesday entry — a ruled vellum panel in a close, bookish hand. */
/* Baseline 'vellum folio' for the manor's entry — LOCAL iterates this toward a
   real Domesday leaf (faint horizontal ruling, browner ink, rubricated names),
   comparing against facsimiles; legibility kept. */
.domesday-folio {
  margin: 8px 0 12px;
  border: 1px solid #6b5a36;
  border-radius: 2px;
  /* Creamy, faintly mottled vellum, drypoint-ruled like a Domesday folio: the
     ruling bands match .domesday-entry's line-height so the bookhand sits on the
     lines. Aged inner glaze + a soft cast shadow for the leaf. */
  background:
    repeating-linear-gradient(rgba(110,80,35,0.05) 0 1.5em, rgba(110,80,35,0.11) 1.5em calc(1.5em + 1px)),
    radial-gradient(130% 90% at 28% -10%, rgba(185,150,90,0.12), transparent 62%),
    radial-gradient(90% 70% at 100% 115%, rgba(90,65,30,0.10), transparent 60%),
    #e7dfc4;
  box-shadow: inset 0 0 26px rgba(110, 80, 35, 0.20), 0 1px 5px rgba(20, 14, 8, 0.4);
  padding: 13px 15px 15px;
}
.domesday-entry {
  font-size: 0.92rem;
  line-height: 1.5em;
  color: #3d2c16; /* brown iron-gall ink on vellum */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  letter-spacing: 0.005em;
}
.domesday-line { margin: 0; }
.domesday-head { letter-spacing: 0.02em; }
/* The vill-name, rubricated as in the manuscript (red, the way Domesday heads
   its manors). */
.domesday-rubric {
  color: var(--rubric);
  font-variant: small-caps;
  font-weight: bold;
  letter-spacing: 0.06em;
  font-size: 1.08em;
  margin-right: 0.2em;
}
/* The household's own line, set apart as a marginal addition. */
.domesday-own {
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--rubric);
  font-style: italic;
  color: var(--rubric);
}
.domesday-foot {
  margin-top: 8px;
  text-align: center;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--ink-soft);
}
.completion-summary p { line-height: 1.5; margin: 0 0 0.6rem; }
.completion-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.cstat { display: flex; justify-content: space-between; gap: 8px; font-size: 0.86rem; min-width: 0; }
.cstat-label { color: var(--ink-soft); flex: 0 1 auto; }
/* A long value (e.g. the beasts list "2 ox · 1 cow · 2 swine · …") must WRAP inside its
   half-width grid cell, not overflow it or crush the label, at phone widths. */
.cstat-value { font-weight: bold; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Game over */
.gameover .cause {
  color: var(--rubric);
  font-style: italic;
}
.gameover .epitaph {
  line-height: 1.5;
  margin: 8px 0;
}
.churchyard {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.grave {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Scrollbars kept subtle */
.log::-webkit-scrollbar,
#modal::-webkit-scrollbar {
  width: 8px;
}
.log::-webkit-scrollbar-thumb,
#modal::-webkit-scrollbar-thumb {
  background: var(--parchment-shade);
  border-radius: 4px;
}

/* The Old English gloss of the title under the DOMESDAY heading. */
.title-flourish { text-align: center; margin: 2px 0 4px; }

/* ── The DOMESDAY SURVEY — the endgame set-piece, the game's namesake climax: the
   King's commissioners sit in the lord's hall; the holder answers under oath; the
   clerk writes the great roll and the book closes. Period-grave. ── */
.survey { max-width: 34rem; margin: 0 auto; padding: 12px 16px 24px; text-align: center; }
/* the illumination plate (LOCAL fills #survey-art / #survey-art-clerk); collapses
   gracefully if unfilled so nothing looks broken */
.survey-art { width: 100%; margin: 2px 0 14px; border: 1.5px solid var(--parchment-shade);
  border-radius: 4px; background: rgba(43, 36, 25, 0.05); overflow: hidden; }
.survey-art:empty { display: none; }
.survey-art svg { display: block; width: 100%; height: auto; }
/* a REAL manuscript scene in the plate (the journal's authentic-illumination approach),
   cropped to the slot and lightly sepia'd to sit in the parchment frame */
.survey-art img.survey-photo { display: block; width: 100%; aspect-ratio: 7 / 4;
  object-fit: cover; filter: sepia(0.12) saturate(0.96); }
/* The clerk plate (Eadwine the Scribe) and the winchester plate (the closed Domesday Book)
   are single tall portrait images — give those two slots a portrait aspect (≈ each image's
   own) so the whole subject reads, since the survey scenes are shown one at a time. */
#survey-clerk img.survey-photo, #survey-winchester img.survey-photo { aspect-ratio: 3 / 4; }
.survey-title { font-size: 1.55rem; color: var(--rubric); letter-spacing: 0.02em; margin: 4px 0 2px; }
.survey-sub { font-style: italic; color: var(--ink-soft); font-size: 0.86rem; margin-bottom: 16px; }
.survey-intro { font-size: 0.96rem; line-height: 1.55; margin: 0 auto 18px; max-width: 30rem; }
.survey-ask { font-size: 1.14rem; font-style: italic; color: var(--ink); line-height: 1.45;
  margin: 0 auto 22px; max-width: 28rem; padding: 12px 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.survey-choices { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.survey-choices .btn { min-width: 12rem; }
.survey-true { background: var(--parchment-dark); border-color: var(--good); color: var(--ink); }
/* "Shave the count" — the furtive, risky oath: darker and a touch ominous. */
.survey-under { background: #352d24; border-color: var(--bad); color: #d3c6ad; font-style: italic; }
.survey-under:active { background: #241d15; }
.survey-progress { font-size: 0.78rem; color: var(--parchment-shade); letter-spacing: 0.05em; text-transform: uppercase; }
/* The verdict — "The Book Closes". */
.survey-verdict .survey-line { font-size: 0.98rem; line-height: 1.55; margin: 9px auto; max-width: 30rem; }
.survey-caught { color: var(--bad); font-weight: 600; }       /* exposed before the vill */
.survey-cheat { color: var(--ink-soft); font-style: italic; } /* got away with it */
.survey-fine { color: var(--bad); font-weight: 600; margin: 14px auto; max-width: 30rem; }
.survey-verdict-line { font-size: 1.1rem; color: var(--rubric); line-height: 1.5; margin: 18px auto 0;
  max-width: 30rem; padding-top: 16px; border-top: 2px solid var(--rubric); }

/* ───────────────────────────────────────────────────────────────────────────
   THE NEW-YEAR SET-PIECE (ui.showYearTurn) — an illuminated ANNAL PAGE on the
   year just past: a rubricated period heading, an omen plate at the threshold,
   what befell the vill and the wider world (year-keyed chronicle), and a closing
   line. Renders inside .modal-box (parchment). CLOUD ships the markup; LOCAL
   styles it to the manuscript house style (CLOUD→LOCAL handoff, 2026-06-16).
   ─────────────────────────────────────────────────────────────────────────── */
.yearturn { text-align: center; }
/* The head — "Anno Domini MLXVIII" as a rubricated period title, a rule beneath. */
.yearturn-head { margin: 2px 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.yearturn-anno {
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  font-size: 2rem; line-height: 1.1; letter-spacing: 0.03em; color: var(--rubric);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.18);
}
.yearturn-sub { font-style: italic; font-size: 0.82rem; letter-spacing: 0.04em; margin-top: 3px; }
.yearturn-lead { font-style: italic; line-height: 1.5; color: var(--ink-soft); margin: 0 auto 14px; max-width: 28rem; }
/* The omen — a tall manuscript illumination in the ink+gold frame (matching the
   decision banners), capped so the plate never dominates the annal page. */
.yearturn-omen { margin: 0 auto 16px; max-width: 300px; }
.yearturn-omen-img {
  display: block; width: 100%; max-height: 340px; object-fit: cover; object-position: center top;
  border: 2px solid var(--ink); outline: 1px solid #b08b3a; outline-offset: 2px;
  box-shadow: 0 2px 8px rgba(20, 14, 8, 0.5); filter: sepia(0.06);
}
.yearturn-omen-cap { font-style: italic; font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft); margin-top: 10px; }
/* Section rubrics — "In the vill, this year past" / "Beyond the vill…" — uncial,
   left-set, hairline-ruled, like the headings of an annal; body text reads left. */
.yearturn-sec {
  font-family: "Domesday Latin", "Uncial Antiqua", "Trajan Pro", Georgia, serif;
  font-size: 1.05rem; font-weight: normal; color: var(--woad); text-align: left;
  letter-spacing: 0.02em; margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--line);
}
.yearturn-manor, .yearturn-world { text-align: left; }
.yt-line { line-height: 1.5; margin: 0 0 0.5rem; }
/* World excerpts + the closing line — chronicle quotes, rubric-ruled (as .opening-lot). */
.yearturn-quote { border-left: 3px solid var(--rubric); padding: 4px 0 4px 10px; margin: 8px 0; background: rgba(122, 43, 34, 0.06); text-align: left; }
.yearturn-close { margin: 16px auto 0; padding: 12px 6px 2px; border-top: 2px solid var(--rubric); text-align: center; }
.yt-qt { display: block; font-style: italic; line-height: 1.5; }
.yt-qc { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }
/* The "On into A.D. …" advance button sits full-width under the page. */
.yearturn > .btn { display: block; width: 100%; margin-top: 18px; }