:root{--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);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--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;--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);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}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(270,70%,30%,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,hsla(180,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:#fff;box-shadow:var(--shadow-md),0 0 20px #8a2be233}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 30px #8a2be24d}.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-secondary:hover:not(:disabled){background:#ffffff1a;border-color:var(--primary)}.btn-accent{background:linear-gradient(135deg,var(--accent),hsl(195,80%,40%));color:#fff}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--error);color:#fff}.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 #8a2be233}.input::placeholder{color:var(--text-muted)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-md)}.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:#8a2be21a}.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)}.answer-btn:hover:not(:disabled){border-color:var(--primary);background:#8a2be21a;transform:translate(5px)}.answer-btn.selected{border-color:var(--primary);background:#8a2be233}.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}.container{padding:0 var(--space-sm)}.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;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:color var(--transition-fast)}.nav-link:hover{color:var(--text-primary)}.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;margin-left:var(--space-xs);font-size:.75rem;font-weight:700;line-height:1;color:#fff;background:var(--error);border-radius:var(--radius-full);box-shadow:0 0 10px #ef444480;animation:bounceIn .3s cubic-bezier(.68,-.55,.265,1.55)}@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 #8a2be266}.mobile-menu-btn:hover{transform:scale(1.05);box-shadow:0 0 20px #8a2be299}.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}.mobile-nav-link:hover{color:var(--text-primary);background:var(--glass-bg)}.mobile-nav-link.active{color:var(--primary-light);background:#8a2be226;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}@media(max-width:768px){.desktop-nav,.desktop-only{display:none!important}.user-name{display:none}.mobile-menu-btn{display:flex}}.profile-page{max-width:600px;margin:0 auto}.profile-page h1{margin-bottom:var(--space-lg)}.profile-content{display:flex;flex-direction:column;gap:var(--space-xl)}.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 #8a2be266}.avatar-selection h3{margin-bottom:var(--space-md);text-align:center}.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;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;height:80px;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:#8a2be233;box-shadow:0 0 15px #8a2be24d}.profile-form{display:flex;flex-direction:column;gap:var(--space-md)}.profile-stats h3{margin-bottom:var(--space-md);text-align:center}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg);text-align:center}.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 #8a2be266}: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 #8a2be233}.input:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #8a2be240}.card:focus-visible,.answer-btn:focus-visible,.category-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.skip-link{position:absolute;top:-40px;left:0;background:var(--primary);color:#fff;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)}}