/* Subject-focused lesson scenes. Motion is owned by Timeline so pause/replay can stop it. */
.math-topic{position:absolute;inset:16% 8% 18%;display:flex;flex-direction:column;align-items:center;gap:3vh}
.math-topic-art{display:flex;align-items:center;justify-content:center;gap:5vw;width:100%;height:64%}
.math-topic-art>span{width:25%;height:100%;display:grid;place-items:center}
.math-topic-art img{width:100%;height:100%;object-fit:contain}
.math-topic-art>span:nth-child(2){transform:rotate(-12deg)}
.math-topic-numbers{display:flex;align-items:center;justify-content:center;gap:4vw;width:100%;line-height:1}
.math-topic-numbers strong{font-size:clamp(52px,min(16vh,11vw),190px);color:#ffe66b;-webkit-text-stroke:2px #0861b4;paint-order:stroke fill;text-shadow:0 3px 0 #fff}
.quantity-source{position:absolute;left:22%;top:26%;width:25%;height:41%;display:grid;place-items:center;pointer-events:none}
.quantity-source img{width:100%;height:100%;object-fit:contain}
.math-group{top:15%;height:66%}
.math-object .count-tag{right:2%;top:5%;z-index:2;box-shadow:0 3px 0 #0861b433}
.number-panel{top:15%;height:66%}
.number-panel:not(.counter) .big-number{font-size:clamp(120px,min(63vh,32vw),700px)}
.practice-group{top:16%;height:44%}
.number-panel.counter{right:3%;width:24%;top:19%;height:58%}
.number-label[hidden]{display:none}
.zero-lesson{position:absolute;inset:0}
.zero-lesson .zero-tray{left:6%;top:27%;width:45%;height:43%;overflow:visible}
.zero-lesson .zero-tray.is-empty{background:#fff5c477;border-style:dashed}
.zero-lesson .zero-number{left:auto;right:7%;top:17%;width:34%;height:62%;z-index:2}
.zero-lesson .zero-number .big-number{font-size:clamp(120px,min(62vh,32vw),700px)}
.zero-lesson .zero-number .number-word{font-size:clamp(30px,7vh,90px)}
.zero-number[hidden]{display:none}
.collect-layout{inset:24% 5% 20%;gap:6%}
.collect-target{width:61%;border-radius:28px;border-width:clamp(3px,.6vh,7px);transition:background-color .2s,border-color .2s}
.collect-target.is-complete{border-color:#fff19a;background:#d8ffc277}
.target-label{left:calc(50% - 5vh);top:-8vh;width:10vh;height:10vh;display:grid;place-items:center;border-radius:28%;font-size:8vh;box-shadow:0 3px 0 #b78613;z-index:2}
.collection-tray{gap:3%;padding:4%}
.collection-tray .collect-slot{width:43%;height:45%;background:#fff8e536;border:2px dashed #ffe9a177}
.object-pool{width:33%;gap:3%}
.object-pool .collect-slot{width:44%;height:30%}
.collect-cube{touch-action:manipulation;transform-origin:top left;box-shadow:none}
.collect-cube.is-flying{z-index:4;pointer-events:none}
.collect-cube:disabled{opacity:1;cursor:default}
.collect-cube .count-tag{right:0;top:3%;min-width:clamp(26px,5vh,56px);height:clamp(26px,5vh,56px);font-size:clamp(20px,4vh,42px)}
.sequence{top:17%;height:41%}
.math-summary{position:absolute;inset:14% 4% 16%;display:flex;flex-direction:column;align-items:center;gap:1vh}
.math-summary-star{font-size:12vh;line-height:1;color:#ffdc55;-webkit-text-stroke:2px #fff;filter:drop-shadow(0 3px 0 #db9a1d)}
.math-summary-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.4vw;width:100%;flex:1;min-height:0}
.math-summary-card{display:flex;flex-direction:column;align-items:center;padding:1.5vh .6vw;border:3px solid #e7ffff;border-radius:24px;background:#eaffff66;min-width:0;box-shadow:0 4px 0 #0b9dd51a}
.math-summary-card.is-reviewed{border-color:#ffe16c;background:#faffdbcc}
.math-summary-card>strong{font-size:clamp(50px,min(15vh,9vw),190px);line-height:1;color:#0755ae}
.math-summary-objects{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:3%;width:100%;flex:1;min-height:0;padding-top:1vh}
.math-summary-objects>span{display:grid;place-items:center;width:46%;height:29%}
.math-summary-objects[data-count="1"]>span{width:85%;height:70%}
.math-summary-objects[data-count="2"]>span{width:83%;height:44%}
.math-summary-objects img{width:100%;height:100%;object-fit:contain}
.math-summary-objects>.summary-empty{width:86%;height:65%;border:3px dashed #d1a140;border-radius:24%;background:#fff1bf66}
/* Themed practice: the task is part of a basket or train scene, with no timers or scores. */
.math-game{position:absolute;inset:14% 4% 15%;display:flex;flex-direction:column;isolation:isolate}
.game-heading{display:flex;align-items:center;justify-content:space-between;gap:3vw;font-size:clamp(20px,3.8vh,44px);font-weight:800;line-height:1.15;color:#0755a6}
.game-route{display:flex;gap:.6vw;align-items:center;color:#91afba;font-size:3.7vh}
.game-route i{display:grid;place-items:center;font-style:normal;min-width:3.3vh;min-height:3.3vh;border:2px solid transparent;border-radius:50%}
.game-route .is-current{border-color:#ffca4d;background:#fffbe2}.game-route .is-done{color:#16935c}
.game-stage{position:relative;margin-top:2vh;height:27vh;flex:none}
.game-goal{position:absolute;right:3%;top:0;display:grid;place-items:center;width:16%;height:100%;z-index:2}
.game-goal strong{display:block;font-size:clamp(65px,19vh,220px);line-height:1;color:#ffdc44;-webkit-text-stroke:clamp(2px,.6vh,7px) #0755a6;paint-order:stroke fill}
.game-stage-content{position:absolute;left:16%;right:23%;top:0;bottom:0;display:flex;align-items:center;justify-content:center}
.game-ground{position:absolute;z-index:-1;left:-2%;right:-2%;bottom:0;height:31%;background:#fff1cc77;border-radius:50% 50% 24px 24px}
.math-game[data-mode="group"] .game-stage{height:20vh}
.math-game[data-mode="group"] .game-goal{left:42%;right:auto;width:16%}
.math-game[data-mode="group"] .game-goal strong{font-size:19vh}
.gift-scenery{position:absolute;left:11%;bottom:10%;width:13%;height:33%;border:clamp(3px,.8vh,9px) solid #6fbe6f;border-top-width:0;border-radius:0 0 60% 60%;transform:rotate(-10deg);background:#d3f6a2}
.gift-scenery:before{content:'';position:absolute;width:25%;height:150%;left:40%;bottom:0;border-radius:100%;background:#78c175;transform:rotate(22deg)}
.math-game--practice .gift-scenery{display:none}
.game-cargo{display:flex;align-content:center;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;height:100%;gap:2%;border:clamp(3px,.6vh,7px) solid #fff;border-radius:25px;background:#eaffff66;padding:1vh 1vw}
.game-item{position:relative;display:grid;place-items:center;width:30%;height:46%;min-width:0}
.game-item img{width:100%;height:100%;object-fit:contain}
.game-cargo[data-count="1"] .game-item{width:70%;height:95%}
.game-cargo[data-count="2"] .game-item{width:46%;height:95%}
.game-cargo[data-count="3"] .game-item{width:30%;height:95%}
.game-empty{display:block;width:82%;height:73%;border:3px dashed #cfa940;border-radius:24%;background:#fff4bd66}
#lesson:has(.math-game[data-mode="group"]) #answers{bottom:15%;height:37%;left:5%;right:5%}
#lesson:has(.math-game[data-mode="group"]) .answer-row{height:100%;gap:3vw;align-items:stretch}
#lesson:has(.math-game[data-mode="group"]) .answer{height:100%;width:30%;min-width:0;padding:1vh 1vw;border-radius:24px;background:#eaffff44}
#lesson:has(.math-game[data-mode="group"]) .answer.right{background:#c9ff9a99}
.game-option-group{height:100%;width:100%;gap:3%;align-content:center}
.game-option-group .game-item{width:43%;height:43%}
.game-option-group[data-count="3"] .game-item:first-child{margin-left:22%;margin-right:22%}
.game-option-group[data-count="1"] .game-item{width:75%;height:88%}
.game-option-group[data-count="5"] .game-item{width:30%;height:43%}
.game-basket{display:block;position:relative;width:100%;height:100%;padding:9% 3% 10%}
.basket-handle{position:absolute;left:25%;right:25%;top:1%;height:55%;border:clamp(4px,1.1vh,12px) solid #c08a4e;border-bottom:0;border-radius:50% 50% 0 0}
.game-basket .game-items{position:relative;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2%;width:100%;height:87%;z-index:1}
.game-basket .game-item{width:30%;height:48%}
.game-basket .game-items[data-count="1"] .game-item{width:72%;height:93%}
.game-basket .game-items[data-count="2"] .game-item{width:45%;height:93%}
.game-basket .game-items[data-count="3"] .game-item{width:30%;height:93%}
.basket-front{position:absolute;left:1%;right:1%;bottom:0;height:24%;border:3px solid #b87c3f;border-radius:6px 6px 35% 35%;background:repeating-linear-gradient(0deg,#f5d195 0 8px,#e4b876 8px 10px);z-index:2}
.game-basket .game-empty{position:absolute;left:12%;top:25%;width:76%;height:57%}
.train-engine{position:absolute;left:0;bottom:0;width:12vw;height:17vh;border:3px solid #fff;border-radius:14px 25px 10px 10px;background:#ffc552;box-shadow:0 3px 0 #ce8b20}
.train-engine:before{content:'';position:absolute;left:10%;top:-25%;width:48%;height:65%;border:3px solid #fff;border-radius:12px 12px 0 0;background:#ff8d66}
.train-engine:after{content:'';position:absolute;left:67%;top:-15%;width:17%;height:20%;border-radius:5px;background:#0755a6}
.train-window{position:absolute;left:21%;top:-11%;width:27%;height:24%;z-index:1;background:#b8f4ff;border:2px solid #fff;border-radius:5px}
.train-engine>i,.number-wagon>i{position:absolute;bottom:-1.6vh;width:3.5vh;height:3.5vh;border:clamp(2px,.5vh,5px) solid #0755a6;border-radius:50%;background:#d7f5ff}
.train-engine>i:first-of-type,.number-wagon>i:first-of-type{left:15%}.train-engine>i:last-of-type,.number-wagon>i:last-of-type{right:15%}
.math-game--train .game-ground{height:2vh;bottom:34%;background:repeating-linear-gradient(90deg,#7c8a8d 0 4vw,transparent 4vw 5vw);border-top:3px solid #75898e;border-bottom:3px solid #75898e;border-radius:0}
.math-game--train[data-mode="sequence"] .game-stage-content{right:0;left:16%}
.number-train{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2vw;width:100%;align-items:end;height:90%}
.number-wagon{position:relative;display:grid;place-items:center;min-width:0;height:75%;border:3px solid white;border-radius:15px;background:#7dd6c6;box-shadow:0 3px 0 #409d9b}
.number-wagon:before{content:'';position:absolute;right:-1.3vw;bottom:15%;width:1.4vw;height:4px;background:#0755a6;z-index:-1}
.number-wagon:last-child:before{display:none}
.number-wagon strong{font-size:clamp(40px,10vh,120px);line-height:1;color:#0755a6}
.number-wagon.is-missing{background:#fff1b3;border-color:#edb52d;box-shadow:0 0 0 3px white,0 3px 0 #c09327}
.math-game[data-mode="build"] .game-stage{height:51vh;margin-top:6vh}
.math-game[data-mode="build"] .game-stage-content{left:0;right:0}
.math-game[data-mode="build"] .gift-scenery{display:none}
.game-build{display:flex;align-items:stretch;justify-content:space-between;gap:7%;width:100%;height:100%}
.build-destination{position:relative;width:57%;border:5px solid #fff2b2;border-radius:25px;background:#fff6cf66;padding:3%}
.build-destination.is-complete{border-color:#c0f79a;background:#d7ffc888}
.build-number{position:absolute;left:calc(50% - 5vh);top:-7vh;width:10vh;height:10vh;border:3px solid white;border-radius:20px;display:grid;place-items:center;background:#ffe167;color:#0755a6;font-size:8vh;line-height:1;z-index:3}
.build-tray,.build-pool{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:3%;height:100%}
.build-tray{width:100%}.build-pool{width:36%;padding:2% 0}
.build-slot{display:flex;align-items:center;justify-content:center;position:relative;width:30%;height:45%;border-radius:20px}
.build-pool .build-slot{width:43%;height:30%}
.build-tray .build-slot{border:2px dashed #c8b57388;background:#fff8e544}
.build-item{position:relative;display:grid;place-items:center;border:0;background:transparent;width:100%;height:100%;padding:0;border-radius:20px;transform-origin:top left;touch-action:manipulation;box-shadow:none}
.build-item img{width:100%;height:100%;object-fit:contain}
.build-item .count-tag{right:0;top:0;font-size:4vh;min-width:5vh;height:5vh}
.build-item:disabled{opacity:1;cursor:default}.build-item.is-flying{z-index:5;pointer-events:none}
.build-basket{border-color:#c59154;border-width:5px 5px 3vh;background:repeating-linear-gradient(0deg,#ffefc877 0 12px,#e9c38277 12px 14px);border-radius:25px 25px 30% 30%}
@media(max-height:450px) and (orientation:landscape){
  .math-summary-card{border-width:2px;border-radius:15px;padding:1vh .4vw}
  .collect-target{border-radius:18px}.collection-tray .collect-slot{border-width:1px}
  .zero-lesson .zero-tray{border-width:4px}
  .game-heading{font-size:4vh}.game-route{gap:.4vw}.game-route i{border-width:1px}
  .number-wagon,.train-engine{border-width:2px;border-radius:9px}.number-wagon>i,.train-engine>i{border-width:2px}
  .build-destination{border-width:3px}.build-basket{border-bottom-width:2vh}.build-number{border-width:2px;border-radius:10px}
  #lesson:has(.math-game[data-mode="group"]) .answer{border-width:2px;border-radius:15px}
}