:root{--bg:#080814;--bg2:#0e0e1e;--bg3:#14142a;--surface:#ffffff0a;--border:#ffffff14;--primary:#6c63ff;--primary2:#a78bfa;--accent:#f472b6;--green:#34d399;--red:#f87171;--yellow:#fbbf24;--text:#e2e8f0;--dim:#94a3b8;--mute:#475569;--r:14px;--shadow:0 8px 32px #0009;--glow:0 0 24px #6c63ff73}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root,.app{background:var(--bg);height:100%;color:var(--text);font-family:Outfit,system-ui,sans-serif;overflow:hidden}.screen{width:100%;height:100%;animation:.25s both fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary2));color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:10px;padding:12px 28px;font-family:Outfit,sans-serif;font-size:15px;font-weight:700;transition:all .2s;box-shadow:0 4px 16px #6c63ff66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #6c63ff8c}.btn-primary:active{transform:translateY(0)}.btn-ghost{border:1px solid var(--border);color:var(--dim);cursor:pointer;background:0 0;border-radius:10px;padding:11px 24px;font-family:Outfit,sans-serif;font-size:14px;font-weight:600;transition:all .2s}.btn-ghost:hover{border-color:var(--primary2);color:var(--primary2);background:#a78bfa14}.btn-back{color:var(--dim);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:8px 0;font-family:Outfit,sans-serif;font-size:14px;transition:color .2s}.btn-back:hover{color:var(--primary2)}.menu-screen{flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.menu-bg{z-index:0;position:absolute;inset:0}.menu-bg canvas{width:100%;height:100%;display:block}.menu-content{z-index:1;scrollbar-width:none;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:640px;max-height:100%;padding:32px 28px;display:flex;position:relative;overflow-y:auto}.menu-content::-webkit-scrollbar{display:none}.logo{flex-direction:column;align-items:center;gap:10px;display:flex}.logo-icon svg{filter:drop-shadow(0 0 28px #6c63ffaa);width:88px;height:88px}.logo-title{letter-spacing:-2px;background:linear-gradient(135deg,#3bb9ff 0%,#6c63ff 60%,#a78bfa 100%);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(48px,8vw,80px);font-weight:900;line-height:1}.logo-title span{-webkit-text-fill-color:transparent}.logo-sub{letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);margin-top:2px;font-size:13px}.menu-modes{flex-direction:column;gap:10px;width:100%;display:flex}.mode-card{border:1px solid var(--border);border-radius:var(--r);cursor:pointer;text-align:left;color:var(--text);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff0d;align-items:center;gap:16px;width:100%;padding:16px 20px;font-family:Outfit,sans-serif;transition:all .22s;display:flex}.mode-card:hover{border-color:var(--primary);box-shadow:var(--glow);background:#6c63ff21;transform:translate(5px)}.mode-icon{flex-shrink:0;font-size:26px}.mode-info h2{font-size:16px;font-weight:700}.mode-info p{color:var(--dim);margin-top:2px;font-size:12px}.mode-arrow{color:var(--primary2);flex-shrink:0;margin-left:auto;font-size:20px;transition:transform .2s}.mode-card:hover .mode-arrow{transform:translate(4px)}.menu-footer{gap:12px;display:flex}.difficulty-screen{flex-direction:column;justify-content:center;align-items:center}.sub-wrap{flex-direction:column;gap:24px;width:100%;max-width:520px;padding:40px 24px;display:flex}.sub-title{background:linear-gradient(135deg, #fff, var(--primary2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:26px;font-weight:800}.diff-cards{flex-direction:column;gap:12px;display:flex}.diff-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;text-align:left;color:var(--text);flex-direction:column;gap:4px;padding:20px 24px;font-family:Outfit,sans-serif;transition:all .22s;display:flex}.diff-card:hover{transform:translate(6px)}.diff-card.easy:hover{border-color:var(--green);box-shadow:0 0 20px #34d3994d}.diff-card.medium:hover{border-color:var(--yellow);box-shadow:0 0 20px #fbbf244d}.diff-card.hard:hover{border-color:var(--red);box-shadow:0 0 20px #f871714d}.diff-tag{letter-spacing:2px;font-size:11px;font-weight:700}.diff-card.easy .diff-tag{color:var(--green)}.diff-card.medium .diff-tag{color:var(--yellow)}.diff-card.hard .diff-tag{color:var(--red)}.diff-wpm{font-size:22px;font-weight:800}.diff-desc{color:var(--dim);font-size:13px}.game-screen{flex-direction:column}.hud{border-bottom:1px solid var(--border);background:#080814f2;flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 20px;display:flex}.hud-group{align-items:center;gap:10px;display:flex}.hud-center{flex-direction:column;align-items:center;gap:2px;display:flex}.hud-label{letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);font-size:10px}.hud-val{color:var(--primary2);font-family:JetBrains Mono,monospace;font-size:22px;font-weight:700}.hud-mode{letter-spacing:2px;text-transform:uppercase;color:var(--dim);font-size:11px}.hud-lives{gap:4px;font-size:16px;display:flex}.btn-menu-hud{border:1px solid var(--border);color:var(--dim);cursor:pointer;white-space:nowrap;background:#ffffff0f;border-radius:8px;padding:5px 14px;font-family:Outfit,sans-serif;font-size:12px;font-weight:600;transition:all .2s}.btn-menu-hud:hover{border-color:var(--primary2);color:var(--primary2);background:#a78bfa1a}.canvas-wrap{background:linear-gradient(#07071a 0%,#0c0c20 100%);flex:1;min-height:0;position:relative;overflow:hidden}#game-canvas{width:100%;height:100%;display:block}.wave-banner{border:2px solid var(--primary);letter-spacing:4px;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--glow);pointer-events:none;background:#6c63ff26;border-radius:14px;padding:14px 40px;font-size:28px;font-weight:900;animation:.4s both wavePop;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.countdown-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20;pointer-events:none;background:#080814a6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.countdown-num{color:#fff;text-shadow:0 0 60px #6c63ffe6,0 0 120px #6c63ff80,0 0 200px #6c63ff4d;font-family:Outfit,sans-serif;font-size:clamp(120px,20vw,180px);font-weight:900;line-height:1;animation:.45s cubic-bezier(.175,.885,.32,1.275) both countPop;display:block}.countdown-go{color:#34d399;text-shadow:0 0 40px #34d399e6,0 0 80px #34d39980;font-size:clamp(70px,12vw,110px)}@keyframes countPop{0%{opacity:0;filter:blur(8px);transform:scale(1.8)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes wavePop{0%{opacity:0;transform:translate(-50%,-50%)scale(.7)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#080814e0;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay-box{background:var(--bg3);border:1px solid var(--border);text-align:center;min-width:320px;box-shadow:var(--shadow);border-radius:20px;padding:36px 48px;animation:.35s both fadeIn}.overlay-box h2{margin-bottom:20px;font-size:28px;font-weight:900}.stats-grid{flex-wrap:wrap;justify-content:center;gap:20px;margin-bottom:20px;display:flex}.stat-item{flex-direction:column;align-items:center;gap:4px;display:flex}.stat-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--dim);font-size:10px}.stat-val{color:var(--primary2);font-family:JetBrains Mono,monospace;font-size:26px;font-weight:700}.btn-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.typing-area{background:var(--bg2);border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:10px;min-height:180px;max-height:200px;padding:14px 20px 12px;display:flex}.para-display{color:var(--mute);word-break:break-word;scrollbar-width:thin;scrollbar-color:var(--primary) transparent;max-height:95px;font-family:JetBrains Mono,monospace;font-size:16px;line-height:1.85;overflow-y:auto}.para-display .ch{transition:color 40ms}.para-display .ch.ok{color:var(--green)}.para-display .ch.err{color:var(--red);-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.para-display .ch.cur{color:#fff;border-bottom:2px solid var(--primary2)}.typing-input{background:var(--bg3);border:1px solid var(--border);width:100%;color:var(--text);border-radius:10px;outline:none;padding:11px 16px;font-family:JetBrains Mono,monospace;font-size:17px;transition:border-color .2s,box-shadow .2s}.typing-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #6c63ff33}.typing-input::placeholder{color:var(--mute)}.typing-input:disabled{opacity:.4;cursor:not-allowed}.typing-meta{color:var(--mute);gap:20px;padding:0 4px;font-size:12px;display:flex}.versus-screen{flex-direction:column;justify-content:center;align-items:center;gap:0}.versus-lobby{flex-direction:column;align-items:center;gap:32px;width:100%;max-width:480px;padding:40px 24px;display:flex}.versus-lobby h2{font-size:26px;font-weight:800}.lobby-tabs{background:var(--bg3);border-radius:12px;gap:4px;width:100%;padding:4px;display:flex}.lobby-tab{cursor:pointer;color:var(--dim);background:0 0;border:none;border-radius:9px;flex:1;padding:10px;font-family:Outfit,sans-serif;font-size:14px;font-weight:700;transition:all .2s}.lobby-tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #6c63ff80}.lobby-panel{flex-direction:column;gap:14px;width:100%;display:flex}.lobby-panel p{color:var(--dim);font-size:14px}.room-code-box{background:#6c63ff1a;border:1px solid #6c63ff4d;border-radius:12px;flex-direction:column;align-items:center;gap:10px;padding:20px;display:flex}.room-code{color:var(--primary2);letter-spacing:8px;font-family:JetBrains Mono,monospace;font-size:40px;font-weight:700}.waiting-row{color:var(--dim);align-items:center;gap:8px;font-size:13px;display:flex}.pulse-dot{background:var(--primary2);border-radius:50%;width:8px;height:8px;animation:1.2s ease-in-out infinite pulse}.code-input{letter-spacing:8px;text-align:center;text-transform:uppercase;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:10px;outline:none;width:100%;padding:12px 16px;font-family:JetBrains Mono,monospace;font-size:26px;font-weight:700;transition:border-color .2s}.code-input:focus{border-color:var(--primary)}.status-msg{text-align:center;min-height:20px;font-size:13px}.status-msg.ok{color:var(--green)}.status-msg.err{color:var(--red)}.offline-badge{color:var(--yellow);text-align:center;background:#fbbf2414;border:1px solid #fbbf2440;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-size:12px;display:flex}.versus-game{flex-direction:column;overflow:hidden}.versus-hud{border-bottom:1px solid var(--border);background:#080814f2;flex-shrink:0;justify-content:space-between;align-items:center;height:48px;padding:0 20px;font-size:14px;display:flex}.v-hud-title{letter-spacing:2px;color:var(--accent);font-size:15px;font-weight:800}.v-wpm{color:var(--primary2);font-family:JetBrains Mono,monospace;font-size:16px;font-weight:700}.race-track{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(90deg,#08081a,#10102a,#08081a);flex-shrink:0;height:80px;position:relative}#versus-canvas{width:100%;height:100%}.v-panel{flex-direction:column;flex:1;gap:6px;min-height:0;padding:10px 20px;display:flex}.v-panel.opponent{background:#f472b60a;border-top:1px solid #f472b61f}.v-panel .para-display{max-height:60px;font-size:14px}.v-panel .typing-input{padding:8px 14px;font-size:15px}.v-label{letter-spacing:2px;text-transform:uppercase;font-size:10px;font-weight:700}.v-label.you{color:var(--primary2)}.v-label.opp{color:var(--accent)}.lb-screen{flex-direction:column;justify-content:center;align-items:center}.lb-wrap{flex-direction:column;gap:20px;width:100%;max-width:580px;padding:40px 24px;display:flex}.lb-tabs{gap:8px;display:flex}.lb-tab{background:var(--surface);border:1px solid var(--border);color:var(--dim);cursor:pointer;border-radius:8px;padding:8px 20px;font-family:Outfit,sans-serif;font-size:14px;font-weight:600;transition:all .2s}.lb-tab.active{border-color:var(--primary);color:var(--primary2);background:#6c63ff33}.lb-list{flex-direction:column;gap:8px;max-height:50vh;display:flex;overflow-y:auto}.lb-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;align-items:center;gap:14px;padding:12px 18px;display:flex}.lb-rank{min-width:32px;color:var(--mute);font-size:18px;font-weight:800}.lb-rank.gold{color:var(--yellow)}.lb-rank.silver{color:#94a3b8}.lb-rank.bronze{color:#b45309}.lb-name{flex:1;font-weight:600}.lb-score{color:var(--primary2);font-family:JetBrains Mono,monospace;font-weight:700}.lb-empty{color:var(--mute);text-align:center;padding:40px;font-size:15px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}@media (width<=600px){.overlay-box{min-width:unset;padding:20px 16px}.menu-content{gap:16px;padding:16px 14px}.logo-title{font-size:38px}.hud{padding:0 12px}.hud-val{font-size:18px}.typing-area{min-height:160px;padding:10px 14px}.typing-input{font-size:15px}.para-display{max-height:80px;font-size:14px}}@media (width>=768px){.menu-content{gap:28px;max-width:680px;padding:36px 32px}.typing-area{min-height:190px;max-height:220px;padding:16px 28px 14px}.para-display{max-height:105px;font-size:16px}.typing-input{font-size:17px}.sub-wrap{max-width:560px;padding:40px 32px}.lb-wrap{max-width:640px;padding:40px 32px}}@media (width>=1024px){.menu-content{gap:32px;max-width:820px;padding:40px}.logo-title{font-size:clamp(64px,6vw,96px)}.menu-modes{grid-template-columns:1fr 1fr;gap:12px;display:grid}.menu-modes .mode-card:last-child{grid-column:1/-1}.mode-card{padding:20px 24px}.mode-info h2{font-size:17px}.mode-info p{font-size:13px}.mode-icon{font-size:30px}.hud{height:58px;padding:0 28px}.hud-val{font-size:26px}.hud-label{font-size:11px}.hud-mode{letter-spacing:2.5px;font-size:12px}.typing-area{gap:14px;min-height:220px;max-height:260px;padding:18px 32px 16px}.para-display{max-height:130px;font-size:17px;line-height:1.9}.typing-input{padding:13px 20px;font-size:18px}.typing-meta{gap:24px;font-size:13px}.overlay-box{border-radius:24px;padding:44px 56px}.overlay-box h2{font-size:32px}.stat-val{font-size:30px}.sub-wrap{max-width:640px}.diff-card{padding:24px 28px}.diff-wpm{font-size:26px}.lb-wrap{max-width:720px;padding:48px 40px}.lb-list{max-height:55vh}.lb-row{border-radius:12px;padding:14px 22px}}@media (width>=1440px){.menu-content{gap:36px;max-width:960px}.logo-title{font-size:96px}.hud{height:64px}.hud-val{font-size:28px}.typing-area{min-height:240px;max-height:290px;padding:22px 40px 18px}.para-display{max-height:145px;font-size:18px}.typing-input{padding:14px 22px;font-size:19px}.overlay-box{padding:52px 72px}.sub-wrap{max-width:720px;padding:48px 40px}.lb-wrap{max-width:800px}}