@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap";:root{--blue:#2563eb;--blue-dark:#1d4ed8;--navy:#10203a;--purple:#8b5cf6;--ink:#1f2937;--muted:#6b7280;--line:#2563eb1a;--paper:#fff;--panel:#fff;--surface:#f6f9ff;--mint:#e6f9fd;--mint-strong:#0e7490;--sky:#eaf2ff;--sky-strong:#2563eb;--sun:#fff2c2;--coral:#ffe4de;--coral-strong:#dc6147;--radius:24px;--shadow:0 24px 60px #1839741f;color:var(--ink);font-family:DM Sans,Noto Sans SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{min-height:100vh;min-height:100dvh;color:var(--ink);-webkit-font-smoothing:antialiased;background:linear-gradient(148deg,#fff 28%,#f3f7ff 100%);margin:0}button{font:inherit;cursor:pointer;border:0}.app-shell{width:min(1180px,100% - 48px);min-height:100vh;align-items:center;min-height:100dvh;margin:0 auto;padding:24px 0;display:flex}@media (display-mode:standalone){.app-shell{padding-top:max(12px, env(safe-area-inset-top));padding-bottom:max(12px, env(safe-area-inset-bottom))}}.practice-panel{width:100%;padding:0}@media (max-width:1180px),(pointer:coarse){.app-shell{width:100%;padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));align-items:stretch}.practice-panel{min-height:calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));grid-template-rows:minmax(0,1fr) auto;display:grid}.question-area{min-height:0}}.topbar,.progress-line,.actions,.stats{align-items:center;display:flex}.topbar{justify-content:space-between;gap:18px}.eyebrow,h1{margin:0}.eyebrow{color:var(--mint-strong);font-size:15px;font-weight:800}h1{margin-top:4px;font-size:clamp(32px,5vw,54px);line-height:1}.stats{flex-wrap:wrap;justify-content:flex-end;gap:10px}.stats span,.level-strip button,.actions button{background:var(--paper);min-height:44px;color:var(--ink);border-radius:14px;padding:0 16px;font-weight:800;box-shadow:inset 0 0 0 1px #dce6f8}.level-strip{gap:10px;margin:22px 0;padding-bottom:4px;display:flex;overflow-x:auto}.level-strip button{white-space:nowrap}.level-strip button.active{background:var(--mint);color:#146743;box-shadow:inset 0 0 0 2px var(--mint-strong)}.question-area{gap:0;display:grid}.progress-line{color:var(--muted);justify-content:space-between;gap:12px;font-weight:800}.hanzi-card,.game-stage{border-radius:var(--radius);background:radial-gradient(circle at 8% 12%, #2563eb14, transparent 25%), radial-gradient(circle at 92% 8%, #8b5cf612, transparent 24%), var(--panel);border:1px solid #e9eef8;place-items:center;gap:20px;min-height:280px;padding:24px;display:grid;position:relative;box-shadow:0 15px 40px #1f46890f}.hanzi-card.correct,.game-stage.correct{animation:.56s correct-pop}.hanzi-card.wrong,.game-stage.wrong{animation:.42s wrong-shake}.game-stage{perspective:900px;min-height:450px;box-shadow:none;background:0 0;border:0;grid-template-rows:auto auto 1fr;padding-left:0;padding-right:0;overflow:hidden}@media (min-width:761px) and (max-width:1180px),(min-width:761px) and (pointer:coarse){.practice-panel{padding:0}.game-stage{min-height:clamp(420px,48dvh,520px);padding:18px 0}.road{height:clamp(260px,34dvh,320px)}.keyboard{gap:10px;margin-top:4px;padding:14px}.key{min-height:clamp(48px,5.8dvh,58px)}}.game-hud{z-index:3;grid-template-columns:minmax(96px,1fr) auto auto repeat(4,auto);align-items:center;gap:8px;width:100%;padding:0 24px;display:grid}.game-hud h1{color:#13213a;letter-spacing:0;font-size:clamp(22px,2.4vw,32px);font-weight:800}.game-hud span,.game-hud select,.hud-button{color:#344258;min-height:36px;font:inherit;background:#ffffffeb;border:0;border-radius:12px;place-items:center;padding:7px 12px;font-weight:800;display:grid;box-shadow:inset 0 0 0 1px #dce6f8,0 6px 15px #1c43840f}.hud-button{cursor:pointer}.hud-button.active{color:#fff;background:linear-gradient(135deg, var(--blue), var(--blue-dark));box-shadow:0 10px 22px #2563eb2e}.game-hud select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:28px}.timer-card{color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 10px 22px #2563eb2e}.speak-button{width:auto;min-width:88px;height:44px;color:var(--blue-dark);background:linear-gradient(135deg,#fff,#eef6ff);border-radius:999px;flex:none;padding:0 16px 0 52px;font-size:16px;font-weight:900;position:relative;box-shadow:inset 0 0 0 1px #dce6f8,0 10px 22px #2563eb1f}.speak-button:before{content:"";clip-path:polygon(0 30%,42% 30%,100% 0,100% 100%,42% 70%,0 70%);background:currentColor;border-radius:3px 0 0 3px;width:12px;height:14px;position:absolute;top:50%;left:17px;transform:translateY(-50%)}.speak-button:after{content:"";opacity:.72;border:2px solid;border-left:0;border-radius:0 999px 999px 0;width:12px;height:18px;position:absolute;top:50%;left:32px;transform:translateY(-50%)}.hanzi{letter-spacing:0;font-size:clamp(92px,17vw,190px);font-weight:900;line-height:1}.road{width:100%;height:310px;transform-style:preserve-3d;background:linear-gradient(#dcefffe0 0 48%,#94cd976b 48% 100%),linear-gradient(90deg,#0000 0 46%,#fffc 46% 54%,#0000 54% 100%);border-radius:20px;margin-top:4px;position:relative;overflow:hidden;transform:rotateX(4deg);box-shadow:inset 0 -16px #2563eb0f,0 24px 38px #2344791a}.road:before{content:"";pointer-events:none;z-index:0;position:absolute;inset:0}.scene-city .road{background:linear-gradient(#dcefff 0 48%,#d7e4e9 48% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffc2 46% 54%,#0000 54% 100%)}.scene-city .road:before{opacity:.82;background:linear-gradient(#8aa8bb,#8aa8bb) 7% 54%/42px 92px no-repeat,linear-gradient(#7393a8,#7393a8) 14% 46%/54px 112px no-repeat,linear-gradient(#9bb4c4,#9bb4c4) 23%/48px 104px no-repeat,linear-gradient(90deg,#fff6c9 8px,#0000 8px 18px) 8% 57%/34px 14px repeat-y,linear-gradient(90deg,#fff6c9 8px,#0000 8px 18px) 15%/38px 14px repeat-y}.scene-forest .road{background:linear-gradient(#dff4e2 0 48%,#bfe3c1 48% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffc2 46% 54%,#0000 54% 100%)}.scene-forest .road:before{opacity:.92;background:radial-gradient(circle at 9% 34%,#4fb06c 0 24px,#0000 25px),radial-gradient(circle at 15% 30%,#358f55 0 30px,#0000 31px),radial-gradient(circle at 24% 36%,#58b875 0 26px,#0000 27px),radial-gradient(circle at 82% 34%,#4fb06c 0 28px,#0000 29px),radial-gradient(circle at 90% 30%,#358f55 0 32px,#0000 33px),linear-gradient(#8d613d,#8d613d) 9% 48%/12px 58px no-repeat,linear-gradient(#8d613d,#8d613d) 15% 46%/13px 62px no-repeat,linear-gradient(#8d613d,#8d613d) 24% 49%/11px 54px no-repeat,linear-gradient(#8d613d,#8d613d) 84% 47%/13px 62px no-repeat,linear-gradient(#8d613d,#8d613d) 91% 47%/14px 66px no-repeat}.scene-river .road{background:linear-gradient(#dcefff 0 38%,#8bd4ef 38% 51%,#c7e7ca 51% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffc7 46% 54%,#0000 54% 100%)}.scene-river .road:before{background:repeating-linear-gradient(90deg,#ffffff85 0 24px,#0000 24px 52px) 0 42%/100% 20px no-repeat,linear-gradient(90deg,#0000 0 38%,#b28b5e 38% 62%,#0000 62% 100%) 0 46%/100% 20px no-repeat,linear-gradient(#8d613d,#8d613d) 43% 48%/10px 68px no-repeat,linear-gradient(#8d613d,#8d613d) 57% 48%/10px 68px no-repeat,radial-gradient(at 50% 48%,#0000 0 64px,#8d613df2 65px 72px,#0000 73px)}.scene-campus .road{background:linear-gradient(#fff3cf 0 48%,#d97161 48% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffd6 46% 54%,#0000 54% 100%)}.scene-campus .road:before{opacity:.88;background:linear-gradient(#f6d17e,#f6d17e) 78% 41%/120px 78px no-repeat,linear-gradient(#b75246,#b75246) 78% 28%/132px 18px no-repeat,linear-gradient(90deg,#fff8d8 8px,#0000 8px 20px) 80% 46%/76px 16px,repeating-linear-gradient(#ffffffb8 0 3px,#0000 3px 26px) 0 57%/100% 112px no-repeat}.scene-star .road{background:linear-gradient(#29385f 0 48%,#6f7399 48% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffb3 46% 54%,#0000 54% 100%)}.scene-star .road:before{opacity:.9;background:radial-gradient(circle at 10% 18%,#fff7b1 0 3px,#0000 4px),radial-gradient(circle at 22% 26%,#fff 0 2px,#0000 3px),radial-gradient(circle at 36% 14%,#fff7b1 0 2px,#0000 3px),radial-gradient(circle at 58% 25%,#fff 0 3px,#0000 4px),radial-gradient(circle at 78% 18%,#fff7b1 0 2px,#0000 3px),radial-gradient(circle at 90% 30%,#fff 0 3px,#0000 4px),radial-gradient(at 82% 18%,#ffe5a3 0 22px,#0000 23px)}.scene-spring-1 .road,.scene-spring-2 .road,.scene-spring-3 .road{background:linear-gradient(#e4f8df 0 48%,#bfe8b9 48% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffc7 46% 54%,#0000 54% 100%)}.scene-spring-1 .road:before,.scene-spring-2 .road:before,.scene-spring-3 .road:before{opacity:.92;background:radial-gradient(circle at 12% 34%,#ffb7c8 0 18px,#0000 19px),radial-gradient(circle at 22% 28%,#ffd1dc 0 22px,#0000 23px),radial-gradient(circle at 82% 32%,#ffb7c8 0 20px,#0000 21px),linear-gradient(#8d613d,#8d613d) 12% 48%/10px 62px no-repeat,linear-gradient(#8d613d,#8d613d) 22% 46%/12px 70px no-repeat,linear-gradient(#8d613d,#8d613d) 82% 47%/12px 68px no-repeat}.scene-summer-1 .road,.scene-summer-2 .road,.scene-summer-3 .road{background:linear-gradient(#cdefff 0 42%,#87d8f3 42% 52%,#a9e0a7 52% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffc7 46% 54%,#0000 54% 100%)}.scene-summer-1 .road:before,.scene-summer-2 .road:before,.scene-summer-3 .road:before{opacity:.9;background:radial-gradient(circle at 88% 18%,#ffd75a 0 26px,#0000 27px),repeating-linear-gradient(90deg,#ffffff80 0 20px,#0000 20px 50px) 0 45%/100% 18px no-repeat,radial-gradient(circle at 14% 38%,#39a875 0 28px,#0000 29px),radial-gradient(circle at 22% 36%,#58c28d 0 24px,#0000 25px)}.scene-autumn-1 .road,.scene-autumn-2 .road,.scene-autumn-3 .road{background:linear-gradient(#fff0c7 0 48%,#e2b36c 48% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffd1 46% 54%,#0000 54% 100%)}.scene-autumn-1 .road:before,.scene-autumn-2 .road:before,.scene-autumn-3 .road:before{opacity:.92;background:radial-gradient(circle at 12% 34%,#dc7b31 0 24px,#0000 25px),radial-gradient(circle at 24% 30%,#d9a441 0 28px,#0000 29px),radial-gradient(circle at 82% 34%,#c85f3f 0 26px,#0000 27px),linear-gradient(#8d613d,#8d613d) 12% 48%/12px 68px no-repeat,linear-gradient(#8d613d,#8d613d) 24% 46%/12px 70px no-repeat,linear-gradient(#8d613d,#8d613d) 82% 47%/12px 68px no-repeat}.scene-winter-1 .road,.scene-winter-2 .road,.scene-winter-3 .road{background:linear-gradient(#e9f6ff 0 48%,#d9ecf8 48% 100%),linear-gradient(90deg,#0000 0 46%,#ffffffe0 46% 54%,#0000 54% 100%)}.scene-winter-1 .road:before,.scene-winter-2 .road:before,.scene-winter-3 .road:before{opacity:.95;background:radial-gradient(circle at 12% 22%,#fff 0 3px,#0000 4px),radial-gradient(circle at 28% 30%,#fff 0 4px,#0000 5px),radial-gradient(circle at 44% 18%,#fff 0 3px,#0000 4px),radial-gradient(circle at 62% 28%,#fff 0 4px,#0000 5px),radial-gradient(circle at 84% 22%,#fff 0 3px,#0000 4px),linear-gradient(#9aacb8,#9aacb8) 78% 43%/64px 78px no-repeat}.road:after{content:"";z-index:1;background:repeating-linear-gradient(90deg,#fffffff2 0 48px,#0000 48px 76px);border-radius:999px;height:10px;position:absolute;bottom:42px;left:3%;right:3%;transform:perspective(500px)rotateX(42deg)}.runner{z-index:2;width:78px;height:124px;transition:left .7s cubic-bezier(.22,.8,.22,1);position:absolute;bottom:54px;left:0;transform:translate(-10%)}.target-timer{white-space:nowrap;z-index:6;border-radius:999px;place-items:center;min-width:54px;min-height:32px;padding:6px 10px;font-size:15px;font-weight:900;line-height:1;display:grid;position:absolute;top:-44px;left:50%;transform:translate(-50%)}.target-timer:after{content:"";background:#1d4ed8;width:10px;height:10px;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)rotate(45deg)}.runner span{background:#2e85c7;display:block;position:absolute}.runner-shadow{filter:blur(2px);border-radius:50%;width:76px;height:16px;bottom:-10px;left:0;background:#23313d33!important}.runner-head{border-radius:50%;width:34px;height:34px;top:0;left:24px;box-shadow:inset 0 -3px #cf5f3f2e;background:#ffd9ce!important}.runner-face{z-index:4;border-radius:50%;width:5px;height:5px;top:13px;left:47px;box-shadow:-10px 0 #23313d;background:#23313d!important}.runner-body{border-radius:12px 12px 10px 10px;width:28px;height:42px;top:36px;left:30px;box-shadow:inset -5px -5px #0d4e7d38;background:linear-gradient(135deg,#57a8df,#2e85c7)!important}.runner.reward-spring-jacket .runner-body,.runner.reward-vest .runner-body,.runner.reward-winter-coat .runner-body{background:linear-gradient(135deg,#ff9fb7,#39a875)!important}.runner.reward-vest .runner-body{background:linear-gradient(135deg,#d9a441,#8a5a06)!important}.runner.reward-winter-coat .runner-body{border-radius:16px;width:34px;left:27px;background:linear-gradient(135deg,#8bd4ef,#2e85c7)!important}.runner-rewards,.runner-reward-item{display:block;position:absolute}.runner-rewards{z-index:5;pointer-events:none;inset:0;background:0 0!important}.runner-reward-item{transform-origin:50%;background:0 0!important}.runner-reward-item.reward-kite{width:26px;height:26px;top:16px;right:-22px;transform:rotate(45deg);box-shadow:12px 12px 0 -10px #8d613d;background:linear-gradient(135deg,#ffb7c8 50%,#fff3cf 50%)!important}.runner-reward-item.reward-picnic-bag{border-radius:8px;width:20px;height:24px;top:48px;left:5px;box-shadow:inset 0 0 0 3px #fff3cf;background:#c85f3f!important}.runner-reward-item.reward-sun-hat{border-radius:50% 50% 8px 8px;width:44px;height:16px;top:-5px;left:18px;box-shadow:inset 0 -4px #8a5a062e;background:#ffd75a!important}.runner-reward-item.reward-wool-hat{border-radius:18px 18px 8px 8px;width:36px;height:22px;top:-8px;left:22px;background:#8bd4ef!important}.runner-reward-item.reward-wool-hat:after{content:"";background:#fff;border-radius:50%;width:10px;height:10px;position:absolute;top:-8px;left:13px}.runner-reward-item.reward-water-bottle{border-radius:5px;width:12px;height:30px;top:54px;right:4px;box-shadow:inset 0 0 0 2px #2e85c7;background:#8bd4ef!important}.runner-reward-item.reward-swim-ring{border-radius:50%;width:40px;height:30px;top:52px;left:18px;box-shadow:inset 0 0 0 8px #ff6b6b;background:0 0!important}.runner-reward-item.reward-scarf{border-radius:999px;width:38px;height:12px;top:34px;left:26px;background:#c85f3f!important}.runner-reward-item.reward-basket{border-radius:4px 4px 10px 10px;width:26px;height:20px;top:70px;right:-7px;box-shadow:inset 0 0 0 3px #8a5a06;background:#d9a441!important}.runner-reward-item.reward-mittens{border-radius:50%;width:12px;height:12px;top:76px;left:18px;box-shadow:46px 0 #fff;background:#fff!important}.runner-arm,.runner-leg{transform-origin:top;border-radius:999px;width:8px;height:42px}.runner-arm.left{top:44px;left:30px;transform:rotate(58deg)}.runner-arm.right{top:44px;left:53px;transform:rotate(-58deg)}.runner-leg.left{height:44px;top:76px;left:35px;transform:rotate(34deg)}.runner-leg.right{height:44px;top:76px;left:51px;transform:rotate(-34deg)}.runner-foot{border-radius:999px;width:22px;height:8px;background:#23313d!important}.runner-foot.left{top:116px;left:17px}.runner-foot.right{top:116px;left:52px}.game-stage.walking .runner{animation:.9s ease-in-out infinite runner-bob}.game-stage.paused .runner,.game-stage.paused .runner *,.game-stage.paused .target-sign,.game-stage.paused .round-reward,.game-stage.paused .reward-spark{animation-play-state:paused!important}.game-stage.paused .road{filter:saturate(.82)}.game-stage.walking .runner-arm.left{animation:.9s ease-in-out infinite arm-left}.game-stage.walking .runner-arm.right{animation:.9s ease-in-out infinite arm-right}.game-stage.walking .runner-leg.left{animation:.9s ease-in-out infinite leg-left}.game-stage.walking .runner-leg.right{animation:.9s ease-in-out infinite leg-right}.game-stage.running .runner,.game-stage.back .runner{transition-duration:.62s;animation:.36s ease-in-out infinite runner-bob}.game-stage.running .runner-arm.left,.game-stage.back .runner-arm.left{animation:.36s ease-in-out infinite arm-left}.game-stage.running .runner-arm.right,.game-stage.back .runner-arm.right{animation:.36s ease-in-out infinite arm-right}.game-stage.running .runner-leg.left,.game-stage.back .runner-leg.left{animation:.36s ease-in-out infinite leg-left}.game-stage.running .runner-leg.right,.game-stage.back .runner-leg.right{animation:.36s ease-in-out infinite leg-right}.game-stage.back .runner{transform:translate(-10%)scaleX(-1)}.target-sign{border:4px solid var(--blue);z-index:3;transform-origin:50% 120%;background:#fff;border-radius:16px;place-items:center;width:clamp(118px,15vw,162px);height:124px;transition:transform .42s,bottom .42s;display:grid;position:absolute;bottom:84px;right:auto;box-shadow:0 16px 35px #1e407d24}.target-sign:after{content:"";background:var(--blue);border-radius:999px;width:10px;height:42px;position:absolute;bottom:-42px;left:50%;transform:translate(-50%)}.target-sign span{white-space:nowrap;color:#13213a;max-width:calc(100% - 16px);font-size:clamp(48px,7vw,76px);font-weight:900;line-height:1}.target-sign.word{width:clamp(170px,19vw,220px);height:126px}.target-sign.word span{font-size:clamp(44px,5.4vw,64px)}.target-sign.long-word{width:clamp(210px,24vw,280px);height:132px}.target-sign.long-word span{font-size:clamp(34px,4.5vw,52px)}.game-stage.success .target-sign,.game-stage.finished .target-sign{bottom:142px;transform:rotate(-4deg)scale(1.05)}.game-stage.finished .target-sign{opacity:0}.game-stage.success .runner,.game-stage.finished .runner,.game-stage.celebrate .runner{animation:.52s ease-in-out infinite celebrate-bob}.game-stage.round-complete .runner{transform-origin:50% 96%;animation:.98s ease-in-out infinite reward-celebrate}.game-stage.success .runner-arm.left,.game-stage.finished .runner-arm.left,.game-stage.celebrate .runner-arm.left{height:50px;top:38px;left:25px;transform:rotate(-138deg)}.game-stage.success .runner-arm.right,.game-stage.finished .runner-arm.right,.game-stage.celebrate .runner-arm.right{height:50px;top:38px;left:58px;transform:rotate(138deg)}.finish-line{z-index:4;width:190px;height:160px;display:none;position:absolute;bottom:40px;right:2.5%}.finish-line:before{content:"终点奖励";color:#8a5a06;background:#fffdf8;border-radius:8px;padding:6px 12px;font-weight:900;position:absolute;top:-34px;right:0;box-shadow:inset 0 0 0 2px #c9850e40}.reward-car{width:180px;height:112px;position:absolute;bottom:0;right:0}.car-body{background:linear-gradient(135deg,#ffcf5b,#ef7d47);border-radius:18px 28px 12px 12px;width:154px;height:54px;position:absolute;bottom:18px;left:10px;box-shadow:inset -12px -10px #9547212e,0 14px 26px #23313d29}.car-body:before{content:"";background:#9ed6ff;border-radius:16px 16px 4px 4px;width:68px;height:32px;position:absolute;top:-28px;left:42px;box-shadow:inset -7px -5px #2e85c73d}.car-wheel{background:#23313d;border-radius:50%;width:30px;height:30px;position:absolute;bottom:6px;box-shadow:inset 0 0 0 7px #667789}.car-wheel.left{left:32px}.car-wheel.right{right:28px}.car-box{color:#23313d;z-index:2;border-radius:8px;place-items:center;font-size:13px;font-weight:900;display:grid;position:absolute;box-shadow:0 8px 16px #23313d24}.car-box.tv{background:#dcefff;width:58px;height:36px;top:18px;left:4px;box-shadow:inset 0 0 0 4px #2e85c7,0 8px 16px #23313d24}.car-box.fridge{background:#eef8fb;width:42px;height:68px;top:2px;left:64px;box-shadow:inset 0 0 0 3px #9aacb8,0 8px 16px #23313d24}.car-box.pc{background:#dff6ed;width:52px;height:34px;top:24px;left:110px;box-shadow:inset 0 0 0 4px #39a875,0 8px 16px #23313d24}.game-stage.finished .finish-line{animation:6.5s ease-in-out forwards drive-home;display:block}.game-stage.finished .reward-car{animation:.7s ease-in-out infinite reward-bounce}.game-stage.finished .runner{z-index:5;animation:6.5s ease-in-out forwards runner-board-car}.round-reward{pointer-events:none;z-index:5;place-items:center;width:150px;height:116px;display:none;position:absolute;top:42px;left:50%;transform:translate(-50%)}.game-stage.round-complete .round-reward{animation:5.2s both reward-pop;display:grid}.victory-message{min-width:260px;min-height:118px;color:var(--ink);text-align:center;z-index:6;background:#fffdf8eb;border-radius:8px;place-items:center;padding:18px 28px;display:none;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 0 2px #dde8eee6,0 22px 48px #23313d2e}.victory-message strong,.victory-message span{display:block}.victory-message strong{color:var(--mint-strong);font-size:clamp(34px,5vw,58px);font-weight:900;line-height:1}.victory-message span{color:var(--muted);margin-top:12px;font-size:18px;font-weight:900}.game-stage.finished .victory-message{animation:6.5s forwards victory-show;display:grid}.reward-badge{background:var(--sun);color:#8a5a06;border-radius:50%;place-items:center;width:76px;height:76px;font-size:42px;font-weight:900;display:grid;box-shadow:inset 0 0 0 4px #c9850e38,0 16px 26px #c9850e33}.reward-gift{background:var(--coral);color:#79311d;border-radius:8px;place-items:center;min-width:58px;min-height:38px;font-size:15px;font-weight:900;display:grid;position:absolute;bottom:8px;right:6px;box-shadow:inset 0 0 0 3px #cf5f3f3d,0 10px 18px #cf5f3f29}.reward-badge.reward-spring-jacket,.reward-badge.reward-kite,.reward-badge.reward-picnic-bag{color:#8b2f48;background:#ffcfda}.reward-badge.reward-sun-hat,.reward-badge.reward-water-bottle,.reward-badge.reward-swim-ring{color:#0e7490;background:#8bd4ef}.reward-badge.reward-scarf,.reward-badge.reward-basket,.reward-badge.reward-vest{color:#8a5a06;background:#f6c56b}.reward-badge.reward-winter-coat,.reward-badge.reward-wool-hat,.reward-badge.reward-mittens{color:#2e85c7;background:#e9f6ff}.reward-spark{background:var(--mint-strong);border-radius:50%;width:12px;height:12px;position:absolute;box-shadow:0 0 0 6px #39a87529}.reward-spark.one{top:18px;left:16px}.reward-spark.two{background:var(--sky-strong);top:10px;right:24px;box-shadow:0 0 0 6px #2e85c729}.reward-spark.three{background:var(--coral-strong);bottom:18px;left:34px;box-shadow:0 0 0 6px #cf5f3f24}.stage-control{z-index:5;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:0 24px;display:flex}.stage-status{min-height:24px;color:var(--muted);text-align:center;background:#fffdf8c7;border-radius:999px;place-items:center;padding:5px 10px;font-size:15px;font-weight:800;display:grid;box-shadow:inset 0 0 0 1px #dde8eee6}.stage-actions{flex-wrap:nowrap;justify-content:flex-end;gap:6px}.stage-actions.actions{border-top:0;margin-top:0;padding-top:0}.stage-actions.actions.icon-actions button,.stage-actions.actions.icon-actions .toggle-button,.stage-actions.actions.icon-actions .speak-button,.stage-actions.actions.icon-actions .fullscreen-button{color:#506079;background:#ffffffb3;border-radius:12px;min-width:48px;height:34px;padding:0 10px;font-size:13px;font-weight:800;box-shadow:inset 0 0 0 1px #dce6f8,0 4px 12px #1c43840d}.stage-actions.actions.icon-actions .speak-button{min-width:54px;padding-left:10px}.stage-actions.actions.icon-actions .speak-button:before,.stage-actions.actions.icon-actions .speak-button:after{display:none}.stage-actions.actions.icon-actions .toggle-button.active,.stage-actions.actions.icon-actions .fullscreen-button.active{color:#1d4ed8;background:#edf5ff;box-shadow:inset 0 0 0 1px #bfdbfe,0 4px 12px #2563eb14}.reward-collection{max-width:calc(100% - 180px);color:var(--muted);z-index:4;background:#ffffffc7;border-radius:14px;align-items:center;gap:8px;padding:7px 9px;display:flex;position:absolute;top:14px;left:14px;box-shadow:inset 0 0 0 1px #dde8eee6}.reward-collection-title{font-size:13px;font-weight:900}.reward-collection-items{flex-wrap:wrap;gap:5px;min-width:0;display:flex}.reward-chip{color:#344258;background:#f7faff;border-radius:999px;align-items:center;min-height:24px;padding:4px 8px;font-size:12px;font-weight:900;display:inline-flex;box-shadow:inset 0 0 0 1px #dce6f8}.reward-chip.empty{color:#8b98aa}.reward-chip.reward-spring-jacket,.reward-chip.reward-kite,.reward-chip.reward-picnic-bag{color:#8b2f48;background:#fff0f4}.reward-chip.reward-sun-hat,.reward-chip.reward-water-bottle,.reward-chip.reward-swim-ring{color:#0e7490;background:#e6f9fd}.reward-chip.reward-scarf,.reward-chip.reward-basket,.reward-chip.reward-vest{color:#8a5a06;background:#fff5db}.reward-chip.reward-winter-coat,.reward-chip.reward-wool-hat,.reward-chip.reward-mittens{color:#2e85c7;background:#edf7ff}.tone-popover{box-shadow:none;background:0 0;border-radius:14px;gap:10px;padding:0;display:flex;position:static}.tone-popover[hidden]{display:none}.tone-popover button{background:linear-gradient(135deg, var(--blue), var(--blue-dark));color:#fff;border-radius:14px;width:48px;height:44px;font-size:32px;font-weight:900;line-height:1;box-shadow:0 12px 25px #2563eb33}.input-strip{background:#f7faff;border-radius:18px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;display:grid;box-shadow:inset 0 0 0 1px #dce6f8}.input-status{grid-template-columns:minmax(180px,1fr) auto minmax(92px,auto);align-items:center;gap:10px;min-width:0;display:grid}.answer-slots{flex-wrap:wrap;justify-content:center;gap:8px;width:min(720px,100%);min-height:62px;display:flex}.answer-slots.compact{background:#f6f9ffc7;border-radius:14px;align-items:center;width:100%;min-height:44px;padding:4px 8px;box-shadow:inset 0 0 0 1px #dce6f8}.selected-token{min-width:44px;min-height:40px;color:var(--ink);border-radius:12px;place-items:center;padding:7px 12px;font-size:22px;font-weight:900;display:grid;box-shadow:inset 0 0 0 1px #2563eb1a}.selected-token.initial{background:var(--sky);color:var(--blue-dark)}.selected-token.final{background:var(--mint);color:var(--mint-strong)}.selected-token.tone{color:var(--purple);background:#f1ebff;font-size:30px;line-height:1}.selected-token.whole{color:#8a5a06;background:#fff3cf}.input-empty{color:var(--muted);font-size:16px;font-weight:900}.syllable-input{justify-items:center;gap:6px;display:grid}.slot-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.slot{min-width:64px;min-height:52px;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);background:#f5fafc;border-radius:8px;place-items:center;padding:10px 14px;font-size:22px;font-weight:900;display:grid}.tone-mark{color:#a06b0d;background:#fff8dc;border-radius:8px;place-items:center;min-width:48px;min-height:34px;font-size:28px;font-weight:900;line-height:1;display:grid;box-shadow:inset 0 0 0 1px #c9850e2e}.tone-mark.filled{background:var(--sun);color:#734b00;box-shadow:inset 0 0 0 2px #c9850e47}.slot.placeholder{color:#9aacb8;background:#f5fafcb8}.feedback{min-height:0;color:var(--muted);text-align:left;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:16px;font-weight:800;overflow:hidden}.feedback:empty{display:none}.feedback.good{color:var(--blue)}.feedback.warn{color:var(--coral-strong)}.keyboard{border-radius:var(--radius);box-shadow:var(--shadow);background:#fffffff0;border:1px solid #e9eef8;gap:10px;margin-top:0;padding:14px;display:grid}.keyboard .input-strip{margin-bottom:2px}.key-group{grid-template-columns:72px 1fr;align-items:start;gap:10px;display:grid}.group-title{color:#536075;background:#f6f9ff;border-radius:14px;place-items:center;min-height:46px;font-size:14px;font-weight:800;display:grid;box-shadow:inset 0 0 0 1px #e9eef8}.keys{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px;display:grid}.keys.finals{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}.whole-keys{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.tone-keys{grid-template-columns:repeat(5,minmax(72px,1fr))}.key{background:var(--paper);color:#1f2937;border-radius:14px;min-height:46px;font-size:20px;font-weight:900;transition:transform .14s,box-shadow .14s,background .14s;box-shadow:inset 0 0 0 1px #dce6f8,0 7px 18px #24447b0f}.key.whole{color:#8a5a06;background:#fff3cf}.key:hover,.actions button:hover,.level-strip button:hover{box-shadow:inset 0 0 0 2px var(--blue), 0 12px 26px #2563eb29;outline:0;transform:translateY(-1px)}.key:focus-visible{box-shadow:inset 0 0 0 2px var(--blue), 0 12px 26px #2563eb29;outline:0;transform:translateY(-1px)}.actions button:focus-visible{box-shadow:inset 0 0 0 2px var(--blue), 0 12px 26px #2563eb29;outline:0;transform:translateY(-1px)}.level-strip button:focus-visible{box-shadow:inset 0 0 0 2px var(--blue), 0 12px 26px #2563eb29;outline:0;transform:translateY(-1px)}.key:active,.actions button:active{transform:translateY(1px)}.key.initial{color:var(--blue-dark);background:#eaf2ff}.key.final{color:#0e7490;background:#e6f9fd}.key.tone{color:var(--purple);background:#f1ebff;font-size:30px;line-height:1}.actions{border-top:1px solid #edf3fb;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px;padding-top:10px}.input-tools{border-top:0;flex-wrap:nowrap;justify-content:flex-end;width:422px;margin-top:0;padding-top:0}.actions button{min-width:104px}.actions.icon-actions button{width:44px;min-width:44px;height:44px;color:var(--blue);background:#fff;padding:0;font-size:24px;line-height:1;box-shadow:inset 0 0 0 1px #dce6f8,0 6px 15px #1c438414}.input-tools.actions.icon-actions .delete-action{letter-spacing:0;width:72px;min-width:72px;font-size:19px}.delete-arrow{width:30px;height:16px;display:inline-block;position:relative}.delete-arrow:before{content:"";background:currentColor;border-radius:999px;width:22px;height:3px;position:absolute;top:7px;left:7px}.delete-arrow:after{content:"";border-bottom:3px solid;border-left:3px solid;border-radius:2px;width:10px;height:10px;position:absolute;top:3px;left:2px;transform:rotate(45deg)}.actions.icon-actions .speak-button{width:auto;min-width:88px;padding:0 16px 0 52px;font-size:16px}.actions.icon-actions .toggle-button{width:auto;min-width:58px;color:var(--muted);padding:0 12px;font-size:15px}.actions.icon-actions .toggle-button.active{color:#fff;background:linear-gradient(135deg, var(--blue), var(--blue-dark));box-shadow:0 10px 22px #2563eb2e}.actions:not(.icon-actions) button:last-child{background:var(--coral);color:#79311d}@media (max-width:760px){.app-shell{width:100%;padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));align-items:stretch}.practice-panel{min-height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));padding:0}.topbar,.progress-line{flex-direction:column;align-items:flex-start}.stats{justify-content:flex-start}.hanzi-card{min-height:230px;padding:18px 12px}.game-stage{min-height:clamp(390px,52dvh,500px);padding:14px 0}.game-hud{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.game-hud h1{grid-column:span 2}.game-hud span,.game-hud select,.hud-button{min-height:34px;padding:6px 8px;font-size:14px}.stage-control{flex-wrap:wrap;gap:6px;padding:0 8px}.stage-status{font-size:13px}.stage-actions{flex-wrap:wrap;flex:auto;justify-content:flex-end;gap:6px}.stage-actions.actions.icon-actions button,.stage-actions.actions.icon-actions .toggle-button,.stage-actions.actions.icon-actions .speak-button{min-width:48px;height:34px;padding:0 8px;font-size:13px}.stage-actions.actions.icon-actions .speak-button{min-width:54px;padding-left:8px}.road{height:clamp(220px,31dvh,270px)}.runner{transform:translate(-8%)scale(.86)}.target-sign{width:116px;height:112px;bottom:78px}.target-sign.word{width:156px}.target-sign.long-word{width:196px}.target-sign.word span{font-size:42px}.target-sign.long-word span{font-size:32px}.target-timer{min-width:50px;min-height:30px;font-size:14px;top:-40px}.game-stage.success .target-sign,.game-stage.finished .target-sign{bottom:116px}.reward-collection{gap:6px;max-width:calc(100% - 132px);padding:6px 7px;top:10px;left:10px}.reward-collection-title{font-size:12px}.reward-chip{min-height:22px;padding:3px 7px;font-size:11px}.input-strip{border-radius:16px;grid-template-columns:1fr;gap:8px;padding:7px 8px}.input-status{grid-template-columns:1fr;gap:8px}.input-strip .feedback{text-align:center}.input-tools{flex-wrap:wrap;justify-content:center;width:100%}.round-reward{top:34px;transform:translate(-50%)scale(.86)}.finish-line{transform-origin:100% 100%;width:156px;transform:scale(.86)}.key-group{grid-template-columns:1fr;gap:6px}.group-title{place-items:center start;min-height:38px;padding:0 12px}.tone-keys{grid-template-columns:repeat(2,minmax(0,1fr))}.keyboard{border-radius:18px;gap:8px;padding:10px}.keys{gap:6px}.key{min-height:44px}}@media (max-width:480px){.app-shell{padding:max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom))}.practice-panel{min-height:calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)))}.question-area{gap:0}.game-stage{grid-template-rows:auto auto;min-height:0;padding:8px 0 6px}.game-hud{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 4px}.game-hud h1{grid-column:1/-1;font-size:30px;line-height:1.05}.game-hud select{grid-column:span 2}.game-hud span,.game-hud select,.hud-button{white-space:nowrap;border-radius:13px;min-width:0;min-height:36px;padding:6px 7px;font-size:15px;line-height:1.05}.game-hud select{background-position:calc(100% - 12px) 15px,calc(100% - 8px) 15px;background-size:4px 4px,4px 4px;padding-right:22px}.stage-status{min-height:22px;padding:4px 9px;font-size:13px}.stage-control{align-items:flex-start;padding:0 4px}.stage-actions{grid-template-columns:repeat(5,minmax(0,1fr));width:100%;display:grid}.stage-actions.actions.icon-actions button,.stage-actions.actions.icon-actions .toggle-button,.stage-actions.actions.icon-actions .speak-button{width:100%;min-width:0;height:36px;padding:0;font-size:13px}.stage-actions.actions.icon-actions .speak-button{grid-column:auto;padding-left:0}.road{border-radius:18px;height:clamp(300px,41dvh,360px);margin-top:10px}.runner{transform-origin:0 100%;transform:translate(-8%)scale(.78)}.target-sign{width:126px;height:120px;bottom:88px}.target-sign span{font-size:60px}.target-sign.word{width:156px}.target-sign.long-word{width:188px}.reward-collection{border-radius:13px;max-width:calc(100% - 152px);padding:5px 6px;top:8px;left:8px}.reward-collection-title{font-size:12px}.keyboard{border-radius:18px;gap:7px;margin-top:4px;padding:8px}.input-strip{gap:7px;padding:7px}.input-tools{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:7px;display:grid}.input-tools.actions.icon-actions button,.input-tools.actions.icon-actions .toggle-button,.input-tools.actions.icon-actions .speak-button{width:100%;min-width:0;height:42px;padding:0;font-size:18px}.input-tools.actions.icon-actions .delete-action{grid-column:span 1;width:100%;min-width:0;font-size:18px}.group-title{min-height:34px;font-size:15px}.keys,.keys.finals,.whole-keys{grid-template-columns:repeat(5,minmax(0,1fr))}.key{border-radius:14px;min-height:48px;font-size:22px}.keys.finals .key,.whole-keys .key{font-size:18px}}@keyframes correct-pop{0%{transform:scale(1);box-shadow:inset 0 0 #39a87500}35%{transform:scale(1.018);box-shadow:inset 0 0 0 5px #39a87561,0 18px 36px #39a87529}to{transform:scale(1);box-shadow:inset 0 0 #39a87500}}@keyframes wrong-shake{0%,to{transform:translate(0);box-shadow:inset 0 0 #cf5f3f00}20%{transform:translate(-8px)}40%{transform:translate(8px);box-shadow:inset 0 0 0 5px #cf5f3f47}60%{transform:translate(-5px)}80%{transform:translate(5px)}}@keyframes runner-bob{0%,to{transform:translate(-10%)translateY(0)}50%{transform:translate(-10%)translateY(-8px)}}@keyframes celebrate-bob{0%,to{transform:translate(-10%)translateY(-4px)}50%{transform:translate(-10%)translateY(-14px)}}@keyframes reward-celebrate{0%,to{transform:translate(-10%)translateY(0)rotate(0)scale(1)}28%{transform:translate(-10%)translateY(-30px)rotate(-10deg)scale(1.04)}55%{transform:translate(-10%)translateY(-18px)rotate(12deg)scale(1.03)}78%{transform:translate(-10%)translateY(-6px)rotate(-6deg)scale(1.01)}}@keyframes arm-left{0%,to{transform:rotate(62deg)}50%{transform:rotate(-52deg)}}@keyframes arm-right{0%,to{transform:rotate(-62deg)}50%{transform:rotate(52deg)}}@keyframes leg-left{0%,to{transform:rotate(36deg)}50%{transform:rotate(-42deg)}}@keyframes leg-right{0%,to{transform:rotate(-36deg)}50%{transform:rotate(42deg)}}@keyframes reward-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes reward-pop{0%{opacity:0;transform:translate(-50%)translateY(18px)scale(.76)}14%{opacity:1;transform:translate(-50%)translateY(-8px)scale(1.06)}78%{opacity:1;transform:translate(-50%)translateY(-4px)scale(1)}to{opacity:0;transform:translate(-50%)translateY(-28px)scale(.96)}}@keyframes drive-home{0%{opacity:0;right:-16%;transform:translate(0)}16%{opacity:1;right:2.5%;transform:translate(0)}56%{opacity:1;right:2.5%;transform:translate(-26px)}to{opacity:0;right:100%;transform:translate(-100%)}}@keyframes runner-board-car{0%{opacity:1;transform:translate(-10%)translateY(-4px)scale(1)}24%{opacity:1;transform:translate(260px)translateY(-10px)scale(.82)}34%{opacity:0;transform:translate(300px)translateY(-18px)scale(.62)}to{opacity:0;transform:translate(300px)translateY(-18px)scale(.62)}}@keyframes victory-show{0%,68%{opacity:0;transform:translate(-50%,-42%)scale(.84)}78%{opacity:1;transform:translate(-50%,-50%)scale(1.06)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}