/* style.css — Version Finale : Contours Propres, Flip & Bouton Actif */

/* --- BASE & GESTION DU SCROLL --- */
html, body {
    margin: 0; padding: 0;
    width: 100vw; min-height: 100vh;
    overflow-y: auto; overflow-x: hidden;
    background: #1a1a1a; color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overscroll-behavior: none;
}

/* --- LAYOUT PRINCIPAL --- */
.main-layout {
    display: flex; flex-direction: row; 
    width: 100%; min-height: 100vh; 
    align-items: center; justify-content: center;
    padding: 20px 0; box-sizing: border-box; gap: 20px;
}

/* PANNEAUX LATÉRAUX */
.panel {
    flex: 1; display: flex; flex-direction: column;
    justify-content: center; padding: 20px;
}
.left-panel { align-items: flex-end; text-align: right; }
.right-panel { align-items: flex-start; text-align: left; gap: 20px; }

h1 { font-size: 3rem; margin: 0; line-height: 1.1; color: #f0d9b5; text-shadow: 2px 2px 0 #000; }
#status { font-size: 1.2rem; color: #ccc; min-height: 1.5em; font-weight: bold; margin: 10px 0 0 0; }

/* --- ECHIQUIER --- */
#chessboard-container { 
    display: flex; align-items: center; justify-content: center; 
    flex-direction: column; 
}

#chessboard {
    width: 70vmin; height: 70vmin;
    display: grid; 
    grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(8, 1fr);
    border: 8px solid #555; background: #000;
    box-shadow: 0 0 50px rgba(0,0,0,0.5); 
    user-select: none; position: relative; 
    touch-action: none;
    
    /* 🔄 TRANSITION FLUIDE POUR LE FLIP */
    transition: transform 0.6s ease-in-out;
}

/* 🔄 LOGIQUE DE RETOURNEMENT (FLIP) */
#chessboard.flipped {
    transform: rotate(180deg);
}
#chessboard.flipped .piece {
    transform: rotate(180deg); /* Les pièces restent droites */
}

/* --- CASES --- */
.square {
    display: flex; align-items: center; justify-content: center;
    font-size: 9vmin; /* Taille des pièces */
    user-select: none; cursor: pointer;
    aspect-ratio: 1 / 1; min-width: 0; min-height: 0;
    position: relative; 
}

.white { background: #f0d9b5; }
.black { background: #b58863; }
.piece { 
    pointer-events: none; z-index: 10; 
    transition: transform 0.6s ease-in-out; 
}

/* --- HIGHLIGHTS (CONTOURS UNIQUEMENT) --- */

/* 1. Dernier coup (CORRIGÉ : Pas de background, juste le contour) */
.square.last-move { 
    /* IMPORTANT : On ne met AUCUNE propriété background-color ici */
    box-shadow: inset 0 0 0 4px #FFD700 !important; 
}

/* 2. Sélection (Bleu Cyan) */
.square.selected { 
    /* Contour interne épais (4px) SANS toucher au background */
    box-shadow: inset 0 0 0 4px #00aaff !important;
}

/* 3. Coup Possible (Vert) */
.square.target-move { 
    box-shadow: inset 0 0 0 4px #33cc33 !important;
}

/* 4. Capture Possible (Rouge) */
.square.target-capture { 
    box-shadow: inset 0 0 0 4px #ff4444 !important;
}

/* --- UI / BOUTONS --- */
.controls-group { display: flex; flex-direction: column; gap: 10px; }

button {
    background: #333; color: white; border: 1px solid #777;
    padding: 12px 24px; font-size: 1rem; border-radius: 6px;
    cursor: pointer; transition: background 0.2s, transform 0.1s;
    min-height: 44px; touch-action: manipulation;
}
button:hover { background: #444; }
button:active { transform: scale(0.98); background: #555; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- NOUVEAU : État "Actif" (Vert clair) --- */
button.active, button.active:hover {
    background-color: #66bb6a !important; /* Vert clair */
    border-color: #66bb6a !important;
    color: white !important;
}

.ai-settings { margin-top: 15px; display: flex; align-items: center; gap: 10px; color: #ccc; }
#ai-depth { padding: 8px; background: #333; color: white; border: 1px solid #777; }

/* Petit bouton flip spécifique */
#btn-flip { font-size: 1.5rem; padding: 5px 15px; background: transparent; border: none; }

/* --- MOBILE --- */
@media (max-aspect-ratio: 1/1) {
    .main-layout { flex-direction: column; justify-content: flex-start; height: auto; gap: 15px; }
    .panel { flex: 0; width: 100%; align-items: center; text-align: center; padding: 10px 0; }
    .left-panel { order: 1; }
    #chessboard-container { order: 2; margin: 5px 0; }
    .right-panel { order: 3; padding-bottom: 50px; }
    
    h1 { font-size: 2.5rem; margin: 5px 0; }
    
    #chessboard { width: 94vw; height: 94vw; border-width: 4px; }
    .square { font-size: 13vw; } 
    
    .controls-group { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; }
    .ai-settings { flex-direction: row; justify-content: center; }
}