*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#211d17}body{display:grid;place-items:center;font-family:'Trebuchet MS','Yu Gothic',sans-serif;color:#fff6df}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffd978;outline-offset:5px}#game{width:min(100vw,100vh);height:min(100vw,100vh);position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;background:#42554b}.classroom{position:absolute;width:100%;height:100%;object-fit:cover;z-index:-3}#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}#teacher{position:absolute;left:5%;top:28%;width:41%;height:53%;z-index:3;transform-origin:50% 95%;pointer-events:none}#teacher>img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 9px 5px #30211740)}#pointer{position:absolute;left:87%;top:40%;width:.8%;height:34%;background:linear-gradient(90deg,#446e22,#bad164 45%,#678330);border-radius:6px;transform-origin:50% 98%;transform:rotate(29deg);box-shadow:1px 1px 2px #1b290c80}#pointer i{position:absolute;width:160%;height:2%;left:-30%;background:#d9bd72;border-radius:3px}#pointer i:nth-child(1){top:12%}#pointer i:nth-child(2){top:38%}#pointer i:nth-child(3){top:64%}#pointer i:nth-child(4){top:90%}.knocking{animation:teacher-knock .7s ease-in-out}.knocking #pointer{animation:pointer-knock .7s ease-in-out}@keyframes teacher-knock{0%,100%{transform:rotate(0)}40%{transform:rotate(-1.2deg)}65%{transform:rotate(.8deg)}}@keyframes pointer-knock{0%,100%{transform:rotate(29deg)}35%{transform:rotate(17deg)}55%{transform:rotate(33deg)}70%{transform:rotate(27deg)}}.gear{position:absolute;right:1.9%;top:1.7%;width:5.3%;height:5.3%;border-radius:50%;color:#fff4db;font-size:3.6cqw;line-height:1;background:linear-gradient(#83b7a4,#46786b);border:2px solid #bdcfac;box-shadow:0 3px 6px #35251c70;z-index:7}#board{position:absolute;left:43.8%;top:22.5%;width:45%;height:37.8%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.2%;z-index:4;color:#fff7e5;text-shadow:0 1px 2px #152a24;font-size:1.7cqw}h1,h2,p{margin:0}#board h1{font-size:4.2cqw;font-weight:600;line-height:1.1;letter-spacing:-.05em}#board h2{font-size:3cqw;font-weight:600}.eyebrow{font-size:1.3cqw;letter-spacing:.12em;text-transform:uppercase;color:#d9ddba;margin-bottom:1.2cqw}.welcome{font-size:1.6cqw;line-height:1.5;margin:1.3cqw 0 2cqw;color:#e8e8cf}.menu-button{border:1px solid #d6e2bf;border-radius:14px;background:linear-gradient(#86ab88,#527b64);color:#fffbe8;box-shadow:0 4px 0 #244f40,0 6px 12px #15291e45;padding:1.05cqw 2cqw;min-width:70%;font-size:2.05cqw;margin:.6cqw 0;transition:transform .16s,filter .16s}.menu-button:hover{filter:brightness(1.12);transform:translateY(-2px)}.menu-button:active{transform:translateY(2px);box-shadow:0 1px 0 #244f40}.menu-button.secondary{background:transparent;border-color:#d4ddba8c;box-shadow:none;font-size:1.6cqw;padding:.65cqw}.lesson-list{display:flex;gap:1cqw;margin:2cqw 0 1.4cqw;width:100%}.lesson-card{flex:1;min-width:0;border:1.5px solid #d4dfbcaa;background:#d0e7b70e;border-radius:13px;color:#fff5de;padding:1.25cqw .25cqw;transition:background .2s,transform .2s}.lesson-card:hover{background:#cfe4ab25;transform:translateY(-3px)}.lesson-card b{display:block;font-family:'Yu Mincho',serif;font-size:4cqw;line-height:1.25;color:#f1d69a}.lesson-card span{display:block;font-size:1.8cqw;margin-top:.5cqw}.lesson-card small{display:block;font-size:1.1cqw;margin-top:.5cqw;color:#d6dfc7}.back{background:none;border:0;color:#e7e6cb;font-size:1.3cqw;padding:.7cqw}.row{display:flex;gap:.6cqw;align-items:center;justify-content:center;margin:.8cqw 0;flex-wrap:wrap}.chip{background:#e2eedb10;border:1px solid #d9e3c86b;border-radius:20px;padding:.5cqw 1cqw;color:#e9eedb;font-size:1.3cqw}.chip.active{background:#e3eac8;color:#2c4c40}.setup-label{font-size:1.3cqw;color:#d5dec6;margin-top:1cqw}.question-top{font-size:1.3cqw;color:#d9e1c8;margin-bottom:1cqw}.question-instruction{font-size:1.8cqw}.question-word{font-family:'Yu Mincho','Noto Serif JP',serif;font-size:7cqw;line-height:1.2;font-weight:500;margin:1.25cqw 0 .3cqw;max-width:100%;overflow-wrap:anywhere}.question-word.english{font-family:inherit;font-size:3.1cqw;line-height:1.2}.question-word.long{font-size:4.4cqw}.reading{font-size:1.5cqw;height:2.1cqw;color:#d7dfca}.answers{display:flex;gap:.8cqw;width:100%;margin-top:1.8cqw}.answer{flex:1;min-width:0;min-height:6.7cqw;padding:.7cqw .45cqw;border:2px solid #ece7d5b5;border-radius:16px 20px 17px 22px;background:#faf2d805;color:#fff8e6;font-size:1.7cqw;overflow-wrap:anywhere;transition:background .18s,transform .18s}.answer:hover:not(:disabled){background:#ffffff16;transform:translateY(-2px)}.answer:disabled{cursor:default}.answer.correct{background:#b7ddb344;border-color:#d5efad}.answer.reveal{animation:answer-flash .5s ease-in-out 5}.answer.wrong{background:#e8999326;border-color:#e6aaa0}@keyframes answer-flash{50%{background:#d9f6b988;box-shadow:0 0 20px #ceeba965}}.feedback{font-size:1.4cqw;color:#e5eccd;height:2cqw;margin-top:1cqw}.progress{font-size:1.1cqw;color:#c9d9c0;margin-top:.5cqw}#celebration{position:absolute;left:50%;top:35%;z-index:8;pointer-events:none;color:#425b40;background:#fff3ce;border:3px solid #e6c67e;border-radius:22px;padding:1.2cqw 2.4cqw;font-size:3cqw;box-shadow:0 8px 28px #102b2840;opacity:0;transform:translateY(15px) rotate(-4deg)}#celebration.show{animation:celebrate 1.15s ease both}@keyframes celebrate{0%{opacity:0;transform:scale(.6) rotate(-9deg)}20%,75%{opacity:1;transform:scale(1) rotate(-4deg)}100%{opacity:0;transform:translateY(-25px) rotate(1deg)}}dialog{padding:0;border:0;border-radius:24px;background:#f7e9c9;color:#3e5d48;width:360px;max-width:85vw;box-shadow:0 20px 90px #14231c70}dialog::backdrop{background:#172b245c;backdrop-filter:blur(4px)}.settings-card{padding:34px 30px;position:relative}.settings-card h2{font-size:25px}.subtitle{font-size:15px;color:#7c8266;margin:8px 0 24px}.close{position:absolute;right:12px;top:8px;border:0;background:none;color:#60745b;font-size:28px}.setting{display:flex;align-items:center;justify-content:space-between;padding:15px 0;font-size:18px;border-bottom:1px solid #6a805729}.setting input{appearance:none;width:48px;height:28px;border-radius:18px;background:#b1b39b;position:relative;cursor:pointer}.setting input:before{content:'';position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#fffbe8;transition:transform .2s}.setting input:checked{background:#688c69}.setting input:checked:before{transform:translateX(20px)}#music-status{font-size:13px;line-height:1.4;min-height:38px;margin:12px 0;color:#787f65}.settings-card .menu-button{font-size:17px;width:100%;padding:13px;margin:10px 0}.credits{display:block;text-align:center;color:#6c795d;font-size:13px;margin-top:15px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}#dust{display:none}}
/* The sprite’s raised paw is the pivot for the bamboo pointer. */
#teacher{top:33%;height:auto;aspect-ratio:1190/1322}#teacher>img{display:block;width:100%;height:auto}#pointer{top:9%;left:89%}
#board .question-word{font-size:7cqw;font-weight:500}#board .question-word.long{font-size:4.4cqw}#board .question-word.english{font-size:3.1cqw}
.answers.japanese .answer{font-size:2.6cqw}
/* Close-up classroom: a generous, centered learning surface. */
#board{left:19%;top:25%;width:72%;height:46%;padding:1.4%}
#teacher{left:0%;top:65%;width:30%}
#board h1{font-size:5cqw}#board h2{font-size:4cqw}
.eyebrow{font-size:1.65cqw}.welcome{font-size:2.2cqw}
#board .menu-button{font-size:2.7cqw;padding:1.3cqw 2.4cqw;min-width:64%}
#board .menu-button.secondary{font-size:2.1cqw}
.lesson-card{padding:1.5cqw .5cqw}.lesson-card b{font-size:5.4cqw}.lesson-card span{font-size:2.5cqw}.lesson-card small{font-size:1.55cqw}
.back,.setup-label{font-size:1.8cqw}.chip{font-size:1.8cqw;padding:.65cqw 1.25cqw}
.question-top{font-size:1.7cqw}.question-instruction{font-size:2.4cqw}
#board .question-word{font-size:10cqw;margin:1cqw 0 .3cqw}
#board .question-word.long{font-size:6cqw}#board .question-word.english{font-size:4.2cqw}
.reading{font-size:2cqw;height:2.6cqw}.answers{gap:1.2cqw;margin-top:1.4cqw}
.answer{font-size:2.45cqw;min-height:8.5cqw;padding:.8cqw .7cqw}
.answers.japanese .answer{font-size:3.6cqw}
.feedback{font-size:1.85cqw;height:2.5cqw}.progress{font-size:1.5cqw}
#celebration{left:42%;top:39%;font-size:3.8cqw}
/* The existing desk artwork occludes the teacher, preserving room depth. */
#teacher{top:58%;width:32%}
.foreground-desk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:5;pointer-events:none;clip-path:polygon(0 81.5%,14% 81.5%,14% 84.5%,34% 89%,34% 100%,0 100%)}
#teacher{left:5%}.foreground-desk{clip-path:polygon(0 82%,11.5% 82%,11.5% 86%,26% 86%,28% 85%,34% 88.5%,34% 100%,0 100%)}
/* Teacher overlaps board controls; foreground desk still covers the teacher. */
#teacher{z-index:5}.foreground-desk{z-index:6}
/* Expression layers crossfade while the whole character reacts. */
#teacher>img{transition:opacity 180ms ease-in-out}
#teacher>.panda-expression{position:absolute;inset:0;width:100%;height:100%;opacity:0;object-fit:fill}
#teacher.happy .panda-neutral,#teacher.scold .panda-neutral{opacity:0}
#teacher.happy .panda-happy,#teacher.scold .panda-scold{opacity:1}
#teacher.happy{animation:panda-cheer 1100ms cubic-bezier(.3,.05,.25,1) both}
#teacher.scold{animation:panda-scold 1800ms ease-in-out both}
#teacher.happy #pointer{animation:happy-pointer 1100ms ease-in-out both}
#teacher.scold #pointer{animation:scolding-pointer 1500ms ease-in-out both}
@keyframes panda-cheer{0%,100%{transform:translateY(0) rotate(0) scale(1)}12%{transform:translateY(1%) scale(1.025,.97)}30%{transform:translateY(-5%) rotate(-3deg) scale(.985,1.02)}48%{transform:translateY(0) rotate(1deg) scale(1.02,.98)}68%{transform:translateY(-3%) rotate(2deg)}85%{transform:translateY(0) rotate(-1deg)} }
@keyframes panda-scold{0%,100%{transform:rotate(0)}15%{transform:rotate(-3deg) translateX(-1%)}28%{transform:rotate(3deg) translateX(1%)}42%{transform:rotate(-2.5deg)}56%{transform:rotate(2deg)}72%{transform:rotate(-1deg)}86%{transform:rotate(.5deg)}}
@keyframes happy-pointer{0%,100%{transform:rotate(29deg)}30%{transform:rotate(18deg)}65%{transform:rotate(37deg)}}
@keyframes scolding-pointer{0%,100%{transform:rotate(29deg)}15%,45%,75%{transform:rotate(12deg)}30%,60%{transform:rotate(39deg)}90%{transform:rotate(25deg)}}
@media(prefers-reduced-motion:reduce){#teacher.happy,#teacher.scold,#teacher.happy #pointer,#teacher.scold #pointer{animation:none}#teacher>img{transition:none}}