/* ============================================================================
   HOLLOW GLEN  - M0 (Slime Cellar path end to end)
   Single-file vanilla JS/CSS. No frameworks. Google Fonts only external URL.

   CSS DESIGN-DECISION ANSWERS (per build prompt):

   Q1. Cards with no title -> SUPPRESS the title element entirely.
       No title node is emitted and no vertical space is reserved when a card
       has no title. (All M0 Slime Cellar cards have titles; this only matters
       for later interstitials.) Confirmed by author.

   Q2. Rewind timer -> N/A for M0. Rewind is a diegetic power that awakens at
       THE DOOR card (after the Standing Stone, Slot 3). The Slime Cellar path
       (Slot 1) precedes that awakening, so M0 has no rewind, no window, no
       timer. The rewind UI returns in M1 when THE DOOR is built.

   AUTHOR-REQUESTED CORRECTIONS (session 3):
   - Dread is NOT a per-choice tax. It is the floor (minDread) of the current
     scene plus persistent jolts from tagged trauma events. See CARD DATA note.
   - Ending reveal fades in only each NEW sentence, not the whole page.
   - All font sizes scaled x1.5 (FONT_SCALE), including button TEXT; button
     boxes/padding are NOT enlarged.

   Dread atmosphere values, easing curves, thresholds, timings and colors are
   matched to "Monster Guildmaster.dc.html" (per-choice dreadDelta from the
   prototype intentionally dropped in favor of the floor+event model above).
   ============================================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; background: rgb(5,6,7); }
body { font-family: 'IBM Plex Sans', sans-serif; -webkit-text-size-adjust: 100%; }

@keyframes heartbeat { 0%,18%,100%{opacity:.9} 7%{opacity:1} 11%{opacity:.84} 14%{opacity:1} }
@keyframes cardAppear { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes msgFadeIn { from{opacity:0} to{opacity:1} }
@keyframes corruptDrift { 0%,100%{opacity:.35;transform:translateY(0)} 50%{opacity:.7;transform:translateY(-2px)} }
@keyframes wordRise { from{opacity:0;transform:translateY(20px);filter:blur(6px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
.hg-title-word { display:block; opacity:0; animation:wordRise 1s cubic-bezier(0.33,1,0.68,1) both; }
.hg-title-word.w2 { animation-delay:0.3s; }
@keyframes titleAppear { 0%{opacity:0;letter-spacing:.6em} 100%{opacity:1;letter-spacing:.14em} }

button { font-family: inherit; }
button:hover { filter: brightness(1.3); }
::-webkit-scrollbar { width: 0; height: 0; }

/* Hide marginalia columns on narrow viewports so they never overlap the card
   column. The card column max-width is 680px; columns sit at calc(50% + 360px),
   so they need roughly 680 + 2*140 + breathing room. Hide below 1000px. */
.hg-margin { display: block; }
@media (max-width: 1000px) { .hg-margin { display: none; } }

/* ===== v8.35 STYLESHEET, copied whole. Later rules win. ===== */
/* ============================================================================
   FATHOM  -  Stolencow
   Single-file vanilla JS/CSS. No frameworks. Google Fonts only external URL.
   Engine reskinned from Hollow Glen: CARDS dict + string-keyed RESOLVERS table.

   DESIGN DIRECTION: instrument record, not HUD. This is a scientist's field log
   rendered on a terminal that is slowly failing. Four voices, four treatments:
     ward      Source Serif 4       the journal baseline, long-form reading
     terminus  JetBrains Mono       uppercase teletype block, cold, bureaucratic
     planet    Source Serif 4 ital  Ward's own hand, thinned and drifting
     elished   Caveat               a handwritten letter, warm, exempt from flat

   NOTHING IS METERED ON THE PAGE. psychosis drives only ambient treatment
   (vignette, drift, chill) exactly as Hollow Glen's dread did. Equipment,
   contamination and the night economy never render as numbers or bars. Cost is
   carried in Ward's words.
   ============================================================================ */

:root {
  /* ALL COLOUR IS oklch. The oxide is Dead Ascent's, copied exactly from that
     game's style.css line 24: `oklch(0.65 0.22 25)`. Every other token is the
     same colour it was, converted from its hex so nothing shifts but the oxide. */
  /* Backgrounds */
  --color-bg:            oklch(0.12 0.00 0);
  --color-bg-secondary:  oklch(0.15 0.01 248);
  --color-panel:         oklch(0.18 0.01 237);
  --color-panel-deep:    oklch(0.13 0.00 0);
  /* Brand */
  --color-primary:       oklch(0.57 0.04 218);   /* cold instrument teal, Terminus channel */
  --color-primary-mid:   oklch(0.47 0.03 224);
  --color-primary-dark:  oklch(0.34 0.02 228);
  --color-secondary:     oklch(0.65 0.22 25);    /* oxide red, the planet. Dead Ascent --color-danger, exact */
  --color-secondary-deep: oklch(0.55 0.20 25);   /* the same oxide at depth, for the max-psychosis bar */
  --color-accent:        oklch(0.74 0.11 79);    /* lamp amber, Elished */
  --color-accent-2:      oklch(0.68 0.02 217);
  --color-success:       oklch(0.62 0.05 149);
  --color-success-dim:   oklch(0.46 0.04 150);
  --color-danger:        oklch(0.49 0.15 33);
  /* Text */
  --color-text:          oklch(0.87 0.01 85);
  --color-text-dim:      oklch(0.64 0.01 80);
  --color-text-dark:     oklch(0.44 0.01 81);
  --color-bright:        oklch(0.95 0.01 87);
  /* Structure */
  --color-border:        oklch(0.24 0.01 240);
  --color-border-dim:    oklch(0.19 0.01 237);
  --color-ui-bg:         oklch(0.15 0.01 248);
  /* Typography */
  /* IBM Plex Sans: drawn by IBM for engineering documentation. Humanist enough
     to read for hours, machine-adjacent enough that Ward reads as writing on a
     company terminal rather than in a novel. A display face like Orbitron is
     unreadable at body length and was rejected. */
  --font-primary:        'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-display:        'JetBrains Mono', 'Courier New', monospace;
  --font-hand:           'Caveat', 'Segoe Script', cursive;
  --font-size-xs:        12px;
  --font-size-sm:        14px;
  --font-size-base:      18px;
  --font-size-lg:        21px;
  --font-size-xl:        30px;
  --font-size-xxl:       52px;
  --line-height:         1.75;
  --letter-spacing:      0.005em;
  --letter-spacing-wide: 0.22em;
  /* Spacing */
  --space-xs:            4px;
  --space-sm:            8px;
  --space-md:            16px;
  --space-lg:            28px;
  --space-xl:            56px;
  /* UI Chrome */
  --border-width:        1px;
  --border-style:        solid;
  --border-radius:       0px;
  --hud-height:          44px;
  --hud-padding:         14px;
  --hud-font-size:       12px;
  /* Animation */
  --anim-fast:           160ms;
  --anim-normal:         300ms;
  --anim-slow:           900ms;
  --anim-easing:         cubic-bezier(0.33, 1, 0.68, 1);
  /* Canvas (unused: DOM-only game, tokens defined per 05_STYLE_SPEC) */
  --canvas-width:        0px;
  --canvas-height:       0px;
  --canvas-border:       var(--color-border);
  --canvas-bg:           var(--color-bg);
  /* Effects */
  --glow-color:          oklch(0.57 0.04 218 / 0.35);
  --glow-radius:         14px;
  --glow-strong:         oklch(0.65 0.22 25 / 0.45);
  --glow-soft:           oklch(0.87 0.01 85 / 0.10);
  --glow-accent:         oklch(0.74 0.11 79 / 0.30);
  /* Reading measure */
  --measure:             46rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--color-bg); }
body {
  font-family: var(--font-primary);
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 0; height: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------------------------------------------------------------------------
   ATMOSPHERE LAYERS. Fixed, pointer-events none. Opacity driven by psychosis.
   --------------------------------------------------------------------------- */
.fa-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at 50% 42%, transparent 34%, oklch(0 0 0 / 0.55) 78%, oklch(0 0 0 / 0.88) 100%);
  transition: opacity var(--anim-slow) ease;
}
.fa-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(to bottom, oklch(0 0 0 / 0) 0px, oklch(0 0 0 / 0) 2px, oklch(0 0 0 / 0.22) 3px, oklch(0 0 0 / 0) 4px);
  transition: opacity var(--anim-slow) ease;
}
.fa-chill {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, oklch(0.65 0.22 25 / 0.05) 0%, transparent 30%, transparent 70%, oklch(0.65 0.22 25 / 0.07) 100%);
  transition: opacity var(--anim-slow) ease;
}
.fa-grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 3; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes fa-heartbeat { 0%,17%,100%{opacity:.86} 6%{opacity:1} 10%{opacity:.78} 14%{opacity:1} }
/* Fade only. A translate here would move the card while scrollToCurrent is
   measuring its position, which is what made the page snap to older cards. */
@keyframes fa-cardIn    { from{opacity:0} to{opacity:1} }
@keyframes fa-fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes fa-wordRise  { from{opacity:0; transform:translateY(24px); filter:blur(8px)} to{opacity:1; transform:translateY(0); filter:blur(0)} }
@keyframes fa-grainDrift{ 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(2%,1%)} 100%{transform:translate(0,0)} }
@keyframes fa-barSweep  { from{background-position:0 0} to{background-position:24px 0} }

.fa-grain { animation: fa-grainDrift 9s steps(4) infinite; }
.fa-heartbeat { animation: fa-heartbeat 3.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   SHELL
   --------------------------------------------------------------------------- */
.game-wrapper { position: relative; z-index: 4; min-height: 100dvh; }
.game-container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(var(--hud-height) + var(--space-xl)) var(--space-lg) 40vh;
}

/* Fixed top rule. Carries the site label and the day. Never a meter. */
.hud {
  position: fixed; top: 0; left: 0; right: 0; height: var(--hud-height);
  z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--hud-padding);
  background: linear-gradient(180deg, var(--color-bg) 55%, oklch(0.12 0.00 0 / 0.86) 100%);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  font-family: var(--font-display);
  font-size: var(--hud-font-size);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-dark);
  transition: color var(--anim-slow) ease, border-color var(--anim-slow) ease;
}
.hud-field { display: flex; align-items: center; gap: var(--space-sm); }
.hud-label { color: var(--color-text-dark); }
.hud-value { color: var(--color-primary-mid); font-weight: 500; font-variant-numeric: tabular-nums; }
.hud-sep   { color: var(--color-border); }

/* Carrier dot. Slow pulse while the link is open; it is a fact about the
   channel, not a readout of Ward's state. */
.hud-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-primary); box-shadow: 0 0 8px var(--glow-color);
  animation: fa-carrier 3.2s ease-in-out infinite;
}
@keyframes fa-carrier { 0%,100%{opacity:.35} 50%{opacity:1} }

.hud-link { font-size: 10px; letter-spacing: 0.18em; }
.hud-link-live { color: var(--color-primary-dark); }
.hud-link-dead { color: var(--color-danger); }
@media (max-width: 900px) { .hud-link { display: none; } }
.hud-btn {
  background: none; border: none; padding: 4px 8px;
  font-family: var(--font-display); font-size: var(--hud-font-size);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  color: var(--color-text-dark); transition: color var(--anim-fast) ease;
  min-height: 32px;
}
.hud-btn:hover, .hud-btn:focus-visible { color: var(--color-text); }
.hud-btn:focus-visible { outline: 1px solid var(--color-primary-mid); outline-offset: 2px; }
/* Mute reads as instrument state, not a control competing with Endings. */
.hud-btn-mute { color: var(--color-primary-mid); }
.hud-btn-mute[aria-pressed="true"] { color: var(--color-text-dark); opacity: 0.55; }
.hud-btn-mute:hover, .hud-btn-mute:focus-visible { color: var(--color-text); opacity: 1; }

/* ---------------------------------------------------------------------------
   CARDS
   --------------------------------------------------------------------------- */
.fa-card { margin: 0 0 var(--space-xl); }
.fa-card.is-entering { animation: fa-cardIn var(--anim-slow) var(--anim-easing) both; }

.fa-card-slug {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-dark);
  margin-bottom: var(--space-md);
  display: flex; align-items: baseline; gap: var(--space-md);
}
.fa-card-slug::after {
  content: ""; flex: 1; height: 1px;
  background: var(--color-border);
}

.fa-body { font-size: var(--font-size-base); line-height: var(--line-height); letter-spacing: var(--letter-spacing); }
.fa-body p { margin: 0 0 1.05em; }
.fa-body em { font-style: italic; color: var(--color-bright); }
.fa-card.is-past .fa-body { color: var(--color-text-dim); }
.fa-card.is-past .fa-card-slug { color: var(--color-border); }

/* Ward's field-log stamp: the italic scene-setting line at a card head. */
.fa-stamp {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  color: var(--color-primary-mid);
  margin: 0 0 1.2em;
  padding-left: var(--space-md);
  border-left: 2px var(--border-style) var(--color-primary-dark);
}

/* ---- VOICE: terminus. Transmission block. -------------------------------- */
.fa-voice-terminus {
  margin: 1.4em 0;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  background: var(--color-panel-deep);
  border-left: 2px var(--border-style) var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  line-height: 1.85;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.fa-voice-terminus .fa-attr {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--space-sm);
}

/* ---- VOICE: elished. A letter. Exempt from the flat register. ------------ */
.fa-voice-elished {
  margin: 1.4em 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px var(--border-style) oklch(0.74 0.11 79 / 0.4);
  background: linear-gradient(90deg, oklch(0.74 0.11 79 / 0.045), transparent 70%);
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1.55;
  color: var(--color-accent);
}
.fa-voice-elished .fa-attr {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: oklch(0.74 0.11 79 / 0.5);
  margin-bottom: var(--space-sm);
}

/* ---- VOICE: planet. Ward's hand, thinned. -------------------------------- */
/* The planet writes in Ward's own hand, so it borrows Elished's letter face and
   cools it to oxide. It must never read as a system voice: it is a lost-memory
   entry he does not remember writing. */
.fa-voice-planet {
  margin: 1.4em 0;
  padding-left: var(--space-lg);
  border-left: 2px var(--border-style) oklch(0.65 0.22 25 / 0.34);
  font-family: var(--font-hand);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-secondary);
  text-shadow: 0 0 var(--glow-radius) var(--glow-strong);
}
.fa-voice-planet .fa-attr { display: none; }

/* ---- VOICE: ward, attributed (his own report text). ---------------------- */
.fa-voice-ward {
  margin: 1.4em 0;
  padding-left: var(--space-md);
  border-left: 2px var(--border-style) var(--color-border);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
}
.fa-voice-ward .fa-attr {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-dark);
  margin-bottom: var(--space-sm);
}

/* ---- REDACTION. Terminus reads his mail and blacks out the warning. ------ */
.fa-redact {
  display: inline-block;
  position: relative;
  color: transparent !important;
  background: oklch(0 0 0);
  background-image: repeating-linear-gradient(90deg, oklch(0 0 0) 0px, oklch(0 0 0) 10px, oklch(0.07 0 0) 11px, oklch(0 0 0) 12px);
  border-radius: 1px;
  user-select: none;
  vertical-align: baseline;
  box-shadow: inset 0 0 0 1px oklch(0.57 0.04 218 / 0.14);
}
.fa-redact::selection { background: oklch(0 0 0); }

/* ---------------------------------------------------------------------------
   CHOICES
   --------------------------------------------------------------------------- */
/* The choice block reads as a terminal input list: a monospace index numeral
   per option, so the eye can find its place in a long list without the numbers
   ever standing for a value. They are addresses, not scores. */
.fa-choices {
  margin-top: var(--space-lg);
  display: flex; flex-direction: column; gap: 2px;
  border-top: var(--border-width) var(--border-style) var(--color-border);
  padding-top: var(--space-md);
  position: relative;
}
.fa-choices::before {
  content: "SELECT";
  position: absolute; top: -7px; left: 0;
  padding-right: var(--space-sm);
  background: var(--color-bg);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-dark);
}
.fa-choice {
  display: flex; align-items: flex-start; gap: var(--space-md);
  width: 100%; text-align: left;
  background: transparent;
  border: none;
  border-left: 2px var(--border-style) var(--color-border);
  padding: 14px var(--space-md);
  min-height: 48px;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-dim);
  transition: color var(--anim-fast) ease, border-color var(--anim-fast) ease, background var(--anim-fast) ease, padding-left var(--anim-fast) ease;
}
.fa-choice-idx {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-primary-dark);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
  transition: color var(--anim-fast) ease;
}
.fa-choice-label { flex: 1 1 auto; }
.fa-choice:hover, .fa-choice:focus-visible {
  color: var(--color-bright);
  border-left-color: var(--color-primary);
  background: oklch(0.57 0.04 218 / 0.05);
  padding-left: calc(var(--space-md) + 6px);
}
.fa-choice:hover .fa-choice-idx, .fa-choice:focus-visible .fa-choice-idx { color: var(--color-primary); }
.fa-choice:focus-visible { outline: 1px solid var(--color-primary-mid); outline-offset: -1px; }
.fa-choice[disabled] { opacity: 0.38; cursor: default; }

/* Corner brackets on the reading column. Instrument furniture, not a frame. */
/* The column carries no brackets of its own. Each CARD is framed by exactly
   four, drawn per entry, so the top pair and the bottom pair sit on the same
   left and right edges. Two competing bracket systems produced eight marks per
   card, which is what this replaces. */
.game-container { position: relative; }

/* Card slug gets a leading index tick so entries read as a numbered log. */
.fa-card-slug-tick {
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   TITLE SCREEN
   --------------------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-bg);
  padding: var(--space-lg);
  text-align: center;
}
.overlay-studio {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  margin-bottom: var(--space-xl);
  animation: fa-fadeIn 2s ease both;
}
.overlay-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-xxl);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--color-bright);
  margin: 0 0 var(--space-md);
  text-shadow: 0 0 40px var(--glow-color);
}
.overlay-title span { display: inline-block; animation: fa-wordRise 1.5s var(--anim-easing) both; }
.overlay-sub {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: var(--font-size-lg);
  color: var(--color-text-dim);
  max-width: 34rem;
  line-height: 1.55;
  margin: 0 0 var(--space-xl);
}
/* Two lines, deliberately broken. The second lands on its own beat. */
.overlay-sub-line { display: block; animation: fa-fadeIn 2.2s ease both; }
.overlay-sub-line:first-child { animation-delay: 0.7s; }
.overlay-sub-last { color: var(--color-text); animation-delay: 1.5s; margin-top: 0.35em; }
.overlay-cta {
  background: none;
  border: var(--border-width) var(--border-style) var(--color-primary-dark);
  padding: 14px 40px;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  transition: all var(--anim-normal) ease;
  animation: fa-fadeIn 2s ease 1.3s both;
}
.overlay-cta:hover, .overlay-cta:focus-visible {
  color: var(--color-bright);
  border-color: var(--color-primary);
  background: oklch(0.57 0.04 218 / 0.08);
  box-shadow: 0 0 30px var(--glow-color);
}
.overlay-cta:focus-visible { outline: 1px solid var(--color-primary); outline-offset: 3px; }
.overlay-menu { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.overlay-minor {
  background: none; border: none;
  font-family: var(--font-display); font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  color: var(--color-text-dark); padding: 10px 16px; min-height: 40px;
  transition: color var(--anim-fast) ease;
  animation: fa-fadeIn 2s ease 1.6s both;
}
.overlay-minor:hover, .overlay-minor:focus-visible { color: var(--color-text); }
.overlay-minor:focus-visible { outline: 1px solid var(--color-primary-mid); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   TITLE DOCKET. Built to the reference mockup, measured at 794px wide:
     frame        562/794 = 70.8% of viewport, 627px tall at that width
     meta inset   14px from the frame edge
     studio line  97px below the frame top
     logline      one centred line, 35px under the title centre
     menu         indented 108px from the frame left, 48px row pitch
     lower meta   15px above the frame bottom
   Everything is expressed as a ratio of the frame so it holds at any width.
   --------------------------------------------------------------------------- */
.docket {
  position: relative;
  width: 70.8vw;
  max-width: 44rem;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6.2% 2.5% 5%;
  animation: fa-fadeIn 1.6s ease both;
}
/* Four brackets, one per corner, on the same edges. */
.docket-corner {
  position: absolute; width: 18px; height: 18px;
  border-color: var(--color-primary-dark); border-style: solid;
  pointer-events: none; opacity: 0.85;
}
.docket-corner.tl { top: 85px; left: 65px;  border-width: 1px 0 0 1px; }
.docket-corner.tr { top: 85px; right: 65px; border-width: 1px 1px 0 0; }
.docket-corner.bl { bottom: 165px; left: 65px;  border-width: 0 0 1px 1px; }
.docket-corner.br { bottom: 165px; right: 65px; border-width: 0 1px 1px 0; }

/* Instrument chrome, inset 14px inside the frame corners. */
.docket-meta {
  position: absolute;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  white-space: nowrap;
  animation: fa-fadeIn 2.4s ease 0.6s both;
}
.docket-meta.tl { top: 103px; left: 79px; display: flex; align-items: center; gap: 7px; }
.docket-meta.tr { top: 103px; right: 79px; }
.docket-meta.bl { bottom: 179px; left: 79px; }
.docket-meta.br { bottom: 179px; right: 79px; }
.docket-meta .lit { color: var(--color-text-dim); }

/* The site is still transmitting. */
.docket-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 8px var(--glow-strong);
  animation: fa-carrier 3.4s ease-in-out infinite;
}
@keyframes fa-carrier { 0%,100%{opacity:.3} 50%{opacity:1} }

/* Studio line sits 97px below the frame top at reference width. */
.docket .overlay-studio { margin: 9.5% 0 0; transform: translateY(0px); }

/* The title block: wordmark, then the logline tight beneath it. */
.docket .overlay-title { margin: 8.5% 0 0; }
/* The title block. The wordmark sets the width; the rule and the logline both
   match it exactly, which is what makes the group read as one unit. */
.docket-titleblock {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  /* 30px below the studio line. The wordmark, rule and logline move as one
     unit, and the menu below carries the same offset. */
  margin: calc(8.5% + 30px) 0 0;
  /* Where the GLYPHS sit inside the h1's content box.

     Each letter is an inline-block span and letter-spacing: 0.34em is applied
     after EVERY span, including the last, so the box runs 0.34em past the M on
     the right. text-indent: 0.34em then pushes the glyphs right inside that
     box, so the F starts 0.34em in from the left edge.

     The box is therefore offset left relative to the letters, which is why an
     equal inset on both sides still overhangs on the left. The left inset is
     the indent plus the letter-space; the right is the letter-space alone. */
  --title-indent: calc(var(--font-size-xxl) * 0.68);
  --title-trail:  calc(var(--font-size-xxl) * 0.34);
}
/* The wordmark sets the block width. It must NOT be align-self: center, or the
   block sizes to the logline instead and the rule spans a box wider than the
   letters, overhanging on the left where text-indent has pushed the glyphs
   right. */
.docket-titleblock .overlay-title {
  margin: 0;
  align-self: stretch;
}

/* The rule under FATHOM. */
/* The rule is anchored to where the GLYPHS start, not to the block edge. The
   wordmark carries text-indent: 0.34em, which pushes F right, and
   letter-spacing: 0.34em, which leaves a trailing gap after M. Deriving both
   ends from the same em value makes the rule track the letters at any viewport
   width instead of needing a new pixel guess each time. */
/* Width and offset are set in JS from the rendered glyph positions. */
.docket-rule {
  height: 1px;
  margin: 14px 0 0;
  background: var(--color-primary-dark);
  opacity: 0.9;
  animation: fa-fadeIn 2.2s ease 0.9s both;
}

/* Logline: centred, and stretched to the exact width of the wordmark above it
   so it is never longer or shorter than FATHOM. */
.docket-logline {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.42vw, 17px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
  margin: 9px 0 0;
  transform: translateX(10px);
  white-space: nowrap;
  /* The WORDMARK sizes the block. The logline is laid out inside that width and
     is not allowed to widen it, or the rule stretches past the letters. */
  width: 0;
  min-width: 100%;
  animation: fa-fadeIn 2.2s ease 1s both;
}

/* Menu: a narrow left-aligned block, indented from the frame edge. */
.docket-menu {
  display: flex; flex-direction: column;
  align-self: flex-start;
  margin: 12% 0 0 19.2%;
  animation: fa-fadeIn 2s ease 1.2s both;
}
.docket-item {
  display: flex; align-items: baseline; gap: 18px;
  background: none;
  border: none; border-left: 2px var(--border-style) var(--color-border);
  padding: 12px 18px; min-height: 46px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  text-align: left;
  transition: color var(--anim-fast) ease, border-color var(--anim-fast) ease, background var(--anim-fast) ease, padding-left var(--anim-fast) ease;
}
.docket-item:hover, .docket-item:focus-visible {
  color: var(--color-bright);
  border-left-color: var(--color-primary);
  background: oklch(0.57 0.04 218 / 0.05);
  padding-left: 24px;
}
.docket-item:focus-visible { outline: 1px solid var(--color-primary-mid); outline-offset: -1px; }
.docket-item-idx {
  flex: 0 0 auto; font-size: 10px; font-weight: 500;
  color: var(--color-primary-dark); font-variant-numeric: tabular-nums;
  transition: color var(--anim-fast) ease;
}
.docket-item:hover .docket-item-idx { color: var(--color-primary); }

@media (max-width: 900px) {
  .docket { width: 88vw; min-height: 84vh; }
  .docket-menu { margin-left: 10%; }
  .docket-meta { font-size: 9px; letter-spacing: 0.12em; }
  .docket-logline { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   ENDING + GALLERY
   --------------------------------------------------------------------------- */
.fa-ending-line {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 1em;
  animation: fa-fadeIn 1.6s ease both;
}
.fa-ending-card {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: var(--border-width) var(--border-style) var(--color-border);
  background: var(--color-panel-deep);
}
.fa-ending-name {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-md);
}
.fa-ending-desc { font-style: italic; color: var(--color-text-dim); line-height: 1.65; }

.gallery-count {
  font-family: var(--font-display); font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  color: var(--color-text-dark); text-align: center; margin-bottom: var(--space-xl);
}
.gallery-group { margin-bottom: var(--space-xl); }
.gallery-group-title {
  font-family: var(--font-display); font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  color: var(--color-primary-mid);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-md);
}
.ending-card { padding: 12px 0; border-bottom: var(--border-width) var(--border-style) var(--color-border-dim); }
.ending-card .ec-title {
  font-family: var(--font-display); font-size: var(--font-size-xs);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px;
}
.ending-card.unlocked .ec-title { color: var(--color-text); }
.ending-card.locked   .ec-title { color: var(--color-text-dark); letter-spacing: var(--letter-spacing-wide); }
.ending-card .ec-line { font-style: italic; font-size: 17px; line-height: 1.55; }
.ending-card.unlocked .ec-line { color: var(--color-text-dim); }
.ending-card.locked   .ec-line { color: var(--color-border); }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --font-size-base: 17px; --font-size-xxl: 34px; --space-xl: 36px; }
  .game-container { padding-left: var(--space-md); padding-right: var(--space-md); }
  .fa-voice-elished { font-size: 23px; }
}