/* Adaptabilité de la taille des cases sur petit écran */
@media (max-width: 768px) {
    .case {
        width: 50px; /* On réduit légèrement la taille */
        height: 50px;
    }
	
	.pion:only-child {
        width: 40px !important; 
        height: 40px !important;
        font-size: 24px !important;
    }

    #hud {
        min-width: 95%; /* Le HUD prend toute la largeur */
        border-radius: 10px;
        top: 5px;
        padding: 5px;
        gap: 5px;
        flex-wrap: wrap; /* Permet aux boutons de passer à la ligne */
        height: auto;
    }
    
    #console {
        width: 95%;
        height: 80px;
        font-size: 0.8em;
    }
}

/* =========================================================
   1. VARIABLES & RESET
   ========================================================= */
:root {
    --gold: #f1c40f; --blue: #3498db; --red: #e74c3c;
    --green: #2ecc71; --purple: #8e44ad; --bg-dark: #121212;
    --panel-bg: rgba(20, 20, 20, 0.95);
    --temple-roof: #8e44ad; --temple-stone: #ecf0f1;
    --temple-shadow: #bdc3c7; --temple-dark: #2c3e50;
}

body {
    background: var(--bg-dark) radial-gradient(circle at center, #2c3e50 0%, #000 100%);
    color: #ecf0f1;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    margin: 0; overflow: hidden; text-align: center; user-select: none;
}

/* =========================================================
   2. LAYOUT & CARTE
   ========================================================= */
.game-layout { display: flex; width: 100vw; height: 100vh; }

.side-hud {
    width: 240px; background: #0a0a0a; border-right: 2px solid var(--purple);
    display: flex; flex-direction: column; padding: 20px; z-index: 1000;
}

.game-area { flex: 1; position: relative; overflow: hidden; }

.map-container {
    position: absolute; inset: 0; overflow: auto; background: #000;
    scrollbar-width: none; box-shadow: inset 0 0 100px #000;
}
.map-container::-webkit-scrollbar { display: none; }
.map {
    position: relative;
    display: grid;
    width: max-content;
    height: max-content;
    border: 5px solid #3e2723;
    
    /* --- LE SECRET DU CENTRAGE --- */
    /* Ces marges créent une zone vide autour de la carte */
    margin-top: 50vh;    /* 50% de la hauteur de l'écran */
    margin-bottom: 50vh;
    margin-left: 50vw;   /* 50% de la largeur de l'écran */
    margin-right: 50vw;
}

.case {
    width: 64px; height: 64px; position: relative; box-sizing: border-box;
    image-rendering: pixelated; background-size: cover;
    border: 1px solid rgba(255,255,255,0.05);
}

.case:hover { filter: brightness(1.2); z-index: 5; }
.case.active-player { box-shadow: inset 0 0 15px var(--gold); outline: 2px solid var(--gold); z-index: 10; }
.case.brouillard { background: #000 !important; border: none !important; filter: brightness(0) !important; pointer-events: none; }

/* =========================================================
   3. SYSTÈME DE RANGEMENT & AGGRANDISSEMENT
   ========================================================= */
/* Coins */
.stack-monstres { position: absolute; top: 2px; left: 2px; display: flex; z-index: 10; }
.stack-joueurs  { position: absolute; top: 2px; right: 2px; display: flex; z-index: 9; }
.stack-or       { position: absolute; bottom: 2px; left: 2px; display: flex; z-index: 8; }
.stack-objets   { position: absolute; bottom: 2px; right: 2px; display: flex; z-index: 7; }

/* Taille mini quand ils sont plusieurs */
.stack-monstres .monstre, .stack-joueurs .ami, .stack-objets .pion, .stack-or .pion-or {
    width: 20px !important; height: 20px !important; font-size: 12px !important; margin-right: -10px;
}

/* MAGIE : Taille LARGE si l'élément est SEUL sur la case */
.case > .pion:only-child, 
.case > .monstre:only-child, 
.case > .ami:only-child {
    width: 52px !important; height: 52px !important; font-size: 32px !important;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); margin: 0; z-index: 50;
    animation: float-centered 2s infinite ease-in-out;
}

.count-badge { position: absolute; background: var(--red); color: #fff; font-size: 9px; padding: 1px 3px; border-radius: 3px; }

/* =========================================================
   4. TERRAINS
   ========================================================= */
.case.plaine { background-color: #27ae60; background-image: url('assets/tiles/herbe.png'); }
.case.foret { background-color: #2d5a27; background-image: url('assets/tiles/foret.png'); }
/*.case.foret::after { content: '🌲'; font-size: 25px; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); }*/
.case.eau { background-color: #2980b9; background-image: url('assets/tiles/eau.png'); overflow: hidden; }
.case.eau::before { content: ""; position: absolute; inset: -50%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%); animation: vague-mouvement 6s infinite linear; }
.case.montagne { background-color: #7d5c41; background-image: url('images/montagne.png'); }
.case.lave { background-color: #c0392b; background-image: url('assets/tiles/lave.png') ;}
.case.pont { background-image: linear-gradient(90deg, transparent 10%, #5d4037 10%, #5d4037 90%, transparent 90%); background-size: 20px 100%; background-color: #2980b9;}
/* --- Nouveaux Biomes --- */
.case.grotte { background-color: #3e2723; border: 1px solid #2d1b18; background-image: url('assets/tiles/solrocheux.png');}
.case.sable { background-color: #f1c40f; }
.case.neige { background-color: #ecf0f1; }


/* Village & Temple (Conservés à l'identique) */
.case.village-hg, .case.village-hd { background-color: #c0392b; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 12px); }
.case.village-hg::after { content: ''; position: absolute; top: -10px; left: 15px; width: 14px; height: 25px; background: #5d4037; border: 2px solid #3e2723; }
.case.village-hg::before { content: '☁️'; position: absolute; top: -30px; left: 12px; font-size: 18px; animation: fumee-anim 4s infinite linear; filter: grayscale(1) brightness(2); }
.case.village-bg, .case.village-bd { background-color: #d35400; border-top: 2px solid #3e2723; }
.case.village-bg::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 35px; background: #3e2723; border-radius: 8px 8px 0 0; border: 2px solid gold; }
/* Petit temple simple (Fallback) */
.case.temple { background-color: #8e44ad; background-image: url('images/temple.png') ; box-shadow: inset 0 0 10px #fff; }
.case.temple-hg { background: var(--temple-dark) linear-gradient(115deg, transparent 40%, var(--temple-roof) 40%), linear-gradient(to bottom, transparent 80%, var(--temple-stone) 80%); }
.case.temple-hd { background: var(--temple-dark) linear-gradient(245deg, transparent 40%, var(--temple-roof) 40%), linear-gradient(to bottom, transparent 80%, var(--temple-stone) 80%); }
.case.temple-bg, .case.temple-bd { background: var(--temple-dark) linear-gradient(90deg, transparent 20%, var(--temple-stone) 20%, var(--temple-stone) 35%, transparent 35%, transparent 65%, var(--temple-stone) 65%, var(--temple-stone) 80%, transparent 80%), linear-gradient(to top, var(--temple-shadow) 20%, transparent 20%); }

.escalier-monte { background: repeating-linear-gradient(0deg, #333 0 2px, #777 2px 10px); }
.escalier-monte::after { content: '⏫'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; text-shadow: 0 0 5px #fff; }
.escalier-descend { background: repeating-linear-gradient(180deg, #111 0 2px, #444 2px 10px); box-shadow: inset 0 0 15px #000; }
.escalier-descend::after { content: '⏬'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; filter: brightness(0.7); }

/* =========================================================
   5. PIONS & INTERFACE
   ========================================================= */
.pion { width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5); font-size: 16px; z-index: 50; }
.hero { background: linear-gradient(145deg, #1e3c72, #2a5298); border: 2px solid var(--gold); }
.ami { background: linear-gradient(145deg, #3498db, #2980b9); border: 1px solid #fff; }
.monstre { background: linear-gradient(145deg, #c0392b, #8e44ad); border: 1px solid #fff; cursor: crosshair; pointer-events: auto !important; }
#console {
    position: absolute; /* Change fixed par absolute */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    
    width: 600px;
    max-width: 90%;
    height: 100px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 10px;
    overflow-y: auto;
    z-index: 2000;
}

#hud {
    position: absolute; /* Change fixed par absolute */
    top: 20px;
    left: 50%;
    transform: translateX(-50%); /* Centrage horizontal parfait */
    
    width: auto;
    min-width: 400px;
    height: 60px;
    background: var(--panel-bg);
    border: 1px solid #555;
    border-radius: 30px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 2000; /* Doit être au-dessus de la carte */
    z-index: 2000; /* Doit être au-dessus de la carte */
}
#battle-panel, #inventory-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #111; border: 3px solid var(--red); border-radius: 12px; padding: 20px; z-index: 9999; box-shadow: 0 0 0 1000px rgba(0,0,0,0.7); display: none; }

/* =========================================================
   6. ANIMATIONS
   ========================================================= */
@keyframes vague-mouvement { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulsationLave { 0%, 100% { background-color: #c0392b; } 50% { background-color: #e74c3c; } }
@keyframes fumee-anim { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 0.6; } 100% { transform: translateY(-40px) scale(1.5); opacity: 0; } }
@keyframes float-centered { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } }

.btn-menu {
    background: rgba(142, 68, 173, 0.2); /* Fond violet léger */
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #8e44ad;
    text-decoration: none;
    font-size: 0.8em;
    font-family: 'Cinzel', serif;
    transition: 0.3s;
    margin-left: 5px;
}

.btn-menu:hover {
    background: #8e44ad;
    color: white;
    box-shadow: 0 0 10px #8e44ad;
}
/* La case elle-même quand elle est inconnue */
.case.inconnue {
    filter: brightness(0); /* Noir total */
    pointer-events: none;  /* On ne peut pas cliquer sur ce qu'on ne voit pas */
}

/* Optionnel : Brouillard "visité mais pas actuellement en vue" */
.case.decouverte {
    filter: brightness(0.4); /* Sombre mais visible */
}
/* Cache totalement le terrain non exploré */
.case.brouillard {
    filter: brightness(0) !important;
    background-image: none !important;
    pointer-events: none; /* Empêche de cliquer dans le noir */
}

/* Zone déjà visitée mais hors de vue (plus sombre) */
.case.decouverte {
    filter: brightness(0.4);
}
/* --- LE CHÂTEAU EN CSS PUR (AUCUNE IMAGE REQUISE) --- */

/* Base commune pour les 4 cases */
.case.chateau-hg, .case.chateau-hd, .case.chateau-bg, .case.chateau-bd {
    background-color: #535c68 !important;
    position: relative;
    border: 1px solid #2c3e50;
    overflow: hidden;
}

/* 20. Haut-Gauche : LA TOUR */
.case.chateau-hg::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px;
    width: 44px; height: 54px;
    background: #3d3d3d;
    border: 3px solid #1e272e;
}
.case.chateau-hg::after {
    content: "";
    position: absolute;
    top: -5px; left: 5px;
    border-left: 27px solid transparent;
    border-right: 27px solid transparent;
    border-bottom: 25px solid #c0392b; /* Toit rouge */
}

/* 21. Haut-Droite : REMPARTS (Créneaux) */
.case.chateau-hd {
    background-image: linear-gradient(90deg, #2c3e50 50%, transparent 50%);
    background-size: 20px 15px;
    background-repeat: repeat-x;
}

/* 22. Bas-Gauche : LA PORTE (ID 22) */
.case.chateau-bg::after {
    content: "";
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 50px;
    background: #4b2c20; /* Bois de la porte */
    border: 3px solid #1e272e;
    border-radius: 20px 20px 0 0;
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.5);
}

/* 23. Bas-Droite : MUR DE PIERRE */
.case.chateau-bd::after {
    content: "";
    position: absolute;
    top: 20px; left: 10px;
    width: 15px; height: 25px;
    background: rgba(0,0,0,0.3); /* Meurtrière */
    border-radius: 5px;
}
/* --- TEXTURES DONJON GÉNÉRÉES EN CSS --- */

/* ID 10 : Mur de donjon (Effet vieilles briques) */
.case.mur-donjon {
    background-color: #2c3e50; /* Couleur de base : Bleu/Gris sombre */
    background-image: 
        linear-gradient(335deg, #1a252f 23px, transparent 23px),
        linear-gradient(155deg, #1a252f 23px, transparent 23px),
        linear-gradient(335deg, #1a252f 23px, transparent 23px),
        linear-gradient(155deg, #1a252f 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
    border: 1px solid #111;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8); /* Ombre pour donner de la profondeur */
}

/* ID 11 : Sol de donjon (Effet dalles de pierre) */
.case.sol-donjon {
    background-color: #34495e;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px; /* Divise la case de 64px en 4 dalles */
    border: 1px solid rgba(0,0,0,0.3);
}

/* Effet de lumière sur le sol pour qu'il ne soit pas plat */
.case.sol-donjon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.2) 100%);
}