:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --green: #45c7ff;
  --green-dark: #159fe6;
  --green-soft: #d8f5ff;
  --orange: #28b8ff;
  --blue-deep: #0875c9;
  --glass: rgba(255, 255, 255, .42);
  --glass-strong: rgba(255, 255, 255, .66);
  --glass-border: rgba(255, 255, 255, .82);
  --control-blue-gradient: linear-gradient(145deg, #7cddff 0%, var(--green) 55%, #1fb2f0 100%);
  --ink: #171717;
  --muted: #6b7789;
}

* { box-sizing: border-box; }
[hidden], .visually-hidden { display: none !important; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; min-height: 100vh; display: grid; place-items: center; background: #fff; color: var(--ink); user-select: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus, button:focus-visible { outline: none; }
[tabindex]:focus-visible, button:focus-visible { outline: 4px solid rgba(53, 127, 230, .42); outline-offset: 3px; }

/* Directly reused from the latest 趣互动 shell. */
.lesson-shell {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  border: 0;
  background: #fff;
  box-shadow: none;
}
.lesson-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 8px max(clamp(36px, 4vw, 64px), calc(env(safe-area-inset-right, 0px) + 18px)) 8px max(clamp(36px, 4vw, 64px), calc(env(safe-area-inset-left, 0px) + 18px));
  background: transparent;
  color: var(--blue-deep);
}
.lesson-title {
  display: grid;
  align-content: center;
  gap: 2px;
  margin-right: 20px;
  color: var(--green);
  line-height: 1.05;
}
#course-code {
  color: var(--green);
  font-size: clamp(25px, 2.35vw, 34px);
  letter-spacing: .02em;
  -webkit-text-stroke: clamp(2px, .22vw, 3.5px) rgba(255,255,255,.98);
  paint-order: stroke fill;
  text-shadow: 0 2px 3px rgba(2,85,140,.22);
}
.lesson-title span {
  color: var(--green);
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 900;
  letter-spacing: .04em;
  -webkit-text-stroke: clamp(1.5px, .16vw, 2.5px) rgba(255,255,255,.98);
  paint-order: stroke fill;
  text-shadow: 0 2px 3px rgba(2,85,140,.22);
}
.header-actions { margin-left: auto; display: flex; gap: 18px; }
.round-button, .nav-button, .header-back-button {
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--blue-deep);
  background: linear-gradient(145deg, rgba(220,246,255,.88), rgba(92,204,250,.38));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -3px 0 rgba(20,148,220,.28), 0 8px 0 rgba(14,137,202,.34), 0 15px 28px rgba(3,111,183,.34);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.round-button { width: 84px; height: 84px; padding: 0; font-size: 27px; font-weight: 950; letter-spacing: 1px; }
.lesson-header .round-button, .lesson-header .header-back-button { color: #fff; border-color: rgba(255,255,255,.9); background: var(--control-blue-gradient); }
.round-button svg { width: 43px; height: 43px; display: block; margin: auto; color: #fff; fill: currentColor; filter: drop-shadow(0 2px 3px rgba(2,85,140,.35)); }
.header-back-button { flex: 0 0 auto; width: 72px; height: 72px; margin: 0 16px 0 0; padding: 0; color: #fff; text-shadow: 0 2px 4px rgba(2,85,140,.42); font-size: 44px; font-weight: 900; line-height: 1; }
.header-back-button span { display: block; width: 32px; height: 28px; margin: auto; background: currentColor; clip-path: polygon(0 50%,55% 8%,55% 34%,100% 34%,100% 66%,55% 66%,55% 92%); font-size: 0; }
.round-button:hover, .nav-button:hover, .header-back-button:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06) saturate(1.12); box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(3,111,183,.28); }
.round-button:active, .nav-button:active, .header-back-button:active { transform: translateY(5px) scale(.98); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(20,148,220,.18), 0 4px 0 rgba(14,137,202,.13), 0 8px 18px rgba(3,111,183,.2); }

/* The one requested adaptation: artwork covers the full landscape viewport. */
.lesson-scene, .game-stage, .scene-canvas, .story-stage { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.game-stage { display: block; }
.scene-canvas { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.start-scene { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; transition: opacity .2s ease, transform .28s ease; }
.story-stage.turning .start-scene { opacity: .42; transform: translateX(1.5vw); }
.story-highlight-layer { position: absolute; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; }
.story-highlight { position: absolute; display: block; border-radius: 24px; opacity: 0; }
.story-highlight.active { animation: storyGlow .72s ease-out; }


.sound-bars { display: none; position: absolute; left: 50%; top: 50%; align-items: end; gap: 5px; height: 28px; transform: translate(-50%,-50%); }
.audio-button.playing .replay-icon { display: none; }
.audio-button.playing .sound-bars { display: flex; }
.sound-bars i { display: block; width: 5px; height: 35%; border-radius: 5px; background: #fff; animation: bars .55s infinite alternate; }
.sound-bars i:nth-child(2) { height: 90%; animation-delay: .16s; }
.sound-bars i:nth-child(3) { height: 58%; animation-delay: .32s; }

.caption-wrap {
  position: absolute;
  z-index: 15;
  left: max(clamp(44px, 5vw, 84px), calc(env(safe-area-inset-left, 0px) + 22px));
  right: max(clamp(44px, 5vw, 84px), calc(env(safe-area-inset-right, 0px) + 22px));
  bottom: 24px;
  --nav-control-height: 108px;
  --caption-height: 104px;
  display: grid;
  grid-template-columns: var(--nav-control-height) minmax(0, 1fr) var(--nav-control-height);
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
}
.nav-button { --nav-icon-width: 38px; --nav-icon-height: 44px; position: relative; width: var(--nav-control-height); height: var(--nav-control-height); padding: 0; display: grid; place-items: center; color: #fff; border-color: rgba(255,255,255,.9); background: var(--control-blue-gradient); font-size: 0; line-height: 0; }
.nav-button:disabled { opacity: .48; filter: saturate(.55); cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(20,148,220,.16), 0 4px 0 rgba(14,137,202,.18), 0 8px 15px rgba(3,111,183,.18); }
.nav-button::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--nav-icon-width); height: var(--nav-icon-height); background: currentColor; transform: translate(-50%,-50%); filter: drop-shadow(0 2px 3px rgba(2,85,140,.3)); }
#prevButton::before { clip-path: polygon(100% 0,0 50%,100% 100%); }
#nextButton::before { clip-path: polygon(0 0,100% 50%,0 100%); }
.caption-pill { position: relative; width: 100%; height: var(--caption-height); min-height: var(--caption-height); padding: 4px 24px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.38); border-radius: calc(var(--caption-height) / 2); background: linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.24)); box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 5px 16px rgba(3,111,183,.055); backdrop-filter: blur(2px) saturate(108%); -webkit-backdrop-filter: blur(2px) saturate(108%); color: var(--ink); text-align: center; }
.sentence-copy { min-width: 0; }
.sentence-copy strong { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(22px, 2.25vw, 32px); line-height: 1.08; text-shadow: 0 1px 2px rgba(255,255,255,.98), 0 0 8px rgba(255,255,255,.9); }
.subtitles-off .caption-card { display: none; }

.menu-backdrop { position: absolute; z-index: 29; inset: 0; background: rgba(2,45,75,.34); cursor: pointer; }
.course-menu { position: absolute; z-index: 30; inset: 0 0 0 auto; width: min(360px, 58vw); padding: 46px 26px 24px; overflow-y: auto; color: #0875c9; background: linear-gradient(180deg, rgba(222,247,255,.82), rgba(151,222,252,.68)); border-left: 1px solid rgba(255,255,255,.86); box-shadow: -12px 0 34px rgba(2,98,163,.22); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-head strong { font-size: 26px; }
.menu-head button { width: 44px; height: 44px; border: 1px solid var(--glass-border); border-radius: 50%; background: linear-gradient(145deg, rgba(220,246,255,.86), rgba(92,204,250,.34)); color: #0875c9; box-shadow: inset 0 1px 0 #fff, 0 6px 0 rgba(14,137,202,.28), 0 12px 20px rgba(3,111,183,.28); backdrop-filter: blur(18px); font-size: 28px; cursor: pointer; }
.menu-section-title { margin: 4px 0 10px; font-size: 18px; }
.chapter-panel, .settings-panel { border: 1px solid rgba(255,255,255,.78); border-radius: 22px; background: rgba(255,255,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(18px); }
.chapter-panel { padding: 15px; margin-bottom: 12px; }
.chapter-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.chapter-grid button { width: min(48px,100%); aspect-ratio: 1; min-height: 0; justify-self: center; border: 1px solid var(--glass-border); border-radius: 50%; background: linear-gradient(145deg, rgba(220,246,255,.9), rgba(92,204,250,.42)); color: #0875c9; cursor: pointer; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 0 rgba(14,137,202,.2), 0 9px 20px rgba(3,111,183,.24); backdrop-filter: blur(18px) saturate(170%); }
.chapter-grid button.active { background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 2px rgba(54,183,241,.66), inset 0 1px 0 #fff, 0 9px 24px rgba(3,111,183,.17); }
.chapter-grid button:disabled { opacity: .58; cursor: default; }
.chapter-grid b { display: grid; place-items: center; color: #0875c9; font-size: 23px; line-height: 1; }
.settings-panel { padding: 4px 12px; }
.setting-row { margin: 0; padding: 10px 2px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.setting-row + .setting-row { border-top: 1px solid rgba(255,255,255,.7); }
.setting-row > span:first-child { display: grid; gap: 2px; }
.setting-row b { font-size: 14px; }
.setting-row small { color: #5d8faa; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { display: block; width: 44px; height: 25px; padding: 3px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: rgba(124,172,195,.4); box-shadow: inset 0 1px 4px rgba(8,77,119,.18),0 4px 9px rgba(3,111,183,.24); cursor: pointer; transition: .2s; }
.switch i::after { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.28); transition: .2s; }
.switch input:checked + i { background: rgba(38,177,242,.82); }
.switch input:checked + i::after { transform: translateX(19px); }
.menu-actions { display: grid; gap: 14px; margin-top: 16px; }
.restart-button { width: 100%; height: 58px; margin: 0 auto; border: 1px solid var(--glass-border); border-radius: 29px; background: linear-gradient(145deg, rgba(220,246,255,.86), rgba(92,204,250,.4)); color: #0875c9; box-shadow: inset 0 1px 0 #fff, 0 7px 0 rgba(14,137,202,.3), 0 13px 24px rgba(3,111,183,.3); backdrop-filter: blur(20px) saturate(170%); font-weight: 900; cursor: pointer; }

/* Existing audiobook interactions, recolored to the same latest 趣互动 palette. */
.question-layer, .finish-layer { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: max(13px,2.5vw); overflow: hidden; }
.question-backdrop { position: absolute; inset: -8px; background-image: linear-gradient(rgba(3,73,119,.14),rgba(3,73,119,.22)),var(--question-bg); background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(2px) saturate(.92); transform: scale(1.015); }
.question-card, .finish-card { position: relative; width: min(880px,91vw); max-height: 90dvh; overflow: auto; padding: clamp(17px,2.6vw,38px); border: 1px solid rgba(255,255,255,.9); border-radius: clamp(24px,3.7vw,48px); background: linear-gradient(145deg,rgba(255,255,255,.9),rgba(205,242,255,.72)); box-shadow: inset 0 1px 0 #fff,0 25px 70px rgba(2,83,139,.32); backdrop-filter: blur(26px) saturate(160%); text-align: center; animation: pop .28s cubic-bezier(.2,.9,.2,1.15); }
.question-topline, .question-help, .choice span { display: none !important; }
.question-topline { align-items: center; justify-content: space-between; gap: 14px; }
.question-badge { padding: 7px 14px; border-radius: 999px; color: #fff; background: var(--control-blue-gradient); font-size: clamp(10px,1.15vw,15px); font-weight: 950; }
.tries { display: flex; gap: 7px; }
.try-dot { width: clamp(13px,1.5vw,19px); aspect-ratio: 1; border-radius: 50%; background: var(--green); }
.try-dot.used { background: #cbd6da; }
.question-card h1 { margin: 0 0 clamp(12px,2vw,22px); color: #0875c9; font-size: clamp(24px,4vw,52px); line-height: 1.05; }
.question-help { margin: 0 0 clamp(10px,1.6vw,18px); color: #5d8faa; font-size: clamp(13px,1.55vw,20px); font-weight: 750; }
.choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(10px,1.6vw,18px); }
.choice { overflow: hidden; min-height: 130px; border: 5px solid transparent; border-radius: 24px; padding: 0; color: var(--ink); background: rgba(255,255,255,.84); box-shadow: 0 8px 22px rgba(3,111,183,.18); cursor: pointer; }
.choice:disabled { opacity: 1; filter: none; cursor: not-allowed; }
.choice.prompt-bounce { opacity: 1; filter: saturate(1.08); animation: choiceBounce .58s cubic-bezier(.2,.86,.28,1.18); }
.choice img { display: block; width: 100%; height: clamp(105px,22vh,190px); object-fit: cover; object-position: center; }
.choice span { display: block; padding: 7px; font-size: clamp(17px,2.1vw,29px); font-weight: 950; }
.choice.wrong { border-color: #ec5a4f; animation: shake .35s; }
.choice.correct { border-color: var(--green); }
.feedback { min-height: 28px; margin-top: 8px; font-size: clamp(16px,1.8vw,24px); font-weight: 950; }
.feedback.good { color: #087fc4; }
.feedback.bad { color: #d64d43; }
.voice-answer { display: grid; place-items: center; gap: clamp(8px,1.4vh,14px); }
.voice-picture { width: min(450px,68vw); height: min(210px,27vh); object-fit: cover; border: 4px solid #fff; border-radius: 22px; box-shadow: 0 7px 22px rgba(3,111,183,.18); }
.mic-button { width: clamp(66px,8.5vw,94px); aspect-ratio: 1; border: 1px solid var(--glass-border); border-radius: 50%; color: #fff; background: var(--control-blue-gradient); box-shadow: inset 0 1px 0 #fff,0 7px 0 rgba(14,137,202,.34),0 12px 22px rgba(3,111,183,.3); cursor: pointer; }
.mic-button:disabled { opacity: .5; filter: saturate(.55); cursor: not-allowed; box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 4px 0 rgba(14,137,202,.2),0 8px 14px rgba(3,111,183,.18); }
.mic-button svg { width: 50%; fill: currentColor; }
.mic-button.listening { animation: softPulse .7s infinite alternate; }
.heard-text { min-height: 22px; color: #5d8faa; font-size: clamp(13px,1.4vw,18px); font-weight: 750; }
.finish-layer { background: rgba(3,73,119,.38); backdrop-filter: blur(18px) saturate(150%); }
.finish-card { width: min(520px,86vw); }
.finish-card h1 { margin: 6px 0; color: #0875c9; font-size: clamp(36px,5.5vw,66px); }
.finish-card p { font-size: clamp(16px,2vw,22px); }
.stars { color: #ffc329; font-size: clamp(39px,6vw,70px); letter-spacing: .12em; }
.primary-button { padding: 12px 28px; border: 1px solid var(--glass-border); border-radius: 999px; color: #0875c9; background: linear-gradient(145deg,rgba(220,246,255,.86),rgba(92,204,250,.4)); box-shadow: inset 0 1px 0 #fff,0 7px 0 rgba(14,137,202,.3),0 12px 22px rgba(3,111,183,.28); font-size: 18px; font-weight: 950; cursor: pointer; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 10px; transform: translate(-50%,18px); padding: 9px 17px; border-radius: 999px; color: #fff; background: rgba(3,73,119,.88); opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@keyframes pop { from { opacity: 0; transform: scale(.85); } }
@keyframes shake { 25% { transform: translateX(-9px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
@keyframes choiceBounce { 0%,100% { transform: translateY(0) scale(1); } 38% { transform: translateY(-13px) scale(1.045); } 68% { transform: translateY(1px) scale(.99); } }
@keyframes storyGlow {
  0%,100% { opacity: 0; transform: scale(.96); box-shadow: 0 0 0 0 rgba(255,224,72,0); }
  28%,72% { opacity: 1; transform: scale(1.025); box-shadow: inset 0 0 22px 7px rgba(255,244,139,.72), 0 0 28px 12px rgba(255,204,28,.92); border: 4px solid rgba(255,249,184,.95); }
}
@keyframes softPulse { 50% { transform: scale(1.055); } }
@keyframes bars { to { height: 100%; } }

@media (max-height: 600px), (max-width: 720px) {
  .lesson-header { height: 56px; padding: 4px max(28px,calc(env(safe-area-inset-right,0px) + 18px)) 4px max(28px,calc(env(safe-area-inset-left,0px) + 18px)); }
  #course-code { font-size: 19px; }
  .lesson-title span { font-size: 12px; }
  .lesson-title { margin-right: 10px; }
  .round-button { width: 50px; height: 50px; font-size: 18px; }
  .round-button svg { width: 27px; height: 27px; }
  .header-back-button { width: 46px; height: 46px; margin-right: 8px; }
  .header-back-button span { width: 24px; height: 22px; }
  .header-actions { gap: 8px; }
  .caption-wrap { --nav-control-height: 58px; --caption-height: 56px; left: max(36px,calc(env(safe-area-inset-left,0px) + 22px)); right: max(36px,calc(env(safe-area-inset-right,0px) + 22px)); bottom: 6px; gap: 8px; }
  .nav-button { --nav-icon-width: 20px; --nav-icon-height: 24px; }
  .caption-pill { padding: 4px 10px; }
  .sentence-copy strong { font-size: clamp(16px,2.6vw,22px); }
  .course-menu { width: min(320px,52vw); padding: 8px 14px; }
  .menu-head { margin-bottom: 2px; }
  .menu-head strong { font-size: 20px; }
  .menu-head button { width: 32px; height: 32px; font-size: 21px; }
  .menu-section-title { margin: 0 0 5px; font-size: 15px; }
  .chapter-panel { padding: 7px 8px; margin-bottom: 7px; border-radius: 16px; }
  .chapter-grid { gap: 4px; }
  .chapter-grid button { width: 38px; }
  .chapter-grid b { font-size: 18px; }
  .settings-panel { padding: 2px 10px; border-radius: 16px; }
  .setting-row { padding: 5px 0; }
  .setting-row b { font-size: 12px; }
  .setting-row small { display: block; font-size: 9px; line-height: 1.05; }
  .menu-actions { gap: 10px; margin-top: 10px; }
  .restart-button { height: 44px; border-radius: 22px; font-size: 14px; }
}

/* Compact landscape phones (and the app's rotated portrait fallback).
   Fit every question control inside the safe viewport. */
@media (orientation: landscape) and (max-height: 700px),
       (orientation: portrait) and (max-width: 900px) {
  .question-layer, .finish-layer { padding: clamp(6px,1.6vmin,10px); }
  .question-card {
    width: min(650px,76%);
    max-height: 82%;
    overflow: hidden;
    padding: clamp(10px,2.3vmin,16px) clamp(14px,3.3vmin,24px);
    border-radius: clamp(18px,5vmin,30px);
  }
  .question-topline { gap: 8px; }
  .question-badge { padding: clamp(4px,1.2vmin,7px) clamp(10px,2.7vmin,16px); font-size: clamp(9px,2.7vmin,14px); }
  .tries { gap: clamp(4px,1.2vmin,7px); }
  .try-dot { width: clamp(10px,3vmin,16px); }
  .question-card h1 { margin: 0 0 clamp(7px,2vmin,11px); font-size: clamp(19px,5.2vmin,31px); line-height: 1; }
  .question-help { margin: 0 0 clamp(5px,1.7vmin,9px); font-size: clamp(11px,3.2vmin,17px); line-height: 1.15; }

  .choices { width: min(540px,88%); margin: 0 auto; gap: clamp(7px,2vmin,12px); }
  .choice { min-height: 0; border-width: 3px; border-radius: clamp(14px,4vmin,21px); }
  .choice img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
  .choice span { padding: clamp(3px,1.2vmin,6px); font-size: clamp(15px,5vmin,25px); line-height: 1.05; }

  .voice-answer { gap: clamp(3px,1.2vmin,7px); }
  .voice-picture {
    width: min(50vw,420px,calc(31vmin * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-width: 3px;
    border-radius: clamp(13px,3.8vmin,20px);
  }
  .mic-button { flex: 0 0 auto; width: clamp(48px,12vmin,68px); box-shadow: inset 0 1px 0 #fff,0 5px 0 rgba(14,137,202,.34),0 9px 18px rgba(3,111,183,.28); }
  .mic-button svg { width: 46%; }
  .heard-text { min-height: clamp(15px,4vmin,21px); font-size: clamp(10px,2.8vmin,15px); line-height: 1.1; }
  .feedback { min-height: clamp(16px,4.4vmin,23px); margin-top: clamp(2px,.8vmin,5px); font-size: clamp(12px,3.6vmin,19px); line-height: 1.1; }
}

@media (orientation: portrait) {
  .lesson-shell {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform: translate(-50%,-50%) rotate(90deg);
    transform-origin: center;
  }
  .question-layer, .finish-layer {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    transform: translate(-50%,-50%) rotate(90deg);
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* 趣复述：保留趣课堂控制栏与字幕，并让九张故事图按原比例完整显示。 */
.retell-scene {
  background:
    radial-gradient(circle at 12% 15%, rgba(190, 239, 255, .45), transparent 27%),
    radial-gradient(circle at 90% 75%, rgba(203, 245, 255, .38), transparent 28%),
    #f8fdff;
}

.header-mic-button {
  position: absolute;
  z-index: 22;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
}
.header-mic-button:hover { transform: translate(-50%, -2px) scale(1.02); }
.header-mic-button:active { transform: translate(-50%, 5px) scale(.98); }
.header-mic-button:disabled {
  opacity: .5;
  filter: saturate(.55);
  cursor: default;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), inset 0 -2px 0 rgba(20,148,220,.16), 0 4px 0 rgba(14,137,202,.18), 0 8px 15px rgba(3,111,183,.18);
}
.header-mic-button .stop-icon { display: none; }
.header-mic-button.recording {
  opacity: 1;
  filter: none;
  background: linear-gradient(145deg, #ff8b77 0%, #ff504d 58%, #e83443 100%);
  animation: micPulse .82s ease-in-out infinite alternate;
}
.header-mic-button.recording .mic-icon { display: none; }
.header-mic-button.recording .stop-icon { display: block; width: 37%; }
.header-mic-button.needs-tap:not(.recording) { opacity: 1; animation: soundNudge .85s ease-in-out infinite alternate; }
.header-mic-button:not(:disabled):not(.recording),
.header-mic-button[data-state="error"] {
  opacity: 1;
  filter: none;
  color: #fff;
  background: var(--control-blue-gradient);
  min-width: 44px;
  min-height: 44px;
}
.header-mic-button.needs-tap[data-state="error"] { cursor: pointer; visibility: visible; animation: none; }
.audio-button.needs-tap { animation: soundNudge .85s ease-in-out infinite alternate; }
body:not(.child-retelling):not(.mic-ready) .header-mic-button,
body.child-retelling:not(.mic-ready) .header-mic-button {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.camera-stage {
  position: absolute;
  z-index: 7;
  top: 104px;
  right: 0;
  bottom: 156px;
  left: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: left .65s cubic-bezier(.2,.8,.2,1), right .65s cubic-bezier(.2,.8,.2,1), width .65s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
.camera-frame {
  position: relative;
  width: min(58vw, 820px, calc((100dvh - 290px) * 4 / 3));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: clamp(3px, .35vw, 6px) solid rgba(255,255,255,.98);
  border-radius: clamp(22px, 2.5vw, 38px);
  background: linear-gradient(145deg, #d9f6ff, #86d9f9);
  box-shadow: 0 0 0 5px rgba(8,117,201,.55), 0 22px 56px rgba(3,91,151,.3);
  transform: scale(.82);
  transition: width .65s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), border-radius .55s ease;
}
.camera-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.camera-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: #0875c9;
  background: linear-gradient(145deg, rgba(231,249,255,.96), rgba(154,226,255,.92));
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
  text-align: center;
  transition: opacity .25s ease;
}
.camera-frame.ready .camera-status { opacity: 0; }
.camera-status > span { min-height: 0; overflow: auto; flex: 0 1 auto; }
.camera-retry-button {
  flex: 0 0 auto;
  min-height: 40px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 16px;
  color: #075b9b;
  background: #effbff;
  font: inherit;
  font-size: clamp(12px,1.2vw,16px);
  line-height: 1.2;
  cursor: pointer;
  pointer-events: auto;
}
.camera-retry-button[hidden] { display: none; }
.camera-retry-button:focus-visible { outline: 3px solid #0875c9; outline-offset: 2px; }
body.camera-intro .camera-frame { max-width: 100%; width: min(58vw,820px,calc(var(--retell-preview-height,300px) * 4 / 3)); }
body.camera-intro .camera-stage { opacity: 1; }
body.camera-intro .camera-frame { transform: scale(1); }
body.camera-intro .story-grid { opacity: .2; filter: blur(2px); transform: translate(-50%, -50%) scale(.96); }
body.child-retelling {
  --retell-camera-width: clamp(160px, 18vw, 300px);
  --retell-layout-gap: clamp(10px, 1.2vw, 20px);
  --retell-grid-width: min(85vw, calc(100vw - var(--retell-camera-width) - 52px), calc((100dvh - 270px) * 16 / 9));
  --retell-group-width: calc(var(--retell-camera-width) + var(--retell-layout-gap) + var(--retell-grid-width));
}
body.child-retelling .camera-stage {
  right: auto;
  left: max(calc((100vw - var(--retell-group-width)) / 2), calc(env(safe-area-inset-left, 0px) + 8px));
  width: var(--retell-camera-width);
  height: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  opacity: 1;
}
body.child-retelling .camera-frame { width: 100%; aspect-ratio: 3 / 4; transform: none; }
body.child-retelling .camera-stage.compact { flex-direction: row; gap: 10px; align-items: center; }
body.child-retelling .camera-stage.compact .camera-frame { flex: 0 0 auto; width: var(--retell-compact-frame-width); }
body.child-retelling .camera-stage.compact .camera-status { padding: 2px; gap: 2px; font-size: 10px; }
body.child-retelling .camera-stage.compact .camera-retry-button { min-height: 44px; padding: 4px; border-radius: 10px; font-size: 11px; }
body.child-retelling.mic-ready .header-mic-button {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 0 0 auto;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
body.child-retelling.mic-ready .header-mic-button:hover { transform: translateY(-2px) scale(1.02); }
body.child-retelling.mic-ready .header-mic-button:active { transform: translateY(5px) scale(.98); }
body.child-retelling.mic-ready .header-mic-button:disabled { transform: none; }
body.child-retelling .story-grid {
  left: calc((100vw - var(--retell-group-width)) / 2 + var(--retell-camera-width) + var(--retell-layout-gap));
  right: auto;
  width: var(--retell-grid-width);
  transform: translateY(-50%);
}

body.subtitles-off:not(.child-retelling) .story-grid {
  top: calc(50% + 30px);
  width: min(calc(100vw - 40px), calc((100dvh - 150px) * 16 / 9));
}
body.subtitles-off.child-retelling {
  --retell-grid-width: min(85vw, calc(100vw - var(--retell-camera-width) - 52px), calc((100dvh - 150px) * 16 / 9));
}
body.subtitles-off.camera-intro .camera-stage,
body.subtitles-off.child-retelling .camera-stage { top: 104px; bottom: 40px; }
body.subtitles-off.child-retelling .story-grid { top: calc(50% + 30px); }

.story-grid {
  position: absolute;
  z-index: 2;
  top: calc(50% - 26px);
  left: 50%;
  width: min(calc(100vw - 40px), calc((100dvh - 270px) * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, .72vw, 12px);
  transition: left .65s cubic-bezier(.2,.8,.2,1), right .65s cubic-bezier(.2,.8,.2,1), width .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1), opacity .3s ease, filter .3s ease;
}
.story-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: clamp(2px, .22vw, 4px) solid rgba(255, 255, 255, .96);
  border-radius: clamp(10px, 1.25vw, 21px);
  background: #d8f3ff;
  box-shadow: 0 5px 15px rgba(4, 100, 158, .17);
  opacity: .76;
  transform: scale(.988);
  transition: opacity .24s ease, transform .24s ease, border-color .24s ease, box-shadow .24s ease, filter .24s ease;
}
.story-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .35s ease;
}
.story-card > span {
  position: absolute;
  top: clamp(5px, .65vw, 11px);
  left: clamp(5px, .65vw, 11px);
  width: clamp(25px, 2.7vw, 42px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 117, 201, .88);
  box-shadow: 0 3px 9px rgba(2, 70, 118, .28);
  font-size: clamp(13px, 1.35vw, 22px);
  font-weight: 950;
}
.story-card.heard { opacity: 1; transform: scale(1); }
.story-card.active {
  z-index: 3;
  opacity: 1;
  transform: scale(1.025);
  border-color: #0b79cf;
  filter: saturate(1.08) brightness(1.02);
  box-shadow: 0 0 0 4px rgba(8, 117, 201, .72), 0 0 24px 7px rgba(69, 199, 255, .48), 0 10px 25px rgba(3, 111, 183, .32);
  animation: activePictureGlow 1.05s ease-in-out infinite alternate;
}
.story-card.active > span {
  color: #fff;
  background: #0875c9;
  border-color: #d9f6ff;
  box-shadow: 0 0 0 4px rgba(69, 199, 255, .3), 0 4px 11px rgba(2, 79, 132, .32);
  animation: activeNumberBounce .72s ease-in-out infinite alternate;
}

.retell-caption-wrap {
  grid-template-columns: minmax(0, 1fr);
  left: max(clamp(24px, 4vw, 64px), calc(env(safe-area-inset-left, 0px) + 18px));
  right: max(clamp(24px, 4vw, 64px), calc(env(safe-area-inset-right, 0px) + 18px));
  bottom: 10px;
}
.caption-stack { display: grid; gap: 7px; min-width: 0; }
.retell-caption-wrap .caption-pill { --caption-height: 104px; }
.audio-scrubber {
  height: 22px;
  display: grid;
  grid-template-columns: 28px 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  color: #527f99;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transition: opacity .22s ease, transform .22s ease;
}
.transport-visible .audio-scrubber { opacity: 1; pointer-events: auto; transform: translateY(0); }
.subtitles-off .retell-caption-wrap {
  /* 无字幕时把播放进度悬浮在九宫格第三排的下沿，不再占用底部空间。 */
  bottom: max(clamp(54px, 10.5dvh, 112px), env(safe-area-inset-bottom, 0px));
}
.subtitles-off .caption-stack { gap: 0; }
.subtitles-off .audio-scrubber {
  width: min(900px, 88vw);
  height: 30px;
  justify-self: center;
  padding: 2px 14px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
  background: rgba(232,248,255,.24);
  box-shadow: 0 4px 12px rgba(3,111,183,.08), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.timeline-play-button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 50%;
  color: #fff;
  background: var(--control-blue-gradient);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(14,137,202,.25), 0 5px 10px rgba(3,111,183,.24);
  cursor: pointer;
}
.timeline-play-button svg { grid-area: 1 / 1; width: 15px; height: 15px; fill: currentColor; }
.timeline-pause-icon { display: none; }
.timeline-play-button.playing .timeline-play-icon { display: none; }
.timeline-play-button.playing .timeline-pause-icon { display: block; }
.audio-scrubber input[type="range"] {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.audio-scrubber input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(8,117,201,.88), rgba(69,199,255,.72));
  box-shadow: inset 0 1px 3px rgba(2,73,119,.22), 0 1px 0 rgba(255,255,255,.92);
}
.audio-scrubber input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0875c9;
  box-shadow: 0 3px 9px rgba(3,111,183,.34);
}
.audio-scrubber input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(8,117,201,.88), rgba(69,199,255,.72));
}
.audio-scrubber input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #0875c9;
  box-shadow: 0 3px 9px rgba(3,111,183,.34);
}

.retell-finish-card {
  --finish-gutter: clamp(12px, 2vmin, 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(calc(462px + var(--finish-gutter) + var(--finish-gutter)), 100%);
  max-height: 100%;
  overflow: hidden;
  padding: var(--finish-gutter);
  border-radius: clamp(18px, 3vmin, 28px);
}
.retell-finish-card .stars { font-size: clamp(30px, 5vmin, 42px); line-height: 1; white-space: nowrap; }
.retell-finish-card h1 { margin: 0; font-size: clamp(22px, 4vmin, 34px); line-height: 1.12; }
.retell-finish-card .score-line { margin: 0; color: #527f99; font-size: clamp(14px, 2vmin, 18px); line-height: 1.2; }
.score-line strong { color: #0875c9; }
.keyword-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; margin: 0; }
.keyword-list span { flex: 0 0 calc((100% - 24px) / 5); padding: 5px 3px; border-radius: 999px; font-size: clamp(11px, 1.8vmin, 14px); line-height: 1.2; font-weight: 900; white-space: nowrap; }
.keyword-list .matched { color: #0875c9; background: rgba(111, 216, 255, .26); border: 1px solid rgba(36, 174, 230, .35); }
.keyword-list .missing { color: #8199a8; background: rgba(217, 229, 235, .5); border: 1px solid rgba(149, 177, 191, .32); }
.result-actions { display: flex; justify-content: center; gap: 8px; padding-bottom: 7px; }
.result-actions .primary-button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 6px; font-size: clamp(13px, 1.8vmin, 16px); white-space: nowrap; }
.result-actions [data-next-lesson] { color: #fff; background: linear-gradient(135deg, #3bc8f6, #0785d1); }

@keyframes micPulse {
  from { box-shadow: inset 0 1px 0 #fff, 0 7px 0 rgba(190, 39, 48, .34), 0 0 0 0 rgba(255, 79, 77, .28), 0 12px 22px rgba(164, 35, 43, .28); }
  to { box-shadow: inset 0 1px 0 #fff, 0 7px 0 rgba(190, 39, 48, .34), 0 0 0 13px rgba(255, 79, 77, 0), 0 12px 22px rgba(164, 35, 43, .28); }
}
@keyframes soundNudge { to { filter: brightness(1.08); box-shadow: inset 0 1px 0 #fff, 0 8px 0 rgba(14,137,202,.34), 0 0 0 9px rgba(69,199,255,.14), 0 15px 28px rgba(3,111,183,.34); } }
@keyframes activePictureGlow {
  from { box-shadow: 0 0 0 3px rgba(8,117,201,.68), 0 0 13px 3px rgba(69,199,255,.34), 0 8px 20px rgba(3,111,183,.27); }
  to { box-shadow: 0 0 0 5px rgba(20,139,220,.94), 0 0 30px 9px rgba(69,199,255,.6), 0 12px 28px rgba(3,111,183,.38); }
}
@keyframes activeNumberBounce { to { transform: translateY(-3px) scale(1.09); } }

@media (max-height: 600px), (max-width: 720px) {
  .header-mic-button { top: 4px; }
  .story-grid {
    top: calc(50% - 11px);
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(calc(100vw - 18px), calc((100dvh - 154px) * 16 / 9));
    transform: translate(-50%, -50%);
    gap: 4px;
  }
  .camera-stage { top: 60px; bottom: 82px; }
  .camera-frame { width: min(58vw, calc((100dvh - 170px) * 4 / 3)); }
  body.child-retelling .camera-stage { top: 60px; bottom: auto; left: 8px; width: clamp(115px, 18vw, 180px); gap: 10px; }
  body.child-retelling .story-grid {
    top: calc(50% - 11px);
    right: 8px;
    left: auto;
    width: min(82vw, calc(100vw - clamp(115px, 18vw, 180px) - 24px), calc((100dvh - 154px) * 16 / 9));
    transform: translateY(-50%);
  }
  .retell-caption-wrap { left: max(18px, calc(env(safe-area-inset-left, 0px) + 12px)); right: max(18px, calc(env(safe-area-inset-right, 0px) + 12px)); bottom: 6px; }
  .retell-caption-wrap .caption-pill { --caption-height: 56px; }
  .caption-stack { gap: 2px; }
  .audio-scrubber { height: 16px; grid-template-columns: 20px 31px minmax(0, 1fr) 31px; gap: 5px; padding: 0 7px; font-size: 8px; }
  .timeline-play-button { width: 20px; height: 20px; box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(14,137,202,.22), 0 3px 7px rgba(3,111,183,.2); }
  .timeline-play-button svg { width: 11px; height: 11px; }
  .audio-scrubber input[type="range"] { height: 14px; }
  .audio-scrubber input[type="range"]::-webkit-slider-runnable-track { height: 4px; }
  .audio-scrubber input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border-width: 2px; }
  .story-card { border-width: 2px; border-radius: 8px; }
  .story-card.active { box-shadow: 0 0 0 2px rgba(8,117,201,.76), 0 0 12px 3px rgba(69,199,255,.42), 0 5px 12px rgba(3,111,183,.26); }
  .story-card > span { width: 23px; top: 4px; left: 4px; font-size: 12px; border-width: 1px; }
  .retell-finish-card { gap: 6px; }
  .retell-finish-card h1 { font-size: clamp(22px, 6vmin, 30px); }
  .retell-finish-card .stars { font-size: clamp(26px, 7vmin, 36px); }
  .keyword-list { gap: 4px; }
  .keyword-list span { flex-basis: calc((100% - 16px) / 5); padding: 4px 3px; font-size: 11px; }
  .result-actions .primary-button { min-height: 38px; padding: 6px; font-size: 13px; }
}

/* 手机与小平板横屏：九宫格占满摄像头右侧，适度裁掉上下背景来放大故事主体。 */
@media (orientation: landscape) and (max-height: 600px) {
  body.subtitles-off:not(.child-retelling) .story-grid {
    top: calc(50% + 24px);
    width: min(calc(100vw - 18px), calc((100dvh - 72px) * 16 / 9));
  }
  body.subtitles-off.camera-intro .camera-stage,
  body.subtitles-off.child-retelling .camera-stage { top: 60px; bottom: 12px; }
  body.child-retelling .story-grid {
    top: 60px;
    right: 8px;
    bottom: 82px;
    left: calc(8px + clamp(115px, 18vw, 180px) + 10px);
    width: auto;
    height: auto;
    aspect-ratio: auto;
    transform: none;
  }
  body.child-retelling .story-card img {
    object-fit: cover;
    transform: scale(1.04);
  }
  body.subtitles-off.child-retelling .story-grid { top: 60px; bottom: 12px; }
  .subtitles-off .retell-caption-wrap {
    bottom: max(clamp(46px, 10.5dvh, 64px), env(safe-area-inset-bottom, 0px));
  }
  .subtitles-off .audio-scrubber { width: min(86vw, 760px); height: 22px; padding: 1px 8px; }
}

/* Keep every retell component inside the same edges as the header controls. */
.retell-caption-wrap {
  left: var(--retell-safe-left, var(--lesson-content-inset-left, 36px));
  right: var(--retell-safe-right, var(--lesson-content-inset-right, 36px));
}
.story-grid { max-width: calc(100vw - var(--retell-safe-left, 36px) - var(--retell-safe-right, 36px)); }
body.child-retelling .story-card img { object-fit: contain; transform: none; }
.retell-caption-wrap .sentence-copy { display: block; width: 100%; }
.retell-caption-wrap .sentence-copy strong { display: block; -webkit-line-clamp: unset; text-overflow: clip; overflow: visible; }
.audio-scrubber,
.subtitles-off .audio-scrubber {
  width: min(68vw,760px); max-width: 100%; height: 56px; padding: 2px 10px;
  grid-template-columns: 52px 44px minmax(0,1fr) 44px; gap: 10px; font-size: 12px;
  justify-self: center;
  visibility: hidden;
}
.transport-visible .audio-scrubber { visibility: visible; }
/* This transport always belongs to Amy, never to the child's recording. */
.camera-intro .audio-scrubber,
.child-retelling .audio-scrubber,
.lesson-menu-open .audio-scrubber { visibility: hidden; opacity: 0; pointer-events: none; }
.timeline-play-button { width: 48px; height: 48px; }
.timeline-play-button svg { width: 25px; height: 25px; }
.audio-scrubber input[type="range"] { height: 44px; }
.audio-scrubber input[type="range"]:focus-visible,
.timeline-play-button:focus-visible { outline: 3px solid #0875c9; outline-offset: 3px; }
.subtitles-off .retell-caption-wrap { bottom: max(10px,env(safe-area-inset-bottom,0px)); }
/* Reserve a notice band below the header; errors never cover subtitles,
   the seek track or the play button, even when subtitles are enabled. */
.toast {
  top: var(--retell-notice-top,100px);
  bottom: auto;
  left: var(--retell-safe-left,36px);
  right: var(--retell-safe-right,36px);
  width: max-content;
  max-width: calc(100vw - var(--retell-safe-left,36px) - var(--retell-safe-right,36px));
  margin-inline: auto;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: clamp(12px,1.3vw,17px);
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  transform: none;
}
.toast.show { transform: none; }
#childPlayback { display: block; flex: 0 0 44px; width: min(100%,460px); height: 44px; margin: 0 auto; }
#childPlayback[hidden] { display: none; }
.finish-layer {
  padding: max(8px, var(--lesson-top-edge, 8px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, var(--lesson-bottom-edge, 10px)) max(10px, env(safe-area-inset-left, 0px));
}
@media (orientation: landscape) and (max-height: 360px), (orientation: portrait) and (max-width: 360px) {
  .retell-finish-card { --finish-gutter: 9px; gap: 3px; }
  .retell-finish-card h1 { font-size: 22px; }
  .retell-finish-card .stars { font-size: 24px; }
  .retell-finish-card .score-line { font-size: 14px; }
  .keyword-list span { padding-block: 3px; }
  .result-actions { gap: 6px; }
  .result-actions .primary-button { min-height: 36px; }
}
@media (max-height:600px) {
  .audio-scrubber,.subtitles-off .audio-scrubber { height: 48px; grid-template-columns: 44px 34px minmax(0,1fr) 34px; gap: 6px; font-size: 10px; }
  .timeline-play-button { width: 44px; height: 44px; }
  .timeline-play-button svg { width: 23px; height: 23px; }
  .camera-status { padding: 8px; font-size: 12px; line-height: 1.35; }
}

/* The Amy transport is an overlay, not a hidden row in the caption layout.
   Showing it never resizes the nine original-proportion story pictures. */
.retell-scene { padding-bottom: max(12px, var(--lesson-bottom-edge, 12px)); }
.retell-caption-wrap .caption-stack { gap: 0; }
.story-grid { max-width: none; transition: opacity .3s ease, filter .3s ease; }
.camera-stage { transition: opacity .28s ease; }
.camera-frame { flex-shrink: 0; }
body.child-retelling .camera-frame { transition: none; }
.camera-frame video { position: absolute; inset: 0; }
body.camera-intro .camera-frame {
  width: min(58%, 820px, calc(var(--retell-preview-height, 300px) * 4 / 3));
}
.retell-transport-overlay {
  position: absolute;
  z-index: 16;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease;
}
.transport-visible .retell-transport-overlay { opacity: 1; visibility: visible; }
.retell-transport-overlay .audio-scrubber {
  width: min(100%, var(--retell-transport-width, 760px));
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: opacity .18s ease;
}
.retell-transport-overlay time {
  color: #075b9b;
  font-weight: 950;
  text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff;
}
.camera-intro .retell-transport-overlay,
.child-retelling .retell-transport-overlay,
.lesson-menu-open .retell-transport-overlay { opacity: 0; visibility: hidden; pointer-events: none; }
@media (orientation: portrait) {
  .lesson-shell { height: 100dvw !important; min-height: 100dvw !important; }
}