/***************************************************
  PAGE GLOBALE
****************************************************/
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #222; /* Fond sombre uniforme */
  color: #fff;
  font-family: Arial, sans-serif;
  overflow: hidden; /* Pas de scroll global */
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #222; /* Hérite de la couleur de fond sombre */
}

/***************************************************
  HEADER
****************************************************/
.main-header {
  position: relative; /* Permet le positionnement absolu des enfants */
  flex: 0 0 8vh; /* Utilisation de vh pour la hauteur responsive */
  display: flex;
  align-items: center;
  background: #333; /* Couleur de fond cohérente */
  padding: 0 2vw; /* Utilisation de vw pour le padding */
  box-sizing: border-box;
}

/* Titre de la page d'accueil dans le header */
.page-title {
  flex: 1;
  font-size: 2.5vw;
  text-align: center;
  color: #fff;
  margin: 0;
  font-family: Arial, sans-serif; /* Assure la même police que les boutons */
}

/* Bouton "Ready" (à gauche) */
#readyBtn {
  background: #777;
  color: #fff;
  font-size: 1.5vw; /* Utilisation de vw pour la taille de la police */
  border: none;
  border-radius: 0.6vw; /* Utilisation de vw pour le border-radius */
  padding: 0.7vh 2vw; /* Utilisation de vh et vw pour le padding */
  cursor: pointer;
  transition: background 0.3s;
  background: #4caf50;
}

/* Icônes de rôle */
.roles-container {
  display: flex;
  gap: 1.5vw; /* Utilisation de vw pour l'espacement */
  margin: 0 2vw; /* Utilisation de vw pour la marge */
}

.role-icon {
  width: 2.5vw;   /* Taille réduite */
  height: 2.5vw;  /* Taille réduite */
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.role-icon:hover {
  transform: scale(1.15);
}
.role-icon.active {
  /* Ajout d'un effet visuel discret */
  box-shadow: 0 0 0.3vw 0.1vw rgba(255, 255, 255, 0.3);
}

/* Bouton "Ban/Lock" centré absolument */
.center-btn-container {
  position: absolute; /* Position absolue par rapport à .main-header */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Centrage exact */
  z-index: 10; /* Assure que le bouton reste au-dessus */
}

/* Bouton confirm => label par défaut = "Ban" */
#confirmBtn {
  background: #777;
  color: #fff;
  font-size: 1.5vw; /* Utilisation de vw pour la taille de la police */
  border: none;
  border-radius: 0.6vw; /* Utilisation de vw pour le border-radius */
  padding: 0.7vh 2vw; /* Utilisation de vh et vw pour le padding */
  cursor: pointer;
  transition: background 0.3s;
}
#confirmBtn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
#confirmBtn:hover:enabled {
  background: #666;
}

/* Barre de recherche à droite */
.search-container {
  margin-left: auto;
}

.search-container input {
  width: 20vw; /* Utilisation de vw pour la largeur */
  height: 3vh; /* Utilisation de vh pour la hauteur */
  background: #444;
  color: #fff;
  border: 1px solid #555;
  text-align: left;
  padding-left: 1vw; /* Utilisation de vw pour le padding */
  border-radius: 0.6vw; /* Utilisation de vw pour le border-radius */
  font-size: 1.2vw; /* Utilisation de vw pour la taille de la police */
  transition: border 0.3s;
}
.search-container input:focus {
  border-color: #00aaff;
  outline: none;
}

/***************************************************
  FILTER INFO
****************************************************/
.filter-info {
  text-align: center;
  margin: 1vh 0;
  font-size: 1.2vw; /* Utilisation de vw pour la taille de la police */
  color: #ffeb3b;
}

/***************************************************
  MAIN => Liste de champions & Home Main
****************************************************/
/* Liste de champions */
.champion-list-container {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #2a2a2a;
  border-bottom: 0.3vh solid #444; /* Utilisation de vh pour la bordure */
  overflow: hidden; /* Assure que le contenu reste dans le conteneur */
}

.champion-list {
  flex: 1;
  display: grid; /* Utilisation de CSS Grid pour une meilleure responsivité */
  grid-template-columns: repeat(auto-fill, minmax(6vw, 1fr)); /* Taille minimale réduite */
  gap: 1vw; /* Espacement uniforme entre les éléments */
  padding: 2vh 2vw; /* Utilisation de vh et vw pour le padding */
  box-sizing: border-box;
  overflow-y: auto; /* Autoriser le scroll vertical */
  overflow-x: hidden;

  /* Centrage des icônes dans la grille */
  justify-content: center; /* Centre la grille horizontalement */
  align-content: start; /* Aligne les éléments en haut */

  justify-items: center; /* Centre les éléments horizontalement dans chaque cellule */
  align-items: center; /* Centre les éléments verticalement dans chaque cellule */
}

.champion-list::-webkit-scrollbar {
   width: 0.5vw; /* Scrollbar responsive */
}

.champion-list::-webkit-scrollbar-track {
  background: #333;
}

.champion-list::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 0.5vw;
}

/* Home Main (Formulaire de création de draft et Lobby) */
.home-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a; /* Même couleur de fond que le main existant */
}

/* Formulaire de draft et Lobby */
.draft-form {
  background: #333;
  padding: 3vh 3vw;
  border-radius: 1vw;
  box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5);
  width: 40vw;
  max-width: 500px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

/* Groupes de formulaire et d'informations */
.form-group, .info-group, .status-group, .drafter-status-group {
  display: flex;
  flex-direction: column;
}

/* Labels - Utilisation de la même police que les boutons */
.team-label {
  margin-bottom: 0.5vh;
  font-size: 1.2vw; /* Aligné avec le bouton */
  font-family: Arial, sans-serif; /* Assure la même police que les boutons */
  font-weight: bold;
}

/* Label spécifique pour l'équipe bleue */
.blue-label {
  color: #00aaff; /* Bleu similaire au bouton "Ready" */
}

/* Label spécifique pour l'équipe rouge */
.red-label {
  color: #ff3c3c; /* Rouge similaire au bouton "Ban" */
}

/* Champs de saisie */
.draft-form input {
  padding: 0.5vh 1vw;
  font-size: 1vw;
  border: 1px solid #555; /* Bordure sombre */
  border-radius: 0.5vw;
  background: #444;
  color: #fff;
  transition: border 0.3s;
  font-family: Arial, sans-serif; /* Assure la même police que les boutons */
}

/* Champs de saisie au focus */
.draft-form input:focus {
  border-color: #00aaff;
  outline: none;
}

/* Champs de saisie pour l'équipe rouge au focus */
#team2:focus {
  border-color: #ff3c3c;
}

/* Bouton de création de draft */
#createDraftBtn {
  background: #5cdb5c;
  color: #222;
  font-size: 1.2vw;
  border: none;
  border-radius: 0.5vw;
  padding: 0.7vh 2vw;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
  font-family: Arial, sans-serif; /* Assure la même police que les autres éléments */
}

#createDraftBtn:hover {
  background: #4caf50;
}

/***************************************************
  CHAMPION CARD — premium / sobre
****************************************************/
.champion-card {
  position: relative;
  width: 6vw;
  height: 6vw;
  border-radius: 0.55vw;
  background: #1f1f1f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
}

.champion-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0.35vw 0.9vw rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.champion-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.45vw;
  transition: filter 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.champion-card:hover img {
  filter: contrast(1.05) brightness(1.05);
}

.champion-card.selected {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.45),
    0 0.5vw 1.2vw rgba(0,0,0,0.45);
}

.champion-card.disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.champion-card.disabled img {
  filter: grayscale(100%) brightness(0.7);
}

.champion-card.disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

/***************************************************
  FOOTER => picks/bans & main-footer
****************************************************/
/* Footer pour les picks/bans */
.draft-container {
  flex: 1;
  background: #2c2c2c;
  padding: 1.5vh 1.5vw; /* Utilisation de vh et vw pour le padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.draft-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2vh; /* Utilisation de vh pour la marge */
}

.ban-slots, .pick-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw; /* Utilisation de vw pour l'espacement */
}

/* Bans => Responsive tailles */
.ban-slot {
  width: 5vw; /* Taille réduite */
  height: 5vw; /* Taille réduite */
  border: 0.2vw solid #666; /* Utilisation de vw pour la bordure */
  border-radius: 0.6vw; /* Utilisation de vw pour le border-radius */
  background-color: #444;
  overflow: hidden;
  position: relative;
}
.ban-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Picks => Responsive tailles */
.pick-slot {
  width: 8vw; /* Taille réduite */
  max-width: 8vw; /* Maintien de la largeur maximale à 8vw */
  height: 30vh; /* Hauteur réduite */
  border: 0.2vw solid #666; /* Utilisation de vw pour la bordure */
  border-radius: 0.6vw; /* Utilisation de vw pour le border-radius */
  background-color: #444;
  overflow: hidden;
  position: relative;
}
.pick-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footer spécifique à la page d'accueil et Lobby */
.main-footer {
  flex: 0 0 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333; /* Couleur de fond cohérente */
  color: #fff;
  font-size: 1vw;
  font-family: Arial, sans-serif; /* Assure la même police que les autres éléments */
}

/***************************************************
  SLOT ACTIF => Couleur du side
****************************************************/
.blue-slot.current-slot {
  border-color: rgba(0, 170, 255, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 170, 255, 0.55),
    0 0 1.1vw rgba(0, 170, 255, 0.28);
}

.red-slot.current-slot {
  border-color: rgba(255, 60, 60, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 60, 60, 0.55),
    0 0 1.1vw rgba(255, 60, 60, 0.28);
}

/***************************************************
  TIMER LINE
****************************************************/
.timer-line {
  position: relative;
  height: 1vh; /* ou la hauteur désirée */
  transform-origin: center; /* important pour la consommation des 2 extrémités */
  transform: scaleX(1);     /* pleine largeur par défaut */
  transition: transform 0.3s ease-out;
  overflow: visible;        /* pour que rien ne la recouvre */
  z-index: 10;              /* la mettre devant si besoin */
}

/* Conteneur qui va afficher les deux moitiés (bleu, rouge) pour la readiness */
.ready-line-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* On n'interagit pas avec ces éléments au clic */
}

/* Barre bleue, à gauche, largeur 0% par défaut */
.ready-line-blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #00aaff;
  transition: width 0.3s ease-out;
}

/* Barre rouge, à droite, largeur 0% par défaut */
.ready-line-red {
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  background: #ff3c3c;
  transition: width 0.3s ease-out;
}

/***************************************************
  VALIDATION — subtile, moins arcade
****************************************************/
@keyframes validateFlashBlue {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 170, 255, 0.7),
      0 0 0.6vw rgba(0, 170, 255, 0.28);
  }
  45% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 170, 255, 0.95),
      0 0 1.4vw rgba(0, 170, 255, 0.42);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 170, 255, 0.55),
      0 0 1.1vw rgba(0, 170, 255, 0.28);
  }
}

@keyframes validateFlashRed {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 60, 60, 0.7),
      0 0 0.6vw rgba(255, 60, 60, 0.28);
  }
  45% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 60, 60, 0.95),
      0 0 1.4vw rgba(255, 60, 60, 0.42);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 60, 60, 0.55),
      0 0 1.1vw rgba(255, 60, 60, 0.28);
  }
}

.blue-slot.slot-validated-anim {
  animation: validateFlashBlue 420ms ease-out;
}

.red-slot.slot-validated-anim {
  animation: validateFlashRed 420ms ease-out;
}

/***************************************************
  MEDIA QUERIES POUR RESPONSIVITÉ SUPPLÉMENTAIRE
****************************************************/
/* Tablettes et Petits Écrans */
@media (max-width: 1024px) {
  /* Réduction des dimensions pour les pick-slots et ban-slots */
  .pick-slot {
    width: 6vw; /* Réduction supplémentaire */
    max-width: 6vw;
    height: 28vh; /* Légère diminution de la hauteur */
  }

  .ban-slot {
    width: 5vw; /* Maintien de la taille réduite */
    height: 5vw; /* Maintien de la taille réduite */
  }

  /* Ajustement des icônes de rôle */
  .role-icon {
    width: 2.5vw;
    height: 2.5vw;
  }

  /* Ajustement des boutons */
  #readyBtn, #confirmBtn, #createDraftBtn {
    font-size: 1vw;
    padding: 0.4vh 1.5vw;
    border-radius: 0.4vw;
  }

  /* Ajustement de la barre de recherche */
  .search-container input {
    width: 18vw;
    font-size: 1vw;
    padding-left: 0.8vw;
    border-radius: 0.5vw;
  }

  /* Ajustement de la grille des champions */
  .champion-list {
    grid-template-columns: repeat(auto-fill, minmax(6vw, 1fr)); /* Ajusté pour correspondre à la réduction des cartes */
    gap: 1vw; /* Ajustement de l'espacement */
  }

  /* Draft Form for CSS2 */
  .draft-form {
    width: 60vw;
  }

  .draft-form label, .team-label {
    font-size: 1.1vw;
  }

  .draft-form input {
    font-size: 0.9vw;
  }

  #createDraftBtn {
    font-size: 1vw;
    padding: 0.6vh 1.5vw;
  }

  .main-footer {
    font-size: 0.9vw;
  }
}

/* Mobiles */
@media (max-width: 768px) {
  /* Réduction encore plus significative pour les pick-slots et ban-slots */
  .pick-slot {
    width: 5.5vw; /* Réduction supplémentaire */
    max-width: 5.5vw;
    height: 25vh; /* Réduction supplémentaire */
  }

  .ban-slot {
    width: 4vw; /* Réduction supplémentaire */
    height: 4vw; /* Réduction supplémentaire */
  }

  /* Ajustement des icônes de rôle */
  .role-icon {
    width: 2vw;
    height: 2vw;
  }

  /* Ajustement des boutons */
  #readyBtn, #confirmBtn, #createDraftBtn {
    font-size: 0.9vw;
    padding: 0.3vh 1vw;
    border-radius: 0.3vw;
  }

  /* Ajustement de la barre de recherche */
  .search-container input {
    width: 16vw;
    font-size: 0.9vw;
    padding-left: 0.7vw;
    border-radius: 0.4vw;
  }

  /* Ajustement de la grille des champions */
  .champion-list {
    grid-template-columns: repeat(auto-fill, minmax(6vw, 1fr)); /* Maintien des nouvelles tailles */
    gap: 1vw; /* Maintien de l'espacement */
  }

  /* Draft Form for CSS2 */
  .draft-form {
    width: 80vw;
  }

  .draft-form label, .team-label {
    font-size: 1vw;
  }

  .draft-form input {
    font-size: 0.8vw;
  }

  #createDraftBtn {
    font-size: 0.9vw;
    padding: 0.5vh 1vw;
  }

  .main-footer {
    font-size: 0.8vw;
  }
}

/* Très Petits Mobiles */
@media (max-width: 480px) {
  /* Réduction maximale des dimensions pour les pick-slots et ban-slots */
  .pick-slot {
    width: 4.5vw; /* Réduction maximale */
    max-width: 4.5vw;
    height: 22vh; /* Réduction maximale */
  }

  .ban-slot {
    width: 3.5vw; /* Réduction maximale */
    height: 3.5vw; /* Réduction maximale */
  }

  /* Ajustement des icônes de rôle */
  .role-icon {
    width: 1.8vw;
    height: 1.8vw;
  }

  /* Ajustement des boutons */
  #readyBtn, #confirmBtn, #createDraftBtn {
    font-size: 0.8vw;
    padding: 0.2vh 0.8vw;
    border-radius: 0.2vw;
  }

  /* Ajustement de la barre de recherche */
  .search-container input {
    width: 14vw;
    font-size: 0.8vw;
    padding-left: 0.6vw;
    border-radius: 0.3vw;
  }

  /* Ajustement de la grille des champions */
  .champion-list {
    grid-template-columns: repeat(auto-fill, minmax(6vw, 1fr)); /* Maintien des nouvelles tailles */
    gap: 1vw; /* Maintien de l'espacement */
  }

  /* Draft Form for CSS2 */
  .draft-form {
    width: 90vw;
    padding: 2vh 2vw;
  }

  .draft-form label, .team-label {
    font-size: 0.9vw;
  }

  .draft-form input {
    font-size: 0.7vw;
  }

  #createDraftBtn {
    font-size: 0.8vw;
    padding: 0.4vh 0.8vw;
  }

  .main-footer {
    font-size: 0.7vw;
  }
}

/***************************************************
  STYLES SUPPLEMENTAIRES POUR LA LOBBY DE DRAFT
***************************************************/
/* Styles spécifiques pour les groupes d'informations */
.info-group p, .status-group p, .drafter-status-group p {
  margin: 0;
  font-size: 1.1vw;
  color: #fff;
}

.drafter-status-group p {
  font-size: 1vw;
}

/* Styles pour le statut */
#status {
  font-size: 1.2vw;
  color: #ffeb3b; /* Couleur jaune pour attirer l'attention */
}

/* Styles pour les statuts des drafters */
#blue-drafter-status {
  color: #00aaff; /* Bleu */
}

#red-drafter-status {
  color: #ff3c3c; /* Rouge */
}