:root{--bg:#0f1117;--surface:#1a1d27;--surface-raised:#22263a;--border:#2e3350;--text:#e8eaf6;--text-muted:#7986cb;--accent:#7c4dff;--accent-hover:#9c6eff;--green:#00e676;--red:#ff5252;--yellow:#ffea00;--orange:#ff6d00;--blue:#2979ff;--radius:12px;--font:"Segoe UI", system-ui, sans-serif;--min-touch:48px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100dvh;font-size:18px;line-height:1.5}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:999;background:var(--accent);color:#fff;border-radius:var(--radius);padding:.5rem 1rem;font-weight:600;text-decoration:none;position:absolute;top:0;left:-9999px}.skip-link:focus{top:.5rem;left:.5rem}button{cursor:pointer;font:inherit;border-radius:var(--radius);min-height:var(--min-touch);border:none;padding:.6rem 1.4rem;transition:background .15s,opacity .15s}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.6;cursor:not-allowed}.voice-nav-bar{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;padding:.4rem 0;display:flex}.voice-nav-toggle{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius);padding:.3rem .75rem;font-size:.82rem}.voice-nav-toggle--on{border-color:var(--accent);color:var(--accent);background:var(--surface-raised)}.voice-nav-toggle:hover:not(:disabled){border-color:var(--accent)}.voice-nav-hints{flex-wrap:wrap;gap:.35rem;display:flex}.voice-nav-hint{background:var(--surface-raised);border:1px solid var(--border);color:var(--text-muted);border-radius:9999px;padding:.15rem .6rem;font-size:.78rem}.speech-status{color:var(--text-muted);text-align:center;font-size:1rem;font-style:italic}.speech-transcript{color:var(--text-muted);text-align:center;font-size:.95rem}.app{max-width:640px;margin:0 auto;padding:1.5rem 1rem 3rem}.start-screen{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;padding-top:4rem;display:flex}.game-title{letter-spacing:-.02em;font-size:clamp(2rem,8vw,3rem);font-weight:800}.game-tagline{color:var(--text-muted);font-size:1.1rem}.start-btn{background:var(--accent);color:#fff;min-width:200px;padding:.8rem 2.4rem;font-size:1.2rem}.start-btn:hover:not(:disabled){background:var(--accent-hover)}.game-screen{flex-direction:column;gap:1.25rem;display:flex}.game-header{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.75rem;padding:1rem;display:flex}.game-stats{color:var(--text-muted);gap:1.5rem;font-size:.95rem;display:flex}.stat strong{color:var(--text);font-size:1.05rem}.hp-bars{flex-direction:column;gap:.5rem;display:flex}.hp-bar-wrapper{grid-template-columns:fit-content(8rem) 1fr 56px;align-items:center;gap:.5rem;display:grid}.hp-bar-label{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.hp-bar-numbers{text-align:right;color:var(--text-muted);font-size:.8rem}.hp-bar-track{background:var(--surface-raised);border-radius:9999px;height:12px;overflow:hidden}.hp-bar-fill{border-radius:9999px;height:100%;transition:width .3s}.hp-bar--player{background:var(--blue)}.hp-bar--enemy{background:var(--orange)}.game-main{flex-direction:column;gap:1rem;display:flex}.emoji-display{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:1.5rem 1rem}.enemy-info{color:var(--text-muted);justify-content:center;gap:1rem;margin-bottom:.75rem;font-size:.85rem;display:flex}.enemy-name{color:var(--red);font-weight:600}.emoji-target{-webkit-user-select:none;user-select:none;font-size:clamp(4rem,18vw,7rem);line-height:1.1}.emoji-hint{color:var(--text-muted);margin-top:.5rem;font-size:.9rem}.timer{align-items:center;gap:.75rem;display:flex}.timer-track{background:var(--surface-raised);border-radius:9999px;flex:1;height:8px;overflow:hidden}.timer-fill{background:var(--accent);border-radius:9999px;height:100%;transition:width .1s linear,background .3s}.timer--urgent .timer-fill{background:var(--orange)}.timer-label{color:var(--text-muted);text-align:right;min-width:36px;font-size:.9rem}.timer--urgent .timer-label{color:var(--orange);font-weight:700}.feedback-message{background:var(--surface);border-left:4px solid var(--border);border-radius:0 var(--radius) var(--radius) 0;padding:.75rem 1rem}.feedback--correct,.feedback--enemy_defeated{border-color:var(--green)}.feedback--wrong{border-color:var(--red)}.feedback--timeout{border-color:var(--orange)}.feedback--player_hit{border-color:var(--red)}.feedback-text{font-size:1rem}.feedback-damage{color:var(--text-muted);margin-top:.25rem;font-size:.85rem}.feedback-damage.dealt{color:var(--green)}.feedback-damage.taken{color:var(--red)}.attempts-remaining{justify-content:center;gap:.4rem;display:flex}.attempt-dot{color:var(--accent);font-size:.9rem}.classroom-code-form{flex-direction:column;align-items:stretch;gap:.75rem;width:100%;max-width:320px;display:flex}.classroom-code-label{color:var(--text-muted);text-align:center;font-size:1rem}.mode-selector{width:100%}.mode-selector-prompt{text-align:center;color:var(--text-muted);margin-bottom:1rem;font-size:1rem}.mode-cards{gap:.75rem;display:flex}.mode-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);color:var(--text);text-align:center;flex-direction:column;flex:1;align-items:center;gap:.3rem;min-height:140px;padding:1.25rem .75rem;transition:border-color .15s,background .15s;display:flex}.mode-card:hover:not(:disabled){border-color:var(--accent);background:var(--surface-raised)}.mode-icon{font-size:2rem}.mode-label{font-size:1.1rem;font-weight:700}.mode-desc{color:var(--text-muted);font-size:.82rem;line-height:1.3}.mode-detail{color:var(--text-muted);opacity:.7;font-size:.75rem;line-height:1.3}.mode-badge{color:var(--accent);margin-left:auto;font-size:.8rem}.say-input{flex-direction:column;gap:.75rem;display:flex}.mode-fallback-link{color:var(--text-muted);opacity:.7;background:0 0;border:none;padding:.25rem .5rem;font-size:.82rem;text-decoration:underline}.mode-fallback-link:hover:not(:disabled){opacity:1}.speech-unavailable{color:var(--text-muted);text-align:center;font-size:.85rem}.word-input-form{gap:.5rem;display:flex}.word-input{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);color:var(--text);min-height:var(--min-touch);flex:1;padding:.6rem 1rem;font-size:1.3rem;transition:border-color .15s}.word-input:focus{border-color:var(--accent);outline:none}.word-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.word-input::placeholder{color:var(--text-muted)}.submit-btn{background:var(--accent);color:#fff;white-space:nowrap;padding:.6rem 1.4rem;font-size:1rem}.submit-btn:hover:not(:disabled){background:var(--accent-hover)}.speech-idle{flex-direction:column;align-items:center;gap:.75rem;display:flex}.stop-btn{background:var(--red);color:#fff;font-size:1.1rem}.speech-error{color:var(--red);align-items:center;gap:.5rem;font-size:.9rem;display:flex}.game-over{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 1rem;display:flex}.game-over-title{color:var(--red);font-size:clamp(2rem,8vw,3rem);font-weight:800}.game-won-title{color:var(--yellow)}.game-over-stats{color:var(--text-muted);font-size:1.1rem}.restart-btn{background:var(--accent);color:#fff;min-width:200px;padding:.8rem 2.4rem;font-size:1.2rem}.restart-btn:hover:not(:disabled){background:var(--accent-hover)}.error-msg{color:var(--red);text-align:center;border:1px solid var(--red);border-radius:var(--radius);background:#ff525214;padding:.5rem;font-size:.9rem}.repeat-msg-btn{border:1px solid var(--border);color:var(--text-muted);opacity:.6;background:0 0;border-radius:9999px;margin:0 auto;padding:.25rem .75rem;font-size:.8rem;display:block}.repeat-msg-btn:hover:not(:disabled){opacity:1;border-color:var(--accent)}@media (width<=480px){.mode-cards{flex-direction:column}.mode-card{text-align:left;flex-direction:row;gap:.75rem;min-height:auto;padding:1rem}.mode-icon{flex-shrink:0;font-size:1.75rem}}@media (width<=400px){body{font-size:16px}.emoji-target{font-size:4.5rem}.word-input{font-size:1.1rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}