@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700;900&display=swap');

/* --- RESET & BODY --- */
#screen-game {
    width: 99vw;
    height: 100vh;
    flex-direction: column;
    padding: 0;
    background: radial-gradient(circle at center, #2c3e50 0%, #1a252f 100%);
    font-family: 'Rubik', sans-serif;
    display: none; 
}

#screen-game.active {
    display: flex;
}

/* --- TOP BAR --- */
.top-bar { 
    height: 40px;
    background: rgba(0, 0, 0, 0.4); 
    display: flex; 
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
#game-status { font-weight: bold; color: #f1c40f; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9em; }


/* --- ZONE 1 : MAIN DU JOUEUR (HAUT) --- */
#hand-container {
    height: 160px; /* Hauteur fixe en haut */
    background: linear-gradient(to bottom, #151c24, #1f2b38); /* Dégradé vers le bas */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    z-index: 50;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Ombre vers le bas */
    margin: 5px;
}
#hand-container h3 { margin: 5px 0 5px 0; font-size: 0.8em; color: #95a5a6; text-transform: uppercase; }

#my-hand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 140px;
    perspective: 1000px;
    min-width: 600px; /* Pour éviter rétrécissement excessif */
}

/* --- LAYOUT DU BAS (3 COLONNES) --- */
.main-layout {
    display: flex;
    flex-direction: row; /* Gauche vers Droite */
    flex: 1; /* Prend toute la hauteur restante */
    overflow: hidden;
    width: 100%;
}

/* --- COLONNE 1 : PLATEAU (GAUCHE - FIXE 470px) --- */
#board-container {
    width: 570px; /* Largeur demandée */
    flex-shrink: 0; /* Ne rétrécit pas */
    border-right: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.1);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centré verticalement */
}

.rows-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* Lignes réparties équitablement */
}

/* Ligne individuelle */
.card-row {
    height: 140px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 8px; /* Un peu moins d'écart pour faire tenir 5 cartes dans 470px */
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    transition: all 0.2s;
}

.row-info { 
    margin-left: auto; 
    background: rgba(0,0,0,0.5);
    padding: 5px 8px;
    border-radius: 6px;
    color: #e74c3c; 
    font-weight: bold;
    font-size: 0.8em; 
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.selectable-row { cursor: pointer; border-color: #f1c40f; background: rgba(241, 196, 15, 0.1); }
.selectable-row:hover { background: rgba(241, 196, 15, 0.2); transform: scale(1.01); }


/* --- COLONNE 2 : CARTES JOUÉES (CENTRE - FLUIDE) --- */
#reveal-zone-container {
    flex: 1; /* Prend l'espace restant au milieu */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.zone-title {
    font-size: 0.75em;
    color: #5d6d7e;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    width: 100%;
    text-align: center;
    padding-bottom: 5px;
}

#reveal-zone {
    display: flex;
    justify-content: center; /* Centré horizontalement */
    align-items: flex-start; /* Alignés en haut */
    align-content: flex-start;
    flex-wrap: wrap; /* Revient à la ligne si beaucoup de joueurs */
    gap: 15px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.revealed-card-wrapper {
    transition: all 0.5s ease;
    opacity: 1;
    transform: scale(1);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.revealed-card-wrapper.processed { opacity: 0; width: 0; margin: 0; pointer-events: none; }
.revealed-card-wrapper .player-name { font-size: 0.75em; color: #ccc; margin-bottom: 4px; max-width: 70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.revealed-card-wrapper.active-processing .card { transform: scale(1.15); box-shadow: 0 0 15px #2ecc71; border-color: #2ecc71; z-index: 10; }


/* --- COLONNE 3 : JOUEURS (DROITE - FIXE 240px) --- */
#players-sidebar {
    width: 200px;
    background: rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow-y: auto;
    flex-shrink: 0;
}
#players-sidebar h3 { 
    color: #bdc3c7; 
    text-transform: uppercase; 
    font-size: 0.8em; 
    margin: 0 0 10px 0; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 5px; 
    text-align: center;
}

.player-badge { 
    background: linear-gradient(145deg, #34495e, #2c3e50); 
    padding: 8px 10px; 
    border-radius: 6px; 
    margin-bottom: 8px; 
    border: 1px solid rgba(255,255,255,0.05); 
    display: flex; justify-content: space-between; align-items: center;
    transition: transform 0.2s;
}
.player-badge.active-chooser { border: 1px solid #e74c3c; box-shadow: 0 0 8px rgba(231, 76, 60, 0.4); transform: scale(1.02); }
.p-name { font-weight: bold; font-size: 0.85em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.p-score { font-size: 0.85em; color: #f1c40f; font-weight: bold; }


/* --- DESIGN CARTES --- */
.card {
    width: 90px;
    height: 135px;
    border-radius: 8px;
    background: #ecf0f1;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    display: flex; flex-direction: column;
    user-select: none;
    cursor: default;
    position: relative;
    font-family: 'Rubik', sans-serif;
    flex-shrink: 0;
}

/* En-tête / pied de carte plus grands */
.card-header, .card-footer {
    height: 22px;
    padding: 0 6px;
    color: white;
    font-weight: 900;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.card-header { border-radius: 8px 8px 0 0; }
.card-footer { border-radius: 8px 8px 0 0; transform: rotate(180deg); }

/* Corps de la carte adapté à la nouvelle taille et texte central plus visible */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    font-size: 18px;
    font-weight: 700;
}

/* Forcer chiffres plus gros (prend le pas sur les définitions suivantes) */
.card .beef-symbol { font-size: 36px !important; line-height: 1; }
.card .beef-count { font-size: 18px !important; font-weight: 800; color: #95a5a6; margin-top: 2px; }

.beef-symbol { font-size: 20px; line-height: 1; }
.beef-count { font-size: 9px; font-weight: bold; color: #95a5a6; margin-top: 1px; }

/* Couleurs */
.c-1 .card-header, .c-1 .card-footer { background: #95a5a6; } .c-1 .beef-symbol { color: #95a5a6; }
.c-2 .card-header, .c-2 .card-footer { background: #2980b9; } .c-2 .beef-symbol { color: #2980b9; }
.c-3 .card-header, .c-3 .card-footer { background: #d35400; } .c-3 .beef-symbol { color: #d35400; }
.c-5 .card-header, .c-5 .card-footer { background: #c0392b; } .c-5 .beef-symbol { color: #c0392b; }
.c-7 .card-header, .c-7 .card-footer { background: #8e44ad; } .c-7 .beef-symbol { color: #8e44ad; }

/* Interaction Main (Inversée car en haut) */
#my-hand .card { margin: 0 2px; cursor: pointer; transition: transform 0.2s; transform-origin: top center; }
#my-hand .card:hover { transform: translateY(-10px) scale(1.05); z-index: 100; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.card.selected-in-hand { transform: translateY(-10px) scale(1.1) !important; z-index: 110; box-shadow: 0 0 0 3px #f1c40f !important; }

/* ANIMATION VOL */
.flying-card {
    position: fixed;
    z-index: 9999;
    transition: top 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), 
                left 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s ease;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    pointer-events: none;
}
.invisible-card { opacity: 0 !important; }

/* Effet d'explosion */
.row-explosion { animation: shakeRow 0.5s; background-color: rgba(231, 76, 60, 0.4) !important; }
@keyframes shakeRow { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0); } }

/* Animation cartes ramassées */
.cards-taken-anim .card { animation: takeCards 0.6s forwards; }
@keyframes takeCards {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8) translateY(20px); opacity: 0.5; filter: grayscale(1); }
    100% { transform: scale(0) translateY(50px); opacity: 0; }
}

/* --- MODAL DE SCORE & FIN DE PARTIE --- */
#score-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

#score-content {
    background: white;
    width: 500px;
    max-width: 90%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.7);
    font-family: 'Rubik', sans-serif;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow-y: auto;
}

@keyframes popIn { 
    from { transform: scale(0.8); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}

/* En-tête */
.score-header {
    color: white;
    padding: 20px;
    text-align: center;
    border-bottom: 4px solid #f1c40f;
    flex-shrink: 0;
}
.score-header h2 { margin: 0; font-size: 1.8em; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.score-header p {
    margin: 5px 0 0 0;
    font-size: 1.1em;
    font-weight: bold;
    opacity:0.9;
}

/* Corps (Tableau) */
.score-body {
    padding: 0;
    background: #f8f9fa;
    max-height: 50vh;
    overflow-y: auto;
}

.sb-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sb-table thead {
    background: #ecf0f1;
    color: #7f8c8d;
    font-size: 0.85em;
    text-transform: uppercase;
    position: sticky;
    top: 0;
}

.sb-table th { padding: 12px 20px; font-weight: 600; letter-spacing: 0.5px; }
.sb-table td { padding: 12px 20px; border-bottom: 1px solid #eee; color: #2c3e50; font-size: 1em; }

.sb-table tr:last-child td { border-bottom: none; }
.sb-table tr:hover { background-color: rgba(0,0,0,0.02); }

/* Pied de page (Boutons) */
.score-footer {
    background: white;
    padding: 20px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

/* Boutons */
.btn-green, .btn-red, .btn-blue {
    border: none; padding: 12px 20px; border-radius: 8px;
    font-size: 0.95em; font-weight: bold; text-transform: uppercase; cursor: pointer;
    color: white; transition: transform 0.1s, opacity 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-green { background: #2ecc71; }
.btn-red { background: #e74c3c; }
.btn-blue { background: #3498db; }

.btn-green:hover, .btn-red:hover, .btn-blue:hover { transform: translateY(-2px); opacity: 0.95; box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
.btn-green:active, .btn-red:active, .btn-blue:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

button:disabled { background: #bdc3c7; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* Scrollbar personnalisée pour la liste */
.score-body::-webkit-scrollbar { width: 8px; }
.score-body::-webkit-scrollbar-track { background: #f1f1f1; }
.score-body::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 4px; }
.score-body::-webkit-scrollbar-thumb:hover { background: #95a5a6; }

/* --- ADAPTATION MOBILE (RESPONSIVE) --- */
@media (max-width: 900px) {

    /* 1. REORGANISATION GLOBALE (Flex Order) */
    #screen-game {
        overflow: hidden !important
    }

    /* On change l'ordre : TopBar > Plateau > Main du joueur (en bas) */
    .top-bar { order: 1; padding: 0 10px; height: 35px; }
    .main-layout { 
        order: 2; 
        flex-direction: column; 
        width: 100%; 
        overflow: hidden; 
        margin-bottom: -5px;
    }
    #hand-container { order: 3; min-height: 110px; padding-bottom: 0; background: #151c24; }

    /* 2. PLATEAU DE JEU (Board) */
    #board-container {
        width: 100%;
        padding: 5px;
        flex: 1; /* Prend tout l'espace disponible au milieu */
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        order: 2; /* Au milieu de la main-layout */
    }

    .rows-area {
        justify-content: center;
        gap: 5px;
    }

    .card-row {
        height: 22%;
        min-height: 50px;
        padding: 2px 5px;
        border-radius: 6px;
    }

    .row-info {
        padding: 2px 5px;
        font-size: 0.7em;
    }

    /* 3. ZONE DE RÉVÉLATION (Au dessus du plateau ou entre plateau et main) */
    #reveal-zone-container {
        width: 100%;
        height: 80px; /* Bandeau fixe */
        flex: none;
        padding: 5px;
        order: 3; /* Juste au dessus de la main */
        background: rgba(0,0,0,0.2);
        flex-direction: row; /* Défilement horizontal */
        align-items: center;
    }

    .zone-title { display: none; } /* On cache le titre pour gagner de la place */
    
    #reveal-zone {
        flex-wrap: nowrap; /* Pas de retour à la ligne */
        justify-content: flex-start;
        overflow-x: auto; /* Scroll horizontal */
        align-items: center;
        padding-left: 10px;
        gap: 8px;
    }

    /* 4. LISTE DES JOUEURS (Bandeau horizontal en haut) */
    #players-sidebar {
        width: 100%;
        height: 55px;
        flex-direction: row;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 5px;
        background: rgba(0, 0, 0, 0.3);
    }

    #players-list-vertical {
        display: flex;
    }

    #players-sidebar h3, #players-sidebar button { display: none; } /* On cache le titre et le bouton quitter */

    .player-badge {
        min-width: 110px;
        margin-bottom: 0;
        padding: 4px 8px;
        flex-shrink: 0;
    }
    
    .p-name { max-width: 70px; }

    /* 5. REDIMENSIONNEMENT DES CARTES (Crucial) */
    .card {
        width: 45px;
        height: 68px; /* Ratio conservé approx */
        border-radius: 4px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }

    .card-header, .card-footer {
        height: 12px;
        font-size: 8px;
        padding: 0 2px;
    }

    .card-body {
        font-size: 10px;
    }

    /* Force les tailles de police internes */
    .card .beef-symbol { font-size: 18px !important; }
    .card .beef-count { font-size: 9px !important; margin-top: 0; }

    /* Ajustement de la main */
    #my-hand {
        height: auto;
        min-width: auto;
        justify-content: flex-start;
        padding: 0 10px;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    #my-hand .card {
        margin: 0 3px;
    }
    
    #my-hand .card:hover {
        transform: translateY(-10px); /* Moins de mouvement */
    }
    
    .card.selected-in-hand {
        transform: translateY(-15px) !important;
    }

    /* Ajustement Animation Volante */
    .flying-card {
        width: 45px !important;
        height: 68px !important;
        z-index: 99999;
    }
    
    /* Modal Score Mobile */
    #score-content {
        width: 90%;
        max-height: 80vh;
    }
    
    .sb-table th, .sb-table td { padding: 8px 10px; font-size: 0.9em; }
}