:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}button{font-family:inherit}*{box-sizing:border-box;margin:0;padding:0}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem}.avatar-select{width:100%;max-width:600px;margin:0 auto}.avatar-card{background:#fff;border-radius:24px;padding:3rem;box-shadow:0 20px 60px #0000004d}.avatar-card .header{text-align:center;margin-bottom:2rem}.avatar-card .header h1{font-size:2rem;margin:1rem 0 .5rem;color:#333}.avatar-card .header p{color:#666;font-size:1.1rem}.sparkles{color:#667eea;margin:0 auto}.input-group{margin-bottom:2rem}.input-group label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:600;color:#333;font-size:1rem}.input-group input{width:100%;padding:1rem;border:2px solid #e0e0e0;border-radius:12px;font-size:1rem;transition:border-color .3s}.input-group input:focus{outline:none;border-color:#667eea}.avatar-grid-section label{display:block;margin-bottom:1rem;font-weight:600;color:#333;font-size:1rem}.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.75rem;margin-bottom:2rem}.avatar-option{aspect-ratio:1;border:3px solid #e0e0e0;border-radius:12px;background:#f5f5f5;font-size:1.8rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.avatar-option:hover{border-color:#667eea;background:#f0f0ff}.avatar-option.selected{border-color:#667eea;background:#e6e9ff;box-shadow:0 4px 12px #667eea4d}.error{color:#ef4444;text-align:center;margin-bottom:1rem;font-size:.9rem}.btn-primary{width:100%;padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .2s}.btn-primary:hover{transform:translateY(-2px)}.game-lobby{width:100%;max-width:1200px;margin:0 auto}.lobby-container{background:#fff;border-radius:24px;padding:2rem;box-shadow:0 20px 60px #0000004d;min-height:80vh}.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e0e0e0}.lobby-header h1{font-size:2rem;color:#333}.player-info{display:flex;align-items:center;gap:.75rem;background:#f5f5f5;padding:.75rem 1.5rem;border-radius:50px}.player-info .avatar{font-size:1.5rem}.player-info .name{font-weight:600;color:#333}.host-indicator{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;padding:.4rem 1rem;border-radius:50px;font-size:.85rem;font-weight:600;margin-left:.5rem}.host-notice{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:2px solid #3b82f6;color:#1e40af;padding:1rem 1.5rem;border-radius:12px;margin-bottom:2rem;text-align:center;font-weight:600;font-size:1rem}.host-notice.warning{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b;color:#92400e;display:flex;align-items:center;justify-content:center;gap:1rem}.btn-assign-host{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .2s;font-size:.95rem}.btn-assign-host:hover{transform:scale(1.05)}.players-section{margin-bottom:3rem}.players-section h2{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:#333;font-size:1.3rem}.players-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.player-card{background:linear-gradient(135deg,#667eea15,#764ba215);padding:1rem;border-radius:12px;display:flex;align-items:center;gap:.75rem;border:2px solid transparent;transition:border-color .3s}.player-card:hover{border-color:#667eea}.player-card .avatar{font-size:2rem}.player-card .name{font-weight:600;color:#333;flex:1}.player-card .badge{background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:50px;font-size:.8rem;font-weight:600}.player-card .badge.host{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}.player-card .score{font-weight:700;color:#667eea;font-size:.95rem;margin-left:auto}.scores-actions{margin:1.5rem 0;display:flex;justify-content:center}.btn-reset-scores{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 12px #ef44444d;transition:all .3s}.btn-reset-scores:hover{box-shadow:0 6px 16px #ef444466;transform:translateY(-2px)}.games-section h2{margin-bottom:1.5rem;color:#333;font-size:1.5rem}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.game-card{background:#fff;border:3px solid #e0e0e0;border-radius:16px;padding:2rem;text-align:center;transition:all .3s;position:relative}.game-card:hover:not(.disabled){border-color:#667eea;box-shadow:0 8px 24px #667eea33}.game-card.disabled{opacity:.5;cursor:not-allowed}.game-icon{font-size:3rem;margin-bottom:1rem}.game-card h3{color:#333;margin-bottom:.5rem;font-size:1.3rem}.game-card p{color:#666;margin-bottom:1.5rem;font-size:.95rem}.game-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:2px solid #f0f0f0}.min-players{color:#666;font-size:.9rem}.btn-play{display:flex;align-items:center;gap:.5rem;padding:.5rem 1.25rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:transform .2s}.btn-play:hover{transform:scale(1.05)}.waiting-host{color:#667eea;font-size:.9rem;font-weight:600;font-style:italic}.not-enough-players{position:absolute;top:0;left:0;right:0;background:#fef3c7;color:#92400e;padding:.5rem;border-radius:16px 16px 0 0;font-size:.85rem;font-weight:600}.game-container{width:100%;max-width:900px;margin:0 auto;background:#fff;border-radius:24px;padding:2rem;box-shadow:0 20px 60px #0000004d}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e0e0e0}.game-header h2{font-size:1.8rem;color:#333}.question-progress{background:#f5f5f5;padding:.5rem 1rem;border-radius:50px;font-weight:600;color:#666}.btn-quit{background:#ef4444;color:#fff;border:none;padding:.5rem;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px #ef444433}.btn-quit:hover{background:#dc2626;box-shadow:0 4px 12px #ef44444d}.btn-skip{width:100%;background:#f59e0b;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #f59e0b4d}.btn-skip:hover{background:#d97706;box-shadow:0 6px 16px #f59e0b66;transform:translateY(-2px)}.question-card{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:16px;border:2px solid #e0e0e0}.question{font-size:1.5rem;color:#333;margin-bottom:2rem;line-height:1.5}.options{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.option{width:100%;padding:1.25rem;background:#fff;border:3px solid #e0e0e0;border-radius:12px;font-size:1rem;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center;text-align:left}.option:hover:not(:disabled){border-color:#667eea;background:#f8f9ff}.option.selected{border-color:#667eea;background:#e6e9ff}.option.correct{border-color:#10b981;background:#d1fae5}.option.wrong{border-color:#ef4444;background:#fee2e2}.option:disabled{cursor:not-allowed}.icon-correct{color:#10b981}.icon-wrong{color:#ef4444}.waiting-status{text-align:center;padding:1rem}.waiting-status p{color:#666;margin-bottom:1rem;font-size:1rem}.fun-fact{background:#fef3c7;color:#92400e;padding:1rem;border-radius:8px;margin-bottom:1rem;font-weight:500}.category-badge{background:#e6e9ff;color:#667eea;padding:.5rem 1rem;border-radius:50px;font-weight:600;display:inline-block;margin-bottom:1rem}.btn-next{padding:.75rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s}.btn-next:hover{transform:scale(1.05)}.current-scores{margin-top:2rem;padding:1.5rem;background:#f9fafb;border-radius:12px}.current-scores h4{margin-bottom:1rem;color:#333;font-size:1.1rem}.scores-list{display:flex;flex-direction:column;gap:.75rem}.score-item-small{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#fff;border-radius:8px}.score-item-small .avatar{font-size:1.5rem}.score-item-small .name{flex:1;font-weight:600;color:#333}.score-item-small .score{background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:50px;font-weight:600;font-size:.9rem}.player-selection{padding:2rem;text-align:center}.player-selection h3{font-size:1.5rem;color:#333;margin-bottom:2rem}.players-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;max-width:700px;margin:0 auto}.player-select-card{background:linear-gradient(135deg,#667eea15,#764ba215);border:3px solid #e0e0e0;border-radius:16px;padding:2rem 1rem;cursor:pointer;transition:all .3s}.player-select-card:hover{border-color:#667eea;box-shadow:0 8px 24px #667eea33}.avatar-large{font-size:3rem;margin-bottom:.5rem}.question-about{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.75rem;background:#e6e9ff;border-radius:8px;font-weight:600;color:#333}.question-about .avatar{font-size:1.5rem}.game-results{width:100%;max-width:700px;margin:0 auto}.results-card{background:#fff;border-radius:24px;padding:3rem;box-shadow:0 20px 60px #0000004d;text-align:center}.trophy-icon{color:#fbbf24;margin:0 auto 1rem}.results-card h1{font-size:2rem;color:#333;margin-bottom:2rem}.final-scores{margin-bottom:2rem}.final-scores h2{font-size:1.5rem;color:#333;margin-bottom:1.5rem}.score-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f9fafb;border-radius:12px;margin-bottom:.75rem;border:2px solid transparent}.score-item.winner{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fbbf24}.score-item .rank{font-weight:700;font-size:1.2rem;color:#667eea;min-width:40px}.score-item .avatar{font-size:2rem}.score-item .name{flex:1;font-weight:600;color:#333;text-align:left;font-size:1.1rem}.score-item .score{background:#667eea;color:#fff;padding:.5rem 1rem;border-radius:50px;font-weight:600;font-size:1rem}.fun-facts{background:#f9fafb;padding:1.5rem;border-radius:12px;margin-bottom:2rem;text-align:left}.fun-facts h3{color:#333;margin-bottom:1rem;font-size:1.2rem}.fun-facts p{color:#666;line-height:1.6}.fun-fact{margin-bottom:.75rem;padding:.75rem;background:#fff;border-radius:8px;font-size:.95rem}.fun-fact strong{color:#667eea}.connecting{text-align:center;color:#fff}.spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.connecting h2{font-size:1.5rem}.answer-input{width:100%;padding:1rem;border:2px solid #e0e0e0;border-radius:12px;font-size:1rem;margin-bottom:1rem;resize:vertical;min-height:80px;font-family:inherit;transition:border-color .3s}.answer-input:focus{outline:none;border-color:#667eea}.btn-submit{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #667eea4d}.btn-submit:hover:not(:disabled){box-shadow:0 6px 16px #667eea66;transform:translateY(-2px)}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.answers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:1.5rem}.answer-card{background:#fff;border:3px solid #e0e0e0;border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s;position:relative;display:flex;flex-direction:column;gap:.75rem}.answer-card:hover:not(.selected){border-color:#667eea;background:#f8f9ff;transform:translateY(-4px);box-shadow:0 8px 20px #667eea33}.answer-card.selected{border-color:#10b981;background:#d1fae5;box-shadow:0 8px 20px #10b9814d}.answer-text{font-size:1rem;color:#333;line-height:1.5;flex:1;font-style:italic}.answer-author{font-size:.9rem;color:#666;font-weight:600;display:flex;align-items:center;gap:.5rem;padding-top:.75rem;border-top:1px solid #e0e0e0}.answer-author .avatar{font-size:1.2rem}@media(max-width:768px){.avatar-grid{grid-template-columns:repeat(4,1fr)}.lobby-header{flex-direction:column;gap:1rem}.players-list,.games-grid{grid-template-columns:1fr}.question{font-size:1.2rem}}