/* Shared controls stay available while the lesson itself is paused. */
.toolbar{left:2.5vw;right:auto;top:2vh;width:calc(95vw - clamp(140px,17vw,240px) - 66px);display:flex;gap:.7vw;align-items:center}
.tool-button{display:flex;align-items:center;justify-content:center;gap:.35em;min-height:clamp(44px,7vh,76px);padding:.5vh 1vw;border:3px solid #fff;border-radius:18px;background:#075cca;color:#fff;box-shadow:0 3px 0 #0048a8;font-size:clamp(13px,1.8vw,25px);font-weight:700;line-height:1.1}
.tool-button>span:first-child{font-size:1.4em;line-height:1}
.tool-button:focus-visible{outline-color:#ffdc44}
.progress-group{position:absolute;left:0;top:calc(clamp(44px,7vh,76px) + 1vh);width:95vw;display:flex;flex-direction:column;gap:.5vh}
.progress{display:flex;gap:clamp(2px,.25vw,5px);width:100%;height:clamp(8px,1.2vh,14px);margin:0;background:transparent;overflow:visible;border-radius:0}
.progress span{position:relative;flex:1;min-width:0;width:auto!important;height:100%;border-radius:5px;background:#b5c7d3;border:1px solid #7896aa}
.progress span[data-state="complete"]{background:#16975e;border-color:#087644}
.progress span[data-state="current"]{background:#075cca;border:2px solid #fff;box-shadow:0 0 0 2px #075cca;transform:scaleY(1.3)}
#progress-label{font-size:clamp(12px,2.2vh,23px);font-weight:700;line-height:1.15;color:#004795}
.camera-control{width:clamp(140px,17vw,240px);height:clamp(44px,7vh,76px);font-size:clamp(14px,1.7vw,24px);font-weight:700;line-height:1.1;padding:.5vh .7vw;top:2vh;right:calc(2.5vw + 54px)}
.fullscreen-control{top:2vh}
.pause-status{position:absolute;z-index:12;right:3%;bottom:2.5%;margin:0;padding:.4em 1em;border-radius:999px;background:#fff5bf;color:#004795;border:2px solid #e8b924;font-size:clamp(15px,2.8vh,28px);font-weight:700;pointer-events:none}
#paused{background:#fff5bf;z-index:12}
.is-paused #pause{background:#08794e}
.is-paused #scene *,.is-paused #answers *{animation-play-state:paused!important}
#caption{bottom:2.4%;left:11%;right:11%;font-size:clamp(22px,5.2vh,64px)}
#answers{bottom:13%;left:5%;right:5%}
.answer-row{gap:3vw}
.answer{min-width:17vw;height:18vh;min-height:58px;font-size:clamp(40px,12vh,140px);padding:1vh 2vw;border-radius:20%}
.answer.selected,.primary.selected{outline:5px solid #ffbd24;outline-offset:3px;background:#fff5c9}
.answer:has(.mini-group),.answer:has(.mini-tray){height:53vh;background:#e6ffff7a}
.math-group{top:21%;height:61%;width:67%;left:3%}
.math-object{padding-bottom:0;width:31%;height:91%}
.math-object img{width:100%;height:100%}
.math-group[data-size="1"] .math-object{width:65%;height:100%}
.math-group[data-size="2"] .math-object{width:47%;height:100%}
.math-group[data-size="4"] .math-object,.math-group[data-size="5"] .math-object{padding-bottom:0}
.number-panel{top:22%;height:59%;right:3%;width:25%}
.number-panel:not(.counter) .big-number{font-size:clamp(120px,min(59vh,32vw),700px)}
.number-panel:not(.counter) .number-word{font-size:clamp(28px,min(8vh,6vw),96px)}
.practice-group{left:5%;width:90%;top:21%;height:41%}
.practice-group .math-object{max-width:28%;height:100%}
.practice-group[data-size="4"] .math-object,.practice-group[data-size="5"] .math-object{height:100%;width:18%;max-width:18%}
.zero-tray{top:29%;height:42%}
.collect-layout{inset:24% 4% 36%}
.sequence{top:24%;height:34%}
.writing-board{top:22%;height:61%}
.lesson-cards,.lesson-cards[data-count="2"]{width:90vw;max-width:none;height:55vh;gap:3vw}
.lesson-entry{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.4vh;align-items:stretch}
.lesson-card{flex:1;min-height:0;width:100%}
.lesson-restart{min-height:44px;border:2px solid #fff;border-radius:999px;background:#e6ffff;color:#0758bd;font-size:clamp(17px,3vh,32px);font-weight:700}
.lesson-entry:has(.lesson-restart) .lesson-picture{height:20vh}
.control-panel{z-index:75;background:#dffbff}
.control-options{display:flex;gap:3vw;width:85%;max-width:1300px;justify-content:center}
.control-option{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2vh;border:4px solid #fff;border-radius:24px;background:#fff;min-height:32vh;padding:2vh 2vw;color:#064baf}
.control-option[aria-pressed="true"]{border-color:#075cca;box-shadow:0 0 0 4px #fff}
.control-option>span{font-size:10vh;line-height:1}.control-option strong{font-size:clamp(24px,5vh,52px)}.control-option small{font-size:clamp(16px,3vh,30px)}
.control-note{max-width:80%}.after-lesson{padding:.5em 1em;background:#fff8cf;border-radius:20px;color:#004795}
#finished:has(#after-lesson:not([hidden])) .finish-star{font-size:18vh}
/* Larger Vietnamese subjects, with room for the shared toolbar and answers. */
.vi-illustration{left:4%;right:4%;top:21%;bottom:14%}
.vi-context .vi-illustration{left:5%;right:5%;top:20%;bottom:30%}
.vi-sentence{left:4%;right:4%;bottom:17%;font-size:clamp(27px,8vh,100px)}
.vi-letter-forms,.vi-review{padding:22vh 4vw 14vh}
.vi-letter-card{min-width:25vw;padding:2vh 4vw}
.vi-letter-card>.vi-glyph{font-size:clamp(92px,35vh,420px)}
.vi-card-label{font-size:clamp(18px,4vh,46px)}
.vi-pronunciation{padding:22vh 4vw 14vh;gap:8vw}
.vi-mouth-card{height:57vh;width:40vw;max-width:none}
.vi-pronunciation .vi-letter-card{min-width:26vw}
.vi-selected{outline:5px solid #ffbd24;outline-offset:3px;background:#fff2bc}
.vi-match{padding-top:21vh;padding-bottom:37vh}
.vi-sample{min-width:22vw;padding:.5vh 3vw}
.vi-sample>.vi-glyph{font-size:23vh}
.vi-match:has(.vi-demo-row){padding-top:22vh;padding-bottom:13vh;gap:2vh}
.vi-match:has(.vi-demo-row) .vi-sample>.vi-glyph{font-size:16vh}
.vi-demo-row .vi-letter-card{min-width:20vw;padding:.5vh 3vw}
.vi-demo-row .vi-glyph{font-size:18vh}
.vi-independent{padding:23vh 4vw 36vh}
.vi-print-reference{min-width:0;padding:1vh 1vw}
.vi-print-reference>.vi-glyph{font-size:clamp(65px,21vh,200px)}
.vi-listen-cue{width:25vh;height:25vh;max-width:none}
#lesson:has(.turn-chip) .vi-illustration{left:23%;right:3%;top:22%;bottom:15%}
#lesson:has(.turn-chip) .vi-pronunciation{padding-left:24vw;gap:3vw}
#lesson:has(.turn-chip) .vi-mouth-card{width:29vw}
.turn-chip{top:25%}
@media(max-height:450px) and (orientation:landscape){
  .toolbar{gap:1.6vh .5vw}.tool-button{padding:.4vh .7vw;border-width:2px;border-radius:12px}
  .camera-control{width:150px;font-size:14px}.progress-group{gap:.7vh}
  .lesson-card,.lesson-cards[data-count="2"] .lesson-card{padding:1vh 2vw;gap:.5vh}
  .lesson-cards[data-count="2"] .lesson-picture,.lesson-entry:has(.lesson-restart) .lesson-picture{height:17vh}
  .lesson-cards[data-count="2"] .lesson-picture b{font-size:16vh}
  .lesson-copy{gap:.6vh}.lesson-cards[data-count="2"] .lesson-copy>strong{font-size:4.6vh}
  .lesson-restart{min-height:34px;font-size:16px}
  .control-panel{gap:2vh}.control-option{min-height:30vh;padding:1vh}.control-options{width:90%}
  #finished{gap:1vh;padding:2vh}.finish-cast .guide-face{height:13vh;width:13vh}
  #finished .finish-star{font-size:18vh}.after-lesson{font-size:4vh!important}
}
@media(orientation:portrait){
  .camera-control{width:150px;font-size:15px}
  .home-head{margin-top:6vh}.catalog-heading{margin-top:4vh}
  .lesson-cards,.lesson-cards[data-count="2"]{height:auto;width:90vw;gap:2vh}
  .lesson-entry{flex:none;gap:1vh}.lesson-card{min-height:18vh}
  .lesson-entry:has(.lesson-restart) .lesson-picture{height:13vh}
  .control-options{flex-direction:column;width:90%;gap:2vh}.control-option{min-height:20vh;gap:1vh}.control-option>span{font-size:5vh}
  .control-option strong{font-size:26px}.control-option small{font-size:17px}
  .control-panel{padding:2vh 4vw;gap:1.5vh;justify-content:flex-start;overflow-y:auto}
  .control-panel h2{font-size:clamp(24px,4vw,32px)}
  .control-panel p{font-size:18px;line-height:1.2}
  .control-panel .control-option{min-height:18vh;gap:.6vh;padding:1vh 2vw;flex:none}
  .control-panel .control-option>span{font-size:4vh}
  .control-panel .control-option strong{font-size:24px}
  .control-panel .control-note{max-width:100%}
}