: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; width: 100%; }
.sentence-copy strong { display: block; margin: 0; overflow: visible; overflow-wrap: anywhere; 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 { visibility: hidden; }

.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: -100vw 0 0 rgba(2,45,75,.34), -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-layer { pointer-events: none; }
.question-backdrop { position: absolute; inset: 0; background: rgba(100,190,245,.26); filter: none; transform: none; pointer-events: none; }
.question-open .reader-controls .caption-card,
.question-open .reader-controls #nextButton { visibility: hidden; pointer-events: none; }
.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-card { pointer-events: auto; }
.question-badge, .question-help, .choice span { display: none !important; }
.question-topline { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: clamp(7px,1vh,12px); }
.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: contain; object-position: center; background: #f3fbff; }
.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: contain; background: #f3fbff; 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; background: linear-gradient(145deg,#ff8a85,#ed4e59); box-shadow: inset 0 1px 0 #fff,0 7px 0 rgba(183,38,63,.28),0 12px 22px rgba(183,38,63,.22); }
.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,66vh,86vw); padding: min(2.8vh,24px) min(4.2vh,36px); border-radius: min(4.4vh,40px); background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(205,242,255,.82)); }
.finish-card h1 { margin: min(.8vh,6px) 0; color: #0875c9; font-size: clamp(24px,6.1vh,50px); line-height: 1; }
.finish-card p { margin: min(1.2vh,10px) 0; font-size: clamp(11px,2.4vh,20px); line-height: 1.25; }
.finish-card .stars { margin: 0; font-size: clamp(27px,7vh,58px); line-height: 1; }
.finish-card .primary-button { min-width: min(19vh,150px); min-height: min(6.7vh,54px); margin: min(1.8vh,15px) min(.8vh,6px) 0; padding: min(1.3vh,11px) min(3.3vh,27px); font-size: clamp(12px,2.5vh,19px); }
.finish-card .next-level-button { color: #fff; background: var(--control-blue-gradient); }
.finish-card .lesson-next-countdown { margin-top: min(1.5vh,12px); color: #5d8faa; font-size: clamp(11px,2.2vh,18px); font-weight: 850; }
.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: contain; 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: contain;
    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; }
}

/* Choice questions sit directly on the clear story scene. The wide central
   opening is intentional: the background illustration remains a visual clue. */
.question-layer[data-question-type="choice"] .question-card {
  width: min(94vw,1140px);
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.question-layer[data-question-type="choice"] .question-topline,
.question-layer[data-question-type="choice"] .feedback { display: none; }
.question-layer[data-question-type="choice"] .question-card h1 {
  margin: 0 0 clamp(18px,4dvh,34px);
  font-size: clamp(22px,5.7dvh,46px);
  line-height: 1.15;
  text-shadow: 0 1px 3px #fff,0 0 14px rgba(255,255,255,.95);
}
.question-layer[data-question-type="choice"] .choices {
  --choice-side: min(31vw,44dvh,340px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  gap: clamp(60px,13vw,200px);
}
.question-layer[data-question-type="choice"] .choice {
  flex: 0 0 var(--choice-side);
  width: var(--choice-side);
  height: var(--choice-side);
  min-height: 0;
  padding: 0;
  border-width: clamp(3px,.7dvh,5px);
  border-radius: clamp(15px,3dvh,26px);
}
.question-layer[data-question-type="choice"] .choice img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  /* Preserve the artwork's proportions while filling the square option.
     Per-image focus points below retain the actual answer, not empty scenery. */
  object-fit: cover;
  object-position: center;
}
.question-layer[data-question-type="choice"] .choice img[src*="scene-02-leo-cold-closeup"] { object-position: 18% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-38-warm-finale-v2"] { object-position: 42% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-26-put-on-shirt"] { object-position: 30% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-17-return-skirt"] { object-position: 70% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-21-dress-on-leo"] { object-position: 35% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-15-skirt-on-leo"] { object-position: 40% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-30-sweater-on"] { object-position: 30% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-35-jacket-found-v2"] { object-position: 66% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-10-leos-clothes"] { object-position: 65% center; }
.question-layer[data-question-type="choice"] .choice img[src*="scene-36-put-on-jacket-v2"] { object-position: 40% center; }

/* Voice prompts remain a compact, content-sized card. No blank feedback row
   reserves space, and every major dimension follows available screen height. */
.question-layer[data-question-type="voice"] .question-card {
  --voice-layout-height: 100dvh;
  width: min(560px,88vw,calc(31dvh * 16 / 9 + 60px));
  max-height: 88dvh;
  padding: clamp(10px,2.2dvh,22px);
  overflow: auto;
  border-radius: clamp(20px,4dvh,34px);
}
.question-layer[data-question-type="voice"] .question-topline { margin-bottom: clamp(6px,1dvh,9px); }
.question-layer[data-question-type="voice"] .question-card h1 {
  margin-bottom: clamp(8px,1.8dvh,16px);
  font-size: clamp(21px,5dvh,40px);
  line-height: 1.1;
}
.question-layer[data-question-type="voice"] .voice-answer { gap: clamp(6px,1.2dvh,11px); }
.question-layer[data-question-type="voice"] .voice-picture {
  --voice-picture-height: min(31dvh,245px);
  width: min(100%,calc(var(--voice-picture-height) * 16 / 9));
  height: var(--voice-picture-height);
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.question-layer[data-question-type="voice"] .mic-button {
  width: clamp(48px,10dvh,80px);
  height: clamp(48px,10dvh,80px);
}
.question-layer[data-question-type="voice"] .heard-text {
  min-height: 0;
  width: 100%;
  max-height: 3.9em;
  overflow: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  overscroll-behavior: contain;
  user-select: text;
  font-size: clamp(12px,2dvh,17px);
  line-height: 1.3;
}
.voice-recovery-status { color: #416f88; font-size: clamp(11px,1.8vmin,14px); line-height: 1.25; }
.voice-recovery-status:empty { display: none; }
.voice-recovery-actions {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
  gap: clamp(6px,1.2vmin,12px); width: 100%;
}
.voice-recovery-actions .voice-retry-button,
.voice-recovery-actions .voice-model-retry-button {
  flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 5px 7px; border: 1px solid rgba(48,160,218,.5); border-radius: 18px;
  color: #08649d; background: rgba(230,248,255,.94); font-size: clamp(11px,1.8vmin,14px); font-weight: 750;
  line-height: 1.15; white-space: normal;
  cursor: pointer;
}
.voice-recovery-actions .voice-retry-button:disabled,
.voice-recovery-actions .voice-model-retry-button:disabled { opacity: .5; cursor: not-allowed; }
.voice-recovery-actions:not(.show-recovery) .voice-retry-button,
.voice-recovery-actions:not(.show-recovery) .voice-model-retry-button { visibility: hidden; pointer-events: none; }
.question-layer[data-question-type="voice"].voice-recovering .question-card { padding: clamp(8px,1.8vmin,18px); }
.question-layer[data-question-type="voice"].voice-recovering .voice-answer { gap: 3px; }
.question-layer[data-question-type="voice"].voice-recovering .mic-button { width: clamp(44px,8vmin,65px); height: clamp(44px,8vmin,65px); }
.question-layer[data-question-type="voice"].voice-recovering .heard-text { max-height: 2.6em; }
.question-layer[data-question-type="voice"].voice-recovering .voice-recovery-actions .voice-retry-button,
.question-layer[data-question-type="voice"].voice-recovering .voice-recovery-actions .voice-model-retry-button { min-height: 44px; }
.question-layer[data-question-type="voice"] .feedback:empty { display: none; }

@media (orientation: portrait) {
  .lesson-shell.app-shell {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 100vh;
    width: 100dvh;
    height: 100vw;
    height: 100dvw;
    min-height: 100dvw;
    transform: translate(-50%,-50%) rotate(90deg);
    transform-origin: center;
  }
  /* Questions now live inside the rotated shell with its usable header.
     Rotating the overlay again turns the cards sideways and misplaces taps. */
  .question-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .question-layer[data-question-type="choice"] .question-card {
    width: min(94dvh,1140px);
    max-height: calc(100dvw - 28px);
  }
  .question-layer[data-question-type="choice"] .question-card h1 {
    margin-bottom: clamp(18px,4dvw,34px);
    font-size: clamp(22px,5.7dvw,46px);
  }
  .question-layer[data-question-type="choice"] .choices {
    --choice-side: min(31dvh,44dvw,340px);
    gap: clamp(60px,13dvh,200px);
  }
  .question-layer[data-question-type="voice"] .question-card {
    --voice-layout-height: 100dvw;
    width: min(560px,88dvh,calc(31dvw * 16 / 9 + 60px));
    max-height: 88dvw;
    padding: clamp(10px,2.2dvw,22px);
    border-radius: clamp(20px,4dvw,34px);
  }
  .question-layer[data-question-type="voice"] .question-card h1 {
    margin-bottom: clamp(8px,1.8dvw,16px);
    font-size: clamp(21px,5dvw,40px);
  }
  .question-layer[data-question-type="voice"] .voice-picture {
    --voice-picture-height: min(31dvw,245px);
  }
  .question-layer[data-question-type="voice"] .mic-button {
    width: clamp(48px,10dvw,80px);
    height: clamp(48px,10dvw,80px);
  }
  /* Completion is a sibling of the shell, so it still rotates independently. */
  .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; } }

/* A reversible story/question timeline replaces the old page arrow row. */
.classroom-caption { grid-template-columns: minmax(0,1fr); left: max(6vw,calc(env(safe-area-inset-left,0px) + 14px)); right: max(6vw,calc(env(safe-area-inset-right,0px) + 14px)); pointer-events: none; }
.question-open .classroom-caption { visibility: hidden; }
.classroom-timeline {
  --timeline-button-size: 44px;
  position: absolute;
  z-index: 9000;
  left: 50%;
  bottom: max(10px,calc(env(safe-area-inset-bottom,0px) + 6px));
  transform: translateX(-50%);
  width: min(68%,760px);
  max-width: calc(100% - 32px);
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.classroom-timeline .timeline-play { flex: 0 0 var(--timeline-button-size); width: var(--timeline-button-size); height: var(--timeline-button-size); display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; color: white; background: var(--control-blue-gradient); cursor: pointer; }
.classroom-timeline .timeline-play svg { grid-area: 1 / 1; width: 24px; height: 24px; fill: currentColor; }
.classroom-timeline .timeline-play-icon { display: none; }
.classroom-timeline .timeline-play[data-paused="true"] .timeline-play-icon { display: block; }
.classroom-timeline .timeline-play[data-paused="true"] .timeline-pause-icon { display: none; }
.classroom-timeline .timeline-track-wrap { position: relative; flex: 1 1 auto; height: 44px; min-width: 0; }
.classroom-timeline .timeline-range { --timeline-fill: 0%; position: relative; z-index: 2; display: block; width: 100%; height: 44px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; touch-action: none; }
.classroom-timeline .timeline-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(to right,#37d3ec 0 var(--timeline-fill),rgba(255,255,255,.45) var(--timeline-fill) 100%); }
.classroom-timeline .timeline-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid #fff; border-radius: 50%; background: #2ac8f0; box-shadow: 0 1px 5px rgba(0,41,75,.4); }
.classroom-timeline .timeline-range::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(255,255,255,.45); }
.classroom-timeline .timeline-range::-moz-range-progress { height: 4px; background: #37d3ec; }
.classroom-timeline .timeline-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #2ac8f0; }
.classroom-timeline .timeline-position { position: absolute; left: 50%; top: 29px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; line-height: 1; pointer-events: none; }
.classroom-timeline .timeline-question-marks { position: absolute; z-index: 1; top: 19px; left: 7px; right: 7px; height: 6px; pointer-events: none; }
.classroom-timeline .timeline-question-marks i { position: absolute; top: 0; width: 3px; height: 6px; border-radius: 2px; background: #ffe5a8; transform: translateX(-50%); }
.classroom-timeline .timeline-range:focus-visible { outline: 2px solid white; outline-offset: 2px; border-radius: 12px; }
.classroom-timeline .timeline-range:disabled { cursor: not-allowed; pointer-events: none; }
.classroom-timeline .timeline-range:disabled::-webkit-slider-thumb { opacity: .72; }
.classroom-timeline .timeline-range:disabled::-moz-range-thumb { opacity: .72; }
.classroom-timeline-visible .classroom-caption { bottom: max(72px,calc(env(safe-area-inset-bottom,0px) + 68px)) !important; }

/* Real Amy clips and red hearts, not star-shaped streak counters. */
.classroom-reward-layer { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; background: rgba(67,166,219,.16); pointer-events: none; }
.classroom-reward-card { position: relative; display: grid; justify-items: center; gap: 12px; min-width: min(64%,300px); max-width: 80%; padding: 22px 30px 18px; border: 1px solid rgba(255,255,255,.88); border-radius: 28px; color: #0875c9; background: rgba(239,251,255,.96); box-shadow: 0 10px 32px rgba(0,72,117,.24); }
.classroom-reward-card > strong { font-size: clamp(26px,6.5vmin,44px); line-height: 1.1; text-align: center; }
.classroom-reward-hearts { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 34px; color: #f04465; font-size: clamp(28px,7vmin,40px); line-height: 1; }
.classroom-bonus-heart { position: absolute; left: 50%; top: -30px; color: #f04465; font-size: 34px; line-height: 1; transform: translateX(-50%); }
.classroom-bonus-heart.flying { animation: classroomBonusFly .9s cubic-bezier(.35,.05,.65,1) both; }
.classroom-reward-hearts .merged-heart { animation: classroomHeartMerge .35s ease-out; }
.classroom-reward-card small { font-size: clamp(10px,2vmin,14px); color: #5d8faa; }
.classroom-reward-card small:empty { display: none; }
.classroom-reward-layer[data-paused="true"] * { animation-play-state: paused !important; }
@keyframes classroomBonusFly { 0% { opacity: 0; transform: translate(-50%,-15px) scale(.65); } 25% { opacity: 1; transform: translate(-50%,-3px) scale(1.1); } 75% { opacity: 1; transform: translate(42px,90px) scale(1); } 100% { opacity: 0; transform: translate(48px,98px) scale(.8); } }
@keyframes classroomHeartMerge { 0% { transform: scale(.5); } 65% { transform: scale(1.25); } 100% { transform: scale(1); } }

.finish-card { width: min(630px,88vw); max-height: calc(100dvh - 24px); overflow-y: auto; }
.finish-hearts { color: #f04465; font-size: clamp(24px,6dvh,42px); line-height: 1; }
.classroom-finish-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.classroom-finish-stats div { display: grid; gap: 7px; padding: 9px 4px; border-radius: 14px; background: rgba(255,255,255,.65); }
.classroom-finish-stats dt { font-size: clamp(11px,2.5dvh,17px); color: #5d8faa; font-weight: 700; }
.classroom-finish-stats dd { margin: 0; color: #0875c9; font-size: clamp(20px,5dvh,32px); font-weight: 900; white-space: nowrap; }
.classroom-finish-stats #finishTotalHearts { color: #e43c60; }
.classroom-finish-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.finish-card .classroom-finish-actions .primary-button { width: 100%; min-width: 0; min-height: 38px; margin: 0; padding: 8px 12px; }
.finish-card .classroom-finish-actions .next-level-button { grid-column: 1 / -1; min-height: 48px; font-size: clamp(17px,3.3dvh,22px); }
@media (min-height: 601px) { .classroom-timeline { --timeline-button-size: 48px; } }
@media (orientation: portrait) {
  .classroom-timeline { --timeline-button-size: 44px; }
  .finish-card { width: min(630px,88dvh); max-height: calc(100dvw - 20px); padding: 10px 22px; }
  .classroom-finish-stats { margin: 9px 0; }
  .classroom-finish-stats dt { font-size: clamp(11px,2.5dvw,17px); }
  .classroom-finish-stats dd { font-size: clamp(20px,5dvw,32px); }
}