:root {
  --green:#89e219; --green-dark:#58a700; --green-soft:#e8ffd1;
  --blue:#1cb0f6; --ink:#3c3c3c; --muted:#777; --line:#e5e5e5;
  --danger:#ff4b4b; --danger-dark:#d33131; --danger-soft:#ffdddd;
  font-family:"Arial Rounded MT Bold","Nunito","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box} body{margin:0;color:var(--ink);min-height:100vh;background:radial-gradient(circle at 12% 8%,#e6f9ff 0 11rem,transparent 11.2rem),radial-gradient(circle at 92% 20%,#edffd8 0 14rem,transparent 14.2rem),#f5fbef}
button{font:inherit;color:inherit}.hidden{display:none!important}
.topbar{height:74px;padding:0 max(20px,calc((100vw - 1020px)/2));display:flex;align-items:center;justify-content:space-between;background:#ffffffe8;border-bottom:2px solid var(--line);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.brand{border:0;background:transparent;color:var(--green-dark);font-size:23px;font-weight:900;display:flex;align-items:center;gap:9px;cursor:pointer}.brand-mascot{font-size:34px;filter:drop-shadow(0 3px 0 #c8e7a5)}
.status-strip{display:flex;gap:22px;font-size:18px}.status-item{display:flex;align-items:center;gap:5px}.hearts{color:var(--danger)}.gems{color:#ffb800}
.screen{width:min(980px,calc(100% - 32px));margin:0 auto}.path-screen{padding:32px 0 80px}
.hero-card{border-radius:28px;min-height:190px;color:white;padding:30px 38px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#1cb0f6,#5bd2ff);box-shadow:0 8px 0 #168ac0,0 18px 38px #1cb0f62e}
.hero-card h1{margin:5px 0 9px;font-size:clamp(29px,4vw,45px);line-height:1.12}.hero-card p{margin:0;font-weight:700;font-size:17px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;opacity:.82}.hero-illustration{font-size:82px;transform:rotate(8deg);filter:drop-shadow(0 8px 0 #0002)}
.course-path{margin-top:48px;display:grid;gap:34px}.unit-card{background:#fffffff0;border:2px solid var(--line);border-radius:26px;padding:0 24px 28px;box-shadow:0 5px 0 #ddd;overflow:hidden}
.unit-banner{margin:0 -24px 24px;padding:20px 25px;display:flex;align-items:center;justify-content:space-between;color:white}.unit-banner h2{margin:0;font-size:23px}.unit-banner p{margin:4px 0 0;opacity:.92;font-weight:700}.unit-number{font-size:40px}.level-grid{display:flex;flex-wrap:wrap;gap:36px 22px;justify-content:center}
.level-node{width:76px;height:69px;border:0;border-radius:50%;background:var(--green);color:white;font-size:27px;font-weight:900;cursor:pointer;position:relative;box-shadow:0 7px 0 var(--green-dark),0 12px 20px #58a70033;transition:transform .14s,box-shadow .14s,filter .2s}
/* 2D 按压效果：深色下边阴影模拟按钮厚度，按下时阴影收短并下移。 */
.level-node:hover{transform:translateY(-3px) scale(1.06);filter:brightness(1.04)}.level-node:active{transform:translateY(5px);box-shadow:0 2px 0 var(--green-dark)}
.level-node::after{content:attr(data-label);position:absolute;top:82px;left:50%;transform:translateX(-50%);color:var(--muted);width:115px;font-size:12px}
.lesson-screen{min-height:calc(100vh - 74px);padding:24px 0 124px}.lesson-head{display:grid;grid-template-columns:48px 1fr 80px;align-items:center;gap:18px}.icon-button{border:0;background:transparent;font-size:24px;color:#aaa;cursor:pointer}
.progress-track{height:17px;border-radius:99px;background:#e5e5e5;overflow:hidden}.progress-fill{height:100%;width:0;background:var(--green);border-radius:inherit;transition:width .35s}.lesson-heart{font-size:19px;color:var(--danger);font-weight:900}
.lesson-shell{width:min(720px,100%);margin:56px auto 0}.challenge-kicker{color:var(--blue);font-weight:900;letter-spacing:.08em}.lesson-shell h2{font-size:clamp(25px,4vw,34px);margin:8px 0 30px}.challenge-stage{min-height:330px}
.word-match{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}.match-column{display:grid;gap:13px;align-content:start}
.bubble,.option-card,.word-block{border:2px solid var(--line);border-radius:16px;background:white;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #d9d9d9;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}
.bubble{padding:16px 12px;text-align:center;font-size:17px}.bubble:hover,.option-card:hover,.word-block:hover{transform:translateY(-2px) scale(1.02);border-color:#b7b7b7}.bubble.selected,.option-card.selected{border-color:var(--blue);background:#e5f7ff;color:#087fb6;box-shadow:0 4px 0 #84d8ff}.bubble.matched{border-color:var(--green);background:var(--green-soft);color:var(--green-dark);opacity:.68;pointer-events:none}
.sentence-answer{min-height:105px;border-bottom:3px solid var(--line);padding:12px 5px 20px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;margin-bottom:35px}.word-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}.word-block{padding:13px 17px;font-size:17px;user-select:none}.word-block:active{transform:translateY(3px);box-shadow:0 1px 0 #d9d9d9}.word-block.placed{border-color:var(--blue);animation:snap-in .2s ease-out}
.options-list{display:grid;gap:14px}.option-card{padding:17px 20px;text-align:left;font-size:17px}.option-letter{display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid currentColor;border-radius:9px;margin-right:12px}
.answer-bar{position:fixed;left:0;right:0;bottom:0;min-height:104px;background:#fffffff5;border-top:2px solid var(--line);padding:20px max(22px,calc((100vw - 720px)/2));display:flex;align-items:center;justify-content:space-between;gap:22px;backdrop-filter:blur(12px);z-index:10}
.primary-button{min-width:190px;padding:16px 25px;border:0;border-radius:16px;background:var(--green);color:white;font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;box-shadow:0 5px 0 var(--green-dark);transition:transform .12s,box-shadow .12s,filter .15s}
/* 主按钮按压效果。 */ .primary-button:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--green-dark)}.primary-button:disabled{background:#e5e5e5;color:#aaa;box-shadow:0 5px 0 #ccc;cursor:not-allowed}
.feedback{flex:1;font-size:17px;font-weight:800;max-height:90px;overflow:auto}.feedback strong{display:block;font-size:23px;margin-bottom:4px}.answer-bar.correct{background:#e9ffd6;border-color:var(--green)}.answer-bar.wrong{background:var(--danger-soft);border-color:var(--danger)}.answer-bar.wrong .primary-button{background:var(--danger);box-shadow:0 5px 0 var(--danger-dark)}
/* 答对动画：绿色闪烁并轻弹；答错动画：温和左右摇晃。 */
.lesson-shell.correct-flash{animation:correct-flash .65s}.lesson-shell.shake,.bubble.shake{animation:shake .42s}body.wrong-glow::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;box-shadow:inset 0 0 35px #ff4b4bb3;animation:fade-edge .65s forwards}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:100}.confetti i{position:absolute;top:48%;left:50%;color:var(--green);font-style:normal;font-size:24px;animation:confetti .8s ease-out forwards}.confetti i:nth-child(2){--x:-120px;--y:-120px;color:#ffb800}.confetti i:nth-child(3){--x:120px;--y:-110px;color:#1cb0f6}.confetti i:nth-child(4){--x:-150px;--y:10px;color:#ce82ff}.confetti i:nth-child(5){--x:160px;--y:30px;color:#ff4b4b}.confetti i:nth-child(6){--x:25px;--y:-150px}
@keyframes snap-in{from{transform:translateY(10px) scale(.92)}70%{transform:translateY(-2px) scale(1.04)}}@keyframes correct-flash{30%{filter:drop-shadow(0 0 13px #89e219bf);transform:scale(1.012)}}@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}@keyframes fade-edge{to{opacity:0}}@keyframes confetti{to{transform:translate(var(--x,80px),var(--y,-80px)) rotate(220deg);opacity:0}}
@media(max-width:650px){.topbar{height:65px;padding:0 14px}.brand{font-size:18px}.brand-mascot{font-size:27px}.status-strip{gap:10px;font-size:15px}.path-screen{padding-top:20px}.hero-card{min-height:165px;padding:24px}.hero-illustration{display:none}.unit-card{padding-inline:16px}.unit-banner{margin-inline:-16px}.word-match{gap:10px}.bubble{font-size:15px;padding:14px 7px}.lesson-shell{margin-top:35px}.answer-bar{min-height:122px;flex-direction:column;align-items:stretch;gap:10px}.primary-button{width:100%}}