:root{--color-dark: #202020;--color-orange: #f05a22;--color-yellow-orange: #f3a02e;--color-yellow: #fec313;--color-light-gray: #f5f5f5;--color-medium-gray: #e0e0e0;--color-text: #333333;--color-text-light: #666666;--gradient-primary: linear-gradient(135deg, #f05a22 0%, #f3a02e 100%);--gradient-secondary: linear-gradient(135deg, #f3a02e 0%, #fec313 100%);--gradient-bg: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--gradient-bg);min-height:100vh;color:var(--color-text)}.app{min-height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center}.lobby{background:#fff;border-radius:20px;padding:40px;text-align:center;max-width:400px;width:100%;border:1px solid var(--color-medium-gray);box-shadow:0 4px 20px #00000014}.lobby h1{font-size:2.5rem;margin-bottom:10px;background:var(--gradient-secondary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lobby p{color:var(--color-text-light);margin-bottom:30px}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;margin-bottom:8px;font-weight:600;font-size:.9rem;color:var(--color-orange)}.form-group input{width:100%;padding:15px;border:2px solid var(--color-medium-gray);border-radius:10px;background:#fff;color:var(--color-text);font-size:1rem;transition:border-color .3s,box-shadow .3s}.form-group input:focus{outline:none;border-color:var(--color-yellow-orange);box-shadow:0 0 15px #f3a02e33}.form-group input::placeholder{color:#aaa}.btn{width:100%;padding:15px;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 5px 20px #f05a224d}.btn:active{transform:translateY(0)}.btn-primary{background:var(--gradient-primary);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.waiting-room{text-align:center;max-width:500px;width:100%;background:#fff;border-radius:20px;padding:40px;border:1px solid var(--color-medium-gray);box-shadow:0 4px 20px #00000014}.waiting-room h2{font-size:2rem;margin-bottom:10px;color:var(--color-text)}.join-code{background:#f05a221a;border:2px solid var(--color-orange);padding:20px 40px;border-radius:15px;font-size:2rem;font-weight:700;letter-spacing:5px;margin:20px 0;display:inline-block;color:var(--color-orange)}.player-count{color:var(--color-text-light);margin:20px 0}.qr-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:#fff;border-radius:15px;border:2px solid var(--color-medium-gray);margin:20px auto;max-width:220px}.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:20px}.player-card{background:var(--color-light-gray);padding:15px 10px;border-radius:10px;text-align:center;border:1px solid var(--color-medium-gray)}.player-avatar{width:40px;height:40px;background:var(--gradient-primary);border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}.game-container{width:100%;max-width:700px}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:15px 20px;background:#fff;border-radius:15px;border:1px solid var(--color-medium-gray);box-shadow:0 2px 10px #0000000d}.question-number{font-size:.9rem;color:var(--color-text-light)}.timer{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.2rem;color:var(--color-orange)}.timer.warning{color:#f44;animation:pulse .5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.question-card{background:#fff;border-radius:20px;padding:30px;margin-bottom:20px;border:1px solid var(--color-medium-gray);box-shadow:0 4px 15px #0000000f}.question-text{font-size:1.4rem;font-weight:600;text-align:center;line-height:1.4;color:var(--color-text)}.answers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.answer-btn{padding:25px 20px;border:2px solid transparent;border-radius:15px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.answer-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 25px #0000004d;border-color:var(--color-yellow)}.answer-btn:disabled{cursor:default;opacity:.7}.answer-btn.answer-0{background:var(--color-orange)}.answer-btn.answer-1{background:var(--color-yellow-orange)}.answer-btn.answer-2{background:var(--color-yellow);color:var(--color-dark)}.answer-btn.answer-3{background:#4a90d9}.answer-btn.selected{outline:4px solid var(--color-orange);outline-offset:4px;box-shadow:0 0 25px #f05a2280}.submit-container{display:flex;justify-content:center;margin-top:25px}.btn-submit{background:var(--gradient-primary);color:#fff;padding:15px 50px;border:none;border-radius:10px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #f05a2266}.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}.multiple-badge{display:inline-block;background:var(--color-yellow);color:var(--color-dark);padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700;margin-left:10px;vertical-align:middle}.feedback{text-align:center;padding:40px;background:#fff;border-radius:20px;border:1px solid var(--color-medium-gray);box-shadow:0 4px 20px #00000014;max-width:500px;width:100%}.feedback.correct{background:#f0fff4;border-color:#48bb78}.feedback.incorrect{background:#fff5f5;border-color:#fc8181}.feedback-icon{font-size:4rem;margin-bottom:20px}.feedback h2{font-size:2rem;margin-bottom:10px;color:var(--color-text)}.feedback p{font-size:1.2rem;color:var(--color-text-light)}.points-earned{font-size:3rem;font-weight:700;margin:20px 0;color:var(--color-orange)}.leaderboard{background:#fff;border-radius:20px;padding:30px;width:100%;max-width:500px;border:1px solid var(--color-medium-gray);box-shadow:0 4px 20px #00000014}.leaderboard h2{text-align:center;margin-bottom:20px;font-size:1.8rem;color:var(--color-orange)}.leaderboard-list{list-style:none}.leaderboard-item{display:flex;align-items:center;padding:15px 20px;margin-bottom:10px;background:var(--color-light-gray);border-radius:12px;transition:transform .2s;border:1px solid var(--color-medium-gray)}.leaderboard-item:hover{transform:translate(5px);border-color:var(--color-yellow-orange)}.rank{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:15px;flex-shrink:0}.rank-1{background:var(--color-yellow);color:var(--color-dark);box-shadow:0 0 15px #fec31380}.rank-2{background:var(--color-yellow-orange);color:var(--color-dark)}.rank-3{background:var(--color-orange);color:#fff}.rank-other{background:var(--color-medium-gray);color:var(--color-text)}.player-info{flex:1}.player-name{font-weight:600;margin-bottom:3px;color:var(--color-text)}.player-score{font-size:.9rem;color:var(--color-orange)}.status-message{text-align:center;padding:20px;color:var(--color-text-light)}.connection-status{position:fixed;top:10px;right:10px;padding:8px 15px;border-radius:20px;font-size:.8rem;font-weight:600}.connection-status.connected{background:#48bb78;color:#fff}.connection-status.disconnected{background:#fc8181;color:#fff}@media (max-width: 600px){.answers-grid{grid-template-columns:1fr}.lobby{padding:25px}.lobby h1{font-size:2rem}}