/** * Color Master - Hand Gesture Learning Game * Main Stylesheet */ @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&family=Fredoka+One&family=ZCOOL+KuaiLe&display=swap");/* ========================================= CSS Variables ========================================= */:root{--primary:#0288d1;--accent:#ffc107;--glass:rgba(255, 255, 255, 0.85);--shadow:0 10px 30px rgba(0, 40, 80, 0.2);--correct:#4CAF50;--wrong:#f44336}/* ========================================= Base Styles ========================================= */ *{box-sizing:border-box}html{--vh-fallback:100vh;--vh:100dvh}@supports not (height:100dvh){html{--vh:var(--vh-fallback)}}body{margin:0;overflow:hidden;background:linear-gradient(180deg, #4fc3f7 0%, #81d4fa 50%, #e1f5fe 100%);font-family:"Nunito", sans-serif;user-select:none}/* ========================================= 16:9 Viewport Lock (黑边/信箱模式) 仅在手机横屏时生效，TV/Web保持原样 ========================================= */ #letterbox-bg{display:none}#game-stage{width:100%;height:100%}@media screen and (max-width:1024px) and (orientation:landscape){#letterbox-bg{display:block;position:fixed;top:0;left:0;width:100vw;height:var(--vh, 100dvh);background:#000;z-index:-1}#game-stage{width:100vw;height:56.25vw;max-height:var(--vh, 100dvh);max-width:177.78dvh;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;background:linear-gradient(180deg, #4fc3f7 0%, #81d4fa 50%, #e1f5fe 100%)}}#game-container{position:relative;width:100%;height:100%;--tv-safe-margin:5vmin}canvas{display:block;width:100%;height:100%}/* ========================================= Camera Preview Window - 云朵造型 ========================================= */ #cam-window{position:absolute;bottom:calc(var(--tv-safe-margin, 5vmin) + 10px);left:50%;transform:translateX(-50%) scaleX(-1);width:160px;height:160px;background:#000;border-radius:50%;border:5px solid #fff;box-shadow:0 6px 20px rgba(0, 0, 0, 0.2), inset 0 0 0 3px rgba(255, 255, 255, 0.3);overflow:hidden;z-index:100}#cam-window::before{content:'';position:absolute;width:45px;height:45px;background:#fff;border-radius:50%;top:50%;left:-26px;transform:translateY(-50%);box-shadow:0 3px 8px rgba(0, 0, 0, 0.1);z-index:-1}#cam-window::after{content:'';position:absolute;width:36px;height:36px;background:#fff;border-radius:50%;top:50%;right:-22px;transform:translateY(-50%);box-shadow:0 3px 8px rgba(0, 0, 0, 0.1);z-index:-1}#preview-canvas{width:100%;height:100%;object-fit:cover;border-radius:50%}.mirror-indicator{position:absolute;bottom:calc(var(--tv-safe-margin, 5vmin) + 200px);left:50%;transform:translateX(-50%);background:rgba(255, 255, 255, 0.9);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;color:#607d8b;z-index:100;display:flex;align-items:center;gap:6px;box-shadow:0 3px 10px rgba(0, 0, 0, 0.1)}/* ========================================= Top HUD - Center Score Display ========================================= */ #ui-layer{position:absolute;top:0;left:0;width:100%;padding:calc(var(--tv-safe-margin, 5vmin) + 10px);pointer-events:none;display:flex;justify-content:center;align-items:flex-start;gap:20px}.score-pill{background:linear-gradient(135deg, #FFD54F 0%, #FFB300 100%);padding:10px 30px;border-radius:50px;display:flex;align-items:center;gap:10px;box-shadow:0 5px 0 #FF8F00, 0 8px 25px rgba(255, 143, 0, 0.4);border:3px solid #fff;transform:translateY(0);transition:transform 0.1s}.score-pill.bounce{animation:score-bounce 0.4s ease-out}@keyframes score-bounce{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-15px) scale(1.15)}50%{transform:translateY(-10px) scale(1.1)}70%{transform:translateY(-5px) scale(1.05)}100%{transform:translateY(0) scale(1)}}.score-icon{font-size:26px;filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.2));animation:star-spin 3s ease-in-out infinite}@keyframes star-spin{0%, 100%{transform:rotate(0deg) scale(1)}25%{transform:rotate(10deg) scale(1.1)}75%{transform:rotate(-10deg) scale(1.1)}}.s-txt{font-family:"Fredoka One";font-size:32px;color:#fff;line-height:1;text-shadow:2px 2px 0 #FF8F00, 2px 2px 4px rgba(0,0,0,0.2);min-width:40px;text-align:center}.progress-pill{background:rgba(255, 255, 255, 0.85);padding:6px 16px;border-radius:20px;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);border:2px solid rgba(255, 255, 255, 0.9);backdrop-filter:blur(4px)}.progress-icon{font-size:14px;opacity:0.8}.progress-txt{font-family:"Fredoka One";font-size:16px;color:#607D8B;text-shadow:none;letter-spacing:0.5px}.progress-pill.warning{background:linear-gradient(135deg, #FF7043 0%, #E64A19 100%);border-color:#FFAB91;box-shadow:0 0 15px rgba(255, 87, 34, 0.5);animation:timer-pulse 0.5s ease-in-out infinite}.progress-pill.warning .progress-txt{color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,0.3)}@keyframes timer-pulse{0%, 100%{transform:scale(1)}50%{transform:scale(1.05)}}.s-txt.pop{animation:score-pop 0.3s ease-out}@keyframes score-pop{0%{transform:scale(1)}50%{transform:scale(1.4);color:#fff}100%{transform:scale(1)}}/* ========================================= Music Toggle Button - 首页右上角音乐开关 ========================================= */ .music-toggle{position:absolute;top:15px;right:15px;width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:rgba(255, 255, 255, 0.95);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);cursor:pointer;z-index:200;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;backdrop-filter:blur(4px);padding:0}.music-toggle:hover{transform:scale(1.1);box-shadow:0 4px 15px rgba(0, 0, 0, 0.18)}.music-toggle:active{transform:scale(0.95)}.music-icon{width:18px;height:18px}.music-toggle .speaker-body{fill:#4CAF50;stroke:#388E3C;transition:all 0.3s ease}.music-toggle .sound-wave{stroke:#2196F3;transition:all 0.3s ease}.music-toggle .wave-1{animation:sound-pulse 1.2s ease-in-out infinite}.music-toggle .wave-2{animation:sound-pulse 1.2s ease-in-out infinite 0.2s}@keyframes sound-pulse{0%, 100%{opacity:1}50%{opacity:0.4}}.music-toggle .mute-line{stroke:#f44336;opacity:0;transition:opacity 0.3s ease}.music-toggle.muted{background:rgba(240, 240, 240, 0.9)}.music-toggle.muted .speaker-body{fill:#9E9E9E;stroke:#757575}.music-toggle.muted .sound-wave{stroke:#BDBDBD;opacity:0}.music-toggle.muted .mute-line{opacity:1}/* ========================================= Combo Display - 火焰燃烧风格 ========================================= */ #combo-display{position:absolute;top:calc(50% - 80px);left:calc(50% + 180px);transform:scale(0);font-family:"Fredoka One";font-size:22px;color:#fff;background:linear-gradient(180deg, rgba(255, 193, 7, 0.95) 0%, rgba(255, 87, 34, 0.95) 40%, rgba(183, 28, 28, 0.95) 100%);padding:10px 20px;border-radius:16px;border:3px solid rgba(255, 255, 255, 0.7);box-shadow:0 0 20px rgba(255, 87, 34, 0.8), 0 0 40px rgba(255, 152, 0, 0.5), 0 0 60px rgba(255, 193, 7, 0.3), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 0 rgba(0,0,0,0.3);opacity:0;backdrop-filter:blur(6px);z-index:150;text-shadow:0 2px 6px rgba(0,0,0,0.5);white-space:nowrap}#combo-display::before{content:'🔥';display:inline-block;animation:flame-dance 0.3s ease-in-out infinite alternate;margin-right:4px}@keyframes flame-dance{0%{transform:scale(1) rotate(-5deg)}100%{transform:scale(1.15) rotate(5deg)}}#combo-display #combo-num{font-size:32px;color:#FFEB3B;text-shadow:0 0 15px rgba(255, 235, 59, 1), 0 0 30px rgba(255, 235, 59, 0.6), 3px 3px 0 rgba(0,0,0,0.4);margin-left:4px;display:inline-block}#combo-display.show #combo-num{animation:combo-num-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes combo-num-bounce{0%{transform:scale(0.5) rotate(-10deg)}50%{transform:scale(1.4) rotate(5deg)}70%{transform:scale(0.9) rotate(-3deg)}100%{transform:scale(1) rotate(0deg)}}#combo-display.show{opacity:1;transform:scale(1);animation:combo-burst 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), combo-flame-float 1.5s ease-in-out 0.5s infinite}@keyframes combo-burst{0%{transform:scale(0) rotate(-20deg);opacity:0;filter:brightness(2)}40%{transform:scale(1.3) rotate(8deg);filter:brightness(1.5)}60%{transform:scale(0.9) rotate(-4deg)}80%{transform:scale(1.1) rotate(2deg)}100%{transform:scale(1) rotate(0deg);opacity:1;filter:brightness(1)}}@keyframes combo-flame-float{0%, 100%{transform:scale(1) translateY(0) rotate(0deg);box-shadow:0 0 20px rgba(255, 87, 34, 0.8), 0 0 40px rgba(255, 152, 0, 0.5), 0 0 60px rgba(255, 193, 7, 0.3)}25%{transform:scale(1.03) translateY(-3px) rotate(1deg)}50%{transform:scale(1.05) translateY(-5px) rotate(-1deg);box-shadow:0 0 30px rgba(255, 87, 34, 1), 0 0 60px rgba(255, 152, 0, 0.7), 0 0 90px rgba(255, 193, 7, 0.5)}75%{transform:scale(1.03) translateY(-3px) rotate(1deg)}}#combo-display.hot{background:linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 193, 7, 0.95) 30%, rgba(255, 87, 34, 0.95) 60%, rgba(183, 28, 28, 0.95) 100%);box-shadow:0 0 30px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 87, 34, 1), 0 0 80px rgba(255, 152, 0, 0.7), 0 0 120px rgba(255, 193, 7, 0.5);animation:combo-burst 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), combo-flame-hot 0.8s ease-in-out 0.5s infinite}@keyframes combo-flame-hot{0%, 100%{transform:scale(1) translateY(0);filter:brightness(1)}50%{transform:scale(1.1) translateY(-8px);filter:brightness(1.2)}}#combo-display.mega{animation:combo-burst 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), combo-rainbow 1s linear 0.5s infinite}@keyframes combo-rainbow{0%{filter:hue-rotate(0deg) brightness(1.1)}50%{filter:hue-rotate(180deg) brightness(1.3)}100%{filter:hue-rotate(360deg) brightness(1.1)}}/* ========================================= Kill Streak Announcement (DOUBLE KILL!) 史诗级游戏横幅 - 更夸张的动画效果 ========================================= */ .kill-streak{position:fixed;top:18%;left:50%;transform:translateX(-50%) translateY(-30px) scale(0);font-family:"Fredoka One";font-size:56px;color:#fff;text-align:center;pointer-events:none;z-index:1000;opacity:0;padding:12px 40px;border-radius:40px;background:linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%);border:4px solid currentColor;backdrop-filter:blur(10px);text-shadow:3px 3px 6px rgba(0,0,0,0.6), 0 0 20px currentColor;letter-spacing:4px;text-transform:uppercase}.kill-streak::before{content:'';position:absolute;inset:-4px;border-radius:44px;background:linear-gradient(45deg, transparent 30%, currentColor 50%, transparent 70%);opacity:0.5;animation:streak-border-spin 2s linear infinite;z-index:-1}@keyframes streak-border-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.kill-streak.show{animation:streak-slam 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}@keyframes streak-slam{0%{transform:translateX(-50%) translateY(-100px) scale(0.3) rotate(-10deg);opacity:0;filter:blur(10px)}15%{transform:translateX(-50%) translateY(20px) scale(1.3) rotate(3deg);opacity:1;filter:blur(0)}25%{transform:translateX(-50%) translateY(-10px) scale(0.95) rotate(-2deg)}35%{transform:translateX(-50%) translateY(5px) scale(1.1) rotate(1deg)}45%{transform:translateX(-50%) translateY(0) scale(1) rotate(0deg)}75%{transform:translateX(-50%) translateY(0) scale(1) rotate(0deg);opacity:1}90%{transform:translateX(-50%) translateY(-30px) scale(1.1) rotate(0deg);opacity:0.8}100%{transform:translateX(-50%) translateY(-60px) scale(0.5) rotate(0deg);opacity:0}}.kill-streak.double{color:#69F0AE;background:linear-gradient(135deg, rgba(76, 175, 80, 0.9) 0%, rgba(56, 142, 60, 0.9) 100%);border-color:#A5D6A7;box-shadow:0 0 30px rgba(76, 175, 80, 0.8), 0 0 60px rgba(76, 175, 80, 0.4), inset 0 0 30px rgba(255,255,255,0.15)}.kill-streak.triple{color:#82B1FF;background:linear-gradient(135deg, rgba(33, 150, 243, 0.9) 0%, rgba(25, 118, 210, 0.9) 100%);border-color:#90CAF9;box-shadow:0 0 30px rgba(33, 150, 243, 0.8), 0 0 60px rgba(33, 150, 243, 0.4), inset 0 0 30px rgba(255,255,255,0.15)}.kill-streak.ultra{color:#EA80FC;background:linear-gradient(135deg, rgba(156, 39, 176, 0.9) 0%, rgba(123, 31, 162, 0.9) 100%);border-color:#CE93D8;box-shadow:0 0 40px rgba(156, 39, 176, 0.8), 0 0 80px rgba(156, 39, 176, 0.4), inset 0 0 30px rgba(255,255,255,0.15);animation:streak-slam 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, ultra-pulse 0.4s ease-in-out infinite}@keyframes ultra-pulse{0%, 100%{filter:brightness(1)}50%{filter:brightness(1.15)}}.kill-streak.mega{color:#FFAB40;background:linear-gradient(135deg, rgba(255, 87, 34, 0.95) 0%, rgba(230, 74, 25, 0.95) 100%);border-color:#FFAB91;box-shadow:0 0 50px rgba(255, 87, 34, 0.9), 0 0 100px rgba(255, 152, 0, 0.5), 0 0 150px rgba(255, 193, 7, 0.3), inset 0 0 40px rgba(255,255,255,0.2);animation:streak-slam 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, mega-fire 0.3s ease-in-out infinite}@keyframes mega-fire{0%, 100%{text-shadow:3px 3px 6px rgba(0,0,0,0.6), 0 0 20px #FFAB40, 0 0 40px rgba(255, 87, 34, 0.5);filter:brightness(1)}50%{text-shadow:3px 3px 6px rgba(0,0,0,0.6), 0 0 30px #FFAB40, 0 0 60px rgba(255, 87, 34, 0.7);filter:brightness(1.1)}}.kill-streak.godlike{color:#FFF;font-size:64px;background:linear-gradient(135deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 193, 7, 0.95) 30%, rgba(255, 152, 0, 0.95) 70%, rgba(255, 87, 34, 0.95) 100%);border-color:#FFE082;border-width:5px;box-shadow:0 0 60px rgba(255, 215, 0, 1), 0 0 120px rgba(255, 193, 7, 0.7), 0 0 180px rgba(255, 152, 0, 0.5), 0 0 240px rgba(255, 87, 34, 0.3), inset 0 0 50px rgba(255,255,255,0.3);animation:streak-slam 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, godlike-rainbow 0.5s linear infinite, godlike-pulse 0.2s ease-in-out infinite}@keyframes godlike-rainbow{0%{filter:hue-rotate(0deg) brightness(1.1)}50%{filter:hue-rotate(30deg) brightness(1.3)}100%{filter:hue-rotate(0deg) brightness(1.1)}}@keyframes godlike-pulse{0%, 100%{transform:translateX(-50%) scale(1);text-shadow:3px 3px 6px rgba(0,0,0,0.6), 0 0 30px #FFF, 0 0 60px rgba(255, 215, 0, 0.8)}50%{transform:translateX(-50%) scale(1.02);text-shadow:3px 3px 6px rgba(0,0,0,0.6), 0 0 50px #FFF, 0 0 100px rgba(255, 215, 0, 1)}}@keyframes screen-shake{0%, 100%{transform:translateX(0) rotate(0deg)}10%{transform:translateX(-15px) rotate(-2deg)}20%{transform:translateX(15px) rotate(2deg)}30%{transform:translateX(-12px) rotate(-1.5deg)}40%{transform:translateX(12px) rotate(1.5deg)}50%{transform:translateX(-8px) rotate(-1deg)}60%{transform:translateX(8px) rotate(1deg)}70%{transform:translateX(-5px) rotate(-0.5deg)}80%{transform:translateX(5px) rotate(0.5deg)}90%{transform:translateX(-2px)}}#game-container.shake{animation:screen-shake 0.6s ease-out}@keyframes screen-shake-heavy{0%, 100%{transform:translateX(0) rotate(0deg)}5%{transform:translateX(-20px) rotate(-3deg)}10%{transform:translateX(20px) rotate(3deg)}15%{transform:translateX(-18px) rotate(-2.5deg)}20%{transform:translateX(18px) rotate(2.5deg)}25%{transform:translateX(-15px) rotate(-2deg)}30%{transform:translateX(15px) rotate(2deg)}35%{transform:translateX(-12px) rotate(-1.5deg)}40%{transform:translateX(12px) rotate(1.5deg)}45%{transform:translateX(-10px) rotate(-1deg)}50%{transform:translateX(10px) rotate(1deg)}60%{transform:translateX(-6px) rotate(-0.5deg)}70%{transform:translateX(6px) rotate(0.5deg)}80%{transform:translateX(-3px)}90%{transform:translateX(3px)}}#game-container.shake-heavy{animation:screen-shake-heavy 0.8s ease-out}/* ========================================= Question Card (Center) - 弹性动画设计 ========================================= */ #question-card{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(1);background:var(--glass);backdrop-filter:blur(10px);border-radius:30px;padding:40px 70px;text-align:center;box-shadow:var(--shadow);border:4px solid #fff;z-index:20;display:flex;align-items:center;justify-content:center}#question-card.entering{animation:card-spring-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards}@keyframes card-spring-in{0%{transform:translate(-50%, -50%) scale(0) rotate(-10deg);opacity:0}40%{transform:translate(-50%, -50%) scale(1.15) rotate(3deg);opacity:1}60%{transform:translate(-50%, -50%) scale(0.95) rotate(-1deg)}80%{transform:translate(-50%, -50%) scale(1.03) rotate(0.5deg)}100%{transform:translate(-50%, -50%) scale(1) rotate(0deg);opacity:1}}#q-word{font-family:"Fredoka One";font-size:96px;color:#37474f;margin:0;line-height:1.1;text-shadow:3px 3px 0 #fff, 0 0 20px rgba(255,255,255,0.5);transition:color 0.3s}#q-phonetic{display:none}#q-hint{display:none}/* ========================================= Option Cards (Four Corners) - 弹性交互设计 ========================================= */ .option-card{position:absolute;width:160px;height:160px;border-radius:30px;border:6px solid #fff;box-shadow:0 15px 40px rgba(0, 0, 0, 0.15);cursor:pointer;transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-width 0.2s ease;overflow:hidden;z-index:15}.option-card:hover{transform:scale(1.08) rotate(2deg);box-shadow:0 20px 50px rgba(0, 0, 0, 0.2)}.option-card.hover{transform:scale(1.18) rotate(-1deg);box-shadow:0 25px 60px rgba(0, 0, 0, 0.3);animation:option-jelly 0.5s ease-out}@keyframes option-jelly{0%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.2) rotate(3deg)}50%{transform:scale(1.15) rotate(-2deg)}75%{transform:scale(1.18) rotate(1deg)}100%{transform:scale(1.18) rotate(-1deg)}}.option-card.correct{animation:correct-explode 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);border-color:var(--correct);z-index:100}@keyframes correct-explode{0%{transform:scale(1);filter:brightness(1);border-width:6px}15%{transform:scale(1.5) rotate(5deg);filter:brightness(2);border-width:10px;box-shadow:0 0 60px var(--correct), 0 0 120px var(--correct), 0 0 180px rgba(76, 175, 80, 0.5)}30%{transform:scale(1.3) rotate(-3deg);filter:brightness(1.5)}50%{transform:scale(1.4) rotate(2deg);filter:brightness(1.3);box-shadow:0 0 80px var(--correct), 0 0 160px rgba(76, 175, 80, 0.4)}70%{transform:scale(1.1) rotate(-1deg)}100%{transform:scale(1) rotate(0deg);filter:brightness(1);border-width:6px;box-shadow:0 0 40px var(--correct)}}.option-card.correct::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%);animation:correct-flash 0.4s ease-out;pointer-events:none}@keyframes correct-flash{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}.option-card.wrong{animation:wrong-shake-heavy 0.6s ease-out;border-color:var(--wrong)}@keyframes wrong-shake-heavy{0%, 100%{transform:translateX(0) rotate(0deg)}10%{transform:translateX(-20px) rotate(-5deg)}20%{transform:translateX(20px) rotate(5deg)}30%{transform:translateX(-18px) rotate(-4deg)}40%{transform:translateX(18px) rotate(4deg)}50%{transform:translateX(-12px) rotate(-2deg)}60%{transform:translateX(12px) rotate(2deg)}70%{transform:translateX(-8px) rotate(-1deg)}80%{transform:translateX(8px) rotate(1deg)}90%{transform:translateX(-4px)}}.option-card.reveal-correct{border-color:var(--correct);box-shadow:0 0 30px var(--correct);animation:reveal-pulse 0.8s ease-out infinite}@keyframes reveal-pulse{0%, 100%{box-shadow:0 0 30px var(--correct);transform:scale(1)}50%{box-shadow:0 0 50px var(--correct), 0 0 80px rgba(76, 175, 80, 0.5);transform:scale(1.05)}}.option-card.cooldown{opacity:0.5;filter:grayscale(50%);pointer-events:none;animation:cooldown-fade 0.3s ease-out}@keyframes cooldown-fade{0%{opacity:1;filter:grayscale(0%)}100%{opacity:0.5;filter:grayscale(50%)}}.option-card.hand-near{transform:scale(1.15) rotate(0deg) !important;box-shadow:0 0 40px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 255, 255, 0.5), 0 0 120px rgba(255, 193, 7, 0.3), 0 25px 60px rgba(0, 0, 0, 0.25);border-width:10px;border-color:#FFC107;animation:hand-near-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite}@keyframes hand-near-bounce{0%, 100%{transform:scale(1.15) rotate(0deg);box-shadow:0 0 40px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 255, 255, 0.5), 0 0 120px rgba(255, 193, 7, 0.3), 0 25px 60px rgba(0, 0, 0, 0.25)}25%{transform:scale(1.2) rotate(2deg)}50%{transform:scale(1.18) rotate(-1deg);box-shadow:0 0 60px rgba(255, 255, 255, 1), 0 0 120px rgba(255, 255, 255, 0.7), 0 0 180px rgba(255, 193, 7, 0.5), 0 30px 70px rgba(0, 0, 0, 0.3)}75%{transform:scale(1.22) rotate(1deg)}}.option-card.swiped{animation:swipe-slash-extreme 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes swipe-slash-extreme{0%{transform:scale(1) rotate(0deg);filter:brightness(1)}20%{transform:scale(1.4) rotate(10deg);filter:brightness(2);box-shadow:0 0 80px rgba(255, 255, 255, 1), 0 0 150px rgba(255, 193, 7, 0.8)}40%{transform:scale(1.2) rotate(-5deg);filter:brightness(1.5)}60%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0deg);filter:brightness(1)}}.option-card.white-card{border:6px solid #333333;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3), 0 15px 40px rgba(0, 0, 0, 0.15)}.option-card.pos-0{top:calc(var(--tv-safe-margin) + 100px);left:calc(var(--tv-safe-margin) + 50px)}.option-card.pos-1{top:calc(var(--tv-safe-margin) + 100px);right:calc(var(--tv-safe-margin) + 50px)}.option-card.pos-2{bottom:calc(var(--tv-safe-margin) + 80px);left:calc(var(--tv-safe-margin) + 50px)}.option-card.pos-3{bottom:calc(var(--tv-safe-margin) + 80px);right:calc(var(--tv-safe-margin) + 50px)}.progress-ring{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;height:100%;pointer-events:none}.progress-ring circle{fill:none;stroke:rgba(255, 255, 255, 0.9);stroke-width:8;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 0.1s linear}/* ========================================= Hand Cursors - 增强可见性设计 ========================================= */ .hand-cursor{position:absolute;width:80px;height:80px;pointer-events:none;z-index:9999;transform:translate(-50%, -50%);transition:left 0.08s linear, top 0.08s linear}.hand-cursor::before{content:'✋';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:56px;height:56px;background:linear-gradient(135deg, #FF6F00 0%, #FF8F00 100%);border-radius:50%;border:5px solid #fff;box-shadow:0 0 20px rgba(255, 111, 0, 0.8), 0 0 40px rgba(255, 111, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);font-size:28px;display:flex;align-items:center;justify-content:center;text-shadow:1px 1px 2px rgba(0,0,0,0.3)}.hand-cursor::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:76px;height:76px;border-radius:50%;border:4px solid rgba(255, 111, 0, 0.6);box-shadow:0 0 30px rgba(255, 111, 0, 0.5);animation:cursor-pulse 1s ease-out infinite}.hand-cursor.left::before{content:'🤚';background:linear-gradient(135deg, #1565C0 0%, #2196F3 100%);box-shadow:0 0 20px rgba(33, 150, 243, 0.8), 0 0 40px rgba(33, 150, 243, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3)}.hand-cursor.left::after{border-color:rgba(33, 150, 243, 0.6);box-shadow:0 0 30px rgba(33, 150, 243, 0.5)}@keyframes cursor-pulse{0%{transform:translate(-50%, -50%) scale(1);opacity:1}50%{opacity:0.8}100%{transform:translate(-50%, -50%) scale(1.6);opacity:0}}#trail-canvas{}/* ========================================= Lobby (Start Screen) ========================================= */ #lobby{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity 0.6s ease-out;overflow-y:auto;padding:20px;box-sizing:border-box}#game-container.in-lobby #question-card, #game-container.in-lobby .option-card, #game-container.in-lobby #ui-layer, #game-container.in-lobby #combo-display, #game-container.in-lobby #cam-window{display:none !important}.lobby-main{display:contents}.title-group{order:1;text-align:center;margin-bottom:24px}.tutorial-section{order:2}.mode-section{order:3}.btn-start{order:4}.privacy-note{order:5}.loading-status{order:6}.brand-name{font-family:"Fredoka One", cursive;font-size:28px;color:#ffca28;-webkit-text-stroke:1.5px #fff;text-shadow:2px 2px 0px #ff6f00;margin:0 0 8px 0;letter-spacing:1px;animation:glow-pulse 2s ease-in-out infinite}@keyframes glow-pulse{0%, 100%{filter:drop-shadow(0 0 8px rgba(255, 202, 40, 0.6))}50%{filter:drop-shadow(0 0 16px rgba(255, 202, 40, 0.9))}}.main-slogan{font-family:"ZCOOL KuaiLe", cursive;font-size:min(32px, 5vw);color:#37474f;font-weight:400;margin:0 0 12px 0;line-height:1.3;letter-spacing:2px;white-space:nowrap}.main-slogan .highlight{color:#ff6f00;background:linear-gradient(135deg, #ffca28 0%, #ff9800 50%, #ff6f00 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}.main-slogan .highlight::after{content:"✨";position:absolute;right:-30px;top:-5px;font-size:24px;animation:sparkle 1.5s ease-in-out infinite}@keyframes sparkle{0%, 100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(1.2) rotate(15deg);opacity:0.8}}.sub-slogan{font-family:"Nunito", sans-serif;font-size:16px;color:#546e7a;font-weight:600;margin:0;letter-spacing:1px}.game-logo{font-family:"Fredoka One";font-size:72px;color:#ffca28;-webkit-text-stroke:3px #fff;text-shadow:3px 3px 0px #ff6f00, 6px 6px 0px rgba(0, 0, 0, 0.1);margin:0;line-height:1;letter-spacing:2px}.subtitle-cn{font-family:"ZCOOL KuaiLe", cursive;font-size:24px;color:#0288d1;font-weight:400;margin-top:12px;letter-spacing:3px}.domain-hint{font-size:14px;color:#78909c;font-weight:700;margin-top:8px;letter-spacing:1px;opacity:0.8}.firefly-decoration{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1}.firefly{position:absolute;width:12px;height:12px;background:radial-gradient(circle, #ffeb3b 0%, #ffc107 40%, transparent 70%);border-radius:50%;animation:firefly-float 8s ease-in-out infinite;filter:blur(1px)}.firefly::after{content:"";position:absolute;width:20px;height:20px;top:-4px;left:-4px;background:radial-gradient(circle, rgba(255, 235, 59, 0.4) 0%, transparent 70%);border-radius:50%;animation:firefly-glow 2s ease-in-out infinite}.firefly:nth-child(1){top:15%;left:10%;animation-delay:0s;animation-duration:10s}.firefly:nth-child(2){top:25%;right:15%;animation-delay:-3s;animation-duration:12s}.firefly:nth-child(3){bottom:30%;left:20%;animation-delay:-5s;animation-duration:9s}@keyframes firefly-float{0%, 100%{transform:translate(0, 0) scale(1);opacity:0.3}25%{transform:translate(30px, -20px) scale(1.2);opacity:0.8}50%{transform:translate(50px, 10px) scale(0.9);opacity:0.5}75%{transform:translate(20px, 30px) scale(1.1);opacity:0.9}}@keyframes firefly-glow{0%, 100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.5);opacity:0.8}}.recommend-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg, #ff5722 0%, #f44336 100%);color:white;font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;box-shadow:0 2px 8px rgba(244, 67, 54, 0.4);animation:badge-bounce 2s ease-in-out infinite;z-index:10}@keyframes badge-bounce{0%, 100%{transform:scale(1)}50%{transform:scale(1.05)}}.privacy-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#78909c;margin-top:16px}.privacy-icon{font-size:14px}.privacy-text{opacity:0.9}.tutorial-section{background:rgba(255, 255, 255, 0.9);backdrop-filter:blur(10px);border-radius:24px;padding:24px 40px 28px;margin-bottom:30px;box-shadow:0 10px 40px rgba(0, 100, 200, 0.15);border:3px solid #fff}.tutorial-title{font-family:"ZCOOL KuaiLe", cursive;font-size:22px;font-weight:400;color:#37474f;margin-bottom:20px;text-align:center}.tutorial-steps{display:flex;align-items:center;gap:12px}.step-card{background:linear-gradient(145deg, #f5f5f5, #fff);border-radius:16px;padding:16px 12px;text-align:center;width:100px;border:2px solid #e0e0e0;box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);transition:transform 0.2s, box-shadow 0.2s;position:relative}.step-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0, 0, 0, 0.12)}.step-number{position:absolute;top:-10px;left:-10px;width:28px;height:28px;background:linear-gradient(135deg, #ff6e40, #f4511e);color:white;border-radius:50%;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(244, 81, 30, 0.4)}.step-icon{font-size:36px;margin-bottom:8px}.step-label{font-family:"ZCOOL KuaiLe", cursive;font-size:16px;font-weight:400;color:#37474f;margin-bottom:4px}.step-desc{font-size:11px;color:#90a4ae;font-weight:700;line-height:1.3}.step-arrow{font-size:24px;color:#90a4ae;font-weight:900}.btn-start{background:linear-gradient(135deg, #ff6e40 0%, #f4511e 100%);color:white;border:none;padding:20px 70px;font-size:26px;line-height:1.3;min-height:70px;border-radius:60px;cursor:pointer;font-family:"Nunito", sans-serif;font-weight:900;letter-spacing:2px;box-shadow:0 8px 0 #bf360c, 0 15px 30px rgba(244, 81, 30, 0.4);transition:all 0.1s;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}.btn-start::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);animation:shine 3s infinite}.btn-start:active{transform:translateY(5px);box-shadow:0 3px 0 #bf360c}.btn-start .hover-progress-bar{position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.4);transform-origin:bottom;transform:scaleY(var(--hover-progress, 0));transition:transform 0.05s linear;pointer-events:none;border-radius:60px;z-index:0}.btn-start .btn-text{position:relative;z-index:1}.btn-start.hover{transform:scale(1.05);box-shadow:0 10px 0 #bf360c, 0 20px 40px rgba(244, 81, 30, 0.5)}.mode-card.hover{transform:translateY(-5px) scale(1.05);box-shadow:0 8px 25px rgba(76, 175, 80, 0.4);border-color:#4CAF50}.privacy-note{font-family:"ZCOOL KuaiLe", cursive;margin-top:20px;color:#78909c;font-size:14px;font-weight:400}.mode-section{margin-bottom:25px}.mode-title{font-size:18px;font-weight:900;color:#37474f;margin-bottom:15px}.mode-options{display:flex;gap:12px;justify-content:center}.mode-card{background:#fff;border-radius:16px;padding:15px 20px;text-align:center;cursor:pointer;border:3px solid #e0e0e0;transition:all 0.2s;min-width:80px;position:relative;overflow:visible}.mode-card .hover-progress-bar{position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(76, 175, 80, 0.3);transform-origin:bottom;transform:scaleY(var(--hover-progress, 0));transition:transform 0.05s linear;pointer-events:none;border-radius:13px;z-index:0}.mode-card .mode-icon, .mode-card .mode-label{position:relative;z-index:1}.mode-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.1)}.mode-card.selected{border-color:#4CAF50;background:linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);box-shadow:0 4px 15px rgba(76, 175, 80, 0.3)}.mode-icon{font-size:28px;margin-bottom:5px}.mode-label{font-family:"ZCOOL KuaiLe", cursive;font-size:15px;font-weight:400;color:#37474f}/* ========================================= Result Screen - 成绩弹窗 (糖果风格) ========================================= */ .result-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(0, 20, 50, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);backdrop-filter:blur(15px);display:flex;justify-content:center;align-items:center;z-index:2000;opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}.result-screen.show{opacity:1;pointer-events:auto}.result-card{background:linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #e8ecef 100%);border-radius:40px;padding:50px 60px 55px;text-align:center;box-shadow:0 30px 80px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.8);transform:scale(0) rotate(-15deg);max-width:550px;width:92%;position:relative;overflow:visible}.result-screen.show .result-card{animation:result-card-slam 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}@keyframes result-card-slam{0%{transform:scale(0) rotate(-15deg);opacity:0;filter:blur(10px)}40%{transform:scale(1.1) rotate(3deg);opacity:1;filter:blur(0)}60%{transform:scale(0.95) rotate(-2deg)}80%{transform:scale(1.03) rotate(1deg)}100%{transform:scale(1) rotate(0deg)}}.result-card::before{content:'';position:absolute;inset:-3px;border-radius:43px;background:linear-gradient(135deg, rgba(255, 215, 0, 0.6) 0%, rgba(255, 255, 255, 0.8) 25%, rgba(76, 175, 80, 0.6) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(33, 150, 243, 0.6) 100%);z-index:-1;animation:result-border-shine 3s linear infinite}@keyframes result-border-shine{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}.result-header{margin-bottom:20px}.result-emoji{font-size:72px;display:inline-block;animation:result-emoji-celebrate 1s ease-out;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2))}@keyframes result-emoji-celebrate{0%{transform:scale(0) rotate(-30deg);opacity:0}30%{transform:scale(1.4) rotate(10deg);opacity:1}50%{transform:scale(0.85) rotate(-5deg)}70%{transform:scale(1.15) rotate(3deg)}85%{transform:scale(0.95) rotate(-1deg)}100%{transform:scale(1) rotate(0deg)}}.result-title{font-family:"ZCOOL KuaiLe", "Fredoka One", cursive;font-size:36px;color:#37474f;margin-top:8px;animation:result-title-pop 0.6s ease-out 0.2s both}@keyframes result-title-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}.result-stats{margin:20px 0;padding:20px;background:linear-gradient(135deg, rgba(255, 143, 0, 0.08) 0%, rgba(76, 175, 80, 0.08) 100%);border-radius:20px;border:2px solid rgba(255, 143, 0, 0.15)}.stat-row{display:flex;justify-content:space-around;gap:15px}.stat-item{text-align:center;flex:1;animation:stat-item-pop 0.5s ease-out both}.stat-item:nth-child(1){animation-delay:0.3s}.stat-item:nth-child(2){animation-delay:0.4s}.stat-item:nth-child(3){animation-delay:0.5s}.stat-item:nth-child(4){animation-delay:0.6s}@keyframes stat-item-pop{0%{transform:scale(0) translateY(20px);opacity:0}60%{transform:scale(1.2) translateY(-5px)}100%{transform:scale(1) translateY(0);opacity:1}}.stat-value{font-family:"Fredoka One";font-size:32px;color:#FF8F00;text-shadow:2px 2px 0 rgba(255, 143, 0, 0.2);position:relative}.stat-value::after{content:attr(data-value);position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);color:transparent;text-shadow:0 0 20px rgba(255, 143, 0, 0.5);z-index:-1}.stat-label{font-family:"ZCOOL KuaiLe", cursive;font-size:14px;color:#78909c;font-weight:400;margin-top:4px;letter-spacing:1px}.result-grade{font-family:"Fredoka One";font-size:80px;color:#4CAF50;margin:15px 0;position:relative;display:inline-block;animation:grade-mega-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both}@keyframes grade-mega-pop{0%{transform:scale(0) rotate(-30deg);opacity:0;filter:blur(10px)}40%{transform:scale(1.5) rotate(10deg);opacity:1;filter:blur(0)}60%{transform:scale(0.8) rotate(-5deg)}80%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1) rotate(0deg)}}.result-grade.s{color:#FFD700;text-shadow:0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5), 3px 3px 0 rgba(255, 152, 0, 0.6);animation:grade-mega-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both, grade-s-shine 1.5s ease-in-out 1.3s infinite}@keyframes grade-s-shine{0%, 100%{filter:brightness(1) drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));transform:scale(1)}50%{filter:brightness(1.3) drop-shadow(0 0 40px rgba(255, 215, 0, 0.9));transform:scale(1.05)}}.result-grade.a{color:#4CAF50;text-shadow:0 0 20px rgba(76, 175, 80, 0.5), 3px 3px 0 rgba(56, 142, 60, 0.4);animation:grade-mega-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both, grade-a-pulse 2s ease-in-out 1.3s infinite}@keyframes grade-a-pulse{0%, 100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.1)}}.result-grade.b{color:#2196F3;text-shadow:0 0 15px rgba(33, 150, 243, 0.4), 3px 3px 0 rgba(25, 118, 210, 0.3)}.result-grade.c{color:#FF9800;text-shadow:0 0 15px rgba(255, 152, 0, 0.4), 3px 3px 0 rgba(245, 124, 0, 0.3)}.result-grade.d{color:#f44336;text-shadow:0 0 15px rgba(244, 67, 54, 0.4), 3px 3px 0 rgba(211, 47, 47, 0.3)}.result-actions{display:flex;gap:30px;justify-content:center;margin-top:35px}.action-btn{padding:18px 25px;border-radius:24px;cursor:pointer;min-width:130px;position:relative;overflow:hidden;transition:transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;animation:action-btn-pop 0.5s ease-out both}.action-btn:nth-child(1){animation-delay:0.7s}.action-btn:nth-child(2){animation-delay:0.8s}@keyframes action-btn-pop{0%{transform:scale(0) translateY(30px);opacity:0}60%{transform:scale(1.1) translateY(-5px)}100%{transform:scale(1) translateY(0);opacity:1}}.action-replay{background:linear-gradient(135deg, #66BB6A 0%, #43A047 50%, #388E3C 100%);box-shadow:0 8px 0 #2E7D32, 0 12px 20px rgba(46, 125, 50, 0.3)}.action-home{background:linear-gradient(135deg, #42A5F5 0%, #1E88E5 50%, #1976D2 100%);box-shadow:0 8px 0 #1565C0, 0 12px 20px rgba(21, 101, 192, 0.3)}.action-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);border-radius:24px 24px 0 0;pointer-events:none}.action-btn:hover{transform:translateY(-4px) scale(1.02)}.action-replay:hover{box-shadow:0 12px 0 #2E7D32, 0 16px 30px rgba(46, 125, 50, 0.4)}.action-home:hover{box-shadow:0 12px 0 #1565C0, 0 16px 30px rgba(21, 101, 192, 0.4)}.action-btn:active{transform:translateY(4px) scale(0.98)}.action-replay:active{box-shadow:0 2px 0 #2E7D32}.action-home:active{box-shadow:0 2px 0 #1565C0}.action-btn.hover{transform:scale(1.12) translateY(-6px);animation:action-btn-jelly 0.6s ease-in-out infinite}.action-btn .hover-progress-bar{position:absolute;bottom:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.4);transform-origin:bottom;transform:scaleY(var(--hover-progress, 0));transition:transform 0.05s linear;pointer-events:none;border-radius:24px;z-index:0}.action-btn .action-icon, .action-btn .action-label{position:relative;z-index:1}@keyframes action-btn-jelly{0%, 100%{transform:scale(1.12) translateY(-6px) rotate(0deg)}25%{transform:scale(1.15) translateY(-8px) rotate(2deg)}75%{transform:scale(1.1) translateY(-5px) rotate(-2deg)}}.action-replay.hover{box-shadow:0 15px 0 #2E7D32, 0 0 40px rgba(76, 175, 80, 0.6), 0 0 80px rgba(76, 175, 80, 0.3)}.action-home.hover{box-shadow:0 15px 0 #1565C0, 0 0 40px rgba(33, 150, 243, 0.6), 0 0 80px rgba(33, 150, 243, 0.3)}.action-icon{font-size:36px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}.action-label{font-family:"ZCOOL KuaiLe", "Fredoka One", cursive;font-size:18px;color:#fff;margin-top:6px;text-shadow:0 2px 4px rgba(0,0,0,0.3);letter-spacing:1px}.action-hint{font-size:12px;color:rgba(255,255,255,0.7);margin-top:5px}/* ========================================= Feedback Overlay ========================================= */ #feedback-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:0;transition:opacity 0.3s}#feedback-overlay.correct{background:radial-gradient(circle, rgba(76, 175, 80, 0.3) 0%, transparent 70%);opacity:1}#feedback-overlay.wrong{background:radial-gradient(circle, rgba(244, 67, 54, 0.3) 0%, transparent 70%);opacity:1}/* ========================================= Pause Overlay (Child Left Frame) ========================================= */ #pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:200;opacity:0;pointer-events:none;transition:opacity 0.3s}#pause-overlay.show{opacity:1;pointer-events:auto}.pause-content{text-align:center;color:white;animation:float 2s ease-in-out infinite}.pause-icon{font-size:100px;margin-bottom:20px}.pause-text{font-family:"ZCOOL KuaiLe", "Fredoka One", cursive;font-size:48px;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3)}.pause-hint{font-family:"ZCOOL KuaiLe", cursive;font-size:24px;opacity:0.8}#pause-dark .pause-icon{animation:bulb-pulse 1s ease-in-out infinite}@keyframes bulb-pulse{0%, 100%{opacity:0.5;text-shadow:0 0 10px rgba(255, 200, 0, 0.3)}50%{opacity:1;text-shadow:0 0 30px rgba(255, 200, 0, 0.8), 0 0 60px rgba(255, 200, 0, 0.4)}}/* ========================================= Loading Status ========================================= */ .loading-status{margin-top:15px;font-size:14px;color:#90a4ae;font-weight:700;transition:color 0.3s}.loading-status.ready{color:var(--correct)}/* ========================================= Animations ========================================= */ @keyframes float{0%, 100%{transform:translateY(0)}50%{transform:translateY(-15px)}}@keyframes pulse-soft{0%, 100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shine{0%{left:-100%}20%{left:100%}100%{left:100%}}/* ========================================= Detection Mode Selection ========================================= */ .detection-section{margin-bottom:25px}.detection-options{display:flex;gap:16px;justify-content:center;margin-bottom:15px}.detection-card{background:#fff;border-radius:20px;padding:20px 25px;text-align:center;cursor:pointer;border:3px solid #e0e0e0;transition:all 0.2s;min-width:140px;position:relative}.detection-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.12)}.detection-card.selected{border-color:#4CAF50;background:linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);box-shadow:0 6px 20px rgba(76, 175, 80, 0.35)}.detection-icon{font-size:40px;margin-bottom:8px}.detection-label{font-size:18px;font-weight:900;color:#37474f;margin-bottom:4px}.detection-desc{font-size:12px;color:#90a4ae;font-weight:700}.detection-badge{position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg, #FF6F00 0%, #FF8F00 100%);color:white;font-size:10px;font-weight:900;padding:4px 10px;border-radius:12px;box-shadow:0 3px 10px rgba(255, 111, 0, 0.4)}.interaction-hint{font-size:14px;color:#607d8b;font-weight:700;text-align:center;padding:10px 20px;background:rgba(255, 255, 255, 0.8);border-radius:12px;display:inline-block}/* ========================================= Pose Mode Visual Feedback ========================================= */ .option-card.pose-target{transform:scale(1.12) !important;box-shadow:0 0 40px rgba(255, 193, 7, 0.8), 0 0 80px rgba(255, 193, 7, 0.4), 0 20px 50px rgba(0, 0, 0, 0.2);border-width:8px;border-color:#FFC107}.option-card.pose-target .progress-ring circle{stroke:#FFC107;stroke-width:10}/* ========================================= Pose Guide Overlay (Swipe Direction Guide) ========================================= */ .pose-guide{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;display:none}.pose-guide.show{display:block}.pose-guide-content{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.pose-guide-row{display:flex;justify-content:center;gap:10px}.pose-guide-middle{gap:30px}.pose-zone{background:rgba(255, 255, 255, 0.9);border-radius:16px;padding:10px 15px;text-align:center;box-shadow:0 4px 15px rgba(0, 0, 0, 0.12);border:3px solid transparent;transition:all 0.3s;min-width:70px}.pose-zone.zone-up{border-color:#4CAF50}.pose-zone.zone-down{border-color:#2196F3}.pose-zone.zone-left{border-color:#FF9800}.pose-zone.zone-right{border-color:#9C27B0}.pose-zone.active{transform:scale(1.15);box-shadow:0 0 25px rgba(255, 193, 7, 0.7);border-color:#FFC107}.pose-zone-icon{font-size:28px;margin-bottom:3px}.pose-zone-text{font-size:12px;font-weight:900;color:#37474f}/* ========================================= Responsive Design ========================================= */ @media (max-width:768px){.option-card{width:100px;height:100px;border-radius:20px}.option-card.pos-0{top:80px;left:20px}.option-card.pos-1{top:80px;right:20px}.option-card.pos-2{bottom:60px;left:20px}.option-card.pos-3{bottom:60px;right:20px}#q-word{font-size:48px}#cam-window{width:120px;height:120px}#ui-layer{gap:10px}.score-pill{padding:8px 16px}.progress-pill{padding:8px 16px}.s-txt{font-size:24px;min-width:30px}.progress-txt{font-size:18px}.score-icon{font-size:20px}.progress-icon{font-size:16px}#combo-display{top:calc(50% - 60px);left:calc(50% + 100px);font-size:16px;padding:6px 12px}#combo-display #combo-num{font-size:20px}.game-logo{font-size:48px}.subtitle-cn{font-size:18px}.tutorial-section{padding:16px 20px 20px}.tutorial-title{font-size:16px;margin-bottom:16px}.tutorial-steps{gap:8px}.step-card{width:70px;padding:12px 8px}.step-number{width:22px;height:22px;font-size:12px;top:-8px;left:-8px}.step-icon{font-size:28px;margin-bottom:6px}.step-label{font-size:13px}.step-desc{font-size:9px}.step-arrow{font-size:18px}.btn-start{padding:16px 50px;font-size:20px}}/* ========================================= Camera Error Overlay ========================================= */ #camera-error{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn 0.3s ease-out}.camera-error-card{background:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);border-radius:24px;padding:40px 50px;text-align:center;max-width:400px;box-shadow:0 20px 60px rgba(0, 0, 0, 0.3)}.camera-error-title{font-size:28px;font-weight:900;color:#37474f;margin-bottom:15px}.camera-error-desc{font-size:18px;color:#546e7a;margin-bottom:10px;font-weight:700}.camera-error-hint{font-size:14px;color:#78909c;margin-bottom:25px;padding:12px;background:#eceff1;border-radius:12px;font-family:monospace}.camera-error-btn{background:linear-gradient(135deg, #4CAF50 0%, #43A047 100%);color:white;border:none;padding:15px 40px;font-size:18px;font-weight:900;border-radius:30px;cursor:pointer;box-shadow:0 4px 0 #2E7D32, 0 8px 20px rgba(76, 175, 80, 0.3);transition:all 0.1s}.camera-error-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #2E7D32, 0 12px 25px rgba(76, 175, 80, 0.4)}.camera-error-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #2E7D32}/* ========================================= Share Card - 战绩分享卡 ========================================= */ #share-card-container{position:fixed;top:0;left:0;width:100vw;height:var(--vh, 100dvh);background:rgba(0, 0, 0, 0.85);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:30px;z-index:10001;padding:20px}.share-card{width:360px;min-height:520px;border-radius:24px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0, 0, 0, 0.4)}.share-card-bg{position:absolute;inset:0;background:linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #ffecd2 100%);background-size:400% 400%;animation:gradientShift 8s ease infinite}@keyframes gradientShift{0%, 100%{background-position:0% 50%}50%{background-position:100% 50%}}.share-card-content{position:relative;z-index:1;display:flex;flex-direction:column;padding:20px 24px;color:white;text-shadow:0 2px 10px rgba(0, 0, 0, 0.2)}.share-card-header{text-align:center;margin-bottom:12px}.share-card-logo{font-family:'Fredoka One', cursive;font-size:28px;letter-spacing:2px;text-transform:lowercase}.share-card-subtitle{font-family:"ZCOOL KuaiLe", cursive;font-size:14px;opacity:0.9;margin-top:2px}.share-card-result{display:flex;flex-direction:column;align-items:center;padding:10px 0}.share-card-emoji{font-size:48px;margin-bottom:4px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2))}.share-card-title{font-family:"ZCOOL KuaiLe", cursive;font-size:26px;font-weight:400;margin-bottom:8px}.share-card-grade{font-family:'Fredoka One', cursive;font-size:56px;line-height:1;background:linear-gradient(180deg, #fff 0%, #ffe082 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3))}.share-card-grade.s{background:linear-gradient(180deg, #ffd700 0%, #ff6b00 100%);-webkit-background-clip:text;background-clip:text}.share-card-grade.a{background:linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);-webkit-background-clip:text;background-clip:text}.share-card-grade.b{background:linear-gradient(180deg, #2196f3 0%, #1565c0 100%);-webkit-background-clip:text;background-clip:text}.share-card-grade.c{background:linear-gradient(180deg, #ff9800 0%, #e65100 100%);-webkit-background-clip:text;background-clip:text}.share-card-grade.d{background:linear-gradient(180deg, #9e9e9e 0%, #616161 100%);-webkit-background-clip:text;background-clip:text}.share-card-stats{display:flex;justify-content:space-between;background:rgba(255, 255, 255, 0.2);backdrop-filter:blur(10px);border-radius:16px;padding:12px 10px;margin:10px 0 8px}.share-card-fun{display:flex;justify-content:center;gap:20px;padding:8px 0;margin-bottom:8px}.fun-item{display:flex;align-items:center;gap:4px;font-size:13px;opacity:0.9}.fun-icon{font-size:16px}.fun-value{font-family:'Fredoka One', cursive;font-size:15px}.fun-unit{font-size:11px;opacity:0.8}.share-stat{text-align:center;flex:1}.share-stat-value{font-family:'Fredoka One', cursive;font-size:24px;line-height:1.2}.share-stat-label{font-family:"ZCOOL KuaiLe", cursive;font-size:12px;opacity:0.85;margin-top:2px}.share-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid rgba(255,255,255,0.2)}.share-card-date{font-size:12px;opacity:0.8}.share-card-slogan{font-family:"ZCOOL KuaiLe", cursive;font-size:13px;opacity:0.9}.share-card-actions{display:flex;flex-direction:column;gap:20px}.share-action-btn{position:relative;width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:none;border-radius:24px;cursor:pointer;background:linear-gradient(135deg, #4CAF50 0%, #43A047 50%, #388E3C 100%);color:white;box-shadow:0 8px 0 #2E7D32, 0 12px 20px rgba(76, 175, 80, 0.3);transition:all 0.15s ease;overflow:hidden;font-size:14px;font-weight:700;font-family:"ZCOOL KuaiLe", cursive}.share-action-btn .btn-icon{font-size:36px}.share-action-btn:hover{transform:translateY(-4px);box-shadow:0 12px 0 #2E7D32, 0 16px 30px rgba(76, 175, 80, 0.4)}.share-action-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #2E7D32}.share-action-btn.hover{transform:translateY(-6px);box-shadow:0 15px 0 #2E7D32, 0 0 40px rgba(76, 175, 80, 0.6), 0 0 80px rgba(76, 175, 80, 0.3)}.share-action-btn .hover-progress-bar{position:absolute;bottom:0;left:0;height:6px;width:calc(var(--hover-progress, 0) * 100%);background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(200,230,201,0.7) 100%);transition:width 0.05s linear}.share-action-btn.secondary{background:linear-gradient(135deg, #78909C 0%, #607D8B 50%, #546E7A 100%);box-shadow:0 8px 0 #455A64, 0 12px 20px rgba(96, 125, 139, 0.3)}.share-action-btn.secondary:hover{box-shadow:0 12px 0 #455A64, 0 16px 30px rgba(96, 125, 139, 0.4)}.share-action-btn.secondary:active{box-shadow:0 2px 0 #455A64}.share-action-btn.secondary.hover{box-shadow:0 15px 0 #455A64, 0 0 40px rgba(96, 125, 139, 0.6), 0 0 80px rgba(96, 125, 139, 0.3)}.share-action-btn.secondary .hover-progress-bar{background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(176,190,197,0.6) 100%)}.action-btn.action-share{background:linear-gradient(135deg, #AB47BC 0%, #9C27B0 50%, #7B1FA2 100%);box-shadow:0 8px 0 #6A1B9A, 0 12px 20px rgba(106, 27, 154, 0.3)}.action-btn.action-share:hover{box-shadow:0 12px 0 #6A1B9A, 0 16px 30px rgba(106, 27, 154, 0.4)}.action-btn.action-share:active{box-shadow:0 2px 0 #6A1B9A}.action-btn.action-share.hover{box-shadow:0 15px 0 #6A1B9A, 0 0 40px rgba(156, 39, 176, 0.6), 0 0 80px rgba(156, 39, 176, 0.3)}.action-btn.action-share .hover-progress-bar{background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(206,147,216,0.6) 100%)}@media (max-width:600px){#share-card-container{flex-direction:column;gap:20px}.share-card-actions{flex-direction:row;gap:20px}.share-action-btn{width:100px;height:100px}.share-action-btn .btn-icon{font-size:28px}}@media (max-width:400px){.share-card{width:320px;min-height:460px}.share-card-content{padding:16px 20px}.share-card-logo{font-size:24px}.share-card-photo{width:80px;height:80px}.share-card-emoji{font-size:40px}.share-card-title{font-size:22px}.share-card-grade{font-size:48px}.share-stat-value{font-size:18px}.share-card-stats{padding:10px 8px}.share-action-btn{width:90px;height:90px}.share-action-btn .btn-icon{font-size:24px}}/* ========================================= Camera Modal - 拟态相机 ========================================= */ .camera-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center, rgba(0, 20, 50, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);backdrop-filter:blur(20px);display:flex;justify-content:center;align-items:center;z-index:3000;opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}.camera-modal.show{opacity:1;pointer-events:auto}.camera-body{background:linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0d0d0d 100%);border-radius:40px;padding:25px;box-shadow:0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 4px #333, 0 0 0 8px #1a1a1a, inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.3);transform:scale(0.8) rotateX(10deg);transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);max-width:400px;width:90%}.camera-modal.show .camera-body{transform:scale(1) rotateX(0)}.camera-top{display:flex;align-items:center;justify-content:space-between;padding:10px 15px 15px;position:relative}.camera-flash{width:20px;height:20px;background:linear-gradient(145deg, #555, #333);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2)}.camera-flash.active{background:linear-gradient(145deg, #fff, #ffd700);box-shadow:0 0 20px #ffd700, 0 0 40px rgba(255, 215, 0, 0.5)}.camera-lens-ring{width:50px;height:50px;background:linear-gradient(145deg, #444, #222);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px rgba(0,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.1)}.camera-lens{width:30px;height:30px;background:radial-gradient(circle at 30% 30%, #4a90d9, #1a3a5c);border-radius:50%;box-shadow:inset 0 0 10px rgba(0,0,0,0.5)}.camera-viewfinder{width:30px;height:20px;background:linear-gradient(145deg, #333, #1a1a1a);border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}.camera-screen{position:relative;background:#000;border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:inset 0 4px 20px rgba(0,0,0,0.8), 0 0 0 3px #222}#selfie-canvas{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.camera-guide{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:70%;height:70%}.guide-corner{position:absolute;width:30px;height:30px;border:4px solid rgba(255, 255, 255, 0.8)}.guide-corner.tl{top:0;left:0;border-right:none;border-bottom:none;border-radius:8px 0 0 0}.guide-corner.tr{top:0;right:0;border-left:none;border-bottom:none;border-radius:0 8px 0 0}.guide-corner.bl{bottom:0;left:0;border-right:none;border-top:none;border-radius:0 0 0 8px}.guide-corner.br{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 8px 0}.camera-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0, 0, 0, 0.7);padding:12px 24px;border-radius:30px;display:flex;align-items:center;gap:10px;animation:hint-pulse 2s ease-in-out infinite}@keyframes hint-pulse{0%, 100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(1.05);opacity:0.8}}.hint-icon{font-size:28px;animation:hint-wave 1s ease-in-out infinite}@keyframes hint-wave{0%, 100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.hint-text{color:#fff;font-size:16px;font-weight:700;font-family:'ZCOOL KuaiLe', sans-serif}.camera-hint.detected{background:rgba(76, 175, 80, 0.9);animation:none}.camera-hint.detected .hint-icon{animation:none}.camera-hint.detected .hint-text::after{content:' ✓'}.camera-countdown{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);font-family:'Fredoka One', cursive;font-size:120px;color:#fff;text-shadow:0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(76, 175, 80, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);opacity:0;pointer-events:none;z-index:20}.camera-countdown.show{animation:countdown-pop 0.9s ease-out forwards}@keyframes countdown-pop{0%{transform:translate(-50%, -50%) scale(0);opacity:0}15%{transform:translate(-50%, -50%) scale(1.4);opacity:1}30%{transform:translate(-50%, -50%) scale(1)}85%{transform:translate(-50%, -50%) scale(1);opacity:1}100%{transform:translate(-50%, -50%) scale(0.6);opacity:0}}.flash-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;opacity:0;pointer-events:none;z-index:10}.flash-overlay.flash{animation:camera-flash 0.5s ease-out}@keyframes camera-flash{0%{opacity:1}100%{opacity:0}}.camera-bottom{padding:20px 15px 10px;display:flex;flex-direction:column;align-items:center;gap:15px}.camera-shutter{cursor:pointer;transition:transform 0.1s ease}.camera-shutter:active{transform:scale(0.95)}.shutter-outer{width:70px;height:70px;background:linear-gradient(145deg, #fff, #ddd);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.8)}.shutter-inner{width:54px;height:54px;background:linear-gradient(145deg, #f44336, #c62828);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.3);transition:background 0.2s ease}.camera-shutter:hover .shutter-inner{background:linear-gradient(145deg, #ff5252, #d32f2f)}.camera-shutter.capturing .shutter-inner{background:linear-gradient(145deg, #4CAF50, #388E3C)}.camera-brand{color:rgba(255, 255, 255, 0.4);font-size:12px;font-family:'Fredoka One', sans-serif;letter-spacing:2px}.camera-close{position:absolute;top:20px;right:20px;width:50px;height:50px;background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;color:#fff;font-size:24px;cursor:pointer;transition:all 0.2s ease;backdrop-filter:blur(10px)}.camera-close:hover{background:rgba(255, 255, 255, 0.2);transform:scale(1.1)}/* ========================================= Share Card Photo - 战绩卡照片 ========================================= */ .share-card-photo{width:100px;height:100px;margin:0 auto 10px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 4px 15px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(255, 215, 0, 0.4);display:none;flex-shrink:0}.share-card-photo.has-photo{display:block}.share-card-photo img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.share-card-photo.has-photo + .share-card-emoji{display:none}/* ========================================= Rotate Overlay - 横屏提示 (仅移动设备竖屏时显示) ========================================= */ #rotate-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);display:none;justify-content:center;align-items:center;z-index:10000;flex-direction:column}.rotate-content{text-align:center;color:#fff}.rotate-phone{width:60px;height:100px;border:4px solid #fff;border-radius:12px;margin:0 auto 30px;position:relative;animation:rotatePhone 1.5s ease-in-out infinite;box-shadow:0 0 20px rgba(255, 255, 255, 0.3)}.rotate-phone::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:20px;height:4px;background:rgba(255, 255, 255, 0.5);border-radius:2px}.rotate-phone::after{content:'';position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:16px;height:16px;border:2px solid rgba(255, 255, 255, 0.5);border-radius:50%}.phone-screen{position:absolute;top:18px;left:4px;right:4px;bottom:30px;background:rgba(255, 255, 255, 0.15);border-radius:4px}@keyframes rotatePhone{0%, 100%{transform:rotate(0deg)}25%{transform:rotate(-15deg)}75%{transform:rotate(90deg)}}.rotate-text{font-family:'ZCOOL KuaiLe', 'Nunito', sans-serif;font-size:28px;font-weight:bold;margin-bottom:12px;text-shadow:0 2px 10px rgba(0, 0, 0, 0.2)}.rotate-hint{font-family:'Nunito', sans-serif;font-size:16px;opacity:0.8;letter-spacing:1px}@media screen and (max-width:900px) and (orientation:portrait){body.game-started #rotate-overlay{display:flex}}/* ========================================= Mobile Landscape Mode - 手机横屏适配 针对手机横屏投屏到电视的场景优化 ========================================= */ @media screen and (max-height:500px) and (orientation:landscape){#lobby{padding:10px 40px;overflow-y:auto;flex-direction:row;justify-content:center;align-items:center;gap:50px}.tutorial-section{order:1;padding:10px 12px;margin-bottom:0;border-radius:14px;flex-shrink:0;align-self:center}.lobby-main{order:2;display:flex;flex-direction:column;align-items:center;gap:16px}.tutorial-title{font-size:11px;margin-bottom:8px;white-space:nowrap}.tutorial-steps{flex-direction:column;gap:4px}.step-card{width:auto;padding:5px 10px;border-radius:8px;display:flex;flex-direction:row;align-items:center;gap:6px;border-width:1px}.step-card:hover{transform:none}.step-number{position:static;width:14px;height:14px;font-size:8px;flex-shrink:0}.step-icon{font-size:16px;margin-bottom:0;flex-shrink:0}.step-label{font-size:10px;white-space:nowrap}.step-desc{display:none}.step-arrow{display:none}.title-group{margin-bottom:0;margin-top:-10px;text-align:center}.brand-name{font-size:16px}.main-slogan{font-size:18px;margin-bottom:2px}.main-slogan .highlight::after{font-size:10px;right:-14px}.sub-slogan{font-size:10px;margin-bottom:4px}.game-logo{font-size:28px;-webkit-text-stroke:2px #fff}.subtitle-cn{font-size:11px;margin-top:2px}.recommend-badge{font-size:6px;padding:1px 4px;top:-4px;right:-4px}.mode-section{margin-bottom:2px}.mode-title{display:none}.mode-options{gap:4px;flex-wrap:wrap;justify-content:center}.mode-card{padding:4px 8px;min-width:45px;border-radius:6px}.mode-icon{font-size:14px;margin-bottom:1px}.mode-label{font-size:9px}.btn-start{padding:8px 28px;font-size:13px;border-radius:25px;box-shadow:0 3px 0 #bf360c, 0 5px 12px rgba(244, 81, 30, 0.4);white-space:nowrap;margin-bottom:12px}.privacy-note{font-size:8px;margin-top:0;margin-bottom:3px}.loading-status{font-size:8px;margin-top:0}.firefly-decoration{display:none}#cam-window{width:80px;height:80px;bottom:5px}#cam-window::before{width:25px;height:25px;left:-15px}#cam-window::after{width:20px;height:20px;right:-12px}#ui-layer{top:8px;gap:8px}.score-pill, .progress-pill{padding:6px 12px;border-radius:20px}.s-txt{font-size:20px;min-width:24px}.progress-txt{font-size:14px}.score-icon{font-size:16px}.progress-icon{font-size:14px}#question-card{padding:12px 25px;border-radius:20px;top:50%;transform:translate(-50%, -50%)}#q-word{font-size:36px}#q-hint{font-size:12px;margin-top:4px}.option-card{width:70px;height:70px;border-radius:16px}.option-card.pos-0{top:10px;left:10px}.option-card.pos-1{top:10px;right:10px}.option-card.pos-2{bottom:10px;left:10px}.option-card.pos-3{bottom:10px;right:10px}#combo-display{top:calc(50% - 40px);left:calc(50% + 80px);font-size:14px;padding:4px 10px}#combo-display #combo-num{font-size:18px}#kill-streak{font-size:28px}.hand-cursor{width:40px;height:40px}.result-screen{padding:10px}.result-card{padding:12px 15px;border-radius:18px;max-width:98vw;max-height:92dvh;width:auto;display:flex;flex-direction:row;align-items:center;gap:12px}.result-card::before{border-radius:21px}.result-header{margin-bottom:0;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.result-emoji{font-size:28px}.result-title{font-size:13px;margin-top:2px;white-space:nowrap}.result-stats{margin:0;padding:8px 10px;border-radius:10px;flex:1;min-width:0}.stat-row{gap:6px}.stat-item{min-width:50px}.stat-value{font-size:16px}.stat-label{font-size:9px;margin-top:1px;white-space:nowrap}.result-grade{font-size:38px;margin:0 6px;flex-shrink:0}.result-actions{gap:5px;margin-top:0;flex-direction:row;flex-shrink:0}.action-btn{padding:6px 8px;min-width:55px;border-radius:10px}.action-icon{font-size:16px;margin-bottom:2px}.action-label{font-size:8px;white-space:nowrap}#share-card-container{flex-direction:row;gap:15px;padding:10px}.share-card{width:280px;min-height:auto;max-height:90dvh;border-radius:20px}.share-card-content{padding:12px 16px}.share-card-header{margin-bottom:8px}.share-card-logo{font-size:20px}.share-card-subtitle{font-size:10px}.share-card-result{margin-bottom:8px}.share-card-photo{width:60px;height:60px;margin-bottom:6px}.share-card-emoji{font-size:32px}.share-card-title{font-size:18px}.share-card-grade{font-size:40px;margin:4px 0}.share-card-stats{padding:8px 10px;gap:8px;border-radius:10px}.share-stat-value{font-size:16px}.share-stat-label{font-size:9px}.share-card-fun{padding:6px 10px;gap:12px;margin-top:6px}.fun-icon{font-size:12px}.fun-value{font-size:14px}.fun-unit{font-size:9px}.share-card-footer{margin-top:8px;padding-top:8px}.share-card-date{font-size:10px}.share-card-slogan{font-size:10px}.share-card-actions{flex-direction:column;gap:10px}.share-action-btn{width:100px;height:80px;border-radius:14px}.share-action-btn .btn-icon{font-size:24px}.share-action-btn span:last-child{font-size:11px}.camera-modal{padding:10px}.camera-body{transform:scale(0.55);transform-origin:center center}.camera-screen{max-height:70dvh}.camera-close{top:5px;right:5px;width:32px;height:32px;font-size:16px}.camera-top{padding:8px 15px}.camera-bottom{padding:10px}.camera-shutter .shutter-outer{width:50px;height:50px}.camera-shutter .shutter-inner{width:40px;height:40px}.camera-hint{font-size:14px;padding:6px 12px}.pause-content{padding:20px 40px}.pause-icon{font-size:48px}.pause-text{font-size:20px}.pause-hint{font-size:14px}.rotate-phone{width:40px;height:70px;margin-bottom:20px}.rotate-text{font-size:22px}.rotate-hint{font-size:14px}}/* ========================================= 更小屏幕横屏适配 (高度 < 400px) ========================================= */ @media screen and (max-height:400px) and (orientation:landscape){#lobby{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px}.title-group{margin-bottom:0;text-align:left}.brand-name{font-size:18px}.main-slogan{font-size:22px}.main-slogan .highlight::after{display:none}.sub-slogan{font-size:11px}.game-logo{font-size:28px}.subtitle-cn{font-size:12px}.firefly-decoration{display:none}.tutorial-section{display:none}.mode-section{margin-bottom:0}.mode-title{display:none}.mode-card{padding:6px 10px}.mode-icon{font-size:18px}.mode-label{font-size:10px}.btn-start{padding:10px 35px;font-size:16px;white-space:nowrap;min-width:fit-content}.privacy-note, .loading-status{display:none}.option-card{width:55px;height:55px;border-radius:12px}#q-word{font-size:28px}.result-card{padding:8px 10px;gap:8px}.result-emoji{font-size:22px}.result-title{font-size:11px}.result-stats{padding:6px 8px}.stat-item{min-width:40px}.stat-value{font-size:14px}.stat-label{font-size:8px}.result-grade{font-size:30px;margin:0 4px}.result-actions{gap:4px}.action-btn{padding:5px 6px;min-width:48px;border-radius:8px}.action-icon{font-size:14px;margin-bottom:1px}.action-label{font-size:7px}.camera-body{transform:scale(0.45)}}/* ========================================= iOS Safari 添加到主屏幕引导提示 ========================================= */ #ios-install-prompt{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(120%);z-index:99999;transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events:none}#ios-install-prompt.show{transform:translateX(-50%) translateY(0);pointer-events:auto}.install-prompt-content{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg, #fff 0%, #f8f9ff 100%);padding:14px 18px;border-radius:20px;box-shadow:0 8px 32px rgba(0, 100, 200, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);border:2px solid rgba(79, 195, 247, 0.3);position:relative}.install-prompt-icon{font-size:36px;flex-shrink:0;animation:bounce-gentle 2s infinite}@keyframes bounce-gentle{0%, 100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.install-prompt-text{flex:1}.install-prompt-title{font-size:16px;font-weight:800;color:#1976d2;margin-bottom:2px;font-family:"Nunito", sans-serif}.install-prompt-desc{font-size:12px;color:#607d8b;font-weight:600}.install-prompt-close{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;background:#ff5252;color:#fff;border:2px solid #fff;font-size:14px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(255, 82, 82, 0.4);transition:transform 0.2s, background 0.2s}.install-prompt-close:hover{transform:scale(1.1);background:#ff1744}.install-prompt-steps{display:flex;gap:8px;margin-top:10px;padding:10px 12px;background:rgba(79, 195, 247, 0.1);border-radius:12px}.install-step{display:flex;align-items:center;gap:6px;font-size:13px;color:#37474f;font-weight:600}.install-step .step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:linear-gradient(135deg, #4fc3f7 0%, #0288d1 100%);color:#fff;border-radius:50%;font-size:11px;font-weight:800;flex-shrink:0}.install-step .step-icon{font-size:16px;display:flex;align-items:center}.install-step .step-icon svg{width:18px;height:18px;color:#0288d1}.install-step .step-text strong{color:#0288d1}.install-prompt-arrow{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #fff;filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1))}@media screen and (orientation:landscape){#ios-install-prompt{bottom:auto;top:20px;right:20px;left:auto;transform:translateX(0) translateY(-120%)}#ios-install-prompt.show{transform:translateX(0) translateY(0)}.install-prompt-content{flex-direction:row;padding:10px 14px}.install-prompt-icon{font-size:28px}.install-prompt-title{font-size:14px}.install-prompt-desc{font-size:11px}.install-prompt-steps{margin-top:8px;padding:8px 10px;flex-direction:column;gap:4px}.install-step{font-size:12px}.install-prompt-arrow{display:none}}