/* Living Drama storyboard player. One vertical frame; the interface stays out of the way. */

:root {
  --bg: #07080b;
  --frame: #111318;
  --frame-edge: #1c1f27;
  --ink: #eceae4;
  --ink-soft: #a9a59b;
  --ink-faint: #6d6a63;
  --accent: #e7b98a;
  --screen: #1b2a3a;
  --screen-ink: #cfe3f7;
  --bar: rgba(236, 234, 228, 0.55);
  --pill-bg: rgba(20, 22, 28, 0.55);
  --pill-edge: rgba(236, 234, 228, 0.18);
  --scale: 1;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px;
}

.frame {
  --tint: #181b22;
  --scale: 1;
  position: relative;
  width: min(100%, calc((100vh - 32px) * 9 / 16), 460px);
  aspect-ratio: 9 / 16;
  background: var(--frame);
  border: 1px solid var(--frame-edge);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* The "footage": a tinted gradient per story. Beats push in on it slowly under a vignette. */
.scene {
  position: absolute;
  inset: -4%;
  background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--tint) 55%, #181b22) 0%, var(--frame) 62%, #0b0c10 100%);
  transform: scale(1);
  transition: transform 900ms ease;
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  transition: opacity 1200ms ease;
}
.frame.beat-on .scene { animation: push-in var(--beat-ms, 3500ms) ease-out forwards; }
.frame.beat-on .scene::after { opacity: 1; }
@keyframes push-in { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ILLUSTRATED: a pre-made still (or clip) per card, full bleed behind the text. Two layers crossfade;
   the image moves (Ken Burns, set from the card's shot by the script). Scrims keep all three registers
   readable: the top one under the stage direction, a soft band behind the thought, the bottom one under
   the subtitles. If an image is missing or fails, the frame falls back to the storyboard look. */
.visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.frame.illustrated .visual { opacity: 1; }
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms ease; background: #07080b; }
.layer.on { opacity: 1; }
.layer.reaction { transition-duration: 450ms; }  /* after A and B in the DOM: over the card, under the scrims */
.layer img, .layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 0 0;  /* the script sets translate + scale: a crop centred on the shot's focus */
  will-change: transform;
}
.layer video { opacity: 0; transition: opacity 450ms ease; }
.layer video.playing { opacity: 1; }
.scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 5, 7, 0.8) 0%, rgba(4, 5, 7, 0.42) 15%, rgba(4, 5, 7, 0) 28%,
                    rgba(4, 5, 7, 0) 56%, rgba(4, 5, 7, 0.55) 74%, rgba(4, 5, 7, 0.9) 100%);
  transition: box-shadow 1200ms ease;
}
.frame.illustrated.beat-on .scrim { box-shadow: inset 0 0 120px 40px rgba(0, 0, 0, 0.7); }  /* the beat vignette */
.frame.illustrated .location { color: rgba(236, 234, 228, 0.72); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.frame.illustrated .direction {
  color: rgba(236, 234, 228, 0.9);
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.7);
}
.frame.illustrated .card.bridge .direction, .frame.illustrated .card.beat .direction { color: rgba(245, 243, 238, 0.92); }
/* Over an image the stage direction is compact (smaller, at most three lines) so faces stay visible,
   and it dims once read (the script adds .dim after its reading time, or when a reaction close-up takes
   the frame). The full text is in the "Previously" drawer. Storyboard mode is unchanged. */
.frame.illustrated .card:not(.bridge):not(.beat) .location { margin-bottom: 4px; font-size: calc(9.5px * var(--scale)); }
.frame.illustrated .card:not(.bridge):not(.beat) .direction {
  font-size: calc(12.5px * var(--scale));
  line-height: 1.34;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  transition: opacity 1400ms ease;
}
.frame.illustrated .card:not(.bridge):not(.beat) .direction.dim { opacity: 0.22; }
.frame.illustrated .thought {
  background: linear-gradient(90deg, rgba(4, 5, 7, 0.66) 0%, rgba(4, 5, 7, 0.4) 72%, rgba(4, 5, 7, 0) 100%);
  border-radius: 0 12px 12px 0;
  padding-right: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.frame.illustrated .t-part { opacity: 0.95; }
.frame.illustrated .t-weighing { opacity: 0.8; }
.frame.illustrated .subtitles {
  background: linear-gradient(180deg, transparent 0%, rgba(4, 5, 7, 0.72) 32%, rgba(4, 5, 7, 0.9) 100%);
}
.frame.illustrated .sub.action { color: rgba(236, 234, 228, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.frame.illustrated .remembered { color: rgba(236, 234, 228, 0.7); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }

.progress { position: absolute; z-index: 1; inset: 10px 14px auto; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
.bar { height: 100%; width: 0; background: var(--bar); border-radius: 2px; }

.card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 58px 24px 0;  /* the frame chrome sits in its own row above */
  pointer-events: none;
  transition: opacity 420ms ease;
}
.card.fading { opacity: 0; }

/* STAGE DIRECTION: small caps, muted, at the top. Upright: italics belong to thoughts. */
.location {
  margin: 0 0 8px;
  font-size: calc(10.5px * var(--scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.location:empty { display: none; }

.direction {
  margin: 0;
  font-family: var(--sans);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-size: calc(15px * var(--scale));
  line-height: 1.45;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* Bridges and beats: the direction is the whole card. Centred, upright serif, held. */
/* Seated below the thought region (upper third), so a thought never lands on them. */
.card.bridge, .card.beat { justify-content: flex-end; padding-bottom: 168px; }
.card.bridge .direction, .card.beat .direction {
  font-family: var(--serif);
  font-variant: normal;
  font-variant-caps: normal;
  letter-spacing: 0;
  text-align: center;
  font-size: calc(19px * var(--scale));
  color: rgba(236, 234, 228, 0.8);
  opacity: 1;
}
.card.beat .direction { animation: beat-in 1400ms ease both; }
@keyframes beat-in { from { opacity: 0; letter-spacing: 0.01em; } to { opacity: 1; letter-spacing: 0; } }

/* SPEECH: the bottom subtitle band. Solid, upright, white on a scrim, with the speaker. */
.subtitles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 76px;
  padding: 26px 20px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 60px;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 5, 7, 0.62) 38%, rgba(4, 5, 7, 0.78) 100%);
  opacity: 1;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.subtitles:empty, .frame.beat-on .subtitles, .card.bridge ~ .subtitles:empty { opacity: 0; }
.sub {
  margin: 0;
  font-size: calc(17px * var(--scale));
  line-height: 1.38;
  color: #fff;
  font-style: normal;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease, font-size 320ms ease;
}
.sub.on { opacity: 1; transform: none; }
.sub.prev { opacity: 0.42; font-size: calc(15px * var(--scale)); }
.sub .who {
  display: inline-block;
  margin-right: 8px;
  font-size: calc(10px * var(--scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: var(--accent);
}
/* A voiced line: every word is there from the start, dimmed, and lights up as it is spoken. Subtle:
   no colour, no bounce; the previous line in rolling mode is fully lit. */
.sub.voiced .w { opacity: 0.5; transition: opacity 160ms linear; }
.sub.voiced .w.said { opacity: 1; }
.sub.voiced .who { opacity: 1; }
.sub.action { font-variant: small-caps; letter-spacing: 0.05em; color: var(--ink-soft); text-shadow: none; }
.sub.screen {
  align-self: flex-start;
  background: var(--screen);
  color: var(--screen-ink);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: calc(15px * var(--scale));
  text-shadow: none;
}
.sub.screen .who { color: var(--screen-ink); opacity: 0.6; }

.remembered {
  position: absolute;
  left: 24px;
  top: 27px;  /* the chrome row, clear of the subtitles */
  margin: 0;
  font-size: calc(12px * var(--scale));
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 900ms ease;
}
.remembered.on { opacity: 1; }

/* "Say something…" — visually quiet, brighter only when a moment is open. */
.pill {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--pill-edge);
  background: var(--pill-bg);
  color: var(--ink);
  font: 14px var(--sans);
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  opacity: 0.14;
  transition: opacity 700ms ease;
  cursor: text;
  white-space: nowrap;
}
.pill.lit { opacity: 0.8; }
/* Over an image the resting pill must still be findable: a darker glass and a higher floor. It sits
   above every layer (visual, scrims, subtitles, thought) and is at least 44px tall, so it is always
   tappable; one line, never wrapped, clipped with an ellipsis if a story's label is long. */
.pill {
  z-index: 3;
  min-height: 44px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.frame.illustrated .pill {
  opacity: 0.55;
  background: rgba(8, 9, 12, 0.66);
  border-color: rgba(236, 234, 228, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.frame.illustrated .pill.lit { opacity: 0.95; }
.frame.beat-on .pill.lit { opacity: 0.9; }
.pill:hover, .pill:focus-visible { opacity: 0.9; outline: none; }

.say {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 22px;
  transition: opacity 260ms ease;
}
.say.gone { opacity: 0; }
.say input {
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--pill-edge);
  background: rgba(10, 11, 14, 0.78);
  color: var(--ink);
  font: 16px var(--sans);
  outline: none;
}
.say input:focus { border-color: rgba(231, 185, 138, 0.5); }

/* THOUGHT: upper third, italic, translucent, accent colour, a thin rule on the left. */
.thought {
  --thought-accent: var(--accent);
  position: absolute;
  top: 30%;
  left: 26px;
  right: 34px;
  margin: 0;
  padding: 4px 0 4px 14px;
  border-left: 1px solid color-mix(in srgb, var(--thought-accent) 55%, transparent);
  font-family: var(--serif);
  font-style: italic;
  color: var(--thought-accent);
  pointer-events: none;
  opacity: 1;
  transition: opacity 900ms ease;
  z-index: 2;
}
.thought.fade { opacity: 0; }
.t-who {
  margin: 0 0 4px;
  font: calc(10px * var(--scale)) var(--sans);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}
.t-part { margin: 0 0 6px; font-size: calc(18px * var(--scale)); line-height: 1.4; opacity: 0.82; }
.t-part:empty { display: none; }
.t-weighing { opacity: 0.66; font-size: calc(16px * var(--scale)); }
.t-verdict { opacity: 0.95; }
.thought[data-tone="resist"] .t-verdict, .thought[data-tone="principle"] .t-verdict { letter-spacing: 0.01em; }
.t-part .w {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(3px);
  transition: opacity 700ms ease, filter 900ms ease, transform 700ms ease;
  white-space: pre;
}
.t-part .w.on { opacity: 1; filter: blur(0); transform: none; }

/* The viewer's whisper lifting into the character's head. */
.whisper {
  position: absolute;
  left: 26px;
  right: 26px;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(17px * var(--scale));
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}
.whisper.lift {
  transition: transform 500ms cubic-bezier(0.3, 0.1, 0.2, 1), opacity 500ms ease, filter 500ms ease;
}

/* Frame chrome: quiet until wanted. */
.chrome { position: absolute; top: 20px; right: 12px; z-index: 4; display: flex; gap: 6px; }
.icon {
  border: 1px solid transparent;
  background: rgba(10, 11, 14, 0.35);
  color: var(--ink-soft);
  border-radius: 999px;
  font: 12px var(--sans);
  padding: 6px 10px;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 300ms ease, border-color 300ms ease;
}
.icon:hover, .icon:focus-visible, .icon[aria-expanded="true"] { opacity: 1; border-color: var(--pill-edge); outline: none; }
.gear { font-size: 15px; padding: 3px 9px; }
/* "Tap for sound": the one visible invitation to unlock audio (browsers need a gesture). Brighter than
   the rest of the chrome, gone for good once sound plays. */
.sound-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.92;
  color: var(--ink);
  background: rgba(10, 11, 14, 0.6);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  animation: sound-hint 2400ms ease-in-out 3;
}
.sound-btn svg { flex: none; color: var(--accent); }
@keyframes sound-hint { 50% { border-color: var(--accent); } }
.recap-btn { letter-spacing: 0.06em; }
.frame.chrome-hidden .chrome { display: none; }

/* Sheets: the drawer and the preferences overlay the story; they never pause it. */
.drawer, .prefs {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(4, 5, 7, 0.38);
}
.drawer-sheet, .prefs-sheet {
  max-height: 72%;
  overflow-y: auto;
  padding: 10px 20px 22px;
  border-radius: 18px 18px 0 0;
  background: rgba(14, 15, 20, 0.94);
  border-top: 1px solid var(--frame-edge);
  animation: sheet-up 280ms ease both;
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; position: relative; }
.sheet-head h2 { margin: 0; flex: 1; font: 11px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.grip { position: absolute; top: -6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--pill-edge); }
.close { border: 0; background: none; color: var(--ink-soft); font-size: 22px; line-height: 1; padding: 4px 8px; cursor: pointer; }

.recap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.recap li { font-size: calc(14px * var(--scale)); line-height: 1.4; color: var(--ink); }
.recap .who { display: block; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1px; }
.recap .dir { font-variant: small-caps; letter-spacing: 0.03em; color: var(--ink-soft); }
.recap .loc { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 6px; }
.recap .pair { border-left: 1px solid var(--pill-edge); padding-left: 10px; }
.recap .you { color: var(--ink); }
.recap .you .who { color: var(--ink-soft); }
.recap .thought-line { font-family: var(--serif); font-style: italic; color: var(--thought-accent, var(--accent)); margin-top: 4px; }
.recap .thought-line .who { font-family: var(--sans); font-style: normal; color: inherit; opacity: 0.7; }
.recap .empty { color: var(--ink-faint); font-style: italic; }

.prefs fieldset { border: 0; margin: 0 0 14px; padding: 0; }
.prefs legend { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; padding: 0; }
.prefs .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.prefs .seg label { flex: 1; min-width: 56px; }
.prefs .seg input { position: absolute; opacity: 0; pointer-events: none; }
.prefs .seg span {
  display: block;
  text-align: center;
  padding: 9px 8px;
  border-radius: 10px;
  border: 1px solid var(--pill-edge);
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
}
.prefs .seg input:checked + span { border-color: var(--accent); color: var(--accent); }
.prefs .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Account chip (signed-in viewer) at the foot of the preferences sheet. */
.account { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--pill-edge); font-size: 13px; color: var(--ink-soft); }
.account .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account a, .account button { border: 1px solid var(--pill-edge); border-radius: 10px; background: none;
  color: var(--ink-soft); font: inherit; padding: 7px 10px; min-height: 36px; cursor: pointer; text-decoration: none; }
.account a:hover, .account button:hover { border-color: var(--accent); color: var(--accent); }

.choices {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 24px;
  display: flex;
  gap: 10px;
}
.choices button {
  flex: 1;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--pill-edge);
  background: var(--pill-bg);
  color: var(--ink);
  font: 14px var(--sans);
  cursor: pointer;
}
.choices button:hover { border-color: var(--accent); }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 32px 28px;
  background: rgba(7, 8, 11, 0.92);
  text-align: center;
}
.overlay h1 { margin: 0; font: 400 26px/1.25 var(--serif); }
.overlay .kicker { margin: 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.overlay .hint { margin: 0; font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.overlay .q { text-align: left; }
.overlay .q p { margin: 0 0 8px; font-size: 15px; }
.overlay .row { display: flex; gap: 8px; flex-wrap: wrap; }
.overlay button, .overlay input {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--pill-edge);
  background: transparent;
  color: var(--ink);
  font: 14px var(--sans);
}
.overlay input { width: 100%; margin-top: 8px; }
.overlay button { cursor: pointer; }
.overlay button.on { border-color: var(--accent); color: var(--accent); }
.overlay .go { margin-top: 6px; background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Story picker: vertical-drama posters. */
.picker {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 22px 16px 28px;
  background: linear-gradient(180deg, #0c0d11 0%, #07080b 100%);
  z-index: 5;
}
.picker-head { margin: 4px 4px 18px; }
.brand { margin: 0; font: 400 24px/1.2 var(--serif); letter-spacing: 0.01em; }
.tagline { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.shelf .hint { grid-column: 1 / -1; color: var(--ink-soft); font-size: 14px; }
.poster { display: block; color: var(--ink); text-decoration: none; min-width: 0; }
.poster .art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(120% 70% at 30% 20%, color-mix(in srgb, var(--poster) 90%, white 10%) 0%, var(--poster) 45%, #07080b 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 200ms ease, border-color 200ms ease;
}
.poster:hover .art, .poster:focus-visible .art { transform: translateY(-2px); border-color: var(--poster-accent); }
.poster:focus-visible { outline: none; }
.poster .art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}
.poster h2 { position: relative; z-index: 1; margin: 0; font: 400 16px/1.2 var(--serif); }
.poster .chips {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.poster .tag, .poster .badge, .poster .resume {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.poster .tag { background: rgba(0, 0, 0, 0.45); color: var(--poster-accent); }
.poster .badge { background: rgba(0, 0, 0, 0.55); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.28); padding: 2px 7px;
  border-radius: 8px; line-height: 1.45; }  /* "Illustrated · Voiced · 3 clips": may wrap between parts */
.poster .badge .part { white-space: nowrap; }
.poster .resume { margin-left: auto; background: var(--poster-accent); color: #07080b; }
/* Illustrated: the cover still fills the poster; a darker gradient keeps the title and chips readable. */
.poster .cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.poster.illustrated .art::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 26%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.9) 100%);
}
.poster .logline {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.poster .meta { margin: 4px 2px 0; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-faint); }

.overlay .more { color: var(--ink-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

.debug {
  width: 340px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--frame-edge);
  border-radius: 12px;
  background: #0d0e12;
}
.debug h2 { margin: 0 0 8px; font: 11px var(--mono); letter-spacing: 0.1em; color: var(--ink-faint); text-transform: uppercase; }
.debug pre { margin: 0; font: 11px/1.45 var(--mono); color: var(--ink-soft); white-space: pre-wrap; word-break: break-word; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 820px) {
  .stage { flex-direction: column; padding: 16px; }
  .debug { width: 100%; }
}

.frame[data-size="s"] { --scale: 0.9; }
.frame[data-size="l"] { --scale: 1.18; }
.frame.sheet-open .card, .frame.sheet-open .subtitles, .frame.sheet-open .thought { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .card, .sub, .pill, .say, .remembered, .scene, .scene::after, .poster .art, .thought, .subtitles { transition: none; }
  .visual, .layer, .layer video, .scrim, .frame.illustrated .card:not(.bridge):not(.beat) .direction { transition: none; }  /* cuts, not crossfades; no Ken Burns, no autoplay (script) */
  .t-part .w { transition: opacity 200ms linear; filter: none; transform: none; }
  .frame.beat-on .scene, .card.beat .direction, .drawer-sheet, .prefs-sheet { animation: none; }
  .whisper { display: none; }
  .sound-btn { animation: none; }
  .sub.voiced .w { transition: none; }
}