/* Story stop: comic frames, speech bubbles drawn by the app (src/story-view.js).
   Only the tokens of app.css are used; nothing here changes another screen. */
.page.story { display: flex; flex-direction: column; min-height: 100dvh; max-width: 520px; margin: 0 auto; padding: 0; gap: 0; }
.story-top { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; }
.story-progress { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.story-progress-fill { height: 100%; background: var(--primary); transform-origin: left center; transform: scaleX(0); transition: transform 300ms var(--ease); }
.story-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0 0.75rem; }
.story-panel { position: relative; margin: 0; width: min(100%, calc((100dvh - 210px) * 0.8)); aspect-ratio: 4 / 5; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); }
.story-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-panel.is-draft { border: 1.5px dashed var(--line); }
.story-draft { position: absolute; inset: auto 0 12% 0; display: flex; justify-content: center; gap: 0.75rem; }
.story-bubble { position: absolute; transform: translate(-50%, 4px) scale(0.97); opacity: 0; max-width: min(72%, max(30%, calc(min(var(--x, 50), 100 - var(--x, 50)) * 2%))); padding: 0.4rem 0.65rem 0.5rem; border-radius: 14px; border: 1.5px solid var(--line); border-left: 5px solid var(--c, var(--line)); background: var(--surface); color: var(--text); font-size: 0.92rem; line-height: 1.3; text-align: left; transition: opacity 250ms ease, transform 250ms var(--ease); }
.story-bubble.is-in { opacity: 1; transform: translate(-50%, 0) scale(1); }
.story-bubble.is-learner { border-left-color: var(--learner); }
.story-who { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.story-text { display: block; font-weight: 600; }
.story-bubble .tr-reveal { font-size: 0.82rem; }
.story-caption { margin: 0; text-align: center; font-size: 0.95rem; color: var(--muted); }
.story-cliff { width: 100%; padding: 0.9rem 1rem; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--surface); text-align: center; font-family: var(--font-display); font-size: 1.1rem; }
.story-cliff p { margin: 0; }
.story-action { position: sticky; bottom: 0; padding: 0.75rem; background: var(--bg); }
.story-question { margin: 0 0 0.5rem; font-weight: 700; }
.story-options { display: grid; gap: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
  .story-bubble, .story-progress-fill { transition: none; }
}

/* Picture activities of a lesson (src/activities.js): the opening frame of a story lesson, a comic
   balloon to fill and a scene with places to tap. Same tokens, flat surfaces. */
.story-lesson-frame, .comic { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.story-lesson-frame .story-panel { width: min(100%, calc((100dvh - 320px) * 0.8)); }
.comic { margin-bottom: 0.75rem; }
.comic-panel { width: min(100%, 340px); aspect-ratio: 1; }
.comic-panel .media { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; }
.story-bubble.is-empty { border-style: dashed; color: var(--muted); }
.story-bubble.is-empty .story-text { font-weight: 400; }
.scene-frame { position: relative; width: 100%; max-width: 520px; margin: 0 auto; border-radius: var(--radius-s); background: var(--surface-2); overflow: hidden; }
.scene-img { display: block; width: 100%; height: auto; }
.scene-spot { position: absolute; min-width: 44px; min-height: 44px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; }
.scene-spot:focus-visible, .scene-spot.is-selected { border-color: var(--select); }
.scene-spot.is-correct { border-color: var(--ok); background: var(--ok-soft); opacity: 0.85; }
.scene-spot.is-wrong { border-color: var(--bad); }
.scene-said { margin-top: 0.6rem; text-align: center; font-weight: 600; }
.scene-said p { margin: 0; }
.try-note { margin: 0.25rem 0 0; }

/* Balloons (8 Oct, set 4): no coloured stripe on the left. A soft card with the speaker's name in
   their colour and a small tail; the learner's balloon is the learner's navy. */
.story-bubble, .story-bubble.is-learner { border: 1px solid color-mix(in srgb, var(--c, var(--line)) 30%, var(--line)); border-left-width: 1px; border-radius: 16px 16px 16px 6px; box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); }
.story-bubble .story-who { color: color-mix(in srgb, var(--c, var(--muted)) 75%, var(--text)); }
.story-bubble .story-who .avatar { display: none; }
.story-bubble.is-learner { border-radius: 16px 16px 6px 16px; background: var(--learner); border-color: var(--learner); color: var(--learner-ink); }
.story-bubble.is-learner .story-who { color: color-mix(in srgb, var(--learner-ink) 75%, transparent); }
.story-bubble.is-learner.is-empty { background: var(--surface); color: var(--text); border: 1.5px dashed color-mix(in srgb, var(--learner) 45%, var(--line)); }
.story-bubble.is-learner.is-empty .story-who { color: var(--muted); }