#game-container { position: relative; width: 1000px; height: 700px; background: radial-gradient(circle, #2ecc71 0%, #27ae60 100%); border: 8px solid #ecf0f1; border-radius: 20px; box-shadow: 0 0 50px #000; }
#trump-info { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.6); padding: 8px; border-radius: 5px; font-weight: bold; }
#permanent-scoreboard { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.8); padding: 10px; border-radius: 8px; font-size: 0.9em; text-align: center; z-index: 20; }

.table-center { 
    position: absolute;
    top: 44%;
    left: 49%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
}
.card-slot { position: absolute; width: 70px; height: 105px; }
.slot-bottom { bottom: 20px; left: 50%; transform: translateX(-50%); }
.slot-top { top: 20px; left: 50%; transform: translateX(-50%); }
.slot-left { top: 50%; left: 20px; transform: translateY(-50%); }
.slot-right { top: 50%; right: 20px; transform: translateY(-50%); }

/* --- COULEURS D'ÉQUIPES EN JEU --- */
.player-label.team-a {
    background: rgba(41, 128, 185, 0.85); /* Bleu */
    border: 2px solid #2980b9;
    color: white;
}

.player-label.team-b {
    background: rgba(192, 57, 43, 0.85); /* Rouge */
    border: 2px solid #c0392b;
    color: white;
}

/* On garde l'indicateur de tour actif mais on le renforce */
.player-label.active-turn {
    box-shadow: 0 0 15px #f1c40f;
    border-color: #f1c40f;
    z-index: 10;
}

#turn-up-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 15px yellow; z-index: 5; }
#my-hand {
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    gap: 0px;
    height: 120px;
    align-items: flex-end;
}

.card {
    width: 80px;
    height: 120px;
    margin: 0 4px;
}

/* Effet Survol */
.card:hover {
    transform: translateY(-20px);
}

/* --- STRUCTURE INTERNE DE LA CARTE --- */
.top-left {
    top: 2px;
    left: 2px;
}

.bottom-right {
    bottom: 2px;
    right: 2px;
    transform: rotate(180deg); /* On retourne le coin bas */
}

/* Ajustement Mobile */
@media (max-width: 800px) {
    .card {
        width: 60px;
        height: 90px;
        margin: 0 1px;
    }
    .card-corner { font-size: 0.8em; }
    .card-center { font-size: 2.2em; }
    .card.face-card .card-center { 
        width: 35px; height: 35px; font-size: 1.8em; border-width: 1px;
    }
    
    /* Sur mobile, on remonte fort la carte au clic/survol */
    #my-hand .card:hover {
        transform: translateY(-30px) scale(1.1);
        margin: 0 10px;
    }
}
.big-suit { font-size: 2em; } .rank { font-size: 1.2em; }

/* ------------------------------------------- */
/* Contrôles d'enchères */
/* ------------------------------------------- */
#bidding-controls { 
    position: absolute; 
    top: 17%; /* Un peu plus haut pour laisser de la place */
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: rgba(0,0,0,0.85); /* Fond plus clair pour lisibilité */
    padding: 15px; 
    border-radius: 10px; 
    z-index: 50; 
    display: none; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    color: rgb(228, 228, 228);
    width: 220px; /* Largeur fixe pour une belle grille */
}

#bidding-controls h3 { margin: 0 0 10px 0; text-align: center; font-size: 1.1em; }

#opts {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
    gap: 10px;
}

#opts button {
    height: 50px;
    margin: 0;
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s;
}

#opts button:active { transform: scale(0.95); }

.suit-btn {
    background: white;
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    font-size: 2.5em !important; /* Gros symboles */
}
.suit-btn:hover { 
    background: #ecf0f1; 
    border-color: #95a5a6; 
}
.color-btn { 
    font-size: 1.5em; 
    background: white; 
    border-radius: 4px; 
    border: none; 
    margin: 0 3px; 
    cursor: pointer; 
}

/* ------------------------------------------- */
/* Affichage des scores en fin de round/partie */
/* ------------------------------------------- */
#score-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
    background: rgba(0,0,0,0.85);
    z-index: 100;
    justify-content: center;
    align-items: center;
}
#score-content {
    background: white;
    width: 650px;
    max-width: 95%;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    font-family: 'Segoe UI', sans-serif;
}

.score-header {
    background: #34495e;
    color: white;
    padding: 15px;
    text-align: center;
}
.score-header h2 { margin: 0; font-size: 1.8em; text-transform: uppercase; letter-spacing: 1px; }
.contract-info { font-size: 0.9em; opacity: 0.9; margin-top: 5px; }
.litige-alert { background: #e74c3c; color: white; padding: 5px; margin-top: 5px; border-radius: 4px; font-weight: bold; animation: pulse 1s infinite; }

.score-body {
    display: flex;
    flex-direction: row;
}

.team-col {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Couleurs Equipes */
.team-a-bg { background: #f0f8ff; border-right: 1px solid #ddd; }
.team-b-bg { background: #fff5f5; }

.team-title { font-size: 1.4em; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; }
.team-a-text { color: #2980b9; }
.team-b-text { color: #c0392b; }

.player-names {
    font-size: 0.85em;
    color: #7f8c8d;
    font-style: italic;
    margin-bottom: 15px;
    height: 20px; /* Hauteur fixe pour alignement */
}

.score-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #bdc3c7;
    font-size: 0.95em;
}
.score-row span:first-child { color: #555; }
.score-row span:last-child { font-weight: bold; color: #2c3e50; }

.round-total {
    margin-top: auto; /* Pousse vers le bas */
    padding-top: 15px;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    border-top: 2px solid rgba(0,0,0,0.1);
}

.score-footer {
    background: #ecf0f1;
    padding: 15px;
    border-top: 1px solid #bdc3c7;
}

.global-score-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 1.2em;
}

.progress-bar {
    height: 12px;
    background: #bdc3c7;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    margin: 0 15px;
    flex-grow: 1;
}
.bar-a { background: #2980b9; height: 100%; transition: width 1s ease-out; }
.bar-b { background: #c0392b; height: 100%; transition: width 1s ease-out; }

.score-actions { text-align: center; }

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

/* ========================================== */
/* RESPONSIVE MOBILE (Ecrans < 800px)         */
/* ========================================== */

@media (max-width: 800px) {
    
    /* --- ACCUEIL --- */
    .home-container {
        flex-direction: column;
        width: 95%;
        height: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .home-panel {
        padding: 15px;
    }

    .list-panel {
        height: 350px; /* Hauteur fixe pour scroller la liste */
        border-left: none;
        border-top: 5px solid #3498db;
    }

    .logo-area h1 { font-size: 2em; }

    /* --- LOBBY --- */
    .lobby-box {
        width: 95%;
    }

    /* --- PLATEAU DE JEU --- */
    #game-container {
        width: 100vw;
        height: 100vh;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: radial-gradient(circle, #2ecc71 0%, #27ae60 100%);
    }

    /* Ajustement des avatars joueurs */
    .player-label {
        width: 90px;
        padding: 4px 8px;
        font-size: 0.8em;
        border-radius: 10px;
    }
    .player-label small { display: none; } /* On cache le nombre de cartes pour gagner de la place */

    .p-left { 
        left: 5px; 
        top: 35%;
    }
    .p-right { 
        right: 5px;
        top: 33%;
    }
    .p-top { 
        top: 20%; 
    }
    .p-bottom { bottom: 120px; } /* On remonte l'avatar du joueur pour laisser place à la main */

    /* Ajustement du centre de la table */
    .table-center {
        width: 300px;
        height: 300px;
        /* On réduit la zone centrale */
        transform: translate(-50%, -50%) scale(0.85); 
    }

    /* Ajustement de la main du joueur (Chevauchement des cartes) */
    #my-hand {
        bottom: 15px;        /* Un peu plus haut du bord */
        width: 100%;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        overflow: visible;   /* Important pour l'effet de survol */
    }
    
    #my-hand .card {
        width: 50px;         /* plus petit pour mobile */
        height: 80px;        /* proportionnée à la largeur */
        margin: 0 1px;      /* chevauchement réduit */
        box-shadow: -1px 0 3px rgba(0,0,0,0.25);
        transition: transform 0.18s, margin 0.18s;
        font-size: 0.7em;
    }
    
    /* Effet quand on touche/survole une carte sur mobile */
    #my-hand .card:hover {
        transform: translateY(-40px) scale(1.1); /* Remonte franchement */
        margin: 0 15px;      /* S'écarte des voisines pour bien voir */
        z-index: 1000;       /* Passe au premier plan */
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }

    /* Ajustement des enchères */
    #bidding-controls {
        top: 25%; /* Plus bas pour ne pas cacher le partenaire */
        width: 90%;
        max-width: 300px;
    }

    /* --- TABLEAU DES SCORES --- */
    #score-content {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .score-body {
        flex-direction: column; /* Empile les équipes l'une sur l'autre */
    }

    .team-col {
        padding: 10px;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .score-header h2 { font-size: 1.2em; }
    .global-score-container { font-size: 1em; }
    
    /* Boutons plus gros pour le tactile */
    button {
        padding: 12px 20px;
    }
}

/* --- BULLES D'ANNONCES (BELOTE / REBELOTE) --- */
.speech-bubble {
    position: absolute;
    bottom: 115%; /* Place la bulle au-dessus du nom */
    left: 50%;
    transform: translateX(-50%); /* Centre horizontalement */
    background-color: #f1c40f; /* Jaune doré */
    color: #2c3e50;
    padding: 6px 12px;
    border-radius: 15px;
    font-weight: 800;
    font-size: 0.9em;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 100;
    animation: popBubble 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #fff;
}

/* La petite flèche en bas de la bulle */
.speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #f1c40f transparent transparent transparent;
}

/* Animation d'apparition */
@keyframes popBubble {
    from { transform: translateX(-50%) scale(0); opacity: 0; }
    to { transform: translateX(-50%) scale(1); opacity: 1; }
}

@media (max-height: 600px) {
    #screen-game {
        height: 90vh;
    }
}