/* css/board.css */

.board-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
}

/* LE CADRE GRIS (Padding) */
.board-container {
    /* Style Visuel */
    background: #333;
    padding: 10px; /* C'est ça qui fait le cadre épais autour du bois */
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Vital pour que le padding soit inclus dans la taille */
}

/* WRAPPER INTERNE (Pour l'overlay SVG) */
.board-wrapper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex; /* Assure que l'enfant remplit */

    /* MODIFICATION : La bordure est ici pour englober l'échiquier ET le SVG */
    border: 3px solid #333;
    box-sizing: border-box;
}

/* L'ECHIQUIER (Bois) */
.board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 100%;
    height: 100%;

    background-color: #8B7355;

    /* MODIFICATION : Plus de bordure ici, elle est sur le parent */
    border: none;

    user-select: none;
    box-sizing: border-box;
}

/* OVERLAY SVG */
.board-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    overflow: visible;
}

/* --- CASES --- */
.square {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    box-sizing: border-box;
    border: 2px solid transparent;
}
.square.light { background-color: #F0D9B5; }
.square.dark { background-color: #B58863; }

/* Highlights */
.square.selected { background-color: #BDD1F8 !important; border: 2px solid #4A90E2; box-shadow: inset 0 0 10px rgba(74, 144, 226, 0.5); }
.square.last-move { background-color: rgba(255, 250, 205, 0.6) !important; box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3); }
.square.highlight { background-color: #C8E6C9 !important; box-shadow: inset 0 0 10px rgba(76, 175, 80, 0.6); }
.square.highlight::after { content: ''; width: 16%; height: 16%; background-color: rgba(76, 175, 80, 0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; }
.square.capture-hint { background-color: #C8E6C9 !important; box-shadow: inset 0 0 10px rgba(76, 175, 80, 0.6); }
.square.capture-hint::after { content: ''; position: absolute; width: 85%; height: 85%; border: 4px solid rgba(76, 175, 80, 0.8); border-radius: 50%; pointer-events: none; box-sizing: border-box; z-index: 5; }
.square.check { background-color: #FFB6C6 !important; border: 2px solid #EF4444; box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.5), 0 0 15px rgba(239, 68, 68, 0.8); animation: check-pulse 0.8s infinite alternate; }
@keyframes check-pulse { 0% { box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.5), 0 0 15px rgba(239, 68, 68, 0.8); } 100% { box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.8), 0 0 25px rgba(239, 68, 68, 1); } }

/* Pièces */
.piece { width: 100%; height: 100%; z-index: 10; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); cursor: default; pointer-events: none; }
.piece:active { cursor: grabbing; transform: scale(1.1); }
.piece.interactive { cursor: grab; pointer-events: auto; }
.piece.interactive:active { cursor: grabbing; transform: scale(1.1); }
.piece.interactive:hover { filter: brightness(1.1); }
.dragging-ghost { position: fixed; pointer-events: none; z-index: 1000; width: 80px; height: 80px; opacity: 0.9; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }
.hide-piece { opacity: 0 !important; }

/* SVG Styles */
line { stroke-width: 1.6px; stroke-linecap: round; transition: opacity 0.2s; }
.arrow-engine { stroke: #546E7A; marker-end: url(#arrow-engine); opacity: 0.9; }
.arrow-green { stroke: #629924; marker-end: url(#arrow-green); opacity: 0.9; }
.arrow-red { stroke: #CC3333; marker-end: url(#arrow-red); opacity: 0.9; }
.arrow-orange { stroke: #F5A623; marker-end: url(#arrow-orange); opacity: 0.9; }
.arrow-blue { stroke: #5AC8FA; marker-end: url(#arrow-blue); opacity: 0.9; }
.circle-highlight { fill: none; stroke-width: 1.1px; opacity: 0.8; }

/* --- NOUVEAU : COORDONNÉES DES CASES --- */
.coord {
    position: absolute;
    font-size: 13px; /* Taille légèrement augmentée pour être bien lisible */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
    z-index: 5;
    opacity: 0.85; /* Légère transparence pour s'intégrer au bois */
}

.coord.rank {
    top: 2px;
    left: 4px;
}

.coord.file {
    bottom: 0px;
    right: 4px;
}

/* 1. Plateau normal (Blancs en bas) : on retourne les Noirs (en haut) */
.board.invert-opponent:not(.flipped) .piece.black svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* 2. Plateau retourné (Noirs en bas) : on retourne les Blancs (en haut) */
.board.invert-opponent.flipped .piece.white svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* On applique la même logique au menu de promotion s'il s'ouvre ! */
.board.invert-opponent:not(.flipped) .square #promotion-menu .piece.black svg {
    transform: rotate(180deg);
}
.board.invert-opponent.flipped .square #promotion-menu .piece.white svg {
    transform: rotate(180deg);
}

/* --- NOUVEAU : PREMOVE (Bleu-Gris) --- */
.square.premove-from { background-color: rgba(100, 116, 139, 0.3) !important; box-shadow: inset 0 0 10px rgba(100, 116, 139, 0.4); }
.square.premove-to { background-color: rgba(100, 116, 139, 0.5) !important; box-shadow: inset 0 0 10px rgba(100, 116, 139, 0.6); }

/* Points de déplacement théoriques (Premove) */
.square.premove-highlight::after {
    content: ''; width: 16%; height: 16%; background-color: rgba(100, 116, 139, 0.8); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5;
}
.square.premove-capture-hint::after {
    content: ''; position: absolute; width: 85%; height: 85%; border: 4px solid rgba(100, 116, 139, 0.8); border-radius: 50%; pointer-events: none; box-sizing: border-box; z-index: 5;
}

/* --- ANIMATIONS DES PIÈCES --- */
.square .piece { transition: transform 0.15s ease-out; }
.piece.interactive:active, .dragging-ghost { transition: none !important; }