/* Conteneur des personnages */
#characters-container {
  padding-bottom: 0 !important;
  align-items: flex-end !important;
}

/* Styles personnages - Géré dynamiquement par JS avec Tailwind */
.character {
  height: auto;
  max-height: 100%;
  max-width: 50%;
  object-fit: contain;
  object-position: bottom;
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out,
    filter 0.3s ease-in-out;
  filter: brightness(0.6) contrast(0.9);
  flex-shrink: 0;
  position: relative;
}

/* Ajustement pour 3+ personnages - permettre le chevauchement */
#characters-container.three-characters .character {
  max-width: 45%;
  margin-left: -5%;
  margin-right: -5%;
}

#characters-container.four-characters .character {
  max-width: 40%;
  margin-left: -10%;
  margin-right: -10%;
}

/* Ajustement pour 5+ personnages */
#characters-container.five-characters .character {
  max-width: 30%;
  margin-left: -15%;
  margin-right: -15%;
}

.character.speaking {
  filter: brightness(1) contrast(1);
  transform: scale(1.02);
}

/* Classes utilitaires */
.hidden {
  display: none !important;
}

.active {
  display: block !important;
}

#dialogue-box.active {
  display: block !important;
}

#choices-container.active {
  display: flex !important;
}

/* Responsive design pour orientation verticale (portrait) */
@media (max-aspect-ratio: 1/1) {
  /* En mode portrait, les personnages sont 2x plus larges */
  .character {
    max-width: 88%;
    margin-left: -20%;
    margin-right: -20%;
  }

  #characters-container.three-characters .character {
    max-width: 78%;
    margin-left: -25%;
    margin-right: -25%;
  }

  #characters-container.four-characters .character {
    max-width: 55%;
    margin-left: -22%;
    margin-right: -22%;
  }
}