* {
  box-sizing: border-box;
}
body {
  background-color: #1b181d;
  font-family: "Fira Sans";
  color: white;
  height: 100vh;
  margin: 0;
}

#game-view {
  display: flex;
  justify-content: center;
  margin: 0;
}
/* GameView */

#console {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 0;
}
#console-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem;
  margin-bottom: 0.5rem;
  padding: 0 15px;
}
#console-top {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #19161b;
  box-shadow: 1px 10px 20px 1px rgba(0, 0, 0, 0.427);
  margin: 0;
}
#session-controls {
  display: flex;
  justify-content: center;
}
#player-info {
  display: flex;
  justify-content: flex-end;
}
#disconnect {
  background-color: transparent;
  border: none;
}
.fa-power-off {
  color: #f1e5d6;
  background-color: #c32c4b;
  font-size: 1.5em;
  border-radius: 50px;
  padding: 10px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.8);
}
.fa-power-off:active {
  transform: scale(0.9);
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 1);
}
button#toggleKeyboardButton {
  background-color: transparent;
  border: none;
}
button#toggleKeyboardButton > .fa-keyboard {
  color: #333;
  font-size: 1.5em;
}

/* Username et Avatar //////////////////////////////////////////////////////////////// */

#player {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 15px;
  margin: 0;
  padding-left: 15px;
  border-top-left-radius: 15px;
}
#avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}
#avatar_img {
  width: 70px;
  height: 70px;
  padding: 0 15px;
  height: auto;
}
#player-name {
  font-family: "Agdasima";
  color: #f1e5d6;
  padding: 0 15px;
}
#wordCountDisplay {
  font-family: "Agdasima";
  color: #f1e5d6;
}

/* ///////////////////////////////////////////////////////////////// */
#toStartWith {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-bottom: 10px;
}
.wrap_navs {
  padding: 20px;
  width: 100%;
  gap: 1rem;
}

button.button-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #c32c4b;
  border: 3px solid #902036; /* Bordure foncée pour l'effet de biseautage */
  font-family: "Agdasima", sans-serif;
  font-size: 1.5em;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 800;
  color: #f1e5d6;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.8);
}

button.button-link:active {
  transform: scale(0.9);
  background-color: #681b2a;
  border: 3px solid #902036;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 1);
}
button.button-link:hover {
  background-color: #da4261;
  border: 3px solid #902036;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 1);
}
.nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.nav-link-nav {
  border: none;
  font-family: "Agdasima", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}
.nav-link-nav.btn {
  background-color: #232026;
  font-size: 1.2em;
  color: #f1e5d6;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.8);
  border: none;
  outline: none;
}

.nav-link-nav.btn:active {
  background-color: #232026;
  transform: scale(0.9);
  color: #f1e5d6;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 1);
}
.nav-link-nav.btn:hover {
  background-color: #1a181c;
  color: #f1e5d6;
}
.nav-link-nav.btn.anonymousRegister {
  background-color: #c32c4b;
  font-size: 1.2em;
  color: #f1e5d6;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.8);
  border: none;
  outline: none;
}

.nav-link-nav.btn.anonymousRegister:active {
  background-color: #b12944;
  transform: scale(0.9);
  color: #f1e5d6;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 1);
}
.nav-link-nav.btn.anonymousRegister:hover {
  background-color: #d22f4f;
  color: #f1e5d6;
}
.dropdown-item {
  color: #261b3b;
}
#console-body {
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  /* background-color: #97afb4; */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #232026;
  box-shadow: 1px 10px 20px 1px rgba(0, 0, 0, 0.427);
  margin: 0;
  padding: 5px;
}
.screen-frame {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: auto;
}
.beside_pos {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

/* Garde l'affichage des boutons en colonne */
.beside_tiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
}
.length-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: auto;
}
#tiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 450px;
  height: 450px;
  margin: 1rem;
  border-radius: 10px;
}
.images-container {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  box-sizing: border-box;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
}
.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateX(180deg); /* Image inversée au départ */
  backface-visibility: hidden; /* Cache l'arrière */
  transition: transform 1s ease-in-out; /* Animation fluide */
  z-index: 1; /* Image en dessous */
}

/* Quand le flip est activé */
.wrap.flipped img {
  transform: rotateX(0deg); /* Image devient visible */
}
.wrap {
  position: relative;
  width: 100%; /* Ajuste selon tes besoins */
  padding-top: 15%; /* 9 / 16 * 100 = 56.25%, pour garder le ratio */
  height: 0; /* Aucune hauteur spécifique, tout est géré par le padding */
  perspective: 1000px; /* Nécessaire pour un effet 3D */
}
.black-tile img {
  transform: none;
  object-fit: contain; /* S'assure que l'image reste contenue dans le conteneur */
}
/* Black Tile */
.black-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: #1b181d; */
  z-index: 2; /* Black-tile au-dessus */
  transform: rotateX(0deg); /* Face visible au départ */
  transform-origin: center;
  backface-visibility: hidden; /* Cache l'arrière */
  transition: transform 1s ease-in-out; /* Animation fluide */
}
/* Quand le flip est activé */
.wrap.flipped .black-tile {
  transform: rotateX(-180deg); /* Black-tile disparaît */
}
#black-tile_1 {
  background-position: bottom;
  background-size: cover;
}
#black-tile_2 {
  background-position: top;
  background-size: cover;
}
#black-tile_3 {
  background-position: top;
  background-size: cover;
}
#black-tile_4 {
  background-position: center;
  background-size: cover;
}
#black-tile_5 {
  background-position: center;
  background-size: cover;
}
#black-tile_6 {
  background-position: center;
  background-size: cover;
}
#black-tile_7 {
  background-position: center;
  background-size: cover;
}
#tile1,
#tile2,
#tile,
#tile4,
#tile5,
#tile6,
#tile47 {
  background-image: none; /* Au départ, pas d'image */
  transition: background-image 0.3s ease-in-out; /* Transition fluide */
}

#tile1.loaded,
#tile2.loaded,
#tile3.loaded,
#tile4.loaded,
#tile5.loaded,
#tile6.loaded,
#tile7.loaded {
  /* Applique l'image de fond une fois la tile chargée */
  background-image: url("image_path");
}

#word-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: "Agdasima" sans-serif;
  text-transform: uppercase;
  font-size: 2.5rem;
  color: #c32c4b;
  width: 100%;
  height: 17%;
  padding: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: #f7f7f70a;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

#keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 400px;
  height: auto;
  padding: 1rem;
  margin: 1rem;
  background-color: #1b181d;
  border-radius: 15px;
}
.keyboard-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 0.4rem;
}
.key,
.ctrlKey {
  width: 100%;
  aspect-ratio: 4 / 3; /* Ratio 16:9 adaptable */
  font-family: "Agdasima" sans-serif;
  font-size: 1.4rem;
  color: #f1e5d6;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 5px;
  background-color: #19161b;
  border-style: none;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease; /* Effets de transition */
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.8); /* Ombre initiale */
}
.key:active,
.ctrlKey:active {
  transform: scale(0.9); /* Réduit légèrement la taille */
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 1); /* Réduction de l'ombre */
}
.key:hover {
  background-color: #83fe7a;
  color: #19161b;
}
.keyCtrl {
  color: #f1e5d6;
}

.ctrlKey {
  color: #f1e5d6;
}
.ctrlKey:hover {
  background-color: #37313b;
  color: #f1e5d6;
}
#timer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: auto;
  padding: 1rem;
  margin: 1rem;
  border-radius: 15px;
  display: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#chrono {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}
.chrono-fit {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  width: 100px;
  height: 100px;
  padding-bottom: 17px;
}
.chrono-weight {
  position: relative;
  width: 100px;
}
#timer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Agdasima", sans-serif;
  color: #f4d3a8;
  font-size: 1.5em;
  width: 100px;
  height: 100px;
  border-radius: 200px;
  font-weight: 900;
  margin: auto;
  z-index: 1;
}
#controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
  padding: 0;
}
#insert-word {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
#send-word {
  width: 100%;
  margin: auto;
}

#letters-container-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
hr {
  border: 1px solid #f4d3a8;
}
#remaining-attempts {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Agdasima" sans-serif;
  font-weight: 500;
  font-size: 1.5em;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: #c32c4b;
  color: #f4d3a8;
}
#guessed-letters {
  width: 100%;
  font-family: "Sofia Sans", serif;
  color: #c32c4b;
  font-weight: 500;
  font-size: 1.5em;
  padding: 5px;
  text-transform: uppercase;
  text-align: center;
}
#next-word {
  display: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#quit-game {
  display: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
/* Gestion du profil///////////////////////////////////////////////////////////////////// */
.profile-images-grid img {
  width: 50px;
  height: 50px;
  margin: 5px;
}
#image_profil {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.profile-images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px; /* Espacement entre les images */
  margin-top: 20px;
  justify-content: flex-start;
}
#previousUsername {
  font-size: 2em;
}
.previous_user {
  width: auto;
  height: auto;
  border: 2px solid #302a33;
  padding: 0 5px;
  border-radius: 5px;
}
#change_avatar {
  outline: none;
  border: none;
  background-color: #eab054;
  color: #302a33;
  font-weight: bold;
}
#change_avatar:hover {
  outline: none;
  border: none;
  background-color: #cc9843;
  color: #302a33;
  font-weight: bold;
}
#change_avatar:focus,
#change_avatar:active {
  outline: none !important;
  border: none !important;
  background-color: #cc9843 !important;
  color: #302a33 !important;
  font-weight: bold !important;
  box-shadow: none !important;
}
.myFriendsBtn {
  outline: none;
  border: none;
  background-color: #eab054;
  color: #302a33;
  font-weight: bold;
}
.myFriendsBtn:hover {
  outline: none;
  border: none;
  background-color: #cc9843;
  color: #302a33;
  font-weight: bold;
  box-shadow: none;
}
.myFriendsBtn:focus,
.myFriendsBtn:active {
  outline: none !important;
  border: none !important;
  background-color: #cc9843 !important;
  color: #302a33 !important;
  font-weight: bold !important;
  box-shadow: none !important;
}
#addFriendBtn {
  outline: none;
  border: none;
  background-color: #eab054;
  color: #302a33;
  font-weight: bold;
}
#addFriendBtn:hover {
  outline: none;
  border: none;
  background-color: #eab054;
  color: #302a33;
  font-weight: bold;
}
#addFriendBtn:focus,
#addFriendBtn:active {
  outline: none !important;
  border: none !important;
  background-color: #cc9843 !important;
  color: #302a33 !important;
  font-weight: bold !important;
  box-shadow: none !important;
}
#acceptButton {
  outline: none;
  border: none;
  background-color: #83fe7a;
  color: #182f17;
  font-weight: bold;
}
#acceptButton:hover {
  outline: none;
  border: none;
  background-color: #68d761;
  color: #182f17;
  font-weight: bold;
}
#acceptButton:focus,
#acceptButton:active {
  outline: none;
  border: none;
  background-color: #50bb49;
  color: #182f17;
  font-weight: bold;
}
#declineButton {
  outline: none;
  border: none;
  background-color: #c32c4b;
  color: #f4d3a8;
  font-weight: bold;
}
#declineButton:hover {
  outline: none;
  border: none;
  background-color: #902036;
  color: #f4d3a8;
  font-weight: bold;
}
#declineButton:focus,
#declineButton:active {
  outline: none;
  border: none;
  background-color: #902036;
  color: #f4d3a8;
  font-weight: bold;
}
.friendFirstname {
  font-size: 2em;
}
#btn_word_list {
  outline: none;
  border: none;
  background-color: #eab054;
  color: #302a33;
  font-weight: bold;
}
#btn_word_list:hover {
  outline: none;
  border: none;
  background-color: #cc9843;
  color: #302a33;
  font-weight: bold;
}
#btn_word_list:focus,
#btn_word_list:active {
  outline: none !important;
  border: none !important;
  background-color: #cc9843 !important;
  color: #302a33 !important;
  font-weight: bold !important;
  box-shadow: none !important;
}
#profil_btn,
#contact_btn {
  background-color: #0e0d0f;
  border: none;
  color: #f4d3a8;
  font-weight: bold;
}

#collapseExample .card-body {
  max-height: 350px; /* Limite la hauteur du conteneur */
  overflow-y: auto; /* Ajoute un défilement vertical si le contenu dépasse */
}

/* /////////////////////////////////////////// */
@media (max-width: 490px) {
  #tiles {
    width: 300px;
    height: 300px;
  }
  button.button-link {
    width: 35px;
    height: 35px;
    font-size: 1em;
  }
  .fa-power-off {
    display: none;
    color: #f1e5d6;
    font-size: 1em;
  }

  .nav-link-nav.btn {
    font-size: 0.8em;
  }
}
/* taille des tuiles réduite */
@media (max-width: 338px) {
  #tiles {
    width: 270px;
    height: 270px;
  }
}

/* déplacement des colonnes de la console top */
@media (max-width: 1015px) {
  .wrap_navs {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #toStartWith {
    z-index: 1001;
  }
}
@media (max-width: 656px) {
  #player,
  #toStartWith,
  #session-controls {
    flex: 1 0; /* 100% de largeur pour chaque section */
  }

  #session-controls {
    order: 1; /* Déplacer le bloc session-controls à gauche */
    padding: 15px;
  }
  #player {
    order: 0; /* Mettre player avant session-controls */
  }
  #toStartWith {
    order: 2; /* Si tu veux qu'elles suivent dans l'ordre */
    z-index: 1001;
  }
  .nav-link-nav.btn {
    font-size: 0.8em;
  }
}
/* taille du clavier réduite */
@media (max-width: 490px) {
  #keyboard {
    width: 270px;
    padding: 0.5rem;
    margin: 0.5rem;
  }

  .key,
  .ctrlKey {
    font-size: 1.2rem; /* Réduit la taille des boutons */
    aspect-ratio: 3 / 2; /* Change légèrement l'aspect des touches pour mieux les adapter à l'écran */
  }

  .keyboard-row {
    grid-template-columns: repeat(
      auto-fit,
      minmax(50px, 1fr)
    ); /* Réduit la taille des colonnes pour les petites tailles d'écran */
    gap: 0.3rem; /* Réduit l'espace entre les touches */
  }
}
/* déclenchement du bouton pour clavier natif mobile */
@media (max-width: 490px) {
  /* Affiche et active le bouton pour désactiver le clavier virtuel uniquement sur les smartphones */
  #toggleKeyboardButton {
    display: inline-block;
    pointer-events: all;
    font-size: 0.8em;
  }
}

/* ////////////////////////////////////////////////////////////////////// */
/* Modal gameOverModal */
#gameOverModal {
  display: none;
}

.modal-title {
  font-family: "Sofia Sans", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  color: #f4d3a8;
  text-align: center;
  width: 100%;
}

.modal-content {
  background-color: #1b181d5e;
  border: 2px solid #1b181d;
  font-family: "Sofia Sans", sans-serif;
  color: #f4d3a8;
  text-align: center;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7);
}

.modal-header,
.modal-body {
  border: none;
  color: #f4d3a8;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.modal-footer {
  border: none;
  color: #f4d3a8;
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.modal-body {
  padding: 20px;
}
#btn_gameOver {
  background-color: #0e0d0f;
  border: none;
  color: #f4d3a8;
  font-weight: bold;
}

/* //////////////////////////////////////////////////////////////////////// */

#GameRulesModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}
#GameRulesModal .modal-content {
  background-color: #1b181d;
  font-family: "Sofia Sans", sans-serif;
  color: #f4d3a8;
  text-align: center;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7);
}
#modal-message h4,
p,
h2,
h5,
h3 {
  text-align: left;
}
/* ScoreBoardModal//////////////////////////////////////////////////// */
#ScoreBoardModal {
  z-index: 1600;
}

#ScoreBoardModal .modal-header {
  background-color: #1b181d;
  border-bottom: 1px solid #dee2e6;
  opacity: 1 !important;
}
#ScoreBoardModalLabel {
  color: #f4d3a8;
  font-weight: bold;
}
#ScoreBoardModal .modal-footer {
  background-color: transparent;
}

#ScoreBoardModal .table {
  background-color: transparent;
  border: none;
}

#ScoreBoardModal .table th,
#ScoreBoardModal .table td {
  background-color: transparent;
  color: #f4d3a8;
}

/* ////////////////////////////////////////////////////////// */

/* Modal de déconnexion */

#cancelLogout {
  background-color: #c32c4b;
  border: none;
  color: #f4d3a8;
  font-weight: bold;
}
#confirmLogout {
  background-color: #83fe7a;
  border: none;
  color: #182f17;
  font-weight: bold;
}

/* ////////////////////////////////////////////////////////// */

/* Modal support */
.submit_contact_btn {
  background-color: #83fe7a;
  border: none;
  color: #182f17;
  font-weight: bold;
}
/* ///////////////////////////////////////////////////////// */
/* Style du bouton hamburger */
.hamburger-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 20px;
  margin-top: 10px;
  width: 30px;
  height: 25px;
  padding: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

/* Style des barres du bouton hamburger */
.bar {
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
}

/* Masquer le menu mobile par défaut */
.mobile-menu {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #1b181d;
  border: 0.5px solid #f1e5d61b;
  border-radius: 10px;
  position: absolute;
  top: 50px;
  right: 0;
  left: 0;
  z-index: 9999;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.5);
}
.mobile-menu > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.mobile-menu ul li {
  margin: 10px 0;
}

.mobile-menu ul li a {
  text-decoration: none;
  font-family: "Sofia Sans", sans-serif;
  text-transform: uppercase;
  font-size: 1.1em;
  color: #f1e5d6;
}
/* Afficher le menu mobile quand il est actif */
.mobile-menu.active {
  display: block;
}
.dropdown-divider {
  width: 100%;
  height: 1px;
  background-color: #f4d3a81f;
  border: none;
  margin: 0;
}
/* Media queries pour cacher le menu et afficher le bouton sous 728px */
@media (max-width: 768px) {
  #console-top {
    display: flex;
    flex-wrap: wrap;
  }
  .fa-power-off {
    display: none;
  }
  #player,
  #toStartWith,
  #session-controls {
    flex: 1 0;
  }

  #session-controls {
    order: 2;
    padding: 15px;
  }
  #player {
    order: 0;
  }
  #toStartWith {
    order: 1;
    z-index: 1001;
  }
  .beside_pos {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 10px;
  }

  .beside_tiles {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: auto;
  }
  .length-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
  }

  .nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 250%;
    margin: 15px;
  }
  .nav-link-nav.btn {
    font-size: 1em;
  }

  .hamburger-btn {
    display: flex;
  }

  .mobile-menu {
    display: none;
  }

  .mobile-menu.active {
    display: block;
  }
  .fa-power-off {
    display: none;
  }
  #player-info {
    display: flex;
    justify-content: flex-start;
  }
  #avatar_img {
    width: 60px;
    height: 60px;
    padding: 0 15px;
    margin-left: 10px;
    height: auto;
  }
  button.button-link {
    width: 40px;
    height: 40px;
    font-size: 1em;
  }
}
#session-controls {
  position: relative;
}
/* //////////////////////////////////////////////////////////////////////////// */
/* ScoreBoardModal fade-down ; checkModalProfil fade-up*/
/* Ajout d'un effet de fade-out et translation vers le bas */
/* Animation pour la fermeture de ScoreBoardModal */
.fade-down {
  animation: fadeDown 1s forwards;
}

@keyframes fadeDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(800px); /* Déplacement vers le bas */
  }
}

/* Animation fluide pour l'ouverture de checkModalProfil */
.fade-up {
  animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(
      -50px
    ); /* Début avec légère translation vers le haut */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Final sans translation */
  }
}

/* ////////////////////////////////////////////////////////////////////////////////// */

/* GameViewAnonymous */
.hidden {
  display: none;
}
#gameOverModal {
  display: none !important;
}
.modal-backdrop {
  display: none !important;
}
.footer-style a {
  text-decoration: none;
  color: #45404a;
  font-weight: bold;
}
.footer-style p {
  font-size: 0.6em;
}
.footer-style p {
  margin-bottom: 10px;
}
.returnHome {
  background-color: #c32c4b !important;
  border: none;
  margin-bottom: 10px;
}
#homeReturn {
  font-family: "Sofia Sans", sans-serif;
  font-size: 1em;
  color: #f1e5d6;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
}
/* //////////////////////////////////////////////////////////////// */
@media (max-width: 768px) {
  #console-top {
    display: flex;
    flex-wrap: wrap;
  }

  .wrap_navs {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #toStartWith {
    z-index: 1001;
  }

  #player,
  #toStartWith,
  #session-controls {
    flex: 1 0;
  }

  #session-controls {
    order: 2;
    padding: 15px;
  }

  #player {
    order: 0;
  }

  #toStartWith {
    order: 1;
    z-index: 1001;
  }

  .beside_pos,
  .beside_tiles {
    display: flex;
    flex-direction: row; /* Assure que ces éléments passent bien en rangée */
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
  }

  .length-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
  }

  .nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 250%;
    margin: 15px;
  }

  .nav-link-nav.btn {
    font-size: 1em;
  }

  .hamburger-btn {
    display: flex;
  }

  .mobile-menu {
    display: none;
  }

  .mobile-menu.active {
    display: block;
  }

  .fa-power-off {
    display: none;
  }

  #player-info {
    display: flex;
    justify-content: flex-start;
  }

  #avatar_img {
    width: 60px;
    height: 60px;
    padding: 0 15px;
    margin-left: 10px;
    height: auto;
  }

  button.button-link {
    width: 40px;
    height: 40px;
    font-size: 1em;
  }
}

@media (max-width: 490px) {
  #tiles {
    width: 270px;
    height: 270px;
  }

  #keyboard {
    width: 270px;
    padding: 0.5rem;
    margin: 0.5rem;
  }

  .key,
  .ctrlKey {
    font-size: 1.2rem;
    aspect-ratio: 3 / 2;
  }

  .keyboard-row {
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 0.3rem;
  }

  button.button-link {
    width: 35px;
    height: 35px;
    font-size: 1em;
  }

  .fa-power-off {
    display: none;
    color: #f1e5d6;
    font-size: 1em;
  }

  .nav-link-nav.btn {
    font-size: 0.8em;
  }

  #toggleKeyboardButton {
    display: inline-block;
    pointer-events: all;
    font-size: 0.8em;
    margin-right: 10px;
  }
  .beside_tiles {
    margin-bottom: 15px;
  }
}