:root {
            --bg-dark: #0a0f0d;
            --bg-table: #1a4d2e;
            --bg-table-light: #2d6a4f;
            --bg-card: #faf8f5;
            --accent-gold: #d4a84b;
            --accent-gold-light: #e8c76a;
            --accent-red: #c41e3a;
            --text-light: #f0ead6;
            --text-dark: #1a1a1a;
            --border-gold: rgba(212, 168, 75, 0.3);
            --header-height: 52px; /* Hauteur du header pour positionnement */
            /* Couleurs des annonces */
            --bid-propose: #4ade80;
            --bid-emballe: #60a5fa;
            --bid-pass: #9ca3af;
            --bid-solo: #fbbf24;
            --bid-misere: #c084fc;
            --bid-trou: #f87171;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', sans-serif; background: var(--bg-dark); color: var(--text-light); min-height: 100vh; }
        @keyframes glow { 0%, 100% { box-shadow: 0 0 5px var(--accent-gold); } 50% { box-shadow: 0 0 20px var(--accent-gold); } }
        .app { min-height: 100vh; display: flex; flex-direction: column; }
        /* === HEADER UNIFIÉ === */
        .header { 
            background: linear-gradient(180deg, rgba(26, 77, 46, 0.95), rgba(10, 15, 13, 0.98)); 
            border-bottom: 1px solid var(--border-gold); 
            padding: 0 1.5rem; 
            height: var(--header-height);
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            position: relative;
            z-index: 100;
        }
        .header-minimal { background: rgba(10, 15, 13, 0.95); }
        .header-left { display: flex; align-items: center; }
        .header-right { display: flex; align-items: center; gap: 0.5rem; }
        .header-nav { display: flex; align-items: center; gap: 0.25rem; }
        
        .logo { display: flex; align-items: center; gap: 0.5rem; }
        .logo-img { height: 36px; width: auto; transition: opacity 0.2s; }
        .logo:hover .logo-img { opacity: 0.85; }
        
        /* Boutons icône du header */
        .header-icon-btn {
            background: transparent;
            border: none;
            color: var(--text-light);
            width: 40px;
            height: 40px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.15s ease;
        }
        .header-icon-btn .icon { font-size: 1.2rem; }
        .header-icon-btn:hover {
            background: rgba(212, 168, 75, 0.15);
            color: var(--accent-gold);
        }
        .header-icon-btn:active {
            background: rgba(212, 168, 75, 0.25);
            transform: scale(0.95);
        }
        
        /* Badge de notification */
        .header-icon-btn .badge {
            position: absolute;
            top: 4px;
            right: 4px;
            background: var(--accent-red);
            color: white;
            font-size: 0.65rem;
            font-weight: bold;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        /* Boutons spéciaux */
        .header-btn-bug { color: #fbbf24; }
        .header-btn-bug:hover { background: rgba(251, 191, 36, 0.15); }
        .header-btn-admin { color: #60a5fa; }
        .header-btn-admin:hover { background: rgba(96, 165, 250, 0.15); }
        .header-btn-super { color: var(--accent-gold); }
        .header-btn-super:hover { background: rgba(212, 168, 75, 0.2); }
        
        /* Dropdown menu */
        .header-dropdown { position: relative; }
        .dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--bg-dark);
            border: 1px solid var(--border-gold);
            border-radius: 10px;
            min-width: 180px;
            padding: 0.5rem 0;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            z-index: 200;
            animation: dropdownFadeIn 0.15s ease;
        }
        @keyframes dropdownFadeIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.6rem 1rem;
            background: transparent;
            border: none;
            color: var(--text-light);
            font-size: 0.9rem;
            cursor: pointer;
            text-align: left;
            transition: background 0.1s;
        }
        .dropdown-item:hover {
            background: rgba(212, 168, 75, 0.1);
            color: var(--accent-gold);
        }
        .dropdown-item.logout { color: #f87171; }
        .dropdown-item.logout:hover { background: rgba(248, 113, 113, 0.1); }
        .dropdown-item.warning { color: #fbbf24; }
        .dropdown-item.warning:hover { background: rgba(251, 191, 36, 0.1); }
        .dropdown-icon { font-size: 1rem; width: 1.5rem; text-align: center; }
        .dropdown-divider {
            height: 1px;
            background: var(--border-gold);
            margin: 0.5rem 0;
        }
        
        /* Anciens nav-btn (gardés pour compatibilité) */
        .nav-btn { background: transparent; border: none; color: var(--text-light); font-size: 0.95rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 6px; }
        .nav-btn:hover { background: rgba(212, 168, 75, 0.1); color: var(--accent-gold); }
        
        /* === MENU PRINCIPAL === */
        .menu-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
        .menu-title { font-size: 3rem; font-weight: 700; color: var(--accent-gold); margin-bottom: 0.5rem; }
        .menu-subtitle { font-size: 1rem; color: rgba(240, 234, 214, 0.7); margin-bottom: 2rem; }
        .menu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; max-width: 800px; width: 100%; }
        .menu-card { background: rgba(26, 77, 46, 0.5); border: 1px solid var(--border-gold); border-radius: 12px; padding: 1.5rem; cursor: pointer; transition: all 0.3s ease; }
        .menu-card:hover { border-color: var(--accent-gold); transform: translateY(-3px); }
        .menu-card-title { font-size: 1.2rem; color: var(--accent-gold); margin-bottom: 0.5rem; }
        .menu-card-desc { font-size: 0.9rem; color: rgba(240, 234, 214, 0.7); }
        .menu-card.disabled { opacity: 0.5; cursor: not-allowed; }
        .game-table { flex: 1; position: relative; min-height: 650px; background: radial-gradient(ellipse at center, var(--bg-table-light), var(--bg-table) 50%, #0f2a1a); overflow: visible; }
        .player-area { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 10; overflow: visible; }
        .player-area.south { bottom: 20px; left: 50%; transform: translateX(-50%); }
        .player-area.north { top: 20px; left: 50%; transform: translateX(-50%); }
        .player-area.east { right: 30px; top: 50%; transform: translateY(-50%); }
        .player-area.west { left: 30px; top: 50%; transform: translateY(-50%); }
        .player-info { display: flex; align-items: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.6); padding: 0.4rem 0.8rem; border-radius: 20px; border: 1px solid rgba(212, 168, 75, 0.3); margin-bottom: 0.5rem; }
        .player-area.south .player-info { margin-bottom: 0; margin-top: 0.5rem; order: 1; }
        .player-name { font-weight: 600; font-size: 0.85rem; }
        .player-avatar { font-size: 1.1rem; margin-right: 3px; cursor: help; }
        .player-elo { font-size: 0.65rem; color: rgba(240,234,214,0.5); margin-left: 2px; }
        .player-score { font-size: 0.8rem; color: var(--accent-gold); }
        .player-info.current { animation: glow 1.5s ease-in-out infinite; }
        .dealer-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: linear-gradient(135deg, #f0c040 0%, #d4a84b 50%, #b8860b 100%); color: #1a3a1a; font-weight: bold; font-size: 0.65rem; border-radius: 50%; margin-left: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.3); border: 1px solid #8b6914; vertical-align: middle; }
        /* Bulles d'annonces - z-index élevé pour Safari/iOS */
        .player-bubble { 
            position: absolute; 
            background: rgba(0,0,0,0.9); 
            border: 1px solid var(--accent-gold); 
            border-radius: 8px; 
            padding: 0.4rem 0.8rem; 
            font-size: 0.9rem; 
            white-space: nowrap; 
            z-index: 200; 
            pointer-events: none;
            color: var(--text-light);
        }
        .player-area.south .player-bubble { bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
        .player-area.north .player-bubble { top: calc(100% + 5px); left: 50%; transform: translateX(-50%); }
        .player-area.east .player-bubble { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
        .player-area.west .player-bubble { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
        /* Cartes - Style par défaut (moyen) */
        .card { width: 60px; height: 90px; background: var(--bg-card); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; position: relative; box-shadow: 0 2px 10px rgba(0,0,0,0.3); border: 1px solid #ccc; }
        .card.red { color: var(--accent-red); }
        .card.black { color: var(--text-dark); }
        .card-rank { position: absolute; top: 3px; left: 5px; font-size: 0.75rem; font-weight: bold; }
        .card-suit-small { position: absolute; top: 16px; left: 5px; font-size: 0.65rem; }
        .card-suit-center { font-size: 1.6rem; }
        /* Mode gaucher : rang et couleur à droite */
        .card.lefty .card-rank { left: auto; right: 5px; }
        .card.lefty .card-suit-small { left: auto; right: 5px; }
        /* Cartes grandes */
        .cards-large .card { width: 75px; height: 112px; border-radius: 6px; border: 2px solid #999; }
        .cards-large .card-rank { font-size: 1rem; top: 4px; left: 6px; }
        .cards-large .card-suit-small { font-size: 0.85rem; top: 20px; left: 6px; }
        .cards-large .card-suit-center { font-size: 2.2rem; }
        .cards-large .hand-cards .card { margin-left: -25px; }
        .cards-large .bot-cards .card { width: 50px; height: 75px; margin-left: -18px; }
        /* Cartes petites */
        .cards-small .card { width: 50px; height: 75px; border-radius: 4px; }
        .cards-small .card-rank { font-size: 0.65rem; top: 2px; left: 4px; }
        .cards-small .card-suit-small { font-size: 0.55rem; top: 13px; left: 4px; }
        .cards-small .card-suit-center { font-size: 1.3rem; }
        .cards-small .hand-cards .card { margin-left: -18px; }
        .cards-small .bot-cards .card { width: 35px; height: 52px; margin-left: -14px; }
        /* Cartes classiques avec bordures marquées */
        .cards-classic .card { background: linear-gradient(145deg, #fff 0%, #f5f5f0 100%); border: 2px solid #888; }
        .cards-classic .card-suit-center { font-size: 2rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
        /* Cartes élégantes (ancien "réaliste") */
        .cards-elegant .card { 
            background: #fff; 
            border: none; 
            border-radius: 8px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.1);
            width: 70px;
            height: 100px;
        }
        .cards-elegant .card-rank { font-size: 1.1rem; top: 5px; left: 6px; font-family: 'Georgia', serif; }
        .cards-elegant .card-suit-small { font-size: 0.9rem; top: 22px; left: 6px; }
        .cards-elegant .card-suit-center { font-size: 2.4rem; }
        .cards-elegant .card.red { color: #d32f2f; }
        .cards-elegant .card.black { color: #1a1a1a; }
        .cards-elegant .hand-cards .card { margin-left: -22px; }
        .cards-elegant .bot-cards .card { width: 45px; height: 65px; margin-left: -16px; border-radius: 5px; }
        .cards-elegant .card.face-down { 
            background: repeating-linear-gradient(
                45deg,
                #1a3a5c,
                #1a3a5c 3px,
                #234b73 3px,
                #234b73 6px
            );
            border: 3px solid #d4a84b;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .cards-elegant .card.face-down::before { content: '♦'; font-size: 1.5rem; color: rgba(212, 168, 75, 0.5); }
        /* Cartes élégantes - tailles */
        .cards-elegant.cards-small .card { width: 55px; height: 78px; border-radius: 6px; }
        .cards-elegant.cards-small .card-rank { font-size: 0.9rem; top: 3px; left: 4px; }
        .cards-elegant.cards-small .card-suit-small { font-size: 0.7rem; top: 17px; left: 4px; }
        .cards-elegant.cards-small .card-suit-center { font-size: 1.8rem; }
        .cards-elegant.cards-small .hand-cards .card { margin-left: -18px; }
        .cards-elegant.cards-small .bot-cards .card { width: 38px; height: 54px; margin-left: -14px; }
        .cards-elegant.cards-large .card { width: 85px; height: 120px; border-radius: 10px; }
        .cards-elegant.cards-large .card-rank { font-size: 1.3rem; top: 6px; left: 8px; }
        .cards-elegant.cards-large .card-suit-small { font-size: 1.1rem; top: 26px; left: 8px; }
        .cards-elegant.cards-large .card-suit-center { font-size: 3rem; }
        .cards-elegant.cards-large .hand-cards .card { margin-left: -28px; }
        .cards-elegant.cards-large .bot-cards .card { width: 55px; height: 78px; margin-left: -20px; }
        /* Cartes réalistes avec images SVG */
        .cards-realistic .card {
            width: 70px;
            height: 98px;
            border-radius: 6px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.4);
            background: #fff;
            border: 1px solid #aaa;
            padding: 0;
            overflow: hidden;
        }
        .cards-realistic .card .card-rank,
        .cards-realistic .card .card-suit-small,
        .cards-realistic .card .card-suit-center { display: none; }
        .cards-realistic .card .card-svg-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .cards-realistic .hand-cards .card { margin-left: -22px; }
        .cards-realistic .bot-cards .card { width: 45px; height: 63px; margin-left: -16px; border-radius: 4px; }
        .cards-realistic .card.face-down {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 169 245'%3E%3Cdefs%3E%3Cpattern id='cardback' patternUnits='userSpaceOnUse' width='20' height='20'%3E%3Crect width='20' height='20' fill='%231a3a5c'/%3E%3Cpath d='M0 0L20 20M20 0L0 20' stroke='%23234b73' stroke-width='2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='169' height='245' rx='12' fill='url(%23cardback)'/%3E%3Crect x='8' y='8' width='153' height='229' rx='8' fill='none' stroke='%23d4a84b' stroke-width='3'/%3E%3Ctext x='84.5' y='135' font-size='60' fill='%23d4a84b' text-anchor='middle' opacity='0.6'%3E♠%3C/text%3E%3C/svg%3E") center/cover no-repeat;
            border: none;
        }
        .cards-realistic .card.face-down::before { display: none; }
        /* Cartes réalistes - tailles */
        .cards-realistic.cards-small .card { width: 55px; height: 77px; border-radius: 4px; }
        .cards-realistic.cards-small .hand-cards .card { margin-left: -18px; }
        .cards-realistic.cards-small .bot-cards .card { width: 38px; height: 53px; margin-left: -14px; }
        .cards-realistic.cards-large .card { width: 85px; height: 119px; border-radius: 8px; }
        .cards-realistic.cards-large .hand-cards .card { margin-left: -28px; }
        .cards-realistic.cards-large .bot-cards .card { width: 55px; height: 77px; margin-left: -20px; }
        /* Style pique distinct du trèfle */
        .card .suit-spade { font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif; }
        .card .suit-club { font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif; }
        
        /* Cartes semi-réalistes avec valeurs dans les 4 coins */
        .cards-semi-realistic .card {
            width: 70px;
            height: 100px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.1);
            background: #fff;
            border: none;
        }
        .cards-semi-realistic .card.red { color: #d32f2f; }
        .cards-semi-realistic .card.black { color: #1a1a1a; }
        .cards-semi-realistic .card .card-suit-center { font-size: 2rem; }
        .cards-semi-realistic .card .card-corner {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;
            font-family: 'Georgia', serif;
        }
        .cards-semi-realistic .card .card-corner .corner-rank { font-size: 0.85rem; font-weight: bold; }
        .cards-semi-realistic .card .card-corner .corner-suit { font-size: 0.7rem; margin-top: -2px; }
        .cards-semi-realistic .card .card-corner.top-left { top: 3px; left: 4px; }
        .cards-semi-realistic .card .card-corner.top-right { top: 3px; right: 4px; }
        .cards-semi-realistic .card .card-corner.bottom-left { bottom: 3px; left: 4px; transform: rotate(180deg); }
        .cards-semi-realistic .card .card-corner.bottom-right { bottom: 3px; right: 4px; transform: rotate(180deg); }
        .cards-semi-realistic .hand-cards .card { margin-left: -22px; }
        .cards-semi-realistic .bot-cards .card { width: 45px; height: 65px; margin-left: -16px; border-radius: 5px; }
        .cards-semi-realistic .bot-cards .card .card-corner { display: none; }
        .cards-semi-realistic .bot-cards .card .card-suit-center { font-size: 1.2rem; }
        .cards-semi-realistic .card.face-down { 
            background: repeating-linear-gradient(45deg, #1a3a5c, #1a3a5c 3px, #234b73 3px, #234b73 6px);
            border: 3px solid #d4a84b;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        .cards-semi-realistic .card.face-down .card-corner { display: none; }
        .cards-semi-realistic .card.face-down .card-suit-center { display: none; }
        .cards-semi-realistic .card.face-down::before { content: '♦'; font-size: 1.5rem; color: rgba(212, 168, 75, 0.5); }
        /* Semi-réaliste - tailles */
        .cards-semi-realistic.cards-small .card { width: 55px; height: 78px; border-radius: 6px; }
        .cards-semi-realistic.cards-small .card .card-corner .corner-rank { font-size: 0.7rem; }
        .cards-semi-realistic.cards-small .card .card-corner .corner-suit { font-size: 0.55rem; }
        .cards-semi-realistic.cards-small .card .card-suit-center { font-size: 1.5rem; }
        .cards-semi-realistic.cards-small .hand-cards .card { margin-left: -18px; }
        .cards-semi-realistic.cards-small .bot-cards .card { width: 38px; height: 54px; margin-left: -14px; }
        .cards-semi-realistic.cards-large .card { width: 85px; height: 120px; border-radius: 10px; }
        .cards-semi-realistic.cards-large .card .card-corner .corner-rank { font-size: 1rem; }
        .cards-semi-realistic.cards-large .card .card-corner .corner-suit { font-size: 0.85rem; }
        .cards-semi-realistic.cards-large .card .card-corner.top-left { top: 4px; left: 5px; }
        .cards-semi-realistic.cards-large .card .card-corner.top-right { top: 4px; right: 5px; }
        .cards-semi-realistic.cards-large .card .card-corner.bottom-left { bottom: 4px; left: 5px; }
        .cards-semi-realistic.cards-large .card .card-corner.bottom-right { bottom: 4px; right: 5px; }
        .cards-semi-realistic.cards-large .card .card-suit-center { font-size: 2.5rem; }
        .cards-semi-realistic.cards-large .hand-cards .card { margin-left: -28px; }
        .cards-semi-realistic.cards-large .bot-cards .card { width: 55px; height: 78px; margin-left: -20px; }
        
        .card.face-down { background: linear-gradient(135deg, #2c4a7c, #1a2f4f); border: 2px solid var(--accent-gold); }
        .card.face-down::before { content: '♠'; font-size: 1.2rem; color: rgba(212, 168, 75, 0.3); }
        .hand-cards { display: flex; justify-content: center; }
        .hand-cards .card { margin-left: -20px; cursor: pointer; transition: transform 0.15s ease; }
        .hand-cards .card:first-child { margin-left: 0; }
        .hand-cards .card:hover:not(.disabled) { transform: translateY(-10px); z-index: 100; }
        .hand-cards .card.disabled { filter: brightness(0.65); cursor: not-allowed; }
        .hand-cards .card.disabled:hover { transform: none; }
        /* Style pour les cartes révélées en grande misère sur table */
        .hand-cards.revealed-misere { 
            background: rgba(196, 30, 58, 0.15); 
            border-radius: 8px; 
            padding: 5px 10px; 
            box-shadow: 0 0 15px rgba(196, 30, 58, 0.4);
        }
        .hand-cards.revealed-misere .card { cursor: default; }
        .hand-cards.revealed-misere .card:hover { transform: none; }
        .bot-cards { display: flex; }
        .bot-cards .card { width: 40px; height: 60px; margin-left: -15px; }
        .bot-cards .card:first-child { margin-left: 0; }
        .player-area.east .bot-cards, .player-area.west .bot-cards { flex-direction: column; }
        /* Cartes Est/Ouest : dimensions inversées car rotation 90° */
        /* Pour apparaître en portrait après rotation, on définit en paysage (width > height) */
        .player-area.east .bot-cards .card, .player-area.west .bot-cards .card { 
            transform: rotate(90deg); 
            margin-left: 0; 
            margin-top: -25px;
            width: 65px;  /* Devient hauteur visuelle après rotation */
            height: 45px; /* Devient largeur visuelle après rotation */
        }
        .player-area.east .bot-cards .card:first-child, .player-area.west .bot-cards .card:first-child { margin-top: 0; }
        .center-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 150px; z-index: 20; }
        .played-cards { position: relative; width: 100%; height: 100%; }
        .played-card { position: absolute; }
        .played-card.south { bottom: 0; left: 50%; transform: translateX(-50%); }
        .played-card.north { top: 0; left: 50%; transform: translateX(-50%); }
        .played-card.east { right: 0; top: 50%; transform: translateY(-50%); }
        .played-card.west { left: 0; top: 50%; transform: translateY(-50%); }
        .played-card.winner .card { box-shadow: 0 0 15px var(--accent-gold); }
        .contract-display { position: fixed; top: calc(var(--header-height) + 28px); left: 80px; background: rgba(0,0,0,0.7); border: 1px solid var(--accent-gold); border-radius: 8px; padding: 0.4rem 0.8rem; text-align: center; z-index: 30; }
        .contract-value { font-size: 1rem; color: var(--accent-gold); }
        .scoreboard { position: fixed; top: calc(var(--header-height) + 28px); right: 80px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-gold); border-radius: 8px; padding: 0.6rem; min-width: 120px; z-index: 30; }
        .scoreboard-title { font-size: 0.65rem; color: rgba(240,234,214,0.7); text-transform: uppercase; margin-bottom: 0.4rem; text-align: center; }
        .score-row { display: flex; justify-content: space-between; font-size: 0.75rem; padding: 0.15rem 0; }
        .score-value { color: var(--accent-gold); }
        .score-value.negative { color: var(--accent-red); }
        .team-tricks { position: fixed; top: calc(var(--header-height) + 144px); right: 80px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-gold); border-radius: 8px; padding: 0.4rem 0.6rem; z-index: 30; font-size: 0.75rem; min-width: 120px; }
        .team-tricks-row { display: flex; justify-content: space-between; gap: 0.8rem; }
        .team-tricks-value { color: var(--accent-gold); font-weight: bold; }
        .bidding-panel { position: absolute; bottom: auto; top: 45%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); border: 1px solid var(--accent-gold); border-radius: 10px; padding: 0.5rem 0.6rem; min-width: 260px; max-width: 380px; z-index: 50; }
        .bidding-title { font-size: 1rem; color: var(--accent-gold); margin-bottom: 0.3rem; text-align: center; }
        .bidding-phase { font-size: 0.7rem; color: rgba(240,234,214,0.7); text-align: center; margin-bottom: 0.4rem; }
        .suit-selector { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 0.6rem; }
        .suit-btn { width: 36px; height: 36px; border-radius: 6px; border: 2px solid rgba(212,168,75,0.3); background: rgba(255,255,255,0.15); font-size: 1.3rem; cursor: pointer; }
        .suit-btn:hover:not(.disabled) { border-color: var(--accent-gold); background: rgba(255,255,255,0.25); }
        .suit-btn.selected { border-color: var(--accent-gold); background: rgba(212,168,75,0.3); }
        .suit-btn.red { color: var(--accent-red); }
        .suit-btn.black { color: #e0e0e0; }
        .suit-btn.disabled { opacity: 0.3; cursor: not-allowed; }
        
        /* Nouvelle structure par lignes */
        .bid-rows { display: flex; flex-direction: column; gap: 0.1rem; }
        .bid-rows-scrollable { display: flex; flex-direction: column; gap: 0.1rem; max-height: 200px; overflow-y: auto; }
        .bid-row { display: flex; align-items: center; gap: 0.15rem; }
        .bid-row.center { justify-content: center; }
        .bid-row-label { font-size: 0.7rem; color: var(--text-light); min-width: 95px; opacity: 0.9; }
        .bid-row-buttons { display: flex; gap: 0.15rem; flex-wrap: wrap; }
        /* Bouton Passe toujours visible en bas du panneau */
        .bid-row-passe { 
            border-top: 1px solid rgba(212,168,75,0.3); 
            margin-top: 0.3rem; 
            padding-top: 0.3rem; 
            background: rgba(0,0,0,0.9);
        }
        
        /* Boutons de couleur (symboles) */
        .bid-suit-btn { 
            width: 26px; height: 26px; 
            border-radius: 4px; 
            border: 1px solid var(--border-gold); 
            background: rgba(26,77,46,0.6); 
            font-size: 0.9rem; 
            cursor: pointer; 
            display: flex; align-items: center; justify-content: center;
            color: #e0e0e0; /* Couleur claire par défaut pour les icônes */
        }
        .bid-suit-btn:hover:not(:disabled) { background: rgba(212,168,75,0.3); border-color: var(--accent-gold); }
        .bid-suit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .bid-suit-btn.red { color: var(--accent-red); }
        .bid-suit-btn.black { color: #e0e0e0; }
        
        /* Boutons texte standards */
        .bid-btn { padding: 0.4rem 0.8rem; border-radius: 4px; border: 1px solid var(--border-gold); background: rgba(26,77,46,0.6); color: var(--text-light); font-size: 0.85rem; cursor: pointer; }
        .bid-btn:hover:not(:disabled) { background: rgba(212,168,75,0.3); border-color: var(--accent-gold); }
        .bid-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .bid-btn.primary { background: var(--accent-gold); color: var(--bg-dark); font-weight: 600; }
        .bid-btn.pass { background: rgba(100,100,100,0.4); margin-top: 0.1rem; width: 100%; }
        
        /* Séparateur */
        .bid-separator { height: 1px; background: rgba(212,168,75,0.3); margin: 0.15rem 0; }
        
        .bid-history { max-height: 80px; overflow-y: auto; margin-bottom: 0.6rem; display: flex; flex-direction: column; }
        .bid-history-item { font-size: 0.7rem; padding: 0.15rem 0.3rem; border-radius: 3px; margin-bottom: 0.15rem; background: rgba(255,255,255,0.05); }
        .bid-history-item:last-child { background: rgba(212,168,75,0.2); }
        .bid-history-item.trou { background: rgba(212,168,75,0.3); color: var(--accent-gold); }
        .last-trick-btn { position: absolute; bottom: 80px; right: 20px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-gold); border-radius: 6px; padding: 0.4rem 0.8rem; cursor: pointer; z-index: 40; font-size: 0.75rem; color: var(--text-light); }
        .last-trick-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 200; display: flex; align-items: center; justify-content: center; }
        .last-trick-panel { background: var(--bg-table); border: 2px solid var(--accent-gold); border-radius: 12px; padding: 1.5rem; text-align: center; }
        .last-trick-title { color: var(--accent-gold); margin-bottom: 0.8rem; }
        .last-trick-cards { display: flex; gap: 0.8rem; justify-content: center; margin-bottom: 0.8rem; }
        .last-trick-card-container .player-label { font-size: 0.65rem; color: rgba(240,234,214,0.7); margin-bottom: 0.2rem; }
        .last-trick-close { padding: 0.4rem 1.2rem; background: var(--accent-gold); color: var(--bg-dark); border: none; border-radius: 5px; cursor: pointer; }
        .game-info-bar { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); padding: 0.4rem 1rem; display: flex; justify-content: space-between; font-size: 0.75rem; }
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.9); border: 2px solid var(--accent-gold); padding: 0.8rem 1.5rem; border-radius: 10px; font-size: 1.1rem; z-index: 1000; text-align: center; }
        
        /* Toast notifications (pour les messages d'info) */
        .toast-notification {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: rgba(0, 0, 0, 0.9);
            color: var(--text-light);
            padding: 12px 24px;
            border-radius: 8px;
            z-index: 10000;
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            max-width: 90%;
            text-align: center;
        }
        .toast-notification.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
        .toast-notification.toast-info {
            border: 1px solid var(--accent-gold);
        }
        .toast-notification.toast-success {
            border: 1px solid #4ade80;
            background: rgba(0, 50, 0, 0.9);
        }
        .toast-notification.toast-error {
            border: 1px solid #f87171;
            background: rgba(50, 0, 0, 0.9);
        }
        
        .settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; display: flex; align-items: center; justify-content: center; }
        .settings-panel { background: #1a2f1a; border: 1px solid var(--accent-gold); border-radius: 12px; padding: 1.5rem; width: 340px; max-width: 95vw; }
        .settings-title { font-size: 1.3rem; color: var(--accent-gold); margin-bottom: 1rem; text-align: center; }
        .setting-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; }
        .setting-select { background: rgba(26,77,46,0.6); border: 1px solid var(--border-gold); color: var(--text-light); padding: 0.3rem 0.6rem; border-radius: 5px; }
        .setting-checkbox { width: 18px; height: 18px; }
        .setting-btn { background: rgba(26,77,46,0.8); border: 1px solid var(--border-gold); color: var(--accent-gold); padding: 0.4rem 0.8rem; border-radius: 5px; cursor: pointer; font-size: 0.85rem; width: 100%; }
        .setting-btn:hover { background: rgba(46,97,66,0.9); }
        .settings-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
        .settings-tab { flex: 1; background: rgba(26,77,46,0.4); border: 1px solid var(--border-gold); color: var(--text-light); padding: 0.5rem; border-radius: 5px; cursor: pointer; font-size: 0.85rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
        .settings-tab:hover { background: rgba(46,97,66,0.6); }
        .settings-tab.active { background: var(--accent-gold); color: var(--bg-dark); font-weight: bold; }
        /* Debug console */
        .debug-console { position: fixed; bottom: 0; left: 0; width: 350px; max-height: 200px; background: rgba(0,0,0,0.95); border: 1px solid var(--accent-gold); border-radius: 8px 8px 0 0; font-family: monospace; font-size: 0.65rem; z-index: 500; overflow: hidden; }
        .debug-header { background: var(--accent-gold); color: var(--bg-dark); padding: 0.3rem 0.5rem; font-weight: bold; display: flex; justify-content: space-between; }
        .debug-content { max-height: 170px; overflow-y: auto; padding: 0.3rem; }
        .debug-line { padding: 0.1rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .debug-line.bid { color: #ffcc00; }
        .debug-line.play { color: #66ff66; }
        .debug-line.ai { color: #66ccff; }
        .debug-line.error { color: #ff6666; }
        
        /* Styles pour la page de règles */
        .rules-page { background: var(--bg-dark); min-height: 100vh; }
        .rules-container { padding: 1.5rem; max-width: 800px; margin: 0 auto; color: var(--text-light); line-height: 1.6; }
        .rules-title { color: var(--accent-gold); font-size: 1.8rem; margin: 1rem 0 0.5rem; text-align: center; }
        .rules-subtitle { color: rgba(240,234,214,0.6); font-size: 0.9rem; text-align: center; margin-bottom: 2rem; font-style: italic; }
        .rules-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-gold); }
        .rules-section:last-child { border-bottom: none; }
        .rules-section h2 { color: var(--accent-gold); font-size: 1.3rem; margin-bottom: 0.8rem; }
        .rules-section h3 { color: var(--text-light); font-size: 1rem; margin: 1rem 0 0.5rem; }
        .rules-section p { margin: 0.5rem 0; }
        .rules-section ul, .rules-section ol { margin: 0.5rem 0 0.5rem 1.5rem; }
        .rules-section li { margin: 0.3rem 0; }
        .rules-section code { background: rgba(212,168,75,0.2); padding: 0.1rem 0.4rem; border-radius: 3px; font-family: monospace; }
        .suit-red { color: var(--accent-red); }
        .suit-black { color: #e0e0e0; }
        .points-table { overflow-x: auto; margin: 1rem 0; }
        .points-table table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
        .points-table th, .points-table td { padding: 0.5rem; border: 1px solid var(--border-gold); text-align: left; }
        .points-table th { background: rgba(212,168,75,0.2); color: var(--accent-gold); }
        .points-table td { background: rgba(0,0,0,0.2); }
        .notation-list { list-style: none; margin-left: 0 !important; }
        .notation-list li { display: inline-block; margin-right: 1rem; margin-bottom: 0.3rem; }
        
        /* Panneau des annonces escamotable */
        .bids-panel { position: fixed; left: 0; top: 60px; bottom: 0; width: 250px; background: rgba(0,0,0,0.95); border-right: 1px solid var(--border-gold); transform: translateX(-100%); transition: transform 0.3s ease; z-index: 200; overflow-y: auto; }
        .bids-panel.open { transform: translateX(0); }
        .bids-panel-toggle { position: fixed; left: 0; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.8); border: 1px solid var(--border-gold); border-left: none; border-radius: 0 8px 8px 0; padding: 0.5rem 0.3rem; cursor: pointer; z-index: 201; color: var(--accent-gold); font-size: 0.8rem; writing-mode: vertical-rl; }
        .bids-panel.open + .bids-panel-toggle { left: 250px; }
        .bids-panel-title { padding: 1rem; border-bottom: 1px solid var(--border-gold); font-size: 1rem; color: var(--accent-gold); }
        .bids-panel-content { padding: 0.5rem; }
        .bids-panel-item { padding: 0.3rem 0.5rem; margin: 0.2rem 0; border-radius: 4px; font-size: 0.8rem; }
        /* Couleurs des annonces */
        .bid-propose { background: rgba(74, 222, 128, 0.2); border-left: 3px solid var(--bid-propose); }
        .bid-emballe { background: rgba(96, 165, 250, 0.2); border-left: 3px solid var(--bid-emballe); }
        .bid-maintenir { background: rgba(74, 222, 128, 0.15); border-left: 3px solid #22c55e; font-style: italic; }
        .bid-pass { background: rgba(156, 163, 175, 0.15); border-left: 3px solid var(--bid-pass); color: rgba(240,234,214,0.6); }
        .bid-solo { background: rgba(251, 191, 36, 0.2); border-left: 3px solid var(--bid-solo); }
        .bid-misere { background: rgba(192, 132, 252, 0.2); border-left: 3px solid var(--bid-misere); }
        .bid-trou { background: rgba(248, 113, 113, 0.2); border-left: 3px solid var(--bid-trou); }
        .bid-attendre { background: rgba(156, 163, 175, 0.1); border-left: 3px solid #6b7280; font-style: italic; }
        
        /* Scores détaillés */
        .scores-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(10, 15, 13, 0.98); border: 2px solid var(--accent-gold); border-radius: 12px; padding: 1.5rem; max-width: 90vw; max-height: 80vh; overflow-y: auto; z-index: 300; min-width: 300px; }
        .scores-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 299; }
        .scores-modal-title { color: var(--accent-gold); font-size: 1.2rem; margin-bottom: 1rem; text-align: center; }
        .scores-modal-close { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: var(--text-light); font-size: 1.5rem; cursor: pointer; }
        .scores-table-container { overflow-x: auto; max-width: 100%; }
        .scores-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
        .scores-table th, .scores-table td { padding: 0.4rem 0.6rem; border: 1px solid var(--border-gold); text-align: center; white-space: nowrap; }
        .scores-table th { background: rgba(212,168,75,0.2); color: var(--accent-gold); }
        .scores-table td { background: rgba(0,0,0,0.3); }
        .scores-table .positive { color: var(--bid-propose); }
        .scores-table .negative { color: var(--accent-red); }
        .scores-table .total-row { background: rgba(212,168,75,0.15); font-weight: bold; }
        .scoreboard.clickable { cursor: pointer; }
        .scoreboard.clickable:hover { border-color: var(--accent-gold); }
        
        /* Responsive pour smartphones */
        @media (max-width: 768px) {
            .scores-modal { padding: 0.75rem; min-width: unset; width: 95vw; max-width: 95vw; }
            .scores-modal-title { font-size: 1rem; }
            .scores-table { font-size: 0.7rem; }
            .scores-table th, .scores-table td { padding: 0.2rem 0.3rem; }
            .scores-table .col-donne { width: 1.5rem; }
            .scores-table .col-score { min-width: 2rem; }
            .scores-table .col-contrat { font-size: 0.6rem; }
            .scores-table .col-result { width: 2rem; font-size: 0.65rem; }
            /* Afficher les labels abrégés sur mobile */
            .scores-table .full-label { display: none; }
            .scores-table .short-label { display: inline; }
        }
        
        /* Labels complets sur desktop */
        .scores-table .full-label { display: inline; }
        .scores-table .short-label { display: none; }
        
        /* Styles colonnes tableau scores */
        .scores-table .col-donne { text-align: center; }
        .scores-table .col-score { text-align: center; font-weight: 500; }
        .scores-table .col-contrat { text-align: left; font-size: 0.75rem; }
        .scores-table .col-contrat small { color: #888; font-size: 0.65rem; }
        .scores-table .col-result { text-align: center; }
        
        /* Avatars avec fallback texte */
        .player-avatar-fallback { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-gold); color: var(--bg-dark); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; margin-right: 3px; }
        
        /* Styles pour la page Bots */
        .bots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
        .bot-card { background: rgba(0,0,0,0.3); border: 1px solid var(--border-gold); border-radius: 8px; padding: 1rem; display: flex; gap: 1rem; }
        .bot-avatar { font-size: 2.5rem; display: flex; align-items: center; justify-content: center; min-width: 60px; }
        .bot-info { flex: 1; }
        .bot-name { font-weight: bold; color: var(--accent-gold); font-size: 1.1rem; }
        .bot-trait { color: rgba(240,234,214,0.7); font-style: italic; font-size: 0.85rem; }
        .bot-elo { font-size: 0.8rem; color: rgba(240,234,214,0.6); margin-top: 0.2rem; }
        .bot-desc { font-size: 0.85rem; margin-top: 0.5rem; line-height: 1.4; }
        .bot-stats { display: flex; gap: 0.8rem; margin-top: 0.5rem; font-size: 0.8rem; color: rgba(240,234,214,0.6); }
        .bot-stats span { cursor: help; }
        
        /* === CONTRAT SOUS LES JOUEURS === */
        .player-contract { 
            font-size: 0.6rem; 
            padding: 0.15rem 0.4rem; 
            border-radius: 3px; 
            margin-top: 0.2rem;
            text-align: center;
            width: 100%;
            display: block;
        }
        .player-contract.propose { background: rgba(74, 222, 128, 0.3); color: var(--bid-propose); }
        .player-contract.emballe { background: rgba(96, 165, 250, 0.3); color: var(--bid-emballe); }
        .player-contract.solo { background: rgba(251, 191, 36, 0.3); color: var(--bid-solo); }
        .player-contract.misere { background: rgba(192, 132, 252, 0.3); color: var(--bid-misere); }
        .player-contract.trou { background: rgba(248, 113, 113, 0.3); color: var(--bid-trou); }
        .player-contract.pass { background: rgba(156, 163, 175, 0.2); color: var(--bid-pass); }
        .player-contract.attacker { border: 1px solid var(--accent-gold); }
        
        /* === BOUTON CONSEIL === */
        /* Positionné à droite du jeu du joueur Sud */
        .advice-btn {
            position: absolute;
            bottom: 60px;
            left: calc(50% + 200px);
            background: rgba(0,0,0,0.8);
            border: 1px solid var(--accent-gold);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            color: var(--accent-gold);
            cursor: pointer;
            z-index: 45;
            font-size: 0.85rem;
            transition: all 0.2s ease;
        }
        .advice-btn:hover { background: rgba(212, 168, 75, 0.2); }
        .advice-panel {
            position: absolute;
            bottom: 230px;
            right: 20px;
            background: rgba(0,0,0,0.95);
            border: 1px solid var(--accent-gold);
            border-radius: 10px;
            padding: 1rem;
            max-width: 300px;
            z-index: 1001; /* Au-dessus du toast (z-index: 1000) */
        }
        .advice-panel-title { color: var(--accent-gold); font-size: 0.9rem; margin-bottom: 0.5rem; }
        .advice-panel-card { font-size: 1.2rem; margin: 0.5rem 0; }
        .advice-panel-reason { font-size: 0.8rem; color: rgba(240,234,214,0.8); line-height: 1.4; }
        .advice-panel-close { 
            position: absolute; top: 5px; right: 8px; 
            background: none; border: none; color: var(--text-light); 
            cursor: pointer; font-size: 1.2rem; 
        }
        .advice-execute-btn {
            display: block;
            width: 100%;
            margin-top: 0.75rem;
            padding: 0.5rem 1rem;
            background: linear-gradient(135deg, var(--accent-gold), #8B6914);
            border: none;
            border-radius: 6px;
            color: #1a1a2e;
            font-weight: bold;
            font-size: 0.9rem;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.1s;
        }
        .advice-execute-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 2px 8px rgba(212,175,55,0.4);
        }
        .advice-execute-btn:active {
            transform: scale(0.98);
        }
        
        /* Fix #7: Advice buttons row with "Ne pas suivre" button */
        .advice-buttons-row {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }
        .advice-buttons-row .advice-execute-btn {
            flex: 2;
            margin-top: 0;
        }
        .advice-decline-btn {
            flex: 1;
            padding: 0.5rem 0.5rem;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            color: rgba(240,234,214,0.8);
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .advice-decline-btn:hover {
            background: rgba(255,255,255,0.2);
            color: var(--text-light);
        }
        
        /* === VERSION BADGE === */
        .version-badge {
            position: fixed;
            bottom: 10px;
            left: 10px;
            font-size: 0.7rem;
            color: rgba(240,234,214,0.4);
            z-index: 1;
            cursor: pointer;
            transition: color 0.2s;
        }
        .version-badge:hover { color: var(--accent-gold); }
        .menu-version {
            margin-top: 2rem;
            font-size: 0.75rem;
            color: rgba(240,234,214,0.5);
            text-align: center;
            cursor: pointer;
            transition: color 0.2s;
        }
        .menu-version:hover { color: var(--accent-gold); }
        
        /* === BOUTONS DE TEST === */
        .test-scenarios {
            margin-top: 1.5rem;
            text-align: center;
            padding: 1rem;
            background: rgba(139, 69, 19, 0.3);
            border: 1px dashed var(--accent-gold);
            border-radius: 8px;
        }
        .test-scenarios-title {
            font-size: 0.8rem;
            color: var(--accent-gold);
            margin-bottom: 0.5rem;
        }
        .test-scenarios-buttons {
            display: flex;
            gap: 0.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        .test-btn {
            padding: 0.4rem 0.8rem;
            font-size: 0.75rem;
            background: rgba(0,0,0,0.5);
            border: 1px solid var(--accent-gold);
            color: var(--text-light);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .test-btn:hover {
            background: var(--accent-gold);
            color: var(--bg-dark);
        }
        
        /* === CHANGELOG MODAL === */
        .changelog-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 500;
        }
        .changelog-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(180deg, #1a2f1a 0%, #0a0f0d 100%);
            border: 2px solid var(--accent-gold);
            border-radius: 12px;
            padding: 1.5rem;
            max-width: 600px;
            width: 90vw;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 501;
        }
        .changelog-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-gold);
        }
        .changelog-modal-title {
            color: var(--accent-gold);
            font-size: 1.3rem;
            font-weight: bold;
        }
        .changelog-modal-close {
            background: none;
            border: none;
            color: var(--text-light);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.2rem 0.5rem;
        }
        .changelog-modal-close:hover { color: var(--accent-gold); }
        .changelog-filters {
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(212,168,75,0.2);
        }
        .changelog-filter-select {
            width: 100%;
            padding: 0.5rem;
            background: rgba(0,0,0,0.3);
            border: 1px solid var(--border-gold);
            border-radius: 4px;
            color: var(--text-light);
            font-size: 0.9rem;
            cursor: pointer;
        }
        .changelog-filter-select:focus {
            outline: none;
            border-color: var(--accent-gold);
        }
        .changelog-filter-select option {
            background: #1a2f1a;
            color: var(--text-light);
        }
        .changelog-content {
            max-height: 50vh;
            overflow-y: auto;
        }
        .changelog-version {
            margin-bottom: 1rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid rgba(212,168,75,0.2);
        }
        .changelog-version:last-child { border-bottom: none; }
        .changelog-version-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 0.3rem;
        }
        .changelog-version-number {
            color: var(--accent-gold);
            font-weight: bold;
            font-size: 1rem;
        }
        .changelog-version-date {
            color: rgba(240,234,214,0.5);
            font-size: 0.75rem;
        }
        .changelog-version-title {
            color: var(--text-light);
            font-size: 0.9rem;
            margin-bottom: 0.4rem;
        }
        .changelog-changes {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .changelog-changes li {
            font-size: 0.8rem;
            color: rgba(240,234,214,0.7);
            padding: 0.15rem 0;
            padding-left: 1rem;
            position: relative;
        }
        .changelog-changes li::before {
            content: '•';
            color: var(--accent-gold);
            position: absolute;
            left: 0;
        }
        
        /* === ARBITRE MODAL === */
        .arbiter-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(10, 15, 13, 0.98);
            border: 2px solid var(--accent-gold);
            border-radius: 12px;
            padding: 1.5rem;
            z-index: 400;
            text-align: center;
            min-width: 300px;
        }
        .arbiter-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.8);
            z-index: 399;
        }
        .arbiter-title { color: var(--accent-gold); font-size: 1.1rem; margin-bottom: 1rem; }
        .arbiter-result { font-size: 1rem; margin: 1rem 0; white-space: pre-line; }
        .arbiter-result.accepted { color: var(--bid-propose); }
        .arbiter-result.refused { color: var(--accent-red); }
        .arbiter-btn {
            padding: 0.5rem 1.5rem;
            background: var(--accent-gold);
            color: var(--bg-dark);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        
        /* === RESPONSIVE DESIGN AMÉLIORÉ === */
        
        /* Table de jeu - structure de base */
        .game-table {
            min-height: 600px;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }
        
        /* === POSITIONS DES JOUEURS === */
        /* Nord - en haut au centre, sous le header */
        .player-area.north {
            top: 10px;
        }
        .player-area.north .player-info {
            margin-bottom: 15px;
            z-index: 20;
        }
        .player-area.north .bot-cards {
            margin-top: 15px;
        }
        
        /* Sud - en bas, au-dessus de la barre d'info */
        .player-area.south {
            bottom: 35px;
            width: auto;
            max-width: 90%;
        }
        .player-area.south .hand-cards {
            overflow-x: auto;
            overflow-y: visible;
            padding: 15px 15px 10px 26px; /* padding-top à 15px pour effet survol, padding-left à 26px pour voir la 1ère carte */
            justify-content: flex-start; /* Aligné à gauche pour permettre le scroll */
            /* Garantir un espacement minimum pour que les cartes soient cliquables */
            min-width: 0;
        }
        .player-area.south .hand-cards .card {
            flex-shrink: 0;
            /* Espacement minimum garanti pour pouvoir cliquer */
            min-width: 25px;
        }
        
        /* Est - à droite, centré verticalement */
        .player-area.east {
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        /* Limiter la hauteur des cartes Est pour éviter le débordement */
        .player-area.east .bot-cards {
            max-height: calc(100vh - 280px);
            overflow: hidden;
        }
        
        /* Ouest - à gauche, centré verticalement */
        .player-area.west {
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        /* Limiter la hauteur des cartes Ouest pour éviter le débordement */
        .player-area.west .bot-cards {
            max-height: calc(100vh - 280px);
            overflow: hidden;
        }
        
        /* Info joueurs Est/Ouest - compact et lisible */
        .player-area.east .player-info, 
        .player-area.west .player-info {
            flex-direction: column;
            align-items: center;
            padding: 0.3rem 0.5rem;
            min-width: 70px;
        }
        .player-area.east .player-name, 
        .player-area.west .player-name {
            font-size: 0.8rem;
            text-align: center;
        }
        .player-area.east .player-avatar,
        .player-area.west .player-avatar {
            margin-right: 0;
        }
        .player-area.east .player-elo, 
        .player-area.west .player-elo {
            font-size: 0.6rem;
        }
        .player-area.east .player-score, 
        .player-area.west .player-score {
            font-size: 0.7rem;
        }
        
        /* === SCOREBOARD === */
        /* Positionné en haut, aligné à droite à 80px du bord */
        .scoreboard {
            position: fixed;
            top: calc(var(--header-height) + 28px);
            right: 80px;
            max-width: 120px;
            font-size: 0.7rem;
            padding: 0.4rem 0.5rem;
            z-index: 30;
        }
        .scoreboard-title { font-size: 0.6rem; }
        .scoreboard .score-row { font-size: 0.65rem; padding: 0.1rem 0; }
        
        /* === CONTRACT DISPLAY === */
        /* Positionné en haut à gauche à 80px */
        .contract-display {
            position: fixed;
            top: calc(var(--header-height) + 28px);
            left: 80px;
        }
        
        /* === PANNEAU D'ANNONCES === */
        /* Positionné au centre, entre le joueur Sud et le centre de la table */
        .bidding-panel {
            position: absolute;
            bottom: auto;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 280px;
            max-width: 400px;
            padding: 0.6rem;
            z-index: 50;
            max-height: 250px;
            overflow-y: auto;
        }
        .bid-history {
            max-height: 60px;
        }
        
        /* === MEDIA QUERIES === */
        
        /* Écrans larges (> 1200px) - plein confort */
        @media (min-width: 1200px) {
            .player-area.south {
                bottom: 40px;
            }
            .bidding-panel {
                max-width: 450px;
            }
            .player-area.east .bot-cards,
            .player-area.west .bot-cards {
                max-height: calc(100vh - 250px);
            }
        }
        
        /* Écrans moyens (900px - 1200px) */
        @media (max-width: 1200px) {
            .player-area.east {
                right: 5px;
            }
        }
        
        /* Tablettes et petits écrans (700px - 900px) */
        @media (max-width: 900px) {
            .game-table { min-height: 550px; }
            
            /* Scoreboard - taille réduite */
            .scoreboard { 
                max-width: 95px;
                font-size: 0.6rem;
                padding: 0.3rem 0.4rem;
            }
            .scoreboard-title { font-size: 0.55rem; }
            .scoreboard .score-row { font-size: 0.55rem; }
            
            .contract-value { font-size: 0.85rem; }
            
            .team-tricks { 
                top: calc(var(--header-height) + 144px);
            }
            
            .advice-btn {
                left: calc(50% + 150px);
                bottom: 50px;
            }
            
            .player-area.north { top: 5px; }
            .player-area.south { bottom: 30px; max-width: 75%; }
            .player-area.east { right: 3px; }
            .player-area.west { left: 3px; }
            
            .player-area.east .bot-cards,
            .player-area.west .bot-cards {
                max-height: calc(100vh - 300px);
            }
            
            .bidding-panel {
                min-width: 250px;
                max-width: 320px;
                padding: 0.5rem;
            }
            .bid-btn { padding: 0.4rem 0.8rem; font-size: 1rem; }
            
            .hand-cards .card { margin-left: -22px; }
            .bot-cards .card { width: 38px; height: 57px; margin-top: -26px; }
        }
        
        /* Smartphones larges (500px - 700px) */
        @media (max-width: 700px) {
            .game-table { min-height: 450px; }
            
            /* Scoreboard - taille réduite */
            .scoreboard { 
                max-width: 85px;
                font-size: 0.55rem;
                padding: 0.25rem 0.35rem;
            }
            .scoreboard-title { font-size: 0.5rem; margin-bottom: 0.2rem; }
            .scoreboard .score-row { font-size: 0.5rem; }
            
            /* Nord : nom AU-DESSUS des cartes */
            .player-area.north { 
                top: 3px;
                flex-direction: column;
            }
            .player-area.north .player-info {
                order: -1; /* Mettre le nom en premier (au-dessus) */
                margin-bottom: 8px;
            }
            .player-area.north .bot-cards {
                margin-top: 12px;
            }
            .player-area.north .bot-cards .card {
                width: 32px;
                height: 48px;
                margin-left: -17px;
            }
            
            .player-area.south { 
                bottom: 25px; 
                max-width: 70%;
            }
            .player-area.south .hand-cards .card { 
                width: 45px; 
                height: 67px; 
                margin-left: -26px;
            }
            
            .player-area.east, .player-area.west { 
                top: 50%;
            }
            .player-area.east .bot-cards, 
            .player-area.west .bot-cards {
                max-height: 220px;
            }
            .bot-cards .card { 
                width: 28px; 
                height: 42px; 
                margin-top: -26px;
            }
            
            /* Panneau d'annonces plus compact et décalé vers le bas */
            .bidding-panel {
                top: 55%;
                min-width: 200px;
                max-width: 260px;
                padding: 0.4rem;
                max-height: 180px;
            }
            .bidding-title { font-size: 0.85rem; margin-bottom: 0.3rem; }
            .bid-btn { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
            .bid-history { max-height: 45px; }
            .bid-history-item { font-size: 0.55rem; padding: 0.1rem 0.2rem; }
            
            /* Bulles d'annonces plus petites */
            .player-bubble {
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }
            
            .advice-btn { 
                left: auto;
                right: 5px;
                bottom: 45px;
                padding: 0.25rem 0.5rem; 
                font-size: 0.7rem; 
            }
            .advice-panel { 
                bottom: auto;
                top: 90px;
                right: 5px; 
                max-width: 220px; 
            }
            
            .center-area { width: 120px; height: 90px; }
        }
        
        /* Smartphones étroits (< 500px) */
        @media (max-width: 500px) {
            :root { --header-height: 40px; }
            .header { padding: 0.4rem 0.8rem; }
            .logo { font-size: 1.1rem; }
            
            .game-table { min-height: 400px; }
            
            .player-info { padding: 0.15rem 0.25rem; }
            .player-name { font-size: 0.65rem; }
            .player-avatar { font-size: 0.8rem; }
            .player-elo { display: none; } /* Cacher ELO sur très petits écrans */
            
            .player-area.north .bot-cards .card {
                width: 26px;
                height: 39px;
                margin-left: -15px;
            }
            
            .player-area.south { 
                bottom: 22px;
                max-width: 65%;
            }
            /* Taille par défaut (normale) sur mobile */
            .player-area.south .hand-cards .card { 
                width: 38px; 
                height: 57px; 
                margin-left: -28px;
            }
            /* Taille GRANDE sur mobile */
            .cards-large .player-area.south .hand-cards .card,
            .player-area.south .hand-cards.cards-large .card { 
                width: 48px; 
                height: 72px; 
                margin-left: -32px;
            }
            /* Taille PETITE sur mobile */
            .cards-small .player-area.south .hand-cards .card,
            .player-area.south .hand-cards.cards-small .card { 
                width: 32px; 
                height: 48px; 
                margin-left: -24px;
            }
            
            .player-area.east, .player-area.west {
                top: 50%;
            }
            .player-area.east .bot-cards, 
            .player-area.west .bot-cards {
                max-height: 180px;
            }
            /* Taille par défaut (normale) des bot-cards sur mobile */
            .bot-cards .card { 
                width: 24px; 
                height: 36px; 
                margin-top: -26px;
            }
            /* Taille GRANDE des bot-cards sur mobile */
            .cards-large .bot-cards .card { 
                width: 30px; 
                height: 45px; 
                margin-top: -32px;
            }
            /* Taille PETITE des bot-cards sur mobile */
            .cards-small .bot-cards .card { 
                width: 20px; 
                height: 30px; 
                margin-top: -22px;
            }
            
            .bidding-panel { 
                top: 55%;
                min-width: 180px;
                max-width: 230px;
                padding: 0.3rem;
                max-height: 200px;
            }
            .bidding-title { font-size: 0.8rem; margin-bottom: 0.25rem; }
            .bid-btn { padding: 0.25rem 0.4rem; font-size: 0.75rem; }
            .bid-history { max-height: 40px; }
            
            .center-area { width: 100px; height: 75px; }
            .played-card .card { width: 35px; height: 52px; }
            
            /* Scoreboard compact */
            .scoreboard {
                max-width: 75px;
                font-size: 0.5rem;
                padding: 0.2rem 0.3rem;
            }
            
            .player-bubble {
                font-size: 0.7rem;
                padding: 0.2rem 0.4rem;
            }
        }
        
        /* === ÉCRANS DE FAIBLE HAUTEUR (landscape mobile, écrans larges mais bas) === */
        @media (max-height: 600px) {
            :root { --header-height: 38px; }
            .header { padding: 0.3rem 0.8rem; }
            .logo { font-size: 1rem; }
            
            .game-table { 
                min-height: auto;
                height: calc(100vh - 45px);
            }
            
            /* Réduire tous les éléments */
            .player-info { padding: 0.15rem 0.3rem; }
            .player-name { font-size: 0.7rem; }
            .player-avatar { font-size: 0.8rem; }
            .player-elo { display: none; }
            
            /* Nord : très compact */
            .player-area.north {
                top: 2px;
            }
            .player-area.north .player-info {
                margin-bottom: 2px;
            }
            .player-area.north .bot-cards {
                margin-top: 10px;
            }
            .player-area.north .bot-cards .card {
                width: 28px;
                height: 42px;
                margin-left: -16px;
            }
            
            /* Sud : remonté */
            .player-area.south {
                bottom: 20px;
            }
            .player-area.south .hand-cards .card {
                width: 42px;
                height: 63px;
                margin-left: -25px;
            }
            
            /* Est/Ouest : cartes très compactes */
            .player-area.east, .player-area.west {
                top: 50%;
            }
            .player-area.east .bot-cards,
            .player-area.west .bot-cards {
                max-height: 180px;
            }
            /* Dimensions inversées pour rotation 90° (width > height pour ratio portrait après rotation) */
            .player-area.east .bot-cards .card,
            .player-area.west .bot-cards .card {
                width: 36px;
                height: 24px;
                margin-top: -24px;
            }
            
            /* Panneau d'annonces très compact */
            .bidding-panel {
                bottom: auto;
                top: 45%;
                transform: translate(-50%, -50%);
                max-height: none;
                min-width: 200px;
                max-width: 280px;
                padding: 0.3rem;
            }
            .bidding-title { font-size: 0.8rem; margin-bottom: 0.2rem; }
            .bid-btn { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
            .bid-history { max-height: 35px; }
            .bid-history-item { font-size: 0.55rem; }
            
            /* Scoreboard compact */
            .scoreboard {
                padding: 0.2rem 0.3rem;
                font-size: 0.55rem;
            }
            .scoreboard-title { font-size: 0.5rem; margin-bottom: 0.15rem; }
            
            /* Centre réduit */
            .center-area { width: 110px; height: 80px; }
            .played-card .card { width: 36px; height: 54px; }
            
            /* Barre d'info compacte */
            .game-info-bar { padding: 0.2rem 0.5rem; font-size: 0.65rem; }
            
            .player-bubble {
                font-size: 0.7rem;
                padding: 0.2rem 0.4rem;
            }
        }
        
        /* Combinaison : petit écran ET faible hauteur */
        @media (max-width: 600px) and (max-height: 500px) {
            .player-area.north .bot-cards .card {
                width: 22px;
                height: 33px;
                margin-left: -14px;
            }
            .player-area.south .hand-cards .card {
                width: 35px;
                height: 52px;
                margin-left: -26px;
            }
            /* Dimensions inversées pour rotation 90° */
            .player-area.east .bot-cards .card,
            .player-area.west .bot-cards .card {
                width: 30px;
                height: 20px;
                margin-top: -22px;
            }
            .player-area.east .bot-cards,
            .player-area.west .bot-cards {
                max-height: 140px;
            }
            .bidding-panel {
                bottom: auto;
                top: 45%;
                transform: translate(-50%, -50%);
                max-height: none;
                min-width: 170px;
                max-width: 220px;
            }
            .center-area { width: 90px; height: 65px; }
            .played-card .card { width: 30px; height: 45px; }
        }
        
        /* === TRÈS FAIBLE HAUTEUR (artifact Claude, fenêtre très compressée) === */
        @media (max-height: 450px) {
            :root { --header-height: 32px; }
            .header { padding: 0.2rem 0.5rem; }
            .logo { font-size: 0.9rem; }
            
            .game-table { 
                height: calc(100vh - 35px);
                min-height: 250px;
            }
            
            /* Nord : très compact, nom au-dessus */
            .player-area.north {
                top: 0;
            }
            .player-area.north .player-info {
                padding: 0.1rem 0.2rem;
                margin-bottom: 1px;
            }
            .player-area.north .bot-cards {
                margin-top: 8px;
            }
            .player-area.north .bot-cards .card {
                width: 20px;
                height: 30px;
                margin-left: -12px;
            }
            
            /* Sud : CARTES JOUABLES */
            .player-area.south {
                bottom: 18px;
                max-width: 98%;
            }
            .player-area.south .hand-cards {
                padding: 3px 15px 5px 26px;
                -webkit-overflow-scrolling: touch;
            }
            .player-area.south .hand-cards .card {
                width: 38px;
                height: 57px;
                margin-left: -10px;
            }
            .player-area.south .player-info {
                padding: 0.1rem 0.3rem;
            }
            
            /* Est/Ouest : masquer les cartes, garder juste le nom */
            .player-area.east, .player-area.west {
                top: 45%;
            }
            .player-area.east .bot-cards,
            .player-area.west .bot-cards {
                max-height: 100px;
            }
            /* Dimensions inversées pour rotation 90° */
            .player-area.east .bot-cards .card,
            .player-area.west .bot-cards .card {
                width: 24px;
                height: 16px;
                margin-top: -18px;
            }
            
            /* Panneau d'annonces minimaliste */
            .bidding-panel {
                bottom: auto;
                top: 45%;
                transform: translate(-50%, -50%);
                max-height: none;
                min-width: 150px;
                max-width: 200px;
                padding: 0.2rem;
            }
            .bidding-title { font-size: 0.7rem; margin-bottom: 0.15rem; }
            .bid-btn { padding: 0.2rem 0.4rem; font-size: 0.7rem; }
            .bid-history { max-height: 30px; }
            .bid-history-item { font-size: 0.5rem; padding: 0.05rem 0.15rem; }
            
            /* Scoreboard minimal */
            .scoreboard {
                padding: 0.15rem 0.25rem;
                font-size: 0.5rem;
                max-width: 70px;
            }
            .scoreboard-title { font-size: 0.45rem; margin-bottom: 0.1rem; }
            .scoreboard .score-row { font-size: 0.45rem; padding: 0.05rem 0; }
            
            /* Centre très réduit */
            .center-area { width: 80px; height: 60px; }
            .played-card .card { width: 28px; height: 42px; }
            
            /* Barre d'info minimale */
            .game-info-bar { padding: 0.15rem 0.4rem; font-size: 0.55rem; }
            
            .player-bubble {
                font-size: 0.6rem;
                padding: 0.15rem 0.3rem;
            }
            
            .player-info { padding: 0.1rem 0.2rem; }
            .player-name { font-size: 0.6rem; }
            .player-avatar { font-size: 0.7rem; }
            .player-elo, .player-score { font-size: 0.5rem; }
        }
        
        /* === APPAREILS TACTILES (tablettes, smartphones) === */
        /* Zones de tap plus grandes pour les gros doigts */
        @media (pointer: coarse) {
            .bid-btn { 
                min-height: 44px; 
                padding: 0.5rem 0.8rem; 
                font-size: 0.9rem;
            }
            .suit-btn { 
                min-height: 44px; 
                min-width: 44px; 
                font-size: 1.4rem;
            }
            .bid-suit-btn {
                min-height: 40px;
                min-width: 40px;
                font-size: 1.2rem;
            }
            /* Boutons d'action */
            .nav-btn {
                min-height: 44px;
                padding: 0.5rem 1rem;
            }
            .last-trick-btn, .advice-btn {
                min-height: 44px;
                padding: 0.5rem 1rem;
            }
            /* Réduire légèrement les marges pour compenser */
            .bid-row { margin-bottom: 0.3rem; }
            /* Panneau d'annonces plus grand pour accueillir les boutons tactiles */
            .bidding-panel { 
                padding: 0.4rem 0.5rem; 
                max-height: 320px;
            }
        }
        
        /* Tablettes tactiles en mode paysage - plus de place */
        @media (pointer: coarse) and (min-width: 700px) and (min-height: 500px) {
            .bid-btn { 
                min-height: 48px; 
                padding: 0.6rem 1rem; 
                font-size: 1rem;
            }
            .suit-btn { 
                min-height: 50px; 
                min-width: 50px; 
                font-size: 1.5rem;
            }
            .bidding-panel {
                max-height: 380px;
            }
        }
        
        /* === MODE PORTRAIT MOBILE (écran plus haut que large) === */
        /* Inspiré de Whisthub.com - cacher les dos de cartes des bots */
        @media (max-aspect-ratio: 1/1) {
            /* Cacher les dos de cartes des bots (Nord, Est, Ouest) */
            .player-area.north .bot-cards,
            .player-area.east .bot-cards,
            .player-area.west .bot-cards {
                display: none;
            }
            
            /* Repositionner les zones des joueurs pour le mode portrait */
            .player-area.north {
                top: 10px;
            }
            
            .player-area.east {
                right: 10px;
                top: 30%;
            }
            
            .player-area.west {
                left: 10px;
                top: 30%;
            }
            
            /* Main du joueur Sud : occuper toute la largeur avec marges */
            .player-area.south {
                bottom: 15px;
                left: 0;
                right: 0;
                transform: none !important;
                width: 100% !important;
                max-width: 100% !important;
                padding: 0 15px;
                box-sizing: border-box;
                overflow: visible !important;
            }
            
            /* Container des cartes : centré avec overflow visible */
            .player-area.south .hand-cards {
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 0;
                box-sizing: border-box;
                overflow: visible !important;
                /* Espace en haut pour les cartes qui montent au hover */
                padding-top: 15px;
            }
            
            /* Cartes : taille raisonnable et espacement adaptatif */
            .player-area.south .hand-cards .card {
                width: 48px;
                height: 72px;
                margin-left: -20px;
                min-width: 25px;
                flex-shrink: 0;
            }
            
            .player-area.south .hand-cards .card:first-child {
                margin-left: 0;
            }
            
            /* Centre de jeu plus compact en portrait */
            .center-area {
                width: 160px;
                height: 120px;
                top: 42%;
            }
            
            .played-card .card {
                width: 45px;
                height: 68px;
            }
            
            /* Scoreboard et contrat repositionnés */
            .scoreboard {
                right: 10px;
                top: calc(var(--header-height) + 10px);
                max-width: 100px;
                font-size: 0.7rem;
            }
            
            .contract-display {
                left: 10px;
                top: calc(var(--header-height) + 10px);
            }
            
            .team-tricks {
                right: 10px;
                top: calc(var(--header-height) + 100px);
                min-width: 100px;
            }
            
            /* Panneau d'enchères adapté */
            .bidding-panel {
                max-width: 90vw;
                min-width: 200px;
            }
            
            /* Info joueur plus compacte */
            .player-info {
                padding: 0.25rem 0.5rem;
            }
            
            .player-name {
                font-size: 0.75rem;
            }
            
            .player-avatar {
                font-size: 0.9rem;
            }
            
            /* Fix #1: Bouton "Dernier pli" en bas à gauche, au-dessus de la main */
            .last-trick-btn {
                bottom: 110px;
                top: auto;
                right: auto;
                left: 10px;
                transform: none;
                font-size: 0.7rem;
                padding: 0.3rem 0.6rem;
                z-index: 45;
            }
            
            /* Bouton conseil en bas à droite */
            .advice-btn {
                bottom: 110px;
                top: auto;
                left: auto;
                right: 10px;
                transform: none;
            }
        }
        
        /* === MODE PORTRAIT TRÈS ÉTROIT (smartphones < 400px) === */
        @media (max-aspect-ratio: 1/1) and (max-width: 400px) {
            .player-area.south {
                padding: 0 10px;
            }
            
            .player-area.south .hand-cards {
                padding-top: 12px;
            }
            
            /* Cartes un peu plus petites */
            .player-area.south .hand-cards .card {
                width: 42px;
                height: 63px;
                margin-left: -18px;
            }
            
            .center-area {
                width: 130px;
                height: 100px;
            }
            
            .played-card .card {
                width: 38px;
                height: 57px;
            }
            
            .scoreboard, .contract-display, .team-tricks {
                font-size: 0.6rem;
                padding: 0.3rem;
            }
            
            .bidding-panel {
                padding: 0.3rem;
            }
            
            .bid-btn {
                padding: 0.3rem 0.5rem;
                font-size: 0.75rem;
            }
        }
        
        /* === MODE PORTRAIT MOYEN (400-600px) === */
        @media (max-aspect-ratio: 1/1) and (min-width: 401px) and (max-width: 600px) {
            .player-area.south {
                padding: 0 12px;
            }
            
            .player-area.south .hand-cards .card {
                width: 46px;
                height: 69px;
                margin-left: -18px;
            }
        }
        
        /* === MODE PAYSAGE MOBILE (hauteur limitée) === */
        @media (max-height: 500px) and (orientation: landscape) {
            .player-area.north .bot-cards,
            .player-area.east .bot-cards,
            .player-area.west .bot-cards {
                display: none;
            }
            
            .player-area.south {
                bottom: 5px;
            }
            
            .player-area.north {
                top: 5px;
            }
            
            .center-area {
                width: 150px;
                height: 100px;
                top: 48%;
            }
            
            /* Panneau d'annonces repositionné sur le côté en mode paysage */
            .bidding-panel {
                left: 10px;
                right: auto;
                top: 50%;
                transform: translateY(-50%);
                max-width: 180px;
                min-width: 150px;
                max-height: 90%;
                padding: 0.3rem;
            }
            .bidding-panel .bid-row-label {
                min-width: 60px;
                font-size: 0.6rem;
            }
            .bidding-panel .bid-suit-btn {
                width: 22px;
                height: 22px;
                font-size: 0.9rem;
            }
            .bid-rows-scrollable {
                max-height: 150px;
            }
        }


/* ==================== AUTHENTIFICATION ==================== */

.welcome-message {
    color: var(--text-gold);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Modal d'authentification */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-panel {
    background: var(--bg-dark);
    border: 2px solid var(--border-gold);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-gold);
}

.modal-title {
    color: var(--text-gold);
    text-align: center;
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
}

.auth-modal {
    max-width: 360px;
}

.auth-error {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    color: #ff6b6b;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-success {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid #28a745;
    color: #5fd068;
    padding: 0.75rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.auth-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.3rem;
    font-style: italic;
}

.auth-field.auth-checkbox {
    margin: 1rem 0;
}

.auth-field.auth-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.auth-field.auth-checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--accent-gold);
}

.auth-field.auth-checkbox a {
    color: var(--text-gold);
    text-decoration: underline;
}

/* Modal CGU */
.cgu-modal {
    text-align: left;
}

.cgu-content {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.cgu-content h3 {
    color: var(--text-gold);
    font-size: 1rem;
    margin: 1.5rem 0 0.5rem 0;
}

.cgu-content h3:first-child {
    margin-top: 0;
}

.cgu-content p {
    margin: 0.5rem 0;
}

.cgu-content ul {
    margin: 0.5rem 0 0.5rem 1.5rem;
    padding: 0;
}

.cgu-content li {
    margin: 0.3rem 0;
}

.cgu-content a {
    color: var(--text-gold);
}

.cgu-date {
    margin-top: 2rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-field label {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.auth-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 1rem;
    box-sizing: border-box;
}

.auth-input:focus {
    outline: none;
    border-color: var(--text-gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.auth-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.auth-btn {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-btn.primary {
    background: linear-gradient(135deg, var(--border-gold), #b8941f);
    color: var(--bg-dark);
}

.auth-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.auth-btn.secondary {
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--text-gold);
    margin-top: 0.5rem;
}

.auth-btn.secondary:hover {
    background: rgba(212, 175, 55, 0.1);
}

.auth-btn.danger {
    border-color: #F44336;
    color: #F44336;
}

.auth-btn.danger:hover {
    background: rgba(244, 67, 54, 0.2);
}

/* Bouton avec texte de danger (icône seulement en rouge) */
.auth-btn.danger-text {
    padding: 0.5rem 0.75rem;
    min-width: auto;
}
.auth-btn.danger-text:hover {
    border-color: #F44336;
    color: #F44336;
    background: rgba(244, 67, 54, 0.1);
}

/* Notice de blocage */
.blocked-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 6px;
    color: #F44336;
    font-size: 0.85rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-gold);
    opacity: 0.3;
}

.auth-divider span {
    padding: 0 0.75rem;
}

.auth-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    margin-top: 1rem;
    font-style: italic;
}

/* Profil utilisateur */
.profile-modal {
    max-width: 320px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.profile-avatar {
    font-size: 3rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
}

.profile-info {
    flex: 1;
}

.profile-name {
    color: var(--text-light);
    font-size: 1.25rem;
    margin: 0 0 0.25rem 0;
}

.profile-username {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.profile-role {
    color: var(--text-gold);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.profile-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.profile-stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-gold);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* === PROFIL ÉTENDU AVEC STATS === */
.profile-modal-large {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gold-dim);
    margin-bottom: 1rem;
}

.profile-elo-badge {
    text-align: center;
    background: linear-gradient(135deg, rgba(212, 168, 75, 0.15), rgba(212, 168, 75, 0.05));
    border: 1px solid var(--border-gold);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    width: 100px;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: help;
}

.profile-elo-badge .elo-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-gold);
}

.profile-elo-badge .elo-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.profile-elo-badge .elo-trend {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Badge Bot ELO (entraînement) - maintenant à gauche */
.profile-elo-badge.bot-elo-badge {
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.15), rgba(100, 149, 237, 0.05));
    border-color: rgba(100, 149, 237, 0.4);
}

.profile-elo-badge.bot-elo-badge .elo-value {
    color: #6495ED;
}

.profile-elo-badge.bot-elo-badge .elo-label {
    color: rgba(100, 149, 237, 0.8);
}

/* Container pour les deux badges ELO côte à côte */
.profile-elo-badges {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Filtres de stats */
.stats-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.stats-filter-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    border: 1px solid var(--border-gold-dim);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.stats-filter-btn:hover {
    border-color: var(--border-gold);
    color: var(--text-light);
}

.stats-filter-btn.active {
    background: linear-gradient(135deg, var(--accent-gold), #c49a3d);
    color: var(--bg-dark);
    border-color: var(--accent-gold);
}

/* Loading */
.stats-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.stats-loading .loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--border-gold-dim);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Vue d'ensemble */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 12px;
}

.overview-stat {
    text-align: center;
}

.overview-stat .stat-big-value {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-gold);
}

.overview-stat .stat-big-value.positive {
    color: #4CAF50;
}

.overview-stat .stat-big-value.negative {
    color: #F44336;
}

.overview-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Sections de stats */
.stats-section {
    margin-bottom: 1.25rem;
}

.stats-section h3 {
    font-size: 0.9rem;
    color: var(--text-gold);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-gold-dim);
}

/* Stats par contrat */
.contract-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contract-stat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.contract-label {
    width: 130px;
    flex-shrink: 0;
    color: var(--text-light);
}

.contract-bar-container {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.contract-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.contract-value {
    width: 100px;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Défense */
.defense-section {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 8px;
}

.defense-stats {
    font-size: 0.9rem;
    color: var(--text-light);
}

.defense-rate {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-gold);
}

.defense-detail {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Partenariats */
.partnerships-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.partnership-category h4 {
    font-size: 0.85rem;
    color: var(--text-gold);
    margin-bottom: 0.5rem;
}

.partner-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 0.25rem 0;
}

.partner-name {
    color: var(--text-light);
}

.partner-stat {
    color: var(--text-muted);
}

/* Stats vides */
.stats-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.stats-empty-hint {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 600px) {
    .profile-modal-large {
        max-width: 100%;
        margin: 0.5rem;
    }
    
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contract-label {
        width: 100px;
        font-size: 0.75rem;
    }
    
    .contract-value {
        width: 80px;
        font-size: 0.7rem;
    }
    
    .partnerships-section {
        grid-template-columns: 1fr;
    }
    
    .profile-header {
        flex-wrap: wrap;
    }
    
    .profile-elo-badge {
        margin-left: 0;
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* === MODAL RECHERCHE JOUEURS === */
.search-modal {
    max-width: 450px;
    width: 100%;
}

.search-modal h2 {
    color: var(--text-gold);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.search-input-container {
    position: relative;
    margin-bottom: 1rem;
}

.search-input-container .search-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.search-results {
    max-height: 300px;
    overflow-y: auto;
}

.search-hint, .search-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 1rem;
    font-size: 0.9rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-result-item:hover {
    background: rgba(212, 168, 75, 0.1);
}

.result-avatar {
    font-size: 1.5rem;
}

.result-info {
    flex: 1;
}

.result-name {
    display: block;
    color: var(--text-light);
    font-weight: 500;
}

.result-username {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.result-elo {
    color: var(--text-gold);
    font-weight: bold;
    font-size: 0.9rem;
}

/* === MODAL AMIS === */
.friends-modal {
    max-width: 450px;
    width: 100%;
}

.friends-modal h2 {
    color: var(--text-gold);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.friends-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-gold-dim);
    padding-bottom: 0.5rem;
}

.friends-tab {
    flex: 1;
    padding: 0.5rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.15s ease;
    position: relative;
}

.friends-tab:hover {
    background: rgba(212, 168, 75, 0.1);
    color: var(--text-light);
}

.friends-tab.active {
    background: rgba(212, 168, 75, 0.2);
    color: var(--text-gold);
}

.friends-tab .badge {
    position: absolute;
    top: -4px;
    right: 4px;
    background: #F44336;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
}

.friends-content {
    max-height: 350px;
    overflow-y: auto;
}

.friends-loading, .friends-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.friends-empty p {
    margin-bottom: 1rem;
}

.friend-item, .friend-request-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.friend-item:hover, .friend-request-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.friend-avatar {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
    position: relative;
}

.friend-info {
    flex: 1;
    cursor: pointer;
}

.friend-name {
    display: block;
    color: var(--text-light);
    font-weight: 500;
}

.friend-elo {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.friend-actions {
    display: flex;
    gap: 0.5rem;
}

.friend-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s ease;
}

.friend-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.friend-action-btn.accept:hover {
    background: rgba(76, 175, 80, 0.3);
}

.friend-action-btn.reject:hover {
    background: rgba(244, 67, 54, 0.3);
}

.friend-action-btn.challenge:hover {
    background: rgba(255, 193, 7, 0.3);
}

.friend-action-btn.invite:hover {
    background: rgba(33, 150, 243, 0.3);
}

.friend-action-btn.remove:hover {
    background: rgba(244, 67, 54, 0.2);
}

/* Indicateur en ligne */
.online-indicator {
    position: absolute;
    bottom: 2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
}

.online-indicator.online {
    background: #4caf50;
    box-shadow: 0 0 6px #4caf50;
}

.online-indicator.offline {
    background: #666;
}

.friend-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    cursor: pointer;
}

.friend-item.online {
    background: rgba(76, 175, 80, 0.05);
}

.friends-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.5rem 0;
    padding: 0.25rem 0.75rem;
}

.friends-search-btn {
    margin-bottom: 1rem;
}

.friends-search-btn .auth-btn {
    width: 100%;
}

.friends-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Toast d'invitation de table */
.invite-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    max-width: 350px;
}

.invite-toast {
    background: var(--bg-card);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.invite-toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.invite-toast-avatar {
    font-size: 1.5rem;
}

.invite-toast-text {
    flex: 1;
    color: var(--text-light);
    font-size: 0.9rem;
}

.invite-toast-text strong {
    color: var(--gold);
}

.invite-toast-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Écran de login obligatoire */
.login-required {
    text-align: center;
    padding: 3rem 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.login-required h2 {
    color: var(--text-gold);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.login-required p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* === BOUTONS GÉNÉRIQUES === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), #c49a3d);
    color: var(--bg-dark);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold));
    transform: translateY(-1px);
}
.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--text-light);
}
.btn-secondary:hover {
    background: rgba(212, 168, 75, 0.1);
    border-color: var(--accent-gold);
}
.btn-large {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
}
.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

/* === LIENS === */
.link-gold {
    color: var(--accent-gold);
    text-decoration: none;
    transition: opacity 0.15s;
}
.link-gold:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* === BUG REPORT MODAL === */
.bug-report-modal {
    max-width: 500px;
}
.bug-textarea {
    width: 100%;
    min-height: 150px;
    padding: 0.8rem;
    margin: 1rem 0;
    background: rgba(26, 77, 46, 0.3);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}
.bug-textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
}
.bug-textarea::placeholder {
    color: rgba(240, 234, 214, 0.4);
}
.modal-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* === RESPONSIVE HEADER === */
@media (max-width: 600px) {
    .header { padding: 0 0.75rem; }
    .header-icon-btn { width: 36px; height: 36px; }
    .header-icon-btn .icon { font-size: 1.1rem; }
    .header-nav { gap: 0.1rem; }
    .logo-img { height: 30px; }
    .dropdown-menu { min-width: 160px; right: -10px; }
}

/* ==================== ADMIN PANEL ==================== */
.admin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-panel {
    background: var(--bg-dark);
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    width: 95vw;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-gold);
    background: rgba(212, 168, 75, 0.1);
}

.admin-header h2 {
    color: var(--accent-gold);
    margin: 0;
    font-size: 1.3rem;
}

.admin-close {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.admin-close:hover { color: var(--accent-gold); }

.admin-nav {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-gold);
    background: rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
}

.admin-nav-btn {
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.admin-nav-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.admin-nav-btn.active { background: var(--accent-gold); color: var(--bg-dark); border-color: var(--accent-gold); }

.admin-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.admin-loading, .admin-error {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.admin-error { color: var(--accent-red); }

/* Toolbar */
.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-select, .admin-input, .admin-search {
    background: var(--bg-dark);
    border: 1px solid var(--border-gold);
    color: var(--text-light);
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.admin-select:focus, .admin-input:focus, .admin-search:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.admin-search { width: 180px; }

/* Buttons */
.admin-btn {
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.admin-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-btn.primary { background: var(--accent-gold); color: var(--bg-dark); border-color: var(--accent-gold); }
.admin-btn.primary:hover { background: var(--text-gold); }
.admin-btn.success { background: var(--bid-propose); color: var(--bg-dark); border-color: var(--bid-propose); }
.admin-btn.warning { background: #e67e22; color: white; border-color: #e67e22; }
.admin-btn.danger { background: var(--accent-red); color: white; border-color: var(--accent-red); }
.admin-btn.small { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.admin-btn.tiny { padding: 0.2rem 0.4rem; font-size: 0.75rem; }
.admin-btn.active { background: var(--accent-gold); color: var(--bg-dark); }

/* Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-table th, .admin-table td {
    padding: 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(212, 168, 75, 0.2);
}

.admin-table th {
    background: rgba(212, 168, 75, 0.1);
    color: var(--accent-gold);
    font-weight: 600;
    white-space: nowrap;
}

.admin-table tr:hover { background: rgba(212, 168, 75, 0.05); }
.admin-table tr.inactive { opacity: 0.6; }
.admin-table tr.expired { opacity: 0.5; }
.admin-table tr.cancelled { opacity: 0.4; text-decoration: line-through; }
.admin-table tr.used { background: rgba(46, 204, 113, 0.1); }

/* Actions cell pour invitations */
.admin-table .actions-cell { 
    white-space: nowrap; 
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.admin-table .used-by { 
    color: var(--text-muted); 
    font-size: 0.8rem; 
}
.admin-btn.small.warning { 
    background: #e67e22; 
    border-color: #e67e22;
}

/* Tables management */
.table-players {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.player-badge, .bot-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
}
.player-badge {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}
.bot-badge {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}
.type-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    text-transform: uppercase;
}
.type-badge.type-public {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}
.type-badge.type-private {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}
.admin-section h3 {
    margin-bottom: 10px;
    color: var(--gold);
}
.admin-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 5px 0;
}
.admin-input {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 8px 12px;
    border-radius: 4px;
}
.admin-input-small {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    padding: 4px 8px;
    border-radius: 4px;
    width: 80px;
    text-align: center;
}
.admin-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Bot ELO admin page */
.admin-botelo h3 {
    color: var(--text-gold);
    margin-bottom: 0.5rem;
}

.admin-botelo .elo-initial {
    color: var(--text-muted);
    font-style: italic;
}

.admin-botelo .elo-current {
    font-weight: bold;
}

.admin-botelo .elo-current.elo-up {
    color: #22c55e;
}

.admin-botelo .elo-current.elo-down {
    color: #ef4444;
}

/* Table conflict modal */
.table-conflict-modal {
    max-width: 400px;
}

/* User display */
.user-avatar { font-size: 1.2rem; margin-right: 0.3rem; }
.user-avatar.large { font-size: 2.5rem; margin-right: 1rem; }
.user-name { font-weight: 500; }
.user-username { color: var(--text-muted); font-size: 0.8rem; margin-left: 0.3rem; }

/* Badges */
.role-badge, .status-badge, .action-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.role-badge { background: rgba(212, 168, 75, 0.2); color: var(--accent-gold); }
.role-badge.role-superadmin { background: rgba(142, 68, 173, 0.3); color: #9b59b6; }
.role-badge.role-admin { background: rgba(231, 76, 60, 0.3); color: #e74c3c; }
.role-badge.role-tester { background: rgba(52, 152, 219, 0.3); color: #3498db; }
.role-badge.role-member { background: rgba(46, 204, 113, 0.3); color: #2ecc71; }

.status-badge { background: rgba(149, 165, 166, 0.3); color: #95a5a6; }
.status-badge.status-active { background: rgba(46, 204, 113, 0.3); color: #2ecc71; }
.status-badge.status-pending { background: rgba(241, 196, 15, 0.3); color: #f1c40f; }
.status-badge.status-blocked { background: rgba(230, 126, 34, 0.3); color: #e67e22; }
.status-badge.status-banned { background: rgba(231, 76, 60, 0.3); color: #e74c3c; }
.status-badge.status-expired { background: rgba(149, 165, 166, 0.3); color: #7f8c8d; }
.status-badge.status-used { background: rgba(46, 204, 113, 0.3); color: #2ecc71; }
.status-badge.status-cancelled { background: rgba(231, 76, 60, 0.3); color: #e74c3c; }

.action-badge { background: rgba(52, 152, 219, 0.2); color: #3498db; font-size: 0.7rem; }

/* Pagination */
.admin-pagination {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gold);
}

.pagination-dots { color: var(--text-muted); padding: 0.3rem; }

/* Token display */
.token-cell { font-family: monospace; }
.token-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 6px;
    margin: 1rem 0;
}

.token-display code {
    flex: 1;
    font-family: monospace;
    font-size: 1rem;
    color: var(--accent-gold);
    word-break: break-all;
}

/* Stats */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 1rem;
}

.stat-card h3 {
    color: var(--accent-gold);
    font-size: 1rem;
    margin: 0 0 0.75rem 0;
}

.stat-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stat-card li {
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Modal */
.admin-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.admin-modal {
    background: var(--bg-dark);
    border: 2px solid var(--accent-gold);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.admin-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
}

.admin-modal h3 {
    color: var(--accent-gold);
    margin: 0 0 1rem 0;
}

/* User detail */
.user-detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gold);
}

.user-detail-info p {
    margin: 0.4rem 0;
    font-size: 0.9rem;
}

.user-detail-info strong {
    color: var(--text-muted);
    display: inline-block;
    width: 140px;
}

.user-detail-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gold);
}

.user-detail-actions h4 {
    color: var(--accent-gold);
    margin: 0 0 1rem 0;
    font-size: 1rem;
}

.action-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.action-group label {
    color: var(--text-muted);
    min-width: 120px;
    font-size: 0.9rem;
}

.danger-zone {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--accent-red);
}

/* Form */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
}

.form-group small {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gold);
}

.admin-notice {
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    color: #f1c40f;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.details-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .admin-panel { height: 95vh; width: 98vw; }
    .admin-table { font-size: 0.75rem; }
    .admin-table th, .admin-table td { padding: 0.4rem; }
    .admin-toolbar { flex-direction: column; align-items: stretch; }
    .admin-filters { justify-content: center; }
    .user-detail-header { flex-direction: column; text-align: center; }
    .user-avatar.large { margin: 0 0 0.5rem 0; }
}

/* Message de bienvenue invitation */
.auth-welcome {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    color: #ffd700;
}

/* ==================== LOBBY / TABLES MULTIJOUEUR ==================== */

/* Menu cards secondaires */
.menu-cards-secondary {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.menu-card-small {
    background: rgba(26, 77, 46, 0.5);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: var(--text-light);
    transition: all 0.2s;
    min-width: 70px;
    width: 70px;
    text-align: center;
    font-size: 0.85rem;
}

.menu-card-small:hover {
    background: rgba(26, 77, 46, 0.8);
    border-color: var(--accent-gold);
}

.menu-card-small .menu-card-icon {
    font-size: 1.2rem;
}

.menu-card-highlight {
    border: 2px solid var(--accent-gold);
    animation: glow 2s ease-in-out infinite;
}

/* Lobby Screen */
.lobby-screen {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.lobby-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.lobby-title {
    font-size: 1.8rem;
    color: var(--accent-gold);
}

.lobby-actions {
    display: flex;
    gap: 0.75rem;
}

.lobby-content {
    min-height: 400px;
}

.lobby-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(26, 77, 46, 0.3);
    border-radius: 12px;
    border: 1px dashed var(--border-gold);
}

.lobby-empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.lobby-empty h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.lobby-empty p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.lobby-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-gold);
}

/* Tables List */
.tables-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.table-card {
    background: rgba(26, 77, 46, 0.5);
    border: 1px solid var(--border-gold);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.table-card:hover {
    background: rgba(26, 77, 46, 0.8);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.table-code {
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--accent-gold);
    font-weight: bold;
}

.table-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.table-badge.ranked {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.table-badge.bots {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.table-card-body {
    margin-bottom: 0.75rem;
}

.table-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.table-info {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.table-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(212, 168, 75, 0.2);
}

.table-slots {
    font-size: 0.9rem;
    color: var(--accent-gold);
}

/* Table Lobby Screen (salle d'attente) */
.table-lobby-screen {
    flex: 1;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.table-lobby-header {
    text-align: center;
    margin-bottom: 2rem;
}

.table-lobby-title {
    font-size: 1.6rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.table-lobby-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.code-display {
    font-family: monospace;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--accent-gold);
    background: rgba(26, 77, 46, 0.5);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    letter-spacing: 2px;
}

.btn-copy {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.3rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.btn-copy:hover {
    opacity: 1;
}

.table-lobby-config {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.config-item {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(26, 77, 46, 0.3);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.config-item.ranked {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

/* Slots Grid */
.table-lobby-slots {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.slots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 1rem;
    max-width: 600px;
    width: 100%;
}

.slot-card {
    background: rgba(26, 77, 46, 0.5);
    border: 2px solid var(--border-gold);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.slot-card.is-me {
    border-color: var(--accent-gold);
    background: rgba(212, 168, 75, 0.1);
}

.slot-card.empty {
    border-style: dashed;
    opacity: 0.7;
}

/* Positionnement des slots en croix */
.slot-card.north { grid-column: 2; grid-row: 1; }
.slot-card.west { grid-column: 1; grid-row: 2; }
.slot-card.east { grid-column: 3; grid-row: 2; }
.slot-card.south { grid-column: 2; grid-row: 3; }

.slot-position {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.slot-avatar {
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.slot-avatar.empty {
    opacity: 0.5;
}

.slot-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
}

.slot-elo {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.slot-status {
    font-size: 0.7rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
}

.slot-status.bot {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.slot-status.disconnected {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

/* Actions et notices */
.table-lobby-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.auto-start-notice {
    color: #4ade80;
    font-size: 1.1rem;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.waiting-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

.waiting-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(212, 168, 75, 0.3);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modal créer une table */
.create-table-modal {
    max-width: 500px;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 1rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.form-select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 1rem;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.radio-group {
    display: flex;
    gap: 1rem;
}

.radio-label {
    flex: 1;
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s;
}

.radio-label:hover {
    background: rgba(0,0,0,0.3);
}

.radio-label.selected {
    border-color: var(--accent-gold);
    background: rgba(212, 168, 75, 0.1);
}

.radio-label input[type="radio"] {
    display: none;
}

.radio-icon {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

.radio-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.checkbox-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-gold);
    border-radius: 6px;
    cursor: pointer;
}

.checkbox-label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-gold);
}

.checkbox-desc {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 28px;
}

/* Modal rejoindre par code */
.join-code-modal {
    max-width: 400px;
    text-align: center;
}

.code-input {
    font-family: monospace;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Boutons supplémentaires */
.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

.btn-link:hover {
    color: var(--text-light);
}

.btn-danger {
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.5);
    color: #f87171;
}

.btn-danger:hover {
    background: rgba(220, 38, 38, 0.3);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .lobby-header {
        flex-direction: column;
        text-align: center;
    }
    
    .lobby-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .tables-list {
        grid-template-columns: 1fr;
    }
    
    .slots-grid {
        gap: 0.5rem;
    }
    
    .slot-card {
        min-height: 100px;
        padding: 0.75rem;
    }
    
    .slot-avatar {
        font-size: 1.5rem;
    }
    
    .radio-group {
        flex-direction: column;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .menu-cards-secondary {
        flex-direction: column;
        align-items: center;
    }
}

/* === PANNEAU STATUT ÉCART === */
.discard-status-panel {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(40, 30, 20, 0.95);
    border: 2px solid rgba(180, 160, 120, 0.6);
    border-radius: 12px;
    padding: 15px 25px;
    z-index: 100;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.discard-title {
    font-size: 1rem;
    color: rgba(240, 234, 214, 0.9);
    margin-bottom: 12px;
    font-weight: 500;
}

.discard-players {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.discard-player {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.discard-player.done {
    background: rgba(76, 175, 80, 0.3);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.5);
}

.discard-player.waiting {
    background: rgba(255, 193, 7, 0.2);
    color: #ffd54f;
    border: 1px solid rgba(255, 193, 7, 0.4);
    animation: pulse-waiting 1.5s infinite;
}

@keyframes pulse-waiting {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}


/* === ADMIN TOAST === */
.admin-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    z-index: 10001;
    animation: admin-toast-in 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.admin-toast-error {
    background: rgba(211, 47, 47, 0.95);
    color: white;
    border: 1px solid #f44336;
}

.admin-toast-success {
    background: rgba(46, 125, 50, 0.95);
    color: white;
    border: 1px solid #4caf50;
}

.admin-toast-info {
    background: rgba(25, 118, 210, 0.95);
    color: white;
    border: 1px solid #2196f3;
}

@keyframes admin-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}


/* === BUG REPORT NOTICE === */
.bug-report-notice {
    font-size: 0.8rem;
    color: rgba(240, 234, 214, 0.6);
    margin: 10px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    line-height: 1.4;
}

/* === NOUVELLES PAGES DOCUMENTATION === */

/* Navigation dans les pages de règles */
.rules-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    justify-content: center;
}

.rules-nav a {
    color: var(--accent-gold);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.2);
}

.rules-nav a:hover {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

/* Highlight boxes */
.rules-highlight {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05));
    border-left: 4px solid var(--accent-gold);
    padding: 1rem 1.2rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
}

.rules-highlight strong {
    color: var(--accent-gold);
}

/* Hierarchy display */
.hierarchy-display {
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    letter-spacing: 1px;
}

/* Contracts table */
.contracts-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.contracts-table th,
.contracts-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contracts-table th {
    background: rgba(255, 215, 0, 0.2);
    color: var(--accent-gold);
    font-weight: 600;
}

.contracts-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Rules footer links */
.rules-footer {
    margin-top: 2rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.rules-footer a {
    color: var(--accent-gold);
    text-decoration: none;
    margin: 0 0.5rem;
}

.rules-footer a:hover {
    text-decoration: underline;
}

/* Strategy page */
.strategy-intro {
    text-align: center;
    font-size: 1rem;
}

.strategy-box {
    background: rgba(0, 100, 150, 0.15);
    border: 1px solid rgba(100, 200, 255, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.strategy-box h4 {
    color: #64b5f6;
    margin: 0 0 0.5rem 0;
}

.principle-intro {
    font-style: italic;
    color: rgba(240, 234, 214, 0.8);
    margin-bottom: 1rem;
}

/* Scoring page */
.points-table .row-failed {
    background: rgba(244, 67, 54, 0.1);
}

.points-table .row-failed td {
    color: #ef9a9a;
}

/* History page */
.history-page .rules-section {
    position: relative;
}

.history-quote {
    font-style: italic;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    background: rgba(255, 215, 0, 0.08);
    border-radius: 8px;
    text-align: center;
}

.history-timeline {
    list-style: none;
    padding-left: 0;
    border-left: 3px solid var(--accent-gold);
    margin-left: 1rem;
}

.history-timeline li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
}

.history-timeline li::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--accent-gold);
    border-radius: 50%;
}

.history-card {
    background: linear-gradient(135deg, rgba(100, 150, 200, 0.15), rgba(50, 100, 150, 0.1));
    border: 1px solid rgba(100, 150, 200, 0.3);
    border-radius: 10px;
    padding: 1.2rem;
    margin: 1rem 0;
}

.history-card h3 {
    color: #90caf9;
    margin-top: 0;
}

.history-highlight {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.history-highlight h4 {
    color: #81c784;
    margin-top: 0;
}

.history-myth {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.history-myth h4 {
    color: #ffb74d;
    margin-top: 0;
}

.family-tree {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.family-tree pre {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(240, 234, 214, 0.9);
    margin: 0;
    white-space: pre;
}

.family-tree strong {
    color: var(--accent-gold);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .rules-nav {
        gap: 5px;
    }
    
    .rules-nav a {
        font-size: 0.8rem;
        padding: 5px 8px;
    }
    
    .hierarchy-display {
        font-size: 1rem;
    }
    
    .family-tree pre {
        font-size: 0.7rem;
    }
}

/* === INDICATEURS DE CONNEXION === */
.conn-icon {
    font-size: 0.65rem;
    letter-spacing: -1px;
    padding: 0 3px;
    margin-left: 4px;
    font-family: monospace;
    vertical-align: middle;
}

.conn-excellent {
    color: #4caf50;
}

.conn-good {
    color: #8bc34a;
}

.conn-medium {
    color: #ffc107;
}

.conn-poor {
    color: #ff5722;
}

.conn-disconnected {
    color: #f44336;
    font-weight: bold;
}

.conn-unknown {
    color: rgba(255, 255, 255, 0.5);
}

/* === MODAL DÉMARRAGE PARTIE (iOS audio fix) === */
.modal-game-start {
    z-index: 10000;
}

.modal-game-start .modal-compact {
    max-width: 320px;
    text-align: center;
}

.game-start-content {
    padding: 1.5rem;
}

.game-start-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounce 1s ease infinite;
}

.game-start-content h2 {
    color: var(--accent-gold);
    margin: 0 0 0.5rem 0;
}

.game-start-content p {
    color: rgba(240, 234, 214, 0.8);
    margin: 0 0 1.5rem 0;
}

.btn-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.2); }
}


/* === BOUTON ACTIVATION SON iOS === */
.speech-activation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    cursor: pointer;
}

.speech-activation-button {
    background: linear-gradient(135deg, var(--accent-gold), #d4a30a);
    padding: 1.5rem 2.5rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(218, 165, 32, 0.4);
    animation: pulse 2s ease-in-out infinite;
}

.speech-activation-button .speech-icon {
    font-size: 3rem;
}

.speech-activation-button .speech-text {
    color: var(--bg-main);
    font-size: 1.1rem;
    font-weight: bold;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}


/* === CHAT === */
.chat-toggle-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-gold), #d4a30a);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 100;
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.chat-toggle-btn.active {
    background: var(--bg-dark);
    border: 2px solid var(--accent-gold);
}

.chat-icon {
    font-size: 1.5rem;
}

.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.chat-panel {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    max-width: calc(100vw - 40px);
    height: 400px;
    max-height: calc(100vh - 150px);
    background: #1a2634;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.chat-header {
    background: linear-gradient(135deg, #1e3a5f, #152a45);
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.chat-title {
    font-weight: 600;
    color: #ffffff;
    font-size: 0.95rem;
}

.chat-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.chat-close-btn:hover {
    color: var(--text-light);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
    font-style: italic;
}

.chat-message {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
}

.chat-msg-me {
    align-self: flex-end;
    background: var(--accent-gold);
    color: var(--bg-dark);
    border-bottom-right-radius: 4px;
}

.chat-msg-bot {
    align-self: flex-start;
    background: var(--bg-dark);
    color: var(--text-light);
    border-bottom-left-radius: 4px;
}

.chat-msg-other {
    align-self: flex-start;
    background: #2d5a4a;
    color: #ffffff;
    border-bottom-left-radius: 4px;
}

.chat-sender {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 2px;
    opacity: 0.8;
}

.chat-msg-me .chat-sender {
    display: none;
}

.chat-text {
    word-break: break-word;
}

.chat-time {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: 4px;
    align-self: flex-end;
}

.chat-input-area {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: #0f1a24;
}

.chat-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    background: #1a2634;
    color: #ffffff;
    font-size: 0.9rem;
    outline: none;
}

.chat-input:focus {
    border-color: #d4a84b;
}

.chat-input::placeholder {
    color: #8899aa;
}

.chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: none;
    color: var(--bg-dark);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.chat-send-btn:hover {
    transform: scale(1.1);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .chat-panel {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 70px;
        height: 350px;
    }
    
    .chat-toggle-btn {
        bottom: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
    }
}



/* ==================== LEADERBOARD MODAL ==================== */

.leaderboard-modal {
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
}

.leaderboard-loading,
.leaderboard-error,
.leaderboard-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.leaderboard-error {
    color: var(--error);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    transition: background 0.2s;
}

.leaderboard-row:hover {
    background: rgba(255,255,255,0.08);
}

.leaderboard-row-self {
    background: rgba(79, 172, 254, 0.15);
    border: 1px solid rgba(79, 172, 254, 0.3);
}

.leaderboard-rank {
    font-size: 1.2rem;
    min-width: 45px;
    text-align: center;
    font-weight: bold;
}

.leaderboard-avatar {
    font-size: 1.5rem;
}

.leaderboard-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-light);
}

.leaderboard-elo {
    font-weight: bold;
    color: var(--primary);
    min-width: 60px;
    text-align: right;
}

.leaderboard-games {
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 80px;
    text-align: right;
}

.leaderboard-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.leaderboard-page-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* === PROFILE ELO STATS === */

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin: 20px 0;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
}

.profile-stat.elo-main {
    grid-column: 1 / -1;
    text-align: center;
}

.elo-trend {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.9rem;
    padding: 2px 8px;
    border-radius: 12px;
}

.elo-trend.trend-up {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.elo-trend.trend-down {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

.elo-trend.trend-neutral {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 400px) {
    .profile-actions {
        flex-direction: row;
    }
    
    .profile-actions .auth-btn {
        flex: 1;
    }
}


/* ==================== TWEMOJI - Cross-platform Emojis ==================== */

/* Style de base pour les emojis Twemoji */
img.emoji {
    height: 1.2em;
    width: 1.2em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.15em;
    display: inline-block;
}

/* Emojis dans les boutons */
.header-icon-btn img.emoji,
.nav-btn img.emoji,
.auth-btn img.emoji,
button img.emoji {
    height: 1.1em;
    width: 1.1em;
    vertical-align: -0.1em;
}

/* Emojis plus grands pour les avatars */
.profile-avatar img.emoji,
.bot-avatar img.emoji,
.slot-avatar img.emoji,
.leaderboard-avatar img.emoji {
    height: 2em;
    width: 2em;
    vertical-align: middle;
}

/* Emojis dans les cartes de menu */
.menu-card-title img.emoji {
    height: 1.5em;
    width: 1.5em;
}

/* Emojis dans le chat */
.chat-msg img.emoji {
    height: 1.3em;
    width: 1.3em;
}

/* Emojis dans les toasts */
.toast img.emoji {
    height: 1.4em;
    width: 1.4em;
}

/* Emojis dans le dropdown menu */
.dropdown-item img.emoji {
    height: 1.1em;
    width: 1.1em;
    margin-right: 4px;
}

/* Emojis dans les badges de rôle */
.profile-role img.emoji,
.slot-role img.emoji {
    height: 1em;
    width: 1em;
}

/* Emojis dans les titres de modal */
.modal-title img.emoji {
    height: 1.3em;
    width: 1.3em;
}

/* Emojis dans le changelog */
.changelog-version img.emoji {
    height: 1em;
    width: 1em;
}

/* Emojis dans les bulles de joueur */
.player-bubble img.emoji {
    height: 1.2em;
    width: 1.2em;
}

/* Emojis dans les indicateurs de connexion */
.connection-indicator img.emoji {
    height: 0.9em;
    width: 0.9em;
}

/* Emojis dans la liste des bots */
.bot-card img.emoji {
    height: 1.2em;
    width: 1.2em;
}

/* EXCEPTION: Ne pas convertir les symboles de cartes (♠♥♦♣) */
/* Ces symboles sont bien supportés partout et ont un style spécifique */
.card-suit, .suit-symbol {
    font-family: inherit;
}


/* ==================== MODAL FIN DE PARTIE ==================== */

.game-end-modal {
    max-width: 400px;
    text-align: center;
}

.game-end-modal .modal-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.game-end-modal .modal-subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.game-end-ranking {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.game-end-rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 1rem;
    color: #1f2937;
}

.game-end-rank.winner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
}

.game-end-rank.is-me {
    font-weight: bold;
}

.rank-medal {
    font-size: 1.5rem;
    width: 40px;
}

.rank-name {
    flex: 1;
    text-align: left;
    margin-left: 8px;
}

.rank-score {
    font-weight: bold;
    font-size: 1.1rem;
}

.rank-score.positive {
    color: #16a34a;
}

.rank-score.negative {
    color: #dc2626;
}

/* Changement ELO dans le classement */
.rank-elo {
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

.rank-elo.elo-up {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.rank-elo.elo-down {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Résumé ELO en bas du modal */
.game-end-elo-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.1), rgba(100, 149, 237, 0.05));
    border: 1px solid rgba(100, 149, 237, 0.3);
    border-radius: 8px;
}

.game-end-elo-summary .elo-label {
    font-size: 0.9rem;
    color: #6b7280;
}

.game-end-elo-summary .elo-before {
    font-weight: bold;
    color: #6b7280;
}

.game-end-elo-summary .elo-arrow {
    color: #9ca3af;
}

.game-end-elo-summary .elo-after {
    font-weight: bold;
    font-size: 1.1rem;
}

.game-end-elo-summary .elo-after.elo-up {
    color: #16a34a;
}

.game-end-elo-summary .elo-after.elo-down {
    color: #dc2626;
}

.game-end-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 1.5rem;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: bold;
    color: #1f2937;
}

.game-end-modal .modal-actions {
    margin-top: 1rem;
}

.game-end-modal .btn-primary {
    padding: 12px 24px;
    font-size: 1.1rem;
}


/* === SETTINGS SECTION INFO === */
.settings-section-info {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid var(--accent-gold);
    padding: 8px 12px;
    margin-bottom: 1rem;
    border-radius: 0 4px 4px 0;
}

/* === BOUTON ANNULER (Undo) === */
.undo-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(26,47,26,0.95);
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    font-weight: 500;
}

.undo-btn:hover {
    background: var(--accent-gold);
    color: var(--bg-dark);
    transform: scale(1.05);
}

.undo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.undo-btn .undo-icon {
    font-size: 1.1rem;
}

/* ==================== CONSOLE SQL ==================== */
.sql-console {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sql-layout {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 200px);
    min-height: 400px;
}

.sql-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 0.5rem;
    overflow-y: auto;
}

.sql-sidebar h3 {
    font-size: 0.9rem;
    color: var(--accent-gold);
    margin: 0 0 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-gold);
}

.sql-table-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sql-table-item {
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.sql-table-item:hover {
    background: rgba(255,255,255,0.1);
}

.sql-table-item.selected {
    background: var(--accent-gold);
    color: var(--bg-dark);
}

.sql-table-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.sql-table-info {
    font-size: 0.7rem;
    opacity: 0.7;
}

.sql-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.sql-editor {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 1rem;
}

.sql-editor h3 {
    font-size: 0.9rem;
    color: var(--accent-gold);
    margin: 0 0 0.5rem;
}

.sql-textarea {
    width: 100%;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--border-gold);
    border-radius: 4px;
    color: #00ff00;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.85rem;
    padding: 0.75rem;
    resize: vertical;
    min-height: 80px;
}

.sql-textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.sql-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.sql-hint {
    font-size: 0.7rem;
    opacity: 0.6;
}

.sql-result {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 1rem;
    overflow: auto;
}

.sql-error {
    color: #ff6666;
    background: rgba(255,0,0,0.1);
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.sql-success, .sql-info {
    color: #66ff66;
    background: rgba(0,255,0,0.1);
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.sql-info {
    color: #66ccff;
    background: rgba(0,150,255,0.1);
}

.sql-table-wrapper {
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}

.sql-data-table, .sql-schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.sql-data-table th, .sql-data-table td,
.sql-schema-table th, .sql-schema-table td {
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.1);
    text-align: left;
    white-space: nowrap;
}

.sql-data-table th, .sql-schema-table th {
    background: rgba(0,0,0,0.4);
    color: var(--accent-gold);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.sql-data-table td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sql-null {
    color: #888;
    font-style: italic;
}

.sql-schema {
    margin-bottom: 1rem;
}

.sql-schema h4, .sql-data h4 {
    font-size: 0.9rem;
    color: var(--accent-gold);
    margin: 0 0 0.5rem;
}

.sql-schema h5 {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 0.75rem 0 0.25rem;
}

.sql-fk-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.8rem;
}

.sql-pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.sql-pagination button {
    background: rgba(26,77,46,0.8);
    border: 1px solid var(--border-gold);
    color: var(--text-light);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.sql-pagination button:hover {
    background: var(--accent-gold);
    color: var(--bg-dark);
}

.sql-welcome {
    text-align: center;
    padding: 2rem;
}

.sql-welcome h3 {
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.sql-welcome p {
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.sql-examples {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.sql-examples h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.sql-examples code {
    display: block;
    background: rgba(0,0,0,0.4);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #00ff00;
    cursor: pointer;
    transition: background 0.2s;
}

.sql-examples code:hover {
    background: rgba(0,0,0,0.6);
}

.sql-table-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==========================================================================
   LEGAL FOOTER & COOKIE BANNER
   ========================================================================== */

/* Legal Footer */
.legal-footer {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    margin-top: auto;
    font-size: 0.8rem;
    opacity: 0.8;
}

.legal-links {
    margin-bottom: 0.5rem;
}

.legal-links a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: opacity 0.2s;
}

.legal-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.legal-separator {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.legal-copyright {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-dark);
    border-top: 2px solid var(--accent-gold);
    padding: 1rem;
    z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-icon {
    font-size: 1.5rem;
}

.cookie-text {
    flex: 1;
    min-width: 200px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.cookie-text a {
    color: var(--accent-gold);
    text-decoration: underline;
}

.cookie-accept {
    background: var(--accent-gold);
    color: var(--bg-dark);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.cookie-accept:hover {
    background: #e5c76b;
    transform: translateY(-1px);
}

/* Privacy Table */
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.privacy-table th,
.privacy-table td {
    padding: 0.6rem;
    text-align: left;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.privacy-table th {
    background: rgba(212, 175, 55, 0.15);
    font-weight: bold;
    color: var(--accent-gold);
}

.privacy-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

.privacy-table code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85em;
}

/* Make menu-screen a flex container for footer */
.menu-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
}

.menu-screen .login-required,
.menu-screen .welcome-message {
    flex-shrink: 0;
}

.menu-screen .menu-cards,
.menu-screen .menu-cards-secondary {
    flex-shrink: 0;
}

.menu-screen .menu-version {
    margin-bottom: 0;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-text {
        min-width: auto;
    }
    
    .legal-links {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .legal-separator {
        display: none;
    }
    
    .privacy-table {
        font-size: 0.8rem;
    }
    
    .privacy-table th,
    .privacy-table td {
        padding: 0.4rem;
    }
}

/* Tooltips pour compétences bots admin */
.comp-hint-trigger {
    position: relative;
    display: inline-block;
}
.comp-hint-trigger:hover::after {
    content: attr(title);
    position: absolute;
    left: 20px;
    top: -4px;
    z-index: 9999;
    background: var(--bg-primary, #1a1a2e);
    color: var(--text-primary, #e0e0e0);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.72rem;
    line-height: 1.4;
    width: 280px;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    pointer-events: none;
}