/* Letter lesson uses the music lesson's calm park background and core theme. */
.letter-lesson .top{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0 20px}
.letter-lesson .letter{font-size:46px;color:#bc4d24;letter-spacing:2px;text-shadow:none;padding:0 8px;line-height:1.1}
.letter-lesson .topbutton,.letter-lesson .topbutton#sound{background:#fff7e0;color:#344e6b;border:2px solid #edddba;border-radius:17px;min-height:48px;padding:9px 15px;box-shadow:0 3px 0 #d7c79555;text-shadow:none;font-size:17px}
.letter-lesson .modes{margin:0 auto 20px;width:fit-content}
.letter-lesson .mode,.letter-lesson .mode.learn,.letter-lesson .mode.learn.active{min-width:190px;min-height:54px;border-radius:19px;font-size:21px;box-shadow:0 3px 0 #2d7ac4}
.letter-lesson .mode:not(.learn){box-shadow:0 3px 0 #c86e21}
.letter-lesson .mode:not(.active){color:#425774;background:#f1eee3;box-shadow:0 3px 0 #d1cbb9;text-shadow:none;filter:none}
.letter-lesson .mode.active{outline:none}
.letter-lesson main>.stars{display:none;justify-content:center;width:fit-content;margin:0 auto 12px;padding:0;border:0;background:none;box-shadow:none;gap:10px}
.letter-lesson.quiz main>.stars{display:flex}
.letter-lesson .reward-star{width:27px;height:27px}
.letter-lesson .banner{min-height:32px;margin:0 auto 18px;padding:4px 0;border:0;border-radius:0;background:none;box-shadow:none;font-size:18px;color:#425774}
.letter-lesson .cards{gap:20px;padding:0}
.letter-lesson .card,.letter-lesson .card[data-word]{padding:12px 12px 17px;border:2px solid #e7dfca;outline:0;background:#fffdf7;box-shadow:0 4px 0 #ddd3b54d;border-radius:23px}
.letter-lesson .picture{height:clamp(155px,25vh,240px);object-fit:contain;padding:0;background:#fffdf7;border-radius:15px}
.letter-lesson .word{font-size:clamp(28px,3vw,36px);margin-top:14px;letter-spacing:0;color:#10284e;text-shadow:none}
.letter-lesson .word b{color:#bc4d24}
.letter-lesson .cn{font-size:16px;font-weight:500;color:#52647a;margin-top:5px}
.letter-lesson .quiz-controls{margin-top:22px;gap:12px}
.letter-lesson #next:disabled{display:none}
.letter-lesson.quiz .card{padding-bottom:17px}
.letter-lesson .card.playing{border-color:#409af0;outline:3px solid #c6e4ff;box-shadow:0 4px 0 #88bcea55}
.letter-lesson .card.correct{border-color:#399358;outline:3px solid #c3e9bc;box-shadow:0 4px 0 #89bd7755}
.letter-lesson .card.wrong{border-color:#d69b40;outline:3px solid #ffe5ad;box-shadow:none}
.letter-lesson .win .lion-art{width:80px;height:80px}
.letter-lesson .win h2{font-size:30px}
.letter-lesson .win p{font-size:19px}
@media(max-width:900px){.letter-lesson .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.letter-lesson .picture{height:clamp(135px,22vh,210px)}}
@media(min-width:901px) and (max-height:800px){.letter-lesson .top{margin:12px 0 16px}.letter-lesson .modes{margin-bottom:18px}.letter-lesson .picture{height:clamp(140px,23vh,190px)}}
@media(max-width:520px){.letter-lesson .top{gap:8px;flex-wrap:wrap;margin:14px 0 18px}.letter-lesson .letter{font-size:36px;padding:0 2px}.letter-lesson .topbutton,.letter-lesson .topbutton#sound{font-size:14px;min-height:48px;padding:9px 8px}.letter-lesson .modes{width:100%;gap:12px;margin-bottom:18px}.letter-lesson .mode,.letter-lesson .mode.learn,.letter-lesson .mode.learn.active{min-width:0;flex:1;min-height:52px;font-size:18px;padding:9px 7px}.letter-lesson .cards{gap:15px}.letter-lesson .card,.letter-lesson .card[data-word]{padding:8px 8px 13px;border-radius:19px}.letter-lesson .picture{height:clamp(110px,20vh,165px)}.letter-lesson .word{font-size:29px;margin-top:10px}.letter-lesson .cn{font-size:14px}.letter-lesson .banner{font-size:16px}.letter-lesson .quiz-controls .action{flex:none;min-width:130px;min-height:50px}}