:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f3460;--bg-surface: #1a1a3e;--text-primary: #e0e0e0;--text-secondary: #a0a0b0;--text-muted: #707080;--accent: #e94560;--accent-hover: #ff6b81;--green: #2ecc71;--green-dark: #27ae60;--gold: #f39c12;--purple: #9b59b6;--border: #2a2a4e;--card-white: #f5f5f0;--card-shadow: rgba(0, 0, 0, .4);--felt-green: #1e6b3a}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}#root{min-height:100vh}.btn{padding:8px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-large{padding:12px 32px;font-size:18px}.btn-small{padding:4px 12px;font-size:12px}.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:16px}.section-header{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:12px}.home-page{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px}.home-container{text-align:center;max-width:480px;width:100%}.game-title{font-size:56px;font-weight:900;letter-spacing:6px;color:var(--accent);margin-bottom:4px}.game-subtitle{font-size:16px;color:var(--text-secondary);margin-bottom:32px}.welcome-text{font-size:18px;margin-bottom:20px;color:var(--text-primary)}.home-actions{display:flex;flex-direction:column;align-items:center;gap:16px}.game-info{text-align:left;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-top:8px;width:100%}.game-info h3{font-size:14px;color:var(--gold);margin-bottom:8px}.game-info ul{list-style:none;padding:0}.game-info li{font-size:13px;color:var(--text-secondary);padding:3px 0}.game-info li:before{content:"♦";color:var(--accent)}.name-prompt{display:flex;gap:8px;justify-content:center}.name-prompt input{padding:10px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:16px;outline:none;width:200px}.name-prompt input:focus{border-color:var(--accent)}.loading,.error-page{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:18px;color:var(--text-secondary)}.error-text{color:var(--accent);font-size:13px}.lobby-page{max-width:900px;margin:0 auto;padding:24px}.lobby-page .game-title{text-align:center;font-size:40px;margin-bottom:24px}.lobby-container{display:grid;grid-template-columns:1fr 300px;gap:16px}.lobby-main,.lobby-sidebar{display:flex;flex-direction:column;gap:16px}.share-link{margin-bottom:16px}.share-link label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px}.share-link input{width:100%;padding:8px 10px;background:var(--bg-primary);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:13px}.player-list h3{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.player-item{padding:8px 12px;background:var(--bg-primary);border-radius:6px;margin-bottom:6px;font-size:14px;display:flex;align-items:center;gap:8px}.player-item.you{border-left:3px solid var(--accent)}.badge{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--bg-card);color:var(--gold);text-transform:uppercase;font-weight:700}.you-badge{color:var(--accent)}.lobby-actions{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.waiting-text{text-align:center;color:var(--text-muted);margin-top:16px;font-style:italic}.game-board{max-width:1200px;margin:0 auto;padding:12px}.board-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.game-title-small{font-size:24px;font-weight:900;letter-spacing:3px;color:var(--accent)}.round-info{display:flex;gap:12px;align-items:center}.round-badge{background:var(--bg-card);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600}.wild-badge{background:var(--purple);padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;color:#fff}.status-banner{text-align:center;padding:10px;border-radius:8px;margin-bottom:12px;font-weight:600;font-size:14px;background:var(--bg-secondary);border:1px solid var(--border)}.status-banner.your-turn{background:var(--felt-green);border-color:var(--green);color:#fff}.status-banner.round-over{background:var(--bg-card);border-color:var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;gap:16px}.status-banner.game-over{background:var(--accent);border-color:var(--accent);color:#fff;font-size:18px;padding:16px}.error-banner{text-align:center;padding:8px;border-radius:6px;margin-bottom:8px;background:#e9456026;border:1px solid var(--accent);color:var(--accent);font-size:13px}.board-layout{display:grid;grid-template-columns:1fr 320px;gap:12px}.board-main,.board-sidebar{display:flex;flex-direction:column;gap:12px}.opponents{display:flex;gap:12px;flex-wrap:wrap}.opponent{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:10px 16px;min-width:120px;text-align:center}.opponent.active-player{border-color:var(--green);box-shadow:0 0 8px #2ecc714d}.opponent-name{font-weight:600;font-size:14px;margin-bottom:4px;display:flex;align-items:center;justify-content:center;gap:6px}.turn-indicator{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.opponent-cards{font-size:12px;color:var(--text-muted)}.opponent-score{font-size:12px;color:var(--text-secondary);margin-top:2px}.table-center{display:flex;justify-content:center;gap:40px;padding:24px;background:var(--felt-green);border-radius:12px;border:2px solid #2d8a4e}.pile{display:flex;flex-direction:column;align-items:center;gap:6px}.pile-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#ffffffb3}.pile-count{font-size:11px;color:#ffffff80}.pile.drawable .pile-label{color:var(--gold)}.playing-card{width:70px;height:100px;border-radius:6px;position:relative;-webkit-user-select:none;user-select:none;transition:transform .15s,box-shadow .15s}.playing-card.clickable{cursor:pointer}.playing-card.clickable:hover{transform:translateY(-4px);box-shadow:0 6px 16px var(--card-shadow)}.card-face{background:var(--card-white);border:1px solid #ccc;box-shadow:0 2px 6px var(--card-shadow)}.card-face.red{color:#d32f2f}.card-face.black{color:#1a1a1a}.card-face.purple{color:var(--purple)}.card-face.selected{transform:translateY(-12px);box-shadow:0 8px 20px #e9456066;border-color:var(--accent)}.card-face.wild{border-color:var(--purple);box-shadow:0 0 8px #9b59b666}.card-corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1}.top-left{top:4px;left:5px}.bottom-right{bottom:4px;right:5px;transform:rotate(180deg)}.card-rank{font-size:14px;font-weight:700}.card-suit{font-size:10px}.card-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.center-suit{font-size:24px}.joker-symbol{font-size:28px}.wild-indicator{position:absolute;bottom:2px;left:50%;transform:translate(-50%);font-size:8px;font-weight:900;color:var(--purple);letter-spacing:1px}.card-back{background:linear-gradient(135deg,#2c3e50,#3498db);border:2px solid #1a5276;box-shadow:0 2px 6px var(--card-shadow);cursor:default}.card-back-pattern{position:absolute;top:4px;right:4px;bottom:4px;left:4px;border:1px solid rgba(255,255,255,.15);border-radius:3px;background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,.05) 3px,rgba(255,255,255,.05) 6px)}.deck-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;font-weight:700;color:#fffc}.empty-pile{background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:11px;color:#ffffff4d}.my-hand-area{background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:12px}.hand-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:8px}.hand-cards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;overflow-x:auto}.hand-hint{text-align:center;font-size:12px;color:var(--text-muted);margin-top:8px;font-style:italic}.card-wrapper{cursor:grab;transition:opacity .15s,margin .1s}.card-wrapper:active{cursor:grabbing}.card-wrapper.card-dragging{opacity:.35}.card-wrapper.drop-before{margin-left:14px;box-shadow:-3px 0 0 var(--accent);border-radius:2px}.card-wrapper.drop-after{margin-right:14px;box-shadow:3px 0 0 var(--accent);border-radius:2px}.scoreboard{max-height:300px;overflow-y:auto}.score-table-wrapper{overflow-x:auto}.score-table{width:100%;border-collapse:collapse;font-size:12px}.score-table th,.score-table td{padding:4px 6px;text-align:center;border-bottom:1px solid var(--border)}.score-table th{color:var(--text-muted);font-weight:600;font-size:11px}.score-table th.current-round{color:var(--gold)}.player-name-cell{text-align:left!important;font-weight:600;white-space:nowrap}.you-row{background:#e9456014}.winner-cell{color:var(--green);font-weight:700}.total-col,.total-cell{font-weight:700;color:var(--gold)}.chat-container{display:flex;flex-direction:column;max-height:300px}.chat-messages{flex:1;overflow-y:auto;min-height:100px;max-height:200px;margin-bottom:8px}.chat-message{padding:3px 0;font-size:12px}.chat-message-name{font-weight:700;color:var(--accent);margin-right:4px}.chat-message-text{color:var(--text-primary)}.chat-input{display:flex;gap:6px}.chat-input input{flex:1;padding:6px 10px;background:var(--bg-primary);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:12px;outline:none}.chat-input input:focus{border-color:var(--accent)}.chat-input .btn{padding:6px 12px;font-size:12px}@media (max-width: 768px){.board-layout{grid-template-columns:1fr}.board-sidebar{flex-direction:column}.lobby-container{grid-template-columns:1fr}.board-header{flex-direction:column;align-items:flex-start;gap:6px}.round-info{flex-wrap:wrap;gap:6px}.status-banner.round-over{flex-direction:column;gap:10px}.lobby-actions{display:flex;flex-direction:column;align-items:center;gap:10px}.playing-card{width:56px;height:80px}.card-rank{font-size:11px}.card-suit{font-size:8px}.center-suit{font-size:18px}.joker-symbol{font-size:20px}.table-center{gap:24px;padding:16px}.game-title{font-size:36px}.chat-container{max-height:220px}}@media (max-width: 480px){.game-board{padding:8px}.lobby-page,.card{padding:12px}.my-hand-area{padding:8px}.game-title-small{font-size:18px;letter-spacing:2px}.round-badge,.wild-badge{font-size:11px;padding:3px 8px}.name-prompt{flex-direction:column;align-items:stretch}.name-prompt input{width:100%}.playing-card{width:46px;height:66px}.card-rank{font-size:10px}.card-suit{font-size:7px}.center-suit{font-size:14px}.joker-symbol{font-size:16px}.wild-indicator{font-size:6px}.card-wrapper.drop-before{margin-left:8px}.card-wrapper.drop-after{margin-right:8px}.table-center{gap:16px;padding:12px}.opponents{gap:8px}.opponent{flex:1;min-width:0;padding:8px}.opponent-name{font-size:12px}.score-table{font-size:11px}.score-table th,.score-table td{padding:3px 4px}.chat-container{max-height:180px}.chat-messages{max-height:120px}.share-link input{font-size:11px}.status-banner{font-size:13px;padding:8px}.status-banner.game-over{font-size:15px;padding:12px}}