: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-border: rgba(255,255,255,.82);
  --control-blue-gradient: linear-gradient(145deg,#7cddff 0%,var(--green) 55%,#1fb2f0 100%);
  --ink: #171717;
  --muted: #5d8faa;
  --answer-card-height: 46vh;
  --answer-card-landscape-width: 61.34vh;
  --answer-card-square-size: min(34vw,46vh);
}

* { 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: var(--green-soft); color: var(--ink); user-select: none; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus, button:focus-visible { outline: none; }
button:focus-visible { outline: 4px solid rgba(53,127,230,.42); outline-offset: 3px; }

/* 趣课堂原版全屏框架 */
.lesson-shell {
  --caption-height: 104px;
  --caption-nav-size: 108px;
  --caption-nav-gap: clamp(14px,2vw,28px);
  --caption-side-margin: clamp(44px,5vw,84px);
  --caption-gap: 10px;
  --caption-bottom: 0px;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  border: 0;
  background: var(--green-soft);
  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, .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, .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, .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); }

.sound-bars { display: none; position: absolute; left: 50%; top: 50%; align-items: end; gap: 5px; height: 28px; transform: translate(-50%,-50%); }
.audio-button { position: relative; }
.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; }

.lesson-scene, .game-stage, .scene-canvas { position: absolute; inset: 0; overflow: hidden; }
.game-stage { display: block; }
.scene-canvas { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
.practice-stage {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  place-items: center;
  gap: clamp(20px,2.5vh,32px);
  padding: clamp(96px,10vh,118px) clamp(34px,4vw,68px) calc(var(--caption-height) + var(--caption-gap));
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.5) 0 9%,transparent 9.5%),
    radial-gradient(circle at 82% 72%,rgba(255,255,255,.35) 0 12%,transparent 12.5%),
    linear-gradient(145deg,#c8eeff 0%,#dff7ff 46%,#b9e7fb 100%);
}
.lesson-progress {
  position: relative;
  z-index: 12;
  width: min(760px,66vw,91vh);
  margin: 0 0 clamp(14px,2.2vh,22px);
  align-self: end;
  justify-self: center;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: min(2vh,18px);
  padding: min(1.25vh,12px) min(2vh,22px);
  border: min(.12vh,1px) solid rgba(255,255,255,.86);
  border-radius: 999px;
  background: linear-gradient(145deg,rgba(255,255,255,.82),rgba(198,239,255,.62));
  box-shadow: inset 0 1px 0 #fff,0 7px 20px rgba(3,111,183,.16);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transform: translateY(min(3vh,32px));
}
.progress-count {
  min-width: min(6.5vh,54px);
  color: #0875c9;
  font-size: min(2.25vh,19px);
  font-weight: 950;
  line-height: 1;
  text-align: center;
}
.progress-shell {
  display: block;
  height: min(1.6vh,14px);
  overflow: hidden;
  border: min(.24vh,2px) solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: rgba(87,166,205,.22);
  box-shadow: inset 0 2px 6px rgba(8,83,130,.18),0 2px 0 rgba(255,255,255,.7);
}
#progress-fill {
  display: block;
  width: 11.111%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#35bdf4,#54dca6 70%,#ffe05d);
  box-shadow: 0 0 14px rgba(42,190,243,.65);
  transition: width .42s cubic-bezier(.2,.8,.2,1);
}
.question-hint { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.activity { width: 100%; min-height: 0; display: grid; place-items: center; }

/* 与“趣巩固”共用同一套底部字幕条比例；字幕默认关闭。 */
.caption-pill {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: var(--caption-bottom);
  width: min(
    calc(100vw - ((var(--caption-side-margin) + var(--caption-nav-size) + var(--caption-nav-gap)) * 2)),
    calc(100vw - (env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px) + ((22px + var(--caption-nav-size) + var(--caption-nav-gap)) * 2)))
  );
  height: var(--caption-height);
  min-height: var(--caption-height);
  padding: 4px 24px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  align-content: 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,.12),rgba(67,190,244,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48),0 5px 16px rgba(3,111,183,.055);
  backdrop-filter: blur(1px) saturate(108%);
  -webkit-backdrop-filter: blur(1px) saturate(108%);
  transition: opacity .22s ease,transform .22s ease;
  pointer-events: none;
}
.caption-pill strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #171717;
  font-size: clamp(24px,2.5vw,34px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255,255,255,.98),0 0 8px rgba(255,255,255,.9);
}
.caption-pill.hide-copy { opacity: 0; visibility: hidden; transform: translate(-50%,8px) scale(.97); }

.choice-grid {
  --choice-size: var(--answer-card-square-size);
  width: auto;
  display: grid;
  grid-template-columns: repeat(2,var(--choice-size));
  justify-content: center;
  gap: clamp(24px,4vw,58px);
}
.choice-card {
  position: relative;
  width: var(--choice-size);
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.94);
  border-radius: 30px;
  padding: 9px;
  cursor: pointer;
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 0 #fff,0 10px 0 rgba(14,137,202,.24),0 20px 38px rgba(3,111,183,.24);
  backdrop-filter: blur(14px);
  transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.choice-card:hover:not(:disabled) { transform: translateY(-5px); border-color: #7cddff; }
.choice-card:disabled, .truth-button:disabled { cursor: wait; }
.choice-card:disabled:not(.selected), .truth-button:disabled:not(.selected) { transform: none; }
.choice-card.selected { border-color: #29b8f3; box-shadow: inset 0 1px 0 #fff,0 10px 0 #159fe6,0 20px 38px rgba(3,111,183,.3); transform: translateY(-4px); }
.choice-card.wrong { border-color: #ec5a4f; animation: shake .35s; }
.choice-card img { display: block; width: 100%; height: 100%; min-height: 0; aspect-ratio: 1 / 1; object-fit: contain; object-position: center center; border-radius: 21px; background: #fff; }
.choice-card .action-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 21px;
  background: #cceeff;
}
/* Only the paired video-choice questions use smaller tablet cards. The
   existing safe-height bounds remain authoritative; no other media or phone
   layout changes size. Portrait tablets use the rotated logical short side. */
@media (orientation: landscape) and (min-height: 601px),
       (orientation: portrait) and (min-width: 601px) {
  .choice-grid.paired-choice-cards { --choice-size: calc(var(--answer-card-square-size) * .72); }
  .paired-video-choices .choice-card .action-video { object-fit: cover; }
}
.choice-card > img[src$="thank-you-fullbody.png"] {
  padding: 1.5%;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  transform: scale(.82);
}
.choice-card > img[src*="transparent-cutouts"]:not([src$="thank-you-fullbody.png"]),
.video-frame > img[src*="transparent-cutouts"] { background: transparent; transform: scale(1.45); }
.action-animation {
  --cycle: 5.2s;
  --body-y: 42%;
  --body-scale: .58;
  --floor-scale: .34;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 21px;
  background: transparent;
  perspective: 900px;
}
.garment-socks { --body-y: 70%; --body-scale: .2; --floor-scale: .29; }
.garment-shoes { --body-y: 71%; --body-scale: .22; --floor-scale: .3; }
.garment-sweater { --body-y: 41%; --body-scale: .52; --floor-scale: .33; }
.garment-jacket { --body-y: 42%; --body-scale: .54; --floor-scale: .34; }
.leo-rig { position: absolute; z-index: 2; inset: 0; transform-origin: 50% 78%; will-change: transform; }
.action-animation.take-off .leo-rig { animation: leoTakeOff var(--cycle) cubic-bezier(.45,.02,.2,1) infinite; }
.action-animation.put-on .leo-rig { animation: leoPutOn var(--cycle) cubic-bezier(.45,.02,.2,1) infinite; }
.action-animation .leo-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 10px 8px rgba(31,102,139,.13));
  transform: scale(1.25);
  will-change: opacity;
}
.action-animation .state-1 { animation: leoStateOne var(--cycle) linear infinite; }
.action-animation .state-2 { animation: leoStateTwo var(--cycle) linear infinite; }
.action-animation .garment-sprite {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: var(--body-y);
  display: block;
  width: 42%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 9px 7px rgba(38,83,111,.2));
  will-change: left,top,opacity,transform;
}
.action-animation.take-off .garment-sprite { animation: garmentTakeOff var(--cycle) cubic-bezier(.32,.02,.22,1) infinite; }
.action-animation.put-on .garment-sprite { animation: garmentPutOn var(--cycle) cubic-bezier(.32,.02,.22,1) infinite; }
.clothing-floor-shadow { position: absolute; z-index: 1; left: 23%; top: 84%; width: 28%; height: 5%; border-radius: 50%; background: rgba(35,103,137,.18); filter: blur(5px); transform: translate(-50%,-50%) scale(.5); }
.take-off .clothing-floor-shadow { animation: floorShadowIn var(--cycle) ease-in-out infinite; }
.put-on .clothing-floor-shadow { animation: floorShadowOut var(--cycle) ease-in-out infinite; }
.motion-trail { position: absolute; z-index: 3; left: 31%; top: 57%; width: 36%; height: 28%; opacity: 0; transform: rotate(-24deg); }
.motion-trail i { position: absolute; inset: auto 0 0 auto; display: block; width: 100%; height: 65%; border: 3px solid rgba(63,188,240,.34); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.motion-trail i:nth-child(2) { width: 76%; height: 52%; opacity: .72; }
.motion-trail i:nth-child(3) { width: 52%; height: 38%; opacity: .45; }
.take-off .motion-trail { animation: trailTakeOff var(--cycle) ease-out infinite; }
.put-on .motion-trail { animation: trailPutOn var(--cycle) ease-out infinite; transform: rotate(156deg); }
.video-activity, .voice-layout {
  width: min(1400px,92vw);
  display: grid;
  grid-template-columns: minmax(180px,280px) minmax(0,1fr) minmax(180px,280px);
  align-items: center;
  gap: clamp(12px,1.5vw,24px);
}
.video-activity > .video-frame,
.voice-layout > .video-frame { grid-column: 2; justify-self: center; }
.video-activity > .true-false,
.voice-layout > .voice-panel { grid-column: 3; justify-self: center; }
.video-frame { position: relative; overflow: hidden; border: 5px solid rgba(255,255,255,.94); border-radius: 30px; background: #fff; box-shadow: inset 0 1px 0 #fff,0 10px 0 rgba(14,137,202,.24),0 20px 38px rgba(3,111,183,.24); }
.video-frame video, .video-frame > img { display: block; width: 100%; max-height: min(58vh,560px); object-fit: contain; object-position: center center; background: #d8f5ff; }
.video-frame.has-action-video,
.video-frame.has-character-cutout {
  justify-self: center;
  width: min(100%,var(--answer-card-landscape-width));
  max-height: var(--answer-card-height);
  height: auto;
  aspect-ratio: 4 / 3;
}
.video-frame.has-action-video .action-video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.video-frame.has-character-cutout { background: transparent; }
.video-frame.has-character-cutout > img,
.video-frame.has-character-cutout > img[src*="transparent-cutouts"] {
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 1.5%;
  object-fit: contain;
  background: transparent;
  transform: none;
}
.video-frame .action-animation { height: min(58vh,560px); min-height: 320px; }
.true-false { display: grid; gap: 24px; }
.truth-button { width: clamp(96px,8.8vw,126px); aspect-ratio: 1; border: 5px solid rgba(255,255,255,.94); border-radius: 50%; cursor: pointer; color: #fff; font-size: clamp(46px,5.7vw,68px); font-weight: 950; box-shadow: inset 0 1px 0 #fff,0 9px 0 var(--shadow),0 16px 27px rgba(3,111,183,.2); transition: transform .15s ease; }
.truth-button:hover:not(:disabled) { transform: translateY(-5px); }
.truth-button.selected { outline: 7px solid rgba(255,255,255,.75); transform: scale(1.06); }
.truth-button.wrong { animation: shake .35s; }
.truth-button.true { --shadow: #27a976; background: #4fd099; }
.truth-button.false { --shadow: #d94c64; background: #ff6b82; }

.voice-panel { min-width: 180px; display: grid; justify-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.mic-button { width: 100px; height: 100px; border: 1px solid var(--glass-border); border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: var(--control-blue-gradient); box-shadow: inset 0 1px 0 #fff,0 8px 0 rgba(14,137,202,.34),0 14px 24px rgba(3,111,183,.3); font-size: 43px; }
.mic-button:disabled { cursor: wait; filter: grayscale(.55); opacity: .48; box-shadow: inset 0 1px 0 #fff,0 4px 0 rgba(14,137,202,.2),0 9px 18px rgba(3,111,183,.16); }
.mic-button.listening { animation: softPulse .7s infinite alternate; }
.mic-button svg { display: block; width: 50%; height: 50%; fill: currentColor; pointer-events: none; }
.voice-retry-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.voice-retry-actions[hidden] { display: none; }
.voice-retry-actions button { min-height: 44px; min-width: 80px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.85); border-radius: 15px; background: #d2f1fc; color: #086bb0; font-size: 13px; font-weight: 800; cursor: pointer; }
.voice-retry-actions button:disabled { cursor: wait; opacity: .55; }
.voice-label { margin: 14px 0 5px; color: #0875c9; font-size: 19px; font-weight: 950; }
.voice-help { margin: 0; color: #5d8faa; font-size: 13px; line-height: 1.45; }
.voice-transcript { min-height: 20px; margin: 9px 0 0; color: #0875c9; font-size: 13px; font-weight: 850; }

@keyframes leoStateOne { 0%,42% { opacity: 1; } 51%,92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes leoStateTwo { 0%,42% { opacity: 0; } 51%,92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes leoTakeOff {
  0%,17%,88%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  27% { transform: translateY(-1.5%) rotate(-2.5deg) scale(1.015); }
  40% { transform: translateY(1%) rotate(3deg) scale(.99); }
  54% { transform: translateY(0) rotate(-1deg) scale(1.006); }
  64% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes leoPutOn {
  0%,14%,88%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  24% { transform: translateY(2.5%) rotate(-3deg) scale(.99); }
  38% { transform: translateY(-1%) rotate(2deg) scale(1.012); }
  54% { transform: translateY(0) rotate(-1deg) scale(1.006); }
  64% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes garmentTakeOff {
  0%,28% { left: 50%; top: var(--body-y); opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(var(--body-scale)); }
  36% { left: 50%; top: var(--body-y); opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(var(--body-scale)); }
  52% { left: 43%; top: 52%; opacity: 1; transform: translate(-50%,-50%) rotate(72deg) scale(var(--body-scale)); }
  68% { left: 23%; top: 79%; opacity: 1; transform: translate(-50%,-50%) rotate(315deg) scale(var(--floor-scale)); }
  73% { left: 23%; top: 73%; opacity: 1; transform: translate(-50%,-50%) rotate(337deg) scale(var(--floor-scale)); }
  80%,91% { left: 23%; top: 79%; opacity: 1; transform: translate(-50%,-50%) rotate(350deg) scale(var(--floor-scale)); }
  100% { left: 23%; top: 79%; opacity: 0; transform: translate(-50%,-50%) rotate(350deg) scale(var(--floor-scale)); }
}
@keyframes garmentPutOn {
  0%,13% { left: 23%; top: 79%; opacity: 1; transform: translate(-50%,-50%) rotate(-10deg) scale(var(--floor-scale)); }
  20% { left: 23%; top: 73%; opacity: 1; transform: translate(-50%,-50%) rotate(-2deg) scale(var(--floor-scale)); }
  36% { left: 42%; top: 55%; opacity: 1; transform: translate(-50%,-50%) rotate(-65deg) scale(var(--body-scale)); }
  50% { left: 50%; top: var(--body-y); opacity: 1; transform: translate(-50%,-50%) rotate(4deg) scale(var(--body-scale)); }
  58%,92% { left: 50%; top: var(--body-y); opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(var(--body-scale)); }
  100% { left: 23%; top: 79%; opacity: 0; transform: translate(-50%,-50%) rotate(-10deg) scale(var(--floor-scale)); }
}
@keyframes floorShadowIn { 0%,54% { opacity: 0; transform: translate(-50%,-50%) scale(.35); } 72%,91% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; } }
@keyframes floorShadowOut { 0%,17% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 38%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.35); } }
@keyframes trailTakeOff { 0%,35%,68%,100% { opacity: 0; } 45%,57% { opacity: 1; } }
@keyframes trailPutOn { 0%,18%,52%,100% { opacity: 0; } 29%,42% { opacity: 1; } }

.status-message { position: absolute; z-index: 12; left: 50%; bottom: 142px; width: min(760px,70vw); margin: 0; transform: translateX(-50%); color: #d64d43; font-size: clamp(14px,1.6vw,21px); font-weight: 950; text-align: center; text-shadow: 0 1px 2px rgba(255,255,255,.95); }

/* 趣课堂原版菜单 */
.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; }

.feedback-layer, .finish-layer { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: max(13px,2.5vw); overflow: hidden; background: rgba(3,73,119,.28); backdrop-filter: blur(10px) saturate(140%); }
.feedback-layer { --cheer-color:#ffd43b; --cheer-glow:rgba(255,196,34,.68); }
.feedback-layer[data-level="2"] { --cheer-color:#ff9b45; --cheer-glow:rgba(255,126,52,.68); }
.feedback-layer[data-level="3"] { --cheer-color:#ff6f91; --cheer-glow:rgba(255,84,133,.72); }
.feedback-layer[data-level="4"] { --cheer-color:#9b76ff; --cheer-glow:rgba(118,80,255,.72); }
.feedback-layer[data-level="5"] { --cheer-color:#54d8ff; --cheer-glow:rgba(29,188,255,.72); }
.feedback-layer[data-level="6"] { --cheer-color:#55dda4; --cheer-glow:rgba(33,211,143,.72); }
.feedback-layer[data-level="7"] { --cheer-color:#6cf0ff; --cheer-glow:rgba(48,221,255,.78); }
.feedback-layer[data-level="8"] { --cheer-color:#ffe356; --cheer-glow:rgba(255,215,48,.84); }
.feedback-layer[data-level="9"] { --cheer-color:#fff3a0; --cheer-glow:rgba(255,210,32,.96); background:radial-gradient(circle,rgba(54,191,255,.15),rgba(3,49,110,.52)); }
.feedback-card, .finish-card { position: relative; width: min(520px,86vw); padding: clamp(24px,4vw,40px); border: 1px solid rgba(255,255,255,.9); border-radius: clamp(24px,3.7vw,48px); background: linear-gradient(145deg,rgba(255,255,255,.94),rgba(205,242,255,.82)); box-shadow: inset 0 1px 0 #fff,0 0 var(--cheer-radius,22px) var(--cheer-glow,rgba(2,83,139,.18)),0 25px 70px rgba(2,83,139,.32); text-align: center; animation: cheerCard .55s cubic-bezier(.2,.9,.2,1.2); }
.feedback-card { width: min(520px,62.35vh,86vw); padding: clamp(12px,4.8vh,40px); border-radius: clamp(16px,5.3vh,48px); }
.feedback-icon { position:relative; z-index:2; color: var(--cheer-color); font-size: clamp(30px,9.8vh,82px); letter-spacing:.06em; filter:drop-shadow(0 min(5px,.6vh) 0 rgba(206,129,0,.18)) drop-shadow(0 0 min(18px,2.2vh) var(--cheer-glow)); animation: cheerIcon .72s cubic-bezier(.18,.88,.25,1.3); }
.feedback-card p { margin: min(5px,.6vh) 0 min(12px,1.45vh); color: #0875c9; font-size: clamp(22px,6.45vh,54px); font-weight: 950; }
.feedback-layer[data-level="8"] .feedback-card p,
.feedback-layer[data-level="9"] .feedback-card p { background:linear-gradient(90deg,#0875c9,#8b55ef,#ef5e8b,#0875c9); background-size:220% auto; color:transparent; -webkit-background-clip:text; background-clip:text; animation:cheerText 1s linear infinite; }
.cheer-rings { position:absolute; z-index:0; left:50%; top:42%; width:min(110px,13.2vh); height:min(110px,13.2vh); transform:translate(-50%,-50%); pointer-events:none; }
.cheer-rings i { position:absolute; inset:0; border:min(4px,.48vh) solid var(--cheer-color); border-radius:50%; opacity:0; animation:cheerRing 1s ease-out forwards; }
.cheer-rings i:nth-child(2) { animation-delay:.12s; }
.cheer-rings i:nth-child(3) { animation-delay:.24s; }
.cheer-particles { position:absolute; z-index:3; left:50%; top:42%; width:1px; height:1px; pointer-events:none; }
.cheer-particles i { position:absolute; left:0; top:0; width:min(10px,1.2vh); height:min(10px,1.2vh); background:var(--particle); transform:translate(-50%,-50%) rotate(var(--angle)); opacity:0; animation:cheerParticle .95s cubic-bezier(.12,.72,.26,1) var(--delay) forwards; }
.cheer-particles .star-particle { width:min(16px,1.92vh); height:min(16px,1.92vh); background:transparent; color:var(--particle); }
.cheer-particles .star-particle::before { content:"★"; position:absolute; inset:0; font-size:min(16px,1.92vh); line-height:1; }
.feedback-layer[data-level="1"] .cheer-rings i:nth-child(n+2) { display:none; }
.feedback-layer[data-level="2"] .cheer-rings i:nth-child(3) { display:none; }
.feedback-layer[data-level="8"] .feedback-card,
.feedback-layer[data-level="9"] .feedback-card { animation:cheerCard .55s cubic-bezier(.2,.9,.2,1.2), championPulse .68s ease-in-out .55s infinite alternate; }
.heart-reward { display: flex; justify-content: center; gap:min(8px,.96vh); color: #ff6f91; font-size:min(31px,3.72vh); }
.finish-card { width: min(520px,66vh,86vw); padding: min(2.8vh,24px) min(4.2vh,36px); border-radius: min(4.4vh,40px); }
.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; }
.stars { margin: 0; color: #ffc329; font-size: clamp(27px,7vh,58px); line-height: 1; letter-spacing: .12em; }
.final-score { color: #ec5a79; font-weight: 900; }
.finish-card .next-countdown { margin: min(1.5vh,12px) 0 min(1.2vh,10px); color: #5d8faa; font-size: clamp(11px,2.2vh,18px); font-weight: 850; }
.next-countdown strong { color: #0875c9; font-size: 1.18em; }
.finish-actions { display: flex; justify-content: center; gap: min(1.8vh,15px); }
.primary-button { min-width: min(19vh,150px); min-height: min(6.7vh,54px); padding: min(1.3vh,11px) min(3.3vh,27px); 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 min(.75vh,6px) 0 rgba(14,137,202,.3),0 min(1.35vh,11px) min(2.6vh,21px) rgba(3,111,183,.28); font-size: clamp(12px,2.5vh,19px); font-weight: 950; cursor: pointer; }
.next-level-button { color: #fff; background: var(--control-blue-gradient); }
.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 cheerCard { 0% { opacity:0; transform:scale(.58) rotate(-5deg); } 62% { transform:scale(1.08) rotate(2deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes cheerIcon { 0% { opacity:0; transform:scale(.2) rotate(-28deg); } 55% { opacity:1; transform:scale(1.28) rotate(8deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes cheerRing { 0% { opacity:.85; transform:scale(.3); } 100% { opacity:0; transform:scale(3.4); } }
@keyframes cheerParticle { 0% { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(.3); } 22% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(1.25) rotate(280deg); } }
@keyframes championPulse { to { transform:scale(1.025); box-shadow:inset 0 1px 0 #fff,0 0 70px var(--cheer-glow),0 28px 78px rgba(2,83,139,.38); } }
@keyframes cheerText { to { background-position:220% center; } }
@keyframes shake { 25% { transform: translateX(-9px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
@keyframes softPulse { 50% { transform: scale(1.055); } }
@keyframes bars { to { height: 100%; } }

@media (max-height: 600px), (max-width: 720px) {
  .lesson-shell { --caption-height: 56px; --caption-nav-size: 58px; --caption-nav-gap: 8px; --caption-side-margin: 36px; --caption-gap: 6px; }
  .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; }
  .practice-stage { padding: 56px 34px calc(var(--caption-height) + var(--caption-gap)); }
  .choice-grid { width: auto; gap: clamp(18px,3vw,28px); }
  .choice-card { border-radius: 20px; padding: 6px; }
  .choice-card img { height: 100%; min-height: 0; border-radius: 15px; }
  .choice-card .action-video { height: 100%; min-height: 0; aspect-ratio: 1 / 1; border-radius: 15px; }
  .choice-card .action-animation { height: 100%; min-height: 0; aspect-ratio: 1 / 1; border-radius: 15px; }
  .choice-card .leo-state { height: 100%; min-height: 0; border-radius: 0; }
  .choice-card .garment-sprite { height: auto; min-height: 0; border-radius: 0; }
  .video-frame .action-animation { height: min(55vh,330px); min-height: 200px; }
  .video-activity, .voice-layout { width: min(760px,86vw); gap: 24px; }
  .video-activity, .voice-layout { grid-template-columns: minmax(110px,185px) minmax(0,1fr) minmax(110px,185px); gap: 12px; }
  .video-frame video, .video-frame > img { max-height: 48vh; }
  .video-frame.has-action-video, .video-frame.has-character-cutout { width: min(100%,var(--answer-card-landscape-width)); height: auto; }
  .truth-button { width: 70px; }
  .voice-panel { min-width: 110px; padding: 0; }
  .mic-button { width: 70px; height: 70px; font-size: 31px; }
  .voice-label { margin: 9px 0 2px; font-size: 15px; }
  .voice-help, .voice-transcript { font-size: 10px; }
  .status-message { bottom: 24px; }
  .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; }
  .caption-pill { padding: 4px 10px; }
  .caption-pill strong { font-size: clamp(16px,2.6vw,22px); }
}

@media (orientation: landscape) and (min-width: 721px) and (max-width: 1600px) and (min-height: 650px) and (max-aspect-ratio: 8/5) {
  .lesson-shell { --caption-nav-size: 90px; }
  .video-activity, .voice-layout {
    width: min(1400px,94vw);
    grid-template-columns: minmax(72px,140px) minmax(0,720px) minmax(120px,190px);
    justify-content: center;
  }
}

@media (orientation: portrait) {
  .lesson-shell, .feedback-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; } }

.caption-pill strong { display: block; -webkit-line-clamp: unset; text-overflow: clip; overflow: visible; }
.action-video::-webkit-media-controls,
.action-video::-webkit-media-controls-overlay-play-button,
.action-video::-webkit-media-controls-start-playback-button { display: none !important; }
.mic-button.listening:not(:disabled) { background: linear-gradient(145deg,#ff8b77,#ef454f); }

/* A streak earns one red heart, not an accumulating star icon. */
.feedback-icon {
  color: #ef4264;
  font-size: clamp(32px, 8dvh, 58px);
  letter-spacing: 0;
  filter: drop-shadow(0 3px 0 rgba(170,24,64,.16));
  animation: none;
  pointer-events: none;
}
.feedback-icon[hidden] { display: none !important; }
.heart-reward { color: #ef4264; }
.heart-reward > .bonus-heart-destination { opacity: 0; }
.heart-reward > .bonus-heart-destination.arrived { opacity: 1; animation: softPulse .3s ease; }
.cheer-particles .heart-particle { background: transparent; color: #ef4264; }
.cheer-particles .heart-particle::before { content: "♥"; position: absolute; inset: 0; font-size: min(16px,1.92dvh); line-height: 1; }
.finish-hearts { color: #ef4264; font-size: clamp(24px, 6dvh, 44px); line-height: 1; letter-spacing: .12em; }
.finish-card { width: min(660px, 90vw); max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px); }
.finish-statistics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(6px,1vw,12px); margin: clamp(8px,2dvh,18px) 0; }
.finish-statistics p { display: grid; gap: 3px; padding: clamp(6px,1.5dvh,12px) 4px; margin: 0; border-radius: 14px; background: rgba(255,255,255,.58); }
.finish-statistics strong { color: #0875c9; font-size: clamp(18px,4.5dvh,32px); }
.finish-statistics span { color: #5d8faa; font-size: clamp(11px,2.5dvh,16px); }
.finish-statistics .final-score strong, .finish-statistics .final-score span { color: #df3f63; }
.finish-actions { display: grid; grid-template-columns: 1fr 1fr 1.35fr; align-items: center; gap: clamp(6px,1vw,12px); }
.finish-actions .primary-button { min-width: 0; min-height: clamp(36px,7dvh,52px); padding: 7px 6px; font-size: clamp(12px,2.6dvh,18px); }
.finish-actions .next-level-button { min-height: clamp(42px,8dvh,60px); font-size: clamp(15px,3dvh,21px); }