/* V3: generated art, separate interaction layers, 1920 × 1080 stage. */
:root{--ink:#254c4c;--green:#258b78;--dark:#194e54;--cream:#fffdf0;--gold:#ffd172;--orange:#dc713e;--muted:#607c77}
#stage{background:#b8e9ec}
.scene-shade{background:linear-gradient(0deg,#eff6d94d,transparent 28%);z-index:1}
.wukong{position:absolute;left:1320px;top:200px;width:520px;height:780px;object-fit:contain;pointer-events:none;z-index:8;transition:left .5s,top .5s,width .5s,height .5s;filter:drop-shadow(0 15px 9px #516a4920)}
.wukong-bubble{position:absolute;left:1360px;top:213px;min-width:380px;max-width:440px;padding:23px 25px;background:#fffdf2;color:#347968;border:3px solid #cce1ba;border-radius:32px;box-shadow:0 8px 0 #78ab7830;text-align:center;font:32px/1.4 LessonKai;z-index:9}
.wukong-bubble:after{content:'';position:absolute;bottom:-16px;left:45%;width:26px;height:26px;background:#fffdf2;transform:rotate(45deg);border-right:3px solid #cce1ba;border-bottom:3px solid #cce1ba}
#stage:is([data-phase="learn"],[data-phase="trace"],[data-phase="quiz"]) .wukong{left:1550px;top:433px;width:350px;height:525px}
#stage:is([data-phase="learn"],[data-phase="trace"],[data-phase="quiz"]) .wukong-bubble{left:1570px;top:330px;min-width:0;width:300px;font-size:29px;padding:22px 20px}
#stage[data-phase="intro"] .wukong,#stage[data-phase="intro"] .wukong-bubble{visibility:hidden}
.topbar{top:28px;left:44px;right:44px;height:88px}.brand{border:2px solid #e6d498;box-shadow:0 5px 0 #83ac7130;background:#fffdf1;font-size:27px;padding:15px 22px}.brand-seal{background:#e79b48;color:#fff;width:44px;height:44px}
.progress{background:#fffdf0ed;color:#67847a;border:2px solid #e0d9b4;padding:10px 14px;box-shadow:0 5px 0 #83ac7130}.progress span{font-size:24px;padding:9px 16px}.progress span.now{background:#ffe09a;color:#644c2c}.progress span.done{color:#287c64}.progress i{background:#afc9b0}
.small-btn{background:#fffdf2;border:2px solid #d2dcc2;font-size:24px;border-radius:24px}.top-tools .small-btn{padding:16px 19px}
.inventory{right:68px;top:132px;width:225px;padding:13px 17px;border:2px solid #e5d5a2;border-radius:24px;display:flex;align-items:center;gap:12px;font-size:19px;text-align:left;background:#fffdf3e8;box-shadow:none}
.inventory strong{font-size:49px;order:-1}.inventory small{font-size:17px;max-width:58px}.inventory.earned strong{color:#dc713e}
.caption{left:40px;right:40px;bottom:25px;height:160px;padding:24px 38px;border:3px solid #e2d4a5;border-radius:35px;background:#fffef4f7;box-shadow:0 10px 0 #7a9b5f25;gap:24px}
.caption:before{display:none}.caption h2{font-size:37px;margin:0 0 7px;white-space:nowrap}.caption p{font-size:25px;color:#647e6b}.speaker{display:none}.caption .actions{gap:13px}.primary{font-size:28px;min-height:74px;padding:17px 28px;background:#248a75;box-shadow:0 6px 0 #1a695b;border:2px solid #329b84;border-radius:26px;color:#fffdf0}.primary.gold{background:#ffd171;border-color:#ffe6a7;box-shadow:0 7px 0 #d99f42;color:#5a431f}.secondary{font-size:24px;padding:17px 22px;background:#fffdf4;border:2px solid #cad9bd;border-radius:25px}
.notice{bottom:205px;background:#245c52;font-size:27px}.media-fallback{top:130px}
#rock{left:570px;top:355px;width:480px;height:321px;filter:drop-shadow(0 0 15px #ffe486) drop-shadow(0 10px 6px #56654840)}
.rock-art,.sealed-rock{background-image:url('assets/images/v3/P01_draggable_rock.png');background-size:125.6% 140.5%;background-position:50% 50%;background-repeat:no-repeat;clip-path:none}
.rock-dots{left:185px;top:125px;font-size:43px;color:#928774;letter-spacing:11px;transform:none}
.sealed-rock{width:350px;height:235px;filter:brightness(.96) drop-shadow(0 9px 6px #697e593d);z-index:2}
.sealed-left{left:445px;top:592px;transform:rotate(-11deg)}.sealed-right{left:808px;top:598px;transform:rotate(10deg)}
#stage:is([data-phase="cover"],[data-phase="intro"],[data-phase="learn"],[data-phase="trace"],[data-phase="quiz"],[data-phase="finish"]) .sealed-rock{display:none}
.drop-zone{left:150px;top:401px;width:267px;height:226px;border:4px dashed #fff9c6;background:#fff5c149;box-shadow:0 0 0 10px #e6ebb633;color:#426858;font-size:26px;border-radius:50%}.drop-zone b{font-size:49px}.drop-zone.active{background:#d6f4aeab;border-color:#62ac6d}
.drag-hint{left:587px;top:720px;padding:16px 24px;border:2px solid #e4c786;box-shadow:0 5px 0 #94834a25;font-size:26px}
#relic{left:635px;top:345px;width:300px;height:430px;border:0;background:none;box-shadow:none;border-radius:30px;padding:93px 24px 50px;isolation:isolate;filter:drop-shadow(0 0 20px #ffea9f);color:#2c7968}
#relic:before,.large-word:before{content:'';position:absolute;inset:0;background:url('assets/images/v3/U02_character_card.png') 50% 50%/126.5% 114.5% no-repeat;z-index:-1;pointer-events:none}
#relic:after,.large-word:after{content:'';position:absolute;inset:28px 20px 25px;border-radius:28px;background:#fffcef;z-index:-2;pointer-events:none}
.relic-char{font-size:155px;line-height:1.05}.relic-pinyin{font-size:36px}.relic-label{font-size:23px;margin-top:20px}
#stage #cover{background:linear-gradient(90deg,#f5ffefed 0%,#f5ffefce 28%,#f5ffef55 55%,transparent 76%)!important;color:#215855}
#cover{z-index:7}.cover-copy{left:115px;top:185px;width:1100px}.eyebrow{color:#337e73;font-size:24px;letter-spacing:4px}.eyebrow:before{background:#65a799;width:44px}.cover-copy h1{font-family:LessonRound;font-size:102px;letter-spacing:1px;line-height:1.3;margin:26px 0 22px;text-shadow:0 5px 0 #fffaf0}.cover-copy h1 em{color:#cf7736;font-size:92px}.cover-copy p{color:#3e7164;font-size:39px;line-height:1.5;margin:16px 0 23px}.cover-tags{gap:12px;margin:25px 0 37px;color:#4d7967;font-size:24px}.cover-tags span{border:1px solid #b8d4b9;background:#fffdf1bf;border-radius:18px;padding:12px 19px}.cover-foot{left:117px;bottom:51px;color:#487862;font-size:23px}.cover-symbol{display:none}#cover .actions{position:relative;z-index:10}
#stage[data-phase="cover"] .wukong{left:1130px;top:90px;width:700px;height:1050px}
#stage[data-phase="cover"] .wukong-bubble{left:1285px;top:132px;min-width:390px}
#cinema{background:#bee5e2}.cinema-gradient{background:linear-gradient(0deg,#123e46bd 0%,#123e460a 23%,transparent 35%)}.cinema-copy{left:60px;right:60px;bottom:42px;gap:25px}.cinema-copy>div{padding:19px 30px;background:#fffdf1f5;border:2px solid #e6d6ad;border-radius:26px;color:#285c54}.cinema-copy .eyebrow{display:none}.cinema-copy h2{font-size:35px;line-height:1.4;margin:0 0 6px}.cinema-copy h2 br{display:none}.cinema-copy p{color:#65816c;font-size:26px}.cinema-label{background:#fffdf1ed;color:#487767;border:2px solid #d1e0bf}
#lessonPanel{left:55px;top:152px;width:1515px;height:710px;border:0;border-radius:50px;background:none;box-shadow:none;overflow:visible;isolation:isolate}
#lessonPanel:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/images/v3/U01_learning_panel.png') center/100% 100% no-repeat}
.learn-layout{grid-template-columns:310px 1fr;padding:67px 61px 49px;gap:38px}.large-word{border:0;padding:74px 20px 40px;height:500px;isolation:isolate;align-self:center}.large-word .py{font-size:39px}.large-word .char{font-size:191px;line-height:1.05}.large-word .label{font-size:27px;margin-top:15px}.large-word .stroke-note{font-size:24px;margin-top:17px;line-height:1.4}
.panel-heading{font-size:21px;color:#9f7944;letter-spacing:3px}.lesson-copy h2{font-size:43px;margin:14px 0 10px}.lesson-copy p{font-size:28px;line-height:1.4}
.family{gap:13px;margin:21px 0 16px}.family-card{height:309px;min-width:0;min-height:0;flex:1;background:#f7f6e9;border:2px solid #d5dfc5;border-radius:27px;padding:13px 7px 12px;overflow:hidden}
.family-card.selected{background:#fff2c9;border-color:#e0b560;box-shadow:0 5px 0 #d5b977}.family-card .py{font-size:29px}.family-card .char{font-size:85px;line-height:1.02;color:#315e50}.family-card:after{display:none}.weather-art{width:100%;height:130px;object-fit:contain;display:block;margin:5px auto 0;pointer-events:none}.family-note{font-size:28px;min-height:43px;color:#976439}.reading-note{font-size:21px!important}
.write-layout{grid-template-columns:130px 525px 1fr;gap:30px;padding:59px 63px 41px}.word-tabs{gap:19px;padding-top:36px}.word-tab{border-color:#d2dec4;background:#fffdf1}.word-tab.current{background:#ffedbc;border-color:#e1bd70}.word-tab .tab-char{font-size:72px}
.write-board{width:440px;height:440px;margin:31px auto 0;border:0;border-radius:4px;overflow:visible;background:#fffdf5;isolation:isolate}
.write-board .frame-art{position:absolute;inset:-46px;z-index:3;background:url('assets/images/v3/U03_writing_frame.png') center/100% 100% no-repeat;pointer-events:none}
.write-board:before,.write-board:after{z-index:0}.write-board:before{border-color:#cbbd9c}.write-board:after{border-color:#cbbd9c}.write-board canvas{z-index:2}.guide-char{font-size:380px;color:#d9d7c4;z-index:1}
.board-tools{margin-top:45px;gap:18px}.board-tools button{font-size:22px;background:#eaf0dc;border:1px solid #d3ddbd}
.write-instruction{padding:23px 10px}.write-instruction h2{font-size:48px;margin:10px 0}.write-instruction p{font-size:27px;line-height:1.55}.write-instruction ol{margin:23px 0}.write-instruction li{font-size:24px;margin-bottom:21px;white-space:nowrap}.write-instruction li b{width:37px;height:37px;margin-right:9px;background:#e6edce}.write-badge{font-size:23px;background:#fff0c9}
#stage[data-phase="quiz"] #lessonPanel:before{display:none}
.quiz-wrap{padding:48px 51px}.quiz-top{background:#fffdf1f7;padding:24px 28px 12px;border-radius:30px 30px 0 0;border:2px solid #e4d6b4;border-bottom:0}.quiz-top h2{font-size:45px;margin:11px 0}.quiz-step{background:#e7edd8;font-size:24px}.quiz-hint{background:#fffdf1f7;border:2px solid #e4d6b4;border-top:0;border-radius:0 0 30px 30px;margin:0;padding:0 28px 24px;font-size:28px}.options{gap:26px;margin:22px 0 25px}
.option{height:250px;min-height:0;border:0;background:url('assets/images/v3/U04_answer_tile.png') center/112% 124% no-repeat;box-shadow:none;text-align:center;padding:42px 27px 23px;isolation:isolate;transition:transform .2s}
.option .option-letter{font-size:23px;color:#9b875d;margin-bottom:5px}.option .option-text{font-size:56px;line-height:1.55}.option.correct{background:url('assets/images/v3/U04_answer_tile.png') center/112% 124% no-repeat;box-shadow:0 0 0 5px #65a875;border-radius:45px;color:#2b7353}.option.wrong{background:url('assets/images/v3/U04_answer_tile.png') center/112% 124% no-repeat;box-shadow:0 0 0 4px #d5a25a;border-radius:45px}.option.correct:after{right:30px;top:26px;font-size:35px}
.quiz-feedback{font-size:28px;line-height:1.5;background:#fffdf2f5;border:2px solid #e1d7b6;padding:17px 24px;border-radius:25px;min-height:78px}.quiz-feedback.good{background:#f3fbe9}.quiz-feedback.retry{background:#fff5df}
#finishPanel{left:175px;top:189px;width:1220px;height:660px;padding:30px 40px 30px 375px;text-align:left;border:2px solid #ece1b8;border-radius:48px;background:#fffdf1f5;box-shadow:0 12px 0 #658d6b21}
.finish-seal{position:absolute;left:10px;top:58px;width:335px;height:410px;background:url('assets/images/v3/U05_rain_reward.png') center/135% 110% no-repeat;border:0;border-radius:0;box-shadow:none;font:125px/1 LessonKai;padding-top:45px;color:#36796b}
.finish-title{font:55px/1.4 LessonKai;margin:14px 0 20px;color:#287e6b}.finish-copy{font-size:30px;line-height:1.55}.finish-words{justify-content:flex-start;gap:20px;margin:26px 0}.finish-words span{font-size:63px;color:#387763;border-bottom:3px solid #e0ba70;padding:0 12px 6px}.finish-next{font-size:25px;line-height:1.5;margin-top:22px;color:#967746}
#stage[data-phase="finish"] .wukong{left:1375px;top:310px;width:430px;height:645px}
#stage[data-phase="finish"] .wukong-bubble{left:1430px;top:237px;min-width:0;width:345px}
@media(prefers-reduced-motion:reduce){.wukong{transition:none}}
.inventory{width:233px;display:grid;grid-template-columns:55px 1fr;grid-template-rows:28px 25px;text-align:left;column-gap:13px;row-gap:0;padding:13px 19px;font-size:21px}
.inventory strong{grid-column:1;grid-row:1/3;order:0;font-size:50px}.inventory small{grid-column:2;grid-row:2;max-width:none;white-space:nowrap;font-size:18px}
#lessonPanel{height:750px;top:137px}
.learn-layout{padding:111px 95px 68px;grid-template-columns:300px 1fr;gap:37px}
.learn-layout .panel-heading{display:none}.lesson-copy h2{margin:0 0 12px;font-size:41px}.lesson-copy p{font-size:27px}.family{margin:18px 0 13px;gap:12px}.family-card{height:280px;padding:12px 7px 8px}.weather-art{height:117px}.family-note{font-size:27px}.reading-note{display:none}.large-word{height:475px;padding-top:65px}.large-word .stroke-note{font-size:23px}
.write-layout{padding:104px 99px 75px;grid-template-columns:120px 510px 1fr;gap:26px}
.write-instruction{padding-top:13px}.write-instruction .panel-heading{display:none}.write-board{width:417px;height:417px;margin-top:15px}
.guide-char{font-size:357px}.write-board .frame-art{inset:-42px}.board-tools{margin-top:33px}
.option:before{content:'';position:absolute;inset:51px 28px 37px;border-radius:55px;background:#fffcef;z-index:-1}
#finishPanel{top:243px;height:550px}
#transitionFrame{position:absolute;inset:0;width:1920px;height:1080px;z-index:40;pointer-events:none}
.learn-layout{padding-top:153px;padding-left:139px;padding-right:139px;grid-template-columns:275px 1fr;gap:34px}
.large-word{height:421px;padding-top:51px}.large-word .char{font-size:165px}.large-word .label{font-size:24px;margin-top:11px}.large-word .stroke-note{font-size:21px;margin-top:12px}
.family-card{height:260px}.family-card .char{font-size:78px}.family-card .py{font-size:27px}.weather-art{height:102px}.lesson-copy h2{font-size:38px}.lesson-copy p{font-size:25px}.family-note{font-size:25px}
.write-layout{padding-top:135px;padding-left:142px;padding-right:139px;grid-template-columns:110px 447px 1fr;gap:28px}
.write-board{width:395px;height:395px;margin-top:6px;background:transparent}.write-board .frame-art{inset:-39px}.write-board canvas{inset:24px;width:calc(100% - 48px);height:calc(100% - 48px)}.guide-char{inset:24px;font-size:302px}
.write-board:before{left:24px;width:calc(100% - 48px)}.write-board:after{top:24px;height:calc(100% - 48px)}.board-tools{margin-top:24px}.board-tools button{padding:12px 18px}
.write-instruction{padding-top:5px}.write-instruction li{font-size:23px}.write-instruction p{font-size:26px}