/* 
 * pokemon-cards.css
 * Styles pour les cartes Pokémon et l'affichage des types
 */

/* Variables pour les couleurs des types */
:root {
  --type-normal: #A8A878;
  --type-fire: #F08030;
  --type-water: #6890F0;
  --type-electric: #F8D030;
  --type-grass: #78C850;
  --type-ice: #98D8D8;
  --type-fighting: #C03028;
  --type-poison: #A040A0;
  --type-ground: #E0C068;
  --type-flying: #A890F0;
  --type-psychic: #F85888;
  --type-bug: #A8B820;
  --type-rock: #B8A038;
  --type-ghost: #705898;
  --type-dragon: #7038F8;
  --type-dark: #705848;
  --type-steel: #B8B8D0;
  --type-fairy: #EE99AC;
}

/* Styles pour les cartes Pokémon */
.pokemon-card {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.pokemon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Division gauche pour les informations */
.card-info {
  flex: 3;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
}

/* Division droite pour l'image */
.card-image-container {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.15);
}

/* En-tête de la carte */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.pokemon-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: white;
}

.pokemon-number {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Styles pour les badges de type */
.pokemon-types {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

/* Niveau */
.pokemon-level {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.pokemon-level-label {
  margin-right: 5px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
}

.pokemon-level-value {
  font-size: 0.8rem;
  color: white;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Image du Pokémon */
.pokemon-image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pokemon-image img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Dégradé pour les doubles types */
.dual-type {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 50%, var(--secondary-color) 50%, var(--secondary-color) 100%);
}

/* Couleurs de fond pour les types */
.bg-normal { background-color: var(--type-normal); }
.bg-fire { background-color: var(--type-fire); }
.bg-water { background-color: var(--type-water); }
.bg-electric { background-color: var(--type-electric); }
.bg-grass { background-color: var(--type-grass); }
.bg-ice { background-color: var(--type-ice); }
.bg-fighting { background-color: var(--type-fighting); }
.bg-poison { background-color: var(--type-poison); }
.bg-ground { background-color: var(--type-ground); }
.bg-flying { background-color: var(--type-flying); }
.bg-psychic { background-color: var(--type-psychic); }
.bg-bug { background-color: var(--type-bug); }
.bg-rock { background-color: var(--type-rock); }
.bg-ghost { background-color: var(--type-ghost); }
.bg-dragon { background-color: var(--type-dragon); }
.bg-dark { background-color: var(--type-dark); }
.bg-steel { background-color: var(--type-steel); }
.bg-fairy { background-color: var(--type-fairy); }

/* Couleurs pour les badges de type */
.type-normal { background-color: var(--type-normal); }
.type-fire { background-color: var(--type-fire); }
.type-water { background-color: var(--type-water); }
.type-electric { background-color: var(--type-electric); }
.type-grass { background-color: var(--type-grass); }
.type-ice { background-color: var(--type-ice); }
.type-fighting { background-color: var(--type-fighting); }
.type-poison { background-color: var(--type-poison); }
.type-ground { background-color: var(--type-ground); }
.type-flying { background-color: var(--type-flying); }
.type-psychic { background-color: var(--type-psychic); }
.type-bug { background-color: var(--type-bug); }
.type-rock { background-color: var(--type-rock); }
.type-ghost { background-color: var(--type-ghost); }
.type-dragon { background-color: var(--type-dragon); }
.type-dark { background-color: var(--type-dark); }
.type-steel { background-color: var(--type-steel); }
.type-fairy { background-color: var(--type-fairy); }

/* Style des indicateurs de statut */
.pokemon-status {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.status-fainted {
  background-color: #e74c3c; /* Rouge pour KO */
}

.status-battled {
  background-color: #f39c12; /* Orange pour "a combattu" */
}

.status-unused {
  background-color: #2ecc71; /* Vert pour "non utilisé" */
}

/* Structure de la bataille face à face */
.fight-battle-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  gap: 20px;
}

.fight-trainer-column {
  flex: 1;
  max-width: 45%;
}

.fight-versus-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.versus-icon {
  font-size: 24px;
  color: #f44336;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.3);
}

.fight-trainer-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fight-pokemon-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Styles pour le responsive */
@media (max-width: 768px) {
  .fight-battle-container {
    flex-direction: column;
    align-items: center;
  }
  
  .fight-trainer-column {
    max-width: 100%;
    width: 100%;
  }
  
  .fight-versus-container {
    margin: 10px 0;
  }
}