.trivia-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:20px;overflow-y:auto}.menu-content{text-align:center;max-width:600px;width:100%}.menu-content h1{font-size:48px;margin-bottom:8px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.subtitle{font-size:18px;opacity:.9;margin-bottom:32px}.settings-section{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;margin-bottom:32px}.settings-section h3{font-size:20px;margin-bottom:20px;color:gold}.setting-group{margin-bottom:24px}.setting-group:last-child{margin-bottom:0}.setting-group label{display:block;font-size:14px;font-weight:700;margin-bottom:12px;opacity:.8;text-align:left}.button-group{display:flex;gap:8px;flex-wrap:wrap}.option-btn{flex:1;min-width:100px;padding:12px 16px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}.option-btn:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px)}.option-btn.active{background:#667eea;border-color:#667eea;box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.game-info{display:flex;gap:16px;margin-bottom:32px;flex-wrap:wrap;justify-content:center}.info-card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:16px 24px;display:flex;flex-direction:column;gap:8px;min-width:150px}.info-card .label{font-size:12px;opacity:.8;text-transform:uppercase;letter-spacing:1px}.info-card .value{font-size:20px;font-weight:700;text-transform:capitalize}.start-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;padding:16px 48px;font-size:20px;font-weight:700;color:#fff;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #0000004d;margin-bottom:16px}.start-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px #0006}.start-button:active{transform:translateY(0)}.lobby-content{text-align:center;max-width:800px;width:100%}.lobby-info{display:flex;gap:12px;justify-content:center;margin-bottom:32px;flex-wrap:wrap}.info-badge{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:8px 16px;font-size:14px;font-weight:700;text-transform:capitalize}.lobby-settings{background:#ffffff0d;border:2px solid rgba(102,126,234,.3);border-radius:16px;padding:20px;margin-bottom:24px}.lobby-settings h3{font-size:18px;margin-bottom:16px;color:gold;text-align:center}.lobby-settings .setting-group{margin-bottom:16px}.lobby-settings .setting-group:last-child{margin-bottom:0}.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}.player-card{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;transition:all .3s;animation:slideIn .3s ease-out}.player-card:hover{transform:translateY(-4px);border-color:#667eea;box-shadow:0 8px 20px #667eea4d}.player-avatar{width:80px;height:80px;border-radius:50%;border:3px solid rgba(255,255,255,.3);background:#ffffff0d}.player-info{text-align:center}.player-name{font-size:16px;font-weight:700;margin-bottom:4px}.player-score{font-size:14px;opacity:.8;color:gold}.you-badge{position:absolute;top:8px;right:8px;background:#667eea;color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:1px}.lobby-events{background:#0000004d;border-radius:12px;padding:16px;margin-bottom:24px;max-height:150px;overflow-y:auto;text-align:left}.event-message{padding:8px;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}.event-message:last-child{border-bottom:none}.event-time{color:gold;font-weight:700;margin-right:8px}.waiting-message{background:#ffffff1a;border-radius:12px;padding:20px;font-size:18px;font-weight:700;color:gold;animation:pulse 2s ease-in-out infinite}.participants,.leaderboard-preview{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:20px;margin-bottom:20px;text-align:left}.participants h3,.leaderboard-preview h3{margin-bottom:12px;font-size:18px}.participant-list{display:flex;flex-wrap:wrap;gap:8px}.participant{background:#ffffff1a;padding:8px 12px;border-radius:8px;font-size:14px}.leaderboard-entry{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.leaderboard-entry:last-child{border-bottom:none}.rank{font-weight:700;width:40px}.trivia-container.playing{position:relative;padding-left:280px}.game-participants-sidebar{position:fixed;left:0;top:80px;bottom:0;width:260px;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid rgba(255,255,255,.2);padding:16px;overflow-y:auto;z-index:50}.participants-section{margin-bottom:24px}.participants-section h4{font-size:14px;font-weight:700;color:gold;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.participants-section.spectators h4{color:#aaa}.participant-list{display:flex;flex-direction:column;gap:8px}.participant-item{display:flex;align-items:center;gap:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;position:relative;transition:all .2s}.participant-item:hover{background:#ffffff1a;border-color:#fff3}.participant-item.spectator{opacity:.7;border-style:dashed}.participant-avatar{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:#ffffff0d}.participant-info{flex:1;min-width:0}.participant-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.participant-score{font-size:11px;color:gold;font-weight:700}.you-indicator{position:absolute;top:4px;right:4px;background:#667eea;color:#fff;padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.5px}.game-header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;flex-wrap:wrap}.progress,.score,.timer{font-size:18px;font-weight:700}.end-game-btn{background:#ff4d4d33;border:2px solid rgba(255,77,77,.5);color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s;white-space:nowrap}.end-game-btn:hover:not(:disabled){background:#ff4d4d66;border-color:#ff4d4dcc;transform:translateY(-2px)}.end-game-btn.voted{background:#64c86433;border-color:#64c86480;cursor:default}.end-game-btn:disabled{opacity:.6;cursor:not-allowed}.question-container{max-width:800px;width:100%;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:40px;margin-top:80px}.question-container h2{font-size:28px;margin-bottom:32px;line-height:1.4}.hints{margin-bottom:24px}.hint{background:#ffffff1a;padding:16px;border-radius:8px;margin-bottom:12px;text-align:left;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.hint-number{font-weight:700;color:gold}.hint-button{background:#ffd70033;border:2px solid #ffd700;color:gold;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;margin-bottom:24px}.hint-button:hover{background:#ffd7004d;transform:scale(1.05)}.points-preview{background:#667eea33;border:2px solid #667eea;border-radius:12px;padding:16px;margin-bottom:20px;font-size:20px;font-weight:700;color:#fff;animation:pulse 2s ease-in-out infinite}.bonus-indicator{color:gold;font-size:16px;animation:sparkle 1s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes sparkle{0%,to{opacity:1}50%{opacity:.6}}.wrong-guesses{background:#f443;border:2px solid #ff4444;border-radius:8px;padding:12px;margin-bottom:16px;color:#faa;font-size:14px;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.answer-input{display:flex;gap:12px;margin-top:24px}.autocomplete-container{position:relative}.input-wrapper{position:relative;flex:1}.answer-input input{flex:1;width:100%;padding:16px;font-size:18px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#fff;outline:none;transition:all .2s}.answer-input input:focus{border-color:#667eea;background:#ffffff26}.answer-input input::placeholder{color:#ffffff80;font-size:14px}.answer-input input.autocomplete-active{border-color:#ffd70066;box-shadow:0 0 10px #ffd70033}.autocomplete-locked-indicator,.autocomplete-enabled-indicator{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px;pointer-events:none;animation:pulse 2s ease-in-out infinite}.autocomplete-locked-indicator{opacity:.6}.autocomplete-enabled-indicator{animation:sparkle 1.5s ease-in-out infinite}@keyframes sparkle{0%,to{opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.2)}}.autocomplete-suggestions{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#141428fa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(102,126,234,.5);border-radius:8px;max-height:320px;overflow-y:auto;z-index:1000;box-shadow:0 8px 24px #00000080}.suggestion-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.1);transition:all .2s;font-size:16px}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.selected{background:#667eea4d;color:gold}.suggestion-item.selected{border-left:4px solid #667eea;padding-left:12px}.answer-input button{padding:16px 32px;background:#667eea;border:none;border-radius:8px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s}.answer-input button:hover{background:#5a5fcf;transform:scale(1.05)}.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px}.choice-button{padding:20px;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:12px;color:#fff;font-size:18px;cursor:pointer;transition:all .2s;text-align:left}.choice-button:hover:not(:disabled){background:#fff3;border-color:#667eea;transform:translateY(-2px)}.choice-button:disabled{opacity:.5;cursor:not-allowed}.result{margin-top:32px;padding:24px;border-radius:12px;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.result.correct{background:#57f28733;border:2px solid #57F287}.result.wrong{background:#ed424533;border:2px solid #ED4245}.result h3{margin-bottom:12px;font-size:24px}.result p{margin:8px 0;font-size:16px}.result .explanation{opacity:.9;font-style:italic}.results-content{max-width:600px;width:100%;text-align:center}.results-content h1{font-size:48px;margin-bottom:32px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.final-score{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;padding:40px;margin-bottom:32px;box-shadow:0 8px 24px #0000004d}.score-label{font-size:16px;opacity:.9;text-transform:uppercase;letter-spacing:2px;margin-bottom:16px}.score-value{font-size:72px;font-weight:700;line-height:1;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.score-subtitle{font-size:20px;opacity:.9;margin-top:8px}.stats{display:flex;gap:16px;margin-bottom:32px}.stat{flex:1;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px}.stat-label{font-size:14px;opacity:.8;text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:32px;font-weight:700}.play-again-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;padding:16px 48px;font-size:20px;font-weight:700;color:#fff;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #0000004d;margin-bottom:32px;width:100%}.play-again-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0006}.final-leaderboard{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:24px;text-align:left}.final-leaderboard h3{margin-bottom:16px;text-align:center;font-size:24px}@media (max-width: 768px){.choices{grid-template-columns:1fr}.game-info,.stats{flex-direction:column}.question-container{padding:24px;margin-top:100px}.game-header{flex-wrap:wrap;gap:8px}.trivia-container.playing{padding-left:0}.game-participants-sidebar{transform:translate(-260px);transition:transform .3s}.game-participants-sidebar.visible{transform:translate(0)}}:root{--primary: #5865F2;--secondary: #EB459E;--success: #57F287;--danger: #ED4245;--background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-bg: rgba(255, 255, 255, .1);--card-border: rgba(255, 255, 255, .2)}.app{width:100vw;height:100vh;background:var(--background);display:flex;justify-content:center;align-items:center}.loading-screen,.error-screen{text-align:center;padding:40px}.loading-spinner{font-size:64px;animation:bounce 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.error-screen button{margin-top:20px;padding:12px 24px;background:var(--primary);border:none;border-radius:8px;color:#fff;font-size:16px;cursor:pointer;transition:all .2s}.error-screen button:hover{transform:scale(1.05);box-shadow:0 4px 12px #0000004d}