/* Shared three-subject UI. Existing mathematics layout remains intact. */
body[data-subject="english"] { --home-green:#2863a0; --home-mint:#dcecff; --subject-soft:#e7f0fc; --subject-edge:#a2bdd8; }
body[data-subject="chinese"] { --home-green:#a94c2a; --home-mint:#ffe2c0; --subject-soft:#fff0e1; --subject-edge:#dcb799; }
body[data-subject="math"] { --subject-soft:#e9f1df; --subject-edge:#b2c99d; }
.progress-track i { background:var(--home-green); }


body:is([data-screen="language"],[data-screen="free"],[data-screen="language-tree"]) #actors { visibility:hidden; }
.language-screen { flex-direction:column; gap:12px; padding:max(14px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom)); color:var(--home-ink); height:min(var(--language-height,100dvh),980px); overflow:hidden; background:var(--home-paper); }
.language-head { display:flex; align-items:center; gap:12px; flex:none; }
.language-head button { width:36px; height:40px; background:var(--subject-soft); border:1px solid var(--subject-edge); border-radius:11px; font-size:28px; }
.language-head h2 { font-size:21px; margin:2px 0; }
.language-head small { font-size:11px; color:#6c7769; }
.language-note { font-size:12px; font-weight:500; line-height:1.6; color:#66715f; margin:2px 0; }
.language-progress { display:flex; justify-content:space-between; font-size:11px; color:#77846c; }
.language-track { height:5px; background:#e6e9df; border-radius:4px; flex:none; }
.language-track i { display:block; height:100%; border-radius:inherit; background:var(--home-green); }
.language-card { display:flex; flex-direction:column; gap:12px; background:#fffef9; border:1px solid #dce0d3; border-radius:20px; padding:18px; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.language-card h3 { font-size:20px; line-height:1.5; margin:0; }
.language-kicker { font-size:11px; margin:0; color:var(--home-green); }
.language-screen button { touch-action:manipulation; }
.listen-actions { display:flex; gap:8px; }
.listen-actions button,.speech-panel button { background:var(--subject-soft); color:var(--home-green); border:1px solid var(--subject-edge); border-radius:10px; padding:10px 12px; font-size:13px; }
.answer-area { margin:auto 0; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice-grid button { min-height:56px; padding:12px 8px; font-size:16px; border:1.5px solid #d9dfce; border-radius:12px; background:#f9faf3; overflow-wrap:anywhere; }
.choice-grid button[aria-pressed="true"] { background:var(--subject-soft); border-color:var(--home-green); color:var(--home-green); box-shadow:0 0 0 1px var(--home-green); }
.language-input { user-select:text; -webkit-user-select:text; width:100%; border:2px solid var(--subject-edge); border-radius:12px; font:inherit; font-size:23px; padding:13px; background:white; color:var(--home-ink); }
.answer-label { display:block; font-size:12px; margin-bottom:8px; }
.token-answer { border-bottom:2px dashed var(--subject-edge); min-height:50px; font-size:19px; padding:8px 0; line-height:1.5; overflow-wrap:anywhere; }
.token-bank { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:12px 0; }
.token-bank button { min-width:34px; min-height:38px; padding:5px 8px; border:1px solid var(--subject-edge); border-radius:8px; background:var(--subject-soft); font-size:17px; }
.token-bank button:disabled { opacity:.25; }
[data-action="undo"] { background:transparent; border:0; color:#77846c; font-size:12px; }
.language-feedback { font-size:13px; font-weight:500; line-height:1.65; min-height:22px; margin:0; }
.language-feedback[data-kind="correct"] { color:#176f50; }
.language-feedback[data-kind="retry"] { color:#a45f2b; }
.language-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:10px; flex:none; }
.language-actions button { min-height:46px; padding:10px; border:1px solid var(--subject-edge); background:#fffcf5; border-radius:12px; font-size:15px; }
.language-actions button.primary { background:var(--home-green); color:white; border-color:var(--home-green); }
.language-actions small { grid-column:1/-1; text-align:center; font-size:10px; font-weight:500; color:#899079; }
.language-actions [data-action="reveal"] { grid-column:1/-1; min-height:32px; padding:4px; }
.reading-page { font-size:16px; line-height:1.8; font-weight:500; padding:12px; background:#f5f6ed; border-radius:12px; }
.reading-controls { display:flex; align-items:center; justify-content:space-between; font-size:11px; gap:6px; }
.reading-controls button { font-size:12px; border:1px solid #d3dcc9; border-radius:8px; background:transparent; padding:7px; }
.spoken-text { font-size:27px; line-height:1.5; margin:8px 0; color:var(--home-green); overflow-wrap:anywhere; }
.speech-panel { display:flex; flex-wrap:wrap; gap:8px; }
.speech-panel p { width:100%; font-size:12px; font-weight:500; line-height:1.6; }
.speech-panel button:disabled { opacity:.5; }
.practice-types { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.practice-types button,.language-skill-list button { background:#fffef9; border:1px solid var(--subject-edge); border-radius:14px; padding:20px 12px; font-size:17px; color:var(--home-green); }
.language-skill-list { display:grid; gap:9px; flex:1; min-height:0; overflow:auto; }
.language-skill-list button { padding:12px; }
.language-result { justify-content:center; text-align:center; }
.language-result h3 { font-size:28px; color:var(--home-green); }
.result-eyebrow { font-size:12px; }
.badge-list { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.badge-list span { padding:7px 10px; background:#fff0c7; color:#8b6429; border-radius:9px; font-size:12px; }
@media(max-height:740px){.language-screen {gap:8px;} .language-card {gap:10px;padding:14px;} }
@media(max-height:610px){.language-card h3 {font-size:17px;} .choice-grid button {font-size:14px;min-height:46px;padding:8px;} .reading-page {font-size:14px;padding:8px;line-height:1.6;} .language-head h2 {font-size:18px;} .language-card {gap:8px;padding:12px;} .language-actions small {display:none;} .practice-types {margin:8px 0;gap:8px;} .practice-types button {padding:15px 8px;} }
.language-keyboard .language-screen {padding-top:8px;gap:5px;} .language-keyboard .language-kicker,.language-keyboard .language-progress,.language-keyboard .language-track {display:none;} .language-keyboard .language-card {gap:6px;padding:10px;} .language-keyboard .language-head h2 {font-size:16px;} .language-keyboard .language-head small {display:none;}
.vocabulary-image { width:72px; height:72px; margin:0 auto; padding:10px; background:var(--subject-soft); border-radius:16px; }
@media(max-height:610px){.vocabulary-image {width:50px;height:50px;padding:6px;}}
/* The monkey is a participant, not a hidden decoration. */
body[data-screen="language"] #actors { visibility:visible; }
body[data-screen="language"] .language-screen { background:transparent; }
.language-stage { position:relative; height:116px; flex:none; margin:0 2px; border-bottom:2px dashed var(--subject-edge); }
.monkey-dialogue { position:absolute; top:12px; left:0; width:calc(100% - 110px); background:#fffdf6; border:1.5px solid var(--subject-edge); border-radius:16px 16px 4px 16px; padding:10px 12px; box-shadow:0 3px 0 #00000008; }
.monkey-dialogue small { color:var(--home-green); font-size:9px; letter-spacing:.6px; }
.monkey-dialogue p { font-size:14px; line-height:1.5; margin:4px 0; }
.monkey-dialogue span { color:#b78129; font-size:10px; }
.monkey-pet { position:absolute; right:0; bottom:0; width:105px; height:100%; z-index:6; border:0; background:transparent; color:var(--home-green); }
.monkey-pet span { position:absolute; bottom:1px; right:25px; font-size:9px; font-weight:500; background:var(--home-mint); padding:2px 7px; border-radius:6px; }
.language-card { box-shadow:0 4px 0 var(--subject-edge); border-width:1.5px; }
.choice-grid button { box-shadow:0 3px 0 #d9dfce; transition:transform .12s,background .12s; }
.choice-grid button:active { transform:translateY(3px);box-shadow:none; }
.choice-grid button[aria-pressed="true"] { box-shadow:0 3px 0 var(--home-green); }
.language-actions .primary { box-shadow:0 3px 0 var(--subject-edge); }
.answer-pop { animation:language-pop .32s ease-out; }
@keyframes language-pop { 50% {transform:scale(1.025);} }
@media(max-height:740px){.language-stage {height:87px;} .monkey-dialogue {top:3px;padding:7px 10px;} .monkey-dialogue p {font-size:12px;margin:2px 0;} .language-card {gap:8px;} }
@media(max-height:610px){.language-stage {height:66px;} .monkey-dialogue {top:0;padding:6px 8px;} .monkey-dialogue small {display:none;} .monkey-dialogue p {font-size:11px;margin:0 0 2px;} .monkey-dialogue span {font-size:9px;} .language-screen {gap:6px;} .language-card h3 {font-size:16px;} .language-feedback {font-size:11px;line-height:1.45;} .choice-grid {gap:8px;} .choice-grid button {min-height:42px;padding:7px;} }
.language-keyboard .language-stage {display:none;} .language-keyboard[data-screen="language"] #actors {visibility:hidden;}
@media(prefers-reduced-motion:reduce){.answer-pop {animation:none;} .choice-grid button {transition:none;}}
.language-head > div { flex:1; }
.language-head .language-sound { width:auto;height:32px;font-size:11px;padding:0 9px;border-radius:20px;background:#fffdf7; }
/* Longer original readings still leave the monkey and answer controls visible. */
@media(max-height:740px){
 .language-screen[data-kind="reading"] .language-stage {height:66px;}
 .language-screen[data-kind="reading"] .language-card {padding:10px;gap:6px;}
 .language-screen[data-kind="reading"] .language-kicker {display:none;}
 .language-screen[data-kind="reading"] .reading-page {font-size:14px;line-height:1.5;padding:8px;}
 .language-screen[data-kind="reading"] h3 {font-size:16px;line-height:1.4;}
 .language-screen[data-kind="reading"] .choice-grid button {font-size:14px;line-height:1.4;padding:8px;min-height:44px;}
 .language-screen[data-kind="reading"] .reading-controls button {padding:4px 7px;}
}

/* 语文英语用数学同一套皮肤：粗描边、硬阴影、展示字体。 */
body[data-subject="chinese"] { --home-green:#ff8a3d; --subject-soft:#ffe9d6; }
body[data-subject="english"] { --home-green:#3b82f6; --subject-soft:#dfeaff; }
body[data-subject="math"] { --home-green:#22b573; --subject-soft:#d8f6e6; }
.language-screen { color:var(--ink); }
.language-screen .language-head button { display:grid; place-items:center; width:42px; height:42px; padding:0; border:3px solid var(--ink); border-radius:50%; background:#fff; color:var(--ink); font-family:var(--chunky); font-size:22px; box-shadow:0 3px 0 var(--ink); }
.language-screen .language-head button:last-child { width:auto; padding:0 12px; border-radius:999px; font-size:14px; }
.language-head h2 { font-family:var(--chunky); font-weight:400; font-size:23px; }
.language-head small { color:var(--ink); opacity:.6; }
.language-card { border:3px solid var(--ink); background:#fff; box-shadow:0 5px 0 var(--ink); }
.language-track { height:10px; border:2px solid var(--ink); border-radius:999px; background:#fff; box-sizing:content-box; }
.language-kicker { display:inline-block; align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--home-green); color:#fff; font-size:12px; font-weight:900; }
.choice-grid button, .language-actions button, .practice-types button, .language-skill-list button, .reading-controls button, .listen-actions button, .speech-panel button, .token-bank button { border:3px solid var(--ink); border-radius:16px; background:#fff; color:var(--ink); font-weight:900; box-shadow:0 4px 0 var(--ink); }
.choice-grid button:active, .language-actions button:active, .practice-types button:active, .language-skill-list button:active, .reading-controls button:active, .listen-actions button:active, .speech-panel button:active, .token-bank button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.choice-grid button[aria-pressed="true"] { background:#fff4c4; border-color:var(--ink); color:var(--ink); box-shadow:0 4px 0 var(--ink); }
.listen-actions button, .speech-panel button, .token-bank button { background:var(--subject-soft); }
.language-actions button.primary { background:var(--home-green); border-color:var(--ink); color:#fff; font-family:var(--chunky); font-weight:400; font-size:18px; text-shadow:0 2px 0 rgba(27, 29, 77, .35); }
.language-actions [data-action="reveal"] { box-shadow:none; }
.language-skill-list { padding:2px 2px 6px; }
.language-skill-list button { min-height:58px; padding:10px 12px; background:var(--subject-soft); font-family:var(--chunky); font-weight:400; font-size:18px; }
.practice-types button { background:var(--subject-soft); font-family:var(--chunky); font-weight:400; font-size:19px; }
.language-result h3 { font-family:var(--chunky); font-weight:400; color:var(--ink); }

/* 语文英语的闯关界面：和数学同样的 HUD、舞台和题卡，只是题卡里换成候选块。 */
#screen-language { gap:0; padding:calc(6px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom)); }
#screen-language .play-context, #screen-language .hud, #screen-language .hud2 { padding-left:0; padding-right:0; }
#screen-language .hud { height:36px; }
#screen-language .hud2 { height:38px; }
.lg-mute { position:static; width:36px; height:36px; }
#screen-language .language-stage { flex:1 1 96px; min-height:92px; height:auto; margin:0; border-bottom:0; }
#screen-language .clock { margin-right:auto; }
.monkey-dialogue { top:auto; bottom:10px; left:0; right:auto; width:auto; max-width:56%; padding:7px 11px; border:2.5px solid var(--ink); border-radius:14px 14px 14px 4px; background:#fff; box-shadow:0 3px 0 var(--ink); }
.monkey-dialogue p { margin:0; font-size:13px; font-weight:900; line-height:1.35; }
.monkey-pet { width:40%; height:100%; background:none; border:0; box-shadow:none; }
.lg-body { display:flex; flex-direction:column; gap:8px; min-height:0; }
#screen-language .language-card { margin:0 0 6px; padding:10px 12px; flex:0 1 auto; min-height:0; max-height:78%; overflow:auto; display:block; }
#screen-language .language-result { flex:1 1 auto; }
.card-top { flex:none; gap:8px; }
.lg-group { flex:1; min-width:0; overflow:hidden; font-size:12px; font-weight:900; opacity:.6; text-overflow:ellipsis; white-space:nowrap; }
.lg-skip { flex:none; padding:3px 10px; border:2px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); font-size:12px; font-weight:900; }
.lg-skip:disabled { opacity:.3; }
#lg-body h3 { font-size:clamp(17px,2.6vh,21px); line-height:1.4; }
#screen-language .answer-area { margin:6px 0 0; }
.lg-slots { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; min-height:52px; }
.lg-slot { display:grid; place-items:center; min-width:40px; height:48px; padding:0 6px; border:3px dashed #9ea3d6; border-radius:12px; background:#eef1ff; box-sizing:border-box; font-size:26px; font-weight:900; line-height:1; }
.lg-slot.active { border-style:solid; border-color:var(--blue); background:#fff4c4; animation:lg-slot 1s ease-in-out infinite; }
.lg-slot.ok { border:3px solid var(--ink); background:#d9fbef; }
.lg-slot.pending { color:transparent; }
.lg-slot.fixed { min-width:6px; padding:0; border:0; background:none; }
.lg-gap { width:12px; }
.lg-slots.lg-token .lg-slot { min-width:58px; font-size:18px; }
.lg-slots.lg-pinyin .lg-slot { min-width:48px; font-size:23px; }
@keyframes lg-slot { 50% { box-shadow:0 0 0 4px rgba(59,107,255,.25); } }
.lg-bank { display:grid; grid-template-columns:repeat(auto-fit,minmax(56px,1fr)); gap:8px; margin-top:14px; }
.lg-bank.lg-token { grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); }
.lg-bank.lg-pinyin { grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); }
.lg-bank button { min-height:52px; padding:4px; border:3px solid var(--ink); border-radius:14px; background:#fff; color:var(--ink); font-size:24px; font-weight:900; line-height:1.1; box-shadow:0 4px 0 var(--ink); }
.lg-bank.lg-token button { font-size:17px; }
.lg-bank button:disabled { opacity:.22; box-shadow:none; transform:translateY(3px); }
.choice-grid button.ok { background:#3fdcb0; }
.choice-grid button.miss { background:#eceaf3; color:#8a8cb0; border-color:#a9abc9; box-shadow:none; transform:translateY(3px); }
.lg-bank button.hint, .choice-grid button.hint { animation:lg-hint .9s ease-in-out infinite; background:#fff4c4; }
@keyframes lg-hint { 50% { box-shadow:0 4px 0 var(--ink),0 0 0 5px var(--yellow); } }
.lg-next { align-self:center; width:min(100%,260px); height:54px; margin:2px auto 4px; font-size:22px; }
.language-feedback { flex:none; min-height:20px; font-size:13px; font-weight:700; }
.language-feedback[data-kind="correct"] { color:#128a54; }
.language-result h3 small { font-size:15px; }
.lg-unlock { font-weight:900; opacity:.6; }
.lg-unlock.yes { color:var(--pink); opacity:1; }
.clock.extra { flex:none; }
@media (max-height: 720px) {
 .lg-slot { height:42px; font-size:22px; min-width:36px; }
 .lg-slots { min-height:44px; }
 .lg-bank { gap:6px; margin-top:8px; }
 .lg-bank button { min-height:44px; font-size:20px; }
 .listen-actions button { padding:6px 10px; }
 #lg-body { gap:5px; }
}
.choice-grid button.ok, .choice-grid button.ok:disabled { background:#3fdcb0; color:var(--ink); opacity:1; animation:none; }
.match-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.match-grid > div { display:grid; gap:8px; }
.match-grid button { min-height:48px; padding:6px; border:3px solid var(--ink); border-radius:14px; background:#fff; color:var(--ink); font-size:16px; font-weight:900; box-shadow:0 4px 0 var(--ink); overflow-wrap:anywhere; }
.match-grid button.picked { background:#fff4c4; }
.match-grid button.ok { background:#3fdcb0; opacity:.55; box-shadow:none; transform:translateY(3px); }
.language-actions.lg-one { grid-template-columns:1fr; }
.language-actions.lg-one button { min-height:40px; }
.speech-panel button:not(:disabled) { background:var(--subject-soft); }
.speech-panel button[data-action="record"] { flex:1 1 100%; min-height:52px; background:var(--home-green); color:#fff; font-family:var(--chunky); font-weight:400; font-size:19px; }