/* A single, quiet stage for the picture, the word and the next choice. */
:root{--header:58px}
html,body{height:100%;overflow:hidden}
body{height:100dvh}
.header-inner{max-width:1240px;padding:0 26px;gap:14px}
.brand-owl{width:44px;height:44px}
.brand-word{font-size:24px}
.site-header nav{margin-left:auto}
.site-header .nav-button.active,.site-header .game-one{display:none}
.site-header .nav-button{font-size:11px;padding:8px 10px;box-shadow:none}
.header-tools{gap:7px}
.page-shell{width:100%;max-width:1220px;min-height:0;padding:14px 20px 18px;gap:12px}
.hero,.journey,.helper-column,.mobile-journey,.under-game{display:none}
.focus-bar{display:flex;align-items:center;gap:9px;flex:none;min-height:38px;padding:0 2px}
.focus-bar button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 12px;border:1px solid #e2d6ef;border-radius:11px;background:#fffdfc;color:#75578f;font-size:12px;font-weight:900;white-space:nowrap;box-shadow:0 2px 0 #e9def2}
.focus-bar button:hover{background:#f4edff;transform:translateY(-1px)}
.focus-bar button:focus-visible{outline:3px solid #a28be2;outline-offset:3px}
.focus-bar .icon{width:15px;height:15px;flex:none}
#focus-current{font-size:13px;font-weight:900;color:#79608d;margin-right:auto;white-space:nowrap}
.focus-bar .focus-video{background:#e9f7ff;border-color:#cee6f2;color:#427f9c;box-shadow:0 2px 0 #d2e9f4}
.focus-bar .focus-exam{background:#fff2cc;border-color:#f0dfa8;color:#9b761e;box-shadow:0 2px 0 #f0dfac}
.dashboard{display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%;min-height:0;flex:1}
.play-column{width:100%;max-width:1180px;margin:0 auto;min-height:0;gap:0}
.quiz-card{width:100%;min-height:0;padding:18px 20px;gap:12px;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:38px 29px minmax(0,1fr) 39px;border-radius:24px}
.quiz-heading{grid-column:1;grid-row:1;gap:10px;min-width:0}
.chapter-symbol{display:grid;width:34px;height:34px;font-size:23px;border-radius:10px;flex:none}
.quiz-heading h2{font-size:21px;line-height:1.2;letter-spacing:-.5px}
#chapter-kicker,.help-button{display:none}
.stats{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.stat{max-height:none;padding:5px 8px;gap:6px;border-radius:11px}
.stat>div{display:flex;flex-direction:row;align-items:center;gap:5px;width:auto}
.stat small{display:none}
.stat strong{font-size:18px;line-height:1.1}
.stat .icon{width:18px;height:18px;flex:none}
.level-steps{grid-column:1/-1;grid-row:2;gap:8px}
.level-step{padding:5px 8px;font-size:10px;gap:7px;line-height:1.2}
.level-step b{height:18px;width:18px;font-size:9px}
.question-workspace{grid-column:1/-1;grid-row:3;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:18px;min-height:0}
.comic-frame{min-width:0;min-height:0;border-radius:18px;border-width:1px;box-shadow:none}
.comic-frame>img{object-fit:contain;object-position:center}
.comic-frame figcaption{display:block;padding:9px 8px;font-size:12px;line-height:1.3}
.scene-label,.ready-bubble{display:none}
.answer-panel{gap:13px;min-width:0;min-height:0}
.question-tag,.answer-note{display:none}
.question-intro h3{font-size:23px;line-height:1.25}
.question-intro p{font-size:12px;line-height:1.4;margin-top:5px}
.options{grid-template-columns:1fr;gap:11px}
.option{border-radius:14px;box-shadow:0 3px 0 var(--stroke)}
.option button.answer-choice{font-size:23px;padding:12px 15px;gap:12px}
.choice-letter{width:29px;height:29px;font-size:12px}
.options.sentence-options .answer-choice{font-size:15px;padding:9px 12px;gap:9px}
.options.sentence-options .choice-letter{width:24px;height:24px;font-size:10px}
.lesson-panel{justify-content:center;gap:20px;padding:25px 28px;border-radius:18px}
.lesson-kicker,.mnemonic p,.memory-note,.lesson-stage{display:none}
.lesson-word{display:block;font-size:clamp(46px,5vw,68px);line-height:1;letter-spacing:-1.5px}
.lesson-word small{display:block;margin-top:10px;font-size:18px;line-height:1.4;letter-spacing:0}
.lesson-word small span{display:inline;font-size:inherit}
.mnemonic{display:block;padding:13px 16px;border-radius:13px}
.mnemonic small{font-size:9px;letter-spacing:.8px;max-width:none}
.mnemonic strong{display:block;font-size:29px;margin:4px 0 0}
.articulation-line{font-size:15px;line-height:1.5}
.audio-caption{grid-column:1;grid-row:4;font-size:11px;border:0;background:transparent;padding:5px 2px;gap:7px;min-width:0}
#audio-text{min-width:0;line-height:1.3}
.waves{flex:none}
.game-actions{grid-column:2;grid-row:4;display:flex;flex-wrap:nowrap;gap:8px;min-height:0}
.game-actions .primary-button{flex-basis:auto;min-height:36px;height:auto;padding:8px 12px;font-size:12px;border-radius:11px}
.game-actions .primary-button:disabled{background:#f5f0f9;border-color:#ebe3f1;color:#9984aa;box-shadow:none}
.game-actions .primary-button .icon{height:17px;width:17px}
.game-actions>.icon-button{height:auto;width:36px;border-radius:11px;box-shadow:none}
.advance-status{display:none}
.feedback{padding:20px;gap:12px;border-radius:16px;justify-content:center}
.feedback-title{font-size:15px}
.feedback-answer{font-size:29px;line-height:1.2}
.feedback-answer>small{display:block;font-size:13px;margin:6px 0 0}
.feedback p{font-size:14px;line-height:1.5}
.feedback-tools{gap:8px}
.reward-tag{font-size:12px}
.hold-button{font-size:11px}
.answer-panel.answered .question-intro{display:none}
body.exam-mode .dashboard,body.exam-mode .focus-bar{display:none}

@media(max-height:700px) and (min-width:701px){
 :root{--header:50px}
 .page-shell{padding:9px 18px 12px;gap:9px}
 .focus-bar{min-height:32px}.focus-bar button{min-height:31px;padding:5px 11px;font-size:11px}
 .quiz-card{padding:13px 16px;gap:9px;grid-template-rows:33px 25px minmax(0,1fr) 34px}
 .quiz-heading h2{font-size:18px}.chapter-symbol{height:30px;width:30px;font-size:21px}
 .stat strong{font-size:17px}.level-step{font-size:9px;padding:4px 7px}
 .lesson-panel{gap:12px;padding:17px 20px}.lesson-word{font-size:49px}.lesson-word small{font-size:15px;margin-top:7px}
 .mnemonic{padding:9px 12px}.mnemonic strong{font-size:24px}.articulation-line{font-size:12px}
 .question-intro h3{font-size:19px}.question-intro p{font-size:11px}
 .option button.answer-choice{font-size:20px;padding:9px 12px}.options.sentence-options .answer-choice{font-size:13px}
 .feedback{gap:8px;padding:15px}.feedback-answer{font-size:23px}.feedback p{font-size:12px}
 .game-actions .primary-button{min-height:31px;font-size:11px;padding:5px 9px}
}

@media(max-width:700px){
 :root{--header:49px}
 .header-inner{padding:0 12px;gap:8px}.brand-owl{height:37px;width:37px}.brand-word{font-size:21px}.brand-word small{font-size:5px;letter-spacing:3px}
 .site-header .nav-button{height:31px;width:29px;padding:6px}.header-tools{gap:5px}
 .page-shell{padding:8px 10px 10px;gap:8px}
 .focus-bar{min-height:33px;gap:6px;padding:0}
 .focus-bar button{min-height:32px;padding:6px 8px;border-radius:9px;font-size:10px;gap:4px}
 .focus-bar .icon{display:none}#focus-current{font-size:10px;letter-spacing:-.1px}
 .quiz-card{grid-template-columns:minmax(0,1fr);grid-template-rows:31px 24px minmax(0,1fr) 26px 35px;gap:7px;padding:11px;border-radius:20px}
 .quiz-heading{display:none}
 .stats{grid-column:1;grid-row:1;gap:6px}.stat{justify-content:center;padding:5px 7px;gap:7px;border-radius:9px}.stat strong{font-size:17px}.stat .icon{height:17px;width:17px}
 .level-steps{grid-column:1;grid-row:2;gap:4px}.level-step{font-size:7px;padding:3px 2px;gap:4px}.level-step b{height:16px;width:16px;font-size:8px}
 .question-workspace,.quiz-card:is([data-phase="ready"],[data-phase="learning"]) .question-workspace,.quiz-card.is-feedback .question-workspace{grid-column:1;grid-row:3;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(158px,1fr);gap:9px}
 .comic-frame{border-radius:13px}.comic-frame>img{object-fit:contain;object-position:center}.comic-frame figcaption{display:none}
 .answer-panel{gap:8px}.question-intro h3{font-size:16px;line-height:1.25}.question-intro p{font-size:10px;margin-top:3px}
 .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.option{border-radius:10px}.option button.answer-choice{font-size:17px;padding:8px;gap:7px}
 .choice-letter{width:22px;height:22px;font-size:9px}.options.sentence-options .answer-choice{font-size:11px;padding:6px;gap:5px}.options.sentence-options .choice-letter{width:18px;height:18px;font-size:8px}
 .lesson-panel{gap:9px;padding:12px 15px;border-radius:13px}
 .lesson-word{display:flex;align-items:center;gap:13px;font-size:38px;letter-spacing:-.8px}.lesson-word small{font-size:13px;margin:0;line-height:1.4}.lesson-word small span{display:block;font-size:11px}
 .mnemonic{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px}.mnemonic small{font-size:7px;max-width:90px;line-height:1.4;letter-spacing:.5px}.mnemonic strong{font-size:22px;margin:0}
 .articulation-line{font-size:11px;line-height:1.4}
 .audio-caption{grid-column:1;grid-row:4;font-size:9px;padding:2px 1px;gap:5px}.audio-caption>.icon{width:13px;height:13px}
 .game-actions{grid-column:1;grid-row:5;gap:6px}.game-actions .primary-button{font-size:11px;padding:6px 8px;min-height:32px;border-radius:10px}.game-actions>.icon-button{width:33px}
 .feedback{padding:12px;gap:7px;border-radius:12px}.feedback-title{font-size:12px}.feedback-answer{font-size:21px}.feedback-answer>small{font-size:10px;margin-top:4px}.feedback p{font-size:11px;line-height:1.4}.reward-tag{font-size:10px}.hold-button{font-size:9px}
}

@media(max-width:700px) and (max-height:620px){
 :root{--header:45px}
 .brand-owl{width:34px;height:34px}.brand-word{font-size:19px}
 .page-shell{padding:6px 8px 8px;gap:7px}.focus-bar{gap:5px;min-height:31px}.focus-bar button{min-height:30px;padding:5px 7px;font-size:9px}#focus-current{font-size:9px}
 .quiz-card{padding:9px;gap:6px;grid-template-rows:28px 22px minmax(0,1fr) 24px 32px}
 .stat strong{font-size:16px}.level-step{font-size:6px;gap:3px}.level-step b{height:15px;width:15px;font-size:7px}
 .question-workspace,.quiz-card:is([data-phase="ready"],[data-phase="learning"]) .question-workspace,.quiz-card.is-feedback .question-workspace{grid-template-rows:minmax(0,1fr) minmax(144px,1fr);gap:7px}
 .lesson-panel{gap:7px;padding:9px 11px}.lesson-word{font-size:33px}.lesson-word small{font-size:12px}.lesson-word small span{font-size:10px}
 .mnemonic{padding:5px 8px}.mnemonic small{font-size:6px;max-width:80px}.mnemonic strong{font-size:20px}.articulation-line{font-size:10px;line-height:1.35}
 .question-intro h3{font-size:14px}.question-intro p{font-size:9px}.answer-panel{gap:6px}.option button.answer-choice{font-size:15px;padding:6px;gap:5px}.options.sentence-options .answer-choice{font-size:10px}
 .audio-caption{font-size:8px}.game-actions .primary-button{font-size:10px;min-height:29px}
 .feedback{padding:9px;gap:5px}.feedback-title{font-size:11px}.feedback-answer{font-size:18px}.feedback p{font-size:10px}.feedback-answer>small{font-size:9px}
}

@media(max-height:500px) and (min-width:601px){
 :root{--header:42px}
 .header-inner{padding:0 16px}.brand-owl{width:32px;height:32px}.brand-word{font-size:19px}
 .page-shell{padding:6px 12px 9px;gap:6px}.focus-bar{min-height:28px;gap:7px}.focus-bar button{min-height:27px;padding:4px 10px;font-size:10px}#focus-current{font-size:11px}
 .quiz-card{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:27px minmax(0,1fr) 29px;gap:7px 12px;padding:10px 12px;border-radius:17px}
 .quiz-heading{display:none}.stats{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.stat{justify-content:center;padding:3px 5px;gap:5px}.stat strong{font-size:15px}.stat .icon{width:15px;height:15px}
 .level-steps{grid-column:1;grid-row:1;gap:4px}.level-step{font-size:7px;padding:3px 2px;gap:3px}.level-step b{width:16px;height:16px;font-size:8px}
 .question-workspace,.quiz-card:is([data-phase="ready"],[data-phase="learning"]) .question-workspace,.quiz-card.is-feedback .question-workspace{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:13px}
 .comic-frame{border-radius:12px}.comic-frame figcaption{display:none}.comic-frame>img{object-fit:contain}
 .lesson-panel{gap:8px;padding:11px 14px}.lesson-word{display:flex;align-items:center;gap:12px;font-size:35px}.lesson-word small{font-size:12px;margin:0}.lesson-word small span{display:block;font-size:10px}
 .mnemonic{display:flex;align-items:center;gap:10px;padding:6px 9px}.mnemonic small{font-size:6px;max-width:80px}.mnemonic strong{font-size:21px;margin:0}.articulation-line{font-size:10px;line-height:1.4}
 .answer-panel{gap:7px}.question-intro h3{font-size:15px}.question-intro p{font-size:10px;margin-top:3px}.options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.option button.answer-choice{font-size:17px;padding:7px;gap:6px}.choice-letter{width:21px;height:21px;font-size:8px}.options.sentence-options .answer-choice{font-size:10px;padding:6px}
 .audio-caption{grid-column:1;grid-row:3;font-size:9px;padding:2px 0}.game-actions{grid-column:2;grid-row:3;flex-wrap:nowrap;gap:6px}.game-actions .primary-button{flex-basis:auto;min-height:27px;height:auto;font-size:10px;padding:4px 7px;border-radius:8px}.game-actions>.icon-button{height:auto;width:29px;border-radius:8px}
 .feedback{padding:11px;gap:7px}.feedback-title{font-size:12px}.feedback-answer{font-size:22px}.feedback p{font-size:11px;line-height:1.4}.feedback-answer>small{font-size:10px}.hold-button{font-size:9px}.reward-tag{font-size:10px}
}