/* 关卡外壳 */
.level { background: linear-gradient(#bfe9ff, #e8f8ff 40%, #fff6dc); }
.lv-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 6px; }
.lv-head .icon-btn { flex: none; font-size: 36px; font-weight: 900; }
.lv-steps { flex: 1; display: flex; justify-content: space-between; margin: 0; padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .75); list-style: none; }
.lv-steps li { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; opacity: .45; filter: grayscale(1); transition: all .3s; }
.lv-steps span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; font-size: 18px; }
.lv-steps small { font-size: 10px; font-weight: 800; }
.lv-steps li.done { opacity: 1; filter: none; }
.lv-steps li.done span { background: var(--grass); }
.lv-steps li.now { opacity: 1; filter: none; transform: scale(1.12); }
.lv-steps li.now span { background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 197, 49, .35); }
.lv-guide { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 6px 16px; }
.lv-lark { flex: none; width: 82px; }
.lv-guide .bubble { flex: 1; font-size: 17px; }
.lv-stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 6px 18px 24px; overflow: hidden; }
.round-dots { display: flex; gap: 8px; }
.round-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(59, 42, 31, .15); }
.round-dots i.on { background: var(--grass); }
.round-dots i.now { width: 28px; border-radius: 6px; background: var(--sun); }
.voice-caption { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.right { animation: pop-in .4s cubic-bezier(.2, .9, .3, 1.5); }

/* 找一找 */
.scene { position: relative; width: 100%; border-radius: 28px; overflow: hidden; box-shadow: 0 8px 0 rgba(59, 42, 31, .1); }
.scene-art { display: block; width: 100%; height: auto; }
.spot { position: absolute; width: 21%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.spot b { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; font-size: 42px; color: var(--coral); opacity: 0; transform: translate(-50%, -50%) scale(.2); transition: all .4s cubic-bezier(.2, .9, .3, 1.5); box-shadow: 0 5px 0 rgba(0, 0, 0, .12); }
.spot.found b { opacity: 1; transform: translate(-50%, -110%) scale(1); }
.spot.hint::after { content: ""; position: absolute; inset: 0; border: 5px dashed #fff; border-radius: 50%; animation: spin 6s linear infinite, halo-ring 1.2s ease-in-out infinite; }
@keyframes halo-ring { 50% { opacity: .3; } }
.tray { display: flex; gap: 12px; }
.slot { display: grid; place-items: center; width: 64px; height: 64px; border: 4px dashed #c9b994; border-radius: 20px; font-size: 38px; color: transparent; }
.slot.filled { border: 0; background: #fff; color: var(--coral); box-shadow: 0 5px 0 #e3d6bf; animation: pop-in .4s cubic-bezier(.2, .9, .3, 1.5); }

/* 听一听 */
.speaker { position: relative; display: grid; place-items: center; width: 116px; height: 116px; margin-top: 8px; border-radius: 50%; background: var(--coral); font-size: 52px; box-shadow: 0 8px 0 var(--coral-dark); }
.speaker:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--coral-dark); }
.speaker i { position: absolute; inset: 0; border: 4px solid var(--coral); border-radius: 50%; opacity: 0; }
.speaker.playing i { animation: ripple 1s ease-out; }
.speaker.playing i + i { animation-delay: .3s; }
@keyframes ripple { from { opacity: .8; } to { opacity: 0; transform: scale(1.7); } }
.balloons { display: flex; justify-content: center; gap: 14px; margin-top: auto; padding-bottom: 20px; }
.balloon { position: relative; display: grid; place-items: center; width: 96px; height: 112px; border-radius: 50% 50% 46% 46%; font-size: 54px; color: #fff; background: var(--sea); box-shadow: inset -10px -8px 0 rgba(0, 0, 0, .1); animation: float 3s ease-in-out calc(var(--c) * -1s) infinite; }
.balloon:nth-child(2) { background: var(--berry); }
.balloon:nth-child(3) { background: var(--violet); }
.balloon i { position: absolute; left: 50%; top: 100%; width: 2px; height: 28px; background: #a59a85; }
.balloon.wrong { opacity: .45; }
.balloon.right { animation: fly-up 1s ease-in forwards; }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes fly-up { 30% { transform: scale(1.2); } to { transform: translateY(-520px); } }

/* 画声调 */
.syllable-card { display: flex; align-items: baseline; gap: 2px; padding: 4px 34px 14px; border-radius: 30px; background: #fff; font-size: 96px; line-height: 1.15; box-shadow: 0 8px 0 #e3d6bf; }
.syllable-card .ini, .merged-card .ini, .piece.ini { color: var(--sea); }
.syllable-card .fin, .merged-card .fin, .target.fin { color: var(--violet); }
.tone-pad { position: relative; width: 100%; height: 150px; border: 4px dashed #c9b994; border-radius: 26px; background: #fffdf6; touch-action: none; }
.tone-pad svg { width: 100%; height: 100%; }
.tone-pad.drawing, .tone-pad.right { border-style: solid; border-color: var(--sun); }
.tone-guide { fill: none; stroke: #ffc7d8; stroke-width: 8; stroke-dasharray: 6 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tone-ink { fill: none; stroke: var(--berry); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pad-tip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 800; color: #c9b994; pointer-events: none; }
.tone-pad.drawing .pad-tip, .tone-pad.right .pad-tip { display: none; }
.tone-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.tone-key { display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 #e3d6bf; }
.tone-key b { display: block; width: 44px; height: 32px; }
.tone-key svg { width: 100%; height: 100%; fill: none; stroke: var(--berry); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tone-key small { font-size: 13px; font-weight: 800; }

/* 拼一拼 */
.word-card { display: flex; flex-direction: column; align-items: center; width: 70%; padding: 14px; border-radius: 28px; background: #fff; box-shadow: 0 8px 0 #e3d6bf; }
.word-pic { font-size: 72px; line-height: 1.1; }
.word-py { font-size: 40px; color: var(--coral); }
.word-cn { font-size: 22px; font-weight: 900; }
.blend-zone { display: flex; align-items: center; justify-content: center; gap: 26px; width: 100%; min-height: 200px; }
.pieces { display: flex; flex-direction: column; gap: 16px; }
.piece { width: 92px; height: 92px; border-radius: 26px; background: #e4f5ff; font-size: 58px; box-shadow: 0 6px 0 #a9d9f2; touch-action: none; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.piece.dragging { z-index: 5; transition: none; box-shadow: 0 14px 18px rgba(0, 0, 0, .18); }
.piece.wrong { opacity: .45; }
.target { display: grid; place-items: center; width: 124px; height: 124px; border: 5px dashed var(--violet); border-radius: 30px; background: #f1ecff; font-size: 64px; animation: float 2.4s ease-in-out infinite; }
.merged-card { display: flex; gap: 4px; padding: 10px 30px; border-radius: 30px; background: #fff; font-size: 80px; box-shadow: 0 8px 0 #e3d6bf; animation: merge .6s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes merge { from { transform: scale(.4) rotate(-10deg); } 60% { transform: scale(1.15); } }
.blend-tip { font-size: 15px; font-weight: 700; color: var(--ink-soft); text-align: center; }

/* 三拼示范和介母显示。 */
.target { display: flex; align-items: center; justify-content: center; gap: 2px; }
.medial { color: var(--ink-soft); }
.blend-school { width: 100%; max-width: 580px; margin-top: 18px; padding: 26px 14px; border-radius: 30px; background: #fff; text-align: center; box-shadow: 0 8px 0 #e3d6bf; }
.blend-school h3 { margin-bottom: 24px; font-size: 24px; color: var(--coral); }
.blend-example { display: flex; align-items: baseline; justify-content: center; gap: 7px; width: 100%; min-height: 88px; padding: 10px 0; font-size: 22px; border-radius: 20px; background: #fff6dd; }
.blend-example .py { font-size: 40px; }
.blend-example .ini { color: var(--sea); }
.blend-example .fin, .blend-example b { color: var(--violet); }
.blend-school p { margin-top: 24px; color: var(--ink-soft); font-size: 16px; font-weight: 800; }
.blend-start { width: 100%; max-width: 360px; margin-top: auto; }

/* 拼写练习使用完整的正确音节和省点前的组合进行选择。 */
.spelling-card { width: 100%; max-width: 580px; padding: 26px 14px; border-radius: 30px; background: #fff; text-align: center; box-shadow: 0 8px 0 #e3d6bf; }
.spelling-card h3 { font-size: 24px; color: var(--coral); }
.spell-equation { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding: 24px 0; font-size: 24px; }
.spell-equation .py { font-size: 56px; color: var(--sea); }
.spell-equation .spell-vowel { color: var(--violet); }
.spell-equation .spell-result { min-width: 76px; color: var(--coral); }
.spell-equation.solved .spell-result { animation: pop-in .4s ease-out; }
.spelling-card p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.spelling-card p .py { font-size: 20px; }
.spell-prompt { font-size: 16px; font-weight: 800; color: var(--ink-soft); }
.spell-choices { display: flex; justify-content: center; gap: 18px; width: 100%; max-width: 420px; margin-top: auto; padding-bottom: 12px; }
.spell-choice { flex: 1; min-width: 0; min-height: 110px; border-radius: 26px; background: #fff; color: var(--violet); font-size: 54px; box-shadow: 0 7px 0 #e3d6bf; }
.spell-choice.wrong { opacity: .45; }
.spell-choice.right { opacity: 1; background: var(--sun); color: var(--ink); box-shadow: 0 7px 0 var(--sun-dark); }
.lv-L6 .lv-steps { padding-inline: 2px; }
.lv-L6 .lv-steps li { flex: 1; }
.lv-L6 .lv-steps small { font-size: clamp(9px, 2.55vw, 10px); white-space: nowrap; }

@media (max-height: 700px) {
  [data-layout="tall"] .blend-school, [data-layout="tall"] .spelling-card { margin-top: 0; padding: 20px 10px; }
  [data-layout="tall"] .blend-example { gap: 5px; }
  [data-layout="tall"] .blend-example .py { font-size: 34px; }
  [data-layout="tall"] .spell-equation { padding: 20px 0; gap: 7px; }
  [data-layout="tall"] .spell-equation .py { font-size: 48px; }
  [data-layout="tall"] .spell-equation .spell-result { min-width: 68px; }
  [data-layout="tall"] .spell-choice { min-height: 86px; font-size: 46px; }
}

/* 唱儿歌 */
.rhyme-card { width: 100%; padding: 18px 12px 22px; border-radius: 30px; background: #fff; text-align: center; box-shadow: 0 8px 0 #e3d6bf; }
.rhyme-card h3 { margin-bottom: 10px; font-size: 22px; font-weight: 900; color: var(--coral); }
.rhyme-line { display: flex; justify-content: center; gap: 4px; padding: 6px 0; border-radius: 20px; opacity: .45; transition: all .3s; }
.rhyme-line.sung { opacity: 1; }
.rhyme-line.singing { background: #fff5cc; transform: scale(1.06); }
.char { width: 54px; font-size: 32px; font-weight: 900; }
.char rt { font-size: 15px; color: var(--ink-soft); }
.char.focus { color: var(--coral); }
.char.focus rt { color: var(--sea); font-weight: 400; }
.singing .char.focus { animation: bounce .5s ease-in-out 2; }
.char.pop { animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.6); }
.collect { width: 100%; margin-top: auto; }
.voice-caption.masked { filter: blur(6px); opacity: .6; }
.voice-caption { transition: filter .2s, opacity .2s; }
.speaker-tip { margin-top: -8px; font-size: 15px; font-weight: 800; color: var(--coral); }
.voice-caption.masked { cursor: pointer; }

/* 看口型 */
.mouth-lark { width: 210px; margin-top: 4px; filter: drop-shadow(0 8px 0 rgba(59, 42, 31, .08)); }
.letter-cards { display: flex; gap: 16px; margin-top: auto; padding-bottom: 16px; }
.letter-card { width: 96px; height: 104px; border-radius: 28px; background: #fff; font-size: 66px; color: var(--violet); box-shadow: 0 7px 0 #e3d6bf; }
.letter-card:nth-child(2) { color: var(--coral); }
.letter-card:nth-child(3) { color: var(--sea); }
.letter-card.wrong { opacity: .45; }
.letter-card.right { background: var(--sun); color: #fff; box-shadow: 0 7px 0 var(--sun-dark); }

/* 声母课在窄屏中收拢选项，并允许短屏滚动到完整操作区。 */
.level .lv-steps, .level .lv-steps li { min-width: 0; }
.level .lv-stage { overflow-y: auto; }
.level .lv-stage > * { flex-shrink: 0; }
.level .tray { gap: 8px; }
.level .balloons { width: 100%; max-width: 340px; gap: 12px; }
.level .balloon { flex: 1; min-width: 0; }

@media (max-height: 700px) {
  [data-layout="tall"] .level .lv-head { padding: 8px 10px 4px; gap: 8px; }
  [data-layout="tall"] .level .lv-head .icon-btn { width: 44px; height: 44px; }
  [data-layout="tall"] .level .lv-steps span { width: 28px; height: 28px; font-size: 16px; }
  [data-layout="tall"] .level .lv-guide { min-height: 72px; padding: 4px 12px; gap: 8px; }
  [data-layout="tall"] .level .lv-lark { width: 58px; }
  [data-layout="tall"] .level .lv-guide .bubble { font-size: 14px; padding: 10px 12px; }
  [data-layout="tall"] .level .lv-stage { padding: 4px 12px 14px; gap: 10px; }
  [data-layout="tall"] .level .speaker { width: 84px; height: 84px; font-size: 40px; }
  [data-layout="tall"] .level .balloon { height: 92px; font-size: 46px; }
  [data-layout="tall"] .level .syllable-card { font-size: 60px; }
  [data-layout="tall"] .level .tone-pad { height: 80px; }
  [data-layout="tall"] .level .word-card { display: grid; grid-template-columns: 64px 1fr; width: 100%; padding: 8px 12px; text-align: center; }
  [data-layout="tall"] .level .word-pic { grid-row: 1 / 3; font-size: 52px; }
  [data-layout="tall"] .level .word-py { font-size: 32px; line-height: 1.1; }
  [data-layout="tall"] .level .word-cn { font-size: 18px; }
  [data-layout="tall"] .level .blend-zone { min-height: 124px; }
  [data-layout="tall"] .level .pieces { gap: 12px; }
  [data-layout="tall"] .level .piece { width: 68px; height: 56px; border-radius: 18px; font-size: 40px; }
  [data-layout="tall"] .level .target { width: 92px; height: 92px; font-size: 48px; }
  [data-layout="tall"] .level .merged-card { font-size: 60px; }
  [data-layout="tall"] .level .blend-tip { font-size: 13px; }
}

/* 第二课的字母分类、口型提示与四声试听。 */
.lv-L2 .lv-steps li { flex: 1; min-width: 0; }
.lv-L2 .lv-steps { min-width: 0; padding-inline: 2px; }
.lv-L2 .lv-steps small { font-size: clamp(9px, 2.55vw, 10px); white-space: nowrap; }
.lv-L2 .lv-stage { overflow-y: auto; }
.lv-L2 .lv-stage > * { flex-shrink: 0; }
.lv-L2 .tray { width: 100%; justify-content: center; gap: 14px; }
.tray-group { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tray-group small { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.tray-group > div { display: flex; gap: 6px; }
.tray-group .slot { width: 46px; height: 52px; font-size: 34px; border-radius: 16px; }
.mouth-demo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mouth-tip { max-width: 280px; font-size: 16px; font-weight: 800; text-align: center; color: var(--ink-soft); }
.lv-L2 .letter-cards, .lv-L2 .balloons { width: 100%; max-width: 340px; gap: 12px; }
.lv-L2 .letter-card, .lv-L2 .balloon { flex: 1; min-width: 0; }
.tone-school { width: 100%; max-width: 460px; padding: 20px 14px; border-radius: 28px; background: #fff; box-shadow: 0 7px 0 #e3d6bf; }
.tone-school h3 { margin-bottom: 18px; text-align: center; color: var(--coral); }
.tone-headings, .tone-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.tone-headings { margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.tone-row { margin-bottom: 12px; }
.tone-sound { min-height: 54px; border-radius: 15px; background: #f2edff; color: #7250bc; font-size: 36px; }
.tone-school > p { margin-top: 16px; text-align: center; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.tone-school > p b { font-size: 24px; color: var(--violet); }
.tone-start { width: 100%; max-width: 360px; margin-top: auto; }

/* 整体认读始终展示完整音节，四声按钮可反复试听。 */
.whole-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 460px; padding: 22px 16px; border-radius: 30px; background: #fff; box-shadow: 0 8px 0 #e3d6bf; }
.whole-card h3 { font-size: 18px; color: var(--ink-soft); }
.whole-sound { min-width: 150px; padding: 0 12px; border-radius: 22px; background: #f1ecff; color: #7952c2; font-size: 92px; line-height: 1.25; }
.whole-vowel { color: var(--ink-soft); font-size: 15px; }
.whole-vowel b { padding-left: 6px; color: var(--coral); font-size: 30px; }
.whole-rule { min-height: 28px; font-size: 16px; font-weight: 800; text-align: center; line-height: 1.6; }
.whole-tones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; width: 100%; max-width: 460px; }
.whole-tone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 2px; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 #e3d6bf; }
.whole-tone b { font-size: 34px; color: #7952c2; }
.whole-tone small { font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.tone-sound.selected, .whole-tone.selected { background: #ffe6a0; }
.whole-next { width: 100%; max-width: 360px; margin-top: auto; }
.whole-choices { display: flex; gap: 12px; width: 100%; max-width: 460px; margin-top: auto; padding-bottom: 14px; }
.whole-choice { flex: 1; min-width: 0; min-height: 110px; border-radius: 26px; background: #fff; box-shadow: 0 7px 0 #e3d6bf; color: #7952c2; font-size: 48px; }
.whole-choice.wrong { opacity: .45; }
.whole-choice.right { opacity: 1; background: var(--sun); color: var(--ink); box-shadow: 0 7px 0 var(--sun-dark); }

/* 小尺寸竖屏压缩留白，保留主要按钮的触控面积。 */
@media (max-height: 700px) {
  [data-layout="tall"] .lv-L2 .lv-head { padding: 8px 10px 4px; gap: 8px; }
  [data-layout="tall"] .lv-L2 .lv-head .icon-btn { width: 44px; height: 44px; }
  [data-layout="tall"] .lv-L2 .lv-steps span { width: 28px; height: 28px; font-size: 16px; }
  [data-layout="tall"] .lv-L2 .lv-guide { min-height: 72px; padding: 4px 12px; gap: 8px; }
  [data-layout="tall"] .lv-L2 .lv-lark { width: 58px; }
  [data-layout="tall"] .lv-L2 .lv-guide .bubble { font-size: 14px; padding: 10px 12px; }
  [data-layout="tall"] .lv-L2 .lv-stage { padding: 4px 12px 14px; gap: 10px; }
  [data-layout="tall"] .lv-L2 .mouth-lark { width: 160px; }
  [data-layout="tall"] .lv-L2 .mouth-tip { font-size: 14px; }
  [data-layout="tall"] .lv-L2 .letter-card { height: 86px; font-size: 54px; }
  [data-layout="tall"] .lv-L2 .speaker { width: 84px; height: 84px; font-size: 40px; }
  [data-layout="tall"] .lv-L2 .balloon { height: 92px; font-size: 46px; }
  [data-layout="tall"] .lv-L2 .tone-school { padding: 12px 10px; }
  [data-layout="tall"] .lv-L2 .tone-school h3 { margin-bottom: 10px; font-size: 18px; }
  [data-layout="tall"] .lv-L2 .tone-row { margin-bottom: 8px; }
  [data-layout="tall"] .lv-L2 .tone-sound { min-height: 44px; font-size: 30px; }
  [data-layout="tall"] .lv-L2 .tone-school > p { margin-top: 8px; font-size: 12px; }
  [data-layout="tall"] .lv-L2 .tone-school > p b { font-size: 20px; }
  [data-layout="tall"] .lv-L2 .syllable-card { font-size: 60px; }
  [data-layout="tall"] .lv-L2 .tone-pad { height: 80px; }
  [data-layout="tall"] .lv-L2 .whole-card { padding: 12px; gap: 6px; }
  [data-layout="tall"] .lv-L2 .whole-card h3 { font-size: 16px; }
  [data-layout="tall"] .lv-L2 .whole-sound { font-size: 64px; }
  [data-layout="tall"] .lv-L2 .whole-rule { font-size: 14px; }
  [data-layout="tall"] .lv-L2 .whole-tone { padding: 6px 2px; gap: 2px; }
  [data-layout="tall"] .lv-L2 .whole-tone b { font-size: 28px; }
  [data-layout="tall"] .lv-L2 .whole-choice { min-height: 90px; font-size: 42px; }
}

/* 儿歌里单独出现的字母 */
.char.letter { width: auto; min-width: 40px; padding: 0 4px; font-size: 40px; font-weight: 400; color: var(--violet); }
.rhyme-line { flex-wrap: wrap; align-items: flex-end; }
.rhyme-line { gap: 2px; }
.rhyme-line .char { width: 40px; font-size: 28px; }
.rhyme-line .char.letter { min-width: 30px; width: auto; font-size: 34px; }

/* 多字母拼音与复习页面共用紧凑排布，短屏内容可在题目区滚动。 */
.level .lv-head, .level .lv-guide { flex-shrink: 0; }
.level .lv-stage { min-height: 0; min-width: 0; overflow-x: hidden; }
.level .lv-steps { padding-inline: 3px; }
.level .lv-steps li { flex: 1; }
.level .lv-steps small { white-space: nowrap; font-size: clamp(9px, 2.55vw, 10px); }
.level .tray { width: 100%; max-width: 420px; justify-content: center; }
.level .tray > .slot { flex: 1; min-width: 0; max-width: 74px; font-size: clamp(22px, 7vw, 34px); }
.level .letter-cards { width: 100%; max-width: 340px; gap: 12px; }
.level .letter-card { flex: 1; min-width: 0; }
.spot.multi-letter b { width: auto; min-width: 68px; padding: 0 9px; font-size: 32px; }
.balloon.multi-letter { font-size: clamp(29px, 8.5vw, 42px); }
.piece.multi-letter { font-size: 44px; }
.syllable-card.long-py { font-size: 66px; padding-inline: 20px; }
.merged-card.long-py { font-size: 54px; padding-inline: 16px; }
.target.long-py { width: 148px; font-size: 42px; }
.blend-example { flex-wrap: wrap; }
.word-pic { max-width: 100%; font-size: 60px; }
.whole-choices.many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.whole-choice { font-size: clamp(30px, 9vw, 46px); }
.whole-choices.many .whole-choice { min-height: 80px; }
.whole-tone b { font-size: clamp(23px, 7vw, 32px); }
.whole-tones:has(> :only-child) { grid-template-columns: minmax(0, 120px); justify-content: center; }
.spell-equation { gap: 7px; }
.spell-equation .py { font-size: clamp(32px, 10vw, 54px); }
.tone-sound { font-size: clamp(23px, 7vw, 34px); }
.voice-caption { font-size: 22px; }
.round-dots { max-width: 100%; flex-wrap: wrap; justify-content: center; }

/* 对照卡先突出拼音差别，再进入成对练习。 */
.compare-card { width: 100%; max-width: 560px; margin-top: 18px; padding: 26px 18px; border-radius: 30px; background: #fff; text-align: center; box-shadow: 0 8px 0 #e3d6bf; }
.compare-card h3 { color: var(--coral); font-size: 24px; }
.compare-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.compare-letter { min-height: 120px; border-radius: 24px; background: #e4f5ff; color: #378bab; font-size: clamp(42px, 12vw, 66px); }
.compare-letter + .compare-letter { background: #f1ecff; color: #7952c2; }
.compare-letter.selected, .recap-letter.selected { background: #ffe6a0; color: var(--ink); }
.compare-card p { color: var(--ink-soft); font-size: 17px; font-weight: 700; line-height: 1.8; }
.compare-next, .recap-next { width: 100%; max-width: 360px; margin-top: auto; }

/* 复习表完整展示学过的类别，按钮可按需点选回顾。 */
.recap-card { width: 100%; max-width: 600px; padding: 18px 14px; border-radius: 28px; background: #fff; box-shadow: 0 8px 0 #e3d6bf; }
.level [data-step="recap"] .recap-card { flex: 1; min-height: 0; overflow-y: auto; }
.recap-group + .recap-group { margin-top: 16px; }
.recap-group h3 { margin-bottom: 10px; color: var(--coral); font-size: 17px; }
.recap-group > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.recap-letter { min-height: 48px; padding: 4px; border-radius: 13px; background: #f1ecff; color: #7952c2; font-size: 27px; }

@media (max-height: 700px) {
  [data-layout="tall"] .level .whole-card { padding: 12px; gap: 6px; }
  [data-layout="tall"] .level .whole-sound { font-size: 60px; }
  [data-layout="tall"] .level .whole-rule { font-size: 14px; }
  [data-layout="tall"] .level .whole-choice { min-height: 72px; font-size: 32px; }
  [data-layout="tall"] .level .whole-tone { padding: 6px 2px; gap: 2px; }
  [data-layout="tall"] .level .whole-tone b { font-size: 24px; }
  [data-layout="tall"] .level .tone-school { padding: 12px 10px; }
  [data-layout="tall"] .level .tone-school { flex: 1; min-height: 0; overflow-y: auto; }
  [data-layout="tall"] .level .tone-school h3 { font-size: 18px; margin-bottom: 10px; }
  [data-layout="tall"] .level .tone-row { margin-bottom: 8px; }
  [data-layout="tall"] .level .tone-sound { font-size: 23px; min-height: 44px; }
  [data-layout="tall"] .level .tone-school > p { margin-top: 10px; }
  [data-layout="tall"] .level .syllable-card.long-py { font-size: 48px; }
  [data-layout="tall"] .level .target.long-py { width: 128px; font-size: 36px; }
  [data-layout="tall"] .level .merged-card.long-py { font-size: 44px; }
  [data-layout="tall"] .level .piece.multi-letter { font-size: 32px; }
  [data-layout="tall"] .level .balloon.multi-letter { font-size: 32px; }
  [data-layout="tall"] .level .spell-equation .py { font-size: 32px; }
  [data-layout="tall"] .level .compare-card { padding: 18px 12px; margin-top: 0; }
  [data-layout="tall"] .level .compare-pair { margin: 18px 0; }
  [data-layout="tall"] .level .compare-letter { min-height: 96px; font-size: 46px; }
  [data-layout="tall"] .level .compare-card p { font-size: 15px; }
}
[data-layout="wide"] .rhyme-line .char { width: 50px; font-size: 32px; }
[data-layout="wide"] .rhyme-line .char.letter { font-size: 40px; }