/* 横屏布局：画布固定 960×560，只覆盖与竖屏不同的排布。 */

/* 开场：对话框放到右下角，舞台占满画面。 */
[data-layout="wide"] .opening-lark { width: 170px; top: 12%; }
[data-layout="wide"] [data-scene="3"] .opening-lark { top: 4%; width: 120px; }
[data-layout="wide"] .opening-talk { position: absolute; right: 28px; bottom: 28px; width: 380px; padding: 0; }

/* 地图：小路从左往右，横向滚动。 */
[data-layout="wide"] .map-scroll { overflow-x: auto; overflow-y: hidden; cursor: grab; }
[data-layout="wide"] .map-scroll:active { cursor: grabbing; }
[data-layout="wide"] .map-land { height: calc(100% - 122px); margin: 88px 40px 34px; border-radius: 160px; }
[data-layout="wide"] .map-lark { transform: translate(-50%, -150%); }

/* 关卡：左侧小百灵和气泡，右侧题目。 */
[data-layout="wide"] .level { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr; }
[data-layout="wide"] .lv-head { grid-column: 1 / -1; padding: 14px 22px 4px; }
[data-layout="wide"] .lv-steps { padding: 6px 24px; }
[data-layout="wide"] .lv-steps li { width: 86px; }
[data-layout="wide"] .lv-steps small { font-size: 12px; }
[data-layout="wide"] .lv-guide { flex-direction: column; justify-content: center; align-items: stretch; gap: 18px; padding: 10px 0 30px 22px; }
[data-layout="wide"] .lv-guide .bubble { flex: none; font-size: 18px; }
[data-layout="wide"] .lv-guide .bubble::after { left: 50%; top: auto; bottom: -10px; margin-left: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
[data-layout="wide"] .lv-lark { width: 150px; align-self: center; }
[data-layout="wide"] .lv-stage { padding: 8px 26px 22px 18px; }

[data-layout="wide"] .lv-stage[data-step="find"] { flex-direction: row; justify-content: center; gap: 20px; }
[data-layout="wide"] [data-step="find"] .scene { flex: none; width: auto; height: 100%; max-height: 460px; aspect-ratio: 36 / 28; }
[data-layout="wide"] [data-step="find"] .scene-art { height: 100%; }
[data-layout="wide"] [data-step="find"] .tray { flex-direction: column; }

[data-layout="wide"] .lv-stage[data-step="tone"],
[data-layout="wide"] .lv-stage[data-step="blend"] { display: grid; grid-template-columns: 1fr 1.25fr; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; column-gap: 26px; }
[data-layout="wide"] .lv-stage .round-dots { grid-column: 1 / -1; }
[data-layout="wide"] [data-step="tone"] .syllable-card,
[data-layout="wide"] [data-step="blend"] .word-card { grid-column: 1; grid-row: 2; }
[data-layout="wide"] [data-step="tone"] .voice-caption,
[data-layout="wide"] [data-step="blend"] .voice-caption { grid-column: 1; grid-row: 3; }
[data-layout="wide"] [data-step="tone"] .tone-pad { grid-column: 2; grid-row: 2; height: 230px; }
[data-layout="wide"] [data-step="tone"] .tone-keys { grid-column: 2; grid-row: 3; }
[data-layout="wide"] [data-step="blend"] .word-card { width: 100%; max-width: 300px; }
[data-layout="wide"] [data-step="blend"] .blend-zone { grid-column: 2; grid-row: 2; }
[data-layout="wide"] [data-step="blend"] .blend-tip { grid-column: 2; grid-row: 3; }

[data-layout="wide"] .balloons { gap: 30px; }
[data-layout="wide"] .balloon { width: 110px; height: 128px; font-size: 62px; }
[data-layout="wide"] .rhyme-card { max-width: 580px; }
[data-layout="wide"] .collect { max-width: 360px; }

/* 结算：两侧独立分组后整体居中，避免成绩卡的高度撑开左侧星星。 */
[data-layout="wide"] .result-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-content: center; align-items: center; gap: 36px; padding: 30px 56px; }
[data-layout="wide"] .result-celebration { gap: 8px; }
[data-layout="wide"] .result-lark { width: 190px; }

/* 弹层：固定宽度居中。 */
[data-layout="wide"] .sheet { max-width: 460px; }
[data-layout="wide"] .sheet.parent { max-width: 560px; }

/* 超宽屏时画布会横向拉长，关卡和结算内容限制宽度并居中。 */
[data-layout="wide"] .level { grid-template-columns: minmax(250px, 1fr) minmax(0, 720px) minmax(0, .6fr); }
[data-layout="wide"] .lv-head { max-width: 1100px; width: 100%; justify-self: center; }
[data-layout="wide"] .lv-guide { justify-self: end; width: 250px; }
[data-layout="wide"] .result-body { width: 100%; max-width: 1000px; margin: 0 auto; }
[data-layout="wide"] .lv-stage[data-step="mouth"] { flex-direction: row; justify-content: center; gap: 50px; }
[data-layout="wide"] [data-step="mouth"] .round-dots { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); }
[data-layout="wide"] [data-step="mouth"] .mouth-lark { width: 250px; }
[data-layout="wide"] [data-step="mouth"] .letter-cards { flex-direction: column; margin: 0; padding: 0; }
[data-layout="wide"] [data-step="mouth"] .letter-card { height: 92px; }

/* 第二课的五个找字母目标、四声表和整体认读。 */
[data-layout="wide"] .lv-L2 [data-step="find"] .scene { width: calc(100% - 84px); height: auto; max-height: 100%; }
[data-layout="wide"] .lv-L2 [data-step="find"] .scene-art { height: auto; }
[data-layout="wide"] .lv-L2 [data-step="find"] .tray { width: 64px; gap: 14px; }
[data-layout="wide"] .lv-L2 .tray-group > div { flex-direction: column; gap: 8px; }
[data-layout="wide"] .lv-L2 .letter-cards { width: 96px; }
[data-layout="wide"] .lv-L2 .balloons { max-width: 420px; gap: 30px; }
[data-layout="wide"] .lv-L2 .mouth-demo { max-width: 270px; }
[data-layout="wide"] [data-step="tone"] .tone-school { grid-column: 1 / -1; grid-row: 1 / 3; padding: 12px 18px; }
[data-layout="wide"] [data-step="tone"] .tone-school h3 { margin-bottom: 10px; }
[data-layout="wide"] [data-step="tone"] .tone-school > p { margin-top: 8px; }
[data-layout="wide"] [data-step="tone"] .tone-row { margin-bottom: 8px; }
[data-layout="wide"] [data-step="tone"] .tone-start { grid-column: 1 / -1; grid-row: 3; }
[data-layout="wide"] [data-step="whole"] .whole-card { padding: 14px 20px; gap: 7px; }
[data-layout="wide"] [data-step="whole"] .whole-sound { font-size: 74px; }
[data-layout="wide"] [data-step="whole"] .whole-tone { padding: 7px 2px; gap: 2px; }
[data-layout="wide"] [data-step="whole"] .whole-tone b { font-size: 30px; }
[data-layout="wide"] [data-step="whole"] .whole-choices { max-width: 500px; }

[data-layout="wide"] .level .balloons { max-width: 420px; gap: 30px; }
[data-layout="wide"] [data-step="blend"] .blend-school { grid-column: 1 / -1; grid-row: 1 / 3; }
[data-layout="wide"] [data-step="blend"] .blend-start { grid-column: 1 / -1; grid-row: 3; }
[data-layout="wide"] .blend-example .py { font-size: 56px; }
[data-layout="wide"] .blend-example { gap: 14px; }
[data-layout="wide"] .spelling-card { margin-top: 12px; }
[data-layout="wide"] .spell-equation { gap: 18px; }
[data-layout="wide"] .spell-equation .py { font-size: 70px; }

/* 后续课程包含较长的复韵母和鼻韵母，给拼音卡留出足够空间。 */
[data-layout="wide"] .level [data-step="find"] .scene { width: calc(100% - 94px); height: auto; max-height: 100%; }
[data-layout="wide"] .level [data-step="find"] .scene-art { height: auto; }
[data-layout="wide"] .level [data-step="find"] .tray { width: 74px; flex: none; }
[data-layout="wide"] .level [data-step="find"] .tray > .slot { width: 74px; min-height: 56px; max-height: 64px; flex: none; }
[data-layout="wide"] .level .balloon.multi-letter { font-size: 40px; }
[data-layout="wide"] .level [data-step="mouth"] .letter-cards { width: 96px; }
[data-layout="wide"] .level .whole-choices.many { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-layout="wide"] .level .whole-choice { font-size: 38px; }
[data-layout="wide"] [data-step="recap"] .recap-card { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; }
[data-layout="wide"] .recap-group > div { grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-layout="wide"] .compare-card { margin-top: 0; padding: 20px; }
[data-layout="wide"] .compare-pair { margin: 18px 0; }
[data-layout="wide"] .compare-letter { min-height: 118px; }
[data-layout="wide"] .level .syllable-card.long-py { font-size: 58px; }
[data-layout="wide"] [data-step="tone"] .tone-school { max-width: 540px; }
[data-layout="wide"] [data-step="tone"] .tone-school:has(.tone-row:nth-of-type(6)) .tone-sound { min-height: 38px; font-size: 27px; }
[data-layout="wide"] [data-step="tone"] .tone-school:has(.tone-row:nth-of-type(6)) .tone-row { margin-bottom: 6px; }