*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f0f1a;--surface: #1a1a2e;--surface2: #16213e;--accent: #e94560;--accent2: #0f3460;--text: #eaeaea;--text2: #a0a0b0;--green: #4ade80;--red: #f87171;--yellow: #fbbf24;--radius: 16px;--shadow: 0 4px 24px rgba(0,0,0,.4)}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none}.app{height:100%;display:flex;flex-direction:column}button{cursor:pointer;border:none;font-family:inherit}.menu{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;gap:1.5rem;background:radial-gradient(ellipse at top,#1a1a3e 0%,var(--bg) 70%)}.menu-header{text-align:center}.menu-header h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:800;background:linear-gradient(135deg,#e94560,#a78bfa,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px}.menu-header p{color:var(--text2);font-size:1.1rem;margin-top:.5rem}.mode-cards{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:440px}.mode-card{background:var(--surface);border:1.5px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;text-align:left;transition:transform .15s,border-color .15s,box-shadow .15s;position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--card-color, #e94560) 0%,transparent 60%);opacity:.08;transition:opacity .2s}.mode-card:hover{transform:translateY(-2px);border-color:#ffffff26;box-shadow:var(--shadow)}.mode-card:hover:before{opacity:.14}.mode-card:active{transform:scale(.98)}.mode-icon{font-size:2.4rem;flex-shrink:0;line-height:1}.mode-card h2{font-size:1.1rem;font-weight:700;color:var(--text)}.mode-card p{font-size:.85rem;color:var(--text2);margin-top:2px}.mode-score{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--yellow);background:#fbbf241f;padding:3px 10px;border-radius:20px;flex-shrink:0}.menu-tip{color:var(--text2);font-size:.9rem;margin-top:.5rem}.recent-scores{width:100%;max-width:440px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:.8rem .9rem}.recent-scores h3{font-size:.82rem;letter-spacing:.6px;text-transform:uppercase;color:var(--text2);margin-bottom:.5rem}.recent-scores ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}.recent-scores li{display:flex;justify-content:space-between;align-items:center;background:#ffffff08;border-radius:8px;padding:.35rem .5rem;font-size:.86rem}.recent-scores strong{color:var(--yellow)}.recent-empty{color:var(--text2);font-size:.85rem}.game-screen{height:100%;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden}.hud{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--surface);border-bottom:1px solid rgba(255,255,255,.05);z-index:20;flex-shrink:0}.hud-lives{display:flex;gap:4px;font-size:1.3rem}.life-gone{opacity:.2;filter:grayscale(1)}.hud-score{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.streak-badge{font-size:.9rem;font-weight:700;background:#fbbf2426;color:var(--yellow);padding:4px 12px;border-radius:20px;border:1px solid rgba(251,191,36,.3)}.hud-menu-btn{background:transparent;color:var(--text2);font-size:.8rem;padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.hud-menu-btn:hover{background:#ffffff0d}.game-area{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,#0a0a1a,#0f0f2a);min-height:0}.game-area:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,transparent,transparent 120px,rgba(255,255,255,.012) 120px,rgba(255,255,255,.012) 121px);pointer-events:none}@keyframes drift{0%{transform:translate(115vw) translateY(-50%)}to{transform:translate(-30vw) translateY(-50%)}}@keyframes bob{0%,to{margin-top:0}50%{margin-top:-8px}}@keyframes correctPop{0%{transform:translate(var(--cx)) translateY(-50%) scale(1)}50%{transform:translate(var(--cx)) translateY(-100%) scale(1.4);opacity:1}to{transform:translate(var(--cx)) translateY(-200%) scale(.5);opacity:0}}@keyframes wrongShake{0%,to{transform:translate(var(--cx)) translateY(-50%)}20%{transform:translate(calc(var(--cx) + 10px)) translateY(-50%)}40%{transform:translate(calc(var(--cx) - 10px)) translateY(-50%)}60%{transform:translate(calc(var(--cx) + 6px)) translateY(-50%)}80%{transform:translate(calc(var(--cx) - 6px)) translateY(-50%)}}.floater{position:absolute;top:var(--top, 40%);left:0;width:max-content;animation:drift var(--speed, 8s) linear forwards;display:flex;flex-direction:column;align-items:center;gap:4px;will-change:transform;cursor:default}.floater.paused{animation-play-state:paused}.floater-bubble{background:var(--surface);border:1.5px solid rgba(255,255,255,.1);border-radius:20px;padding:1rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 8px 32px #00000080;animation:bob 2s ease-in-out infinite;min-width:110px}.floater-emoji{font-size:clamp(2.5rem,8vw,4rem);line-height:1}.floater-subtext{font-size:.7rem;color:var(--text2);text-align:center;max-width:120px;font-weight:500;letter-spacing:.5px}.floater.state-correct .floater-bubble{border-color:var(--green);box-shadow:0 0 20px #4ade804d;animation:none}.floater.state-wrong .floater-bubble{border-color:var(--red);box-shadow:0 0 20px #f871714d;animation:none}.floater.state-missed .floater-bubble{border-color:var(--red);opacity:.4;animation:none}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.feedback-banner{position:absolute;top:1rem;left:50%;transform:translate(-50%);padding:.6rem 1.5rem;border-radius:30px;font-weight:700;font-size:1.1rem;z-index:30;animation:slideDown .2s ease;white-space:nowrap}.feedback-banner.correct{background:#4ade8033;border:1.5px solid var(--green);color:var(--green)}.feedback-banner.wrong,.feedback-banner.missed{background:#f8717133;border:1.5px solid var(--red);color:var(--red)}.choices-section{flex-shrink:0;padding:.75rem;background:var(--surface);border-top:1px solid rgba(255,255,255,.05)}.choices-label{text-align:center;font-size:.72rem;color:var(--text2);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:560px;margin:0 auto}.choice-btn{background:var(--surface2);color:var(--text);border:1.5px solid rgba(255,255,255,.07);border-radius:12px;padding:.7rem .5rem;font-size:clamp(.75rem,2.5vw,.92rem);font-weight:600;transition:transform .1s,border-color .1s,background .1s;text-align:center;line-height:1.3;min-height:52px;display:flex;align-items:center;justify-content:center}.choice-btn:not(:disabled):hover{transform:scale(1.03);border-color:#fff3;background:#1e2040}.choice-btn:not(:disabled):active{transform:scale(.97)}.choice-btn:disabled{cursor:default}.choice-btn.correct{background:#4ade8026;border-color:var(--green);color:var(--green)}.choice-btn.wrong{background:#f8717126;border-color:var(--red);color:var(--red)}.voice-bar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.5rem 1rem;background:var(--surface);border-top:1px solid rgba(255,255,255,.04);font-size:.82rem;color:var(--text2);min-height:38px}@keyframes pulse-ring{0%{box-shadow:0 0 #e9456066}70%{box-shadow:0 0 0 10px #e9456000}to{box-shadow:0 0 #e9456000}}.mic-dot{width:10px;height:10px;border-radius:50%;background:var(--text2);flex-shrink:0}.mic-dot.active{background:var(--accent);animation:pulse-ring 1.2s ease-out infinite}.voice-preview{font-style:italic;color:var(--yellow);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voice-unavailable{font-size:.75rem;color:var(--text2);text-align:center}.gameover{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a1a3e 0%,var(--bg) 70%);padding:1.5rem}.gameover-card{background:var(--surface);border:1.5px solid rgba(255,255,255,.08);border-radius:24px;padding:2.5rem 2rem;text-align:center;width:100%;max-width:360px;box-shadow:var(--shadow)}.gameover-emoji{font-size:4rem;line-height:1;margin-bottom:.5rem}.gameover-card h1{font-size:1.8rem;font-weight:800;margin-bottom:1.5rem}.final-score-wrap{margin:1rem 0}.final-score{font-size:4rem;font-weight:900;background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.final-score-label{color:var(--text2);font-size:.9rem;margin-top:4px}.new-record{display:inline-block;background:#fbbf2426;color:var(--yellow);border:1px solid rgba(251,191,36,.3);border-radius:20px;padding:4px 16px;font-size:.85rem;font-weight:700;margin:.75rem 0}.best-score{color:var(--text2);font-size:.9rem;margin-bottom:1.5rem}.gameover-actions{display:flex;flex-direction:column;gap:.6rem}.btn-primary{background:linear-gradient(135deg,var(--accent),#c0392b);color:#fff;border-radius:12px;padding:.85rem;font-size:1rem;font-weight:700;transition:opacity .15s,transform .15s;border:none}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-secondary{background:var(--surface2);color:var(--text);border:1.5px solid rgba(255,255,255,.1);border-radius:12px;padding:.75rem;font-size:.95rem;font-weight:600;transition:background .15s}.btn-secondary:hover{background:#1e2040}@media (min-width: 640px){.choices-grid{grid-template-columns:repeat(4,1fr)}.mode-cards{flex-direction:row;max-width:720px}.mode-card{flex-direction:column;text-align:center;flex:1}.mode-score{margin-left:0;margin-top:.5rem}}