:root{--max-width: 480px;--color-primary: #10b981;--color-primary-dark: #059669;--color-secondary: #6366f1;--color-success: #10b981;--color-danger: #ef4444;--color-warning: #f59e0b;--color-bg: #0f172a;--color-card: #1e293b;--color-card-hover: #334155;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-border: #334155;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--border-radius: 12px;--border-radius-sm: 8px;--shadow: 0 4px 20px rgba(0, 0, 0, .3);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--color-bg);color:var(--color-text);display:flex;justify-content:center;min-height:100vh;padding:var(--spacing-md)}#root{width:100%;max-width:900px}.app{width:100%}.narrow-container{max-width:var(--max-width);margin:0 auto}h1{font-size:2rem;font-weight:700;margin-bottom:var(--spacing-sm);letter-spacing:-.02em}h2{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-text)}h3{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.card{background:var(--color-card);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--shadow);border:1px solid var(--color-border)}.btn{padding:14px 28px;border:none;border-radius:var(--border-radius-sm);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;letter-spacing:.01em}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;box-shadow:0 4px 14px #10b9814d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.btn-secondary{background:var(--color-card-hover);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}.btn-success{background:linear-gradient(135deg,var(--color-success) 0%,#059669 100%);color:#fff}.btn-danger{background:linear-gradient(135deg,var(--color-danger) 0%,#dc2626 100%);color:#fff}.home-screen{text-align:center;padding-top:var(--spacing-xl)}.header{margin-bottom:var(--spacing-xl)}.header h1{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem}.header p{color:var(--color-text-muted);font-size:1rem}.error-banner{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:var(--color-danger);padding:var(--spacing-md);border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-md);display:flex;justify-content:space-between;align-items:center}.error-banner button{background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--color-danger);opacity:.7}.mode-selection,.form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-xs);text-align:left}.form-group label{font-weight:500;color:var(--color-text-muted);font-size:.875rem}.form-group input,.form-group select{padding:14px;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:16px;font-family:inherit;background:var(--color-bg);color:var(--color-text);transition:border-color .2s}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--color-primary)}.button-group{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.button-group .btn{flex:1}.lobby-screen{width:100%}.lobby-header{text-align:center;margin-bottom:var(--spacing-lg)}.room-code-display{background:linear-gradient(135deg,#10b9811a,#6366f11a);border:1px solid rgba(16,185,129,.3);padding:var(--spacing-lg);border-radius:var(--border-radius);margin-top:var(--spacing-md);cursor:pointer;transition:all .2s}.room-code-display:hover{border-color:var(--color-primary)}.room-code-display span{display:block;color:var(--color-text-muted);font-size:.875rem}.room-code-display strong{display:block;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:8px;margin:var(--spacing-sm) 0}.room-code-display small{font-size:.75rem;color:var(--color-text-muted)}.game-config{margin-bottom:var(--spacing-lg)}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.config-grid div{background:var(--color-bg);padding:var(--spacing-md);border-radius:var(--border-radius-sm);font-size:.875rem;color:var(--color-text-muted)}.config-grid div strong{color:var(--color-text);text-transform:capitalize}.players-section{margin-bottom:var(--spacing-lg)}.players-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.player-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);background:var(--color-bg);border-radius:var(--border-radius-sm);border:1px solid transparent}.player-item.current{border-color:var(--color-secondary);background:#6366f11a}.player-name{display:flex;gap:var(--spacing-sm);align-items:center;font-weight:500}.host-badge{font-size:.65rem;padding:3px 8px;border-radius:20px;font-weight:600;background:#f59e0b33;color:var(--color-warning);text-transform:uppercase;letter-spacing:.05em}.you-badge{font-size:.65rem;padding:3px 8px;border-radius:20px;font-weight:600;background:#6366f133;color:var(--color-secondary);text-transform:uppercase;letter-spacing:.05em}.ready-status{font-weight:500;font-size:.875rem}.ready-status.ready{color:var(--color-success)}.ready-status.not-ready{color:var(--color-text-muted)}.lobby-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.lobby-actions .btn{flex:1;min-width:100px}.waiting-message{text-align:center;color:var(--color-text-muted);font-size:.875rem;margin-top:var(--spacing-md)}.game-layout{display:flex;gap:var(--spacing-md);width:100%;min-height:calc(100vh - 80px)}.game-sidebar{width:140px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.game-sidebar.right{align-items:flex-end}.game-center{flex:1;max-width:var(--max-width);margin:0 auto}.player-sidebar{background:var(--color-card);border-radius:var(--border-radius);padding:var(--spacing-md);border:1px solid var(--color-border);width:140px}.player-sidebar.current{border-color:var(--color-secondary);background:linear-gradient(135deg,#6366f126,#6366f10d)}.player-sidebar.eliminated{opacity:.5}.sidebar-header{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--spacing-sm)}.sidebar-name{font-weight:600;font-size:.875rem;color:var(--color-text);word-break:break-word}.sidebar-score{display:flex;align-items:baseline;gap:4px;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.sidebar-score .score-number{font-size:1.75rem;font-weight:700;color:var(--color-primary);line-height:1}.sidebar-score .score-label{font-size:.65rem;color:var(--color-text-muted);text-transform:uppercase}.sidebar-streak{display:flex;flex-direction:column;align-items:center;gap:2px}.sidebar-streak .streak-node{display:flex;align-items:center;justify-content:center;animation:nodeAppear .3s ease-out}@keyframes nodeAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.sidebar-streak .streak-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;font-weight:700}.sidebar-streak .streak-node.correct .streak-icon{background:linear-gradient(135deg,var(--color-success) 0%,#059669 100%);color:#fff;box-shadow:0 2px 8px #10b98166}.sidebar-streak .streak-node.wrong .streak-icon{background:linear-gradient(135deg,var(--color-danger) 0%,#dc2626 100%);color:#fff;box-shadow:0 2px 8px #ef444466}.game-room{width:100%}.game-header{margin-bottom:var(--spacing-md)}.timer{background:var(--color-card);padding:var(--spacing-md);border-radius:var(--border-radius);text-align:center;margin-bottom:var(--spacing-md);border:1px solid var(--color-border)}.timer.urgent{background:#ef44441a;border-color:#ef444480;animation:urgentPulse .5s ease-in-out infinite}@keyframes urgentPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.timer-display{font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.timer.urgent .timer-display{background:var(--color-danger);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.player-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.player-card{display:flex;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-card);border-radius:var(--border-radius);border:1px solid var(--color-border);transition:all .2s}.player-card.current{border-color:var(--color-secondary);background:linear-gradient(135deg,#6366f11a,#6366f10d)}.player-card.eliminated{opacity:.5}.player-streak{display:flex;flex-direction:column;align-items:center;min-width:28px;padding-top:2px}.streak-node{position:relative;display:flex;flex-direction:column;align-items:center}.streak-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;font-weight:700;z-index:1}.streak-node.correct .streak-icon{background:linear-gradient(135deg,var(--color-success) 0%,#059669 100%);color:#fff;box-shadow:0 2px 8px #10b98166}.streak-node.wrong .streak-icon{background:linear-gradient(135deg,var(--color-danger) 0%,#dc2626 100%);color:#fff;box-shadow:0 2px 8px #ef444466}.streak-connector{width:2px;height:8px;margin:2px 0}.streak-connector.same{background:var(--color-border)}.streak-connector.diff{background:var(--color-border);opacity:.5}.streak-empty{color:var(--color-text-muted);font-size:.875rem}.player-details{flex:1;display:flex;justify-content:space-between;align-items:center}.player-name-row{display:flex;align-items:center;gap:var(--spacing-sm)}.player-name{font-weight:600;color:var(--color-text)}.out-badge{font-size:.6rem;padding:2px 6px;border-radius:4px;background:var(--color-danger);color:#fff;font-weight:700;letter-spacing:.05em}.player-stats{display:flex;flex-direction:column;align-items:flex-end}.stat-correct{font-size:1.5rem;font-weight:700;color:var(--color-primary);line-height:1}.stat-label{font-size:.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.question-card{background:var(--color-card);padding:var(--spacing-lg);border-radius:var(--border-radius);border:1px solid var(--color-border)}.question-text{margin-bottom:var(--spacing-lg);text-align:center}.question-text h2{font-size:1.25rem;font-weight:500;line-height:1.5;color:var(--color-text)}.options{display:flex;flex-direction:column;gap:var(--spacing-sm)}.option-btn{display:block;width:100%;padding:16px 20px;text-align:left;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);cursor:pointer;transition:all .15s ease;font-size:1rem;font-family:inherit;color:var(--color-text)}.option-btn:hover:not(.disabled){border-color:var(--color-primary);background:#10b9811a;transform:translate(4px)}.option-btn.selected{background:#10b98126;border-color:var(--color-primary)}.option-btn.disabled{cursor:not-allowed;opacity:.6}.game-results{width:100%}.results-header{text-align:center;margin-bottom:var(--spacing-lg)}.results-header h1{font-size:1.5rem}.victory-message{font-size:1.25rem;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.result-message{font-size:1.1rem;color:var(--color-text-muted)}.final-scores{margin-bottom:var(--spacing-lg)}.scores-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.score-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-card);border-radius:var(--border-radius);border:1px solid var(--color-border)}.score-item.current{border-color:var(--color-secondary);background:#6366f11a}.score-item.winner{border-color:var(--color-warning);background:#f59e0b1a}.score-item.eliminated{opacity:.6}.score-item .rank{font-size:1.25rem;min-width:32px;text-align:center}.player-result-info{flex:1;display:flex;flex-direction:column;gap:4px}.player-result-info .name{font-weight:600;display:flex;align-items:center;gap:var(--spacing-sm)}.answer-history-result{display:flex;flex-wrap:wrap;gap:3px}.answer-history-result .answer-mark{width:16px;height:16px;font-size:10px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700}.answer-history-result .answer-mark.correct{background:#10b98133;color:var(--color-success)}.answer-history-result .answer-mark.wrong{background:#ef444433;color:var(--color-danger)}.score-item .stats{display:flex;flex-direction:column;align-items:flex-end}.correct-big{font-size:1.75rem;font-weight:700;color:var(--color-primary);line-height:1}.correct-label{font-size:.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.results-actions{display:flex;justify-content:center}.loading{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted);font-size:1rem}.eliminated-message{text-align:center;padding:var(--spacing-xl)}.eliminated-message h2{color:var(--color-danger);margin-bottom:var(--spacing-md);font-size:1.5rem}.eliminated-message p{color:var(--color-text-muted);margin-bottom:var(--spacing-sm)}.watching-message{font-style:italic;margin-top:var(--spacing-md);color:var(--color-text-muted)}@media(max-width:600px){body{padding:var(--spacing-sm)}h1{font-size:1.75rem}.header h1{font-size:2rem}.timer-display{font-size:2.5rem}.config-grid{grid-template-columns:1fr}.button-group,.lobby-actions{flex-direction:column}.button-group .btn,.lobby-actions .btn{width:100%}.room-code-display strong{font-size:2rem;letter-spacing:6px}.game-layout{flex-direction:column}.game-sidebar{width:100%;flex-direction:row;overflow-x:auto;gap:var(--spacing-sm)}.game-sidebar.left,.game-sidebar.right{align-items:stretch}.player-sidebar{width:auto;min-width:120px;flex-shrink:0}.sidebar-streak{flex-direction:row;flex-wrap:wrap;justify-content:center}.game-center{order:-1}}