:root{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#222b42;background:#f3f5fa;font-synthesis:none;--blue:#3255e7;--muted:#697389;--line:#e7eaf2}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #ecac24;outline-offset:4px}a{color:inherit;text-decoration:none}.topbar{height:94px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1280px)/2));gap:18px}.brand{display:flex;align-items:center;gap:13px;font-size:20px;font-weight:850}.brand-sub{display:block;font-size:13px;letter-spacing:3px;margin-top:3px;color:#6d7690}.brand-icon{width:48px;height:48px;background:var(--blue);color:white;border-radius:15px;display:grid;place-items:center;font-size:30px;position:relative;transform:rotate(-5deg)}.brand-icon span{font-size:17px;position:absolute;right:-6px;top:-8px;color:#efb636}.top-right{display:flex;gap:24px;align-items:center}.unit-label{font-size:13px;letter-spacing:1.3px;color:var(--muted);font-weight:650}.icon-button{background:white;border:1px solid var(--line);border-radius:50%;width:35px;height:35px;font-weight:700;color:var(--muted)}main{max-width:1280px;margin:auto;padding:40px 0 20px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--blue)}h1{font-size:30px;letter-spacing:-1px;margin:12px 0 10px}h1>span{color:#efad28;margin-left:12px}.intro p{font-size:15px;color:var(--muted);margin:0}.player{display:flex;gap:12px;align-items:center}.player>span{background:#dce4ff;color:var(--blue);border:4px solid white;border-radius:50%;height:50px;width:50px;display:grid;place-items:center;font-size:22px;font-weight:850}.player strong{font-size:15px}.player small{display:block;color:var(--muted);margin-top:5px;font-size:12px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:28px}.tabs{display:flex;gap:8px;margin-bottom:18px}.tabs button{padding:14px 17px;border:0;border-radius:12px;background:transparent;color:#717b93;font-size:15px;font-weight:700;white-space:nowrap}.tabs button.active{background:var(--blue);color:#fff;box-shadow:0 6px 14px #3255e724}.tabs button>span{font-size:12px;margin-right:7px;opacity:.7}.tabs small{font-size:12px;margin-left:8px;padding:3px 5px;border-radius:5px;background:#00000008}.tabs .active small{background:#ffffff24}.game-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px 32px;min-height:535px;box-shadow:0 8px 22px #25315d03}.card-top{display:flex;justify-content:space-between;align-items:center}.pill{font-size:13px;color:var(--blue);background:#eef1ff;padding:7px 11px;border-radius:7px;font-weight:600}#question-count{font-size:13px;color:var(--muted)}.question-heading{text-align:center;padding:27px 0 22px}.question-heading .instruction{font-size:14px;color:var(--muted);margin:0 0 15px}.question-heading h2{font-size:34px;margin:0 0 14px;font-weight:780;line-height:1.4}.question-heading .reward{font-size:13px;background:#fff7e1;color:#956416;display:inline-block;padding:6px 11px;border-radius:20px}.letter-answer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:6px 0 27px}.letter-word{display:flex;gap:5px}.letter-slot{width:35px;height:45px;display:grid;place-items:center;border:0;border-bottom:2px solid #d7ddec;color:var(--blue);font-size:25px;background:#f6f8fe;border-radius:6px 6px 0 0}.letter-slot.current{border-color:var(--blue);background:#eef1ff}.letter-slot.fixed{width:12px;background:transparent}.letter-answer.correct .letter-slot{color:#16835d;background:#eafaef;border-color:#2ba875}.letter-answer.wrong .letter-slot{color:#c6374c;background:#fff0f1;border-color:#e96f7d}.keyboard{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:625px;margin:auto}.letter-key{width:43px;height:46px;background:white;border:1px solid #dce1ec;border-bottom:3px solid #dce1ec;border-radius:9px;font-size:20px;font-weight:600;color:#3e4860;transition:transform .1s}.letter-key:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}.letter-key.edit{width:auto;padding:0 15px;color:var(--muted);font-size:14px;background:#f7f8fb}.feedback{min-height:44px;padding-top:16px;text-align:center;font-size:14px;line-height:1.6}.feedback.success{color:#16835d}.feedback.error{color:#c6374c}.game-actions{display:flex;justify-content:space-between;gap:12px;margin-top:17px}.primary,.secondary{border:0;border-radius:10px;padding:13px 18px;font-size:14px;font-weight:650}.primary{background:var(--blue);color:white;min-width:165px;box-shadow:0 4px 0 #1c3cb9}.primary>span{opacity:.6;margin-left:22px}.secondary{color:#7a8499;background:#f4f6fa}.card-bottom{margin-top:25px;border-top:1px solid var(--line);padding-top:19px;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#8790a4}.learning-tip{display:flex;gap:12px;align-items:center;padding:11px 10px;font-size:13px;color:var(--muted);line-height:1.7}.learning-tip>span{font-size:22px}.learning-tip strong{color:#525e78}aside{padding-top:0}.prize-card{border:1px solid #e7d99e;background:#fff3bf;border-radius:20px;padding:22px 24px;overflow:hidden;position:relative}.prize-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#726129;font-weight:650}.badge{background:#fff9e3;border:1px solid #e5d7a4;border-radius:20px;padding:5px 10px;color:#7b5f1b}.helicopter{font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:135px;text-align:center;line-height:1.5;filter:drop-shadow(0 12px 9px #86621a20);transform:rotate(-8deg);padding:8px 0 0}.prize-name{text-align:center}.prize-name small{font-size:10px;letter-spacing:2px;color:#9c8238;font-weight:750}.prize-name h2{font-size:24px;letter-spacing:-1px;margin:10px 0}.prize-name p{font-size:12px;color:#8b7b43;margin:0 0 22px}.wallet{background:#fffdf3;border:1px solid #eadba8;border-radius:13px;padding:17px 19px}.wallet>span{font-size:12px;color:#7b755f}.wallet strong{font-size:44px;letter-spacing:-2px;color:#2e384b;font-variant-numeric:tabular-nums}.wallet b{font-size:14px;color:#928a73;font-weight:500}.wallet>div:nth-child(2){margin:3px 0 12px}.progress{height:8px;background:#eae8de;border-radius:8px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:var(--blue);border-radius:8px;transition:width .4s}.wallet p{font-size:12px;color:#8e8055;margin:12px 0 0}.milestones{display:flex;justify-content:space-between;font-size:10px;color:#948043;margin-top:13px}.mission-card{background:white;border:1px solid var(--line);border-radius:18px;margin-top:18px;padding:20px 23px}.mission-card h3{margin:0 0 20px;font-size:15px;display:flex;justify-content:space-between}.mission-card h3 span{color:#a6afc3}.mission-card>div{display:flex;justify-content:space-between;font-size:13px;margin:15px 0;color:var(--muted)}.mission-card strong{color:#444f69;font-size:14px}.mission-card button{width:100%;padding:12px;background:#eff2ff;border:0;border-radius:9px;color:var(--blue);font-weight:700;margin-top:5px;font-size:13px}.mission-card p{font-size:11px;text-align:center;color:#959daf;margin:11px 0 0}footer{display:flex;justify-content:space-between;color:#8b93a3;font-size:12px;margin-top:24px;padding-top:18px;border-top:1px solid #e2e6ef}.text-button{border:0;background:transparent;color:#727e98;font-size:12px;padding:0}.sentence-inputs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;margin:10px 0 16px}.word-field{display:flex;flex-direction:column;align-items:center;gap:7px}.word-field input{width:100%;min-width:46px;height:45px;border:0;border-bottom:2px solid #b8c4e2;border-radius:5px 5px 0 0;background:#f4f6fb;text-align:center;font-size:20px;color:#263b75;outline:none}.word-field input:focus{border-color:var(--blue);background:#edf1ff}.word-field input.correct{color:#138252;background:#eaf8ef;border-color:#27a66c}.word-field input.wrong{color:#bc3349;background:#fff0f1;border-color:#df6278}.word-field small{font-size:11px;color:#8c94a5}.sentence-note{text-align:center;font-size:12px;color:#8690a4}.hint-button{background:#fff5e6;border:1px solid #f2d59b;border-radius:9px;color:#926119;font-size:13px;padding:11px;touch-action:none;user-select:none;-webkit-user-select:none}.hint-button.listening{background:#dfe7ff;border-color:var(--blue);color:var(--blue)}#help-area{text-align:center;margin-top:6px}#voice-status{font-size:12px;color:var(--muted);line-height:1.6}#help-area .text-button{display:inline-block;margin:0 0 7px}#help-area [hidden]{display:none}.hint-answer{background:#fff8de;border:1px dashed #eac875;padding:18px;border-radius:12px;text-align:center;font-size:23px;line-height:1.6}.hint-answer p{font-size:13px;color:#8a7438}.hint-answer button{margin-top:10px}.listen-answer{margin-top:12px;border:0;background:#edf5ff;color:#3255e7;border-radius:8px;padding:8px 13px;font-size:13px}.empty-state{text-align:center;padding:65px 15px;color:var(--muted)}.empty-state h2{color:#273451}dialog{border:0;border-radius:22px;box-shadow:0 20px 100px #10214e3d;padding:36px;max-width:550px;width:calc(100% - 32px);color:#29364e;max-height:90vh;overflow:auto}dialog::backdrop{background:#15244b66;backdrop-filter:blur(4px)}.close-modal{position:absolute;right:16px;top:16px}.modal-title{font-size:25px;margin:8px 0 18px}.rules-list{font-size:15px;line-height:1.9;padding-left:20px}.result{text-align:center}.result-icon{font-size:80px}.result-score{font-size:65px;color:var(--blue);font-weight:850;margin:10px}.result-score small{font-size:20px;letter-spacing:0}.result h2{font-size:23px;line-height:1.5}.result p{font-size:14px;color:var(--muted);line-height:1.8}.result button{margin-top:15px}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:#273a6f;color:white;padding:13px 22px;border-radius:12px;z-index:10;transition:transform .25s;font-size:16px;pointer-events:none}#toast.show{transform:translateX(-50%) translateY(0)}#confetti{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}.confetto{position:absolute;top:-25px;width:11px;height:20px;animation:fall 3.5s ease-in forwards}@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(800deg)}}
@media(min-width:1500px){main{padding-top:48px}.game-card{min-height:560px}.question-heading{padding-top:35px}}
@media(max-width:1350px){main{padding:32px 30px 20px}.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:22px}.tabs button{padding:14px 12px}.game-card{padding:25px}}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 255px;gap:18px}.tabs{gap:0}.tabs button{font-size:13px;padding:12px 10px}.tabs small{display:none}.tabs button>span{margin-right:3px}.game-card{padding:20px}.game-actions{flex-wrap:wrap;justify-content:center}.primary{min-width:130px}.secondary{padding:12px}.prize-card{padding:18px}.helicopter{font-size:110px}.player{display:none}h1{font-size:28px}.letter-slot{width:28px;height:38px;font-size:22px}.card-bottom{font-size:11px}.prize-name h2{font-size:21px}}
@media(max-width:740px){.topbar{height:75px;padding:0 20px}.unit-label{display:none}.brand{font-size:17px}.brand-icon{width:40px;height:40px}.brand-sub{font-size:11px}main{padding:27px 16px 16px}.intro{margin-bottom:23px}.eyebrow{font-size:10px}h1{font-size:23px;letter-spacing:-.6px}h1>span{margin-left:5px}.intro p{font-size:13px}.workspace{display:flex;flex-direction:column;gap:20px}.tabs{justify-content:space-between;gap:4px}.tabs button{font-size:13px;padding:12px 11px;flex:1}.game-card{padding:20px 16px;min-height:480px}.question-heading h2{font-size:27px}.question-heading{padding:23px 0 17px}.letter-key{width:39px;height:43px}.keyboard{gap:7px}.game-actions{gap:7px;justify-content:space-between}.primary,.secondary{font-size:12px;padding:12px 10px;min-width:0}.primary>span{margin-left:8px}.letter-word{gap:4px}.letter-slot{width:26px;height:38px}.letter-answer{gap:10px}.card-bottom{font-size:10px;gap:6px}aside{display:grid;grid-template-columns:1fr;gap:16px}.prize-card{padding:20px}.helicopter{float:left;width:40%;font-size:100px;padding-top:18px}.prize-name{padding-top:27px;min-height:150px}.prize-name small{font-size:9px}.prize-name h2{font-size:21px}.wallet{clear:both}.wallet strong{font-size:37px}.mission-card{margin-top:0}.learning-tip{font-size:12px}.word-field input{font-size:18px}.sentence-inputs{gap:15px 8px}footer{gap:20px;font-size:11px}.text-button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.confetto{display:none}}

#unit-navigation{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0 0 12px}.unit-option{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:#fff;border:2px solid #e4e9f3;border-radius:14px;min-width:0}.unit-option>span{font-size:12px;font-weight:800;color:#7c89a7;letter-spacing:1px}.unit-option strong{font-size:18px}.unit-option small{font-size:13px;color:#6d7891;line-height:1.4}.unit-option.selected{border-color:#3255e7;background:#eef2ff}.unit-option.selected>span{color:#3255e7}.unit-option:hover{border-color:#8c9fea}#unit-detail{font-size:13px;color:#707d96;margin:0 0 24px;line-height:1.6}.mystery-pet{transform:none!important}.letter-word{max-width:100%;flex-wrap:wrap;justify-content:center}@media(max-width:740px){#unit-navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.unit-option{padding:12px 9px;gap:5px}.unit-option strong{font-size:15px}.unit-option small{font-size:11px;overflow-wrap:anywhere}.unit-option>span{font-size:11px}#unit-detail{font-size:12px}.intro h1{line-height:1.4}.letter-word{gap:3px}.letter-slot{width:24px}}

.answer-book{padding-left:24px}.answer-book li{padding:10px 0;border-bottom:1px solid #e7eaf2;line-height:1.6}.answer-book strong,.answer-book span{display:block;overflow-wrap:anywhere}.answer-book span{font-size:13px;color:#697389}@media(max-width:740px){.top-right{gap:8px}#study{padding:10px;font-size:12px}.unit-option{padding:9px}.unit-option small{display:none}#unit-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}}
