@font-face{font-family:ZCOOL KuaiLe;src:url(/fonts/zcoolkuaile-subset.woff2) format("woff2");font-display:swap;unicode-range:U+2026,U+3000-303F,U+4E00-9FFF,U+FF00-FFEF}:root{--pink: #FF6B9D;--pink-dk: #C2185B;--cyan: #4DD0E1;--yellow: #FFD54F;--purple: #BA68C8;--green: #81C784;--bg: #FFF1F6;--ink: #3a3a3a;--radius: 28px}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:Comic Sans MS,ZCOOL KuaiLe,"Baloo 2",system-ui,sans-serif;color:var(--ink);background:var(--bg);overflow:hidden}.screen{position:relative;height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}.shape{position:absolute;opacity:.9;will-change:transform}.shape.dot{border-radius:50%}.shape.ring{border-radius:50%;background:transparent!important;border:6px solid var(--cyan)}.shape.sq{border-radius:6px}.shape.tri{width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:30px solid var(--cyan)}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-18px)}}@keyframes floatx{0%,to{transform:translate(0)}50%{transform:translate(14px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes twinkle{0%,to{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}.title{font-size:4rem;font-weight:900;color:var(--pink);text-shadow:4px 4px 0 var(--yellow)}.subtitle{color:#666;font-size:1.6rem;font-weight:800;line-height:1.45;margin:8px 0 26px}.sub-en{display:block;font-size:.95rem;font-weight:600;color:#aaa;margin-top:6px}.btn-primary{font:inherit;cursor:pointer;display:inline-flex;align-items:baseline;gap:10px;padding:16px 52px;color:#fff;background:var(--pink);border:none;border-radius:40px;box-shadow:5px 5px 0 var(--pink-dk)}.btn-zh{font-size:1.9rem;font-weight:900}.btn-en{font-size:1.15rem;font-weight:700;opacity:.92}.btn-primary:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--pink-dk)}.qrow{display:flex;align-items:center;justify-content:center;gap:2.5vw;width:100%;height:100%;padding:3vh 2vw}.scene-stage{position:relative;width:min(64vw,1000px);aspect-ratio:16/9;flex:0 0 auto}.mascot{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:min(26vw,360px)}.mascot .character{width:82%}.scene-bg{width:100%;height:100%;object-fit:contain}.scene-item{position:absolute;width:17%;transform:translate(-50%,-100%);display:flex;align-items:flex-end;justify-content:center}.scene-item:before{content:"";position:absolute;top:-24%;right:-24%;bottom:-24%;left:-24%;border-radius:50%;z-index:-1;background:radial-gradient(circle,#ffffffeb,#fff0 70%);animation:glow 1.7s ease-in-out infinite}.scene-item img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 6px rgba(0,0,0,.2));animation:bob 1.7s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-9%)}}@keyframes glow{0%,to{transform:scale(.85);opacity:.5}50%{transform:scale(1.12);opacity:1}}.bubble{background:#fff;border:4px solid var(--pink);border-radius:24px;padding:14px 20px;box-shadow:4px 4px 0 var(--pink);position:relative;text-align:center}.bubble-en{font-size:1.6rem;font-weight:800;color:var(--ink)}.bubble-zh{font-size:1.05rem;font-weight:600;color:#cf7aa6;margin-top:6px}.bubble:before{content:"";position:absolute;top:-16px;left:50%;transform:translate(-50%);border:9px solid transparent;border-bottom-color:var(--pink)}.mascot .bubble{margin-top:14px;max-width:100%}.hint{position:absolute;bottom:16px;right:24px;color:#aaa;font-size:1rem;font-weight:700;text-align:right}.hint-en{display:block;font-size:.78rem;font-weight:600;color:#c4c4c4;margin-top:1px}.reward-line{text-align:center;line-height:1.4;margin:8px 0}.reward-en{display:block;font-size:1.7rem;font-weight:800;color:#7b1fa2}.reward-zh{display:block;font-size:1.1rem;font-weight:600;color:#9c6fb0;margin-top:4px}.lucky{font-size:7rem;font-weight:900;color:#fff;background:var(--purple);width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:8px 8px #7b1fa2;animation:pop .5s ease}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}to{transform:scale(1)}}.confetti{position:absolute;font-size:2rem;animation:fall 2.4s linear infinite}@keyframes fall{0%{transform:translateY(-10vh) rotate(0)}to{transform:translateY(110vh) rotate(360deg)}}.voice{margin-top:14px;text-align:center;font-weight:800;max-width:100%}.voice-en{display:block;font-size:.85rem;font-weight:600;margin-top:2px}.voice-listening{color:var(--pink-dk);font-size:1.3rem}.voice-listening .voice-en{color:#cf7aa6}.mic-dot{display:inline-block;width:15px;height:15px;border-radius:50%;background:#e53935;margin-right:8px;vertical-align:middle;animation:micpulse 1s ease-in-out infinite}@keyframes micpulse{0%,to{transform:scale(.65);opacity:.55}50%{transform:scale(1.2);opacity:1}}.voice-checking{color:#7a7a7a;font-size:1.2rem}.voice-checking .voice-en{color:#aaa}.voice-wrong{background:#fff3f7;border:3px solid var(--pink);border-radius:16px;padding:10px 16px}.voice-wrong .heard{font-size:1rem;font-weight:600;color:#999;margin-bottom:6px}.voice-wrong .encourage{font-size:1.3rem;color:var(--pink-dk)}.voice-wrong .encourage .voice-en{color:#cf7aa6}.caption{position:absolute;left:50%;bottom:4.5vh;transform:translate(-50%);max-width:86vw;display:flex;align-items:center;gap:12px;background:#fff;border:4px solid var(--cyan);border-radius:999px;padding:12px 28px;box-shadow:0 6px #4dd0e173;font-size:clamp(1.4rem,3.2vw,2.4rem);font-weight:800;color:var(--ink);animation:capPop .25s ease}@keyframes capPop{0%{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%);opacity:1}}.caption .cap-emoji{font-size:1.3em}.caption .cap-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:74vw}.caption.caption-empty{color:#9aa;border-color:#cdeef2;box-shadow:0 6px #b4dce166}.caption .cap-hint{font-size:.8em;font-weight:700;color:#9aa}.cap-dots{display:inline-flex;gap:6px}.cap-dots i{width:12px;height:12px;border-radius:50%;background:var(--cyan);display:inline-block;animation:capDot 1s ease-in-out infinite}.cap-dots i:nth-child(2){animation-delay:.2s}.cap-dots i:nth-child(3){animation-delay:.4s}@keyframes capDot{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-7px);opacity:1}}