:root{--color-primary:#667eea;--color-primary-dark:#764ba2;--gradient-primary:linear-gradient(135deg,#667eea,#764ba2);--gradient-primary-hover:linear-gradient(135deg,#5a6fd6,#6a4296);--color-danger:#e53e3e;--color-danger-hover:#c53030;--color-danger-disconnect:#ff6b6b;--color-success:#4caf50;--color-success-hover:#45a049;--color-warning:#ff9800;--color-surface:#fff;--color-surface-alt:#f5f5f5;--color-surface-primary-tint:#f5f5ff;--color-surface-primary-hover:#f0f0ff;--color-text-primary:#333;--color-text-secondary:#555;--color-text-muted:#999;--color-border:#e0e0e0;--color-border-placeholder:#ccc;--color-overlay-soft:#0000004d;--color-overlay-medium:#0009;--color-overlay-heavy:#000c;--color-dropdown-bg:#2d3748;--color-dropdown-text:#e2e8f0;--color-btn-neutral:#e2e8f0;--color-btn-neutral-hover:#cbd5e0;--color-bot:#4a9eff;--color-card-blue:#4a90e2;--color-card-blue-light:#5ba3f5;--color-card-blue-border:#2563eb;--color-card-green:#48bb78;--color-card-green-light:#5cd68a;--color-card-green-border:#16a34a;--color-card-red:#e53e3e;--color-card-red-light:#f56565;--color-card-red-border:#dc2626;--color-card-wild:gold;--color-card-wild-light:#ffed4e;--color-card-wild-border:#ff9800;--color-card-back:#e74c3c;--color-card-back-dark:#c0392b;--color-card-back-border:#a93226;--shadow-sm:0 2px 8px #0000001a;--shadow-sm-heavy:0 2px 8px #0003;--shadow-md:0 4px 12px #0000004d;--shadow-lg:0 8px 32px #0003;--shadow-lg-heavy:0 8px 32px #0000004d;--shadow-float:0 4px 20px #00000026;--shadow-primary-sm:0 2px 8px #667eea4d;--shadow-primary-md:0 4px 12px #667eea66;--shadow-primary-lg:0 6px 16px #667eea99;--shadow-primary-glow:0 8px 16px #667eea4d;--shadow-danger-sm:0 2px 8px #e53e3e4d;--shadow-danger-md:0 4px 12px #e53e3e66;--shadow-danger-lg:0 6px 16px #e53e3e99;--radius-sm:4px;--radius-base:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-pill:20px;--radius-circle:50%;--transition-fast:0.2s;--transition-normal:0.3s;--card-width:80px;--card-height:110px;--card-width-sm:50px;--card-height-sm:70px}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);background:var(--gradient-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{display:flex;flex-direction:column;min-height:100vh}.App-header{background-color:var(--color-overlay-soft);box-shadow:var(--shadow-sm-heavy);color:#fff;padding:12px 20px;text-align:center}.App-header h1{font-size:2rem;margin:0;text-shadow:2px 2px 4px #0000004d}.error-message{animation:slideDown var(--transition-normal) ease-out;background-color:var(--color-danger);border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:#fff;left:50%;padding:15px 30px;position:fixed;top:100px;transform:translateX(-50%);z-index:1000}@keyframes slideDown{0%{opacity:0;top:-50px}to{opacity:1;top:100px}}.connection-status.disconnected{background-color:#f0ad4e;background-color:var(--color-warning,#f0ad4e);color:#333;font-weight:700;left:0;padding:8px;position:fixed;right:0;text-align:center;top:0;z-index:1100}.error-boundary{padding:40px;text-align:center}.error-boundary h2{margin-bottom:16px}.error-boundary button{cursor:pointer;margin:8px;padding:10px 20px}.loading{color:#fff;font-size:1.5rem;height:80vh}.App-footer,.loading{align-items:center;display:flex;justify-content:center}.App-footer{gap:12px;margin-top:auto;padding:8px 16px}.App-footer .version{color:#fff6;font-family:monospace;font-size:.75rem;letter-spacing:.5px}.language-selector{background:#0000;border:1px solid #fff3;border-radius:var(--radius-sm);color:#fff6;cursor:pointer;font-size:.75rem;padding:2px 4px}.language-selector option{background:var(--color-dropdown-bg);color:var(--color-dropdown-text)}.game-board{display:flex;flex-direction:column;margin:0;min-height:100vh;min-width:100px;padding:8px;position:relative;width:100%}.turn-indicator{background:var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:.9rem;font-weight:600;margin-bottom:10px;padding:8px 16px;text-align:center}.turn-indicator.my-turn{animation:pulse 2s infinite;background:var(--gradient-primary);color:#fff}@keyframes pulse{0%,to{box-shadow:0 0 0 0 #667eeab3}50%{box-shadow:0 0 0 10px #667eea00}}.discard-instruction{align-items:center;animation:blink 1s infinite;background:var(--color-warning);border-radius:var(--radius-md);color:#fff;display:flex;font-weight:600;gap:15px;padding:10px 20px}.btn-cancel-discard{background:linear-gradient(135deg,var(--color-danger) 0,var(--color-danger-hover) 100%);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-danger-md);color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:14px 28px;transition:all var(--transition-normal)}.btn-cancel-discard:hover{box-shadow:var(--shadow-danger-lg);transform:translateY(-2px)}@keyframes blink{0%,to{opacity:1}50%{opacity:.7}}.other-players{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin-bottom:10px}.opponent-info{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:10px;transition:opacity var(--transition-normal),filter var(--transition-normal)}.opponent-info.inactive{filter:grayscale(30%);opacity:.5}.opponent-info h4{color:var(--color-text-primary);margin:0 0 15px}.disconnected-indicator{color:var(--color-danger-disconnect);font-size:.9em;font-weight:600}.bot-badge{font-size:.9em}.opponent-cards{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.opponent-cards>.card-pile,.opponent-cards>.discard-piles-opponent{min-width:0}.opponent-cards .pile-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-pile{align-items:center;display:flex;flex-direction:column;gap:5px}.opponent-hand-stack{align-items:center;display:flex;flex-direction:row;margin-top:20px;position:relative}.card-in-hand{position:relative;transition:transform var(--transition-fast)}.card-in-hand:not(:first-child){margin-left:-30px}.pile-label{color:var(--color-text-secondary);font-size:.85rem;font-weight:500}.discard-piles-opponent{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:3px}.card-pile-small{align-items:center;display:flex;flex-direction:column;gap:3px}.pile-label-small{color:var(--color-text-secondary);font-size:.7rem}.discard-pile-stack-small{align-items:center;display:flex;flex-direction:column;margin-top:25px;position:relative}.card-in-pile-small{position:relative}.card-in-pile-small:not(:first-child){margin-top:-45px}.empty-pile-small{align-items:center;border:2px dashed var(--color-border-placeholder);border-radius:var(--radius-base);color:var(--color-text-muted);display:flex;font-size:.7rem;height:var(--card-height-sm);justify-content:center;margin-top:25px;padding:5px;text-align:center;width:var(--card-width-sm)}.game-center{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:10px;padding:12px}.piles-container{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(4,1fr);margin:0 auto;max-width:600px}@media (max-width:768px){.piles-container{gap:8px;grid-template-columns:repeat(4,1fr);max-width:100%}}.building-pile{align-items:center;background:var(--color-surface-alt);border:2px solid var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:center;min-height:120px;padding:8px;text-align:center;transition:all var(--transition-normal);width:100%}.building-pile.clickable{border-color:var(--color-primary);cursor:pointer}.building-pile.clickable:hover{background:var(--color-surface-primary-hover);box-shadow:var(--shadow-primary-glow);transform:translateY(-5px)}.pile-info{color:var(--color-text-secondary);font-weight:600;margin-bottom:10px}.next-card{color:var(--color-primary);display:block;font-size:.85rem;margin-top:5px}.pile-stack{position:relative}.pile-count{font-size:.85rem;margin-top:10px}.empty-pile,.pile-count{color:var(--color-text-muted)}.empty-pile{align-items:center;border:3px dashed var(--color-border-placeholder);border-radius:var(--radius-md);display:flex;font-weight:500;height:var(--card-height);justify-content:center;width:var(--card-width)}.empty-pile-text{padding:0 10px}.player-area{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:12px;transition:opacity var(--transition-normal),filter var(--transition-normal)}.player-area.inactive{filter:grayscale(30%);opacity:.5}.player-area h3{color:var(--color-text-primary);font-size:1.2rem;margin:0 0 10px}.player-top-row{grid-gap:15px;display:grid;gap:15px;grid-template-columns:auto 1fr;margin-bottom:15px}.stockpile-section{align-items:center;display:flex;flex-direction:column;justify-content:center}.discard-piles-section{margin-bottom:15px}.discard-piles-container{display:flex;flex-wrap:wrap;gap:8px}.discard-pile{align-items:center;display:flex;flex:1 1;flex-direction:column;min-width:90px;text-align:center}.discard-pile.discard-target{cursor:pointer}.discard-pile.discard-target .discard-pile-stack,.discard-pile.discard-target .empty-pile-small{background:#dc354526;border-radius:var(--radius-base);box-shadow:0 0 12px #dc35454d;outline:2px solid var(--color-danger);outline-offset:5px}.discard-pile.discard-mode{animation:highlight 1s infinite}@keyframes highlight{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.discard-pile-stack{align-items:center;display:flex;flex-direction:column;margin-top:10px;position:relative}.card-in-pile{position:relative;transition:transform var(--transition-fast),filter var(--transition-fast)}.card-in-pile:not(:first-child){margin-top:-50px}.card-in-pile.top-card{cursor:pointer;z-index:10}.card-in-pile.top-card:hover{transform:translateY(-10px)}.card-in-pile.top-card.selected{filter:brightness(1.2);transform:translateY(-15px)}.card-clickable{cursor:pointer;display:inline-block;transition:transform var(--transition-fast)}.card-clickable:hover{transform:translateY(-10px)}.card-clickable.selected{filter:brightness(1.2);transform:translateY(-15px)}.card-clickable.disabled{cursor:not-allowed;opacity:.6}.empty-message{background:var(--color-success);border-radius:var(--radius-md);box-shadow:var(--shadow-sm-heavy);color:#fff;font-size:.85rem;font-weight:600;height:var(--card-height);padding:8px;text-align:center;width:var(--card-width)}.actions,.empty-message{align-items:center;display:flex;justify-content:center}.actions{flex-wrap:wrap;gap:10px;margin-top:15px}.btn-end-turn{word-wrap:break-word;background:var(--gradient-primary);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-primary-md);box-sizing:border-box;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;max-width:100%;padding:14px 28px;transition:all var(--transition-normal)}.btn-end-turn:hover{box-shadow:var(--shadow-primary-lg);transform:translateY(-2px)}.selected-card-info{align-items:center;background:var(--color-surface-primary-tint);border:2px solid var(--color-primary);border-radius:var(--radius-md);display:flex;gap:10px;padding:10px 20px}.selected-card-info button{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--radius-base);color:var(--color-primary);cursor:pointer;font-weight:600;padding:8px 16px;transition:all var(--transition-normal)}.selected-card-info button:hover{background:var(--color-primary);color:#fff}.leave-confirm-overlay{align-items:center;background:var(--color-overlay-medium);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:999}.leave-confirm-dialog{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg-heavy);padding:30px 40px;text-align:center}.leave-confirm-dialog p{color:var(--color-text-primary);font-size:1.1rem;margin-bottom:20px}.leave-confirm-buttons{display:flex;gap:12px;justify-content:center}.btn-leave-confirm{background:var(--color-danger);border:none;border-radius:var(--radius-base);color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:10px 24px}.btn-leave-confirm:hover{background:var(--color-danger-hover)}.btn-leave-cancel{background:var(--color-btn-neutral);border:none;border-radius:var(--radius-base);color:var(--color-text-primary);cursor:pointer;font-size:1rem;font-weight:600;padding:10px 24px}.btn-leave-cancel:hover{background:var(--color-btn-neutral-hover)}.game-over-overlay{align-items:center;background:var(--color-overlay-heavy);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.game-over-message{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg-heavy);padding:60px;text-align:center}.game-over-message h2{color:var(--color-text-primary);font-size:3rem;margin-bottom:20px}.game-over-message p{color:var(--color-primary);font-size:1.5rem;font-weight:600}.rematch-section{border-top:1px solid #e0e0e0;border-top:1px solid var(--color-border,#e0e0e0);margin-top:10px;padding-top:20px}.rematch-settings{margin-bottom:15px}.rematch-stockpile-label{display:flex;flex-direction:column;gap:8px}.rematch-stockpile-display,.rematch-stockpile-label{color:var(--color-text-secondary);font-size:.95rem}.rematch-votes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}.rematch-vote-player{align-items:center;display:flex;font-size:.95rem;gap:6px}.vote-indicator{color:var(--color-text-muted);font-size:1.1rem;transition:color var(--transition-fast)}.vote-indicator.voted{color:#4caf50;color:var(--color-success,#4caf50)}.vote-player-name{color:var(--color-text-primary)}.rematch-buttons{display:flex;gap:12px;justify-content:center}.btn-rematch{background:var(--color-primary);border:none;border-radius:var(--radius-base);color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:10px 24px;transition:background var(--transition-fast),opacity var(--transition-fast)}.btn-rematch:hover:not(:disabled){background:#1976d2;background:var(--color-primary-hover,#1976d2)}.btn-rematch.voted{cursor:default;opacity:.6}.btn-leave{background:var(--color-danger);border:none;border-radius:var(--radius-base);color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:10px 24px;transition:background var(--transition-fast)}.btn-leave:hover{background:#c62828;background:var(--color-danger-hover,#c62828)}@media (max-width:768px){.player-top-row{gap:10px}.discard-piles-container{gap:5px}.discard-pile{min-width:70px}.player-area{padding:12px}.player-area h3{font-size:1.1rem;margin-bottom:8px}.pile-label{font-size:.8rem}.building-pile{min-height:140px;padding:8px}.game-center{padding:12px}.pile-info{font-size:.85rem}.empty-message,.next-card{font-size:.8rem}.opponent-hand-stack{margin-top:13px}.discard-pile-stack-small,.empty-pile-small{margin-top:18px}}@media (max-width:640px){.piles-container{gap:6px;max-width:100%}.player-top-row{gap:8px}.discard-piles-container{gap:4px}.discard-pile{min-width:60px}.player-area{padding:10px}.pile-label{font-size:.75rem}.pile-label-small{font-size:.65rem}.actions{gap:8px}.card-in-pile:not(:first-child){margin-top:-42px}.building-pile{min-height:130px;padding:6px}.game-center{gap:8px;padding:10px}.pile-info{font-size:.8rem}.empty-message,.empty-pile-text,.next-card,.pile-count{font-size:.75rem}.opponent-hand-stack{margin-top:10px}.discard-pile-stack-small,.empty-pile-small{margin-top:15px}}@media (max-width:480px){.game-board{padding:5px}.building-pile{min-height:115px;padding:5px}.game-center{padding:8px}.pile-info{font-size:.75rem}.next-card{font-size:.7rem;margin-top:3px}.pile-count{margin-top:5px}.empty-pile,.pile-count{font-size:.7rem}.empty-pile-small{font-size:.6rem}.piles-container{gap:5px;grid-template-columns:repeat(auto-fit,minmax(65px,1fr));max-width:100%}.discard-piles-container{gap:3px;justify-content:space-between}.discard-pile{min-width:0;min-width:auto}.opponent-info,.player-area{padding:8px}.player-area h3{font-size:1rem;margin-bottom:6px}.pile-label{font-size:.7rem}.pile-label-small{font-size:.6rem}.actions{gap:6px;margin-top:10px}.btn-end-turn{font-size:.9rem;padding:10px 20px}.selected-card-info{gap:8px;padding:8px 15px}.selected-card-info button{font-size:.85rem;padding:6px 12px}.empty-message{font-size:.7rem;padding:4px}.card-in-pile:not(:first-child){margin-top:-38px}}@media (max-height:700px) and (orientation:landscape){.game-board{padding:5px}.game-center,.player-area{margin-bottom:5px;padding:10px}.building-pile{min-height:120px}.other-players{margin-bottom:5px}}@media (max-width:300px){.piles-container{grid-template-columns:repeat(2,1fr)}.player-top-row{grid-template-columns:1fr;justify-items:center}.player-hand{justify-self:stretch}}@media (max-width:170px){.piles-container{grid-template-columns:1fr}}.chat-container{background:var(--color-surface);bottom:20px;box-shadow:var(--shadow-float);position:fixed;right:20px;transition:all var(--transition-normal) cubic-bezier(.4,0,.2,1);z-index:1000}.chat-container.collapsed{border-radius:var(--radius-circle);height:60px;overflow:visible;width:60px}.chat-container.collapsed:hover{box-shadow:0 6px 25px #667eea66;transform:scale(1.1)}.chat-container.expanded{border-radius:var(--radius-lg);display:flex;flex-direction:column;height:500px;width:350px}.chat-header{align-items:center;background:var(--gradient-primary);color:#fff;cursor:pointer;display:flex;font-weight:600;justify-content:center;position:relative;transition:all var(--transition-normal) ease;-webkit-user-select:none;user-select:none}.chat-container.collapsed .chat-header{border-radius:var(--radius-circle);height:100%;padding:0;width:100%}.chat-container.expanded .chat-header{border-radius:var(--radius-lg) var(--radius-lg) 0 0;justify-content:space-between;padding:15px}.chat-header:hover{background:var(--gradient-primary-hover)}.chat-header-content{align-items:center;display:flex;gap:8px}.chat-container.collapsed .chat-header-content{font-size:1.5rem}.chat-container.collapsed .chat-title,.chat-container.collapsed .toggle-icon,.chat-container.expanded .chat-icon{display:none}.unread-badge{align-items:center;animation:chat-pulse 2s infinite;background:var(--color-danger);border:2px solid #fff;border-radius:var(--radius-circle);box-shadow:0 2px 8px #e53e3e80;color:#fff;display:flex;font-size:.7rem;font-weight:700;height:20px;justify-content:center;min-width:20px;padding:0 6px;position:absolute;right:-2px;top:-2px}@keyframes chat-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.toggle-icon{font-size:.9rem}.chat-messages{background:var(--color-surface-alt);display:flex;flex:1 1;flex-direction:column;gap:12px;overflow-y:auto;padding:15px}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#f1f1f1}.chat-messages::-webkit-scrollbar-thumb{background:var(--color-text-muted);border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.no-messages{color:var(--color-text-muted);font-style:italic;margin-top:20px;text-align:center}.chat-message{word-wrap:break-word;animation:slideIn var(--transition-normal) ease;border-radius:var(--radius-md);max-width:80%;padding:10px 12px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-message.own-message{align-self:flex-end;background:var(--color-primary);color:#fff}.chat-message.other-message{align-self:flex-start;background:var(--color-surface);border:1px solid var(--color-border)}.message-header{align-items:center;display:flex;font-size:.75rem;gap:8px;justify-content:space-between;margin-bottom:4px}.message-author{flex-shrink:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-time{flex-shrink:0}.own-message .message-author,.own-message .message-time{color:#ffffffe6}.other-message .message-author{color:var(--color-primary)}.message-time{color:var(--color-text-muted);font-size:.7rem}.message-text{font-size:.9rem;line-height:1.4}.chat-input-form{background:var(--color-surface);border-radius:0 0 var(--radius-lg) var(--radius-lg);border-top:1px solid var(--color-border);display:flex;padding:12px}.chat-input{border:2px solid var(--color-border);border-radius:var(--radius-pill);flex:1 1;font-size:.9rem;outline:none;padding:10px 12px;transition:border-color var(--transition-normal)}.chat-input:focus{border-color:var(--color-primary)}.chat-send-button{background:var(--color-primary);border:none;border-radius:var(--radius-pill);color:#fff;cursor:pointer;font-weight:600;margin-left:8px;padding:10px 20px;transition:all var(--transition-normal)}.chat-send-button:hover:not(:disabled){background:#5568d3;transform:scale(1.05)}.chat-send-button:disabled{background:var(--color-border-placeholder);cursor:not-allowed}@media (max-width:768px){.chat-container.collapsed{bottom:15px;height:55px;right:15px;width:55px}.chat-container.expanded{bottom:10px;height:400px;right:10px;width:300px}.chat-message{max-width:85%}}@media (max-width:480px){.chat-container.collapsed{bottom:10px;height:50px;right:10px;width:50px}.chat-container.collapsed .chat-header-content{font-size:1.3rem}.chat-container.expanded{bottom:10px;height:350px;left:10px;right:10px;width:calc(100vw - 20px)}.chat-container.expanded .chat-header{padding:12px}.chat-input-form,.chat-messages{padding:10px}.chat-send-button{padding:10px 16px}.unread-badge{font-size:.65rem;height:18px;min-width:18px;padding:0 5px}}.card{border-radius:var(--radius-md);box-shadow:var(--shadow-sm-heavy);transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.card.normal{height:var(--card-height);width:var(--card-width)}.card.small{height:var(--card-height-sm);width:var(--card-width-sm)}.card.visible{background:var(--color-surface);border:3px solid var(--color-text-primary)}.card.visible.blue-card{background:linear-gradient(135deg,var(--color-card-blue) 0,var(--color-card-blue-light) 100%);border-color:var(--color-card-blue-border)}.card.visible.blue-card .card-corner,.card.visible.blue-card .card-value-center{color:#fff}.card.visible.green-card{background:linear-gradient(135deg,var(--color-card-green) 0,var(--color-card-green-light) 100%);border-color:var(--color-card-green-border)}.card.visible.green-card .card-corner,.card.visible.green-card .card-value-center{color:#fff}.card.visible.red-card{background:linear-gradient(135deg,var(--color-card-red) 0,var(--color-card-red-light) 100%);border-color:var(--color-card-red-border)}.card.visible.red-card .card-corner,.card.visible.red-card .card-value-center{color:#fff}.card.visible.wild-card{background:linear-gradient(135deg,var(--color-card-wild) 0,var(--color-card-wild-light) 100%);border-color:var(--color-card-wild-border)}.card.hidden{background:linear-gradient(135deg,var(--color-card-back) 0,var(--color-card-back-dark) 100%);border:3px solid var(--color-card-back-border)}.card-content{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;padding:8px;position:relative}.card-corner{color:var(--color-text-primary);font-size:1rem;font-weight:700;line-height:1;position:absolute}.card-corner-top{right:4px;top:4px}.card-corner-bottom{bottom:4px;left:4px;transform:rotate(180deg)}.card-value-center{color:var(--color-text-primary);font-size:2.5rem;font-weight:700}.card.small .card-corner{font-size:.65rem}.card.small .card-corner-top{right:3px;top:3px}.card.small .card-corner-bottom{bottom:3px;left:3px}.card.small .card-value-center{font-size:1.5rem}.wild-indicator{bottom:22px;color:var(--color-card-wild-border);font-size:.6rem;font-weight:700;letter-spacing:1.5px;position:absolute;text-transform:uppercase}.card.small .wild-indicator{bottom:14px;font-size:.45rem;letter-spacing:1px}.card-back{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative}.card-pattern{background-image:repeating-linear-gradient(45deg,#0000,#0000 10px,#ffffff1a 0,#ffffff1a 20px);height:100%;width:100%}.card:hover{transform:scale(1.05)}@media (max-width:768px){:root{--card-width:70px;--card-height:96px}}@media (max-width:640px){:root{--card-width:60px;--card-height:82px;--card-width-sm:45px;--card-height-sm:62px}}@media (max-width:480px){:root{--card-width:55px;--card-height:75px;--card-width-sm:40px;--card-height-sm:55px}}@media (max-width:768px){.card-value-center{font-size:2.2rem}.card-corner{font-size:.9rem}}@media (max-width:640px){.card-value-center{font-size:1.8rem}.card.small .card-value-center{font-size:1.3rem}.card-corner{font-size:.8rem}.card.small .card-corner{font-size:.6rem}.wild-indicator{bottom:18px;font-size:.5rem}.card.small .wild-indicator{bottom:12px;font-size:.4rem}}@media (max-width:480px){.card-value-center{font-size:1.6rem}.card.small .card-value-center{font-size:1.1rem}.card-corner{font-size:.75rem}.card.small .card-corner{font-size:.55rem}.card-content{padding:6px}.wild-indicator{bottom:16px;font-size:.45rem;letter-spacing:1px}.card.small .wild-indicator{bottom:10px;font-size:.35rem;letter-spacing:.5px}}.player-hand{background:var(--color-surface-alt);border-radius:var(--radius-md);min-width:0;padding:15px}.hand-label{color:var(--color-text-secondary);font-size:1rem;font-weight:600;margin-bottom:22px;text-align:center}.hand-cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.hand-card{cursor:pointer;position:relative;transition:all var(--transition-normal)}.hand-card:hover{transform:translateY(-15px)}.hand-card.selected{transform:translateY(-20px) scale(1.1)}.hand-card.selected:after{border-bottom:8px solid var(--color-primary);border-left:8px solid #0000;border-right:8px solid #0000;bottom:-10px;content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.hand-card.disabled{cursor:not-allowed;opacity:.5}.hand-card.disabled:hover{transform:none}.empty-hand{color:var(--color-text-muted);font-style:italic;padding:40px;text-align:center}@media (max-width:768px){.hand-cards{gap:6px}.player-hand{padding:12px}.hand-label{font-size:.95rem;margin-bottom:8px}}@media (max-width:640px){.hand-cards{gap:5px}.player-hand{padding:10px}.hand-label{font-size:.9rem;margin-bottom:6px}.hand-card:hover{transform:translateY(-12px)}.hand-card.selected{transform:translateY(-16px) scale(1.08)}}@media (max-width:480px){.hand-cards{gap:4px}.player-hand{padding:8px}.hand-label{font-size:.85rem;margin-bottom:5px}.hand-card:hover{transform:translateY(-10px)}.hand-card.selected{transform:translateY(-14px) scale(1.05)}.hand-card.selected:after{border-bottom-width:6px;border-left-width:6px;border-right-width:6px}}.options-menu{position:absolute;right:10px;top:10px;z-index:50}.btn-options{align-items:center;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-circle);box-shadow:var(--shadow-sm);cursor:pointer;display:flex;height:36px;justify-content:center;transition:all var(--transition-normal);width:36px}.btn-options.open,.btn-options:hover{background:var(--color-surface-primary-hover);border-color:var(--color-primary)}.options-icon{font-size:1.2rem;line-height:1}.options-dropdown{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-md);left:10px;margin-left:auto;max-width:260px;overflow:hidden;padding:8px 0;position:fixed;right:10px;z-index:50}.options-item{padding:10px 16px}.options-item label{align-items:center;color:var(--color-text-secondary);cursor:pointer;display:flex;flex-wrap:wrap;font-size:.9rem;font-weight:500;gap:8px;margin:0}.options-item input[type=checkbox]{accent-color:var(--color-primary);cursor:pointer;flex-shrink:0;height:18px;width:18px}.options-item select{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-base);color:var(--color-text-primary);cursor:pointer;font-size:.85rem;margin-left:auto;padding:4px 8px}.options-room{border-bottom:1px solid var(--color-border);padding-bottom:8px}.room-label{color:var(--color-text-muted);font-family:monospace;font-size:.8rem;font-weight:600;letter-spacing:1px}.options-item .btn-leave{background:var(--color-danger);border:none;border-radius:var(--radius-base);color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:8px 16px;transition:all var(--transition-normal);width:100%}.options-item .btn-leave:hover{background:var(--color-danger-hover)}.lobby{align-items:center;display:flex;justify-content:center;min-height:80vh;padding:20px}.lobby-container{background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:500px;padding:40px;width:100%}.lobby-container h2{color:var(--color-text-primary);margin-bottom:30px;text-align:center}.lobby-options{margin-top:20px}.create-room-form,.join-room-form{display:flex;flex-direction:column;gap:20px}.create-room-form h3,.join-room-form h3{color:var(--color-text-secondary);margin-bottom:10px;text-align:center}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:var(--color-text-secondary);font-size:.9rem;font-weight:500}.form-group label .label-hint{color:var(--color-text-muted);display:block;font-size:.75rem;font-weight:400;margin-top:4px}.form-group input,.form-group select{border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;padding:12px;transition:border-color var(--transition-normal)}.form-group input:focus,.form-group select:focus{border-color:var(--color-primary);outline:none}.form-group input::placeholder{color:var(--color-text-muted)}.btn-primary,.btn-secondary{border:none;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-weight:600;letter-spacing:.5px;padding:14px 28px;text-transform:uppercase;transition:all var(--transition-normal)}.btn-primary{background:var(--gradient-primary);box-shadow:var(--shadow-primary-md);color:#fff}.btn-primary:hover{box-shadow:var(--shadow-primary-lg);transform:translateY(-2px)}.btn-secondary{background:var(--color-surface);border:2px solid var(--color-primary);color:var(--color-primary)}.btn-secondary:hover{background:var(--color-surface-primary-tint)}.divider{color:var(--color-text-muted);margin:20px 0;position:relative;text-align:center}.divider:after,.divider:before{background:var(--color-border);content:"";height:1px;position:absolute;top:50%;width:40%}.divider:before{left:0}.divider:after{right:0}.stockpile-slider{-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--color-primary),var(--color-primary-dark));border:none;border-radius:var(--radius-sm);cursor:pointer;height:8px;outline:none;padding:0;width:100%}.stockpile-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-surface);border:3px solid var(--color-primary);border-radius:var(--radius-circle);box-shadow:var(--shadow-primary-md);cursor:pointer;height:20px;-webkit-transition:all var(--transition-normal);transition:all var(--transition-normal);width:20px}.stockpile-slider::-webkit-slider-thumb:hover{box-shadow:var(--shadow-primary-lg);transform:scale(1.2)}.stockpile-slider::-moz-range-thumb{background:var(--color-surface);border:3px solid var(--color-primary);border-radius:var(--radius-circle);box-shadow:var(--shadow-primary-md);cursor:pointer;height:20px;-moz-transition:all var(--transition-normal);transition:all var(--transition-normal);width:20px}.stockpile-slider::-moz-range-thumb:hover{box-shadow:var(--shadow-primary-lg);transform:scale(1.2)}.waiting-room{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);margin:20px;max-width:600px;padding:30px;text-align:center}@media (min-width:768px){.waiting-room{margin:40px auto}}.lobby-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}.btn-start-game{background:var(--gradient-primary);border:none;border-radius:var(--radius-base);box-shadow:var(--shadow-primary-sm);color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:8px 16px;transition:all var(--transition-normal)}.btn-start-game:hover{background:var(--gradient-primary-hover);box-shadow:var(--shadow-primary-md);transform:translateY(-2px)}.btn-start-game:active{transform:translateY(0)}.btn-leave-lobby{background:var(--color-danger);border:none;border-radius:var(--radius-base);box-shadow:var(--shadow-danger-sm);color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:8px 16px;transition:all var(--transition-normal)}.btn-leave-lobby:hover{background:var(--color-danger-hover);box-shadow:var(--shadow-danger-md);transform:translateY(-2px)}.btn-leave-lobby:active{transform:translateY(0)}.waiting-room h2{color:var(--color-text-primary);margin-bottom:10px}.waiting-room p{color:var(--color-text-secondary);margin-bottom:30px}.shareable-link-container{align-items:center;display:flex;gap:10px;margin:20px 0}.shareable-link-input{background:var(--color-surface-alt);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;flex:1 1;font-family:monospace;font-size:14px;padding:12px}.shareable-link-input:focus{border-color:var(--color-success);outline:none}.btn-copy{background:var(--color-success);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-weight:700;padding:12px 24px;transition:background var(--transition-normal);white-space:nowrap}.btn-copy:hover{background:var(--color-success-hover)}.or-text{color:var(--color-text-muted);font-size:14px;margin:15px 0}.or-text strong{color:var(--color-text-primary);font-size:18px;letter-spacing:2px}.players-waiting{margin:30px 0}.players-waiting h3{color:var(--color-text-secondary);margin-bottom:15px}.players-waiting ul{list-style:none;padding:0}.players-waiting li{align-items:center;background:var(--color-surface-alt);border-radius:var(--radius-md);color:var(--color-text-primary);display:flex;justify-content:space-between;margin:5px 0;padding:10px}.player-name{align-items:center;display:flex;gap:6px}.bot-badge{color:var(--color-bot);font-size:.85em;font-weight:600}.disconnected-player{opacity:.5}.disconnected-badge{font-size:.85em;font-weight:600}.btn-remove-bot,.disconnected-badge{color:#e53e3e;color:var(--color-danger,#e53e3e)}.btn-remove-bot{background:none;border:1px solid #e53e3e;border:1px solid var(--color-danger,#e53e3e);border-radius:4px;border-radius:var(--radius-base,4px);cursor:pointer;font-size:.8rem;line-height:1;padding:2px 8px;transition:all .2s;transition:all var(--transition-normal,.2s)}.btn-remove-bot:hover{background:#e53e3e;background:var(--color-danger,#e53e3e);color:#fff}.add-bot-section{align-items:center;display:flex;gap:10px;justify-content:center;margin:15px 0}.ai-type-select{background:#fff;background:var(--color-surface,#fff);border:2px solid #e2e8f0;border:2px solid var(--color-border,#e2e8f0);border-radius:4px;border-radius:var(--radius-base,4px);color:#1a202c;color:var(--color-text-primary,#1a202c);padding:8px 12px}.ai-type-select,.btn-add-bot{cursor:pointer;font-size:.9rem}.btn-add-bot{background:var(--color-bot);border:none;border-radius:4px;border-radius:var(--radius-base,4px);color:#fff;font-weight:600;padding:8px 16px;transition:all .2s;transition:all var(--transition-normal,.2s)}.btn-add-bot:hover{background:#3182ce;transform:translateY(-1px)}.btn-add-bot:disabled{background:#a0aec0;cursor:not-allowed;transform:none}
/*# sourceMappingURL=main.21d7330a.css.map*/