body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #555;
  color: white;
}

.container {
  display: flex;
  height: 100vh;
}

.main {
  margin-left: 200px;            /* laisse la place à la sidebar */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.top-bar, .bottom-bar {
  width: 75%;
  display: flex;
  justify-content: space-between;
  background: #666;
  padding: 10px 20px;
  border-radius: 5px;
}

.timer {
  background: #444;
  padding: 5px 15px;
  border-radius: 5px;
}

/* Right panel */
.right-panel {
  width: 15%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  position: relative; /* Ajouté */
}

.custom-select {
  position: relative;
  background: #777;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  user-select: none;
  z-index: 10; /* Ajouté */
}

/* Élément affiché par défaut */
.custom-select .selected {
  padding: 10px;
  border-radius: 6px;
}

/* Liste déroulante */
.custom-select .options {
  display: none; /* caché par défaut */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #333;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1000;
}

.custom-select .option {
  padding: 10px;
  cursor: pointer;
}

.custom-select .option:hover {
  background: #00AEEF;
}

.btn-blue {
  background: #00AEEF;
  border: none;
  padding: 12px;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn-grey {
  background: #777;
  border: none;
  padding: 12px;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}


.playground {
  flex: 1;
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: space-between;
}



.board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  margin: 20px auto;
  border: 3px solid #000;
  width: 70vmin;         /* taille responsive */
  aspect-ratio: 1 / 1;   /* carré parfait */
  background: rgb(165, 134, 88);
}

.captures {
  padding: 10px;
  background: #333;
  margin: 10px;
  height: 60vmin;
  width: 60px;
  border-radius:5px;
  display: flex;
  flex-direction: column; /* éléments en colonne */
  align-items: center;    /* centre horizontalement */
  justify-content: center; /* centre verticalement si la div a une hauteur définie */
  gap: 5px;               /* espace entre les éléments */
}
.captures img {
  width: 100%;
  aspect-ratio: 1 / 1;   /* carré parfait */
  cursor: pointer;
}

.captures img.selected {
  background-color: #1a1a1a;;
  border-radius: 50%;
}


.cell {
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5vmin;   /* responsive */
  cursor: pointer;
  aspect-ratio: 1 / 1;   /* carré parfait */
}


.cell img.piece-img {
  max-width: 100%;  /* ajuste selon la taille de tes cases */
  max-height: 100%;
  object-fit: contain;
}

.rotated {
  transform: rotate(180deg);
}

.cell.selected {
  background-color: rgba(255, 251, 0, 0.3);
}

.cell.legal {
  position: relative; /* important pour positionner le rond */
}

.cell.legal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;       /* diamètre du rond */
  height: 30px;
  background-color: rgba(0, 158, 232, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* pour que le rond ne gêne pas les clics */
  
}

/* Dernière case déplacée */
.cell.last-move {
  background-color: rgba(214, 214, 96, 0.3);
}

/* Roi en echec */
.cell.check {
  background-color: rgba(241, 94, 69, 0.3);
}

/* Boîte principale */
.game-modal {
  border: none;
  border-radius: 10px;
  padding: 0;
  background: transparent;
}

/* Contenu interne */
.game-modal__content {
  background: #444;
  color: white;
  padding: 30px;
  border-radius: 10px;
  max-width: 90vw;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 15px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: modalFade 0.2s ease-out;
}

/* Titre */
.game-modal__content h2 {
  margin: 0;
  color: #00AEEF;
}

/* Message */
.game-modal__content p {
  margin: 0;
  opacity: 0.9;
}

/* Actions */
.game-modal__actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

/* Boutons */
.game-modal__actions button,
.game-modal__actions .btn-secondary {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s;
}

/* Bouton principal */
.game-modal__actions button {
  background: #00AEEF;
  color: white;
}

.game-modal__actions button:hover {
  background: #0095cc;
}

/* Bouton secondaire */
.btn-secondary {
  background: #373737;
  color: white;
}

.btn-secondary:hover {
  background: #2e2e2e;
}

/* Animation légère */
@keyframes modalFade {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}