:root{--color-dark: #202020;--color-orange: #f05a22;--color-yellow-orange: #f3a02e;--color-yellow: #fec313;--gradient-primary: linear-gradient(135deg, #f05a22 0%, #f3a02e 100%);--gradient-secondary: linear-gradient(135deg, #f3a02e 0%, #fec313 100%);--gradient-bg: linear-gradient(135deg, #202020 0%, #3a3a3a 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:#fff}.app{min-height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center}.lobby{background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:40px;text-align:center;max-width:400px;width:100%;border:1px solid rgba(240,90,34,.3)}.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{opacity:.8;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-yellow-orange)}.form-group input{width:100%;padding:15px;border:2px solid rgba(243,160,46,.4);border-radius:10px;background:#20202099;color:#fff;font-size:1rem;transition:border-color .3s,box-shadow .3s}.form-group input:focus{outline:none;border-color:var(--color-yellow);box-shadow:0 0 15px #fec3134d}.form-group input::placeholder{color:#fff6}.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 #f05a2266}.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%}.waiting-room h2{font-size:2rem;margin-bottom:10px}.join-code{background:#f05a2233;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-yellow)}.player-count{opacity:.8;margin:20px 0}.players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px;margin-top:20px}.player-card{background:#f3a02e26;padding:15px 10px;border-radius:10px;text-align:center;border:1px solid rgba(243,160,46,.3)}.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}.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:#f05a2226;border-radius:15px;border:1px solid rgba(240,90,34,.3)}.question-number{font-size:.9rem;opacity:.8}.timer{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.2rem;color:var(--color-yellow)}.timer.warning{color:#ff6b6b;animation:pulse .5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.question-card{background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:30px;margin-bottom:20px;border:1px solid rgba(243,160,46,.3)}.question-text{font-size:1.4rem;font-weight:600;text-align:center;line-height:1.4}.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 #0006;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:var(--color-dark);border:2px solid var(--color-yellow-orange)}.feedback{text-align:center;padding:40px;background:#ffffff14;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(243,160,46,.3)}.feedback.correct{background:#f3a02e4d;border-color:var(--color-yellow)}.feedback.incorrect{background:#f05a224d;border-color:var(--color-orange)}.feedback-icon{font-size:4rem;margin-bottom:20px}.feedback h2{font-size:2rem;margin-bottom:10px}.feedback p{font-size:1.2rem;opacity:.9}.points-earned{font-size:3rem;font-weight:700;margin:20px 0;color:var(--color-yellow);text-shadow:0 0 20px rgba(254,195,19,.5)}.leaderboard{background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:30px;width:100%;max-width:500px;border:1px solid rgba(243,160,46,.3)}.leaderboard h2{text-align:center;margin-bottom:20px;font-size:1.8rem;color:var(--color-yellow-orange)}.leaderboard-list{list-style:none}.leaderboard-item{display:flex;align-items:center;padding:15px 20px;margin-bottom:10px;background:#f3a02e1a;border-radius:12px;transition:transform .2s;border:1px solid rgba(243,160,46,.2)}.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:#ffffff26}.player-info{flex:1}.player-name{font-weight:600;margin-bottom:3px}.player-score{opacity:.8;font-size:.9rem;color:var(--color-yellow-orange)}.status-message{text-align:center;padding:20px;opacity:.8}.connection-status{position:fixed;top:10px;right:10px;padding:8px 15px;border-radius:20px;font-size:.8rem;font-weight:600}.connection-status.connected{background:var(--color-yellow-orange);color:var(--color-dark)}.connection-status.disconnected{background:var(--color-orange)}@media (max-width: 600px){.answers-grid{grid-template-columns:1fr}.lobby{padding:25px}.lobby h1{font-size:2rem}}