*{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #1a1a2e;--color-surface: #16213e;--color-primary: #e94560;--color-text: #ffffff;--color-text-muted: #c0c0c0}html,body,#root{height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-weight:100;background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}.connection-banner{position:fixed;top:0;left:0;right:0;background-color:#f59e0b;color:#1a1a2e;padding:8px 16px;font-size:14px;font-weight:500;text-align:center;z-index:1000;display:flex;align-items:center;justify-content:center;gap:8px}.connection-banner-dot{width:8px;height:8px;border-radius:50%;background-color:#1a1a2e;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.profile-editor{display:flex;flex-direction:column;gap:16px}.profile-editor-name{display:flex;flex-direction:column;gap:6px}.profile-editor-name label{font-size:14px;color:var(--color-text-muted);-webkit-user-select:none;user-select:none}.profile-editor-name input{padding:10px 12px;font-size:16px;border:1px solid #333;border-radius:8px;background-color:var(--color-surface);color:var(--color-text);outline:none;transition:border-color .2s}.profile-editor-name input:focus{border-color:gray}.profile-editor-avatars{display:flex;flex-direction:column;gap:8px}.profile-editor-avatars label{font-size:14px;color:var(--color-text-muted);-webkit-user-select:none;user-select:none}.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.avatar-option{display:flex;align-items:center;justify-content:center;width:48px;height:48px;font-size:24px;border:2px solid transparent;border-radius:12px;background-color:var(--color-surface);cursor:pointer;transition:all .2s}.avatar-option:hover{background-color:#1e2a4a}.avatar-option.selected{border-color:gray;background-color:#80808026}.btn{padding:10px 20px;font-size:16px;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:#d13350}.btn-secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid #333}.btn-secondary:hover:not(:disabled){background-color:#1e2a4a}.btn-large{padding:14px 28px;font-size:18px}.welcome-page{max-width:500px;margin:0 auto;padding:48px 16px;min-height:100%;display:flex;flex-direction:column}.welcome-header{text-align:center;margin-bottom:40px;-webkit-user-select:none;user-select:none}.welcome-intro{font-family:Inter,sans-serif;font-size:16px;color:var(--color-text-muted);margin-bottom:16px}.welcome-title{display:flex;flex-direction:column;align-items:center;line-height:.85;margin-bottom:16px}.welcome-the{font-family:Bebas Neue,sans-serif;font-size:48px;color:silver;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,.3),-1px -1px 0 rgba(0,0,0,.2)}.welcome-game{font-family:Bebas Neue,sans-serif;font-size:96px;color:silver;letter-spacing:0;text-shadow:2px 2px 0 rgba(0,0,0,.3),-1px -1px 0 rgba(0,0,0,.2)}.welcome-subtitle{font-family:Inter,sans-serif;font-size:16px;color:var(--color-text-muted)}.welcome-form{background-color:var(--color-surface);padding:24px;border-radius:16px;margin-bottom:32px;flex:1}.welcome-actions{display:flex;justify-content:center}.welcome-enter-btn{font-family:Bebas Neue,sans-serif;font-size:32px;color:silver;background:transparent;border:1px solid #808080;border-radius:4px;padding:4px 24px;cursor:pointer;transition:all .2s;letter-spacing:2px;-webkit-user-select:none;user-select:none}.welcome-enter-btn:hover:not(:disabled){color:#f5f5f5;border-color:#a0a0a0}.welcome-enter-btn:disabled{opacity:.4;cursor:not-allowed}.lobby-page{max-width:600px;margin:0 auto;padding:24px 16px}.lobby-header{text-align:center;margin-bottom:32px;position:relative;-webkit-user-select:none;user-select:none}.lobby-settings{position:absolute;top:0;right:0;display:flex;align-items:center;gap:4px;padding:8px;text-decoration:none;color:var(--color-text-muted);transition:color .2s}.lobby-settings:hover{color:var(--color-text)}.lobby-settings-avatar{font-size:24px}.lobby-title{display:flex;flex-direction:column;align-items:center;line-height:.85;margin-bottom:8px}.lobby-the{font-family:Bebas Neue,sans-serif;font-size:40px;color:silver;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,.3),-1px -1px 0 rgba(0,0,0,.2)}.lobby-game{font-family:Bebas Neue,sans-serif;font-size:80px;color:silver;letter-spacing:0;text-shadow:2px 2px 0 rgba(0,0,0,.3),-1px -1px 0 rgba(0,0,0,.2)}.lobby-subtitle{font-size:16px;color:var(--color-text-muted)}.lobby-actions{display:flex;justify-content:center;margin-bottom:32px}.lobby-new-game-btn{font-family:Bebas Neue,sans-serif;font-size:32px;color:silver;background:transparent;border:1px solid #808080;border-radius:4px;padding:4px 24px;cursor:pointer;transition:all .2s;letter-spacing:2px;-webkit-user-select:none;user-select:none}.lobby-new-game-btn:hover:not(:disabled){color:#f5f5f5;border-color:#a0a0a0}.lobby-new-game-btn:disabled{opacity:.4;cursor:not-allowed}.lobby-divider{display:flex;align-items:center;gap:12px;margin:0 auto 32px;max-width:280px;-webkit-user-select:none;user-select:none}.lobby-divider-line{flex:1;height:1px;background-color:#333}.lobby-divider-text{color:var(--color-text-muted);white-space:nowrap}.lobby-message{color:var(--color-text-muted);text-align:center;padding:32px 16px;background-color:var(--color-surface);border-radius:12px}.table-list{display:flex;flex-direction:column;gap:12px}.table-card{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background-color:transparent;border:1px solid #808080;border-radius:4px}.table-card-header{display:flex;flex-direction:column;gap:4px}.table-card-host{font-size:16px;font-weight:400;color:#fff}.table-card-players{font-size:14px;color:var(--color-text-muted)}.table-card-join{font-family:Bebas Neue,sans-serif;font-size:24px;color:silver;background:transparent;border:none;padding:4px 12px;cursor:pointer;transition:all .2s;letter-spacing:2px;-webkit-user-select:none;user-select:none}.table-card-join:hover:not(:disabled){color:#f5f5f5}.table-card-join:disabled{opacity:.4;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal{background-color:var(--color-surface);border-radius:16px;padding:24px;width:100%;max-width:400px}.modal h2,.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;color:var(--color-text-muted);margin-bottom:8px}.form-group select{width:100%;padding:10px 12px;font-size:16px;border:1px solid #333;border-radius:8px;background-color:var(--color-bg);color:var(--color-text);outline:none}.form-group select:focus{border-color:gray}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.table-setup-page{max-width:600px;margin:0 auto;padding:24px 16px}.table-setup-header{text-align:center;margin-bottom:24px;-webkit-user-select:none;user-select:none}.table-setup-title{display:flex;flex-direction:column;align-items:center;line-height:.85;margin-bottom:8px}.table-setup-the{font-family:Bebas Neue,sans-serif;font-size:40px;color:silver;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,.3),-1px -1px 0 rgba(0,0,0,.2)}.table-setup-game{font-family:Bebas Neue,sans-serif;font-size:80px;color:silver;letter-spacing:0;text-shadow:2px 2px 0 rgba(0,0,0,.3),-1px -1px 0 rgba(0,0,0,.2)}.table-setup-subtitle{font-size:16px;color:var(--color-text-muted)}.table-setup-loading{text-align:center;padding:48px 16px;color:var(--color-text-muted)}.table-setup-banner{background-color:#f59e0b;color:#1a1a2e;padding:12px 16px;border-radius:8px;text-align:center;margin-bottom:24px}.table-setup-seats{margin-bottom:32px}.table-setup-actions{display:flex;flex-direction:column;gap:12px;align-items:center}.table-setup-btn{font-family:Bebas Neue,sans-serif;font-size:28px;color:silver;background:transparent;border:1px solid #808080;border-radius:4px;padding:4px 24px;cursor:pointer;transition:all .2s;letter-spacing:2px;-webkit-user-select:none;user-select:none;min-width:180px;position:relative}.table-setup-btn:hover:not(:disabled){color:#f5f5f5;border-color:#a0a0a0}.table-setup-btn:disabled{opacity:.4;cursor:not-allowed}.table-setup-btn-secondary{font-size:20px;padding:4px 16px;min-width:auto}.ready-check{position:absolute;right:8px;top:50%;transform:translateY(-50%)}.seat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.seat-card{background-color:var(--color-surface);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px;border:2px solid transparent;transition:all .2s}.seat-card.seat-me{border-color:gray}.seat-card.seat-ready{border-color:silver;border-width:3px}.seat-card.seat-offline{opacity:.6}.seat-card.seat-offline .seat-avatar{filter:grayscale(1);opacity:.5}.seat-empty{flex-direction:column;align-items:center;justify-content:center;min-height:80px;background-color:#16213e80;border:2px dashed #333}.seat-index{font-size:12px;color:var(--color-text-muted)}.seat-empty-label{font-size:14px;color:var(--color-text-muted)}.seat-avatar{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg);border-radius:12px}.seat-info{flex:1;min-width:0}.seat-name{font-size:16px;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.seat-host-badge{font-size:10px;font-weight:600;text-transform:uppercase;background-color:var(--color-primary);color:#fff;padding:2px 6px;border-radius:4px}.seat-me-badge{font-size:10px;font-weight:600;text-transform:uppercase;background-color:#3b82f6;color:#fff;padding:2px 6px;border-radius:4px}.seat-status{font-size:14px;margin-top:4px}.status-ready{color:#22c55e}.status-waiting{color:var(--color-text-muted)}.status-offline{color:#f59e0b}.game-page{display:flex;flex-direction:column;min-height:100%;padding:16px;gap:16px}.game-loading{text-align:center;padding:48px 16px;color:var(--color-text-muted)}.game-header{text-align:center}.game-status{font-size:18px;font-weight:500}.your-turn{color:#22c55e}.waiting-turn{color:var(--color-text-muted)}.game-paused-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.game-paused-modal{background-color:var(--color-surface);border-radius:16px;padding:32px;text-align:center;max-width:400px}.game-paused-modal h2{color:#f59e0b;margin-bottom:16px}.game-paused-modal p{color:var(--color-text-muted)}.player-list{display:flex;gap:8px;overflow-x:auto;padding:4px 0}.player-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--color-surface);border-radius:8px;border:2px solid transparent;flex-shrink:0}.player-item.player-current{border-color:#22c55e}.player-item.player-offline{opacity:.6}.player-avatar{font-size:24px}.player-info{display:flex;flex-direction:column;gap:2px}.player-name{font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px}.player-me-badge{font-size:10px;font-weight:600;text-transform:uppercase;background-color:#3b82f6;color:#fff;padding:1px 4px;border-radius:3px}.player-cards{font-size:12px;color:var(--color-text-muted)}.player-turn-indicator{font-size:10px;font-weight:600;text-transform:uppercase;background-color:#22c55e;color:#fff;padding:2px 6px;border-radius:4px}.player-offline-indicator{font-size:10px;font-weight:600;text-transform:uppercase;background-color:#f59e0b;color:#1a1a2e;padding:2px 6px;border-radius:4px}.game-board{display:flex;flex-direction:column;align-items:center;gap:16px}.piles-row{display:flex;gap:16px;justify-content:center}.pile{display:flex;flex-direction:column;align-items:center;gap:8px}.pile-header{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--color-text-muted)}.pile-direction{font-weight:500}.pile-id{font-size:12px;opacity:.6}.pile-card{width:80px;height:100px;font-size:28px;font-weight:600;background-color:var(--color-surface);border:2px solid #333;border-radius:12px;color:var(--color-text);cursor:default;transition:all .2s}.pile-playable .pile-card{border-color:#22c55e;cursor:pointer}.pile-playable .pile-card:hover{background-color:#22c55e1a}.pile-signals{display:flex;gap:6px}.signal-btn{width:32px;height:32px;font-size:16px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s}.signal-want{background-color:var(--color-primary);color:#fff}.signal-want:hover{background-color:#d13350}.signal-help{background-color:#3b82f6;color:#fff}.signal-help:hover{background-color:#2563eb}.deck-info{margin-top:8px}.deck-count{font-size:14px;color:var(--color-text-muted)}.player-hand{background-color:var(--color-surface);border-radius:16px;padding:16px}.hand-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.hand-label,.plays-counter{font-size:14px;color:var(--color-text-muted)}.hand-cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}.hand-card{width:56px;height:72px;font-size:20px;font-weight:600;background-color:var(--color-bg);border:2px solid #333;border-radius:8px;color:var(--color-text);cursor:pointer;transition:all .2s}.hand-card:disabled{cursor:not-allowed;opacity:.6}.hand-card:not(:disabled):hover{border-color:gray}.hand-card-selected{border-color:gray;background-color:#80808026;transform:translateY(-4px)}.hand-actions{display:flex;align-items:center;justify-content:center;gap:16px}.hand-hint{font-size:14px;color:var(--color-text-muted)}.game-end-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:24px 16px}.game-end-loading{text-align:center;color:var(--color-text-muted)}.game-end-content{text-align:center;max-width:400px;width:100%}.game-end-result{font-size:48px;font-weight:700;margin-bottom:16px}.result-win{color:#22c55e}.result-loss{color:var(--color-text-muted)}.game-end-details{margin-bottom:32px}.game-end-message{font-size:18px;color:var(--color-text-muted)}.game-end-players{background-color:var(--color-surface);border-radius:12px;padding:16px;margin-bottom:32px}.game-end-players h3{font-size:14px;color:var(--color-text-muted);margin-bottom:12px}.game-end-player-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.game-end-player{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:var(--color-bg);border-radius:8px}.game-end-player-avatar{font-size:24px}.game-end-player-name{font-size:14px}.game-end-actions{display:flex;justify-content:center}.error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:24px 16px;text-align:center;gap:16px}.error-boundary h1{font-size:24px;color:var(--color-primary)}.error-boundary p{color:var(--color-text-muted)}.error-details{background-color:var(--color-surface);padding:12px 16px;border-radius:8px;font-family:monospace;font-size:12px;color:var(--color-text-muted);max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.refresh-btn{position:fixed;bottom:16px;right:16px;width:40px;height:40px;border-radius:50%;background-color:var(--color-surface);border:1px solid #333;color:var(--color-text-muted);font-size:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;z-index:100}.refresh-btn:hover{color:var(--color-text);border-color:#555}.refresh-btn:active{transform:scale(.95)}