*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg1:#0f0c29;--bg2:#302b63;--bg3:#24243e;--surface:#ffffff0a;--surface-border:#ffffff14;--key-bg:#1c1b3a;--key-border:#2e2c5e;--key-text:#4a4880;--key-shadow:0 3px 0 #0e0d1f;--key-stage-bg:#261b4a;--key-stage-border:#f5a623;--key-stage-text:#f5d06a;--key-stage-glow:0 0 14px #f5a6238c, 0 3px 0 #140e20;--key-correct-bg:#0d3324;--key-correct-border:#3fb950;--key-correct-text:#4ecca3;--key-correct-glow:0 0 14px #4fcca399, 0 3px 0 #061910;--key-wrong-bg:#3d1212;--key-wrong-border:#f85149;--key-wrong-text:#ff7066;--key-wrong-glow:0 0 14px #f8514999, 0 3px 0 #1e0909;--letter-typed:#4ecca3;--letter-current:#f5d06a;--letter-pending:#3a385e;--accent:#a78bfa;--accent2:#f5a623;--text:#f0f0ff;--text-dim:#6b6a9e}html,body{height:100%}body{background:linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;font-family:Nunito,system-ui,sans-serif;display:flex}#app{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:820px;padding:16px;display:flex}.card{background:var(--surface);border:1px solid var(--surface-border);text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:20px;width:100%;padding:32px 40px}.menu-title{background:linear-gradient(135deg,#a78bfa,#f5a623);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:4px;font-size:3rem;font-weight:900;line-height:1.1}.menu-subtitle{color:var(--text-dim);margin-bottom:24px;font-size:1rem;font-weight:600}.stage-badge{color:var(--accent);letter-spacing:.05em;text-transform:uppercase;background:#a78bfa26;border:1px solid #a78bfa59;border-radius:100px;margin-bottom:20px;padding:4px 18px;font-size:.85rem;font-weight:700;display:inline-block}.new-keys-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-size:.75rem;font-weight:700}.new-keys{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px;display:flex}.new-key-chip{background:var(--key-stage-bg);border:2px solid var(--key-stage-border);color:var(--key-stage-text);text-transform:uppercase;border-radius:10px;padding:6px 14px;font-size:1.1rem;font-weight:900;box-shadow:0 0 12px #f5a62366}.word-count-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-size:.75rem;font-weight:700}.word-count-options{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:28px;display:flex}.word-count-btn{background:var(--key-bg);border:2px solid var(--key-border);color:var(--key-text);cursor:pointer;border-radius:12px;padding:10px 22px;font-family:inherit;font-size:1.1rem;font-weight:800;transition:all .15s}.word-count-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.word-count-btn.selected{border-color:var(--accent);color:var(--text);background:#a78bfa26;box-shadow:0 0 12px #a78bfa4d}.start-btn{color:#fff;cursor:pointer;letter-spacing:.05em;background:linear-gradient(135deg,#7c3aed,#a78bfa);border:none;border-radius:16px;padding:14px 48px;font-family:inherit;font-size:1.3rem;font-weight:900;transition:all .15s;box-shadow:0 4px 20px #7c3aed80}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 26px #7c3aeda6}.start-btn:active{transform:translateY(0)}.hud{align-items:center;gap:14px;width:100%;padding:0 4px;display:flex}.hud-stage{color:var(--accent);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-size:.8rem;font-weight:800}.hud-bar-wrap{background:#ffffff0f;border-radius:100px;flex:1;height:10px;overflow:hidden}.hud-bar{background:linear-gradient(90deg, var(--accent), var(--accent2));border-radius:100px;height:100%;transition:width .4s}.hud-count{color:var(--text-dim);white-space:nowrap;font-size:.8rem;font-weight:800}.word-display-wrap{justify-content:center;align-items:center;width:100%;min-height:100px;display:flex}.word-display{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.letter-box{border:2px solid var(--letter-pending);width:52px;height:64px;color:var(--letter-pending);text-transform:uppercase;background:#3a385e33;border-radius:12px;justify-content:center;align-items:center;font-size:1.9rem;font-weight:900;transition:all .15s;display:flex}.letter-box.typed{border-color:var(--letter-typed);color:var(--letter-typed);background:#4fcca31f}.letter-box.current{border-color:var(--letter-current);color:var(--letter-current);background:#f5d06a1f;animation:.9s ease-in-out infinite pulse-cursor}@keyframes pulse-cursor{0%,to{box-shadow:0 0 8px #f5d06a59}50%{box-shadow:0 0 20px #f5d06abf}}.word-display.word-exit{animation:.18s ease-in forwards word-exit}.word-display.word-enter{animation:.22s ease-out forwards word-enter}@keyframes word-exit{to{opacity:0;transform:translateY(-10px)scale(.95)}}@keyframes word-enter{0%{opacity:0;transform:translateY(10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.keyboard{flex-direction:column;align-items:center;gap:6px;width:100%;padding:20px 0 8px;display:flex}.keyboard-row{gap:5px;display:flex}.keyboard-row:nth-child(2){padding-left:26px}.keyboard-row:nth-child(3){padding-left:50px}.key{background:var(--key-bg);border:2px solid var(--key-border);width:46px;height:46px;box-shadow:var(--key-shadow);color:var(--key-text);text-transform:uppercase;border-radius:8px;justify-content:center;align-items:center;font-size:.95rem;font-weight:800;transition:background .1s,border-color .1s,color .1s,box-shadow .1s;display:flex}.key.stage{background:var(--key-stage-bg);border-color:var(--key-stage-border);color:var(--key-stage-text);box-shadow:var(--key-stage-glow)}.key.correct{animation:.25s key-bounce;background:var(--key-correct-bg)!important;border-color:var(--key-correct-border)!important;color:var(--key-correct-text)!important;box-shadow:var(--key-correct-glow)!important}.key.wrong{animation:.35s key-shake;background:var(--key-wrong-bg)!important;border-color:var(--key-wrong-border)!important;color:var(--key-wrong-text)!important;box-shadow:var(--key-wrong-glow)!important}@keyframes key-bounce{0%{transform:scale(1)}40%{transform:scale(.82)}to{transform:scale(1)}}@keyframes key-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.stage-complete{flex-direction:column;align-items:center;gap:20px;display:flex}.stars{justify-content:center;gap:8px;font-size:3rem;display:flex}.star{transition:all .3s}.star.on{filter:drop-shadow(0 0 8px #f5d06ab3);animation:.4s backwards star-pop}.star.off{filter:grayscale()opacity(.25)}@keyframes star-pop{0%{transform:scale(0)rotate(-20deg)}70%{transform:scale(1.35)rotate(6deg)}to{transform:scale(1)rotate(0)}}.complete-title{background:linear-gradient(135deg,#4ecca3,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:900}.complete-stats{justify-content:center;gap:40px;display:flex}.stat{text-align:center}.stat-value{color:var(--text);font-size:2.2rem;font-weight:900}.stat-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700}.complete-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.next-btn{color:#fff;cursor:pointer;letter-spacing:.05em;background:linear-gradient(135deg,#0d9f6e,#4ecca3);border:none;border-radius:16px;padding:14px 48px;font-family:inherit;font-size:1.2rem;font-weight:900;transition:all .15s;box-shadow:0 4px 20px #0d9f6e80}.next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 26px #0d9f6ea6}.replay-btn{border:2px solid var(--key-border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:12px;padding:12px 24px;font-family:inherit;font-size:1rem;font-weight:800;transition:all .15s}.replay-btn:hover{border-color:var(--accent);color:var(--accent)}.game-complete-title{background:linear-gradient(135deg,#f5a623,#f5d06a,#4ecca3,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:2.4rem;font-weight:900;line-height:1.2}.game-complete-sub{color:var(--text-dim);margin-bottom:24px;font-size:1rem;font-weight:600}.restart-btn{color:#fff;cursor:pointer;letter-spacing:.05em;background:linear-gradient(135deg,#7c3aed,#f5a623);border:none;border-radius:16px;padding:14px 48px;font-family:inherit;font-size:1.2rem;font-weight:900;transition:all .15s;box-shadow:0 4px 20px #7c3aed66}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 26px #7c3aed99}.confetti{pointer-events:none;z-index:9999;animation:linear forwards confetti-fall;position:fixed}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-20px)rotate(0)}80%{opacity:1}to{opacity:0;transform:translateY(110vh)rotate(800deg)}}.error-flash{pointer-events:none;z-index:500;background:#f8514912;animation:.35s forwards flash-out;position:fixed;inset:0}@keyframes flash-out{0%{opacity:1}to{opacity:0}}@media (width<=600px){.key{border-radius:6px;width:32px;height:38px;font-size:.72rem}.keyboard-row:nth-child(2){padding-left:18px}.keyboard-row:nth-child(3){padding-left:35px}.letter-box{width:38px;height:50px;font-size:1.45rem}.menu-title{font-size:2rem}.card{padding:24px 18px}.word-count-btn{padding:8px 14px;font-size:.95rem}.complete-stats{gap:24px}}