:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--arena-display: "Space Grotesk", var(--font-sans);--arena-highlight: var(--primary-light);--arena-action: var(--primary);--arena-on-action: #fff;--on-primary: #fff;--on-accent: #fff;--on-success: #fff;--on-error: #fff;--space-2xs: .125rem;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}[data-theme=neon]{--primary-hue: 270;--primary: hsl(var(--primary-hue), 70%, 55%);--primary-light: hsl(var(--primary-hue), 70%, 65%);--primary-dark: hsl(var(--primary-hue), 70%, 40%);--primary-rgb: 138, 43, 226;--accent-hue: 180;--accent: hsl(var(--accent-hue), 80%, 50%);--accent-light: hsl(var(--accent-hue), 80%, 60%);--success: hsl(145, 70%, 45%);--error: hsl(0, 70%, 55%);--warning: hsl(45, 90%, 50%);--bg-primary: hsl(240, 15%, 8%);--bg-secondary: hsl(240, 15%, 12%);--bg-card: hsl(240, 15%, 14%);--bg-elevated: hsl(240, 15%, 18%);--surface: hsl(240, 12%, 10%);--surface-variant: hsl(240, 10%, 14%);--text-primary: hsl(0, 0%, 95%);--text-secondary: hsl(0, 0%, 70%);--text-muted: hsl(0, 0%, 50%);--border: hsl(240, 15%, 22%);--border-light: hsl(240, 15%, 28%);--glass-bg: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));--glass-bg-solid: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .08);--glass-shadow: rgba(0, 0, 0, .4);--glass-blur: blur(16px);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .25);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .35);--shadow-glow: 0 0 20px rgba(var(--primary-rgb), .25);--shadow-glow-accent: 0 0 20px rgba(0, 255, 255, .15)}[data-theme=slate]{color-scheme:light;--primary-hue: 244;--primary: #3730a3;--primary-light: #3730a3;--primary-dark: #2d2788;--primary-rgb: 55, 48, 163;--on-primary: #fff;--arena-highlight: var(--primary);--arena-action: var(--primary);--arena-on-action: var(--on-primary);--accent-hue: 188;--accent: #075b67;--accent-light: #064c56;--success: #12613c;--error: #b42332;--warning: #805600;--bg-primary: #dce3ef;--bg-secondary: #c4cfdf;--bg-card: #fff;--bg-elevated: #fff;--surface: #fff;--surface-variant: #cbd5f3;--text-primary: #101c32;--text-secondary: #33445f;--text-muted: #445673;--border: #8293b0;--border-light: #63799b;--glass-bg: #fff;--glass-bg-solid: #fff;--glass-border: #8293b0;--glass-shadow: rgb(16 28 50 / .12);--glass-blur: none;--shadow-sm: 0 1px 3px rgb(16 28 50 / .08);--shadow-md: 0 4px 12px rgb(16 28 50 / .1);--shadow-lg: 0 8px 24px rgb(16 28 50 / .14);--shadow-glow: 0 0 0 transparent;--shadow-glow-accent: 0 0 0 transparent}[data-theme=midnight]{color-scheme:dark;--primary-hue: 190;--primary: #65d9ed;--primary-light: #83e6f4;--primary-dark: #49c3da;--primary-rgb: 101, 217, 237;--on-primary: #082330;--on-accent: #082330;--on-success: #082330;--on-error: #082330;--arena-highlight: var(--primary);--arena-action: var(--primary);--arena-on-action: var(--on-primary);--accent-hue: 252;--accent: #b2a0ff;--accent-light: #c8bcff;--success: #75d5b0;--error: #ff9da6;--warning: #f0ce7b;--bg-primary: #0a1220;--bg-secondary: #111e32;--bg-card: #111e32;--bg-elevated: #192a42;--surface: #111e32;--surface-variant: #183648;--text-primary: #eef4ff;--text-secondary: #b1bfd4;--text-muted: #91a3bd;--border: #2a3d56;--border-light: #486180;--glass-bg: #111e32;--glass-bg-solid: #111e32;--glass-border: #2a3d56;--glass-shadow: rgb(0 0 0 / .3);--glass-blur: none;--shadow-sm: 0 1px 3px rgb(0 0 0 / .2);--shadow-md: 0 4px 12px rgb(0 0 0 / .25);--shadow-lg: 0 8px 24px rgb(0 0 0 / .35);--shadow-glow: 0 0 20px rgb(101 217 237 / .12);--shadow-glow-accent: 0 0 20px rgb(178 160 255 / .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;scrollbar-gutter:stable}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 20%,hsla(var(--primary-hue),70%,30%,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,hsla(var(--accent-hue),70%,30%,.1) 0%,transparent 50%);pointer-events:none;z-index:-1}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--text-primary)}h1{font-size:2.5rem;background:linear-gradient(135deg,var(--primary-light),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--on-primary);box-shadow:var(--shadow-md),0 0 20px rgba(var(--primary-rgb),.2)}.btn-secondary{background:var(--glass-bg);color:var(--text-primary);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-accent{background:linear-gradient(135deg,var(--accent),hsl(195,80%,40%));color:var(--on-accent)}.btn-success{background:var(--success);color:var(--on-success)}.btn-danger{background:var(--error);color:var(--on-error)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:1.125rem}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:.875rem}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-normal)}.card-glass{background:var(--glass-bg-solid);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.card:hover{border-color:var(--border-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-compact{padding:var(--space-sm) var(--space-md)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.card-title{font-size:1.25rem;font-weight:600}.input-group{display:flex;flex-direction:column;gap:var(--space-xs)}.input-label{font-size:.875rem;font-weight:500;color:var(--text-secondary)}.input{padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:1rem;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2)}.page{flex:1;padding:0 0 var(--space-xl)}.grid{display:grid;gap:var(--space-lg)}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.avatar{width:56px;height:56px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--border)}.avatar-lg{width:96px;height:96px}.avatar-sm{width:44px;height:44px}.badge{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:600;border-radius:var(--radius-full);background:var(--glass-bg);border:1px solid var(--glass-border)}.badge-success{background:#22c36533;border-color:var(--success);color:var(--success)}.badge-warning{background:#f2b90d33;border-color:var(--warning);color:var(--warning)}.badge-primary{background:#8c3cdd33;border-color:var(--primary);color:var(--primary-light)}.timer{font-size:3rem;font-weight:700;font-family:var(--font-mono);color:var(--accent);text-shadow:0 0 20px rgba(0,255,255,.5)}.timer-warning{color:var(--warning);text-shadow:0 0 20px rgba(255,165,0,.5);animation:pulse .5s ease-in-out infinite}.timer-danger{color:var(--error);text-shadow:0 0 20px rgba(255,0,0,.5);animation:pulse .3s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.progress{height:8px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width var(--transition-normal)}.scoreboard{display:flex;flex-direction:column;gap:var(--space-sm)}.scoreboard-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md)}.scoreboard-item.current-user{border-color:var(--primary);background:rgba(var(--primary-rgb),.1)}.scoreboard-rank{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:700;border-radius:var(--radius-full);background:var(--bg-secondary)}.scoreboard-rank.first{background:gold;color:#000}.scoreboard-rank.second{background:silver;color:#000}.scoreboard-rank.third{background:#cd7f32;color:#fff}.scoreboard-score{margin-left:auto;font-weight:700;font-family:var(--font-mono);color:var(--accent)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.animate-fade-in{animation:fadeIn var(--transition-normal) ease-out}.animate-slide-up{animation:slideUp var(--transition-normal) ease-out}.animate-slide-in{animation:slideIn var(--transition-normal) ease-out}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.answer-btn{width:100%;padding:var(--space-md) var(--space-lg);text-align:left;font-size:1rem;background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast)}@media(hover:hover){.answer-btn:hover:not(:disabled){border-color:var(--primary);background:rgba(var(--primary-rgb),.1);transform:translate(5px)}}.answer-btn.selected{border-color:var(--primary);background:rgba(var(--primary-rgb),.2)}.answer-btn.correct{border-color:var(--success);background:#22c55e33}.answer-btn.incorrect{border-color:var(--error);background:#ef444433;animation:shake .3s ease-in-out}.answer-btn:disabled{cursor:not-allowed}@media(max-width:640px){h1{font-size:2rem}h2{font-size:1.5rem}.page{padding:var(--space-lg) 0}.btn-lg{padding:var(--space-sm) var(--space-lg)}}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-success{color:var(--success)}.text-error{color:var(--error)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.w-full{width:100%}.list-dense{gap:var(--space-xs)}.py-sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.px-md{padding-left:var(--space-md);padding-right:var(--space-md)}.header{background:var(--glass-bg-solid);border-bottom:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:0;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);position:sticky;top:0;z-index:100}.logo{display:flex;align-items:center;gap:var(--space-sm);font-size:1.5rem;font-weight:700;color:var(--text-primary);z-index:101}.logo-icon{width:40px;height:40px;border-radius:var(--radius-sm)}.logo-text{background:linear-gradient(135deg,var(--primary-light),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav{display:flex;gap:var(--space-lg)}.nav-link{color:var(--text-secondary);font-weight:500;transition:all var(--transition-fast)}.nav-link:hover{color:var(--text-primary);transform:translateY(-2px)}.nav-link.active{color:var(--primary-light);position:relative}.nav-link.active:after{content:"";position:absolute;bottom:-4px;left:0;width:100%;height:2px;background:var(--primary);box-shadow:0 0 8px var(--primary);border-radius:var(--radius-full)}.header-actions{display:flex;align-items:center;gap:var(--space-md);z-index:101}.user-menu{display:flex;align-items:center;gap:var(--space-sm)}.user-name{font-weight:500}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;font-size:.75rem;font-weight:700;line-height:1;color:var(--on-error);background:var(--error);border-radius:var(--radius-full);box-shadow:0 0 10px #ef444480;animation:bounceIn .3s cubic-bezier(.68,-.55,.265,1.55)}.nav-link .nav-badge{margin-left:var(--space-xs)}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.mobile-menu-btn{display:none;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;color:#fff;font-size:1.5rem;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast);box-shadow:0 0 15px rgba(var(--primary-rgb),.4)}.mobile-menu-btn:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(var(--primary-rgb),.6)}.mobile-nav{position:fixed;inset:0;background:var(--bg-primary);padding-top:80px;transform:translateY(-100%);transition:transform .3s ease-in-out,opacity .3s ease-in-out,visibility .3s ease-in-out;z-index:99;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;pointer-events:none}.mobile-nav.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.mobile-nav-links{display:flex;flex-direction:column;gap:var(--space-lg);text-align:center;width:100%;padding:var(--space-lg)}.mobile-nav-link{font-size:1.25rem;font-weight:600;color:var(--text-secondary);padding:var(--space-sm);border-radius:var(--radius-md);transition:all var(--transition-fast);text-decoration:none;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.mobile-nav-link:hover{color:var(--text-primary);background:var(--glass-bg);transform:translateY(-2px)}.mobile-nav-link.active{color:var(--primary-light);background:rgba(var(--primary-rgb),.15);border-left:4px solid var(--primary);padding-left:calc(var(--space-sm) - 4px)}.logout-link{background:transparent;border:1px solid var(--error);color:var(--error);margin-top:var(--space-lg);cursor:pointer;width:100%;max-width:200px;margin-left:auto;margin-right:auto}.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--glass-bg-solid);border-top:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);padding:var(--space-md) var(--space-sm);padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom));z-index:98;box-shadow:0 -4px 12px #0000004d}.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:var(--space-xs);color:var(--text-secondary);font-size:.75rem;font-weight:500;text-decoration:none;border-radius:var(--radius-md);transition:all var(--transition-fast);min-height:56px;position:relative}.bottom-nav-item:hover{color:var(--text-primary);background:var(--glass-bg)}.bottom-nav-item.active{color:var(--primary-light)}.bottom-nav-item.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:40px;height:3px;background:var(--primary);border-radius:0 0 var(--radius-full) var(--radius-full);box-shadow:0 0 8px var(--primary)}.bottom-nav-item svg{flex-shrink:0}.bottom-nav-item span{font-size:.688rem;line-height:1}.nav-link,.mobile-nav-link{display:flex;align-items:center;gap:var(--space-xs)}.nav-link svg,.mobile-nav-link svg{flex-shrink:0}@media(max-width:768px){.desktop-nav,.desktop-only{display:none!important}.user-name{display:none}.mobile-menu-btn,.bottom-nav{display:flex}.btn,.nav-link,.mobile-nav-link,.bottom-nav-item{min-height:44px;min-width:44px}}.supabase-auth-container{background:transparent!important}.supabase-auth-container input{background-color:#0f172a!important;border-color:#334155!important;color:#fff!important}.supabase-auth-container input:hover{border-color:#475569!important}.supabase-auth-container input:focus{border-color:#6366f1!important;box-shadow:0 0 0 3px #6366f133!important}.supabase-auth-container button[type=submit]{background:linear-gradient(135deg,#6366f1,#4f46e5)!important;border-color:#6366f1!important}.supabase-auth-container button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000059,0 0 30px #6366f14d!important}.supabase-auth-container a{color:#6366f1!important}.supabase-auth-container a:hover{color:#4f46e5!important}.profile-message{padding:var(--space-md);border-radius:var(--radius-md);text-align:center;font-weight:500}.profile-message.success{background:#22c36533;border:1px solid var(--success);color:var(--success)}.profile-message.error{background:#dd3c3c33;border:1px solid var(--error);color:var(--error)}.profile-avatar-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.avatar-preview{width:120px;height:120px;border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--primary);box-shadow:0 0 30px rgba(var(--primary-rgb),.4)}.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md)}@media(max-width:480px){.avatar-grid{grid-template-columns:repeat(3,1fr)}}.avatar-option{display:flex;min-width:0;align-items:center;justify-content:center;padding:var(--space-xs);background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.avatar-option img{width:80px;max-width:100%;height:auto;aspect-ratio:1;border-radius:var(--radius-full);object-fit:cover}.avatar-option:hover{border-color:var(--primary-light);transform:translateY(-2px)}.avatar-option.selected{border-color:var(--primary);background:rgba(var(--primary-rgb),.2);box-shadow:0 0 15px rgba(var(--primary-rgb),.3)}.profile-form{display:flex;flex-direction:column;gap:var(--space-md)}.stat-value{font-size:2rem;font-weight:700;font-family:var(--font-mono);color:var(--accent);text-shadow:0 0 10px rgba(0,255,255,.3)}.stat-label{font-size:.875rem;color:var(--text-secondary);margin-top:var(--space-xs)}.avatar-link{display:inline-flex;transition:transform var(--transition-fast)}.avatar-link:hover{transform:scale(1.1)}.avatar-link:hover .avatar{border-color:var(--primary);box-shadow:0 0 10px rgba(var(--primary-rgb),.4)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}.btn:focus-visible{outline:2px solid var(--primary-light);outline-offset:3px;box-shadow:0 0 0 4px rgba(var(--primary-rgb),.2)}.input:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.25)}.card:focus-visible,.answer-btn:focus-visible,.category-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.skip-link{position:absolute;top:-100px;left:0;background:var(--primary);color:var(--on-primary);padding:var(--space-sm) var(--space-md);z-index:1000;transition:top var(--transition-fast)}.skip-link:focus{top:0}.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:1rem;margin-bottom:var(--space-sm)}.skeleton-text-sm{height:.75rem;width:60%}.skeleton-avatar{width:48px;height:48px;border-radius:var(--radius-full)}.skeleton-card{height:120px;width:100%}.skeleton-btn{height:44px;width:120px}.skeleton-lobby{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}.toast-container{position:fixed;bottom:var(--space-lg);right:var(--space-lg);z-index:9999;display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none}.toast{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);pointer-events:auto;animation:slideInRight .3s ease-out,fadeOut .3s ease-in 4.7s forwards;max-width:400px}.toast-success{border-color:var(--success);background:linear-gradient(135deg,rgba(34,197,94,.1),var(--bg-card))}.toast-error{border-color:var(--error);background:linear-gradient(135deg,rgba(239,68,68,.1),var(--bg-card))}.toast-warning{border-color:var(--warning);background:linear-gradient(135deg,rgba(255,193,7,.1),var(--bg-card))}.toast-info{border-color:var(--accent);background:linear-gradient(135deg,rgba(0,255,255,.1),var(--bg-card))}.toast-icon{font-size:1.25rem;flex-shrink:0}.toast-message{flex:1;font-size:.9rem}.toast-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--space-xs);margin-left:auto;transition:color var(--transition-fast)}.toast-close:hover{color:var(--text-primary)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{to{opacity:0;transform:translate(50%)}}@media(max-width:480px){.toast-container{left:var(--space-sm);right:var(--space-sm);bottom:var(--space-sm)}.toast{max-width:100%}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-2xl);text-align:center;color:var(--text-secondary)}.empty-state-icon{font-size:4rem;margin-bottom:var(--space-lg);opacity:.5}.empty-state-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.empty-state-description{max-width:300px;color:var(--text-muted);margin-bottom:var(--space-lg)}.empty-state-action{margin-top:var(--space-md)}.answer-btn.correct{border-color:var(--success);background:#22c55e33;animation:correctPulse .5s ease-out}@keyframes correctPulse{0%{transform:scale(1);box-shadow:0 0 #22c55e66}50%{transform:scale(1.02);box-shadow:0 0 0 10px #22c55e00}to{transform:scale(1);box-shadow:0 0 #22c55e00}}.answer-btn.incorrect{border-color:var(--error);background:#ef444433;animation:incorrectShake .4s ease-in-out}@keyframes incorrectShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.score-popup{position:absolute;font-size:1.5rem;font-weight:700;font-family:var(--font-mono);color:var(--success);text-shadow:0 0 10px rgba(34,197,94,.5);animation:scoreFloat 1s ease-out forwards;pointer-events:none}@keyframes scoreFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(1.2)}}.spinner-sm{width:20px;height:20px;border-width:2px}.spinner-lg{width:60px;height:60px;border-width:4px}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:inherit;z-index:10}.text-muted-accessible{color:#999}@media(prefers-contrast:high){:root{--text-muted: hsl(0, 0%, 65%);--border: hsl(240, 15%, 35%)}.btn{border:2px solid currentColor}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.skeleton{animation:none;background:var(--bg-elevated)}}:is([data-theme=slate],[data-theme=midnight]) body:before{display:none}:is([data-theme=slate],[data-theme=midnight]) .page h1{background:none;-webkit-text-fill-color:currentColor;color:var(--primary)}:is([data-theme=slate],[data-theme=midnight]) .btn-primary{background:var(--primary);box-shadow:none}:is([data-theme=slate],[data-theme=midnight]) .avatar-preview{box-shadow:none}:is([data-theme=slate],[data-theme=midnight]) .avatar-option.selected{background:var(--surface-variant);box-shadow:none}:is([data-theme=slate],[data-theme=midnight]) .input{background:var(--bg-primary)}:is([data-theme=slate],[data-theme=midnight]) .btn-accent{background:var(--accent)}:is([data-theme=slate],[data-theme=midnight]) .status-text{color:var(--success)}:is([data-theme=slate],[data-theme=midnight]) .profile-stats .stat-value{color:var(--primary);text-shadow:none}.header.arena-header{background:var(--bg-primary);border-bottom:1px solid var(--border);backdrop-filter:none;-webkit-backdrop-filter:none}.header.arena-header>.container{width:calc(100% - 2 * var(--page-gutter));max-width:var(--layout-max);min-height:64px;padding:0;gap:20px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.header.arena-header .header-actions{justify-self:end;min-width:0}.header.arena-header .logo{font:700 20px/1.05 var(--arena-display);letter-spacing:-.7px;gap:9px;flex-shrink:0;white-space:nowrap}.header.arena-header .logo>svg,.header.arena-header .arena-logo-text>span{color:var(--arena-highlight)}.header.arena-header .arena-logo-text{color:var(--text-primary)}.header.arena-header .desktop-nav{align-self:center;align-items:center;gap:6px}.header.arena-header .desktop-nav .nav-link{font-size:14px;display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;gap:7px;font-weight:400;border-radius:8px;border:2px solid transparent;transition:background .15s,border-color .15s,color .15s}.header.arena-header .desktop-nav .nav-link>svg{flex-shrink:0}.header.arena-header .desktop-nav .nav-link>span[data-label]{display:inline-block}.header.arena-header .desktop-nav .nav-link>span[data-label]:before{content:attr(data-label);display:block;height:0;font-weight:600;visibility:hidden;pointer-events:none}.header.arena-header .desktop-nav .nav-link:hover{transform:none;color:var(--text-primary);background:var(--control-hover-bg);border-color:var(--control-hover-border)}.header.arena-header .desktop-nav .nav-link.active{color:var(--on-primary);background:var(--primary);font-weight:600;border-color:var(--primary)}.header.arena-header .desktop-nav .nav-link.active:hover{background:var(--primary-hover);border-color:var(--on-primary)}.header.arena-header .nav-link.active:after{display:none}.header.arena-header :is(a,button):focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.header.arena-header .user-menu{gap:9px;min-width:0}.header.arena-header .avatar-link{display:flex;flex-shrink:0;min-width:44px;min-height:44px;align-items:center;justify-content:center}.header.arena-header .avatar{width:33px;height:33px;border:0;box-shadow:none}.header.arena-header .user-name{font-size:13px;color:var(--text-secondary);max-width:125px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.header.arena-header .user-menu>button{padding:8px;min-height:44px;width:44px;background:transparent;border:0;box-shadow:none;color:var(--text-secondary)}.header.arena-header .user-menu>button:hover:not(:disabled){color:var(--text-primary);background:var(--control-hover-bg);box-shadow:inset 0 0 0 2px var(--control-hover-border)}.header.arena-header .user-name{padding:10px 8px;border-radius:8px}.header.arena-header .user-name.active{background:var(--primary);color:var(--on-primary);font-weight:600}.header.arena-header .user-name:hover{background:var(--control-hover-bg);color:var(--text-primary);box-shadow:inset 0 0 0 2px var(--control-hover-border);transform:none}.header.arena-header .header-actions>a{background:var(--arena-action);color:var(--arena-on-action);border-radius:9px;font-size:12px;box-shadow:none}.header.arena-header .mobile-menu-btn{display:none;background:transparent;color:var(--text-primary);border:0;box-shadow:none}.header.arena-header .mobile-menu-btn:hover{transform:none;background:var(--control-hover-bg);box-shadow:inset 0 0 0 2px var(--control-hover-border)}.header.arena-header .header-actions>a:hover{background:var(--primary-hover);color:var(--on-primary);border-color:var(--on-primary)}@media(min-width:769px)and (max-width:1100px){.header.arena-header>.container{grid-template-columns:auto minmax(0,1fr) auto;gap:16px}.header.arena-header .desktop-nav{justify-content:center;gap:4px}.header.arena-header .desktop-nav .nav-link{padding-inline:8px}.header.arena-header .desktop-nav .nav-link>svg{display:none}.header.arena-header .user-name{display:none}}@media(max-width:768px){.header.arena-header>.container{min-height:60px;gap:12px;display:flex}.header.arena-header .desktop-nav{display:none}.header.arena-header .mobile-menu-btn{display:inline-flex}.header.arena-header .logo{font-size:19px}.header.arena-header .avatar{width:30px;height:30px}.header.arena-header .user-name{display:none}.header.arena-header .header-actions{gap:8px}}@media(max-width:370px){.header.arena-header .logo{font-size:19px;gap:6px}.header.arena-header .header-actions>a{padding-inline:10px}}[data-theme=slate] .header.arena-header{--text-primary: #f4f7ff;--text-secondary: #c7d2e8;--border: #475a7a;--primary: #b8b4ff;--primary-hover: #dcd9ff;--on-primary: #14213b;--arena-highlight: #b8b4ff;--arena-action: #b8b4ff;--arena-on-action: #14213b;--focus-ring: #b8b4ff;--control-hover-bg: #354f74;--control-hover-border: #b8b4ff;--surface-variant: #263a59;background:#14213b;color:var(--text-primary)}:root{--arena-accent: var(--accent);--arena-error: color-mix(in srgb, var(--error) 60%, var(--text-primary))}[data-theme=slate]{--arena-error: var(--error);--arena-accent: color-mix(in srgb, var(--accent) 85%, black)}.home-arena{background:var(--bg-primary);color:var(--text-primary);font:16px/1.5 var(--font-sans)}.home-arena h1,.home-arena h2,.home-arena h3{font-family:var(--arena-display);color:var(--text-primary)}.home-arena h2{font-size:21px;line-height:1.25;letter-spacing:-.5px;font-weight:600}.home-arena h3{font-size:18px;line-height:1.25;letter-spacing:-.3px;font-weight:600}.home-arena p{margin:0}.home-arena button,.home-arena input,.home-arena select{font-family:inherit}.home-arena button,.arena-header button{cursor:pointer}.home-arena :is(button,a,input,select):focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.home-arena button:disabled{opacity:.55;cursor:not-allowed}.home-arena svg{flex-shrink:0}.home-arena .arena-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;font-weight:700;color:var(--arena-highlight)}.home-arena .arena-copy{color:var(--text-secondary);line-height:1.6;font-size:16px}.home-arena .arena-button{min-height:45px;border:1px solid var(--border);border-radius:9px;background:var(--bg-card);color:var(--text-primary);padding:10px 17px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;line-height:1.5;font-weight:400;text-decoration:none;transition:background .15s,border-color .15s}.home-arena .arena-button:hover:not(:disabled){background:var(--control-hover-bg);color:var(--text-primary);border-color:var(--control-hover-border);box-shadow:inset 0 0 0 1px var(--control-hover-border)}.home-arena .arena-primary{background:var(--arena-action);color:var(--arena-on-action);border-color:var(--arena-action)}.home-arena .arena-primary:hover:not(:disabled){background:var(--primary-hover);color:var(--arena-on-action);border-color:var(--arena-on-action);box-shadow:inset 0 0 0 1px var(--arena-on-action)}.home-arena .arena-quiet{background:transparent;border:0;padding:10px 0;color:var(--text-secondary);display:inline-flex;align-items:center;gap:8px;font-size:14px;min-height:44px;text-decoration:none}.home-arena .arena-quiet:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:4px;background:var(--control-hover-bg)}.home-arena .arena-section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.home-arena .arena-connection{font-size:11px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:6px}.home-arena .arena-connection.is-live{color:var(--arena-accent)}.home-arena .arena-connection.is-live:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.home-arena .arena-rooms{list-style:none;margin:0;padding:0}.home-arena .arena-room{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--border);padding:16px 0}.home-arena .arena-room img{width:37px;height:37px;border-radius:50%;object-fit:cover}.home-arena .arena-room-info{flex:1;min-width:0}.home-arena .arena-room h3{font:600 16px/1.4 var(--font-sans);overflow-wrap:anywhere}.home-arena .arena-room p{color:var(--text-secondary);font-size:13px;margin-top:4px;text-transform:capitalize}.home-arena .arena-room-count{color:var(--text-secondary);font-size:12px;display:flex;align-items:center;gap:5px;white-space:nowrap}.home-arena .arena-room-actions{display:flex;align-items:center;gap:4px}.home-arena .arena-room .arena-button{min-height:44px;padding:8px 12px;font-size:13px}.home-arena .arena-browse{margin-top:8px}.home-arena .arena-join-row{display:flex;gap:8px;align-items:stretch}.home-arena .arena-input{border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);min-height:44px;padding:10px 13px;border-radius:7px;min-width:0;width:100%;font-size:16px;line-height:1.5}.home-arena .arena-input::placeholder{color:var(--text-secondary);opacity:.8}.home-arena .arena-input[aria-invalid=true]{border-color:var(--arena-error)}.home-arena .arena-join-row .arena-button{padding-inline:13px;flex-shrink:0;font-weight:600}.home-arena .arena-error{font-size:12px;color:var(--arena-error);line-height:1.6;margin-top:12px}.home-arena .arena-icon-button{border:0;background:transparent;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;border-radius:8px;flex-shrink:0}.home-arena .arena-icon-button:hover:not(:disabled){color:var(--text-primary);background:var(--control-hover-bg);box-shadow:inset 0 0 0 2px var(--control-hover-border)}.home-arena .arena-modal{width:100%;max-width:480px;max-height:calc(100dvh - 48px);overflow-y:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--shadow-lg)}.home-arena .arena-modal-heading{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:25px}.home-arena .arena-modal-heading h2{margin-top:10px;font-size:25px}.home-arena .arena-modal-heading .arena-eyebrow{font-size:10px;line-height:1.6;letter-spacing:1.2px}.home-arena .arena-settings{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:20px;min-width:0}.home-arena .arena-settings label,.home-arena .arena-settings legend{font-size:13px;color:var(--text-secondary)}.home-arena .arena-settings .arena-input{display:block;margin-top:8px}.home-arena .arena-type-field{border:0;margin:0;padding:0}.home-arena .arena-radio-group{display:flex;gap:24px;padding-top:8px}.home-arena .arena-radio-group label{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--text-primary)}.home-arena .arena-settings input{accent-color:var(--arena-action)}.home-arena .arena-settings input[type=range]{display:block;width:100%;margin-top:12px}.home-arena .arena-settings output{float:right;font-weight:600;color:var(--text-primary)}.home-arena .arena-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}.home-arena .arena-mode-selection{display:grid;gap:12px}.home-arena .arena-mode-selection .arena-button{justify-content:space-between;padding-block:20px}.home-arena>.arena-container{display:grid;gap:28px;padding-block:36px 40px}.home-intro{min-width:0}.home-arena .home-intro h1{font-size:clamp(32px,3.4vw,48px);line-height:1.15;letter-spacing:-1.6px;margin:12px 0;background:none;-webkit-text-fill-color:currentColor}.home-arena .home-auth-note{font-size:14px;color:var(--text-secondary);margin-top:12px}.home-auth-note a{font-weight:600;text-decoration:underline;text-underline-offset:3px}.home-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}.home-mode{display:flex;flex-direction:column;gap:20px;padding:28px;border:1px solid var(--border-light);border-radius:12px;background:var(--bg-card);min-width:0}.home-mode-public{border-color:var(--arena-action);background:color-mix(in srgb,var(--arena-action) 6%,var(--bg-card))}.home-mode-heading{display:flex;align-items:center;gap:14px}.home-mode-heading>div{min-width:0}.home-mode-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0;color:var(--arena-highlight);border-radius:10px;background:var(--surface-variant)}.home-arena .home-mode-label{font-size:11px;font-weight:600;line-height:1.4;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:5px}.home-arena .home-mode h2{font-size:24px;line-height:1.2}.home-arena .home-mode>.arena-copy{font-size:15px;line-height:1.6}.home-arena .home-mode-action{width:100%;justify-content:space-between;min-height:50px;margin-top:auto;font-size:16px;font-weight:600;padding:12px 16px;border-color:var(--border-light);background:var(--surface-variant)}.home-arena .home-mode-action.arena-primary{background:var(--arena-action);border-color:var(--arena-action)}.home-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:20px 32px;align-items:center;padding:22px 0;border-block:1px solid var(--border)}.home-invite-heading{display:flex;gap:14px;align-items:center}.home-invite-heading>svg{color:var(--text-secondary)}.home-arena .home-invite h2{font-size:18px;margin-bottom:4px}.home-arena .home-invite .arena-copy{font-size:14px}.home-arena .arena-join{min-width:0}.home-arena .home-invite-label{display:block;margin-bottom:6px;font-size:13px;color:var(--text-secondary)}.home-arena .arena-join .arena-error{margin-top:8px}.home-arena .arena-join .arena-error:empty{display:none}.home-arena .arena-public{min-width:0}.home-arena .arena-empty{display:flex;justify-content:space-between;gap:16px 32px;align-items:center;padding:24px;background:var(--bg-card);border-radius:10px}.home-arena .arena-empty .arena-copy{max-width:65ch;margin:8px 0 0;font-size:14px}.home-arena .arena-empty>.arena-button{flex-shrink:0}@media(max-width:1100px){.home-mode{padding:20px;gap:16px}.home-arena .home-mode h2{font-size:21px}.home-mode-heading{gap:10px}.home-mode-icon{width:40px;height:40px}.home-arena .home-mode-action{font-size:14px;padding-inline:12px}}@media(max-width:800px){.home-modes{grid-template-columns:minmax(0,1fr);gap:12px}.home-mode{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:center}.home-mode-heading{grid-column:1}.home-arena .home-mode>.arena-copy{grid-column:1;font-size:14px}.home-arena .home-mode-action{grid-column:2;grid-row:1 / 3;margin:0;min-width:190px;gap:16px}.home-invite{grid-template-columns:1fr;gap:16px}.home-arena .arena-empty{flex-wrap:wrap;padding:20px}.home-arena .arena-room{flex-wrap:wrap}.home-arena .arena-room-actions{margin-left:auto}}@media(max-width:540px){.home-arena>.arena-container{padding-block:24px 32px;gap:24px}.home-arena .home-intro h1{font-size:32px;letter-spacing:-1px}.home-mode{grid-template-columns:minmax(0,1fr);padding:16px;gap:10px}.home-arena .home-mode>.arena-copy{font-size:14px}.home-arena .home-mode-action{grid-column:1;grid-row:auto;min-width:0;min-height:48px;font-size:16px}.home-mode-icon{width:32px;height:32px}.home-mode-icon svg{width:21px;height:21px}.home-arena .home-mode-label{display:none}.home-arena .home-mode h2{font-size:21px}.home-arena .arena-join-row .arena-button{gap:6px;padding-inline:12px}.home-arena .arena-join-row .arena-button svg{display:none}.home-arena .arena-modal{padding:22px}.home-arena .arena-modal-actions{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.home-arena *{transition:none!important}}:root{--layout-max:1440px;--page-gutter:40px;--bottom-nav-height:65px;--arena-display:"Space Grotesk",var(--font-sans);--radius-sm:4px;--radius-md:7px;--radius-lg:10px;--radius-xl:12px}[data-theme=neon]{color-scheme:dark;--bg-primary:#131019;--bg-secondary:#19141f;--bg-card:#211b2b;--bg-elevated:#31273f;--surface:#211b2b;--surface-variant:#35244e;--primary:#bc96ff;--primary-light:#c7a7ff;--primary-dark:#aa80ed;--primary-rgb:188,150,255;--accent:#b8e5d2;--accent-light:#d1f2e5;--text-primary:#f3f1fa;--text-secondary:#bdb2cc;--text-muted:#a99bb7;--border:#342b42;--border-light:#82728f;--success:#a4e1bc;--error:#ffa6af;--warning:#eed38c;--on-primary:#21122f;--on-accent:#17271f;--on-success:#17271f;--on-error:#38131c;--glass-bg:#211b2b;--glass-bg-solid:#211b2b;--glass-border:#342b42;--glass-blur:none;--shadow-glow:none;--shadow-glow-accent:none;--arena-highlight:var(--primary);--arena-action:var(--primary);--arena-on-action:var(--on-primary)}[data-theme=slate]{--control-hover-bg:#b7c5e8;--primary-hover:#211b75}[data-theme=neon]{--control-hover-bg:#4b3566;--primary-hover:#d6c1ff}[data-theme=midnight]{--control-hover-bg:#294c67;--primary-hover:#a6edfa}:root{--focus-ring:var(--primary);--control-hover-border:var(--primary)}body:before{display:none}body{line-height:1.5}html{scroll-padding-top:80px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;box-shadow:none}:where(h1,h2,h3,h4){font-family:var(--arena-display)}h1,.page h1,:is([data-theme=slate],[data-theme=midnight]) .page h1{color:var(--text-primary);background:none;-webkit-text-fill-color:currentColor}a{color:var(--primary-light)}a:hover{color:var(--text-primary)}.container,.arena-container{width:calc(100% - 2 * var(--page-gutter));max-width:var(--layout-max);margin-inline:auto;padding-inline:0;min-width:0}#root{min-height:100dvh}#main-content{flex:1;min-width:0}.page{padding:42px 0 48px}.page .page-title,.arena-page .page-title{font-size:clamp(32px,4vw,48px);letter-spacing:-1.4px;line-height:1.12;text-align:left;margin-bottom:12px}.page .page-subtitle,.arena-page .page-subtitle{text-align:left;font-size:16px;color:var(--text-secondary);margin-bottom:32px}.page-eyebrow{color:var(--primary-light);font:700 11px/1.5 var(--font-sans);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:14px}.btn{min-height:44px;padding:10px 17px;font-size:14px;font-weight:600;border-radius:7px;line-height:1.4;transition:background .15s,border-color .15s}.btn-primary{color:var(--on-primary);background:var(--primary);box-shadow:none;border:1px solid var(--primary)}.btn-primary:hover:not(:disabled){background:var(--primary-hover);color:var(--on-primary);border-color:var(--on-primary);transform:none;box-shadow:inset 0 0 0 1px var(--on-primary)}.btn-secondary,.btn-outline{color:var(--text-primary);background:transparent;border:1px solid var(--border-light);-webkit-backdrop-filter:none;backdrop-filter:none}.btn-secondary:hover:not(:disabled),.btn-outline:hover:not(:disabled),.btn-ghost:hover:not(:disabled),.btn-icon:hover:not(:disabled){background:var(--control-hover-bg);color:var(--text-primary);border-color:var(--control-hover-border);box-shadow:inset 0 0 0 1px var(--control-hover-border)}.btn-accent:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 70%,var(--text-primary));color:var(--on-accent);box-shadow:inset 0 0 0 2px var(--on-accent)}.btn-success:hover:not(:disabled){background:color-mix(in srgb,var(--success) 70%,var(--text-primary));color:var(--on-success);box-shadow:inset 0 0 0 2px var(--on-success)}.btn-danger:hover:not(:disabled){background:color-mix(in srgb,var(--error) 70%,var(--text-primary));color:var(--on-error);box-shadow:inset 0 0 0 2px var(--on-error)}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;box-shadow:none}.btn-accent{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-sm{min-height:36px;font-size:12px;padding:7px 12px}.btn-icon{min-height:44px;width:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-primary);background:transparent;border:0;flex-shrink:0}.btn-lg{padding:12px 20px;min-height:48px;font-size:15px}.card{box-shadow:none;background:var(--bg-card);border:1px solid var(--border);border-radius:10px}.card:hover{transform:none;box-shadow:none}.card-glass{-webkit-backdrop-filter:none;backdrop-filter:none}.input{min-height:44px;border-radius:7px;background:var(--bg-primary);font-size:16px;min-width:0;max-width:100%}.input::placeholder{color:var(--text-muted)}.input-label{font-size:14px}.badge{border-radius:4px;box-shadow:none}.badge-primary{background:var(--surface-variant);border-color:var(--border-light);color:var(--primary-light)}.avatar{flex-shrink:0}.text-muted,.empty-state-description{color:var(--text-muted)}.nav-badge{box-shadow:none}.arena-footer{background:var(--bg-primary);color:var(--text-secondary);padding:24px 0;font-size:12px}.arena-footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}.arena-footer p,.arena-footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0}.arena-footer a{color:inherit}.arena-footer a:hover{color:var(--text-primary);text-decoration:underline}.bottom-nav{background:var(--bg-primary);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.bottom-nav-item{min-height:48px;font-size:11px}.bottom-nav-item.active{color:var(--on-primary);background:var(--primary);font-weight:700;box-shadow:none}.bottom-nav-item:hover,.app-dialog .mobile-nav-link:hover{color:var(--text-primary);background:var(--control-hover-bg);box-shadow:inset 0 0 0 2px var(--control-hover-border)}.bottom-nav-item.active:hover,.app-dialog .mobile-nav-link.active:hover{color:var(--on-primary);background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--on-primary)}.bottom-nav-item.active:before{display:none}.app-dialog{margin:auto;padding:28px;max-width:min(480px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);overflow:auto;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-light);border-radius:12px;box-shadow:0 20px 80px #00000059}.app-dialog::backdrop{background:#000000b3}.app-dialog h2{font-size:26px;letter-spacing:-.7px}.app-dialog .modal-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.app-dialog .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px;flex-wrap:wrap}.app-dialog .form-group{margin-bottom:20px}.app-dialog .fieldset-reset{border:0;padding:0}.app-dialog .legend-block{margin-bottom:10px}.app-dialog .radio-group{display:flex;gap:24px}.app-dialog .radio-option{display:flex;align-items:center;gap:8px;min-height:44px}.app-dialog .input{width:100%;display:block;margin-top:8px}.app-dialog input[type=range]{width:100%;accent-color:var(--primary);min-height:32px}.app-dialog.mobile-nav{position:fixed;inset:0;transform:none;opacity:1;visibility:visible;pointer-events:auto;margin:0 0 0 auto;width:min(380px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:20px;border-radius:0;border:0;border-left:1px solid var(--border);background:var(--bg-primary)}.app-dialog.mobile-nav:not([open]){display:none}.mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:600}.app-dialog .mobile-nav-links{padding:20px 0;gap:6px}.app-dialog .mobile-nav-link{justify-content:flex-start;font-size:16px;min-height:48px;padding:12px;font-weight:500;border-radius:7px;border:0}.app-dialog .mobile-nav-link.active{background:var(--primary);color:var(--on-primary);font-weight:700;padding-left:12px}.app-dialog .logout-link{margin:16px 0 0;max-width:none;color:var(--error)}.page .lobby-filters{padding:18px 0;background:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;margin-bottom:24px;gap:18px}.page .lobby-filters .filter-label{font-size:12px}.page .lobby-filters .input-sm{font-size:14px;padding:8px 10px;min-width:0;min-height:44px}.page .lobby-filters .sort-order-btn{min-width:44px;min-height:44px}.page .lobby-filters :is(.filters-group,.sort-group){gap:10px;min-width:0}.page .lobby-header{margin-bottom:20px}.lobby-sign-in{display:grid;justify-items:start;gap:12px;max-width:720px}.lobby-sign-in h2{font-size:24px}.lobby-sign-in p{color:var(--text-secondary);margin:0}.page .lobby-title{font-size:21px}.page .lobby-grid{gap:16px}.page .lobby-card{background:none;border-radius:0;border:0;border-top:1px solid var(--border);padding:20px 0}.page .lobby-card .lobby-creator{gap:10px;min-width:0}.page .lobby-card .lobby-creator-name{font-size:16px;overflow-wrap:anywhere}.page .lobby-card .lobby-avatar{width:34px;height:34px;border-radius:50%}.page .lobby-card .lobby-info{max-width:none;margin:12px 0 16px;text-align:left}.page .lobby-card .lobby-label{font-size:12px;background:none;padding:0;text-transform:capitalize}.page .lobby-card .lobby-players{margin:0;font-size:12px}.page .lobby-card .lobby-actions{display:flex;gap:8px}.page .lobby-card .lobby-actions button{flex:1;min-height:40px;font-size:13px}.page .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}.page .join-form{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}.page .join-form .input{width:240px;flex:1;min-height:48px}.page .hero-actions .btn{min-height:48px}.page .join-form .btn{flex-shrink:0}.page :is(.ranking-name,.friend-name,.user-name,.league-name,.history-item){overflow-wrap:anywhere;min-width:0}.page :is(.table-container,.rankings-table-container){max-width:100%;overflow-x:auto}.page .empty-state{padding:32px 20px}.health-banner{position:relative!important;background:var(--bg-card)!important;border-bottom:1px solid var(--error);color:var(--text-primary)!important}.health-banner~.header{top:0!important}.health-banner .health-banner-text{font-size:14px}.health-banner .health-banner-retry{min-height:36px;background:var(--bg-card);color:var(--text-primary);border-color:var(--border-light)}.health-banner .health-banner-retry:hover:not(:disabled){background:var(--control-hover-bg);border-color:var(--control-hover-border);box-shadow:inset 0 0 0 1px var(--control-hover-border)}.page .tab:hover:not(:disabled){color:var(--text-primary);background:var(--control-hover-bg);box-shadow:inset 0 0 0 2px var(--control-hover-border)}.page .tab.active:hover:not(:disabled){color:var(--on-primary);background:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--on-primary)}.avatar-option:hover:not(:disabled),.toast-close:hover:not(:disabled){color:var(--text-primary);background:var(--control-hover-bg);border-color:var(--control-hover-border);box-shadow:inset 0 0 0 2px var(--control-hover-border)}@media(max-width:1100px){:root{--page-gutter:24px}}@media(max-width:768px){:root{--page-gutter:20px}#root:has(.bottom-nav){padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom))}html{scroll-padding-bottom:calc(var(--bottom-nav-height) + 16px)}.page{padding:28px 0 32px}.page .page-subtitle{font-size:14px}.page .hero-actions{flex-direction:column;align-items:stretch}.page .join-form .input,.page .join-form{width:100%}.page .lobby-grid{grid-template-columns:1fr}.page .lobby-filters .filters-group{display:grid;grid-template-columns:auto minmax(0,1fr)}.page .lobby-filters{align-items:stretch}.page .lobby-filters .sort-group{display:grid;grid-template-columns:auto minmax(0,1fr) 44px}.page .lobby-filters .input-sm{width:100%;font-size:16px}.page .lobby-filters .filter-label{min-width:58px}.app-dialog{padding:22px}.btn-sm{min-height:40px}}@media(max-width:370px){:root{--page-gutter:16px}.page .page-title{font-size:32px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}.app-dialog.arena-home-dialog{padding:0}.app-dialog.arena-home-dialog .arena-modal{max-height:none;border:0;border-radius:0;box-shadow:none}.page .lobby-info-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}.page .lobby-creator{display:flex;align-items:center}.page .lobby-card>.text-error{margin-top:12px;font-size:13px}.arena-page :is(.ranking-item,.friend-card,.league-card){box-shadow:none;border-radius:0;background:transparent;border-width:0 0 1px}.arena-page .ranking-item.rank-1{background:transparent;border-color:var(--border)}.arena-page .ranking-position{background:none;color:var(--text-muted)}.arena-page .stat-value{text-shadow:none}.arena-page .theme-selection h2,.arena-page .avatar-selection h2,.arena-page .profile-stats h2{font-size:18px}[data-theme=midnight]{--border-light:#607d9f}