/* =============================================================
   Unsaid Gifts · Pro scene player
   Rebuilt 2026-10-14 from audit/scene-player-design-audit-2026-10-14.md:
   one thing on screen at a time, the film always whole, the Wrapped brand.

   Phone held upright: bar, film (16:9, whole frame), what was said, and a
   white sheet with the choices that rises when it is your turn.
   Landscape and desktop: the film on the left, the conversation and the
   choices in a panel on the right.
============================================================= */

:root {
  /* Wrapped (brand/README.md). No navy anywhere. */
  --paper: #ffffff;
  --grove: #173d1c;
  --ink: #1b2a20;
  --ink-soft: #3c4a40;
  --ink-mute: #5b6d60;
  --ribbon: #1584d2;          /* decoration */
  --ribbon-text: #1278c0;     /* text and buttons: 4.7:1 with white */
  --leaf: #77a635;
  --leaf-deep: #4d7a1c;
  --rule: rgba(23, 61, 28, 0.14);
  --film: #0f1311;            /* warm green-black, never navy */
  --on-film: #ffffff;
  --on-film-mute: rgba(255, 255, 255, 0.64);
  --you: #dff0fb;
  --you-label: #9fd0f2;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --bar-h: calc(56px + env(safe-area-inset-top));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --openness: 0.5;            /* set by the player from the other person's state */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* iPhone Safari: 100vh is the height with the toolbar hidden, so the bottom
   of the screen sat under the toolbar. dvh follows the visible area. */
html, body { height: 100%; }
body {
  height: 100vh; height: 100dvh;
  overflow: hidden;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body[data-phase="film"], body[data-phase="establish"] { background: var(--film); }

/* Safari draws its own play button on a video it will not autoplay (Low
   Power Mode). The player falls back to the still, so hide that button. */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

/* =============================================================
   Top strip: exit (D-010), the choices so far, Help
============================================================= */
.cv3-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bar-h);
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 14px;
  color: var(--grove); background: var(--paper);
  transition: background 500ms var(--ease), color 500ms var(--ease);
}
body[data-phase="film"] .cv3-bar,
body[data-phase="establish"] .cv3-bar { color: var(--on-film); background: var(--film); }

.cv3-exit {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: inherit; text-decoration: none;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.cv3-exit::after { content: ""; position: absolute; inset: -2px; }
.cv3-exit:hover { background: color-mix(in srgb, currentColor 18%, transparent); }

.cv3-progress {
  flex: 1; display: flex; gap: 4px; list-style: none;
  max-width: 420px; margin: 0 auto;
}
.cv3-progress li {
  flex: 1; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, currentColor 22%, transparent);
  transition: background 400ms var(--ease);
}
.cv3-progress li.now { background: linear-gradient(90deg, currentColor 50%, color-mix(in srgb, currentColor 22%, transparent) 50%); }
.cv3-progress li.done { background: currentColor; }
body[data-phase="start"] .cv3-progress { visibility: hidden; }

.cv3-bar .ug-help-link { flex: none; color: inherit; }

/* =============================================================
   Shared pieces
============================================================= */
.cv3-stage { position: fixed; inset: 0; }
.cv3-stage > section { position: absolute; inset: 0; }

.cv3-eyebrow {
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute);
}
.cv3-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 14px 20px;
  border: 0; border-radius: 16px;
  font: 600 16px/1.2 var(--sans); color: #fff; text-decoration: none;
  background: var(--ribbon-text); cursor: pointer;
  transition: background 200ms var(--ease), transform 120ms var(--ease);
}
.cv3-btn:hover { background: #0f68a8; }
.cv3-btn:active { transform: scale(0.99); }
.cv3-btn-text {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 0; background: none; cursor: pointer;
  font: 500 15px/1.3 var(--sans); color: var(--ribbon-text);
}
.cv3-btn-text.saved { color: var(--leaf-deep); cursor: default; }
.cv3-btn:focus-visible, .cv3-btn-text:focus-visible, .cv3-exit:focus-visible,
.cv3-option:focus-visible, .cv3-why summary:focus-visible, .cv3-mode-chip:focus-visible {
  outline: 2px solid var(--ribbon); outline-offset: 2px;
}

/* =============================================================
   Start: one screen
============================================================= */
.cv3-start { overflow-y: auto; background: var(--paper); }
.cv3-start-inner {
  min-height: 100%; max-width: 520px; margin: 0 auto;
  padding: calc(var(--bar-h) + 12px) 28px max(28px, calc(16px + env(safe-area-inset-bottom)));
  display: flex; flex-direction: column;
}
.cv3-start-emblem { width: 88px; height: 88px; margin: 0 0 18px -10px; }
.cv3-start-title {
  font: 400 clamp(38px, 11vw, 48px)/1.04 var(--serif);
  color: var(--grove); margin: 10px 0 16px;
}
.cv3-start-situation { font: 400 21px/1.42 var(--serif); color: #2c3d31; }
.cv3-start-meta { font: 400 15px/1.45 var(--sans); color: var(--ink-soft); margin-top: 18px; }
.cv3-why { margin: 14px 0 28px; }
.cv3-why summary {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 15px var(--sans); color: var(--ribbon-text);
  cursor: pointer; list-style: none;
}
.cv3-why summary::-webkit-details-marker { display: none; }
.cv3-why summary::after { content: "+"; margin-left: 8px; font-weight: 400; }
.cv3-why[open] summary::after { content: "\2212"; }
.cv3-why-quote { font: italic 400 19px/1.45 var(--serif); color: #2c3d31; margin-top: 4px; }
.cv3-why-cite { font: 400 13px/1.4 var(--sans); color: var(--ink-mute); margin-top: 8px; }
/* The button sits at the bottom of the screen, or below the text when the
   text is taller than the screen (the .cv3-why margin keeps a gap). */
.cv3-begin { margin-top: auto; }
/* A large screen: no thumb to reach for, so the start page centres and the
   button follows the text instead of sitting at the bottom edge. */
@media (min-width: 700px) and (min-height: 640px) {
  .cv3-start-inner { justify-content: center; }
  .cv3-begin { margin-top: 0; max-width: 360px; }
  .cv3-end-actions { margin-top: 0; }
  .cv3-end-actions .cv3-btn { max-width: 360px; }
  .cv3-end-actions .cv3-btn-text { width: auto; align-self: flex-start; }
}

/* =============================================================
   Establishing shot
============================================================= */
.cv3-establish { background: var(--film); padding-top: var(--bar-h); display: grid; place-items: center; }
.cv3-establish-video { width: 100%; max-height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* =============================================================
   Film
============================================================= */
.cv3-film {
  background: var(--film); color: var(--on-film);
  padding-top: var(--bar-h);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  opacity: 0; transition: opacity 600ms var(--ease);
}
.cv3-film.visible { opacity: 1; }

.cv3-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.cv3-film-still, .cv3-film-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 500ms var(--ease);
}
.cv3-film-still { z-index: 1; }
.cv3-film-still.active { opacity: 1; }
.cv3-film-video { z-index: 2; }
.cv3-film-video.playing { opacity: 1; }

/* The light follows the other person: warmer as they open, cooler as they
   close. This replaces the meter: nothing to read, everything to feel. */
.cv3-openness-warmth, .cv3-openness-cool { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: background 1600ms var(--ease); }
.cv3-openness-warmth { background: rgba(232, 178, 96, max(0, calc(var(--openness) * 0.22 - 0.06))); mix-blend-mode: soft-light; }
.cv3-openness-cool { background: rgba(40, 52, 60, max(0, calc(0.22 - var(--openness) * 0.4))); mix-blend-mode: multiply; }

.cv3-side { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.cv3-talk { flex: none; }
.cv3-talk { padding: 22px 24px 24px; }

.cv3-said { margin-bottom: 18px; animation: cv3Up 420ms var(--ease) both; }
.cv3-who { font: 600 12px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-film-mute); margin-bottom: 6px; }
.cv3-words { font: 400 clamp(22px, 6.4vw, 28px)/1.28 var(--serif); color: var(--on-film); text-wrap: pretty; }
.cv3-said.is-you .cv3-who { color: var(--you-label); }
.cv3-said.is-you .cv3-words { font-style: italic; color: var(--you); }
/* While you choose, only their latest line stays: your previous reply has
   already landed. */
.cv3-film.choosing .cv3-said:not(:last-child) { display: none; }

.cv3-reaction {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  font: 500 14px/1.3 var(--sans);
  animation: cv3Up 420ms var(--ease) both;
}
.cv3-reaction::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cv3-reaction.is-warm { color: #cfe7b0; background: rgba(119, 166, 53, 0.16); }
.cv3-reaction.is-cool { color: #f1d7a6; background: rgba(214, 160, 60, 0.16); }
.cv3-reaction.is-even { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
.cv3-reaction-why { display: block; font: 400 14px/1.45 var(--sans); color: var(--on-film-mute); margin-top: 10px; animation: cv3Up 420ms var(--ease) both; }

/* Your turn: a white sheet, so the moment you speak looks different from
   the moment you listen. It sits under their line, never over it: on a
   phone it rises into the bottom of the screen, and the column scrolls if a
   very small phone cannot fit everything. */
.cv3-sheet {
  position: relative; flex: none; margin-top: auto;
  background: var(--paper); color: var(--ink);
  border-radius: 26px 26px 0 0;
  padding: 16px 16px max(16px, calc(10px + env(safe-area-inset-bottom)));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.3);
  opacity: 0; transform: translateY(28px);
  transition: transform 380ms var(--ease), opacity 300ms var(--ease);
}
.cv3-sheet.open { opacity: 1; transform: none; }
.cv3-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 8px 4px; }
/* Read by screen readers; the progress strip shows it on screen. */
.cv3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cv3-sheet-head h2 { font: 500 23px/1.2 var(--serif); color: var(--grove); }
.cv3-turn-count { font: 500 13px var(--sans); color: var(--ink-mute); white-space: nowrap; }

.cv3-options { display: flex; flex-direction: column; gap: 8px; }
.cv3-option {
  display: block; width: 100%; min-height: 52px; padding: 13px 16px;
  text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 16px; background: var(--paper);
  transition: border-color 200ms var(--ease), background 200ms var(--ease), opacity 300ms var(--ease);
}
.cv3-option:hover { border-color: var(--ribbon); }
.cv3-option.selected { border-color: var(--ribbon); box-shadow: inset 0 0 0 1px var(--ribbon); background: #f3f9fe; }
.cv3-options.locked .cv3-option { cursor: default; }
.cv3-options.locked .cv3-option:not(.selected) { opacity: 0.45; }
.cv3-option-text { display: block; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.cv3-option-label {
  display: block; margin-bottom: 4px;
  font: 600 12px/1.3 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--leaf-deep);
}
/* Hints (D-008: Live is the default). Live and Reveal hide the move names;
   Reveal shows them once you have chosen. */
.cv3-options[data-mode="live"] .cv3-option-label,
.cv3-options[data-mode="reveal"] .cv3-option-label { display: none; }
.cv3-options[data-mode="reveal"].revealed .cv3-option-label { display: block; animation: cv3Up 400ms var(--ease) both; }
.cv3-options.revealed .cv3-option:not(.selected) .cv3-option-label { color: var(--ink-mute); }

.cv3-mode-chip {
  display: flex; align-items: center; justify-content: center; gap: 5px; flex: none;
  min-height: 44px; padding: 0 4px;
  border: 0; background: none; cursor: pointer;
  font: 500 13px var(--sans); color: var(--ink-mute);
}
.cv3-mode-chip-label::after { content: ":"; }
.cv3-mode-chip-value { color: var(--ribbon-text); }
.cv3-mode-chip:disabled { cursor: default; opacity: 0.6; }

.cv3-beat .cv3-eyebrow { margin: 4px 4px 10px; color: var(--leaf-deep); }
.cv3-beat-text { font: 400 23px/1.32 var(--serif); color: var(--grove); margin: 0 4px 10px; }
.cv3-beat-anchor { font: 400 13px/1.45 var(--sans); color: var(--ink-mute); margin: 0 4px 12px; }
.cv3-beat-carry-note { font: 500 14px/1.45 var(--sans); color: var(--leaf-deep); margin: 0 4px 12px; }
.cv3-beat-actions { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }

/* =============================================================
   Own words: typing your own reply
============================================================= */
.cv3-own { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--rule); }
.cv3-own:not(.is-open) > :not(.cv3-own-open):not(.cv3-own-msg) { display: none; }
.cv3-own.is-open > .cv3-own-open { display: none; }
.cv3-own-open { justify-content: flex-start; padding-left: 4px; }
.cv3-own-back { justify-content: flex-start; width: auto; padding-left: 4px; }
.cv3-own.is-open { border-top: 0; margin-top: 0; padding-top: 0; }
.cv3-own-label { display: block; font: 600 13px/1.3 var(--sans); color: var(--ink-mute); margin: 0 4px 6px; }
.cv3-own-input {
  display: block; width: 100%; min-height: 52px; max-height: 140px; resize: vertical;
  padding: 12px 14px; border: 1px solid var(--rule); border-radius: 16px;
  font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--paper);   /* 16px: no iOS zoom */
}
.cv3-own-input:focus { outline: 2px solid var(--ribbon); outline-offset: 1px; border-color: transparent; }
.cv3-own-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cv3-own-row .cv3-btn-text { width: auto; flex: none; padding: 10px 8px; }
.cv3-own-row .cv3-btn { flex: 1; min-height: 48px; }
.cv3-own-row .cv3-btn:disabled { opacity: 0.45; cursor: default; }
.cv3-own-msg { font: 500 14px/1.45 var(--sans); color: var(--grove); margin: 8px 4px 0; }
.cv3-own-note { font: 400 12px/1.45 var(--sans); color: var(--ink-mute); margin: 8px 4px 0; }
.cv3-own-note a { color: var(--ribbon-text); }
.cv3-own-family { margin: 4px 4px 0; }
.cv3-own-family summary { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px var(--sans); color: var(--ribbon-text); cursor: pointer; list-style: none; }
.cv3-own-family summary::-webkit-details-marker { display: none; }
.cv3-own-family-chips, .cv3-back-a, .cv3-back-how { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cv3-own-family-chips button, .cv3-back-a button, .cv3-back-how button {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--paper); font: 500 14px var(--sans); color: var(--ink); cursor: pointer;
}
.cv3-own-family-chips button[aria-pressed="true"] { border-color: var(--ribbon); box-shadow: inset 0 0 0 1px var(--ribbon); background: #f3f9fe; }

/* Paused for safety: calm, plain, nothing graded. */
.cv3-pause { overflow-y: auto; background: var(--paper); opacity: 0; transition: opacity 400ms var(--ease); }
.cv3-pause.visible { opacity: 1; }
.cv3-pause-title { font: 400 clamp(28px, 8vw, 36px)/1.15 var(--serif); color: var(--grove); margin: 10px 0 14px; }
.cv3-pause-text { font: 400 17px/1.5 var(--sans); color: var(--ink-soft); }

/* The real-life loop. */
.cv3-keep { margin-top: 22px; padding: 16px; border-radius: 18px; background: #e9f8f1; }
.cv3-keep-q, .cv3-back-q { font: 600 15px/1.4 var(--sans); color: var(--grove); }
.cv3-keep-yesno { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cv3-keep-yesno .cv3-btn-text { width: auto; padding-left: 0; }
.cv3-keep-lines { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cv3-keep-pick { width: 100%; text-align: left; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); font: 400 17px/1.35 var(--serif); color: var(--ink); cursor: pointer; }
.cv3-keep-done, .cv3-back-thanks { font: 400 15px/1.5 var(--sans); color: var(--ink-soft); margin-top: 8px; }
.cv3-back { margin: 18px 0 4px; padding: 16px; border-radius: 18px; background: #e9f8f1; }
.cv3-back-line { font: 400 19px/1.35 var(--serif); color: var(--ink); margin: 4px 0 10px; }

/* =============================================================
   End: one screen
============================================================= */
.cv3-end { overflow-y: auto; background: var(--paper); opacity: 0; transition: opacity 600ms var(--ease); }
.cv3-end.visible { opacity: 1; }
.cv3-end-inner {
  min-height: 100%; max-width: 560px; margin: 0 auto;
  padding: calc(var(--bar-h) + 18px) 28px max(28px, calc(16px + env(safe-area-inset-bottom)));
  display: flex; flex-direction: column;
}
.cv3-end-summary { font: 400 clamp(30px, 8.6vw, 38px)/1.12 var(--serif); color: var(--grove); margin: 10px 0 22px; text-wrap: pretty; }
.cv3-end-choices { list-style: none; border-top: 1px solid var(--rule); }
.cv3-end-choices li { padding: 14px 0 6px; border-bottom: 1px solid var(--rule); }
.cv3-end-reaction { font: 600 12px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.cv3-end-reaction.is-warm { color: var(--leaf-deep); }
.cv3-end-reaction.is-cool { color: #9a6a12; }
.cv3-end-reaction.is-even { color: var(--ink-mute); }
.cv3-end-line { font: 400 19px/1.35 var(--serif); color: var(--ink); margin-top: 4px; }
.cv3-end-effect { font: 400 14px/1.45 var(--sans); color: var(--ink-soft); margin-top: 6px; }
.cv3-end-choices .cv3-btn-text { justify-content: flex-start; width: auto; padding-left: 0; }
.cv3-end-reflect { font: italic 400 20px/1.4 var(--serif); color: #2c3d31; margin-top: 22px; }
.cv3-end-notebook { font: 400 14px/1.45 var(--sans); color: var(--ink-soft); margin-top: 12px; }
.cv3-end-actions { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 2px; }

/* =============================================================
   Landscape and desktop: film left, conversation right
============================================================= */
@media (orientation: landscape) {
  .cv3-film {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) clamp(300px, 36vw, 460px);
  }
  .cv3-screen {
    align-self: center; justify-self: center;
    width: min(calc(100% - 32px), calc((100dvh - var(--bar-h) - 32px) * 16 / 9));
    border-radius: 14px;
  }
  .cv3-side {
    display: flex; flex-direction: column;
    padding: 4px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) 4px;
  }
  .cv3-talk { padding: 16px 8px 12px; }
  .cv3-sheet {
    position: relative; inset: auto; z-index: auto; flex: none;
    max-height: none; overflow: visible; margin-top: auto;
    border-radius: 20px; box-shadow: none;
  }
  .cv3-words { font-size: clamp(20px, 2.2vw, 28px); }
}
/* A phone on its side: about 340px of height. The conversation panel gets
   more width (fewer wrapped lines) and the full height: during the film the
   top strip only spans the film side. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --bar-h: calc(48px + env(safe-area-inset-top)); --side-w: clamp(300px, 48vw, 520px); }
  body[data-phase="film"] .cv3-bar { right: var(--side-w); }
  .cv3-film { padding-top: 0; grid-template-columns: minmax(0, 1fr) var(--side-w); }
  .cv3-screen {
    margin-top: var(--bar-h);
    width: min(calc(100% - 24px), calc((100dvh - var(--bar-h) - 20px) * 16 / 9));
  }
  .cv3-side { padding-top: max(8px, env(safe-area-inset-top)); }
  .cv3-film.choosing .cv3-who { display: none; }
  .cv3-film.choosing .cv3-words { font-size: 17px; }
  .cv3-exit { width: 36px; height: 36px; }
  .cv3-talk { padding: 8px 6px 8px; }
  .cv3-said { margin-bottom: 10px; }
  .cv3-words { font-size: 19px; }
  .cv3-sheet { padding: 12px 12px 10px; }
  .cv3-sheet-head { margin-bottom: 8px; }
  .cv3-sheet-head h2 { font-size: 19px; }
  .cv3-option { min-height: 44px; padding: 9px 12px; }
  .cv3-option-text { font-size: 14px; }
  .cv3-start-inner, .cv3-end-inner { padding-top: calc(var(--bar-h) + 8px); }
  .cv3-start-emblem { width: 56px; height: 56px; margin-bottom: 8px; }
  .cv3-start-title { font-size: 34px; }
}

/* Phone held upright: while you choose, the film steps back to a smaller
   frame (still whole, never cropped) so their line and all the choices fit,
   and comes forward again when they answer. */
@media (orientation: portrait) {
  .cv3-screen { justify-self: center; transition: width 420ms var(--ease), border-radius 420ms var(--ease), margin 420ms var(--ease); }
  .cv3-film.choosing .cv3-screen { width: 58%; border-radius: 12px; margin-top: 10px; }
  .cv3-film.choosing .cv3-talk { padding-top: 14px; padding-bottom: 14px; }
  .cv3-film.choosing .cv3-words { font-size: clamp(19px, 5.4vw, 23px); }
}

/* The smallest phone on its side (320px high). */
@media (orientation: landscape) and (max-height: 340px) {
  .cv3-film.choosing .cv3-words { font-size: 16px; }
  .cv3-talk { padding: 4px 6px 6px; }
  .cv3-sheet { padding: 8px 10px 8px; }
  .cv3-sheet-head h2 { font-size: 17px; }
  .cv3-sheet-head { margin: -10px 0 2px 4px; }
  .cv3-options { gap: 5px; }
  .cv3-option { min-height: 40px; padding: 7px 10px; }
  .cv3-option-text { font-size: 13px; line-height: 1.35; }
}

/* Short upright screens (the 320 x 568 iPhone SE): the film steps further
   back while you choose, and the choices tighten. */
@media (orientation: portrait) and (max-height: 620px) {
  .cv3-film.choosing .cv3-screen { width: 42%; margin-top: 6px; }
  .cv3-film.choosing .cv3-talk { padding: 10px 20px; }
  .cv3-film.choosing .cv3-words { font-size: 18px; }
  .cv3-sheet { padding: 12px 12px max(12px, calc(8px + env(safe-area-inset-bottom))); }
  .cv3-option { padding: 10px 13px; min-height: 48px; }
  .cv3-option-text { font-size: 15px; }
  .cv3-options { gap: 6px; }
}

/* Fitting your turn (pro-cinema-v3.js fitTurn): the player tries these in
   order and keeps the first where their line and every choice fit. */
/* Measuring must not restart animations (a restarted fade made the line
   flicker each time the sheet opened). Transitions pause, and transforms are
   held at rest: an !important value overrides a running animation's without
   restarting it, so a moving element is measured where it will settle. */
.cv3-film.measuring, .cv3-film.measuring * { transition: none !important; transform: none !important; }
/* Measure the sheet where it will rest: its rise offset (translateY) counts
   as overflow and would make every layout look too tall. */
.cv3-film.measuring .cv3-sheet { transform: none !important; }
@media (orientation: portrait) {
  /* fit-1: the film narrows by exactly the missing height (set by fitTurn). */
  .cv3-film.choosing.fit-1 .cv3-screen { width: var(--fit-w, 58%); }
  .cv3-film.choosing.fit-2 .cv3-talk { padding: 10px 20px; }
  .cv3-film.choosing.fit-2 .cv3-words { font-size: 17px; }
  .cv3-film.choosing.fit-2 .cv3-option { padding: 9px 12px; min-height: 44px; }
  /* Last resort: the film steps aside while you choose and returns when they answer. */
  .cv3-film.choosing.fit-2 .cv3-screen { width: 0; margin: 0; }
}
@media (orientation: landscape) {
  .cv3-film.choosing.fit-1 .cv3-words, .cv3-film.choosing.fit-2 .cv3-words { font-size: 15px; }
  .cv3-film.choosing.fit-1 .cv3-option, .cv3-film.choosing.fit-2 .cv3-option { min-height: 40px; padding: 6px 10px; }
  .cv3-film.choosing.fit-1 .cv3-option-text, .cv3-film.choosing.fit-2 .cv3-option-text { font-size: 13px; }
  .cv3-film.choosing.fit-1 .cv3-option-label, .cv3-film.choosing.fit-2 .cv3-option-label { margin-bottom: 1px; }
  /* Last resort on the smallest phone on its side: drop the sheet's question
     ("What do you say?"); the choices and the hints toggle stay. */
  .cv3-film.choosing.fit-2 .cv3-sheet-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cv3-film.choosing.fit-2 .cv3-sheet-head { justify-content: flex-end; margin: -10px 0 0; }
}

@keyframes cv3Up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}