/* Importation d'une police futuriste */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

:root {
    --neon-blue: #00ffff;
    --neon-pink: #ff00ff;
    --dark-bg: #0d0221;
    --light-square: #2a1b3d;
    --dark-square: #1e142b;
}

html, body { height: 100%; margin: 0; padding: 0; }

body {
    background-color: var(--dark-bg);
    color: var(--neon-blue);
    font-family: 'Orbitron', sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    text-align: center;
    padding: 20px 0;
    box-sizing: border-box;
}

#game-container { padding: 20px; display: flex; flex-direction: column; align-items: center; max-width: 100%; }
#game-logo { max-width: 300px; height: auto; margin-bottom: 20px; filter: drop-shadow(0 0 7px var(--neon-blue)) drop-shadow(0 0 15px var(--neon-blue)); }

h1, h2 {
    text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 40px var(--neon-pink), 0 0 80px var(--neon-pink);
    margin-bottom: 30px;
}

#myBoard { width: 75vmin; height: 75vmin; max-width: 800px; max-height: 800px; margin: 10px auto; border: 3px solid var(--neon-pink); box-shadow: 0 0 15px var(--neon-pink); }

.timer-display { font-size: 2em; font-weight: bold; padding: 5px 10px; margin: 5px auto; width: 200px; border: 2px solid var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); border-radius: 5px; transition: all 0.3s ease; }
.timer-display.active { border-color: var(--neon-pink); color: var(--neon-pink); box-shadow: 0 0 15px var(--neon-pink), inset 0 0 8px var(--neon-pink); }

.white-1e1d7 { background-color: var(--light-square) !important; }
.black-3c85d { background-color: var(--dark-square) !important; }

button { background-color: transparent; border: 2px solid var(--neon-pink); color: var(--neon-pink); padding: 10px 20px; margin: 10px; font-family: 'Orbitron', sans-serif; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 5px var(--neon-pink), inset 0 0 5px var(--neon-pink); }
button:hover { background-color: var(--neon-pink); color: var(--dark-bg); box-shadow: 0 0 20px var(--neon-pink), inset 0 0 10px var(--neon-pink); }

#game-info { margin-top: 20px; font-size: 1.2em; }
#status { color: var(--neon-pink); }

/* --- NOUVELLE RÈGLE CSS POUR LA PIÈCE "EN ATTENTE" --- */
.selected-piece {
    box-shadow: inset 0 0 15px 5px rgba(255, 215, 0, 0.7) !important; /* Lueur dorée */
}

/* Styles pour les cases de destination (corrigés pour la priorité) */
.square-55d63.highlight-move::after,
.square-55d63.highlight-capture::after {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
}

.highlight-move::after { background-color: rgba(0, 255, 255, 0.4); box-shadow: 0 0 10px var(--neon-blue); }
.highlight-capture::after { background-color: rgba(255, 0, 255, 0.5); box-shadow: 0 0 10px var(--neon-pink); }

#alert-message { color: #ffd700; font-size: 1.1em; font-weight: bold; text-shadow: 0 0 5px #ffd700, 0 0 10px #ff8c00; height: 1.5em; margin-bottom: 10px; opacity: 0; transition: opacity 0.5s ease-in-out; }
#alert-message.visible { opacity: 1; }