/* One illustrated outer board; preserve its corners and crest while extending the middle. */
#learningPanelArt{left:50px;top:-40px;width:1820px;height:1120px;grid-template-columns:505.556px 1fr 482.222px 1fr 505.556px;gap:0}
#stage:is([data-phase="learn"],[data-phase="trace"],[data-phase="quiz"],[data-phase="finish"]) #learningPanelArt{display:grid}
#learningPanelArt svg{width:calc(100% + 2px);margin-left:-1px;height:100%;overflow:hidden;display:block}
#lessonPanel{left:245px;top:205px;width:1430px;height:660px;animation:none}
#stage:is([data-phase="learn"],[data-phase="trace"],[data-phase="quiz"],[data-phase="finish"]) .wukong{visibility:hidden}
.focus-card{left:40px;top:8px;width:500px;height:515px;padding:24px 20px;filter:none}
.focus-card::before,.focus-card::after{display:none}
.focus-card .py{font-size:51px}.focus-glyph{font-size:310px;margin:12px auto 8px;animation:word-arrive .4s ease-out both}
.focus-word{font-size:44px}
.focus-scene{left:700px;top:0;width:650px;height:510px}
.focus-weather{width:600px;height:400px;animation:word-arrive .5s ease-out both}
.focus-meaning{font-size:37px;max-width:640px;margin-top:12px;line-height:1.45}
.rain-explanation p{font-size:36px}.radical-example{font-size:270px}
.word-picker{left:250px;top:555px;gap:24px}
.word-picker button{width:144px;height:88px;background:#fffefa;border:2px solid #dce5cf;border-radius:22px;box-shadow:0 3px 0 #c2d6be66;transition:background .2s,border-color .2s}
.word-picker button.selected{background:#fff0c6;border-color:#dfb866;box-shadow:0 4px 0 #dbbb75}
.word-picker .char{font-size:52px}.word-picker .py{font-size:25px}
.write-layout{grid-template-columns:130px 640px 360px;gap:70px;padding:10px 0 0 30px}
.word-tabs{padding-top:90px;gap:24px}.word-tab{padding:20px 10px;border-width:2px;background:#fffcf1}
.word-tab .tab-mark{font-size:23px;letter-spacing:0}
.write-board{width:560px;height:560px;margin:0 auto;background:#fffef8;border:2px solid #b9cdbb;border-radius:18px;box-shadow:0 7px 18px #5474540d}
.write-board .frame-art{display:none}
.write-board canvas{inset:20px;width:520px;height:520px}
.guide-char{inset:20px;font-size:455px;color:#d3d8c4}
.write-board::before{left:20px;width:520px}.write-board::after{top:20px;height:520px}
.board-tools{margin-top:23px;gap:24px}.board-tools button{font-size:26px;min-height:66px;padding:15px 28px}
.write-instruction{padding-top:85px;max-width:360px}
.write-instruction h2{font-size:68px;margin-bottom:30px}.write-instruction p{font-size:36px;padding:0;line-height:1.75}
.write-badge{font-size:26px;padding:16px 22px;margin-top:32px}
.quiz-wrap{padding:30px 40px 0}
.quiz-top{padding:0;gap:35px}.quiz-top h2{font-size:49px;line-height:1.45}.quiz-step{font-size:28px}
.options{gap:34px;margin:60px 0 40px}
.option,.option.correct,.option.wrong{height:260px;min-height:0;padding:55px 20px 40px;border:2px solid #ccd9c3;border-radius:30px;background:#fffef8;box-shadow:0 9px 0 #c1d2b952;text-align:center;overflow:visible}
.option::before{display:none}
.option .option-text{font-size:72px;line-height:1.7}
.option.correct{background:#eaf4d9;border:3px solid #69a474;box-shadow:0 9px 0 #9ac28b80}
.option.correct::after{display:none}
.option.wrong{border-color:#dbad73;background:#fff5e5}
.option:disabled:not(.correct){opacity:.72}
.answer-badge{position:absolute;right:22px;top:-29px;display:grid;place-content:center;width:65px;height:65px;border-radius:50%;color:#fffefa;background:#388568;border:5px solid #fff8dc;font:40px/1 LessonRound;box-shadow:0 3px 8px #255c4822}
.quiz-feedback{font-size:33px;line-height:1.5;min-height:89px;padding:20px 28px;border:0;border-radius:22px;background:#fff7e5}
.quiz-feedback.good{background:#eaf3d9;color:#32644b}
#finishPanel{left:260px;top:166px;width:1400px;height:725px;padding:0;text-align:center;animation:none}
.finish-seal{position:relative;left:auto;top:auto;display:grid;width:225px;height:257px;margin:0 auto;padding-top:28px;font-size:96px}
.finish-title{font-size:61px;margin:10px 0 20px;line-height:1.3}
.finish-words{justify-content:center;gap:28px;margin:0 auto 18px}
.finish-words span{font-size:68px;padding:9px 20px;background:none;border:0;border-bottom:2px solid #d3b16d;border-radius:0}
.finish-copy{font-size:34px;padding:12px 0;margin:0}
.finish-next{font-size:28px;padding:10px 0;margin:5px 0 0}
#stage[data-phase="finish"] .caption .actions{margin:0 auto}
#stage:is([data-phase="learn"],[data-phase="trace"],[data-phase="quiz"],[data-phase="finish"]) .caption{bottom:12px;height:82px}
.rock-dots{display:none}
.drop-zone{left:65px;top:333px;width:440px;height:370px;border:6px dashed #e7b849;border-radius:48%;background:radial-gradient(ellipse,#fff7cfed,#fff4bcbe 62%,#f7d27570);box-shadow:0 0 0 10px #fffce052,0 14px 28px #77895024;color:#346e56;gap:3px;transition:background .2s,box-shadow .2s}
.drop-zone::before{content:'';position:absolute;inset:-17px;border:3px solid #ffed9b;border-radius:50%;animation:landing-halo 2.2s ease-in-out infinite;pointer-events:none}
.drop-zone b{font:125px/1 LessonRound}.drop-zone strong{font-size:38px;font-weight:normal}
.drop-zone.active{background:#fff0a9;border-color:#448e6a;box-shadow:0 0 0 12px #bee7a58c,0 12px 30px #42664d24}
.drag-trail{display:none;position:absolute;left:453px;top:421px;z-index:4;color:#fce6a2;font:100px/1 LessonRound;filter:drop-shadow(0 2px 2px #547253);pointer-events:none;gap:0}
#stage[data-phase="cave"] .drag-trail{display:flex}
.drag-trail span{animation:guide-left 1.8s ease-in-out infinite}
.drag-trail span:nth-child(2){animation-delay:.15s}.drag-trail span:nth-child(3){animation-delay:.3s}
#rock.dragging~.drag-trail{visibility:hidden}
#discoveryAura{display:none;position:absolute;left:480px;top:155px;width:590px;height:735px;z-index:4;pointer-events:none;background:radial-gradient(ellipse,#ffebaa9c,transparent 69%);border-radius:50%}
#stage[data-phase="discover"] #discoveryAura{display:block;animation:aura-breathe 2.5s ease-in-out infinite}
#discoveryAura i{position:absolute;width:14px;height:14px;border-radius:3px;background:#fff5ba;box-shadow:0 0 15px #f9d972;animation:discovery-spark 2.7s ease-in-out infinite}
#discoveryAura i:nth-child(1){left:10%;top:62%;animation-delay:.1s}
#discoveryAura i:nth-child(2){left:83%;top:40%;animation-delay:.4s}
#discoveryAura i:nth-child(3){left:20%;top:25%;animation-delay:.8s}
#discoveryAura i:nth-child(4){left:75%;top:78%;animation-delay:1.2s}
#discoveryAura i:nth-child(5){left:48%;top:6%;animation-delay:1.6s}
#discoveryAura i:nth-child(6){left:45%;top:93%;animation-delay:2s}
#relic{animation:relic-rise .85s cubic-bezier(.18,.78,.27,1.08) both;transform-origin:50% 80%}
.relic-label{animation:invitation-breathe 2.5s ease-in-out infinite}
.lesson-exit{position:absolute;z-index:11;pointer-events:none}
.celebration-particle{position:absolute;z-index:35;pointer-events:none;width:14px;height:20px;border-radius:4px}
.primary.attention{animation:next-ready .8s ease-in-out 2}
@keyframes word-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes landing-halo{50%{opacity:.45;transform:scale(1.07)}}
@keyframes guide-left{0%,100%{transform:translateX(0);opacity:.45}50%{transform:translateX(-20px);opacity:1}}
@keyframes relic-rise{0%{opacity:0;transform:translateY(95px) scale(.68) rotate(-7deg)}70%{opacity:1;transform:translateY(-12px) scale(1.025) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes aura-breathe{50%{opacity:.7;transform:scale(1.06)}}
@keyframes discovery-spark{0%,100%{opacity:0;transform:translateY(12px) rotate(45deg) scale(.4)}45%{opacity:1;transform:translateY(-16px) rotate(95deg) scale(1)}80%{opacity:0;transform:translateY(-45px) rotate(135deg) scale(.4)}}
@keyframes invitation-breathe{50%{color:#bb8540}}
@keyframes next-ready{50%{box-shadow:0 6px 0 #1a695b,0 0 0 8px #efce7b55}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}