:root{--bg-dark: #0f1923;--bg-card: #1a2736;--bg-card-hover: #223344;--accent: #e8b931;--accent-glow: rgba(232, 185, 49, .25);--text: #e4e8ec;--text-muted: #8899aa;--danger: #e74c5e;--success: #2ecc71;--border: rgba(255, 255, 255, .08);--player-1: #5dade2;--player-2: #f39c12;--player-3: #e74c3c;--player-4: #2ecc71;--player-5: #9b59b6;--player-6: #1abc9c;--radius: 12px;--shadow: 0 4px 24px rgba(0, 0, 0, .3);font-family:Inter,sans-serif;line-height:1.5;color:var(--text);background-color:var(--bg-dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-width:320px;min-height:100vh;overflow-x:hidden;background-image:radial-gradient(ellipse at 20% 50%,rgba(232,185,49,.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(93,173,226,.04) 0%,transparent 50%)}h1,h2,h3,h4,h5,h6{margin:0;line-height:1.3}.app{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;box-shadow:var(--shadow)}.app-title{font-family:Playfair Display,serif;font-size:1.6rem;background:linear-gradient(135deg,var(--accent),#f5d76e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px}.app-user-info{display:flex;align-items:center;gap:12px}.app-username{font-weight:600;color:var(--player-1);font-size:.95rem}.app-connection-status{font-size:.75rem;padding:4px 10px;border-radius:20px;font-weight:600}.app-connection-status--connected{background:#2ecc7126;color:var(--success);border:1px solid rgba(46,204,113,.3)}.app-connection-status--disconnected{background:#e74c5e26;color:var(--danger);border:1px solid rgba(231,76,94,.3)}.app-main{flex:1;display:flex;flex-direction:column;gap:20px}.app-loading{display:flex;align-items:center;justify-content:center;min-height:40vh;color:var(--text-muted);font-size:1.1rem}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.login-page h1{font-family:Playfair Display,serif;font-size:3rem;background:linear-gradient(135deg,var(--accent),#f5d76e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;margin-bottom:8px}.login-page p{color:var(--text-muted);font-size:1.1rem;margin-bottom:2rem}.login-page [role=alert]{background:#e74c5e1f;color:var(--danger);padding:12px 20px;border-radius:8px;border:1px solid rgba(231,76,94,.3);margin-bottom:1.5rem;max-width:400px;text-align:center}.login-page button{padding:12px 32px;font-size:1.05rem;background:linear-gradient(135deg,var(--accent),#d4a017);color:#1a1a1a;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-family:Inter,sans-serif;box-shadow:0 2px 12px var(--accent-glow);transition:all .2s ease}.login-page button:hover{transform:translateY(-2px);box-shadow:0 4px 20px var(--accent-glow)}.lobby-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;box-shadow:var(--shadow);max-width:500px;margin:40px auto}.lobby-panel h2{font-size:1.4rem;color:var(--accent);margin-bottom:20px;text-align:center;font-weight:700}.lobby-panel h3{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:12px}.lobby-panel ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}.lobby-panel li{display:flex;align-items:center;padding:8px 14px;background:#ffffff0a;border-radius:8px;border:1px solid var(--border);font-weight:600;font-size:.9rem;color:var(--player-1)}.start-buttons{display:flex;flex-direction:column;gap:10px;margin-top:16px}.start-button{width:100%;padding:12px 20px;background:linear-gradient(135deg,var(--accent),#d4a017);color:#1a1a1a;border:none;border-radius:10px;cursor:pointer;font-family:Inter,sans-serif;font-weight:700;font-size:.95rem;box-shadow:0 2px 12px var(--accent-glow);transition:all .2s ease}.start-button:hover{transform:translateY(-2px);box-shadow:0 4px 20px var(--accent-glow)}.waiting-message{color:var(--text-muted);font-style:italic;text-align:center;margin-top:16px;font-size:.9rem}.game-board{display:flex;flex-direction:column;gap:20px}.game-board-players{display:flex;flex-wrap:wrap;gap:10px;padding:0}.player-indicator{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);min-width:120px;flex:1;transition:all .2s}.player-indicator--active{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);background-image:linear-gradient(135deg,rgba(232,185,49,.08),transparent)}.player-indicator--finished{opacity:.5}.player-indicator--passed{opacity:.7}.player-indicator-name{font-weight:700;font-size:.9rem;color:var(--text)}.player-indicator-role{font-size:.7rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.player-indicator-cards{font-size:.8rem;color:var(--text-muted)}.player-indicator-status{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.game-board-series{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;min-height:140px;display:flex;align-items:center;justify-content:center}.series-empty{color:var(--text-muted);font-style:italic;font-size:.95rem}.series-display{display:flex;flex-direction:column;align-items:center;gap:12px}.series-info{font-size:.9rem;color:var(--text-muted)}.series-info strong{color:var(--player-1)}.series-cards{display:flex;gap:8px;justify-content:center}.series-card-image{width:70px;border-radius:6px;box-shadow:0 4px 16px #0006}.series-history{font-size:.75rem;color:var(--text-muted)}.game-board-actions{display:flex;justify-content:center;gap:16px}.action-button{padding:12px 28px;border:none;border-radius:10px;font-family:Inter,sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .2s ease}.action-button--play{background:linear-gradient(135deg,var(--accent),#d4a017);color:#1a1a1a;box-shadow:0 2px 12px var(--accent-glow)}.action-button--play:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px var(--accent-glow)}.action-button--pass{background:#ffffff0f;color:var(--text);border:1px solid var(--border)}.action-button--pass:hover:not(:disabled){background:#ffffff1a;border-color:#fff3}.action-button:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.hand-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow)}.hand-panel h3{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:14px;text-align:center}.hand-cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.hand-card{position:relative;background:none;border:2px solid transparent;border-radius:8px;padding:2px;cursor:pointer;transition:all .2s ease}.hand-card:hover:not(:disabled){transform:translateY(-8px)}.hand-card--selected{border-color:var(--accent);transform:translateY(-10px) scale(1.05);box-shadow:0 4px 20px var(--accent-glow)}.hand-card--dimmed{opacity:.35;cursor:not-allowed}.hand-card--dimmed:hover{transform:none}.hand-card--disabled{cursor:default}.hand-card__image{width:72px;border-radius:6px;box-shadow:0 4px 16px #0006;display:block}.exchange-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;box-shadow:var(--shadow);max-width:700px;margin:20px auto;text-align:center}.exchange-panel h2{font-size:1.3rem;color:var(--accent);margin-bottom:12px}.exchange-role{color:var(--text-muted);margin-bottom:16px;font-size:.9rem}.exchange-role strong{color:var(--accent)}.exchange-instruction{color:var(--text);margin-bottom:16px;font-size:.9rem}.exchange-cards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}.exchange-waiting{color:var(--text-muted);font-style:italic;font-size:.95rem;padding:24px 0}.action-button--exchange{background:linear-gradient(135deg,var(--accent),#d4a017);color:#1a1a1a;box-shadow:0 2px 12px var(--accent-glow)}.action-button--exchange:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px var(--accent-glow)}.score-board{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;box-shadow:var(--shadow);max-width:700px;margin:20px auto}.score-board h2{font-size:1.3rem;color:var(--accent);margin-bottom:20px;text-align:center}.score-board h3{font-size:.9rem;color:var(--text);margin-bottom:12px}.score-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:20px}.score-table th{padding:10px 14px;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;border-bottom:2px solid var(--border);text-align:left}.score-table td{padding:8px 14px;border-bottom:1px solid var(--border);font-size:.85rem}.score-table tbody tr:hover td{background:#ffffff08}.score-table tbody tr:last-child td{border-bottom:none}.score-board__table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:20px;text-align:center}.score-board__table th{padding:10px 12px;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;border-bottom:2px solid var(--border)}.score-board__table td{padding:8px 12px;border-bottom:1px solid var(--border);font-size:.85rem}.score-board__table tfoot td{border-top:2px solid var(--border);border-bottom:none;font-weight:700;color:var(--accent);padding:10px 12px}.score-board__role--president{color:var(--accent);font-weight:700}.score-board__role--vice_president{color:var(--player-4)}.score-board__role--neutre{color:var(--text-muted)}.score-board__role--vice_trou_du_cul{color:var(--player-2)}.score-board__role--trou_du_cul{color:var(--danger);font-weight:700}.score-board__empty{color:var(--text-muted);font-style:italic;text-align:center}.action-button--next{display:block;margin:16px auto 0;background:linear-gradient(135deg,var(--accent),#d4a017);color:#1a1a1a;box-shadow:0 2px 12px var(--accent-glow)}.action-button--next:hover{transform:translateY(-2px);box-shadow:0 4px 20px var(--accent-glow)}@media(max-width:768px){.app{padding:10px}.app-header{flex-direction:column;gap:10px;padding:12px 16px}.player-indicator{min-width:90px;padding:8px 10px}.hand-card__image,.series-card-image{width:56px}.lobby-panel,.exchange-panel,.score-board{padding:20px 16px;margin:20px 10px}}