*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1a1a2e;--bg-card: #22223a;--text: #e0e0e0;--text-muted: #666680;--text-untyped: #444460;--text-correct: #e0e0e0;--text-incorrect: #e74c3c;--text-extra: #e74c3c;--accent: #e2b714;--accent-hover: #c9a212;--border: #2a2a44;--shadow: 0 1px 3px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .4);--radius: 8px}html,body{height:100%;font-family:JetBrains Mono,monospace;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.menu{width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center;gap:2.5rem}.menu-title{font-size:1.5rem;font-weight:700;color:var(--accent);letter-spacing:-.5px}.duration-selector{display:flex;gap:.5rem}.duration-btn{font-family:inherit;font-size:.85rem;font-weight:700;padding:.5rem 1.25rem;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:transparent;color:var(--text-muted);transition:all .15s ease}.duration-btn.active{border-color:var(--accent);color:var(--accent);background:#e2b71414}.duration-btn:hover:not(.active){border-color:var(--text-muted);color:var(--text)}.start-btn{font-family:inherit;font-size:.9rem;font-weight:700;padding:.75rem 2.5rem;border:none;border-radius:var(--radius);cursor:pointer;background:var(--accent);color:var(--bg);transition:all .15s ease}.start-btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-lg)}.typing-screen{width:100%;max-width:800px;display:flex;flex-direction:column;gap:1.5rem;outline:none}.stats-bar{display:flex;gap:2rem;justify-content:center;font-size:.85rem;color:var(--text-muted)}.stats-bar .stat{display:flex;align-items:baseline;gap:.35rem}.stats-bar .stat-value{font-weight:700;font-size:1.1rem;color:var(--text)}.stats-bar .stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.5px}.text-display{font-size:1.25rem;line-height:2;letter-spacing:.5px;position:relative;max-height:200px;min-height:150px;overflow:hidden}.text-display .char{position:relative;transition:color .05s ease}.text-display .char.untyped{color:var(--text-untyped)}.text-display .char.correct{color:var(--text-correct)}.text-display .char.incorrect{color:var(--text-incorrect);text-decoration:underline;text-decoration-color:var(--text-incorrect);text-underline-offset:3px}.text-display .char.extra{color:var(--text-extra);opacity:.7}.text-display .char.cursor:before{content:"";position:absolute;left:0;top:0;width:2px;height:1.5em;background:var(--accent);animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.typing-hint{text-align:center;color:var(--text-muted);font-size:.75rem}.focus-overlay{position:fixed;inset:0;background:#1a1a2ee6;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}.focus-overlay span{font-size:1rem;color:var(--text-muted)}.result-screen{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:2rem}.result-wpm{text-align:center}.result-wpm .wpm-value{font-size:5rem;font-weight:700;color:var(--accent);line-height:1}.result-wpm .wpm-label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:.25rem}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%}.result-stat{text-align:center;padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.result-stat .value{font-size:1.5rem;font-weight:700;color:var(--text)}.result-stat .label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:.25rem}.result-actions{display:flex;gap:.75rem}.result-actions button{font-family:inherit;font-size:.85rem;font-weight:700;padding:.6rem 1.5rem;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--bg-card);color:var(--text);transition:all .15s ease}.result-actions button:hover{border-color:var(--accent);color:var(--accent)}.result-actions button.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.result-actions button.primary:hover{background:var(--accent-hover)}.menu-buttons{display:flex;gap:.75rem;align-items:center}.duel-btn{font-family:inherit;font-size:.9rem;font-weight:700;padding:.75rem 2rem;border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;background:transparent;color:var(--accent);transition:all .15s ease}.duel-btn:hover{background:#e2b7141f;box-shadow:var(--shadow-lg)}.lobby{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:2rem}.lobby-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;text-align:center}.lobby-link-section{width:100%}.lobby-link-row{display:flex;gap:.5rem}.lobby-link-input{flex:1;font-family:inherit;font-size:.8rem;padding:.6rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none}.lobby-link-input:focus{border-color:var(--accent)}.lobby-copy-btn{font-family:inherit;font-size:.8rem;font-weight:700;padding:.6rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);cursor:pointer;transition:all .15s ease;white-space:nowrap}.lobby-copy-btn:hover{border-color:var(--accent);color:var(--accent)}.lobby-duration-section{text-align:center}.lobby-status{font-size:.85rem;font-weight:700;padding:.5rem 1.25rem;border-radius:var(--radius)}.lobby-status.waiting{color:var(--text-muted)}.lobby-status.connected{color:#2ecc71}.lobby-waiting{font-size:.8rem;color:var(--text-muted)}.lobby-cancel-btn{font-family:inherit;font-size:.8rem;font-weight:700;padding:.5rem 1.25rem;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;transition:all .15s ease}.lobby-cancel-btn:hover{border-color:var(--text-muted);color:var(--text)}.countdown-overlay{position:fixed;inset:0;background:#1a1a2ef2;display:flex;align-items:center;justify-content:center;z-index:20}.countdown-number{font-size:6rem;font-weight:700;color:var(--text);opacity:0;transform:scale(.5)}.countdown-number.pop{animation:countPop .4s ease-out forwards}.countdown-number.go{color:var(--accent)}@keyframes countPop{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.opponent-progress{position:relative;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.opponent-progress-fill{height:100%;width:0%;background:var(--text-muted);border-radius:3px;transition:width .5s ease}.opponent-progress-label{position:absolute;right:0;top:-18px;font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.stat-separator{color:var(--border);font-size:1rem;display:flex;align-items:center}.mp-result-screen{width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center;gap:2rem}.mp-result-header{font-size:2rem;font-weight:700;color:var(--text);text-transform:lowercase}.mp-result-header.winner{color:var(--accent)}.mp-result-header.loser{color:var(--text-muted)}.mp-comparison{display:flex;gap:1.5rem;align-items:center;width:100%}.mp-vs{font-size:.85rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;flex-shrink:0}.mp-player-card{flex:1;text-align:center;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.mp-player-card.winner{border-color:var(--accent);box-shadow:0 0 20px #e2b71426}.mp-player-name{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem}.mp-player-wpm{font-size:3.5rem;font-weight:700;color:var(--text);line-height:1}.mp-player-card.winner .mp-player-wpm{color:var(--accent)}.mp-player-wpm-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:.25rem;margin-bottom:1rem}.mp-player-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.mp-mini-stat{display:flex;align-items:baseline;justify-content:center;gap:.25rem}.mp-mini-value{font-size:.85rem;font-weight:700;color:var(--text)}.mp-mini-label{font-size:.6rem;color:var(--text-muted);text-transform:uppercase}.mp-player-dc{font-size:.9rem;color:var(--text-incorrect);padding:2rem 0}