*{margin:0;padding:0;box-sizing:border-box}
body{background:#111;overflow:hidden;touch-action:none;font-family:'Segoe UI',system-ui,sans-serif;user-select:none;display:flex;align-items:center;justify-content:center;height:100vh;color:#fff}
#game{text-align:center;width:100%;max-width:480px;padding:1rem}
#overlay{display:none;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#111;z-index:10}
#overlay.show{display:flex}
#overlay-inner{text-align:center}
#overlay h1{font-size:2.4rem;background:linear-gradient(135deg,#f0f,#0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}
#overlay p{color:#aaa;font-size:1.1rem;margin:.3rem 0}
#overlay .tap{color:#0ff;animation:pulse 1.5s infinite;margin-top:1rem}
#overlay .final{font-size:2rem;color:#fff;margin:.5rem 0}
.hud{display:flex;justify-content:space-between;margin-bottom:1.5rem;font-size:1.2rem;font-weight:700}
.hud .time{color:#f80}
.hud .score{color:#0f0}
.hud .streak{color:#f0f}
#word{font-size:3.5rem;font-weight:900;margin:2rem 0;min-height:4.5rem;transition:transform .15s,opacity .15s}
#word.correct{animation:pop .3s}
#word.wrong{animation:shake .3s}
#feedback{height:2rem;font-size:1.3rem;font-weight:700;margin-bottom:1rem}
.buttons{display:flex;gap:1rem;justify-content:center}
.buttons button{font-size:1.4rem;font-weight:700;padding:1rem 2.5rem;border:none;border-radius:12px;cursor:pointer;transition:transform .1s}
.buttons button:active{transform:scale(.93)}
#btnYes{background:#1a3a1a;color:#0f0;border:2px solid #0f0}
#btnNo{background:#3a1a1a;color:#f44;border:2px solid #f44}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-12px)}75%{transform:translateX(12px)}}