.story-reading { border-radius: 28px; background: #fffcf3; overflow: hidden; box-shadow: 0 18px 45px #22514a0b; }
.story-copy { padding: clamp(20px, 5vw, 32px); display: grid; gap: 20px; }
.story-copy > * { margin: 0; min-width: 0; }
.story-kicker { color: #56766e; font-size: .78rem; font-weight: 700; letter-spacing: .07em; }
.story-title { color: #164f47; font-size: clamp(29px, 7vw, 38px); line-height: 1.16; }
.story-sentence { color: #202329; font-family: 'Nunito', sans-serif; font-size: clamp(28px, 7vw, 38px); line-height: 1.35; padding-block: 20px; overflow-wrap: break-word; }
.story-note { color: #56766e; line-height: 1.6; }
.story-illustration { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 18px; }
.story-reading > .story-illustration { border-radius: 0; max-height: 320px; }
.story-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.story-button { min-width: 0; min-height: 50px; border-radius: 14px; padding: 12px 10px; border: 1px solid #bcd5ca; background: #edf5ee; color: #176b60; font: inherit; font-weight: 700; cursor: pointer; }
.story-button.is-primary { background: #16897b; color: white; border-color: #16897b; }
.story-button:focus-visible, .story-scene-button:focus-visible { outline: 3px solid #b67a20; outline-offset: 4px; }
.story-button:disabled { opacity: .45; cursor: default; }
.story-audio-status { color: #56766e; font-size: .85rem; min-height: 1.2em; }
.story-progress { display: flex; flex-wrap: nowrap; gap: 5px; width: 100%; }
.story-progress > span { flex: 1 1 0; min-width: 0; height: 6px; border-radius: 8px; background: #e3e8df; }
.story-progress > .is-done { background: #94c6b5; }
.story-progress > .is-current { background: #16897b; }
.story-parent-note { color: #56766e; font-size: .88rem; line-height: 1.6; }
.story-parent-note > summary { cursor: pointer; min-height: 32px; }
.story-parent-note p { margin: 8px 0 0; }
.story-retell-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.story-retell-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.story-retell-actions .story-retell-listen { grid-column: 1 / -1; }
.story-scene-button { display: block; padding: 0; background: transparent; border: 0; border-radius: 10px; cursor: zoom-in; width: 100%; }
.story-retell-text { font-size: .9rem; color: #164f47; line-height: 1.5; background: #edf5ee; padding: 12px; border-radius: 12px; }
.story-picture-dialog { border: 0; border-radius: 22px; padding: 14px; width: min(800px, 90vw); max-height: 90dvh; background: #fffcf3; }
.story-picture-dialog::backdrop { background: #173d37bb; }
.story-picture-dialog .story-illustration { max-height: 72dvh; }
.story-picture-dialog .story-button { margin-top: 12px; width: 100%; }
@media (prefers-reduced-motion: no-preference) { .story-reading .story-illustration { animation: story-picture-in .2s ease-out; } @keyframes story-picture-in { from { opacity: 0; } to { opacity: 1; } } }

.story-atlas { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 18px; }
.story-atlas > img { position: absolute; width: calc(var(--atlas-columns) * 100%); max-width: none; height: calc(var(--atlas-rows) * 100%); left: calc(var(--atlas-column) * -100%); top: calc(var(--atlas-row) * -100%); object-fit: fill; border-radius: 0; }
.story-picture-dialog .story-atlas { max-width: 72dvh; margin-inline: auto; }
.story-picture-dialog .story-atlas img { max-height: none; }

/* Use the familiar practice card: picture above reading, actions at the foot. */
.reading-panel.story-reading:has(.story-card-shell) { padding: 0; max-height: none; overflow: visible; background: transparent; box-shadow: none; }
.story-copy.story-card-shell { padding: 0; gap: 12px; }
.story-card-shell > .story-kicker { font-size: 12px; }
.word-card.story-card { height: clamp(390px, calc(100dvh - 260px), 520px); padding: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; justify-content: stretch; gap: 0; overflow: hidden; background: var(--surface); border-radius: 8px; }
.story-card.is-revealed { border-radius: 18px; }
.story-card-body { min-height: 0; display: grid; }
.story-card.is-revealed .story-card-body { grid-template-rows: minmax(0, 1fr) auto; }
.reading-panel .story-card .story-sentence { margin: 0; max-width: none; padding: 18px 20px; display: grid; place-content: center; font-family: var(--practice-word-font); font-size: clamp(32px, 8.8vw, 42px); line-height: 1.2; text-wrap: balance; overflow-wrap: normal; }
.reading-panel .story-card.is-revealed .story-sentence { min-height: 84px; padding: 12px 18px; font-size: clamp(23px, 6.5vw, 30px); }
.story-card-picture { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #fff3d3; container-type: size; }
.story-card-picture > img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.story-card-picture > .story-atlas { width: min(100cqw, calc(100cqh * var(--scene-ratio))); border-radius: 0; }
.story-card-footer { padding: 0 clamp(16px, 5vw, 28px) 18px; display: grid; gap: 8px; }
.story-card .story-controls { gap: 8px; }
.story-card .story-button { min-height: 50px; border-radius: 8px; padding: 8px 4px; font-size: 14px; }
.story-card .attempt { border: 0; background: rgba(255, 255, 255, .48); color: rgba(32, 34, 41, .68); }
.story-card .attempt:active { background: rgba(22, 139, 133, .12); color: var(--teal-dark); }
.story-card .story-audio-status { margin: 0; min-height: 18px; font-size: 12px; line-height: 1.5; }
@media (max-height: 650px), (max-width: 340px) {
  .reading-panel .story-card .story-sentence { font-size: 30px; padding: 12px 16px; }
  .reading-panel .story-card.is-revealed .story-sentence { min-height: 74px; padding: 8px 14px; font-size: 23px; }
  .story-card-footer { padding-bottom: 14px; }
}

/* A short, spoken invitation bridges the word warm-up and the story. */
.reading-panel.story-reading:has(.story-cover-copy) { padding: 0; max-height: none; }
.story-cover-picture { aspect-ratio: 4 / 3; position: relative; display: grid; place-items: center; overflow: hidden; background: #fff3d3; container-type: size; }
.story-cover-picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.story-cover-picture > .story-atlas { width: min(100cqw, calc(100cqh * var(--scene-ratio))); border-radius: 0; }
.story-cover-copy { padding: 20px; gap: 12px; }
.reading-panel .story-cover-copy .story-title { margin: 0; font-size: 28px; line-height: 1.15; }
.reading-panel .story-cover-copy .story-kicker { font-size: 12px; }
.reading-panel .story-teaser { margin: 0; font-size: 18px; line-height: 1.45; color: #365f54; text-wrap: balance; }
.story-cover-copy .story-parent-note { text-align: left; font-size: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.story-cover-copy .story-parent-note p { margin: 6px 0 0; font-size: 12px; }
@media (max-width: 340px), (max-height: 650px) {
  .story-cover-copy { padding: 16px; gap: 9px; }
  .reading-panel .story-cover-copy .story-title { font-size: 24px; }
  .reading-panel .story-teaser { font-size: 16px; }
}