:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f3460;--accent: #e94560;--accent-hover: #ff6b6b;--text-primary: #ffffff;--text-secondary: #a0a0a0;--success: #2ecc71;--warning: #f39c12;--danger: #e74c3c;--border-radius: 8px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}#root{height:100%}.app{min-height:100%;display:flex;flex-direction:column}.lobby-page{max-width:800px;margin:0 auto;padding:var(--spacing-lg)}.lobby-header{text-align:center;margin-bottom:var(--spacing-xl)}.lobby-header h1{font-size:2.5rem;margin-bottom:var(--spacing-sm)}.lobby-header p{color:var(--text-secondary)}.player-form{background:var(--bg-secondary);padding:var(--spacing-lg);border-radius:var(--border-radius);margin-bottom:var(--spacing-lg)}.player-form h2{margin-bottom:var(--spacing-md);font-size:1.2rem}.name-input{width:100%;padding:var(--spacing-md);background:var(--bg-primary);border:2px solid var(--bg-card);border-radius:var(--border-radius);color:var(--text-primary);font-size:1rem;transition:border-color .3s}.name-input:focus{outline:none;border-color:var(--accent)}.lobby-actions{margin-bottom:var(--spacing-xl)}.create-button{width:100%;padding:var(--spacing-md);background:var(--accent);border:none;border-radius:var(--border-radius);color:var(--text-primary);font-size:1.1rem;cursor:pointer;transition:background .3s}.create-button:hover:not(:disabled){background:var(--accent-hover)}.create-button:disabled{opacity:.5;cursor:not-allowed}.lobbies-list h2{margin-bottom:var(--spacing-md)}.no-lobbies{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary);background:var(--bg-secondary);border-radius:var(--border-radius)}.lobbies-grid{display:grid;gap:var(--spacing-md)}.lobby-card{display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--border-radius)}.lobby-info h3{margin-bottom:var(--spacing-xs)}.lobby-details{display:flex;gap:var(--spacing-md);color:var(--text-secondary);font-size:.9rem}.join-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--success);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;transition:opacity .3s}.join-button:hover:not(:disabled){opacity:.9}.join-button:disabled{opacity:.5;cursor:not-allowed}.refresh-button{width:100%;margin-top:var(--spacing-lg);padding:var(--spacing-md);background:var(--bg-card);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;transition:background .3s}.refresh-button:hover{background:var(--bg-secondary)}.game-room{min-height:100%;display:flex;flex-direction:column}.room-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-secondary);border-bottom:1px solid var(--bg-card)}.room-info h1{font-size:1.3rem}.room-id{color:var(--text-secondary);font-size:.9rem}.room-controls{display:flex;gap:var(--spacing-sm)}.ready-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer;transition:background .3s}.ready-button.ready{background:var(--success)}.start-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--success);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer}.leave-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--danger);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer}.waiting-phase{flex:1;padding:var(--spacing-lg)}.players-section{margin-bottom:var(--spacing-lg)}.players-section h2{margin-bottom:var(--spacing-md)}.waiting-info{text-align:center;padding:var(--spacing-lg);color:var(--text-secondary)}.creator-hint{color:var(--accent);margin-top:var(--spacing-sm)}.game-phase{flex:1;display:flex;flex-direction:column}.bunker-info{display:flex;justify-content:center;align-items:center;gap:var(--spacing-xl);padding:var(--spacing-md);background:var(--bg-secondary)}.bunker-slots,.players-alive{font-size:1.1rem}.next-phase-button{padding:var(--spacing-sm) var(--spacing-lg);background:var(--accent);border:none;border-radius:var(--border-radius);color:var(--text-primary);font-size:1rem;cursor:pointer;transition:background .3s}.next-phase-button:hover{background:var(--accent-hover)}.game-content{flex:1;display:grid;grid-template-columns:1fr 300px;gap:var(--spacing-md);padding:var(--spacing-md)}.players-column{overflow-y:auto}.sidebar-column{display:flex;flex-direction:column;gap:var(--spacing-md)}.phase-banner{padding:var(--spacing-lg);background:linear-gradient(135deg,var(--bg-secondary),var(--bg-card));text-align:center;border-bottom:3px solid var(--phase-color, var(--accent))}.phase-banner.waiting{border-bottom-color:var(--text-secondary)}.phase-header{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.phase-title{font-size:1.8rem}.phase-round{color:var(--text-secondary)}.phase-description{color:var(--text-secondary);margin-bottom:var(--spacing-md)}.phase-timer{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.timer-display{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.5rem}.timer-progress{width:200px;height:6px;background:var(--bg-primary);border-radius:3px;overflow:hidden}.timer-progress-bar{height:100%;background:var(--phase-color, var(--accent));transition:width 1s linear}.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md)}.player-grid-empty{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary)}.player-card{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-md);transition:transform .3s,box-shadow .3s}.player-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.player-card.eliminated{opacity:.5;filter:grayscale(50%)}.player-card.my-card{border:2px solid var(--accent)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--bg-card)}.player-name{font-size:1.1rem}.creator-badge,.me-badge{margin-left:var(--spacing-sm);font-size:.8rem}.creator-badge{color:var(--warning)}.me-badge{color:var(--accent)}.eliminated-badge{color:var(--danger);font-size:.9rem}.card-traits{display:flex;flex-direction:column;gap:var(--spacing-sm)}.card-trait{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs);border-radius:4px;transition:background .3s}.card-trait.can-reveal{cursor:pointer;background:var(--bg-card)}.card-trait.can-reveal:hover{background:var(--bg-primary)}.trait-icon{font-size:1.2rem}.trait-label{color:var(--text-secondary);font-size:.9rem;min-width:80px}.trait-value{font-weight:500}.trait-hidden{color:var(--text-secondary)}.reveal-button{margin-left:auto;padding:2px 8px;background:var(--accent);border:none;border-radius:4px;color:var(--text-primary);font-size:.8rem;cursor:pointer}.vote-section{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--bg-card);text-align:center}.vote-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--danger);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer}.voted-badge{color:var(--success);font-weight:700}.chat-container{flex:1;display:flex;flex-direction:column;background:var(--bg-secondary);border-radius:var(--border-radius);overflow:hidden;min-height:300px}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card)}.chat-header h3{font-size:1rem}.messages-count{color:var(--text-secondary);font-size:.8rem}.chat-messages{flex:1;overflow-y:auto;padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm)}.chat-empty{text-align:center;color:var(--text-secondary);padding:var(--spacing-lg)}.chat-message{padding:var(--spacing-sm);border-radius:var(--border-radius);background:var(--bg-card)}.chat-message.my-message{background:var(--bg-primary);border-left:3px solid var(--accent)}.message-header{display:flex;justify-content:space-between;margin-bottom:var(--spacing-xs)}.message-author{font-weight:600;font-size:.9rem}.message-time{color:var(--text-secondary);font-size:.8rem}.message-text{word-wrap:break-word}.chat-form{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-card)}.chat-input{flex:1;padding:var(--spacing-sm);background:var(--bg-primary);border:1px solid var(--bg-secondary);border-radius:var(--border-radius);color:var(--text-primary)}.chat-input:focus{outline:none;border-color:var(--accent)}.chat-send-button{padding:var(--spacing-sm) var(--spacing-md);background:var(--accent);border:none;border-radius:var(--border-radius);color:var(--text-primary);cursor:pointer}.chat-send-button:disabled{opacity:.5;cursor:not-allowed}.chat-hint{text-align:center;padding:var(--spacing-xs);color:var(--text-secondary);font-size:.75rem}.vote-panel{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-md)}.vote-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.vote-header h3{font-size:1rem}.vote-stats{display:flex;gap:var(--spacing-md);color:var(--text-secondary);font-size:.9rem}.votes-remaining{color:var(--warning)}.vote-complete{text-align:center;padding:var(--spacing-md);background:var(--success);border-radius:var(--border-radius);margin-bottom:var(--spacing-md)}.vote-instructions{text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-md)}.vote-targets{display:flex;flex-direction:column;gap:var(--spacing-sm)}.vote-target{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);background:var(--bg-card);border-radius:var(--border-radius)}.vote-target.my-vote{border:2px solid var(--accent)}.target-info{display:flex;flex-direction:column}.target-name{font-weight:500}.target-votes{color:var(--text-secondary);font-size:.8rem}.vote-action-button{padding:var(--spacing-xs) var(--spacing-sm);background:var(--danger);border:none;border-radius:var(--border-radius);cursor:pointer}.my-vote-badge{color:var(--accent);font-weight:700;font-size:.9rem}.loading-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;color:var(--text-secondary)}.loader{width:50px;height:50px;border:3px solid var(--bg-card);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@keyframes spin{to{transform:rotate(360deg)}}.game-ended-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-xl);text-align:center}.game-ended-screen h1{font-size:2.5rem;margin-bottom:var(--spacing-xl)}.winners-section{margin-bottom:var(--spacing-xl)}.winners-section h2{margin-bottom:var(--spacing-md)}.winners-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-md)}.winner-card{padding:var(--spacing-md) var(--spacing-lg);background:var(--success);border-radius:var(--border-radius)}.error-message,.error-toast{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);padding:var(--spacing-md) var(--spacing-lg);background:var(--danger);border-radius:var(--border-radius);display:flex;align-items:center;gap:var(--spacing-md);z-index:1000}.error-message button,.error-toast button{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:1.2rem}@media (max-width: 768px){.game-content{grid-template-columns:1fr}.sidebar-column{order:-1}.chat-container{min-height:200px}.room-header{flex-direction:column;gap:var(--spacing-sm)}.room-controls{width:100%;justify-content:center}.player-grid{grid-template-columns:1fr}.lobby-header h1{font-size:1.8rem}}@media (max-width: 480px){.lobby-page{padding:var(--spacing-md)}.phase-header{flex-direction:column;gap:var(--spacing-xs)}.phase-title{font-size:1.4rem}.timer-display{font-size:1.2rem}}