*{margin:0;padding:0;box-sizing:border-box}body{background:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}#game-container{position:relative;width:100vw;height:100vh;background:linear-gradient(180deg,#e8f4f8,#d0e8f0);display:flex;flex-direction:column}#top-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:#fff;border-bottom:1px solid #ddd;z-index:50;flex-shrink:0}#round-display{font-size:16px;font-weight:600;color:#333}#voice-control select:focus{outline:2px solid rgba(66,133,244,.35);outline-offset:2px}#voice-test-btn:hover{background:#ededed}#round-timer{margin-left:14px;padding:6px 10px;background:#fafafa;border:1px solid #eee;border-radius:999px}#match-counter{font-size:14px;color:#666}#speed-control{display:flex;align-items:center;gap:10px}#breakout-score{display:none;position:absolute;top:12px;right:16px;font-size:36px;font-weight:800;color:#4caf50;z-index:40;text-shadow:0 2px 4px rgba(0,0,0,.2);font-family:Courier New,monospace;transition:color .2s ease}#breakout-score.show{display:block}#breakout-score.negative{color:#f44336}body.dark-mode #breakout-score{text-shadow:0 2px 6px rgba(0,0,0,.5)}#streak-counter{display:none;position:absolute;top:52px;right:16px;font-size:18px;font-weight:700;z-index:40;font-family:Courier New,monospace;transition:all .2s ease}#streak-counter.show{display:block}#streak-counter.fire{color:#ff6b00;text-shadow:0 0 8px rgba(255,107,0,.6)}#streak-counter.blaze{color:#ff1493;text-shadow:0 0 12px rgba(255,20,147,.7);font-size:22px}#color-flash{position:absolute;inset:0;pointer-events:none;z-index:35;opacity:0;transition:opacity .15s ease;border-radius:12px}#color-flash.flash{opacity:1;animation:colorFlashPulse .6s ease-out forwards}@keyframes colorFlashPulse{0%{opacity:.4}30%{opacity:.25}to{opacity:0}}@keyframes rainbowBorder{0%{box-shadow:inset 0 0 30px #ff00004d}17%{box-shadow:inset 0 0 30px #ffa5004d}33%{box-shadow:inset 0 0 30px #ffff004d}50%{box-shadow:inset 0 0 30px #00c8004d}67%{box-shadow:inset 0 0 30px #0064ff4d}83%{box-shadow:inset 0 0 30px #9400d34d}to{box-shadow:inset 0 0 30px #ff00004d}}#color-flash.rainbow{opacity:1;animation:rainbowBorder 1.2s ease-in-out forwards}.combo-number-bubble{display:flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid rgba(255,255,255,.5);box-shadow:0 3px 12px #00000040,inset 0 -3px 6px #00000026;text-shadow:0 1px 3px rgba(0,0,0,.3)}#pause-btn{padding:8px 16px;font-size:14px;background:#f0f0f0;border:1px solid #ddd;border-radius:6px;cursor:pointer}#pause-btn:hover{background:#e0e0e0}#skip-round-btn{padding:4px 8px;font-size:14px;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;cursor:pointer;margin-left:8px;vertical-align:middle}#skip-round-btn:hover{background:#e0e0e0}#game-area{position:relative;flex:1;overflow:hidden;margin-right:50px}#progress-container{position:absolute;top:60px;right:15px;bottom:20px;width:30px;display:flex;flex-direction:column;align-items:center}#progress-bar-container{width:12px;flex:1;background:#ddd;border-radius:6px;position:relative;overflow:hidden}#progress-bar{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#4caf50,#2e7d32);border-radius:6px;transition:height .5s ease}.card{position:absolute;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.card:hover{transform:scale(1.1);z-index:10}.card.selected{transform:scale(1.15);filter:drop-shadow(0 4px 12px rgba(66,133,244,.6));z-index:20}.card.correct{animation:popCorrect .6s ease-out forwards}.card.incorrect{animation:flashRed .4s ease-out}@keyframes popCorrect{0%{transform:scale(1.15);opacity:1}20%{transform:scale(1.3);background-color:#0f4;box-shadow:0 0 40px #0f4,0 0 60px #0f4}50%{transform:scale(1.5);background-color:#0f4;box-shadow:0 0 60px #0f4,0 0 80px #0f4;opacity:.9}to{transform:scale(1.8);opacity:0}}@keyframes flashRed{0%{background-color:inherit}30%{background-color:#f44}to{background-color:inherit}}.emoji-card{font-size:42px;padding:8px;background:#fff;border-radius:12px;border:3px solid transparent}.emoji-card.selected{border-color:#4285f4}.emoji-card.incorrect{animation:flashRedEmoji .4s ease-out}.emoji-card.show-word{font-size:14px!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:60px;padding:8px 12px}@keyframes flashRedEmoji{0%{border-color:#4285f4}30%{border-color:#f44;background-color:#fdd}to{border-color:transparent;background-color:#fff}}.word-card{font-size:16px;font-weight:500;padding:10px 16px;background:#fff;border-radius:8px;border:3px solid transparent;color:#333;white-space:nowrap}.word-card.selected{border-color:#4285f4}.word-card.typing-card{background:radial-gradient(ellipse at 30% 30%,#4a90d9,#2a6cb8,#1a5298);border:4px solid rgba(255,255,255,.3);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:17px;font-weight:600;color:#fff;font-family:Courier New,monospace;box-shadow:0 4px #0003,0 6px 10px #0000004d,inset 0 -3px 6px #0003,inset 0 3px 6px #ffffff4d;padding:8px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.4)}.word-card.typing-card.selected{border-color:#fff;box-shadow:0 2px #0003,0 4px 8px #0000004d,0 0 20px #fff6,inset 0 -3px 6px #0003,inset 0 3px 6px #ffffff4d;transform:translateY(2px) scale(1.05)}.word-card.typing-card.correct{background:radial-gradient(ellipse at 30% 30%,#2e7d32,#1b5e20,#0d3d12);border-color:#4caf50;color:#c8e6c9}.word-card.typing-card.incorrect{background:radial-gradient(ellipse at 30% 30%,#c62828,#b71c1c,#7f0000);border-color:#f44336;color:#ffcdd2;animation:typewriterShake .3s ease}@keyframes typewriterShake{0%,to{transform:translate(0) translateY(2px)}25%{transform:translate(-5px) translateY(2px)}75%{transform:translate(5px) translateY(2px)}}.word-card.typing-card.show-word{font-size:32px;font-weight:700}.color-disc{border-radius:50%;width:72px;height:72px;display:flex;align-items:center;justify-content:center;text-align:center;border:4px solid rgba(0,0,0,.25);box-shadow:inset 0 -6px 12px #00000040,inset 0 6px 12px #ffffff26,0 4px 10px #00000059;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;font-size:0;line-height:1}.color-disc:hover{transform:scale(1.08)}.color-disc.selected{border:4px solid #4a90d9;box-shadow:inset 0 -6px 12px #00000040,inset 0 6px 12px #ffffff26,0 0 0 3px #4a90d966,0 0 20px #4a90d980;transform:scale(1.1)}.color-disc.correct{border-color:#4caf50;box-shadow:inset 0 -6px 12px #00000040,0 0 0 3px #4caf5066,0 0 25px #4caf5099}.color-disc.incorrect{border-color:#f44336;animation:discShake .4s ease}@keyframes discShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.color-disc.show-word{font-size:11px;font-weight:700;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.8);padding:4px;word-break:break-word}.word-card.incorrect{animation:flashRedWord .4s ease-out}@keyframes flashRedWord{0%{border-color:#4285f4}30%{border-color:#f44;background-color:#f44;color:#fff}to{border-color:transparent;background-color:#fff;color:#333}}.french-card{font-size:15px;font-weight:500;padding:10px 14px;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:8px;border:3px solid #2196F3;color:#1565c0;max-width:200px;text-align:center}.french-card.selected{border-color:#0d47a1;box-shadow:0 0 15px #2196f380}.french-card.correct{background:linear-gradient(135deg,#c8e6c9,#a5d6a7);border-color:#4caf50;color:#2e7d32}.french-card.incorrect{animation:flashRedFrench .4s ease-out}@keyframes flashRedFrench{0%{border-color:#2196f3}30%{border-color:#f44;background:#f44;color:#fff}to{border-color:#2196f3;background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:#1565c0}}.english-card{font-size:15px;font-weight:500;padding:10px 14px;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-radius:8px;border:3px solid #FF9800;color:#e65100;max-width:200px;text-align:center}.english-card.selected{border-color:#e65100;box-shadow:0 0 15px #ff980080}.english-card.correct{background:linear-gradient(135deg,#c8e6c9,#a5d6a7);border-color:#4caf50;color:#2e7d32}.english-card.incorrect{animation:flashRedEnglish .4s ease-out}@keyframes flashRedEnglish{0%{border-color:#ff9800}30%{border-color:#f44;background:#f44;color:#fff}to{border-color:#ff9800;background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#e65100}}#paddle-container{display:none;position:absolute;bottom:0;left:0;right:0;height:70px;z-index:30;pointer-events:none}#paddle-container.show{display:block}#paddle{position:absolute;bottom:12px;width:140px;height:42px;background:linear-gradient(180deg,#4a90d9,#2a6cb8,#1a5298);border:3px solid rgba(255,255,255,.4);border-radius:21px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 4px 12px #0000004d,inset 0 2px 4px #fff3;transition:left .04s linear;text-align:center;padding:0 10px;line-height:1.2}body.dark-mode #paddle{background:linear-gradient(180deg,#1a3a6a,#0d2548,#071a38);border-color:#64a0ff66}@keyframes paddleCatch{0%{transform:scale(1)}40%{transform:scale(1.1);box-shadow:0 0 25px #4caf50b3}to{transform:scale(1)}}#paddle.catching{animation:paddleCatch .4s ease-out}@keyframes paddleMiss{0%{transform:scale(1)}40%{transform:scale(1.06);box-shadow:0 0 20px #f44336b3}to{transform:scale(1)}}#paddle.missing{animation:paddleMiss .35s ease-out}.bounce-emoji{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:15;pointer-events:none;transition:width .25s ease,height .25s ease,font-size .25s ease;box-shadow:inset 0 -3px 6px #00000026,inset 0 3px 6px #ffffff40,0 3px 8px #0003;border:2px solid rgba(255,255,255,.25)}@keyframes emojiPop{0%{transform:scale(1);opacity:1;filter:brightness(1)}20%{transform:scale(2.2);opacity:.9;filter:brightness(2)}50%{transform:scale(3);opacity:.5;filter:brightness(2.5)}to{transform:scale(0);opacity:0;filter:brightness(.5)}}.bounce-emoji.popping{animation:emojiPop .55s ease-out forwards;z-index:50}@keyframes shockwave{0%{transform:translate(-50%,-50%) scale(0);opacity:.8;border-width:4px}60%{opacity:.4;border-width:2px}to{transform:translate(-50%,-50%) scale(1);opacity:0;border-width:1px}}.pop-ring{position:absolute;width:140px;height:140px;border-radius:50%;border:4px solid rgba(76,175,80,.8);pointer-events:none;z-index:49;animation:shockwave .6s ease-out forwards}@keyframes emojiGrow{0%{filter:brightness(1)}40%{filter:brightness(1.6)}to{filter:brightness(1)}}.bounce-emoji.growing{animation:emojiGrow .35s ease-out}#paddle-hint{display:none;position:absolute;bottom:62px;left:50%;transform:translate(-50%);font-size:12px;color:#999;white-space:nowrap;z-index:31}#paddle-hint.show{display:block}body.dark-mode #paddle-hint{color:#666}.phrase-card{font-size:15px;font-weight:500;padding:10px 14px;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:8px;border:3px solid #2196F3;color:#1565c0;max-width:200px;text-align:center;transition:all .3s ease}.phrase-card.hit{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-color:#ff9800;color:#e65100;transform:scale(1.1)}.phrase-card.evaporating{opacity:0;transform:scale(.5);transition:all .5s ease-out}#pause-overlay{display:none;position:fixed;inset:0;background:#ffffffe6;z-index:200;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}#pause-overlay.show{display:flex}#pause-text{font-size:32px;color:#666}#pause-hint{font-size:14px;color:#999;margin-top:10px}#round-complete-overlay{display:none;position:fixed;inset:0;background:#fffffff2;z-index:300;flex-direction:column;justify-content:center;align-items:center;gap:40px}#round-complete-overlay.show{display:flex}#round-complete-text{font-size:42px;font-weight:700;color:#4caf50;text-shadow:0 2px 10px rgba(76,175,80,.3)}#next-round-btn{padding:15px 30px;font-size:16px;background:#4caf50;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s}#next-round-btn:hover{background:#45a049}#validation-overlay{display:none;position:fixed;inset:0;background:#fffffffa;z-index:400;flex-direction:column;justify-content:center;align-items:center;gap:20px}#validation-overlay.show{display:flex}#validation-text{font-size:32px;font-weight:600;color:#333}#validation-subtitle{font-size:14px;color:#888;margin-top:12px}#validation-status{font-size:16px;color:#4caf50;font-weight:500;margin-top:10px}#audio-setup-overlay{display:none;position:fixed;inset:50px 0 0;background:#ffffffeb;z-index:500;flex-direction:column;justify-content:center;align-items:center}#audio-setup-overlay.show{display:flex}#audio-setup-message{text-align:center;margin-bottom:40px}.flash-attention{animation:flashRed .5s ease-in-out infinite;box-shadow:0 0 8px #ff572299}@keyframes flashRed{0%,to{background-color:#ff5722;border-color:#e64a19;color:#fff}50%{background-color:#ffccbc;border-color:#ff5722;color:#bf360c}}#round-title-overlay{display:none;position:fixed;inset:0;background:#fffffffa;z-index:450;flex-direction:column;justify-content:center;align-items:center;gap:20px}#round-title-overlay.show{display:flex}#round-title-text{font-size:48px;font-weight:700;color:#333}#round-title-instructions{font-size:18px;color:#666;text-align:center;max-width:500px;line-height:1.5}#center-icon-container{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50}#center-icon-container.show{display:flex}#center-icon-circle{width:120px;height:120px;border-radius:50%;background:linear-gradient(145deg,#fff,#f0f0f0);border:4px solid #4285f4;box-shadow:0 8px 32px #4285f44d;display:flex;align-items:center;justify-content:center;font-size:56px;transition:all .3s ease}#center-icon-circle.correct{border-color:#4caf50;box-shadow:0 8px 32px #4caf5066;animation:iconPop .4s ease}#center-icon-circle.incorrect{border-color:#f44336;box-shadow:0 8px 32px #f4433666;animation:iconShake .4s ease}@keyframes iconPop{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes iconShake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}#round-theme{color:#4285f4;font-weight:500;margin-left:8px}#theme-toggle-btn{padding:6px 12px;font-size:14px;background:#f0f0f0;border:1px solid #ddd;border-radius:6px;cursor:pointer;margin-right:6px;white-space:nowrap}#theme-toggle-btn:hover{background:#e0e0e0}body.dark-mode{background:#1a1a2e}body.dark-mode #game-container{background:linear-gradient(180deg,#16213e,#0f3460)}body.dark-mode #top-bar{background:#1a1a2e;border-bottom-color:#2a2a4a}body.dark-mode #round-display,body.dark-mode #match-counter,body.dark-mode #round-timer,body.dark-mode #pause-btn,body.dark-mode #skip-round-btn,body.dark-mode #theme-toggle-btn{background:#2a2a4a;border-color:#3a3a5a;color:#c8c8e0}body.dark-mode #pause-btn:hover,body.dark-mode #skip-round-btn:hover,body.dark-mode #theme-toggle-btn:hover{background:#3a3a5a}body.dark-mode #voice-test-btn{background:#2a2a4a!important;border-color:#3a3a5a!important;color:#c8c8e0!important}body.dark-mode .emoji-card{background:#2a2a4a}body.dark-mode .word-card{background:#2a2a4a;color:#e0e0f0}body.dark-mode .word-card.selected,body.dark-mode .emoji-card.selected{border-color:#5a9cf5}body.dark-mode .phrase-card{background:linear-gradient(135deg,#1a2a4a,#0f1f3a);border-color:#4a7ac7;color:#8ab4f8}body.dark-mode .phrase-card.hit{background:linear-gradient(135deg,#3a2a00,#2a1f00);border-color:#c89000;color:#ffd080}body.dark-mode #progress-bar-container{background:#2a2a4a}body.dark-mode #pause-overlay{background:#0a0a1ed9}body.dark-mode #pause-text{color:#88a}body.dark-mode #round-complete-overlay{background:#0a0a1ef2}body.dark-mode #round-complete-text{color:#66bb6a}body.dark-mode #validation-overlay{background:#0a0a1efa}body.dark-mode #validation-text{color:#c8c8e0}body.dark-mode #validation-subtitle{color:#88a}body.dark-mode #audio-setup-overlay{background:#0a0a1eeb}body.dark-mode #audio-setup-message{color:#c8c8e0}body.dark-mode #round-title-overlay{background:#0a0a1efa}body.dark-mode #round-title-text{color:#c8c8e0}body.dark-mode #round-title-instructions{color:#88a}body.dark-mode #round-time-result{color:#88a!important}body.dark-mode #round-timer{color:#c8c8e0!important}body.dark-mode .emoji-card{border-color:transparent}body.dark-mode .emoji-card.incorrect,body.dark-mode .word-card.incorrect{background-color:#3a1111!important;border-color:#f44;color:#fff!important}body.dark-mode .emoji-card.show-word,body.dark-mode .color-disc.show-word{color:#fff!important}