@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

html { 
  background: url(https://www.marouze.com/GAMES/TIC_TAC_TOE/TIC_TAC_TOE_BG-min.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  font-family: 'Montserrat', sans-serif;
}

.container {
  text-align: center;
   background-color: rgba(255, 255, 255, 0.1);
}

.game-board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 5px;
  margin-bottom: 20px;
  background-image: url('https://www.marouze.com/GAMES/TIC_TAC_TOE/canva_BG.png');
  background-size: cover;
}


.cell {
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  cursor: pointer;
}

.cell:hover:not(.winning-cell) {
 background-color: rgba(240, 240, 240, 0.2);
}



#status-message {
  font-size: 1.2em;
}

#restart-button {
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
}

/* Remplacer le symbole "O" par un GIF */
.o::after {
  content: '';
  display: block;
  width: 140px; /* largeur de l'image */
  height: 140px; /* hauteur de l'image */
  background-image: url('https://www.marouze.com/GAMES/TIC_TAC_TOE/circle_100x100.gif');
  background-size: cover; /* Ajuster la taille de l'image */
  animation: playOnceO 0.18s steps(1) forwards; /* Animation une seule fois */
}

@keyframes playOnceO {
  100% {
    background-image: url('https://www.marouze.com/GAMES/TIC_TAC_TOE/last_frame_circle.png'); /* Image statique extraite du GIF */
  }
}

/* Remplacer le symbole "X" par un GIF */
.x::after {
  content: '';
  display: block;
  width: 140px; /* largeur de l'image */
  height: 140px; /* hauteur de l'image */
  background-image: url('https://www.marouze.com/GAMES/TIC_TAC_TOE/cross_100x100.gif');
  background-size: cover; /* Ajuster la taille de l'image */
  animation: playOnceX 0.18s steps(1) forwards; /* Animation une seule fois */
}

@keyframes playOnceX {
  100% {
    background-image: url('https://www.marouze.com/GAMES/TIC_TAC_TOE/last_frame_cross.png'); /* Image statique extraite du GIF */
  }
}

/* Styles pour les cellules gagnantes */
.winning-cell {
  background-color: #8effa9; /* Couleur verte pour les cellules gagnantes */
}

/* Ajoutez ces styles pour cacher les boutons de difficulté par défaut */
.difficulty-select {
    justify-content: center;
  align-items: center;
  display: none;
}

/* Styles pour les boutons */
.button {
  font-family: 'Montserrat', sans-serif;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  border: 2px solid #4CAF50;
  background-color: white;
  color: #4CAF50;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  margin: 5px;
}

.button:hover {
  background-color: #4CAF50;
  color: white;
}

.button.active {
  /* Vos styles pour les boutons actifs */
  background-color: #4CAF50; /* Exemple de couleur de fond */
  color: white; /* Exemple de couleur de texte */
  /* Autres styles que vous souhaitez appliquer aux boutons actifs */
}

/* Ajouter la classe "hidden" pour cacher le tableau */
.hidden {
  display: none;
}

.container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 200px;
  left: 50%; /* Pour centrer horizontalement */
  transform: translateX(-50%);
}

.game-board {
  display: grid;
  grid-template-columns: repeat(3, 140px);
  grid-gap: 5px;
  margin-bottom: 20px;/* Vos autres styles pour le tableau de jeu */
}

#play_again{  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 650px;
  left: 50%; /* Pour centrer horizontalement */
  transform: translateX(-50%);}

#game-overlay {
  /* Positionnement et taille par rapport au game-board */
  position: absolute;
  width: 100%; /* Prend toute la largeur du game-board */
  height: 100%; /* Prend toute la hauteur du game-board */
  top: 0; /* Positionné en haut du game-board */
  left: 0; /* Positionné à gauche du game-board */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Autres styles pour l'overlay */
  background-color: rgba(255, 255, 255, 0.75); /* Fond blanc semi-transparent */
  z-index: 1; /* Assure que l'overlay est placé au-dessus du jeu */
}

.winner-symbol {
  font-size: 5em; /* Taille du symbole du gagnant */
  /* Autres styles pour le symbole */
}

#winner-text {
    text-align: center;
   font-size: 5em; /* Taille du symbole du gagnant */
  display: block; /* Par défaut, affiché */
}

#draw-text {
    text-align: center;
   font-size: 5em; /* Taille du symbole du gagnant */
  display: none; /* Par défaut, caché */
}

.winning-cell {
  animation: highlight 1s ease-in-out forwards;
}

@keyframes highlight {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#draw-text,
#winner-text {
  animation: fade 0.5s forwards;
  display: none;
}

@keyframes fade {
  from {
 opacity: 0;
 transform: translateY(-10px);
       }
  to {
    opacity: 1;
    transform: translateY(0); 
    }
}

#easy.active,
#normal.active,
#hard.active {
  background-color: #4caf50;
  color: white; /* Autres styles */
}

#restart-button {
  display: none;
}