body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.join-screen{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:400px;width:100%;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.join-screen h1{color:#667eea;text-align:center;margin-bottom:10px;font-size:2.5rem}.join-screen .subtitle{text-align:center;color:#666;margin-bottom:30px;font-size:.9rem}.join-screen input{width:100%;padding:15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1rem;margin-bottom:15px;transition:border-color .3s}.join-screen input:focus{outline:none;border-color:#667eea}.join-screen button{width:100%;padding:15px;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s;margin-bottom:10px}.btn-player{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-player:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea66}.btn-admin{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.btn-admin:hover{transform:translateY(-2px);box-shadow:0 10px 20px #f5576c66}.btn-player:disabled,.btn-admin:disabled{opacity:.5;cursor:not-allowed;transform:none}.room-code{text-align:center;margin-top:20px;padding:10px;background:#f5f5f5;border-radius:8px;font-size:.9rem;color:#666}.room-code strong{color:#667eea;font-size:1.2rem}.error-message{padding:10px;margin-bottom:15px;background-color:#fee;color:#c00;border-radius:8px;font-size:.9rem}.lobby{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:100%;animation:slideIn .5s ease-out}.lobby h2{color:#667eea;text-align:center;margin-bottom:30px;font-size:2rem}.players-list{margin-bottom:30px}.player-item{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px 20px;border-radius:10px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;animation:slideIn .3s ease-out}.player-item.admin{background:linear-gradient(135deg,#f093fb,#f5576c)}.player-name{font-weight:700;font-size:1.1rem}.player-badge{background:#ffffff4d;padding:5px 10px;border-radius:5px;font-size:.8rem}.waiting-message{text-align:center;color:#666;margin-top:20px;font-style:italic}.admin-controls{margin-top:20px}.admin-controls button{width:100%;padding:15px;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transition:all .3s}.admin-controls button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea66}.admin-controls button:disabled{opacity:.5;cursor:not-allowed}.quiz-view{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:700px;width:100%;animation:slideIn .5s ease-out}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #e0e0e0}.question-counter{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:10px 20px;border-radius:20px;font-weight:700}.player-info{text-align:right}.player-info .name{font-weight:700;color:#333;font-size:1.1rem}.player-info .score{color:#667eea;font-weight:700;font-size:1.3rem}.question-text{font-size:1.5rem;color:#333;margin-bottom:30px;text-align:center;font-weight:500}.options-grid{display:grid;grid-template-columns:1fr;gap:15px;margin-bottom:20px}.option-button{padding:20px;border:2px solid #e0e0e0;border-radius:10px;font-size:1.1rem;cursor:pointer;background:#fff;transition:all .3s;text-align:left}.option-button:hover:not(:disabled){border-color:#667eea;background:#f5f5ff;transform:translate(5px)}.option-button.selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.option-button.correct{background:#4caf50;color:#fff;border-color:#4caf50}.option-button.incorrect{background:#f44336;color:#fff;border-color:#f44336}.option-button:disabled{cursor:not-allowed}.submit-button{width:100%;padding:15px;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transition:all .3s}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea66}.submit-button:disabled{opacity:.5;cursor:not-allowed}.waiting-for-others{text-align:center;color:#666;font-style:italic;margin-top:20px;padding:20px;background:#f5f5f5;border-radius:10px}.admin-view{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:900px;width:100%;animation:slideIn .5s ease-out}.admin-header{text-align:center;margin-bottom:30px}.admin-header h2{color:#667eea;font-size:2rem;margin-bottom:10px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}.admin-section{background:#f9f9f9;padding:20px;border-radius:15px}.admin-section h3{color:#667eea;margin-bottom:15px;font-size:1.2rem}.player-status{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#fff;border-radius:8px;margin-bottom:8px}.player-status.answered{background:#e8f5e9}.status-indicator{width:10px;height:10px;border-radius:50%;background:#ccc}.status-indicator.answered{background:#4caf50}.admin-controls-grid{display:grid;grid-template-columns:1fr;gap:10px}.admin-controls-grid button{padding:15px;border:none;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;color:#fff;transition:all .3s}.btn-reveal{background:linear-gradient(135deg,#667eea,#764ba2)}.btn-next{background:linear-gradient(135deg,#4caf50,#45a049)}.btn-reset{background:linear-gradient(135deg,#f44336,#e91e63)}.admin-controls-grid button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px #0000004d}.admin-controls-grid button:disabled{opacity:.5;cursor:not-allowed;transform:none}.results-view{background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:100%;animation:slideIn .5s ease-out}.results-view h2{color:#667eea;text-align:center;margin-bottom:30px;font-size:2.5rem}.leaderboard{margin-bottom:30px}.leaderboard-item{display:flex;justify-content:space-between;align-items:center;padding:20px;border-radius:10px;margin-bottom:10px;animation:slideIn .3s ease-out}.leaderboard-item:nth-child(1){background:linear-gradient(135deg,gold,#ffed4e);font-size:1.3rem}.leaderboard-item:nth-child(2){background:linear-gradient(135deg,silver,#e0e0e0);font-size:1.2rem}.leaderboard-item:nth-child(3){background:linear-gradient(135deg,#cd7f32,#daa520);font-size:1.1rem}.leaderboard-item:nth-child(n+4){background:#f5f5f5}.rank{font-weight:700;margin-right:15px}.player-result{flex:1;display:flex;justify-content:space-between}.player-result .name{font-weight:700}.player-result .score{font-weight:700;color:#667eea}.admin-question-section{margin-bottom:20px}.admin-player-score{display:flex;align-items:center;gap:10px}.admin-waiting-text{margin-top:15px;font-size:.9rem;color:#666;text-align:center}.results-winner{text-align:center;margin-bottom:20px}.results-winner h3{color:#667eea}.results-waiting{text-align:center;color:#666;font-style:italic}@media (max-width: 768px){.app{padding:10px}.join-screen,.lobby,.quiz-view,.admin-view,.results-view{padding:20px}.join-screen h1{font-size:2rem}.admin-grid{grid-template-columns:1fr}.quiz-header{flex-direction:column;gap:15px}.player-info{text-align:center}.question-text{font-size:1.2rem}}@media (max-width: 480px){.join-screen h1{font-size:1.5rem}.question-text{font-size:1rem}.option-button{padding:15px;font-size:1rem}}