/* V18: reference-led composition; real text, controls and drawing stay interactive. */
#stage>.topbar{top:12px;height:82px}
#stage .topbar .brand,#stage .topbar .small-btn{padding-top:13px;padding-bottom:13px}
.learning-title,.writing-title{margin:0;text-align:center;font:46px/1.2 LessonKai;color:#8b6335;letter-spacing:5px;position:absolute;top:0;left:0;right:0}
.focus-card{left:55px;top:72px;width:450px;height:555px;padding:0;filter:none}
.focus-card .py{font-size:47px;line-height:65px}
.focus-glyph{position:relative;width:414px;height:414px;display:grid;place-content:center;margin:9px auto 0;font:318px/1 LessonKai;border:2px solid #d9c79e;border-radius:18px;background:linear-gradient(90deg,transparent calc(50% - 1px),#d9c69f70 50%,transparent calc(50% + 1px)),linear-gradient(transparent calc(50% - 1px),#d9c69f70 50%,transparent calc(50% + 1px)),#fffdf5;box-shadow:0 5px 0 #bcbf9b18}
.focus-glyph:hover{background-color:#fff5dc}
.focus-word{position:relative;display:table;font:36px/1.2 LessonKai;padding:11px 35px;margin:-12px auto 0;background:#fff0cd;border:2px solid #e8cd92;border-radius:24px;box-shadow:0 4px 0 #d1b27130}
.focus-scene{left:585px;top:87px;width:805px;height:287px;border:2px solid #d2ddb7;border-radius:30px;background:#fffff780;box-shadow:0 5px 0 #adb99116;overflow:hidden}
.rain-explanation{position:relative;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none;text-align:left}
.explanation-copy{position:absolute;left:32px;top:36px}
.explanation-copy h3{font:37px/1.2 LessonKai;color:#3d7158;margin:0 0 23px}
.rain-explanation p{font:31px/1.7 LessonKai;margin:0}
.radical-example{position:absolute;left:375px;top:31px;font-size:208px;line-height:1.1;margin:0;width:215px;text-align:center}
.learning-guide{position:absolute;right:1px;bottom:-15px;width:200px;height:260px;object-fit:contain;pointer-events:none}
.focus-weather{position:absolute;left:15px;top:0;width:365px;height:285px;filter:none}
.focus-meaning{position:absolute;left:380px;right:20px;max-width:none;padding:0;margin:0;font-size:34px;border:0;background:none;text-align:left}
.word-picker{left:585px;top:454px;width:805px;height:178px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.picker-label{display:block!important;position:absolute;left:0;right:0;top:-62px;text-align:center;border-radius:0;background:none;margin:0;padding:8px;font:32px LessonKai;color:#52725a}
.picker-label::before,.picker-label::after{content:'';display:inline-block;vertical-align:middle;width:140px;height:1px;background:#ddc899;margin:0 25px}
.word-picker button{width:100%;height:178px;flex-direction:column;padding:16px 8px;gap:13px;border:2px solid #dfd5b9;border-radius:25px;background:#fffdf6;box-shadow:0 5px 0 #c3cfa32b}
.word-picker .char{font-size:77px}.word-picker .py{font-size:29px}
.word-picker button.selected{background:#fff0c6;border-color:#dab161;box-shadow:0 5px 0 #d2b16a55}
/* A generous, stable writing surface, with compact instructions alongside. */
.write-layout{position:relative;grid-template-columns:150px 590px 1fr;gap:48px;padding:80px 25px 0;height:100%}
.word-tabs{padding-top:78px;gap:26px}
.word-tab{padding:22px 10px;background:#fffdf4;border:2px solid #d3ddbe;border-radius:24px;box-shadow:0 4px 0 #c2c99e22}
.word-tab .tab-char{font-size:78px}.word-tab .tab-mark{font-size:23px}
.word-tab.current{background:#fff0c5;border-color:#d7b367}
.write-board{width:504px;height:504px;background:#fffdf7;border:3px solid #bdcdaa;border-radius:17px;box-shadow:0 0 0 8px #eef0dc,0 0 0 10px #d9dfc5,0 12px 16px #6b7c4610;margin:0 auto}
.write-board canvas{inset:18px;width:462px;height:462px}
.guide-char{inset:18px;font-size:421px}
.write-board::before{left:18px;width:462px}.write-board::after{top:18px;height:462px}
.board-tools{margin-top:28px;gap:22px}.board-tools button{font-size:25px;min-height:61px;padding:13px 25px;border-color:#c9d5b6;box-shadow:0 3px 0 #bfc99c28}
.write-instruction{padding:10px 0 0 8px;max-width:none}
.write-instruction .panel-heading{display:table;font:26px LessonRound;color:#577559;padding:8px 20px;background:#eaf0d9;border-radius:14px;margin-bottom:16px}
.write-instruction h2{font-size:65px;margin:0 0 17px}
.write-instruction>p{font-size:35px;line-height:1.55;margin:0}
.writing-tips{margin-top:27px;padding:23px 25px;background:#f2f2e2;border:1px solid #d8dfc5;border-radius:22px}
.writing-tips h3{font:28px LessonRound;color:#597355;margin:0 0 13px}
.writing-tips p{font:29px/1.65 LessonKai;padding:0;margin:0;white-space:nowrap}
.write-badge{margin-top:26px;font-size:25px;padding:13px 23px}
/* Keep the original timed reveal / clue-flight, with larger grounded mechanisms. */
.quiz-wrap{padding:5px 24px 0}
.quiz-top{min-height:113px;padding:0 0 17px;border-bottom:1px solid #dfd6b8}
.quiz-top h2{font-size:46px}
.quiz-step{border:2px solid #dbd8b5;background:#f3f1d9;border-radius:50%;width:82px;height:82px;padding:0;display:grid;place-content:center;flex-shrink:0}
#stage[data-phase="quiz"] .quiz-body{margin-top:36px;height:355px;grid-template-columns:255px 1fr;gap:30px}
.quiz-guide{height:355px}
.quiz-guide img{height:345px;width:253px;bottom:-6px;left:0}
.quiz-guide-label{left:-5px;right:-5px;bottom:auto;top:-7px;padding:12px 8px;background:#fff3ce;border:1px solid #e2c996;font-size:25px;border-radius:20px;z-index:1}
.options{height:355px;gap:20px}
.option,.option.correct,.option.wrong{height:345px;border:0;padding:0;background:none;box-shadow:none}
.option::before{background-size:120% 120%;inset:-5px -4px;filter:drop-shadow(0 12px 8px #6d72552b)}
.option .option-text{background:#fff8e7e6;min-width:190px;min-height:135px;font-size:77px;border:1px solid #eee5c9;box-shadow:inset 0 2px 4px #a39d7515;border-radius:24px}
.option .stone-number{top:28px;width:48px;height:48px;background:#fff1c8}
.option .word-break{font-size:59px}
#stage[data-phase="quiz"] .quiz-feedback{margin:34px 0 0 285px;padding:16px 24px;min-height:100px;font-size:30px}
.answer-badge{top:27px;right:19px}
/* Celebration uses the established Wukong pose and clue medallion. */
#finishPanel{left:245px;top:205px;width:1430px;height:660px;padding:0;overflow:visible}
.finish-title{display:table;position:relative;margin:0 auto;padding:9px 80px 14px;font:65px/1.1 LessonKai;letter-spacing:8px;color:#93602c;background:linear-gradient(#fff0b9,#f9d889);border:2px solid #dcb261;border-radius:38px 38px 22px 22px;box-shadow:inset 0 0 0 5px #fff3cd,0 5px 0 #c9a46944}
.finish-subtitle{display:table;margin:12px auto 0;padding:7px 44px;background:#e2edcf;border-radius:18px;color:#53724d;font:32px/1.3 LessonKai}
.finish-companion{position:absolute;left:15px;top:168px;width:475px;height:468px}
.finish-companion>img{width:380px;height:455px;object-fit:contain;position:absolute;left:5px;bottom:0;filter:drop-shadow(0 15px 12px #9c9b692b)}
.finish-companion::after{content:'';position:absolute;left:45px;right:45px;bottom:0;height:26px;background:#ded8b14d;border-radius:50%;filter:blur(8px);z-index:-1}
.finish-seal{position:absolute;left:315px;top:173px;width:150px;height:185px;font-size:65px;margin:0;padding-top:20px;filter:drop-shadow(0 0 18px #ffdc8870)}
.finish-summary{position:absolute;left:530px;right:20px;top:195px;text-align:center}
.finish-summary h3{font:34px/1.3 LessonKai;color:#567453;margin:0 0 24px}
.finish-words{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0}
.finish-words>div{height:195px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px solid #dcd0a9;border-radius:22px;background:linear-gradient(90deg,transparent 49.8%,#dbd4b238 50%,transparent 50.2%),#fffaf0;box-shadow:0 5px 0 #c9cba82e}
.finish-words span{border:0;background:none;margin:0;padding:0;font:90px/1.25 LessonKai}
.finish-words span.py{font-size:30px;line-height:1.5;color:#987448}
.finish-summary .finish-copy{display:block;font:31px/1.55 LessonKai;margin:25px 0 0;padding:0;background:none;white-space:nowrap}
.finish-next{font:26px/1.5 LessonRound;padding:14px 18px;margin:22px 0 0;background:#edf0dc;border:1px solid #d5ddbe;border-radius:20px;color:#8c7145}
@media(prefers-reduced-motion:no-preference){.finish-companion{animation:v18-reward-arrive .75s cubic-bezier(.18,.75,.3,1) both}.finish-words>div{animation:v18-reward-arrive .6s both}.finish-words>div:nth-child(2){animation-delay:.1s}.finish-words>div:nth-child(3){animation-delay:.2s}.finish-words>div:nth-child(4){animation-delay:.3s}}
@keyframes v18-reward-arrive{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}