:root{--sky-top: #7ec8ff;--sky-bottom: #d6f3ff;--grass: #7ed957;--ink: #2b2a4a;--card: #fffdf8;--yellow: #ffd166;--pink: #ff7aa2;--orange: #ff9f43;--blue: #4cc9f0;--green: #57cc99;--purple: #9b5de5;--shadow: 0 12px 0 rgba(43, 42, 74, .12)}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{min-height:100%}body{font-family:Nunito,ZCOOL KuaiLe,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 55%,#b8ec8a 100%);overflow-x:hidden}button,input{font-family:inherit}.scene{min-height:100vh;padding:24px 16px 48px;position:relative}.cloud,.hill,.star-dot{pointer-events:none;position:absolute}.cloud{background:#fff;border-radius:40px;opacity:.85;animation:float 9s ease-in-out infinite}.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-a{width:140px;height:42px;top:40px;left:8%}.cloud-a:before{width:52px;height:52px;top:-28px;left:18px}.cloud-a:after{width:70px;height:70px;top:-36px;left:48px}.cloud-b{width:110px;height:34px;top:90px;right:10%;animation-delay:-3s}.cloud-b:before{width:40px;height:40px;top:-20px;left:14px}.cloud-b:after{width:56px;height:56px;top:-28px;left:38px}.hill{bottom:0;width:180%;height:140px;background:radial-gradient(circle at 50% 0,#8ee36a 0 70%,transparent 71%);left:-40%}.wrap{max-width:980px;margin:0 auto;position:relative;z-index:1}.hero{text-align:center;margin:28px 0}.badge{display:inline-block;background:#fff;border-radius:999px;padding:6px 14px;font-weight:800;box-shadow:var(--shadow);margin-bottom:12px}.hero h1{font-family:ZCOOL KuaiLe,cursive;font-size:clamp(36px,7vw,64px);letter-spacing:2px;text-shadow:4px 6px 0 rgba(255,255,255,.45)}.hero p{margin-top:8px;font-size:18px;font-weight:800}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.mode-card{background:var(--card);border:4px solid #fff;border-radius:28px;padding:22px 18px 18px;box-shadow:var(--shadow);cursor:pointer;text-align:left;transition:transform .15s ease}.mode-card:hover,.mode-card:focus{transform:translateY(-6px)}.mode-emoji{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;color:#fff;font-size:28px;font-weight:900;margin-bottom:12px}.mode-card h2{font-size:22px;margin-bottom:6px}.mode-card p{font-weight:700;opacity:.75}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.pill{background:#fff;border:0;border-radius:999px;padding:10px 16px;font-weight:800;box-shadow:var(--shadow);cursor:pointer}.stats{display:flex;flex-wrap:wrap;gap:8px}.stat{background:#fff;border-radius:16px;padding:8px 12px;font-weight:800;box-shadow:var(--shadow)}.board{background:var(--card);border:6px solid #fff;border-radius:32px;padding:28px 20px 24px;box-shadow:var(--shadow);min-height:360px}.prompt{text-align:center}.hint{font-weight:800;opacity:.7;margin-bottom:8px}.big-letter{font-size:clamp(88px,18vw,160px);line-height:1;font-weight:900;color:#ff6b6b;text-shadow:6px 8px 0 #ffe08a}.word-zh{font-family:ZCOOL KuaiLe,cursive;font-size:clamp(48px,10vw,84px)}.word-en{font-size:clamp(42px,9vw,72px);letter-spacing:4px}.typed-row{margin:22px auto 0;max-width:720px;min-height:72px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.ch{width:46px;height:56px;border-radius:14px;background:#f4f1ff;display:grid;place-items:center;font-size:28px;font-weight:900;text-transform:uppercase;border:3px solid transparent}.ch.done{background:#d8f8c8;color:#2d6a4f;border-color:#95d5b2}.ch.current{background:#fff3bf;border-color:#fcc419;animation:bounce .7s ease-in-out infinite}.ch.miss{background:#ffc9c9;border-color:#fa5252}.keyboard-hint{margin-top:22px;text-align:center;font-weight:800}.progress-bar{height:16px;background:#e9ecef;border-radius:999px;overflow:hidden;margin-top:18px}.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,#ffd166,#ff7aa2);width:0;transition:width .2s ease}.rain-stage{position:relative;height:420px;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#9ad8ff,#e8fbff)}.drop{position:absolute;top:0;width:54px;height:54px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:28px;font-weight:900;box-shadow:0 8px #2b2a4a1f;transform:translateY(-70px)}.result{text-align:center;padding:24px 8px}.result h2{font-family:ZCOOL KuaiLe,cursive;font-size:42px;margin-bottom:8px}.stars{font-size:42px;letter-spacing:8px;margin:10px 0 18px}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}.btn{border:0;border-radius:18px;padding:12px 20px;font-size:18px;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}.btn-primary{background:var(--yellow)}.btn-ghost{background:#fff}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%) translateY(20px);background:#2b2a4a;color:#fff;padding:10px 18px;border-radius:999px;opacity:0;transition:.2s ease;z-index:9;font-weight:800}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.hidden{display:none!important}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(max-width:640px){.ch{width:36px;height:46px;font-size:22px}.rain-stage{height:360px}}