:root{--ink:#2b2d42;--ink-soft:#5c6078;--card:#fffdf7;--primary:#ff8f3d;--primary-dark:#e56f1c;--green:#2fb36b;--yellow:#ffd23f;--orange:#ff7a3d;--blue:#4aa8ff;--pink:#ff6fa8;--shadow:0 8px 0 #2b2d422e;--font:ui-rounded, "SF Pro Rounded", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;--font-type:Verdana, "DejaVu Sans", "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:#1c1e2e;height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;cursor:pointer}.emoji{font-size:.8em;line-height:1}#app{position:fixed;inset:0}#stage{transform-origin:50%;background:#000;border-radius:6px;width:1280px;height:720px;position:absolute;top:calc(50% - 15px);left:50%;overflow:hidden}.screen{background:var(--bg,none) center / cover no-repeat, var(--bg-fallback,#cfeeff);animation:.35s fadein;position:absolute;inset:0;overflow:hidden}@keyframes fadein{0%{opacity:0}to{opacity:1}}.zone-meadow{--bg-fallback:linear-gradient(#bfe9ff 0%, #e9fbd2 55%, #9fdc7a 100%)}.zone-jungle{--bg-fallback:linear-gradient(#c9f0c0 0%, #7fcf8c 55%, #3f9a5a 100%)}.zone-ocean{--bg-fallback:linear-gradient(#bff4ff 0%, #7fd0f2 55%, #3d8fd1 100%)}.zone-sky{--bg-fallback:linear-gradient(#2b2d6e 0%, #5b4bb0 55%, #9a7be0 100%)}.screen.title{--bg-fallback:linear-gradient(#ffe7a8 0%, #ffd0a0 50%, #ffb48a 100%)}.screen.map{--bg-fallback:linear-gradient(#d8f3ff 0%, #f1fbd8 100%)}.card{background:var(--card);box-shadow:var(--shadow), 0 20px 60px #00000040;text-align:center;border-radius:36px;padding:32px 44px}.press{color:var(--ink-soft);margin:10px 0 0;font-size:20px;animation:1.6s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.72}}.big-btn{background:var(--primary);color:#fff;box-shadow:0 8px 0 var(--primary-dark);border:0;border-radius:999px;padding:16px 52px;font-size:34px;font-weight:800;transition:transform 80ms}.big-btn:hover,.big-btn:focus-visible{outline:4px solid #fff7;transform:translateY(-2px)}.big-btn:active{box-shadow:0 2px 0 var(--primary-dark);transform:translateY(6px)}.ghost-btn{border:3px solid var(--ink);background:#fffc;border-radius:999px;padding:8px 24px;font-size:22px;font-weight:700;box-shadow:0 4px #2b2d4240}.ghost-btn:hover,.ghost-btn:focus-visible{outline:3px solid var(--yellow);background:#fff}.ghost-btn.danger{color:#c4452d;border-color:#c4452d}.icon-btn{border:3px solid var(--ink);background:#fffe;border-radius:50%;width:52px;height:52px;font-size:26px;line-height:1;box-shadow:0 4px #2b2d4240}.icon-btn:hover,.icon-btn:focus-visible{outline:3px solid var(--yellow);background:#fff}.title{flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex}.logo{justify-content:center;align-items:center;height:230px;display:flex}.logo img{filter:drop-shadow(0 8px #0000001f);height:100%}.logo-fallback{font-family:var(--font-type);letter-spacing:.04em;color:#fff;-webkit-text-stroke:8px var(--primary-dark);paint-order:stroke fill;text-shadow:0 10px #00000026;font-size:150px;font-weight:900}.game-title{color:#fff;letter-spacing:.08em;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;text-shadow:0 8px #0003;margin:0;font-size:92px;font-weight:900}.subtitle{color:var(--ink);margin:4px 0 18px;font-size:28px;font-weight:700}.title .ghost-btn{position:absolute;top:24px;left:28px}.title-stars{border:3px solid var(--ink);background:#fffe;border-radius:999px;padding:6px 20px;font-size:24px;font-weight:800}.title>.title-stars{margin-top:12px}.stickers{gap:18px;margin-top:14px;display:flex}.sticker{text-align:center;filter:grayscale()opacity(.5);width:108px}.sticker.earned{filter:none;animation:3s ease-in-out infinite wiggle}.sticker img{object-fit:contain;width:80px;height:80px}.sticker .emoji{height:80px;font-size:64px;display:block}.sticker-name{font-size:16px;font-weight:800;display:block}.map-top{justify-content:space-between;align-items:center;padding:22px 94px 6px 32px;display:flex}.map-heading{text-align:center}.map-top h2{-webkit-text-stroke:6px #fff;paint-order:stroke fill;margin:0;font-size:40px;font-weight:900;line-height:1.1}.map-hint{color:var(--ink);background:#ffffffb8;border-radius:999px;padding:1px 14px;font-size:16px;font-weight:700}.map-right{align-items:center;gap:12px;display:flex}.map-levels{flex-direction:column;gap:8px;padding:6px 32px 10px;display:flex}.zone-row{background:linear-gradient(90deg,#ffffffa8,#fff5);border:3px solid #fff8;border-radius:28px;align-items:center;gap:18px;padding:4px 22px;display:flex}.zone-name{width:120px;font-size:28px;font-weight:900}.zone-track{flex:1;justify-content:space-around;gap:28px;display:flex}.node{border:4px solid var(--ink);background:#fff;border-radius:26px;flex-direction:column;justify-content:center;align-items:center;width:150px;height:118px;padding:4px;transition:transform .12s;display:flex;position:relative;box-shadow:0 6px #2b2d4240}.node.focus{outline:5px solid var(--yellow);z-index:2;transform:translateY(-5px)scale(1.07)}.node.locked{color:#7b7e95;background:#d9dbe6;border-color:#8d90a6}.node.boss{background:#fff1c2;border-color:#c98a00}.node-num{background:var(--primary);color:#fff;border:3px solid var(--ink);border-radius:50%;place-items:center;width:40px;height:40px;font-size:22px;font-weight:900;display:grid;position:absolute;top:-12px;left:-12px}.node-animal{place-items:center;width:62px;height:62px;display:grid}.node-animal img{object-fit:contain;width:100%;height:100%}.node-animal .emoji{font-size:52px}.node-lock{place-items:center;height:62px;font-size:40px;display:grid}.node-stars{letter-spacing:2px;font-size:20px;line-height:1.1}.node-best{color:var(--ink-soft);height:16px;font-size:14px;font-weight:800}.hud{z-index:5;justify-content:space-between;align-items:flex-start;padding:16px 94px 16px 24px;display:flex;position:absolute;top:0;left:0;right:0}.hud-left,.hud-right{align-items:center;gap:12px;width:380px;display:flex}.hud-right{flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:6px}.level-label{border:3px solid var(--ink);background:#fffe;border-radius:999px;padding:6px 18px;font-size:22px;font-weight:800}.hud-center{text-align:center;border:3px solid var(--ink);background:#fffe;border-radius:24px;padding:2px 34px 4px}.score-label{color:var(--ink-soft);font-size:15px;font-weight:800}.score-num{font-family:var(--font-type);font-size:44px;font-weight:900;line-height:1}.combo-badge{background:0 0;border:3px solid #0000;border-radius:999px;min-height:42px;padding:4px 16px;font-size:26px;font-weight:900;transition:background .2s}.combo-badge.on{border-color:var(--orange);color:#b8480d;background:#fff3c4}.combo-badge.pulse{animation:.4s pulse}.progress-pill{background:#fffe;border-radius:999px;min-height:30px;padding:2px 14px;font-size:20px;font-weight:800}.progress-pill:empty{display:none}.field{position:absolute;inset:96px 0 0}.stack{flex-direction:column;align-items:center;gap:40px;display:flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}.bubble{border:6px solid var(--ink);min-width:380px;max-width:1180px;box-shadow:var(--shadow);background:#fff;border-radius:56px;justify-content:center;align-items:center;gap:22px;padding:18px 52px;display:flex;position:relative}.bubble:after{content:"";border-right:6px solid var(--ink);border-bottom:6px solid var(--ink);background:#fff;width:36px;height:36px;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)rotate(45deg)}.bubble{cursor:pointer}.bubble.pop{animation:.28s cubic-bezier(.3,1.6,.5,1) pop}.target{font-family:var(--font-type);white-space:pre;letter-spacing:.06em;font-weight:800;line-height:1.15}.target.missed{opacity:.3;transition:opacity .3s}.ch{color:#8a8fa8;text-align:center;border-bottom:.08em solid #0000;min-width:.55em;display:inline-block}.ch.space{color:#8a8fa8;font-size:.8em}.ch.current{color:var(--ink);border-bottom-color:var(--yellow);background:#fff6c8;border-radius:12px}.ch.done{color:var(--green)}.ch.shake{animation:.3s shake}.timebar{border:3px solid var(--ink);background:#ffffffb0;border-radius:999px;width:560px;height:18px;overflow:hidden}.time-fill{background:var(--green);border-radius:999px;width:100%;height:100%;transition:background .3s}.time-fill[data-level=warn]{background:var(--yellow)}.time-fill[data-level=low]{background:var(--orange)}.animal{width:300px;height:300px;position:absolute;bottom:24px;left:calc(50% - 150px)}.game.with-kb .animal{width:270px;height:270px;bottom:20px;left:24px}.pose{opacity:0;place-items:center;transition:opacity .1s;display:grid;position:absolute;inset:0}.pose.show{opacity:1}.pose img{object-fit:contain;filter:drop-shadow(0 12px #0000001f);width:100%;height:100%}.pose .emoji{font-size:230px}.pose.idle.show{animation:2.4s ease-in-out infinite idle}.pose.sad.show{animation:.5s tilt}.pose.eat.show{animation:.35s 2 chomp}.animal.bounce{animation:.22s bounce}.animal.headshake{animation:.5s headshake}.food{--dx:-230px;--dy:30px;opacity:0;pointer-events:none;width:100px;height:100px;position:absolute;bottom:150px;left:calc(50% + 180px)}.game.with-kb .food{--dx:-120px;--dy:150px;bottom:300px;left:300px}.food img{object-fit:contain;width:100%;height:100%}.food .emoji{font-size:84px}.food.fly{animation:.6s ease-in forwards fly}@keyframes fly{0%{opacity:1;transform:translate(0)scale(1)}70%{opacity:1;transform:translate(var(--dx), var(--dy)) scale(1.05) rotate(-20deg)}to{opacity:0;transform:translate(var(--dx), var(--dy)) scale(.2) rotate(-40deg)}}.float{color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;pointer-events:none;z-index:6;font-size:36px;font-weight:900;animation:.9s ease-out forwards floatup;position:absolute;transform:translate(-50%,-50%)}.float.big{color:var(--yellow);font-size:46px}.float.perfect{color:#7dffb0;font-size:40px}@keyframes floatup{0%{opacity:1;margin-top:0}to{opacity:0;margin-top:-55px}}.fx{pointer-events:none;z-index:7;width:100%;height:100%;position:absolute;inset:0}.game.oops:after,.game.glow:after{content:"";pointer-events:none;z-index:4;animation:.35s ease-out forwards vignette;position:absolute;inset:0}.game.oops:after{box-shadow:inset 0 0 120px 20px #ff8c328c}.game.glow:after{box-shadow:inset 0 0 140px 30px #ffde5099}@keyframes vignette{0%{opacity:1}to{opacity:0}}.banner{z-index:9;border:4px solid var(--orange);box-shadow:var(--shadow);background:#fff3c4;border-radius:999px;padding:10px 28px;font-size:24px;font-weight:800;position:absolute;top:100px;left:50%;transform:translate(-50%)}.caps-banner{top:150px}.osk{z-index:3;background:#ffffffc8;border:3px solid #fff;border-radius:24px;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;display:flex;position:absolute;bottom:14px;right:18px}.osk[hidden]{display:none}.osk-row{gap:6px;display:flex}.osk-row-1{margin-left:28px}.osk-row-2{margin-left:0}.key{--f:#e8eaf4;min-width:54px;height:46px;font-size:21px;font-weight:800;font-family:var(--font-type);background:var(--f);color:var(--ink-soft);border:3px solid #b9bdd2;border-bottom-width:6px;border-radius:12px;place-items:center;transition:transform 80ms;display:grid}.key.wide{min-width:104px;font-size:16px}.key.space{min-width:400px;font-size:16px}.key[data-finger=l-pinky]{--f:#ffd6e0}.key[data-finger=l-ring]{--f:#ffe2b8}.key[data-finger=l-middle]{--f:#fff2b0}.key[data-finger=l-index]{--f:#c9f0c0}.key[data-finger=r-index]{--f:#b6e8f5}.key[data-finger=r-middle]{--f:#c8d6ff}.key[data-finger=r-ring]{--f:#e0ccff}.key[data-finger=r-pinky]{--f:#ffc9ee}.key[data-finger=thumb]{--f:#e3e5ee}.key.target{border-color:var(--green);color:#0c5d33;background:#a6ecc0;transform:translateY(-4px)scale(1.12);box-shadow:0 0 0 4px #2fb36b55}.key.hint{animation:.5s ease-in-out infinite hintblink}.key.wrong{border-color:var(--orange);background:#ffb98a}@keyframes hintblink{50%{box-shadow:0 0 0 10px #2fb36b99}}.overlay{z-index:20;background:#1e203c73;place-items:center;display:grid;position:absolute;inset:0}.overlay[hidden]{display:none}.intro-card{width:640px;padding-top:22px}.intro-zone{color:var(--primary-dark);font-size:24px;font-weight:900}.intro-animal{place-items:center;height:230px;display:grid}.intro-animal img{object-fit:contain;width:230px;height:230px;animation:2.4s ease-in-out infinite idle}.intro-animal .emoji{font-size:170px}.intro-card h2{margin:4px 0;font-size:46px}.intro-card .goal{color:var(--ink-soft);margin:4px 0;font-size:28px;font-weight:700}.count-text{color:#fff;-webkit-text-stroke:14px var(--ink);paint-order:stroke fill;font-size:150px;font-weight:900;font-family:var(--font-type);animation:.4s pop}.count-text.go{color:var(--yellow)}.pause-card{flex-direction:column;gap:14px;width:460px;display:flex}.pause-card h2{margin:0 0 4px;font-size:44px}.menu-btn{border:4px solid var(--ink);background:#fff;border-radius:22px;padding:12px;font-size:28px;font-weight:800}.menu-btn.focus{background:var(--yellow);transform:scale(1.04)}.result{place-items:center;display:grid}.result-card{width:760px;padding:16px 40px 18px}.result-animal{place-items:center;height:118px;display:grid}.result-animal img{object-fit:contain;width:118px;height:118px}.result-animal .emoji{font-size:96px}.result-card h2{margin:0;font-size:50px}.result-stars{letter-spacing:12px;font-size:68px;line-height:1.1}.rstar{filter:grayscale()opacity(.45);display:inline-block}.rstar.earned{filter:none;animation:.5s cubic-bezier(.3,1.8,.5,1) pop}.result-score{font-family:var(--font-type);font-size:72px;font-weight:900;line-height:1.1}.new-best{color:var(--orange);min-height:34px;font-size:26px;font-weight:900}.stats{justify-content:space-around;margin:6px 0 4px;display:flex}.stat-label{color:var(--ink-soft);font-size:18px;font-weight:800}.stat-value{font-size:32px;font-weight:900;font-family:var(--font-type)}.tip{min-height:30px;color:var(--primary-dark);margin:8px 0;font-size:24px;font-weight:800}.result-actions{justify-content:center;align-items:center;gap:14px;margin-top:6px;display:flex}.modal-backdrop{z-index:50;background:#14162899;place-items:center;display:grid;position:absolute;inset:0}.settings-card{text-align:left;flex-direction:column;gap:14px;width:640px;display:flex}.settings-card h2{text-align:center;margin:0;font-size:42px}.settings-card .big-btn{align-self:center;margin-top:6px}.row{align-items:center;gap:14px;font-size:26px;font-weight:800;display:flex}.row-label{width:230px}.row.buttons{justify-content:center;gap:12px}.slider{accent-color:var(--primary);flex:1;height:32px}.slider-val{text-align:right;width:70px;font-family:var(--font-type)}.select{border:3px solid var(--ink);font-size:22px;font-family:var(--font);border-radius:12px;flex:1;padding:6px 10px}.row input[type=checkbox]{width:32px;height:32px;accent-color:var(--primary)}.hold-btn{font-size:18px;position:relative;overflow:hidden}.hold-btn.holding:after{content:"";background:var(--green);height:6px;animation:3s linear forwards hold;position:absolute;bottom:0;left:0}@keyframes hold{0%{width:0}to{width:100%}}.ghost-btn.danger{font-size:18px}@keyframes pop{0%{opacity:.4;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes pulse{50%{transform:scale(1.25)}}@keyframes shake{20%{transform:translate(-10px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}@keyframes idle{50%{transform:translateY(-8px)scale(1.015)}}@keyframes bounce{40%{transform:translateY(-14px)scale(1.03)}}@keyframes tilt{0%{transform:rotate(0)}30%{transform:rotate(-9deg)}70%{transform:rotate(5deg)}to{transform:rotate(0)}}@keyframes headshake{20%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}@keyframes chomp{50%{transform:scale(1.1,.92)}}@keyframes wiggle{50%{transform:rotate(4deg)}}.reduce-motion *,.reduce-motion :after{animation-duration:10ms!important;animation-iteration-count:1!important}.game.reduce-motion:after,.reduce-motion .game:after{display:none}@media (prefers-reduced-motion:reduce){.screen{animation:none}}.fs-btn{z-index:60;place-items:center;display:grid;position:absolute;top:16px;right:18px}.site-footer{text-align:center;z-index:100;white-space:pre-wrap;color:#aeb3cc;-webkit-user-select:text;user-select:text;background:#14162a;height:30px;font-size:13px;line-height:30px;position:fixed;bottom:0;left:0;right:0}.site-footer a{color:#ffd23f;text-underline-offset:2px;text-decoration:underline}.site-footer a:hover,.site-footer a:focus-visible{color:#fff}