/* ====================================================================
   THE LIVING SCRIPT — shared styles. The screens themselves carry the
   approved mockups' own inline styles (design/living-script-v2/design/);
   this file holds the mockups' helper classes and animations, plus the
   frame each screen sits in: the 1440x1080 TV/host boards scale to fit
   the window, the phone screens are a 390px column.
   Brand: the Storybook mood (design/storybook-mood-v1/).
   ==================================================================== */

/* ---------- from the mockups ---------- */
body { margin: 0; background: #0B1620; font-family: 'Cardo', Georgia, serif; color: #EDE6D6; }
a { color: #D9A441; }
a:hover { color: #EDE6D6; }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90,168,160,0.55), inset 0 0 60px rgba(90,168,160,0.25); }
  50% { box-shadow: 0 0 0 14px rgba(90,168,160,0), inset 0 0 90px rgba(90,168,160,0.45); }
}
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
.star { position: absolute; width: 3px; height: 3px; background: #EDE6D6; border-radius: 50%; animation: twinkle 3s ease-in-out infinite; }
.float { animation: float 4s ease-in-out infinite; }
.cardbtn { transition: transform .25s ease, box-shadow .25s ease; }
.cardbtn:hover { transform: translateY(-6px); }
.cardbtn:focus-visible, .pbtn:focus-visible { outline: 3px solid #5AA8A0; outline-offset: 4px; }
input[type=range] { accent-color: #8A6420; }
.seat { transition: transform .2s ease; }
.choice { transition: transform .15s ease, box-shadow .15s ease; }
.choice:hover { transform: translateY(-2px); }
.choice:focus-visible { outline: 3px solid #5AA8A0; outline-offset: 3px; }

/* ---------- shared behaviour ---------- */
[hidden] { display: none !important; }
.pbtn:disabled, .choice:disabled { opacity: 0.45; cursor: not-allowed; }
.pbtn:disabled:hover, .choice:disabled:hover { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- TV / host boards: 1440x1080, scaled to fit ---------- */
.ls-tv-body { overflow: hidden; height: 100vh; }
.ls-board { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

/* ---------- phone screens: a 390px column ---------- */
.ls-phone { position: relative; width: 100%; max-width: 390px; min-height: 100vh; margin: 0 auto; box-sizing: border-box; overflow: hidden; }

/* ---------- talking character builds (384px native, scaled by speaker-stage.js) ---------- */
.ls-sprite { position: relative; overflow: hidden; flex-shrink: 0; }
.ls-sprite iframe {
  position: absolute; top: 0; left: 0; width: 384px; height: 384px; border: 0;
  transform-origin: 0 0; image-rendering: pixelated; image-rendering: crisp-edges;
}
.ls-sprite iframe.is-offstage, .ls-sprite.is-empty iframe { visibility: hidden; }
.ls-thumb { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }