@font-face{font-family:Nunito;src:url(fonts/nunito.ttf) format('truetype');font-weight:200 1000;font-display:swap}@font-face{font-family:'Noto Sans Thai';src:url(fonts/noto-sans-thai.ttf) format('truetype');font-weight:100 900;font-display:swap}
:root{--board:#a7d8ff;--navy:#102963;--blue:#1e5af4;--white:#fff;--green:#08794e}*{box-sizing:border-box}.kna-player-body{margin:0!important;color:var(--navy);font-family:Nunito,'Noto Sans Thai',system-ui,sans-serif;background:radial-gradient(ellipse at 30% 0,#e0faff 0,transparent 50%),linear-gradient(145deg,#23bedc,#065086);background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden;min-height:100dvh}#wpadminbar{display:none!important}html:has(.kna-player-body){margin-top:0!important}button,input,a{-webkit-tap-highlight-color:transparent}.kna-shell{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);margin:auto;position:absolute;inset:0;display:flex;flex-direction:column;padding:1.2% 2%;gap:1.2%;font-size:clamp(12px,1.3vw,20px)}.topbar{height:9%;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:14px}.collection-title{font-size:clamp(18px,2.9vw,44px);font-weight:900;margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fffffff0;border-radius:40px;padding:4px 26px;max-width:52%}.btn{font:inherit;font-weight:800;color:var(--navy);background:#fff;border:2px solid transparent;border-radius:18px;padding:10px 22px;cursor:pointer;box-shadow:0 4px 0 #0d427b20;transition:background .15s,box-shadow .15s;touch-action:manipulation;text-decoration:none}.btn:hover:not(:disabled){background:#eef6ff;box-shadow:0 5px 12px #21468022}.btn:focus-visible,a:focus-visible{outline:4px solid #e68816;outline-offset:3px}.btn:disabled{cursor:default}.btn.primary,.tabs .active,.segments .active{background:var(--blue);color:#fff;box-shadow:0 5px 12px #1556c640}.btn.primary:hover{background:#1647c7}.btn.small{padding:3px 7px;font-size:.7em;box-shadow:none}.top-controls{display:flex;align-items:center;gap:10px}.color-wrap{display:flex;align-items:center;background:#fff;border-radius:30px;padding:5px;gap:3px}.color-wrap input{width:30px;height:28px;padding:0;border:0;background:none;cursor:pointer}.icon{width:clamp(38px,4.7vw,68px);height:clamp(38px,4.7vw,68px);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:10px;flex-shrink:0;font-size:1.8em}.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}.board{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:linear-gradient(125deg,#ffffff65,#ffffff00),var(--board);border:clamp(4px,.6vw,9px) solid white;border-radius:clamp(22px,3vw,48px);box-shadow:0 12px 24px #063b5c40;padding:1% 2% 1.5%;overflow:hidden}.tabs{display:flex;justify-content:center;flex-shrink:0;gap:4px;max-width:100%;overflow-x:auto;padding:3px 0 8px}.tabs .btn{padding:6px 25px;white-space:nowrap;border-radius:18px;font-size:.95em}.tabs[hidden]{display:none}.view{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;position:relative;gap:10px;overflow:auto}.view h2{font-size:clamp(22px,3vw,42px);font-weight:900;margin:0}.view p{margin:0}.view-bar{display:flex;align-items:center;justify-content:space-between;width:100%;flex-shrink:0;padding:0 10px}.counter{white-space:nowrap;border-radius:30px;background:#ffffffed;padding:8px 20px;font-size:1.15em;font-weight:900;box-shadow:0 4px 0 #0c509418}.intro{justify-content:center;text-align:center;gap:14px}.cover-image{height:49%;max-width:60%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:22px;box-shadow:0 6px 20px #305ba322}.actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:12px}.lesson-media{flex:1;min-height:0;width:100%;display:flex;justify-content:center}.lesson-media img{height:100%;max-width:100%;aspect-ratio:1;object-fit:contain;border:3px solid white;border-radius:20px;background:white}.caption{display:flex;align-items:center;justify-content:center;gap:15px;text-align:center;font-size:clamp(20px,3.1vw,46px);font-weight:800;flex-wrap:wrap;flex-shrink:0;line-height:1.25}.caption .emphasis{color:#672ce5}.caption .icon{background:#195af5;color:white}.caption.compact{font-size:1.6em}.lesson-arrows{display:flex;width:100%;justify-content:space-between;flex-shrink:0}.video-wrap{aspect-ratio:16/9;flex:1;min-height:0;max-width:80%;height:100%;width:auto;display:flex;justify-content:center}.video-wrap iframe,.video-wrap>div{aspect-ratio:16/9;height:100%;width:100%;border:0;border-radius:16px}.segments{display:flex;gap:8px;flex-shrink:0;max-width:90%;overflow:auto;padding:4px}.segments .btn{min-width:44px;padding:7px 15px}.video-next{position:absolute;right:0;bottom:0;font-size:.8em}.gallery{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;padding:5px 2px 12px}.game-card{padding:0 0 12px;text-align:left;border:3px solid white;border-radius:18px;overflow:hidden;position:relative;display:flex;flex-direction:column;gap:4px}.game-card strong,.game-card>small{padding:0 10px}.game-card strong{font-size:1em}.game-card>small{font-size:.7em;font-weight:600;color:#45608a}.thumbnail{height:clamp(55px,7.5vw,114px);background:linear-gradient(120deg,#dff4ff,#7fb8f5);display:flex;align-items:center;justify-content:center;gap:5px;padding:9px;margin-bottom:4px}.mini-tile{width:30%;background:#fff;border-radius:8px;text-align:center;padding:3px}.mini-tile img{width:100%;aspect-ratio:1;object-fit:contain}.mini-tile small{font-size:9px;display:block;color:#164281;overflow:hidden}.thumb-memory{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mini-back{background:#2463dd;border:2px solid white;border-radius:6px;color:white;text-align:center;font-size:.7em}.thumb-pop .mini-tile{border-radius:50%;border:2px solid white;background:#ffffff66;box-shadow:inset 5px 5px 6px #ffffff99}.thumb-drag,.thumb-spelling{flex-direction:column}.thumbnail>img{height:60%;aspect-ratio:1;object-fit:contain}.mini-letters{display:flex;gap:4px}.mini-letters span{background:white;border-radius:4px;padding:0 5px;font-size:.7em}.mini-sentence{background:white;padding:10px;border-radius:10px;font-size:.85em}.done-mark{position:absolute;right:5px;top:5px;color:white;background:#078156;border-radius:50%;width:26px;height:26px;text-align:center}.game-bar{display:flex;align-items:center;justify-content:space-between;width:100%;flex-shrink:0;gap:10px}.game-titles{text-align:center}.game-titles h2{font-size:clamp(21px,2.6vw,39px)}.game-titles p{font-size:.8em}.stage{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;position:relative;container-type:size;overflow:auto;padding:8px}.choice-prompt{display:flex;align-items:center;justify-content:center;gap:14px;font-size:2.2em;font-weight:900;background:#ffffffeb;border:4px solid white;border-radius:50px;padding:10px 20px}.choice-prompt img{width:min(26vw,34cqh);height:min(26vw,34cqh);object-fit:contain}.game-look .choice-prompt{border-radius:22px;padding:8px}.choices{display:grid;gap:14px;width:min(96%,1100px);grid-template-columns:repeat(4,minmax(0,1fr))}.picture-option{aspect-ratio:1;padding:12px;border:5px solid white;border-radius:24px;background:#f4fcff;max-height:56cqh;justify-self:center;width:100%}.picture-option img{width:100%;height:100%;object-fit:contain}.word-choices{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}.word-option{overflow-wrap:anywhere;font-size:1.55em;padding:12px 18px}.long-choices{grid-template-columns:1fr;max-width:650px;gap:7px}.long-choices .word-option{padding:5px 12px;font-size:1.1em}.correct{border-color:#21a471!important;background:#e8fff0!important;color:#07663e!important}.wrong{animation:shake .4s;background:#ffe0e0!important;border-color:#e24c5b!important}.selected{outline:4px solid #eeae28!important}.vanished{visibility:hidden;pointer-events:none}.listen-grid{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:auto;min-height:0;padding:4px;align-content:start}.listen-card{display:flex;align-items:center;gap:8px;padding:8px;border:4px solid white;min-height:95px;min-width:0;border-radius:20px;background:#f3fbff}.listen-card img{width:45%;max-height:135px;aspect-ratio:1;object-fit:contain;background:white;border-radius:10px}.listen-card strong{flex:1;font-size:clamp(12px,1.3vw,20px);overflow-wrap:anywhere}.game-listen .stage{justify-content:flex-start}.game-listen .stage>.icon{width:50px;height:50px}.memory-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(var(--rows,2),minmax(0,1fr));gap:10px;justify-items:center;align-items:center}.memory-card{position:relative;width:min(100%,calc((100cqh - 40px)/var(--rows,2)));aspect-ratio:1;max-height:100%;padding:0;border:4px solid white;background:#2463e0!important;border-radius:18px;overflow:hidden;transition:transform .25s;transform-style:preserve-3d}.card-back{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:1.8em;background:radial-gradient(circle at 20% 10%,#ffffff33,transparent 60%)}.card-front{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:white;opacity:0;padding:6px}.flipped .card-front{opacity:1}.flipped .card-back{opacity:0}.matched{border-color:#23a972!important}.bubble-arena{position:relative;width:100%;height:100%;overflow:hidden}.bubble{position:absolute;bottom:-45%;width:20%;aspect-ratio:1;padding:15%;padding:2%;border-radius:50%;border:4px solid #ffffffd9;background:radial-gradient(ellipse at 25% 20%,#ffffffdd,transparent 25%),radial-gradient(circle at 75% 28%,#ffffff99 0 4%,transparent 5%),radial-gradient(circle at 60% 80%,#ffffff66,transparent 38%),#ffffff1a;box-shadow:inset 6px 6px 18px #ffffff77,0 8px 12px #24689015;animation:bubble-rise var(--duration) var(--delay) linear infinite;will-change:transform}.bubble:hover:not(:disabled){background-color:#ffffff33}.bubble img{width:100%;height:100%;object-fit:contain;pointer-events:none}.paused .bubble{animation-play-state:paused}.bubble.popped{border-color:transparent;background:none;box-shadow:none;overflow:visible}.pop-word{position:absolute;left:50%;top:94%;transform:translateX(-50%);background:white;border-radius:20px;padding:5px 18px;font-size:1.4em;white-space:nowrap;color:#522adc;box-shadow:0 5px 16px #12548833}.match-area{position:relative;width:90%;height:100%;min-height:0;display:flex;justify-content:space-between}.match-column{display:flex;flex-direction:column;justify-content:space-around;gap:8px;width:28%;height:100%;z-index:1}.match-column:last-child{align-items:center;width:24%}.match-word{font-size:1.45em;position:relative;overflow-wrap:anywhere;padding:8px 20px;touch-action:none}.match-word:after{content:'';position:absolute;right:-10px;top:calc(50% - 9px);width:18px;height:18px;background:var(--line);border:3px solid white;border-radius:50%}.match-picture{height:18%;aspect-ratio:1;padding:4px;border:3px solid white;border-radius:14px;position:relative;touch-action:none}.match-picture img{width:100%;height:100%;object-fit:contain}.match-picture:before{content:'';position:absolute;left:-9px;top:calc(50% - 8px);width:16px;height:16px;border:3px solid white;background:#71a4d6;border-radius:50%}.match-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 3px 2px #356cb02a)}.drawing{stroke-dasharray:15 12;animation:dash 1s linear infinite}.puzzle-grid{height:58%;aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;flex-shrink:0}.puzzle-slot,.puzzle-piece{padding:0;border-radius:5px;position:relative;overflow:hidden;aspect-ratio:1}.puzzle-slot{border:2px dashed #337ae7;background:#ffffff35;box-shadow:none}.puzzle-slot:disabled{border:0}.puzzle-fragment{display:block;position:absolute;inset:0;background-size:200% 200%;background-repeat:no-repeat;background-color:white}.puzzle-tray{display:flex;gap:14px;height:29%;width:100%;justify-content:center;flex-shrink:0}.puzzle-piece{height:100%;aspect-ratio:1;border:2px solid white;touch-action:none}.dragging{z-index:30;opacity:.85;box-shadow:0 10px 24px #12385a55;transition:none!important;overflow:visible}.completed-picture{height:65%;aspect-ratio:1;object-fit:contain;background:#fff;border:4px solid white;border-radius:20px;box-shadow:0 5px 14px #23538622}.spelling-picture,.sentence-picture{height:36%;aspect-ratio:1;position:relative;flex-shrink:0}.spelling-picture img,.sentence-picture img{height:100%;width:100%;object-fit:contain;background:white;border-radius:15px}.spelling-picture .icon,.sentence-picture .icon{position:absolute;left:105%;bottom:0;background:var(--blue);color:white}.letter-slots{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:100%}.word-group{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:center}.letter-slot,.letter-tile{height:clamp(40px,4vw,62px);width:clamp(40px,4vw,62px);padding:2px;border-radius:10px;font-size:1.7em;border:2px solid #82a7dc;line-height:1}.hinted{color:#9badc4;background:#f2f7ff}.letter-tray{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:90%;overflow:auto;padding:5px;min-height:0}.letter-tile{background:#fff6db;touch-action:none;border-color:white}.sentence-slots,.sentence-tray{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;max-width:98%}.sentence-slot,.word-tile{font-size:1.4em;min-height:48px;padding:8px 15px;border:2px dashed #6499e8;border-radius:12px}.sentence-slot{background:#ffffff88}.word-tile{border:2px solid white;touch-action:none;background:#fff7de}.sentence-stage{overflow:auto}.sentence-tray .caption{width:100%;font-size:1.8em}.complete{justify-content:center;text-align:center}.medal{font-size:clamp(45px,8vw,120px);color:#ffbc25;filter:drop-shadow(0 4px 0 #d58413)}.completion-count{font-size:1.6em;font-weight:800;margin:15px}.toast{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:#102c60;color:white;padding:12px 20px;border-radius:15px;z-index:50;opacity:0;pointer-events:none;font-size:14px;max-width:80%;text-align:center}.toast.visible{opacity:1}.rotate{display:none}.missing{font-size:14px;color:#bd3345}.punctuation{font-size:1.7em}.back{white-space:nowrap}
@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@keyframes bubble-rise{0%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(12px,-85cqh) rotate(4deg)}100%{transform:translate(-8px,-170cqh) rotate(-4deg)}}@keyframes dash{to{stroke-dashoffset:-54}}@keyframes ar-target-glow{from{filter:brightness(1)}to{filter:brightness(1.12)}}
@media(orientation:portrait) and (max-width:900px){.kna-shell{visibility:hidden}.rotate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;text-align:center;padding:30px;background:linear-gradient(130deg,#114279,#228dd4)}.rotate>div{font-size:100px}}
@media(max-height:550px) and (orientation:landscape){.kna-shell{padding:5px 12px;gap:5px}.board{padding:4px 12px 7px;border-radius:22px}.topbar{gap:6px}.collection-title{font-size:20px;padding:3px 15px}.topbar .btn{padding:5px 10px}.topbar .icon{width:34px;height:34px}.tabs{padding-bottom:3px}.tabs .btn{padding:3px 14px;font-size:12px}.view{gap:5px}.game-titles h2,.view h2{font-size:23px}.game-titles p{font-size:10px}.game-bar>.icon{width:36px;height:36px;font-size:24px}.counter{padding:4px 12px;font-size:13px}.stage{gap:7px;padding:3px}.btn{padding:6px 13px}.caption{font-size:23px;gap:8px}.caption .icon{width:36px;height:36px;padding:7px}.game-bar{max-height:45px}.gallery{gap:8px}.thumbnail{height:62px;padding:5px}.game-card{padding-bottom:6px;border-radius:11px}.game-card>small{display:none}.game-card strong{font-size:12px}.letter-slot,.letter-tile{width:44px;height:44px;font-size:22px}.spelling-picture{height:27%}.letter-slots{gap:7px}.letter-tray{gap:4px}.sentence-picture{height:30%}.word-tile,.sentence-slot{font-size:16px;min-height:36px;padding:4px 10px}.match-word{font-size:17px;padding:5px 12px}.match-area{width:85%}.listen-card{min-height:70px;padding:4px;border-width:2px;gap:4px}.listen-card img{max-height:80px}.listen-card strong{font-size:12px}.game-listen .stage>.icon{height:34px;width:34px;padding:6px}.video-wrap{max-width:65%}.segments{gap:4px}.segments .btn{padding:3px 12px;min-width:35px}.lesson-arrows .btn{padding:3px 12px}.word-option{font-size:18px}.memory-grid{gap:6px}.memory-card{border-width:2px;border-radius:10px}.color-wrap .small{display:none}.choice-prompt{font-size:23px;padding:6px 14px}.choice-prompt .icon{width:36px;height:36px;padding:7px}}
.video-wrap{width:100%;max-width:none;aspect-ratio:auto;container-type:size}.video-wrap iframe,.video-wrap>div{width:min(100%,calc(100cqh * 16 / 9));height:100%;flex:none}.video-next{position:static;align-self:flex-end;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.drawing,.wrong{animation:none}.btn{transition:none}.bubble{animation-duration:25s}}

/* Shared player refinements, 1.1. */
.topbar .tabs{flex:1;min-width:0;align-items:center;padding:3px 0;scrollbar-width:thin}
.topbar .tabs .btn{border-radius:30px}.top-controls{flex-shrink:0}.fullscreen{white-space:nowrap;border-radius:30px}
.intro .cover-image{height:48%;width:auto;max-width:100%;aspect-ratio:auto;object-fit:contain}
.intro h2{padding:5px 25px;border:2px solid #ffffffcf;border-radius:22px;background:#ffffff8a}
.intro .actions .btn:last-child:not(:first-child){background:#703bcc;color:white}
.lesson-view .view-bar{justify-content:flex-end}.lesson-media{animation:arrive .4s ease-out}.lesson-view.leaving .lesson-media{animation:depart .2s ease-in both}
.game-view{overflow:hidden}.game-bar{position:absolute;top:0;left:0;right:0;z-index:4;pointer-events:none;background:none}
.game-bar .btn{pointer-events:auto}.game-view>.stage{padding-top:clamp(65px,6.5vw,98px)}
.game-bar .game-titles{pointer-events:none}.game-bar .counter{pointer-events:none}
.game-view>.pop-stage{padding:0;overflow:hidden;isolation:isolate}.pop-stage .bubble-arena{position:absolute;inset:0;height:100%;width:100%}
.pop-prompt{position:absolute;z-index:3;top:18%;left:50%;transform:translateX(-50%);font-size:1.8em}
.bubble{left:0;top:0;bottom:auto;padding:1.5%;animation:none!important;will-change:transform;touch-action:manipulation}
.bubble img{border-radius:15%;pointer-events:none}.bubble::after{content:'';position:absolute;top:12%;left:14%;width:26%;height:14%;border-radius:50%;background:#ffffffe0;transform:rotate(-35deg);filter:blur(1px);pointer-events:none}
.bubble.revealed{border-color:transparent;background:none;box-shadow:none}.bubble.revealed::after{display:none}
.pop-word{top:50%;left:50%;transform:translate(-50%,-50%);max-width:95%;white-space:normal;overflow-wrap:anywhere;line-height:1.2;text-align:center;font-size:1.3em;padding:7px 12px;background:#fffffff2;z-index:2}
.wrong-pop{border-color:#ff4058!important;box-shadow:0 0 22px 6px #ff354899!important}
.pop-particle{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:white;box-shadow:0 0 9px #6ce4ff;animation:burst .6s ease-out both;pointer-events:none}
.game-popplay .burst img{animation:depart .55s both}.game-popplay .burst{border-color:transparent;background:none;box-shadow:none}
.matched .card-front{opacity:.38}.matched{background:white!important}.matched .card-back{display:none}
.game-recall .memory-grid{flex:1;min-height:0}.game-recall .stage>.icon{height:42px;width:42px;padding:8px}
.game-recall .memory-card{width:min(100%,calc((80cqh - 40px)/var(--rows,2)))}
.bob{animation:bob .5s ease-in-out}.drag-ghost{z-index:10000!important;pointer-events:none!important;margin:0!important;transition:none!important;box-shadow:0 8px 22px #12385a55;opacity:.94}
.drag-origin{opacity:.3}.letter-tray{flex-shrink:0;overflow:visible}.letter-slot,.letter-tile{flex-shrink:0}
.complete{justify-content:flex-start;padding-top:5%;gap:14px}.complete .celebration{font-size:clamp(24px,3.3vw,46px)}
.translation-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(90%,1000px)}
.translation-options .word-option{font-size:clamp(20px,2.5vw,36px);min-height:65px}
.game-en_th .choice-prompt,.game-th_en .choice-prompt{min-width:40%;margin-bottom:8px;font-size:3em}
.thumb-popplay .mini-tile{border-radius:50%}.thumb-recall{display:grid;grid-template-columns:repeat(3,1fr)}
.view[aria-busy=true] .btn:not(.drag-target){cursor:wait}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes arrive{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes depart{to{opacity:0;transform:translateY(-10px) scale(.96)}}
@keyframes burst{from{opacity:1;transform:rotate(var(--angle)) translateX(20px) scale(1)}to{opacity:0;transform:rotate(var(--angle)) translateX(120px) scale(.2)}}
@media(max-height:550px) and (orientation:landscape){
 .topbar .tabs .btn{padding:4px 10px}.topbar{gap:4px}.top-controls{gap:4px}.topbar .back,.fullscreen{font-size:11px}.color-wrap .small{display:block;font-size:10px}
 .game-view>.stage{padding-top:48px}.game-view>.pop-stage{padding:0}.game-bar{max-height:none}.complete{padding-top:3%;gap:6px}
 .translation-options{gap:8px}.translation-options .word-option{font-size:21px;min-height:40px;padding:5px}.game-en_th .choice-prompt,.game-th_en .choice-prompt{font-size:25px;margin-bottom:0}
 .pop-prompt{font-size:20px;top:17%;padding:4px 12px}.pop-prompt .icon{width:32px;height:32px;padding:6px}
 .game-recall .stage>.icon{height:30px;width:30px;padding:5px}.game-recall .memory-card{width:min(100%,calc((80cqh - 25px)/var(--rows,2)))}
 .color-wrap input{width:20px;height:22px}.topbar .btn{padding:5px 8px}.letter-slot,.letter-tile{height:36px;width:36px;font-size:21px}
}
@media(prefers-reduced-motion:reduce){.bob,.lesson-media,.lesson-view.leaving .lesson-media{animation:none}.pop-particle{animation-duration:.01s}}

.topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr)}.topbar>.back{justify-self:start}.topbar>.top-controls{justify-self:end}.topbar>.tabs{width:100%}

.bubble img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70%;height:70%;margin:0}.game-popplay .burst img{animation:pop-image-out .55s both}@keyframes pop-image-out{to{opacity:0;transform:translate(-50%,-50%) scale(.65)}}

/* 1.2: transitions, centered game console and persistent answer markers. */
.gallery{display:flex;flex:1;min-height:0;flex-direction:column;justify-content:center;align-items:center;gap:12px;overflow:hidden;padding:4px 0}
.gallery-row{width:100%;display:flex;align-items:stretch;justify-content:center;gap:12px;min-height:0;height:calc((100% - (var(--gallery-rows) - 1)*12px)/var(--gallery-rows));max-height:260px}
.gallery-row .game-card{width:min(250px,calc((100% - (var(--gallery-cols) - 1)*12px)/var(--gallery-cols)));flex:none;min-height:0;padding-bottom:8px}
.gallery-row .thumbnail{flex:1;min-height:0;max-height:66%;height:auto;margin-bottom:2px}
.gallery-row .mini-tile{max-height:100%;overflow:hidden}.gallery-row .mini-tile img{max-height:90px;object-fit:contain}
.gallery-row .game-card strong{font-size:clamp(11px,1.15vw,18px);line-height:1.25}.gallery-row .game-card>small{font-size:clamp(9px,.9vw,13px);line-height:1.3}
.end-actions{flex-direction:column;width:100%;gap:14px}.end-actions .next-game{width:min(440px,72%);padding:15px 25px;font-size:1.2em}.end-secondary{display:flex;justify-content:center;gap:15px}.end-secondary .btn{min-width:150px}
.listen-card.answered>*{visibility:hidden}.listen-card.answered{visibility:visible;border-color:#21a471!important;background:#e8fff088!important;box-shadow:none}
.pop-word{width:calc(100% - 12px);max-width:none;overflow-wrap:normal;word-break:normal;white-space:normal;padding:8px 5px;box-sizing:border-box}
.bubble{transform-origin:center}.pop-prompt{background:#fff;border-color:white}
.game-recall .memory-card{background:var(--recall-color,#6a91b8)!important;transition:background .3s}
.sentence-slot{width:clamp(48px,4.4vw,68px);min-width:0;transition:width .28s ease,background .2s,border-color .2s}.sentence-slot.correct{width:var(--filled-width,clamp(48px,4.4vw,68px));min-width:0}
.video-lesson-view{gap:4px}.video-lesson-view .video-wrap{flex:2 1 0;min-height:0;width:100%;max-width:none}.video-lesson-view .video-wrap iframe,.video-lesson-view .video-wrap>div{width:min(100%,calc(100cqh * 16 / 9));height:100%}.video-lesson-view .caption:empty{display:none}.audio-toggle{white-space:nowrap}
.stage>.ar-camera{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.48;pointer-events:none;border-radius:18px}.stage:has(.ar-camera)>:not(.ar-camera):not(.ar-cursor):not(.ar-hint){position:relative;z-index:2}.ar-cursor{position:absolute;z-index:8;width:34px;height:34px;margin:-17px;border:3px solid #fff;border-radius:50%;background:#2863ff99;box-shadow:0 0 0 6px #ffffff55;pointer-events:none;transition:transform .1s,background .1s,box-shadow .1s;transform:scale(1)}.ar-cursor.aiming{background:#ffe36cd9;box-shadow:0 0 0 7px #ffe36c70,0 0 20px #fff4a6}.ar-cursor.grabbing{background:#f08c25d9;transform:scale(.7)}.ar-hover{outline:4px solid #ffe36c!important;outline-offset:3px;box-shadow:0 0 0 5px #ffe36c66,0 0 24px 9px #fff4a6c9!important;animation:ar-target-glow .85s ease-in-out infinite alternate}.ar-hint{position:absolute;z-index:9;left:50%;bottom:8px;transform:translateX(-50%);max-width:88%;padding:6px 14px;border-radius:16px;background:#102963d9;color:#fff;text-align:center;font-size:.8em;font-weight:800;pointer-events:none}.ar-pressed{outline:5px solid #f08c25!important;outline-offset:3px}.ar-toggle{white-space:nowrap}.ar-mark{position:absolute;left:5px;top:5px;padding:3px 6px;border-radius:10px;background:#6737d9;color:#fff;font-size:.68em;font-weight:900}
.game-recall .card-front{transition:opacity .25s,transform .25s;transform:rotateY(90deg)}.game-recall .flipped .card-front{transform:rotateY(0)}
.game-recall .card-back{transition:opacity .25s}
.round-out{animation:round-out .2s ease-in both}.round-in{animation:round-in .3s ease-out both}
.lesson-out .lesson-media,.lesson-out .caption{animation:round-out .2s ease-in both}.lesson-in .lesson-media,.lesson-in .caption{animation:round-in .3s ease-out both}
.lesson-out.reverse .lesson-media,.lesson-out.reverse .caption{animation-name:round-out-reverse}.lesson-in.reverse .lesson-media,.lesson-in.reverse .caption{animation-name:round-in-reverse}
@keyframes round-out{to{opacity:0;transform:translateX(-24px)}}@keyframes round-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes round-out-reverse{to{opacity:0;transform:translateX(24px)}}@keyframes round-in-reverse{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@media(max-height:550px) and (orientation:landscape){.gallery,.gallery-row{gap:6px}.gallery-row{height:calc((100% - (var(--gallery-rows) - 1)*6px)/var(--gallery-rows));max-height:180px}.gallery-row .game-card{width:min(180px,calc((100% - (var(--gallery-cols) - 1)*6px)/var(--gallery-cols)));padding-bottom:4px}.gallery-row .thumbnail{padding:3px;max-height:70%}.gallery-row .game-card strong{padding:0 5px;font-size:11px}.gallery-row .mini-tile img{max-height:50px}.end-actions{gap:8px}.end-actions .next-game{padding:8px 20px}.end-secondary{gap:8px}.end-secondary .btn{min-width:110px}}
@media(prefers-reduced-motion:reduce){.round-out,.round-in,.lesson-out .lesson-media,.lesson-out .caption,.lesson-in .lesson-media,.lesson-in .caption{animation:none}.game-recall .card-front,.game-recall .card-back{transition:none}}