@font-face{font-family:Baloo;src:url('./assets/art/baloo2.ttf') format('truetype');font-weight:400 800;font-display:swap}
:root{font-family:Baloo,'Trebuchet MS',sans-serif;color:#002a93;background:#2ee6ed;font-synthesis:none;touch-action:manipulation}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:5px solid #fff;outline-offset:5px}button[disabled]{cursor:default} [hidden]{display:none!important}
#lesson{width:100vw;height:100dvh;min-height:260px;position:relative;overflow:hidden;background:#30e7ec url('./assets/art/background.png') center/cover no-repeat;isolation:isolate;user-select:none;-webkit-user-select:none}
.toolbar{position:absolute;z-index:10;top:max(2.5vh,env(safe-area-inset-top));left:max(2.5vw,env(safe-area-inset-left));right:max(2.5vw,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between}
.round{width:clamp(44px,9vh,88px);height:clamp(44px,9vh,88px);border:3px solid #7ce9ff;border-radius:50%;background:linear-gradient(145deg,#1793ff,#0052da 65%,#003ca8);box-shadow:inset 0 -5px 0 #003d9b,0 2px 0 #00b2ed;padding:12px;color:white}
.round svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:6}
.progress{width:31%;height:clamp(5px,1.2vh,12px);background:#b0faff;border-radius:100px;margin-top:1vh;overflow:hidden}.progress span{display:block;height:100%;width:0;background:#0788ff;border-radius:inherit}
#scene{position:absolute;inset:0}#caption{position:absolute;bottom:3.5%;left:5%;right:5%;margin:0;text-align:center;font-size:clamp(21px,5.7vh,56px);font-weight:800;line-height:1.15;min-height:1.2em;pointer-events:none}
.object-zone{position:absolute;left:3%;top:18%;width:69%;height:61%}.group-ring{position:absolute;inset:-2% -1% -3%;border:clamp(3px,.7vh,8px) solid #e2feff;border-radius:25% 22% 20% 24% / 23% 30% 25% 30%;opacity:0}.group-ring.visible{opacity:1}
.fruit{position:absolute;top:2%;width:30%;height:70%;display:flex;align-items:center;justify-content:center}.fruit:nth-child(2){left:1.5%}.fruit:nth-child(3){left:35%}.fruit:nth-child(4){left:68.5%}.fruit img{width:115%;height:115%;object-fit:contain;filter:drop-shadow(0 7px 0 #03bad02b)}
.fruit.lit img,.leaf.lit img,.practice-fruit.lit img{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 9px #fff)}
.count-tag{position:absolute;right:0;top:0;min-width:clamp(26px,5.4vh,56px);height:clamp(26px,5.4vh,56px);display:grid;place-items:center;background:#fff;color:#0052c5;border:3px solid #0075d8;border-radius:50%;font-size:clamp(20px,4.3vh,42px);font-weight:800;line-height:1}
.dot{position:absolute;top:81%;width:8%;aspect-ratio:1;background:radial-gradient(circle at 30% 24%,#41d8ff 0 12%,#075bff 15% 55%,#0042dc 90%);border:3px solid #0049df;border-radius:50%;opacity:0;transform:scale(.2)}
.dot:before{content:'';position:absolute;width:12%;height:42%;left:44%;bottom:115%;background:#0bb2eb;border-radius:99px}.dot.lit{box-shadow:0 0 0 6px #fff}.dot:nth-of-type(1){left:12.5%}.dot:nth-of-type(2){left:46%}.dot:nth-of-type(3){left:79.5%}
.number-panel{position:absolute;right:3.5%;top:14%;width:22%;height:67%;display:flex;flex-direction:column;align-items:center;justify-content:center}.big-number{color:#ffdc00;font-size:clamp(140px,75vh,700px);font-weight:800;line-height:.8;-webkit-text-stroke:clamp(6px,2vh,18px) #002889;paint-order:stroke fill;text-shadow:0 4px 0 #002889}.number-word{font-size:clamp(30px,11vh,110px);font-weight:800;line-height:1;margin-top:1vh}.number-label{font-size:clamp(19px,4vh,40px);font-weight:700;margin-bottom:2vh}.number-panel.counter .big-number{font-size:clamp(110px,48vh,480px)}
.leaf-zone{position:absolute;left:3%;top:21%;width:69%;height:57%;display:flex;align-items:center;gap:3%}.leaf{position:relative;width:31.3%;height:95%;border:0;background:transparent;padding:2%;border-radius:40%}.leaf img{width:100%;height:100%;object-fit:contain}.leaf.counted{box-shadow:0 0 0 4px #eaffff inset}.leaf .check{position:absolute;right:3%;top:6%;background:white;border-radius:50%;width:clamp(28px,6vh,60px);height:clamp(28px,6vh,60px);font-size:clamp(20px,4.5vh,45px);font-weight:800;display:grid;place-items:center}.touch-hint{position:absolute;bottom:0;left:42%;font-size:clamp(30px,7vh,70px);pointer-events:none;filter:drop-shadow(0 2px 1px #207099)}
.choices{position:absolute;left:3%;right:3%;top:22%;height:54%;display:flex;gap:2%}.choice{position:relative;width:32%;height:100%;padding:0;border:clamp(3px,.65vh,7px) solid #e7ffff;border-radius:18% / 22%;background:#b8ffff0d;box-shadow:none}.choice.selected{background:#b7f9ff55}.choice.correct{border-color:#fff27a;background:#c6fff655;box-shadow:0 0 0 5px #08b17b}.practice-fruit{position:absolute;width:38%;height:42%;display:flex;align-items:center;justify-content:center}.practice-fruit img{width:100%;height:100%;object-fit:contain}.practice-fruit .count-tag{right:-3%;top:0;font-size:clamp(15px,3.5vh,32px);width:clamp(24px,4.7vh,44px);height:clamp(24px,4.7vh,44px);min-width:0}
.choice[data-count="2"] .practice-fruit:nth-child(1){left:9%;top:28%}.choice[data-count="2"] .practice-fruit:nth-child(2){right:9%;top:28%}.choice[data-count="4"] .practice-fruit:nth-child(1){left:9%;top:6%}.choice[data-count="4"] .practice-fruit:nth-child(2){right:9%;top:6%}.choice[data-count="4"] .practice-fruit:nth-child(3){left:9%;bottom:6%}.choice[data-count="4"] .practice-fruit:nth-child(4){right:9%;bottom:6%}.choice[data-count="3"] .practice-fruit:nth-child(1){left:31%;top:6%}.choice[data-count="3"] .practice-fruit:nth-child(2){left:9%;bottom:6%}.choice[data-count="3"] .practice-fruit:nth-child(3){right:9%;bottom:6%}
.overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#38e7edf2;padding:4vh 4vw;gap:2vh}.overlay h1,.overlay h2{font-size:clamp(25px,7vh,64px);line-height:1.15;margin:0;font-weight:800}.overlay p{font-size:clamp(18px,3.8vh,34px);margin:0}.primary{border:3px solid #fff8a0;border-radius:999px;background:linear-gradient(#ffea48,#ffd000);box-shadow:0 6px 0 #d6a500,0 10px 20px #0a85b52b;padding:1vh 4vw;font-size:clamp(22px,4.8vh,43px);font-weight:800;margin-top:2vh}.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #d6a500}.primary span{margin-left:.6em}.welcome-art{display:flex;height:29vh;align-items:center;gap:4vw}.welcome-art img{height:100%;max-width:30vw;object-fit:contain}.welcome-art strong,.finish-number{font-size:32vh;font-weight:800;line-height:1;color:#ffde00;-webkit-text-stroke:5px #0033a0;paint-order:stroke fill}.finish-number{font-size:30vh}#welcome,#finished{background:transparent}#paused{background:#21cbdde8;z-index:35}#audio-error{z-index:40}#rotate{z-index:50;background:#2ce3ec}.rotate-icon{font:100px/1 sans-serif;margin-bottom:1rem}#rotate h2{font-size:clamp(24px,6vw,45px)}#rotate p{font-size:clamp(18px,4vw,25px)}
@media(max-height:430px) and (orientation:landscape){#caption{bottom:3%;font-size:5.8vh}.toolbar{top:2vh}.round{padding:8px;border-width:2px}.number-panel{top:17%}.object-zone{top:20%;height:58%}.overlay{gap:2vh}.primary{margin-top:1vh}.welcome-art{height:26vh}.welcome-art strong{font-size:29vh}.count-tag{border-width:2px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.home{gap:2vh;background:transparent}.home h1{font-size:clamp(25px,6vh,58px)}.subjects{display:flex;width:min(88vw,1000px);height:66vh;gap:5vw;justify-content:center}.subject{width:43%;border:5px solid white;border-radius:12% / 9%;box-shadow:0 8px 0 #009bc84d;background:#e4ffff;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1.1;padding:2vh 2vw;gap:1vh}.subject.vietnamese{background:#fff0c6}.subject-picture{height:26vh;display:flex;align-items:center;justify-content:center;gap:1vw}.subject-picture img{width:12vw;height:22vh;object-fit:contain}.subject-picture b{font-size:24vh;color:#ffcf00;-webkit-text-stroke:4px #003599;paint-order:stroke fill}.subject-picture.letters{font-size:clamp(64px,20vh,180px);font-weight:800;color:#e74c8f}.subject>strong{font-size:clamp(24px,5vh,46px)}.subject>span:not(.subject-picture){font-size:clamp(20px,4vh,35px)}.subject small{font-size:clamp(17px,3.3vh,28px);background:#0b66d8;color:white;border-radius:999px;padding:.6vh 3vw;margin-top:1vh}.adult-link{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:clamp(16px,2.8vh,24px);padding:8px 12px}.pause-links{display:flex;gap:3vw;margin-top:3vh}.pause-links button{border:2px solid #fff;border-radius:999px;background:#d9ffff;padding:1vh 3vw;font-size:clamp(18px,3.6vh,32px)}
#answers{position:absolute;left:4%;right:4%;bottom:13%;z-index:8;display:flex;justify-content:center;gap:2vw}.answer-row{display:flex;justify-content:center;align-items:center;gap:3vw;width:100%}.answer{position:relative;display:grid;place-items:center;min-width:clamp(65px,10vw,140px);height:clamp(56px,12vh,118px);font-size:clamp(36px,8vh,74px);font-weight:800;line-height:1;border:clamp(3px,.6vh,6px) solid white;border-radius:25%;padding:1vh 2vw;box-shadow:0 5px 0 #049fca;background:#e9ffff}.answer.right{background:#c9ff9a;border-color:#2eaf4d}.answer.review{background:#fff3c1}.answer.hinted{box-shadow:0 0 0 6px #fff590,0 5px 0 #049fca}.answer:has(.mini-group),.answer:has(.mini-tray){height:51vh;width:31%;border-radius:20%;padding:1vw;background:#b8ffff20;box-shadow:none}.answer-row:has(.mini-group),.answer-row:has(.mini-tray){gap:2%}.answer:has(.mini-tray){width:40%}.answer.right:has(.mini-group),.answer.right:has(.mini-tray){background:#c9ff9a77}.mini-group{display:flex;align-content:center;justify-content:center;flex-wrap:wrap;width:100%;height:100%;position:relative;gap:2%}.mini-group .countable{position:relative;width:44%;height:43%;display:flex;align-items:center;justify-content:center}.mini-group[data-count="3"] .countable:first-child{margin-left:25%;margin-right:25%}.mini-group img{width:100%;height:100%;object-fit:contain}.mini-group .count-tag{right:0;top:0;font-size:4vh;width:5vh;height:5vh;min-width:24px}.mini-tray{display:flex;justify-content:center;align-items:center;width:100%;height:85%;border:5px solid #ffd56e;border-radius:25%;background:#fff5bd66}.mini-tray img{width:60%;height:80%;object-fit:contain}
.math-group{position:absolute;left:3%;top:19%;width:69%;height:61%;display:flex;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap;gap:1%;border:clamp(3px,.7vh,7px) solid transparent;border-radius:22%}.math-group.outlined{border-color:#edffff}.math-object{position:relative;display:flex;align-items:center;justify-content:center;width:31%;height:85%;padding-bottom:12%;flex:none;border-radius:30%}.math-object img{width:105%;height:110%;object-fit:contain}.math-group[data-size="1"] .math-object{width:53%;height:90%}.math-group[data-size="2"] .math-object{width:43%;height:90%}.math-group[data-size="4"] .math-object{width:40%;height:48%;padding-bottom:3%}.math-group[data-size="5"] .math-object{width:30%;height:47%;padding-bottom:3%}.math-group[data-size="4"],.math-group[data-size="5"]{align-content:space-around}.math-group[data-size="5"] .math-object:nth-child(4){margin-left:16%}.math-group[data-size="5"] .math-object:nth-child(5){margin-right:16%}.math-object.lit img,.countable.lit img{filter:drop-shadow(0 0 6px white) drop-shadow(0 0 5px white)}.math-object.counted{box-shadow:0 0 0 4px white inset}.math-object[role="button"]{cursor:pointer;touch-action:manipulation}.math-object:focus-visible{outline:4px solid white;outline-offset:2px}.object-dot{position:absolute;bottom:3%;left:40%;width:20%;aspect-ratio:1;border:3px solid #0069e6;border-radius:50%;background:radial-gradient(circle at 30% 25%,#9af1ff 0 11%,#0777f8 15% 65%,#0554df 100%)}.object-dot:before{content:'';position:absolute;height:25%;width:10%;left:45%;bottom:115%;background:#0aa7dc;border-radius:999px}.object-dot.lit{box-shadow:0 0 0 5px #fff}.math-group[data-size="4"] .object-dot,.math-group[data-size="5"] .object-dot{width:12%;left:44%;bottom:0}.practice-group{top:17%;left:6%;width:88%;height:44%}.practice-group .math-object{padding-bottom:0;max-width:24%;height:95%}.practice-group[data-size="4"] .math-object,.practice-group[data-size="5"] .math-object{max-width:18%;width:18%;height:95%;padding:0}.practice-group[data-size="5"] .math-object:nth-child(4),.practice-group[data-size="5"] .math-object:nth-child(5){margin:0}.practice-group .object-dot{display:none}.math-group[data-size="0"]{border-color:#ffe7a0;background:#fff2c142}.empty-inside{width:80%;height:70%;border:2px solid #ffe7a0;border-radius:18%}
.zero-tray{position:absolute;left:4%;top:26%;width:48%;height:42%;border:8px solid #ffdf8c;border-radius:20%;background:#fff4bb5c}.zero-cube{position:absolute;left:30%;top:5%;width:40%;height:90%;display:flex;align-items:center;justify-content:center}.zero-cube img{width:100%;height:100%;object-fit:contain}.zero-tray~.number-panel{right:25%;top:24%;width:22%;height:46%}.zero-tray~.number-panel .big-number{font-size:42vh}.zero-tray~.number-panel .number-word{font-size:7vh}
.collect-layout{position:absolute;inset:18% 4% 26%;display:flex;gap:5%;align-items:stretch}.collect-target{position:relative;width:63%;border:5px solid #ffe39b;border-radius:12%;background:#fff4c35c}.target-label{position:absolute;top:-14%;left:44%;width:12%;font-size:8vh;font-weight:800;line-height:1;background:#ffdf68;border:3px solid white;border-radius:30%;text-align:center}.collection-tray{height:100%;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:2%;padding:3%}.object-pool{width:32%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2%}.collect-cube{position:relative;background:transparent;border:0;padding:0;width:30%;height:48%;border-radius:25%}.collect-cube img{width:100%;height:100%;object-fit:contain}.collection-tray .collect-cube{width:30%;height:45%}.check-answer{padding:0 4vw;min-width:90px;margin:0;line-height:1.2}.collect-cube:focus-visible{outline:4px solid white}.rest{position:absolute;inset:19% 8% 29%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.rest-symbol{font-size:13vh;line-height:1;color:#ffc900;-webkit-text-stroke:3px #0c62bc}.rest h2{font-size:6vh;margin:2vh 0}.rest p{font-size:3.7vh;margin:0}.sequence{position:absolute;left:4%;right:4%;top:22%;height:37%;display:flex;gap:1.5%;align-items:stretch}.sequence-cell{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;border:3px solid white;border-radius:18%;background:#e8ffff40;padding:1vh .5vw}.sequence-cell.current{background:#fff4a0;border-color:#ffc500;box-shadow:0 0 0 3px #fff}.sequence-cell strong{font-size:10vh;line-height:1.05}.sequence-dots{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10%;height:42%;width:85%}.sequence-dots i{width:22%;aspect-ratio:1;border-radius:50%;background:#0075eb;height:auto;max-height:35%}.writing-board{position:absolute;left:32%;right:20%;top:17%;height:61%;border:5px solid white;border-radius:6%;overflow:hidden;background:#f4ffff}.writing-board svg{width:100%;height:100%;display:block}.writing-strokes path{vector-effect:non-scaling-stroke}.report{z-index:45;overflow:auto;background:#dbfbff}.report-sheet{width:min(960px,95vw);max-height:95vh;overflow:auto;padding:2vh 2vw;text-align:left}.report h2{font-size:clamp(22px,5vh,42px);text-align:center}.report article{margin:2vh 0;padding:1.5vh 2vw;border:2px solid #85d9e7;border-radius:20px;background:#fff}.report h3{font-size:clamp(19px,3.5vh,28px);margin:.5vh 0}.report p,.report dt,.report dd{font-size:clamp(16px,2.8vh,22px);margin:0}.report dl{display:flex;gap:3vw;justify-content:space-between}.report dd{font-weight:800;color:#0854b9}.report-note{margin-top:2vh!important}.report .primary{display:block;margin:2vh auto;font-size:clamp(20px,4vh,32px)}#finished{background:#37e7ef}#finished .finish-number{font-size:24vh;color:#31ba73;-webkit-text-stroke:3px white}
@media(max-height:430px) and (orientation:landscape){.subjects{height:65vh}.subject{border-width:3px}.subject-picture{height:24vh}.subject-picture img{height:23vh}.subject-picture b{font-size:24vh}.subject>strong{font-size:5.5vh}.subject>span:not(.subject-picture){font-size:4.5vh}.subject small{font-size:4vh}.home h1{font-size:6.5vh}.adult-link{font-size:14px;padding:5px 10px}.math-group{top:21%;height:57%}.practice-group{top:18%;height:42%}.answer{border-width:3px}.answer:has(.mini-group),.answer:has(.mini-tray){height:49vh}.writing-board{top:20%;height:58%}.pause-links button{font-size:18px}.rest p{font-size:4vh}.report dl{display:block}.report dl>div{display:flex;justify-content:space-between;margin:5px 0}}
.subject-picture.letters{font-family:QuicksandLesson,Baloo,sans-serif;font-weight:700}

#answers{pointer-events:none}#answers>*{pointer-events:auto}

/* Subject and lesson catalog use the same full viewport as the lesson stage. */
html,body{width:100%;height:100%;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#lesson{width:100%;height:100dvh}
#lesson:fullscreen{width:100vw;height:100dvh}
#lesson::backdrop{background:#30e7ec}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fullscreen-control{position:absolute;z-index:60;top:max(2.5vh,env(safe-area-inset-top));right:max(2.5vw,env(safe-area-inset-right));width:44px;height:44px;border:2px solid #fff;border-radius:14px;background:#f1ffffde;box-shadow:0 3px 0 #0096bc55;padding:9px;color:#075bc3}
.fullscreen-control svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.toolbar{right:max(calc(2.5vw + 58px),env(safe-area-inset-right))}
.home{padding:5vh 4vw 3vh;gap:3vh}
.home h1{font-size:clamp(30px,7.5vh,68px);line-height:1.1}
.subjects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(92vw,1280px);height:63vh;gap:3vw}
.subjects .subject{width:100%;padding:3vh 1.5vw;gap:3vh;border-radius:12% / 9%;transition:transform .15s ease,box-shadow .15s ease}
.subject:hover,.lesson-card:hover{transform:translateY(-3px)}
.subject:active,.lesson-card:active{transform:translateY(2px)}
.subject.english{background:#e8e2ff}
.subjects .subject-picture{height:30vh;max-width:100%;gap:0}
.subjects .subject-picture img{width:11vw;height:28vh;max-width:45%}
.subjects .subject-picture b{font-size:24vh}
.subjects .subject-picture.letters{font-size:min(22vh,13vw,180px);white-space:nowrap;line-height:1}
.subjects .subject>strong{font-size:clamp(22px,5.8vh,50px)}
.subject-picture.english-letters{font-family:QuicksandLesson,Baloo,sans-serif;letter-spacing:-.11em;padding-right:.1em}
.subjects .english-letters b{font-size:15vh;-webkit-text-stroke:2px white;text-shadow:0 4px 0 #7a70ba22;color:#fb9b35}
.subjects .english-letters b:nth-child(2){color:#8862d1;transform:translateY(-1vh)}
.subjects .english-letters b:nth-child(3){color:#1fb5a8}
.home .adult-link,.lesson-list>.adult-link{font-size:clamp(15px,3vh,24px);padding:7px 12px}
.lesson-list{background:transparent;padding:5vh 6vw 3vh;gap:3vh}
.catalog-back{position:absolute;left:max(2.5vw,env(safe-area-inset-left));top:max(2.5vh,env(safe-area-inset-top));display:flex;align-items:center;gap:.4em;min-height:44px;padding:.3vh 1.6vw;border:2px solid white;border-radius:999px;background:#e6ffff;color:#0758bd;font-size:clamp(16px,3.3vh,28px);font-weight:700;box-shadow:0 3px 0 #0096bc44}
.catalog-back>span{font:700 1.8em/.7 sans-serif}
.catalog-heading h1{font-size:clamp(30px,7.5vh,68px);line-height:1.05;margin:0}
.catalog-heading p{font-size:clamp(18px,3.8vh,34px);margin:.8vh 0 0}
.lesson-cards{display:flex;justify-content:center;align-items:stretch;width:min(78vw,980px);height:55vh}
.lesson-card{display:flex;align-items:center;justify-content:center;gap:3vw;width:100%;border:5px solid white;border-radius:8% / 14%;background:#e4ffff;box-shadow:0 8px 0 #009bc84d;padding:3vh 4vw;transition:transform .15s ease,box-shadow .15s ease}
.lesson-card.vietnamese{background:#fff0c6}
.lesson-picture{display:flex;align-items:center;justify-content:center;width:43%;height:90%;gap:0;flex:none}
.lesson-picture img{width:55%;height:90%;object-fit:contain}
.lesson-picture b{font-size:28vh;line-height:1;color:#ffcf00;-webkit-text-stroke:4px #003599;paint-order:stroke fill}
.lesson-picture.letters{font-family:QuicksandLesson,Baloo,sans-serif;font-size:min(25vh,18vw,210px);font-weight:700;color:#e74c8f;white-space:nowrap;line-height:1}
.lesson-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2.5vh;min-width:0}
.lesson-number{font-size:clamp(18px,3.8vh,32px);line-height:1;color:#086ac4}
.lesson-copy>strong{font-size:clamp(25px,6.5vh,58px);font-weight:800;line-height:1.15}
.lesson-action{display:flex;align-items:center;gap:1em;font-size:clamp(20px,4.3vh,36px);font-weight:700;color:white;background:#086ad9;padding:1vh 2.8vw;border-radius:999px;line-height:1.2}
.lesson-action>span{font-size:.7em}
.empty-catalog{height:55vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;width:min(80vw,900px);border:4px solid white;border-radius:7% / 12%;background:#efeaffcf;box-shadow:0 8px 0 #009bc84d;padding:4vh 4vw}
.empty-letters{font-family:QuicksandLesson,Baloo,sans-serif;font-size:20vh;font-weight:700;line-height:1;color:#8160c8;letter-spacing:.05em}
.empty-catalog p{font-size:clamp(21px,4.8vh,40px);font-weight:700;line-height:1.2}
@media(max-height:430px) and (orientation:landscape){
  .home,.lesson-list{gap:2vh;padding-top:4vh;padding-bottom:2vh}
  .home h1,.catalog-heading h1{font-size:7.5vh}
  .subjects{height:62vh;gap:2.5vw}
  .subjects .subject{border-width:3px;gap:3vh}
  .subjects .subject>strong{font-size:6vh}
  .home .adult-link,.lesson-list>.adult-link{font-size:14px;padding:4px 8px}
  .catalog-heading p{font-size:4vh}
  .lesson-cards,.empty-catalog{height:54vh}
  .lesson-card{border-width:3px;padding:2vh 4vw}
  .lesson-copy{gap:2vh}
  .lesson-picture b{font-size:27vh}
  .lesson-picture.letters{font-size:25vh}
  .lesson-copy>strong{font-size:7vh}
  .lesson-action{font-size:4.8vh}
  .catalog-back{font-size:14px;padding:4px 10px}
  .empty-catalog{border-width:3px}
}
@media(prefers-reduced-motion:reduce){.subjects .subject,.lesson-card{transition:none}}


/* ===== Nâng cấp 17/10/2026: lượt tự làm, nghe lại câu hỏi, Hà và Nam, ngôi sao, phần người lớn ===== */
/* Lúc máy đang đọc câu hỏi: đáp án mờ đi, cái loa nhấp nháy (nghe xong mới chọn). */
#answers.is-listening .answer{opacity:.5}
.say-again{position:absolute;z-index:9;left:max(2.5vw,env(safe-area-inset-left));bottom:max(3vh,env(safe-area-inset-bottom));width:clamp(52px,11vh,96px);height:clamp(52px,11vh,96px);border:4px solid #fff;border-radius:50%;background:#fff8c7;box-shadow:0 5px 0 #009ac530;padding:1.6vh;color:#0758bd}
.say-again svg,.speak-button svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.say-again svg path:first-child,.speak-button svg path:first-child{fill:currentColor}
.say-again.is-speaking{animation:speak-pulse 1s ease-in-out infinite}
@keyframes speak-pulse{50%{transform:scale(1.08);box-shadow:0 0 0 8px #fff59088,0 5px 0 #009ac530}}
/* Dấu tích của lượt tự làm. */
.turn-done{display:flex;align-items:center;gap:.5em;margin:0;padding:1.2vh 3.5vw;font-size:clamp(22px,5vh,46px)}
.turn-done>span{font-size:1.15em;line-height:1}
/* Hình minh hoạ của lượt tự làm (dùng chung với camera). */
.turn-chip{position:absolute;z-index:9;left:2.5%;top:16%;display:flex;flex-direction:column;align-items:center;gap:.6vh;width:clamp(120px,24vh,240px);padding:1.4vh 1vw 1.6vh;border:clamp(3px,.6vh,6px) solid #fff;border-radius:22%;background:#ffffffe8;color:#002a93;box-shadow:0 6px 0 #0398cc40;pointer-events:none;animation:chip-in .35s ease-out}
.turn-chip[data-place="right"]{left:auto;right:2.5%}
.turn-chip[data-place="low"]{top:auto;bottom:14%;left:4%}
.turn-chip .pose-svg{width:78%}
.turn-chip-label{font-size:clamp(16px,3.4vh,32px);font-weight:800;line-height:1.1;text-align:center}
.turn-chip[data-state="done"]{background:#d9ffe3;border-color:#2fbf5b;color:#086b2f}
.turn-chip[data-state="done"] .pose-ring-fg{stroke:#2fbf5b}
.turn-chip[data-state="done"]::after{content:"\2713";position:absolute;right:6%;top:4%;width:1.4em;height:1.4em;display:grid;place-items:center;border-radius:50%;background:#2fbf5b;color:#fff;font-size:clamp(18px,3.6vh,34px);font-weight:800}
@keyframes chip-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.pose-svg{display:block;width:100%;height:auto;overflow:visible}
.pose-ring-bg{fill:none;stroke:currentColor;stroke-opacity:.2;stroke-width:5}
.pose-ring-fg{fill:none;stroke:#ffd43b;stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50px 50px}
.pose-body{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.pose-arrow{stroke:#ffb400;stroke-width:4.5;animation:pose-blink 1.1s ease-in-out infinite}
@keyframes pose-blink{50%{opacity:.3}}
/* Bạn Hà / bạn Nam hiện lên khi nhắc, gợi ý. */
.guide-face{display:block;border-radius:50%;border:4px solid #fff;background:#bdf6ff;box-shadow:0 5px 0 #009bc84d;object-fit:cover}
.lesson-guide{position:absolute;z-index:9;left:max(2.5vw,env(safe-area-inset-left));bottom:calc(max(3vh,env(safe-area-inset-bottom)) + clamp(60px,13vh,110px));pointer-events:none}
.lesson-guide img{display:block;width:clamp(70px,17vh,150px);height:clamp(70px,17vh,150px);border-radius:50%;border:4px solid #fff;box-shadow:0 5px 0 #009bc84d;background:#bdf6ff}
.lesson-guide.is-on img{animation:guide-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes guide-pop{from{transform:translateY(40%) scale(.6);opacity:0}to{transform:none;opacity:1}}
/* Màn chọn môn: Hà và Nam chào, nút loa nghe hướng dẫn. */
.home-head{display:flex;align-items:center;justify-content:center;gap:2.5vw}
.home-head .guide-face{width:clamp(56px,13vh,120px);height:clamp(56px,13vh,120px)}
.speak-button{width:clamp(44px,8vh,72px);height:clamp(44px,8vh,72px);border:3px solid #fff;border-radius:50%;background:#fff8c7;box-shadow:0 4px 0 #009ac530;padding:1.2vh;color:#0758bd}
.speak-button.small{display:inline-block;vertical-align:middle;width:clamp(36px,6vh,54px);height:clamp(36px,6vh,54px);margin-left:.4em;padding:.8vh}
.subject{position:relative}
.subject-stars,.lesson-stars{position:absolute;top:3%;right:4%;padding:.15em .55em;border-radius:999px;background:#fff;color:#e8a100;border:3px solid #ffd43b;font-size:clamp(16px,3.6vh,32px);font-weight:800;line-height:1.2}
.subject.is-soon{opacity:.62;filter:saturate(.6)}
.subject>span.soon-badge{font-size:clamp(15px,3vh,26px);font-weight:800;color:#fff;background:#8862d1;border-radius:999px;padding:.2em .9em}
.subject.is-shake{animation:shake .45s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
/* Danh sách buổi học: nhiều thẻ đứng cạnh nhau, thẻ nên học tiếp có viền vàng. */
.lesson-cards[data-count="2"]{gap:3vw;width:min(90vw,1100px)}
.lesson-cards[data-count="2"] .lesson-card{position:relative;flex:1;flex-direction:column;gap:2vh;padding:2.5vh 2vw;border-radius:10% / 12%}
.lesson-cards[data-count="2"] .lesson-picture{width:100%;height:24vh}
.lesson-cards[data-count="2"] .lesson-picture img{width:auto;height:100%}
.lesson-cards[data-count="2"] .lesson-picture b{font-size:21vh}
.lesson-cards[data-count="2"] .lesson-copy{align-items:center;text-align:center;gap:1.4vh}
.lesson-cards[data-count="2"] .lesson-copy>strong{font-size:clamp(22px,5vh,46px)}
.lesson-card{position:relative}
.lesson-card.is-next{border-color:#ffd43b;box-shadow:0 0 0 5px #fff59088,0 8px 0 #009bc84d}
/* Màn học xong: ngôi sao, Hà và Nam, pháo giấy. */
.finished{overflow:hidden}
.finish-cast{display:flex;align-items:center;justify-content:center;gap:3vw}
.finish-cast .guide-face{width:clamp(70px,18vh,170px);height:clamp(70px,18vh,170px)}
.finish-star{font-size:clamp(90px,26vh,260px);line-height:1;color:#ffd43b;-webkit-text-stroke:4px #fff;text-shadow:0 6px 0 #e3a700;animation:star-pop .8s cubic-bezier(.3,1.7,.5,1)}
@keyframes star-pop{0%{transform:scale(.2) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-4vh;left:var(--x);width:1.6vmin;height:2.4vmin;border-radius:30%;background:var(--c);animation:confetti-fall var(--d) ease-in var(--delay) forwards}
@keyframes confetti-fall{to{transform:translateY(110vh) rotate(var(--r))}}
/* Phần người lớn: giữ nút ~1,5 giây mới mở. */
.adult-link{-webkit-touch-callout:none;background-image:linear-gradient(90deg,#ffe06699,#ffe06699);background-repeat:no-repeat;background-size:0 100%;border-radius:999px}
.adult-link.is-holding{animation:hold-fill 1.5s linear forwards}
@keyframes hold-fill{to{background-size:100% 100%}}
.report-sheet{width:min(960px,100%)}
.report{overflow-x:hidden}
.report-tip{margin:1vh 0 2vh!important;padding:1.2vh 1.5vw;border-radius:16px;background:#fff8d6;border:2px solid #ffe08a}
/* Lấy khối: mỗi khối một chỗ cố định, chỗ đã lấy để trống (viền đứt). */
.collect-slot{display:flex;align-items:center;justify-content:center;width:30%;height:48%;border-radius:25%}
.collection-tray .collect-slot{height:45%}
.collect-slot .collect-cube,.collection-tray .collect-slot .collect-cube{width:100%;height:100%}
.pool-slot.is-empty{border:3px dashed #ffffffb3}
/* Màn hình dọc: chọn môn và chọn bài dùng được; chỉ phần học mới cần xoay ngang. */
@media(orientation:portrait){
  .home{justify-content:flex-start;padding-top:max(9vh,calc(env(safe-area-inset-top) + 64px));gap:2.5vh}
  .home-head{gap:4vw}
  .home-head .guide-face{width:13vw;height:13vw}
  .home h1{font-size:clamp(26px,8vw,48px)}
  .subjects{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr);height:62vh;width:min(88vw,560px);gap:2vh}
  .subjects .subject{flex-direction:row;justify-content:flex-start;gap:5vw;padding:1vh 6vw;border-radius:7% / 18%}
  .subjects .subject-picture{height:100%;width:42%;flex:none}
  .subjects .subject-picture img{width:auto;height:11vh;max-width:50%}
  .subjects .subject-picture b{font-size:12vh}
  .subjects .subject-picture.letters{font-size:min(11vh,15vw);white-space:nowrap}
  .subjects .english-letters b{font-size:8vh}
  .subjects .subject>strong{font-size:clamp(22px,6vw,40px)}
  .subjects .subject>span.soon-badge{position:absolute;right:4%;top:6%;bottom:auto;font-size:clamp(14px,2.4vh,24px)}
  .lesson-list{justify-content:flex-start;padding-top:max(10vh,calc(env(safe-area-inset-top) + 70px))}
  .lesson-cards,.lesson-cards[data-count="2"]{flex-direction:column;height:auto;width:min(88vw,560px);gap:2vh}
  .lesson-card,.lesson-cards[data-count="2"] .lesson-card{flex-direction:row;padding:2vh 5vw;gap:5vw}
  .lesson-picture,.lesson-cards[data-count="2"] .lesson-picture{width:38%;height:16vh}
  .lesson-picture b,.lesson-cards[data-count="2"] .lesson-picture b{font-size:13vh}
  .lesson-picture.letters{font-size:min(12vh,15vw);white-space:nowrap}
  .lesson-cards[data-count="2"] .lesson-copy{align-items:flex-start;text-align:left}
  .lesson-copy>strong,.lesson-cards[data-count="2"] .lesson-copy>strong{font-size:clamp(20px,5.4vw,34px)}
  .lesson-action{font-size:clamp(17px,4.4vw,28px)}
}
@media(prefers-reduced-motion:reduce){.say-again.is-speaking,.turn-chip,.pose-arrow,.lesson-guide.is-on img,.finish-star,.subject.is-shake,.adult-link.is-holding{animation:none}.adult-link.is-holding{background-size:100% 100%}}

/* Responsive review 18/10: a numeral must fit its column on near-square screens. */
.number-panel:not(.counter) .big-number{font-size:clamp(120px,min(70vh,38vw),640px)}
.number-panel:not(.counter) .number-word{font-size:clamp(30px,min(10vh,8vw),100px)}
.zero-tray~.number-panel .big-number{font-size:42vh}
.zero-tray~.number-panel .number-word{font-size:7vh}
/* Math has no print-letter reference beside the board: centre its writing model. */
#lesson[data-subject="math"] .writing-board{left:26%;right:26%}
/* The report owns the screen; global controls must not cover its text. */
.report{z-index:70}
@media(orientation:portrait){
  .report dl{display:block}
  .report dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:12px 0}
  .report dt{flex:1;min-width:0}
  .report dd{flex:0 0 auto;max-width:40%;text-align:right}
}