:root{--bg-dark:#0a0b0e;--bg-panel:#12141da6;--bg-panel-hover:#1a1d29cc;--border-color:#ffffff14;--border-focus:#8b5cf666;--primary:#8b5cf6;--primary-glow:#8b5cf640;--secondary:#06b6d4;--secondary-glow:#06b6d440;--success:#10b981;--error:#ef4444;--error-bg:#ef444426;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#4b5563;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;font-family:var(--font-sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text-primary);background-color:var(--bg-dark);margin:0;padding:0}body{background:radial-gradient(circle at 50% 0%, #1c133a 0%, var(--bg-dark) 70%);background-attachment:fixed;flex-direction:column;align-items:center;min-height:100vh;margin:0;display:flex;overflow-x:hidden}#root{box-sizing:border-box;flex-direction:column;justify-content:flex-start;width:100%;max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem 1rem;display:flex}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:16px;padding:2rem;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #0000005e}.glass-panel:hover{border-color:#ffffff1f}h1{background:linear-gradient(135deg,#a78bfa 0%,#22d3ee 100%);-webkit-text-fill-color:transparent;letter-spacing:-.05em;text-align:center;-webkit-background-clip:text;margin:0 0 .5rem;font-size:3rem;font-weight:800}h2{color:var(--text-primary);margin-top:0;font-size:1.75rem;font-weight:600}h3{margin:0 0 1rem;font-size:1.25rem;font-weight:500}p{color:var(--text-secondary);line-height:1.6}.input-group{flex-direction:column;gap:.5rem;width:100%;margin-bottom:1.5rem;display:flex}label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:500}input[type=text]{border:1px solid var(--border-color);color:var(--text-primary);font-size:1rem;font-family:var(--font-sans);background:#0003;border-radius:8px;padding:.75rem 1rem;transition:all .2s}input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);outline:none}.btn{font-family:var(--font-sans);cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);color:#fff;box-shadow:0 4px 14px 0 var(--primary-glow)}.btn-primary:hover:not(:disabled){box-shadow:0 6px 20px 0 var(--primary-glow);filter:brightness(1.1);transform:translateY(-2px)}.btn-secondary{background:linear-gradient(135deg, var(--secondary) 0%, #0891b2 100%);color:#fff;box-shadow:0 4px 14px 0 var(--secondary-glow)}.btn-secondary:hover:not(:disabled){box-shadow:0 6px 20px 0 var(--secondary-glow);filter:brightness(1.1);transform:translateY(-2px)}.btn-outline{border:1px solid var(--border-color);color:var(--text-primary);background:0 0}.btn-outline:hover:not(:disabled){border-color:var(--text-secondary);background:#ffffff0d}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.badge{text-transform:uppercase;border-radius:9999px;align-items:center;gap:.25rem;padding:.25rem .6rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-ready{color:var(--success);background:#10b98126;border:1px solid #10b9814d}.badge-waiting{color:#f59e0b;background:#f59e0b26;border:1px solid #f59e0b4d}.badge-host{color:#c084fc;background:#8b5cf626;border:1px solid #8b5cf64d}.typing-prompt-container{font-family:var(--font-mono);letter-spacing:.02em;border:1px solid var(--border-color);text-align:left;-webkit-user-select:none;user-select:none;background:#0000004d;border-radius:12px;outline:none;margin-bottom:2rem;padding:1.5rem;font-size:1.35rem;line-height:1.7;position:relative}.typing-prompt-container:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 1px var(--primary-glow)}.char{color:var(--text-muted);transition:color .1s;position:relative}.char-correct{color:var(--success)}.char-incorrect{color:var(--error);background-color:var(--error-bg);border-radius:2px}.char-current{color:var(--text-primary);border-bottom:2px solid var(--primary);animation:1s infinite blink}.char-current.char-incorrect{color:var(--error);border-bottom:2px solid var(--error)}@keyframes blink{50%{border-color:#0000}}.racetrack-container{border:1px solid var(--border-color);box-sizing:border-box;background:#00000040;border-radius:12px;flex-direction:column;gap:1.25rem;width:100%;margin-bottom:2rem;padding:1.5rem;display:flex}.race-lane{border-bottom:1px dashed #ffffff0d;align-items:center;height:48px;padding-bottom:.5rem;display:flex;position:relative}.race-lane:last-child{border-bottom:none;padding-bottom:0}.lane-player-info{white-space:nowrap;text-overflow:ellipsis;width:120px;min-width:120px;color:var(--text-primary);font-size:.9rem;font-weight:500;overflow:hidden}.lane-player-info.is-me{color:var(--secondary);font-weight:700}.lane-track{background:#ffffff05;border-radius:6px;flex-grow:1;height:28px;margin:0 1rem;position:relative}.lane-car{z-index:2;justify-content:center;align-items:center;gap:4px;transition:left .25s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;top:50%;transform:translateY(-50%)}.car-icon{width:24px;height:24px;color:var(--primary);filter:drop-shadow(0 0 4px var(--primary-glow));transition:transform .2s}.lane-car.is-me .car-icon{color:var(--secondary);filter:drop-shadow(0 0 6px var(--secondary-glow))}.car-label{color:#fff;white-space:nowrap;background:#000000bf;border:1px solid #ffffff1a;border-radius:4px;padding:2px 6px;font-size:.75rem}.lane-finish-line{opacity:.6;background:repeating-linear-gradient(45deg,#000,#000 4px,#fff 4px 8px);border-radius:0 6px 6px 0;width:8px;position:absolute;top:0;bottom:0;right:0}.chat-container{border:1px solid var(--border-color);background:#0003;border-radius:12px;flex-direction:column;height:300px;display:flex;overflow:hidden}.chat-messages{flex-direction:column;flex-grow:1;gap:.75rem;padding:1rem;display:flex;overflow-y:auto}.chat-msg{flex-direction:column;align-items:flex-start;font-size:.85rem;display:flex}.chat-msg-header{align-items:center;gap:.5rem;margin-bottom:2px;display:flex}.chat-msg-sender{color:#c084fc;font-weight:600}.chat-msg-time{color:var(--text-muted);font-size:.7rem}.chat-msg-text{color:var(--text-primary);word-break:break-word;background:#ffffff0a;border-radius:8px 12px 12px 8px;max-width:85%;padding:6px 10px}.chat-input-area{border-top:1px solid var(--border-color);display:flex}.chat-input{color:var(--text-primary);font-family:var(--font-sans);background:0 0;border:none;flex-grow:1;padding:.75rem 1rem}.chat-input:focus{outline:none}.chat-send-btn{color:var(--primary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0 1rem;display:flex}.chat-send-btn:hover{color:var(--secondary)}.stats-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;display:grid}.stat-card{border:1px solid var(--border-color);text-align:center;background:#ffffff08;border-radius:12px;padding:1rem}.stat-val{color:var(--secondary);font-size:2rem;font-weight:700}.stat-lbl{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em;margin-top:.25rem;font-size:.75rem}.podium-container{justify-content:center;align-items:flex-end;gap:1.5rem;height:220px;margin:2rem 0;display:flex}.podium-place{flex-direction:column;align-items:center;width:120px;transition:all .3s;display:flex}.podium-avatar{border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;margin-bottom:.5rem;font-size:1.25rem;font-weight:700;display:flex;box-shadow:0 0 12px #ffffff1a}.podium-bar{color:#000000bf;border-radius:8px 8px 0 0;justify-content:center;align-items:center;width:100%;font-size:1.5rem;font-weight:700;display:flex}.place-1{order:2}.place-2{order:1}.place-3{order:3}.place-1 .podium-bar{background:linear-gradient(#fbbf24,#d97706);height:140px;box-shadow:0 0 20px #fbbf244d}.place-1 .podium-avatar{color:#000;background:#fbbf24;border:2px solid #fff}.place-2 .podium-bar{background:linear-gradient(#9ca3af,#4b5563);height:100px;box-shadow:0 0 15px #9ca3af40}.place-2 .podium-avatar{color:#000;background:#9ca3af;border:2px solid #fff}.place-3 .podium-bar{background:linear-gradient(#b45309,#78350f);height:70px;box-shadow:0 0 10px #b4530933}.place-3 .podium-avatar{color:#fff;background:#b45309;border:2px solid #fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 20px #8b5cf640}50%{transform:scale(1.05);box-shadow:0 0 35px #8b5cf680}to{transform:scale(1);box-shadow:0 0 20px #8b5cf640}}@keyframes slideIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}header{animation:.5s ease-out slideIn}main{animation:.6s cubic-bezier(.16,1,.3,1) both slideIn}.pulse-glow{animation:2s ease-in-out infinite pulse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}