/* game.css — The Alchemist: Under the Sycamore
 * Tokens (GDD 8.1, 9.9), typography (8.2), layout (8.3), HUD (8.4) and the UI-kit classes.
 * One committed dark theme; the page paints its own background everywhere. */

:root {
  --night: #161B3A;
  --dusk-deep: #2B2452;
  --dusk: #5B3A6E;
  --dawn: #E8A98B;
  --noon: #F2C46B;
  --sand: #E9D3A3;
  --sand-shadow: #B4884E;
  --ink: #12101C;
  --teal: #7FE3D6;
  --pale-gold: #F7E3A6;
  --parchment: #F4EBD9;
  --muted: #B9AE9A;
  --ember: #D8643E;
  --water: #3E6E8E;
  --oil: #E0A030;
  --focus: #7FE3D6;

  --font-display: 'Marcellus', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --font-text: 'Alegreya', Georgia, 'Times New Roman', serif;

  --hud-h: 44px;
  --card-max: 46vh;
  --gutter: 16px;
  --radius: 6px;
  --btn-h: 48px;
  --ring: 2px solid var(--focus);
  --caption-h: 24px;
  /* The card's reserved height: the stage is the viewport minus HUD, caption and this. */
  --card-h: min(var(--card-max), 300px);
  --text-size: 18px;

  /* Set by the engine from the painted scene: the sky colours tint the translucent panels;
     --ground is the painting's bottom edge, continued under the stage. */
  --sky-top: #1C1A42;
  --sky-bottom: #5B3A6E;
  --ground: #1A1626;

  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  background: var(--night);
}

html, body { height: 100%; }
/* Taps answer with the game's own shimmer and captions, never the browser's blue box over a
   hotspot's rectangle. Keyboard focus rings are untouched. */
html { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font: 400 var(--text-size) / 1.55 var(--font-text);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ app column (8.3) */
.app {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-anchor: none;
  /* The page is night everywhere (8.1). The painting stops at the stage's bottom edge; below
     it, inside the column only, the caption and the card region carry the ground's colour on
     (9.9), so they sit on the same earth as the figures. */
  background: var(--night);
}
.app > .caption, .app > .card-region { background-color: var(--ground); }
/* The ground under the stage is the painting's own earth, not a flat slab: it carries the
   painting's grain across the seam and falls away into shadow toward the bottom of the column
   (seen whole when a mechanic owns the screen and the card is empty). */
.app > .caption, .app > .card-region {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0 0.11  0 0 0 0.9 -0.28'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-image: var(--grain);
  background-size: 180px 180px;
}
.app > .card-region {
  background-image: linear-gradient(to bottom, rgba(18, 16, 28, 0) 0, rgba(18, 16, 28, 0.2) 34%, rgba(18, 16, 28, 0.5) 100%), var(--grain);
  background-size: auto, 180px 180px;
  background-position: 0 0, 0 -24px;   /* the grain runs on from the caption slot above */
}
.app > .hud, .app > .stage, .app > .caption, .app > .card-region {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
/* Spoken, not shown (the hold hint, the strip's chapter names). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ HUD (8.4) */
.hud {
  flex: 0 0 var(--hud-h);
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--gutter);
  position: relative;
  /* A dark, stable strip in every chapter and on the endings screen: never a wash over the
     scene's ground. Above the stage's layers and the card, so the save stamp under the counters
     is never cut by a panel (the overlays at 40 still cover it). */
  background: var(--night);
  z-index: 38;
}
.hud-title {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 12px / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-horizon {
  flex: 0 0 64px;
  width: 64px;
  height: 1px;
  background: var(--pale-gold);
  opacity: 0.2;
  position: relative;
  transition: opacity 0.9s ease;
}
.hud-horizon.is-dim { opacity: 1 !important; background: rgba(247, 227, 166, 0.12); }   /* the line dims, its bookmark does not */
.hud-horizon .bookmark {
  position: absolute; left: 50%; top: -7px; width: 6px; height: 12px; margin-left: -3px;
  background: var(--pale-gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
  opacity: 0.9;
}
.hud-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pale-gold);
  font: 400 15px / 1 var(--font-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hud-counter svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.hud-counter .hud-label {
  font: 400 12px / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-right: 2px;
}
.hud-counter--omens { color: var(--teal); }
.hud-counter--heart { color: var(--teal); }
.hud-counter--heart svg { animation: heartbeat 1s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } }
.hud-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  margin: 0 -2px;   /* never more than half the row gap: adjacent 44 px targets stay exclusive */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
}
.hud-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.hud-btn.is-on { color: var(--pale-gold); }
.pouch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 6px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--pale-gold);
  font: 400 13px / 1 var(--font-text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pouch .stone { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pouch .stone--black { background: var(--ink); box-shadow: 0 0 0 1px var(--pale-gold); }
.pouch .stone--white { background: var(--parchment); box-shadow: 0 0 0 1px var(--night); }
.pouch.is-settling { animation: settle 0.6s ease-out; }
@keyframes settle { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
.hud-maktub {
  position: absolute;
  right: var(--gutter);
  top: 100%;
  margin-top: 2px;
  font: 400 12px / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pale-gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.hud-maktub.is-on { opacity: 1; }

/* ------------------------------------------------------------------ stage */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: var(--night);
}
.stage canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.stage .backdrop { transition: opacity 0.4s ease; }
.stage .backdrop.is-back { opacity: 0; }
.stage .chapter-layer { position: absolute; inset: 0; }
.stage .chapter-canvas { pointer-events: none; }   /* drawing only; input goes to the custom layer or hotspots */
.stage .fx { pointer-events: none; z-index: 20; }
.stage .overlay-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.stage .overlay-layer > * { pointer-events: auto; }
.hotspot {
  position: absolute;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 50%;
  color: transparent;
  font-size: 0;
}
.stage-btn {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 12px;
  z-index: 35;
}
/* A stage button resting in the card's button row while no page is shown. */
.stage-btn.is-in-card { position: static; }
.stage-title {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 14%;
  text-align: center;
  pointer-events: none;
  z-index: 25;
}
.stage-title h2 {
  margin: 0;
  font: 400 clamp(22px, 5vw, 34px) / 1.2 var(--font-display);
  color: var(--parchment);
  text-shadow: 0 1px 12px rgba(18, 16, 28, 0.7);
  letter-spacing: 0.02em;
}
.stage-title .stage-kicker {
  font: 400 12px / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pale-gold);
  margin-bottom: 10px;
}
.grid-panel {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 12px;
  bottom: 12px;
  overflow: auto;
  padding: 10px;
  background: rgba(43, 36, 82, 0.86);
  border: 1px solid rgba(247, 227, 166, 0.25);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  grid-auto-rows: max-content;
  gap: 8px;
  align-content: start;
  z-index: 32;
}
.grid-panel--flip { grid-template-columns: repeat(4, 1fr); }
.tile {
  appearance: none;
  min-height: 72px;
  padding: 8px 10px;
  background: rgba(22, 27, 58, 0.6);
  border: 1px solid rgba(247, 227, 166, 0.3);
  border-radius: var(--radius);
  color: var(--parchment);
  font: 400 15px / 1.3 var(--font-text);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.tile .tile-sub { font-size: 13px; color: var(--muted); font-style: italic; }
.tile .tile-count { font: 400 12px / 1 var(--font-display); letter-spacing: 0.08em; color: var(--pale-gold); text-transform: uppercase; }
.tile.is-picked { border-color: var(--pale-gold); background: rgba(247, 227, 166, 0.14); }
.tile.is-face-down { color: transparent; background: rgba(43, 36, 82, 0.95); }
.tile.is-matched { border-color: var(--teal); color: var(--teal); }
.tile[disabled], .tile.is-disabled { opacity: 0.45; cursor: default; }
/* The stacked tile ("from the rest") is a group, not a button: its + and - are the controls. */
.tile--stack { min-height: 96px; cursor: default; }
.tile--stack .tile-count { min-height: 12px; }
/* Two 44 px buttons and a 4 px gap fit a 112 px tile's 92 px inner width. */
.tile-stack { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.tile-stack button {
  appearance: none; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(247, 227, 166, 0.4);
  background: rgba(22, 27, 58, 0.7); color: var(--parchment); font: 400 20px / 1 var(--font-display); cursor: pointer;
}
.tile-stack button[disabled] { opacity: 0.45; cursor: default; }

/* ------------------------------------------------------------------ caption slot */
.caption {
  flex: 0 0 var(--caption-h);
  height: var(--caption-h);
  line-height: var(--caption-h);
  padding: 0 var(--gutter);
  font-size: 15px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  /* The slot always paints the ground; only the words fade. */
  --caption-ink: var(--parchment);
  color: transparent;
  transition: color 0.35s ease, background-color 1.2s linear;
  z-index: 6;
}
.caption.is-on { color: var(--caption-ink); }
.caption--omen { --caption-ink: var(--teal); }
.caption--gold { --caption-ink: var(--pale-gold); }

/* ------------------------------------------------------------------ narration card (8.3) */
.card-region {
  flex: 0 0 var(--card-h);
  height: var(--card-h);
  padding: 0 var(--gutter) var(--gutter);
  perspective: 1400px;
  position: relative;
  z-index: 7;
  transition: background-color 1.2s linear;
}
/* The card is anchored to the bottom of its reserved region. The stage never resizes (8.3), so
   a page that needs more room than the reserve (a chapter title over a full page) grows upward
   over the caption and the painting's foot, up to the 46% the GDD allows, and nothing scrolls. */
.card-region > .card {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  height: auto;
  min-height: calc(100% - var(--gutter));
  max-height: calc(var(--card-max) - var(--gutter));
}
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  background: rgba(43, 36, 82, 0.88);
  border-top: 1px solid var(--pale-gold);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: auto;
  transform-origin: left center;
  transition: transform 0.45s ease-in-out, opacity 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
  outline: none;
}
/* An empty card (a shimmer, a mini-game) rests: no panel, no hairline, only the ground the
   painting stands on. Its height stays reserved so the stage never moves. */
.card.is-empty { background: transparent; border-top-color: transparent; }
/* The fold ends fully faded so a 90-degree plane never shows its perspective wedge. */
.card.is-folded { transform: rotateY(-90deg); opacity: 0; transition: transform 0.45s ease-in-out, opacity 0.45s ease-in; }
.card.is-unfolding { transform: rotateY(90deg); opacity: 0; transition: none; }
.card.is-faded { opacity: 0; }
.card--heart { border-top-color: var(--teal); box-shadow: inset 0 0 0 1px rgba(127, 227, 214, 0.35); }
.card--heart .card-text { font-style: italic; color: var(--teal); }
.card-speaker {
  font: 400 12px / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.card-speaker:empty { display: none; }
.card-title { font: 400 22px / 1.25 var(--font-display); color: var(--parchment); }
.card-title:empty { display: none; }
.card-text { position: relative; font-size: var(--text-size); line-height: 1.55; }
.card-text:empty { display: none; }
.card-text .ghost { opacity: 0; }   /* keeps the height and is what the live region announces */
.card-text .typed { position: absolute; left: 0; top: 0; right: 0; }
.card-text em { font-style: italic; }
.card-label {
  font: 400 15px / 1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 10px 0;
  border-radius: var(--radius);
  outline: none;
  align-self: flex-start;
}
.card-label:empty { display: none; }
.card-hint { font-size: 14px; font-style: italic; color: var(--muted); }
.card-hint:empty { display: none; }

.btn-row {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.btn-row:empty { display: none; }
.btn {
  appearance: none;
  min-height: var(--btn-h);
  padding: 10px 16px;
  background: rgba(22, 27, 58, 0.55);
  border: 1px solid rgba(247, 227, 166, 0.35);
  border-radius: var(--radius);
  color: var(--parchment);
  font: 400 15px / 1.25 var(--font-display);
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { background: rgba(22, 27, 58, 0.8); }
.btn .btn-hint { display: block; font: italic 400 13px / 1.3 var(--font-text); color: var(--muted); margin-top: 3px; letter-spacing: 0; }
.btn--primary { border-color: var(--pale-gold); background: rgba(247, 227, 166, 0.12); }
.btn--primary:hover { background: rgba(247, 227, 166, 0.2); }
.btn--go { color: var(--teal); border-color: rgba(127, 227, 214, 0.6); }
.btn--stones-pick { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 0 14px rgba(127, 227, 214, 0.35); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn[disabled]:hover { background: rgba(22, 27, 58, 0.55); }
.btn-key { color: var(--muted); font-size: 12px; margin-right: 6px; letter-spacing: 0.08em; }

@media (min-width: 720px) {
  :root { --card-h: min(var(--card-max), 270px); }
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .btn-row > .btn { flex: 1 1 calc(50% - 4px); }
  .btn-row > .btn.btn--wide { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ stones card */
.stones-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 88px;
}
.stones-pouch { width: 72px; height: 72px; transition: transform 0.5s ease; transform-origin: 50% 20%; }
.stones-pouch.is-tipped { transform: rotate(-38deg); }
.stones-out { display: flex; gap: 12px; min-width: 60px; }
.stone-big {
  width: 26px; height: 26px; border-radius: 50%; opacity: 0;
  transform: translateX(-30px) translateY(-8px);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.1), opacity 0.3s ease;
}
.stone-big.stone--black { background: var(--ink); box-shadow: 0 0 0 1.5px var(--pale-gold); }
.stone-big.stone--white { background: var(--parchment); box-shadow: 0 0 0 1.5px var(--night); }
.stone-big.is-out { opacity: 1; transform: none; }
.stone-big.is-fallen { opacity: 1; transform: translateY(46px) scale(0.9); }
/* The fallen stones drop 46 px: the scene grows with them so they land above the sentence, not on it. */
.stones-scene:has(.stone-big.is-fallen) { margin-bottom: 40px; transition: margin-bottom 0.5s ease; }
.stones-answer { font: 400 16px / 1.4 var(--font-text); color: var(--parchment); text-align: center; }
.stones-answer b { color: var(--teal); font-weight: 400; }

/* ------------------------------------------------------------------ fold, stamp, ribbon */
.stamp {
  position: absolute;
  left: 50%; top: 45%;
  transform: translate(-50%, -50%) scale(0.9);
  font: 400 26px / 1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--pale-gold);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  text-shadow: 0 1px 10px rgba(18, 16, 28, 0.8);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.stamp.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ribbon {
  position: absolute;
  left: 18px; top: -1px;
  width: 22px; height: 58px;
  background: var(--pale-gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  opacity: 0.9;
}

/* ------------------------------------------------------------------ studio credit
   Real text in the shell, set in the bottom gutter under the card (the 16px strip every screen
   keeps clear), above the overlays so the title and endings screens carry it too. */
.credit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 41;
  margin: 0;
  height: var(--gutter);
  font: 400 9px / var(--gutter) var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--muted);
  opacity: 0.6;
  pointer-events: none;
}
.credit a { color: inherit; text-decoration: none; pointer-events: auto; }
.credit a:hover { color: var(--pale-gold); }
.credit a:focus-visible { outline: var(--ring); outline-offset: 1px; }

/* ------------------------------------------------------------------ overlays: title, menu, endings */
.title, .menu, .endings {
  position: absolute;
  z-index: 40;
  color: var(--parchment);
}
.title { inset: 0; display: flex; flex-direction: column; background: var(--ground); }
.title-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10vh var(--gutter) 0;
  text-align: center;
  overflow: hidden;
}
.title-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-body > :not(canvas) { position: relative; }
.title-kicker { font: 400 12px / 1 var(--font-display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--pale-gold); }
.title-name {
  margin: 12px 0 0;
  font: 400 clamp(34px, 8vw, 58px) / 1.1 var(--font-display);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(18, 16, 28, 0.7);
}
.title-sub { margin: 10px 0 0; font: italic 400 17px / 1.4 var(--font-text); color: var(--parchment); opacity: 0.9; }
.title-attr { margin: 6px 0 0; font: 400 12px / 1 var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.title-note { margin: 12px 0 0; font: italic 400 15px / 1.4 var(--font-text); color: var(--muted); }
.title-card {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) max(var(--gutter), env(safe-area-inset-bottom, 0px));
}
.title-card .card { height: auto; }

.menu { inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: rgba(18, 16, 28, 0.55); }
.menu-panel {
  width: 100%;
  max-width: 380px;
  max-height: 100%;
  overflow: auto;
  padding: 16px;
  background: rgba(43, 36, 82, 0.96);
  border-top: 1px solid var(--pale-gold);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-panel h2 { margin: 0 0 6px; font: 400 12px / 1 var(--font-display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--pale-gold); }
.menu-panel .btn-row { margin-top: 0; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 16px; }
.setting { border-bottom: 1px solid rgba(247, 227, 166, 0.14); cursor: pointer; }
.setting > span { font: 400 15px / 1.25 var(--font-display); letter-spacing: 0.03em; }
/* The kit's own controls: a pale-gold hairline box, a teal check, a select with a drawn chevron. */
.setting select, .setting input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  margin: 0;
  font: 400 15px / 1.25 var(--font-text);
  color: var(--parchment);
  background-color: rgba(22, 27, 58, 0.7);
  border: 1px solid rgba(247, 227, 166, 0.5);
  border-radius: var(--radius);
  cursor: pointer;
}
.setting select {
  min-height: 44px; padding: 8px 34px 8px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F7E3A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}
.setting select option { background: var(--night); color: var(--parchment); }
.setting input[type="checkbox"] { flex: 0 0 26px; width: 26px; height: 26px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.setting input[type="checkbox"]:checked {
  border-color: var(--teal);
  background-color: rgba(127, 227, 214, 0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.6' fill='none' stroke='%237FE3D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.endings {
  inset: var(--hud-h) 0 var(--gutter) 0;   /* stops at the gutter, so scrolled text never runs under the credit */
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--night);
}
.endings-inner { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) 32px; }
.endings-scene { position: relative; height: clamp(220px, 62vw, 300px); margin: 0 calc(-1 * var(--gutter)); overflow: hidden; }
.endings-scene canvas { width: 100%; height: 100%; display: block; }
.endings-scene .ribbon { left: calc(var(--gutter) + 8px); }
.endings-card {
  position: relative;
  margin-top: 0;   /* the painting's ground line and its figures stay clear above the card */
  padding: 18px 18px 14px;
  background: rgba(43, 36, 82, 0.92);
  border-top: 1px solid var(--pale-gold);
  border-radius: var(--radius);
}
.endings-card.is-early { padding-left: 54px; }
.endings-card .ribbon { left: 18px; top: -1px; }
.endings-early { font: 400 12px / 1 var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--pale-gold); margin-bottom: 8px; }
.endings-title { margin: 0; font: 400 clamp(24px, 6vw, 34px) / 1.15 var(--font-display); }
.endings-title.is-true { color: var(--teal); }
.endings-where { font: italic 400 15px / 1.4 var(--font-text); color: var(--muted); margin-top: 4px; }
.endings-epitaph { margin: 12px 0 0; font-size: var(--text-size); line-height: 1.55; }
.endings h3 { margin: 22px 0 8px; font: 400 12px / 1 var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.endings-bonus { margin-top: 10px; border-top-color: var(--teal); }
.endings-bonus .endings-early { color: var(--teal); }
.endings-bonus-title { font: 400 22px / 1.2 var(--font-display); color: var(--parchment); }
/* A deliberate strip: five by two, filling the column. An unreached chapter is blank parchment:
   a faint tint inside a dashed hairline. */
.skies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.skies .sky { aspect-ratio: 96 / 56; border-radius: 3px; overflow: hidden; position: relative; background: rgba(244, 235, 217, 0.07); border: 1px dashed rgba(244, 235, 217, 0.3); }
.skies .sky.is-seen { border: 0; background: var(--dusk-deep); }
.skies .sky canvas { width: 100%; height: 100%; display: block; }
/* The strip's chapter names are spoken (.sr-only) and shown on hover (title), never squeezed in. */
.tally { list-style: none; margin: 0; padding: 0; }
.tally li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(247, 227, 166, 0.14); font-size: 16px; }
.tally li span:first-child { color: var(--muted); }
.tally li span:last-child { color: var(--pale-gold); text-align: right; font-variant-numeric: tabular-nums; }
.collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.collection .slot { padding: 10px 12px; min-height: 60px; border: 1px solid rgba(247, 227, 166, 0.2); border-radius: var(--radius); font: 400 14px / 1.3 var(--font-display); color: var(--muted); background: rgba(43, 36, 82, 0.5); }
.collection .slot.is-reached { color: var(--parchment); border-color: rgba(247, 227, 166, 0.5); }
.collection .slot.is-true { color: var(--teal); border-color: var(--teal); }
.collection button.slot { appearance: none; width: 100%; text-align: left; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.collection button.slot:hover { background: rgba(43, 36, 82, 0.9); border-color: var(--pale-gold); }
.collection .slot.is-current { background: rgba(247, 227, 166, 0.1); }
.collection .slot small { display: block; font: italic 400 12px / 1.3 var(--font-text); color: var(--muted); margin-top: 3px; }
.endings .btn-row { margin-top: 22px; }
.chapter-list { display: flex; flex-direction: column; gap: 8px; }
.endings .chapter-list { margin-top: 8px; scroll-margin-top: 8px; }

/* ------------------------------------------------------------------ ledger (chapter 4 base) */
.ledger { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 16px; }
.ledger-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(247, 227, 166, 0.14); }
.ledger-row span:last-child { color: var(--pale-gold); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ focus, small screens, landscape, reduced motion */
:focus { outline: none; }
:focus-visible, .hotspot:focus-visible, .tile:focus-visible, .btn:focus-visible, .card-label:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--focus);
}
.hotspot:focus-visible { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--focus); }

@media (max-width: 420px) {
  .hud-counter .hud-label { display: none; }
  .hud-counter.is-zero { display: none; }
  .hud { gap: 6px; }
  .hud-right { gap: 6px; margin-right: -6px; }   /* the menu button tucks into the gutter, still fully on screen */
  /* One rule for every chapter: the title sits a fixed gap before the counters and, when it
     does not fit one line, wraps at a word into two balanced 11 px lines (never three, never
     inside a hyphenated name: the engine writes Al-Fayoum with a non-breaking hyphen). The
     Legend horizon becomes the HUD's bottom hairline rather than a 64 px inline bar. */
  .hud-title {
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin-right: 6px;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: keep-all;
    max-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .hud-horizon { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; width: auto; flex: none; }
  .hud-horizon .bookmark { display: none; }   /* the endings card carries the ribbon; a notch on the hairline reads as a glitch */
}
@media (max-width: 359px) {
  :root { --text-size: 17px; }
}
/* Short viewports (landscape phones). The column has to add up: 40 + 110 + 20 + 150 = 320. */
@media (max-height: 479px) {
  :root { --card-h: 150px; --hud-h: 40px; --caption-h: 20px; --btn-h: 44px; }
  .stage { min-height: 110px; }
  .card { padding: 6px 12px 8px; gap: 4px; }
  .btn { padding: 6px 12px; }
  .title-body { padding-top: 4vh; }
  .endings-scene { height: 170px; }
  /* A short card: smaller type, and the buttons pinned to its bottom edge with the page
     scrolling above them, so the way forward is always on screen. */
  :root { --text-size: 16px; }
  .card-text { line-height: 1.45; }
  .card-title { font-size: 19px; }
  .card-region > .card { background: rgba(43, 36, 82, 0.96); }
  .card-region > .card.is-empty { background: transparent; }
  .card-region > .card > .btn-row {
    position: sticky; bottom: -8px; z-index: 1;
    margin: auto -12px -8px; padding: 6px 12px 8px;
    background: var(--dusk-deep);
    gap: 6px;
  }
  .card-region > .card > .btn-row .btn { font-size: 14px; }
  /* Where a long page runs under the pinned row, its last line fades out instead of being
     sliced: the cue that the card scrolls. Over the card's own colour the fade is invisible. */
  .card-region > .card.is-over > .btn-row::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; pointer-events: none;
    background: linear-gradient(to top, var(--dusk-deep), rgba(43, 36, 82, 0));
  }
  /* Three or more answers go two to a row, so the text keeps its three lines (8.3). */
  .card-region > .card > .btn-row:has(> .btn:nth-child(3)) { flex-direction: row; flex-wrap: wrap; }
  .card-region > .card > .btn-row:has(> .btn:nth-child(3)) > .btn { flex: 1 1 calc(50% - 3px); padding: 6px 8px; line-height: 1.2; }
  .card-region > .card > .btn-row:has(> .btn:nth-child(3)) .btn-key { display: none; }
  /* The menu fits a landscape phone: a wider panel, its actions two to a row. */
  .menu { padding: 8px var(--gutter); }
  .menu-panel { max-width: 560px; padding: 12px 14px; gap: 6px; }
  .menu-panel h2 { margin-bottom: 2px; }
  .menu-panel .btn-row { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .menu-panel .btn-row > .btn, .menu-panel .btn-row > .btn.btn--wide { flex: 1 1 calc(50% - 3px); }
  .menu-panel .chapter-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .menu-panel .setting { min-height: 44px; }
}
/* Landscape: the stage and the card sit side by side, so the painting keeps its height and
   the card keeps three lines with its buttons on screen. */
@media (max-height: 479px) and (orientation: landscape) {
  .app {
    --card-col: max(260px, 40%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--card-col);
    grid-template-rows: var(--hud-h) minmax(0, 1fr) var(--caption-h);
    align-items: stretch;
  }
  .app > .hud, .app > .stage, .app > .caption, .app > .card-region { max-width: none; margin: 0; }
  .hud { grid-row: 1; grid-column: 1 / -1; }
  .stage { grid-row: 2; grid-column: 1; min-height: 0; height: auto; }
  .caption { grid-row: 3; grid-column: 1; }   /* over the stage only: the card covers column 2 */
  .app > .card-region { grid-row: 2 / 4; grid-column: 2; height: auto; min-height: 0; padding: 8px var(--gutter) 8px 0; background-color: var(--night); background-image: none; }
  .card-region > .card { left: 0; top: 8px; bottom: 8px; min-height: 0; max-height: none; }
  .stage-btn { bottom: 8px; }
  /* The title's buttons go two to a row at any width, so four of them (a save exists) leave
     the title, its tagline and the credit on screen. */
  .title-card .btn-row { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .title-card .btn-row > .btn { flex: 1 1 calc(50% - 3px); }
  .title-card { padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); }
  /* The save stamp hangs from the HUD as a small tab of the HUD's own night over the painting's
     corner, beside the card: the card's hairline (8 px under the HUD here) never runs through
     the word, and the word never sits on a page's first line. */
  .hud-maktub { margin-top: 0; padding: 3px 8px 5px; right: calc(var(--card-col) + 8px); background: var(--night); border-radius: 0 0 var(--radius) var(--radius); }
  /* Beside the stage the card has the column's whole height, so the page's type goes back up
     toward the 18 px body size (8.2): 17 px here, 16 px on the very shortest phones below. */
  :root { --text-size: 17px; }
  /* The title's words keep to the left of the painting, in clear sky: the engine paints the
     church and its sycamore to the right of this column on a landscape phone. */
  .title-body { align-items: center; padding-right: 40%; }
  .title-name { font-size: clamp(30px, 5.6vw, 46px); margin-top: 8px; }
  .title-sub { font-size: 16px; margin-top: 6px; }
}
/* The shortest landscape phones (about 320 px tall): slightly smaller type and tighter
   leading, so a page keeps its lines beside the pinned buttons. The columns stay as they are
   (the chapters lay their scenes out for that stage). */
/* Accepted landscape size: at 320 px tall the body type is 16 px, not the 18 px of 8.2 (a full
   narration page would not fit the 260 px card at 18 px). The height is won back from the
   card's margins and the answer row instead, so a page still gets its three lines beside five
   or six answers, and anything longer scrolls above the pinned row with the fade cue. */
@media (max-height: 360px) and (orientation: landscape) {
  :root { --text-size: 16px; }
  .app > .card-region { padding-top: 4px; padding-bottom: 4px; }
  .card-region > .card { top: 4px; bottom: 4px; }
  .card { padding: 4px 12px 6px; gap: 3px; }
  .card-region > .card > .btn-row { bottom: -6px; margin-bottom: -6px; padding-bottom: 6px; }
  .card-text { line-height: 1.36; }
  .card-title { font-size: 17px; line-height: 1.2; }
  .card-hint { font-size: 13px; line-height: 1.3; }
  .card-region > .card > .btn-row { gap: 5px; padding-top: 5px; }
  /* Five or more answers (the shop's month) go three to a row. */
  .card-region > .card > .btn-row:has(> .btn:nth-child(5)) > .btn { flex: 1 1 calc(33.33% - 4px); font-size: 13px; line-height: 1.15; padding: 4px 5px; }
  .card-region > .card > .btn-row:has(> .btn:nth-child(5)) .btn-hint { font-size: 12px; line-height: 1.15; margin-top: 2px; }
}
@media (min-height: 900px) {
  :root { --card-h: 340px; }
}

:root[data-motion="reduce"] .card { transition: opacity 0.2s ease; }
:root[data-motion="reduce"] .card.is-folded { transform: none; opacity: 0; }
:root[data-motion="reduce"] .card.is-unfolding { transform: none; opacity: 0; }
:root[data-motion="reduce"] .hud-counter--heart svg { animation: heartpulse 1s ease-in-out infinite; }
:root[data-motion="reduce"] .stone-big { transition: opacity 0.2s ease; transform: none; }
:root[data-motion="reduce"] .stones-pouch { transition: none; }
:root[data-motion="reduce"] .pouch.is-settling { animation: none; }
:root[data-motion="reduce"] .caption, :root[data-motion="reduce"] .card-region { transition: none; }
@keyframes heartpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }