/* All artwork is generated PNG; CSS arranges existing raster imagery and text. */
.listening-mode .world-bg{background-image:url('assets/listening/background.png')}
.listening-mode #reading-exit,.listening-mode .sound,.listening-mode .reading-back{border-image-source:url('assets/writing/button-secondary.png');border-image-slice:55 125 fill}
.listening-mode .reading-result-card{border-image-source:url('assets/reading/result-card.png')}
.listening-stage{justify-content:center;gap:18px;padding:12px 0 18px}
.listening-layout{grid-template-columns:1fr 1.15fr;flex:0 0 auto;align-items:center;gap:24px}
.listening-player{border-image-source:url('assets/listening/player-panel.png');border-image-slice:240 fill;display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;padding:18px 16px;justify-content:start}
.listening-character{width:180px;height:330px;object-fit:contain;image-rendering:pixelated}
.listening-player-content{min-width:0}
.listening-kicker{font-size:10px;letter-spacing:1px;margin:0 0 10px;color:#58704b}
.listening-player h2{font-size:28px;line-height:1.2;margin:0 0 10px;color:#2d5039}
.listening-instruction{font-size:14px;line-height:1.5;margin:0 0 16px}
.listening-audio-buttons{display:flex;flex-direction:column;gap:9px}
.listening-play,.listening-pause{background:none;border:12px solid transparent;border-image:url('assets/writing/button-primary.png') 55 125 fill / 12px / 0 stretch;min-height:48px;padding:0 4px;color:#fffbe8;font-size:11px;font-weight:bold;line-height:1.35;transition:transform .12s;box-shadow:none;border-radius:0}
.listening-pause{border-image-source:url('assets/writing/button-secondary.png');color:#233e2c;font-size:10px}
.listening-audio-buttons button:disabled{opacity:.45}
.listening-audio-buttons button:hover:not(:disabled){transform:translateY(-1px)}
.listening-audio-buttons button:active:not(:disabled){transform:translateY(2px)}
.listening-status{font-size:12px;line-height:1.5;min-height:54px;margin:12px 0 0;color:#536b43}
.listening-status.has-error{color:#8c302a}
.listening-question-card{justify-content:flex-start;padding:20px 18px;border-image-slice:150 fill}
.listening-question-card .reading-question{font-size:22px;min-height:64px;margin-bottom:16px}
.listening-question-card .reading-question-top{margin-bottom:14px}
.listening-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.listening-answer{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:9px 5px;min-height:174px;border-width:12px;border-image-width:12px;border-image-slice:55 125 fill;text-align:center;font-size:14px;line-height:1.4}
.listening-answer img{width:100%;height:88px;object-fit:contain;image-rendering:pixelated}
.listening-option-text{min-height:40px;display:block}
.listening-answer .answer-letter{font-size:10px}
.listening-answer.is-correct{border-image-source:url('assets/reading/answer-correct.png')}
.listening-answer.is-incorrect{border-image-source:url('assets/reading/answer-incorrect.png')}
.listening-answer.is-locked{opacity:.65}
.text-options .listening-answer{min-height:92px;font-size:15px}
.text-options .listening-option-text{min-height:0}
.listening-answer-footer{grid-template-columns:1fr 142px;min-height:64px;margin-top:16px;gap:12px}
.listening-answer-footer .reading-feedback{font-size:12px;line-height:1.5;min-height:54px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.listening-answer-footer .reading-next{min-height:48px}
.listening-new-character .listening-character{animation:reading-appear .2s ease}
.listening-question-card .reading-question{animation:reading-appear .15s ease}
@media(max-width:1100px){
 .listening-layout{gap:17px;grid-template-columns:1fr 1.15fr}
 .listening-player{grid-template-columns:140px 1fr;gap:12px;padding:13px 10px;border-width:20px;border-image-width:20px}
 .listening-character{width:140px;height:278px}
 .listening-player h2{font-size:24px}.listening-instruction{font-size:13px}
 .listening-question-card{padding:14px 10px;border-width:20px;border-image-width:20px}
 .listening-question-card .reading-question{font-size:20px}
 .listening-answer{min-height:166px;font-size:13px;border-width:10px;border-image-width:10px;padding:7px 3px;gap:9px}
 .listening-answer img{height:80px}.listening-options{gap:7px}.listening-play,.listening-pause{font-size:10px}
 .listening-answer-footer{grid-template-columns:1fr 115px}
}
@media(orientation:portrait){
 .listening-stage{justify-content:flex-start;gap:16px;padding-top:8px}
 .listening-layout{grid-template-columns:1fr;gap:12px}
 .listening-player{grid-template-columns:190px 1fr;padding:12px 25px;gap:35px}
 .listening-character{width:190px;height:290px}
 .listening-player-content{max-width:320px}
 .listening-question-card{padding:18px 22px}
 .listening-question-card .reading-question{min-height:50px}
 .listening-answer{min-height:170px;font-size:15px}
 .listening-answer img{height:94px}
}
@media(max-width:700px) and (orientation:portrait){
 .listening-stage{gap:14px;padding:4px 0 9px}
 .listening-layout{gap:9px}
 .listening-player{grid-template-columns:112px 1fr;gap:17px;padding:8px 10px;border-width:16px;border-image-width:16px}
 .listening-character{width:112px;height:205px}
 .listening-kicker{font-size:8px;margin-bottom:7px}.listening-player h2{font-size:23px;margin-bottom:6px}
 .listening-instruction{font-size:12px;line-height:1.4;margin-bottom:10px}
 .listening-play,.listening-pause{min-height:44px;border-width:9px;border-image-width:9px;font-size:10px;padding:0 2px}
 .listening-pause{font-size:9px}.listening-audio-buttons{gap:7px}
 .listening-status{font-size:11px;line-height:1.4;min-height:43px;margin-top:8px}
 .listening-question-card{border-width:16px;border-image-width:16px;padding:9px 9px}
 .listening-question-card .reading-question-top{font-size:9px;margin-bottom:9px}
 .listening-question-card .reading-question{font-size:17px;line-height:1.4;min-height:48px;margin-bottom:11px}
 .listening-options{gap:6px}
 .listening-answer{font-size:13px;min-height:139px;border-width:9px;border-image-width:9px;padding:5px 2px;gap:7px}
 .listening-answer img{height:66px}.listening-option-text{min-height:36px}.listening-answer .answer-letter{font-size:9px}
 .text-options .listening-answer{min-height:75px;font-size:14px}
 .listening-answer-footer{margin-top:10px;grid-template-columns:1fr 109px;gap:8px;min-height:58px}
 .listening-answer-footer .reading-feedback{font-size:11px;line-height:1.4;min-height:50px}
 .listening-answer-footer .reading-next{min-height:44px}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){
 .listening-stage{gap:12px;padding-top:3px}
 .listening-player{grid-template-columns:96px 1fr;padding:6px 8px;gap:13px;border-width:13px;border-image-width:13px}
 .listening-character{width:96px;height:170px}
 .listening-player h2{font-size:21px;margin-bottom:5px}.listening-kicker{margin-bottom:5px}
 .listening-instruction{font-size:11px;margin-bottom:7px}
 .listening-status{font-size:10px;min-height:33px;margin-top:6px}
 .listening-audio-buttons{gap:5px}.listening-pause{font-size:8px}
 .listening-question-card{border-width:13px;border-image-width:13px;padding:7px 8px}
 .listening-question-card .reading-question{font-size:16px;min-height:43px;margin-bottom:9px}
 .listening-question-card .reading-question-top{margin-bottom:7px}
 .listening-answer{min-height:126px;font-size:12px;padding:4px 1px;border-width:8px;border-image-width:8px;gap:5px}
 .listening-answer img{height:58px}
 .listening-answer-footer{margin-top:8px;min-height:52px;grid-template-columns:1fr 102px}
 .listening-answer-footer .reading-feedback{font-size:10px;min-height:45px}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:620px){
 .listening-stage{gap:10px;padding:2px 0 5px}.listening-layout{gap:6px}
 .listening-player{grid-template-columns:80px 1fr;border-width:10px;border-image-width:10px;padding:5px 7px;gap:12px}
 .listening-character{width:80px;height:145px}
 .listening-kicker{font-size:7px;margin-bottom:4px}.listening-player h2{font-size:19px;margin-bottom:5px}
 .listening-instruction{display:none}.listening-status{min-height:31px;font-size:10px;margin-top:5px}
 .listening-audio-buttons{gap:4px}.listening-play,.listening-pause{font-size:9px;min-height:44px;border-width:8px;border-image-width:8px}
 .listening-pause{font-size:8px}
 .listening-question-card{border-width:10px;border-image-width:10px;padding:6px 7px}
 .listening-question-card .reading-question{font-size:15px;min-height:42px;margin-bottom:8px}
 .listening-question-card .reading-question-top{font-size:8px;margin-bottom:6px}
 .listening-answer{min-height:120px;font-size:12px;border-width:7px;border-image-width:7px;padding:3px 1px;gap:5px}
 .listening-answer img{height:52px}.listening-option-text{min-height:34px}
 .text-options .listening-answer{min-height:70px;font-size:13px}
 .listening-answer-footer{min-height:51px;margin-top:7px;grid-template-columns:1fr 99px;gap:6px}
 .listening-answer-footer .reading-next{min-height:44px;font-size:10px}
 .listening-answer-footer .reading-feedback{font-size:10px;line-height:1.35;min-height:45px}
 .listening-stage .reading-progress{gap:4px}
}
@media(orientation:landscape) and (max-height:600px){
 .listening-stage{gap:10px;padding:3px 0 5px;justify-content:center}
 .listening-layout{grid-template-columns:.9fr 1.3fr;gap:12px}
 .listening-player{grid-template-columns:100px 1fr;gap:13px;border-width:12px;border-image-width:12px;padding:7px 8px}
 .listening-character{width:100px;height:195px}
 .listening-kicker{font-size:7px;margin-bottom:6px}.listening-player h2{font-size:21px;margin-bottom:6px}
 .listening-instruction{font-size:11px;margin-bottom:8px}
 .listening-play,.listening-pause{min-height:44px;font-size:9px;border-width:8px;border-image-width:8px;padding:0 2px}
 .listening-pause{font-size:8px}.listening-audio-buttons{gap:5px}
 .listening-status{font-size:10px;line-height:1.4;min-height:42px;margin-top:7px}
 .listening-question-card{border-width:12px;border-image-width:12px;padding:8px 9px}
 .listening-question-card .reading-question-top{font-size:8px;margin-bottom:6px}
 .listening-question-card .reading-question{font-size:16px;min-height:40px;margin-bottom:9px;line-height:1.35}
 .listening-options{gap:6px}.listening-answer{min-height:130px;font-size:13px;border-width:8px;border-image-width:8px;padding:5px 2px;gap:6px}
 .listening-answer img{height:58px}.listening-option-text{min-height:36px}
 .text-options .listening-answer{min-height:70px;font-size:14px}
 .listening-answer-footer{margin-top:8px;grid-template-columns:1fr 105px;gap:7px;min-height:51px}
 .listening-answer-footer .reading-feedback{font-size:10px;line-height:1.35;min-height:45px}.listening-answer-footer .reading-next{min-height:44px;font-size:10px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:740px){
 .listening-layout{grid-template-columns:.8fr 1.4fr;gap:10px}
 .listening-player{grid-template-columns:75px 1fr;gap:8px;padding:5px;border-width:10px;border-image-width:10px}
 .listening-character{width:75px;height:166px}.listening-player h2{font-size:18px}.listening-instruction{display:none}
 .listening-status{font-size:9px;min-height:40px}.listening-play,.listening-pause{font-size:8px}
 .listening-question-card{border-width:10px;border-image-width:10px;padding:6px 7px}
 .listening-question-card .reading-question{font-size:15px}
 .listening-answer{font-size:12px;min-height:126px}.listening-answer img{height:54px}
}
@media(prefers-reduced-motion:reduce){.listening-character,.listening-question-card .reading-question{animation:none!important}.listening-audio-buttons button{transition:none}}
/* Fill the reserved illustration area while preserving the generated aspect ratio. */
.listening-player{grid-template-columns:200px 1fr}
.listening-character{width:200px}
.listening-answer:hover:not(:disabled){transform:translateY(-1px)}
@media(max-width:1100px){.listening-player{grid-template-columns:156px 1fr}.listening-character{width:156px}}
@media(orientation:portrait){.listening-player{grid-template-columns:190px 1fr}.listening-character{width:190px}}
@media(max-width:700px) and (orientation:portrait){.listening-player{grid-template-columns:126px 1fr}.listening-character{width:126px}}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){.listening-player{grid-template-columns:108px 1fr}.listening-character{width:108px}}
@media(max-width:700px) and (orientation:portrait) and (max-height:620px){.listening-player{grid-template-columns:92px 1fr}.listening-character{width:92px}}
@media(orientation:landscape) and (max-height:600px){.listening-player{grid-template-columns:120px 1fr}.listening-character{width:120px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:740px){.listening-player{grid-template-columns:75px 1fr}.listening-character{width:75px}}

/* National flags retain their source proportions and smooth, accurate details. */
.listening-answer img.national-flag{image-rendering:auto;object-fit:contain}