/* --- RESET & BASE (Inchangé) --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', sans-serif;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; background-color: #121212; color: #fff;
    overflow: hidden;
}

/* --- LAYOUT PRINCIPAL (GRID 3 COLONNES) (Inchangé) --- */
#main-layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    height: 100vh; width: 100vw;
}

/* Panneaux Latéraux (Inchangé) */
#left-panel, #right-panel { background: #1a252f; padding: 20px; display: flex; flex-direction: column; gap: 15px; z-index: 10; }
#left-panel { border-right: 2px solid #34495e; }
#right-panel { border-left: 2px solid #34495e; }

/* Zone Centrale (Inchangé) */
#game-area {
    background-image: url('../assets/table_bg.jpg');
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: space-between;
    align-items: center; padding: 10px;
}

/* Zone Centrale (Table de jeu) */
#game-container {
    grid-column: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-image: url('../assets/table_bg.jpg');
    background-size: cover;
    background-position: center;
}

/* ==========================================================================
   CARTE - RENDU VISUEL (Image en fond 100%)
   ========================================================================== */
.card {
    width: 140px; 
    height: 196px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s;
    z-index: 1;
}

.card:hover { transform: translateY(-5px) scale(1.02); z-index: 10; }

/* --- IMAGE DE FOND (Remplit 100% de la carte) --- */
.card-img-full {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    z-index: 1; /* Tout en bas */
}

/* --- LE CONTENU (En surimpression, Flexbox Column) --- */
.card-content {
    position: relative;
    z-index: 2; /* Devant la texture */
    height: 100%;
    display: flex; flex-direction: column;
    padding: 10px;
}

/* Mana Bubble */
.card-mana-bubble {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #3498db;
    color: white;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; border: 2px solid #fff; font-size: 0.8em;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* --- TITRE --- */
.card-title {
    font-size: 0.8em; font-weight: bold; text-align: center;
    color: #fff; text-shadow: 1px 1px 3px #000;
    margin-top: 15px; /* Laisse de la place pour les perles du haut */
}

/* --- SUPERPOSITION DES ZONES CLIQUABLES (Dans la main joueur) --- */
.card-click-top {
    position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    z-index: 5; cursor: pointer;
}
.card-click-bottom {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    z-index: 5; cursor: pointer;
}

/* --- POSITIONNEMENT DES PERLES DE STATS --- */
.perle-stat {
    position: absolute;
    width: 28px; height: 28px; /* Taille approximative de la perle du cadre */
    color: white; font-weight: bold; font-size: 1em;
    display: flex; align-items: center; justify-content: center;
    z-index: 3; /* Par-dessus la texture, mais sous le clic */
}

/* En haut a gauche (Perle rouge - PV) */
.perle-hp { top: 5px; left: 5px; }

/* En haut a droite (Perle bleue - Mana) */
.perle-mana { top: 5px; right: 5px; }

/* En bas a gauche (Bouclier - DEF) */
.perle-def { bottom: 5px; left: 5px; }

/* En bas a droite (Perle verte - ATK) */
.perle-atk { bottom: 5px; right: 5px; }

/* --- CADRE DESCRIPTION (Uniquement sur table, caché en main) --- */
.card.in-hand .description-frame { display: none; }
.description-frame {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px; padding: 5px;
    font-size: 0.7em; line-height: 1.2; color: #eee;
    font-style: italic; min-height: 50px;
    display: flex; align-items: center; text-align: center;
    margin-top: auto; /* Pousse vers le bas */
}

/* --- CADRE STATS (Opacité 60%) --- */
.stats-frame {
    /* La couleur de fond du cadre avec 60% d'opacité (rgba) */
    background-color: rgba(0, 0, 0, 0.6); 
    
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    padding: 4px;
    margin-bottom: 5px;
    margin-top: auto; /* Pousse les stats vers le bas si la description est absente */
    
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Icônes de statistiques (Emojis pour l'exemple) */
.stat-miniatk { color: #e74c3c; font-weight: bold; }
.stat-minihp  { color: #ff4757; font-weight: bold; }
.stat-minidef { color: #2ed573; font-weight: bold; }

/* --- CADRE DESCRIPTION (Opacité 80%) --- */
.description-frame {
    /* La couleur de fond du cadre avec 80% d'opacité (rgba) */
    background-color: rgba(0, 0, 0, 0.8);
    
    border-radius: 5px;
    padding: 5px;
    font-size: 0.65em;
    line-height: 1.1;
    color: #eee;
    font-style: italic;
    min-height: 45px;
    display: flex;
    align-items: center;
    text-align: center;
}

/* Dos de carte (Pour l'ordinateur) */
.card-back {
    width: 125px;
    height: 175px;
    background: url('../assets/card_back.jpg') center/cover;
    border-radius: 10px;
    border: 2px solid #fff;
}

/* ==========================================================================
   5. ÉLÉMENTS D'INTERFACE (PANNEAUX & MODALES)
   ========================================================================== */
.stat-group {
    background: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #34495e;
}

h4 { color: #3498db; margin-bottom: 10px; font-size: 0.9em; text-align: center; }

.stat-line { margin: 5px 0; font-family: 'Courier New', monospace; }

#btn-combat {
    width: 100%;
    padding: 12px;
    background: #e67e22;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

#btn-combat:hover { background: #d35400; }

/* Mains des joueurs */
.hand {
    display: flex;
    gap: 10px;
    min-height: 180px;
    align-items: center;
}

/* Liste du Deck */
#deck-list {
    list-style: none;
    overflow-y: auto;
    max-height: 300px;
    font-size: 0.8em;
}

/* Modale de combat */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none; /* Caché par défaut, activé en flex via JS */
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.modal-content {
    background: #1a252f;
    padding: 30px;
    border-radius: 15px;
    border: 2px solid #34495e;
    text-align: center;
}

/* Animation de tirage */
@keyframes drawCardAnim {
    0% { transform: translateY(100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.hand .card {
    animation: drawCardAnim 0.4s ease-out forwards;
}

/* Assure que les rangées de cartes sont horizontales */
.field-row {
    display: flex;
    flex-direction: row; /* Force l'alignement horizontal */
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espace entre les cartes */
    width: 100%;
    min-height: 180px;
}

/* Force les slots à ne pas s'empiler */
.slot .card, .card.in-field {
    width: 110px;  /* Réduit la largeur */
    height: 154px; /* Réduit la hauteur proportionnellement */
    margin: auto;
}

/* Le conteneur global du contenu doit aussi être en colonne 
   pour séparer la ligne ordi de la ligne joueur */
.battlefield-content {
    display: flex;
    flex-direction: column; 
    justify-content: space-around;
    height: 100%;
}

/* Ajustement des perles pour les petites cartes sur le plateau */
.card.in-field .perle-stat {
    width: 24px;
    height: 24px;
    font-size: 0.8em;
}

/* Ajustement du titre pour les petites cartes */
.card.in-field .card-title {
    font-size: 0.7em;
    margin-top: 10px;
}

/* Cache la description si la carte est trop petite (optionnel) */
.card.in-field .description-frame {
    font-size: 0.55em;
    min-height: 30px;
}

/* --- ZONES DE CLIC --- */
.card-click-top {
    position: absolute; top: 0; left: 0; width: 100%; height: 50%;
    z-index: 5; cursor: pointer;
}

.card-click-bottom {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    z-index: 5; cursor: pointer;
    background-color: rgba(128, 128, 128, 0.1); /* Rectangle gris à 10% d'opacité demandé */
    display: flex; align-items: center; justify-content: center;
}

/* Indice textuel sur la zone de clic (optionnel) */
.click-hint {
    color: rgba(255, 255, 255, 0.5); font-size: 0.7em; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1px;
}

.card-content {
    position: relative;
    z-index: 2; /* Devant la texture */
    height: 100%;
    display: flex; flex-direction: column;
    padding: 8px; /* Espace intérieur réduit */
}
/* ==========================================================================
   MODALE ZOOM CARTES
   ========================================================================== */
zoom-modal.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none; /* Activé en flex via JS */
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Par-dessus tout */
}

#zoom-modal .modal-content-zoom {
    display: flex; flex-direction: row; /* Carte à gauche, texte à droite */
    gap: 30px;
    background: transparent; /* Fond sombre de la modale suffit */
    width: auto; max-width: 90%;
}

/* FIX : Carte grand format (Illustration 100% fond) */
#zoom-card-visual {
    width: 250px; /* Taille agrandie pour le zoom */
    height: 350px;
    transform: scale(1.15); /* Effet d'agrandissement */
}

/* FIX : Cadre défaut (Détails textuels) */
#zoom-title.card-title {
    font-size: 1.8em; font-weight: bold; text-align: center;
    color: #e67e22; text-shadow: 1px 1px 3px #000;
    margin-top: 10px; margin-bottom: 8px;
}

#zoom-details-bg.card-texture {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* Remplit l'espace */
    z-index: 1;
}

#zoom-title { font-size: 1.8em; font-weight: bold; margin-bottom: 8px; color: #e67e22; }
#zoom-type { font-size: 0.85em; font-style: italic; color: #95a5a6; margin-bottom: 15px; }
#zoom-desc { background: rgba(0,0,0,0.4); padding: 12px; border-radius: 8px; line-height: 1.3; margin-bottom: 15px; font-size: 0.9em; }
#zoom-stats-list { list-style: none; font-size: 1em; }
#zoom-stats-list li { margin: 6px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 4px; }
.zoom-stat-value { font-weight: bold; }.card-default-frame {
    width: 380px; /* Plus large pour les détails */
    height: 500px; /* Plus haute pour accueillir la description complète */
    position: relative;
    border-radius: 15px;
    overflow: hidden; /* Garde le fond dans les bords arrondis */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    border: 3px solid #34495e;
}