/* ================= SOMMAIRE =================
1. GENERAL
  1.1 Police
  1.2 Réinitialisation
  1.3 Mise en page générale
2. GAME CONTAINER
  2.1 Structure principale
  2.2 Fond de combat
3. POKEMON
  3.1 Pokémon Adversaire
  3.2 Pokémon Joueur
4. BARRES DE VIE
  4.1 Barre de vie Adversaire
  4.2 Barre de vie Joueur
5. MENU / UI
  5.1 Structure générale du menu
  5.2 Boutons du menu principal
  5.3 Menu des attaques
============================================ */

/* ===== 1. GENERAL ===== */

/* 1.1 Police */
@font-face {
  font-family: 'PokemonFireRed';
  src: url('../assets/fonts/pokemon_fire_red.woff') format('truetype');
}

/* --- Animation de "faint" (le Pokémon tombe) --- */
@keyframes faintPokemon {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-40px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(200px) scale(0.3);
    opacity: 0;
  }
}
.faint {
  animation: faintPokemon 1.2s forwards ease-in;
}

/* --- Animation de disparition de la barre de vie vers la gauche --- */
@keyframes vanishLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-400px);
    opacity: 0;
  }
}
.vanish-left {
  animation: vanishLeft 1s forwards;
}

/* --- Animation de disparition de la barre de vie vers la droite --- */
@keyframes vanishRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(400px);
    opacity: 0;
  }
}
.vanish-right {
  animation: vanishRight 1s forwards;
}

/* 1.2 Réinitialisation */
* {
  box-sizing: border-box;
}

/* 1.3 Mise en page générale */
body {
  font-family: 'PokemonFireRed', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
}

/* ===== 2. GAME CONTAINER ===== */

/* 2.1 Structure principale */
.game-container {
  width: 100%;
  max-width: 900px;
  overflow: hidden; /* pour éviter que les barres de vie sortent visuellement */
}

/* 2.2 Fond de combat */
.battle-background {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.terrain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 3. POKEMON ===== */

/* 3.1 Pokémon Adversaire */
.opponent-pokemon {
  position: absolute;
  width: 20%;
  top: 16%;
  right: 20%;
  max-width: 150px;
}

.opponent-pokemon img {
  width: 170%;
  height: auto;
}

/* 3.2 Pokémon Joueur */
.player-pokemon {
  position: absolute;
  width: 20%;
  bottom: -5%;
  left: 5%;
  max-width: 150px;
}

.player-pokemon img {
  width: 170%;
  height: auto;
}

/* ===== 4. BARRES DE VIE ===== */

/* 4.1 Barre de vie Adversaire */
.opponent-hp-container {
  position: absolute;
  width: 30%;
  top: 10%;
  left: 7%;
  color: black;
  font-weight: bold;
}

.opponent-hp-container .img-hp-container {
  width: 140%;
  height: auto;
}

.pokemon-name-opponent {
  position: absolute;
  top: 19%;
  left: 15%;
  font-size: clamp(14px, 2.7vw, 30px);
}

.pokemon-lv-opponent {
  position: absolute;
  top: 19%;
  right: -20%;
  font-size: clamp(14px, 2.7vw, 30px);
}

#opponent-hp-container {
  position: absolute;
  top: 49%;
  left: 54.5%;
  width: 64.1%;
  height: 1vw;
  min-height: 12.5px;
  background-color: #444;
  border-radius: 5px;
  overflow: hidden;
  z-index: 10;
}

#opponent-hp-bar {
  position: absolute;
  height: 100%;
  background-color: #4caf50;
  width: 100%;
  transition: width 0.5s ease-out;
  border-radius: 5px;
}

/* 4.2 Barre de vie Joueur */
.player-hp-container {
  position: absolute;
  width: 30%;
  bottom: -2%;
  left: 53%;
  color: black;
  font-weight: bold;
}

.player-hp-container .img-hp-container {
  width: 140%;
  height: auto;
}

.pokemon-name-player {
  position: absolute;
  top: 23.4%;
  left: 26%;
  font-size: clamp(14px, 2.7vw, 30px);
}

.pokemon-lv-player {
  position: absolute;
  top: 23.4%;
  left: 119.4%;
  font-size: clamp(14px, 2.7vw, 30px);
}

#player-hp-value {
  position: absolute;
  bottom: 22%;
  left: 90%;
  font-size: clamp(14px, 2.7vw, 30px);
}

#player-hp-container {
  position: absolute;
  bottom: 43.7%;
  left: 63%;
  width: 63.4%;
  height: 1vw;
  min-height: 12.5px;
  background-color: #444;
  border-radius: 5px;
  overflow: hidden;
  z-index: 10;
}

#player-hp-bar {
  position: absolute;
  height: 100%;
  background-color: #4caf50;
  width: 100%;
  transition: width 0.5s ease-out;
  border-radius: 5px;
}

/* ===== 5. MENU / UI ===== */

/* 5.1 Structure générale du menu */
.battle-ui {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.menu-box {
  width: 100%;
}

#menu-side {
  position: absolute;
  right: 0;
  /* bottom: 3%;*/
  width: 50vw;
  max-width: 49%;
}

#menu-side img {
  width: 100%;
  height: auto;
  display: block;
}

/* 5.2 Boutons du menu principal */
.menu-options {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0%, -50%);
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#btn-attack, #btn-bag, #btn-pokemon, #btn-run {
  position: absolute;
  width: 35%;
  height: 25%;
  cursor: pointer;
}

#btn-attack {
  top: 20%;
  left: 10%;
}
#btn-bag {
  top: 20%;
  right: 10%;
}
#btn-pokemon {
  bottom: 20%;
  left: 10%;
  width: 40%;
}
#btn-run {
  bottom: 20%;
  right: 10%;
}

/* 5.3 Menu des attaques */
.attack-menu {
  position: absolute;
  top: 1%;
  width: 100%;
  align-items: center;
}

.attack-menu.hidden {
  display: none;
}

.attack-box {
  width: 100%;
  image-rendering: pixelated;
}

.attack-options {
  font-size: clamp(20px, 5vw, 40px);
  font-weight: bold;
  position: absolute;
  top: 20%;
  left: 5%;
  width: 60%;
  height: 60%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.attack-options div {
  width: 90%;
  display: flex;
  align-items: center;
}

/* Bouton Retour dans le menu d'attaques */
#btn-retour {
  position: absolute;
  bottom: 11.5%;
  right: 2.7%;
  width: 40px;   
  height: 40px;
  cursor: pointer;
  background: url("../assets/images/fleche-retour.png") no-repeat center center / contain;
}

/* --- ZONE DE TEXTE AU-DESSUS DU MENU-BASE --- */
.text-container {
  position: absolute;
  bottom: 0; 
  left: 0;
  width: 100%;
  height: 100%; 
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 999;
}

.text-content {
  position: absolute;
  top: 5%;
  bottom: 45%;
  left: 10%;
  right: 15%;
  font-family: 'PokemonFireRed', sans-serif; 
  font-size: clamp(20px, 3.5vw, 34px);
  color: #f0f0f0;
  white-space: pre-wrap;
}

.hidden {
  display: none;
}

/* ==================== NOUVELLES ANIMATIONS POUR LES ATTAQUES ==================== */

/* --- Dash du lanceur (pour attaques physiques) --- */
@keyframes dash-anim {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(15px); }
  50%  { transform: translateX(0); }
  60%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
.dash-anim {
  animation: dash-anim 0.5s ease-in-out;
}

/* --- Recul/tremblement du receveur (pour attaques physiques) --- */
@keyframes recoil-anim {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-10px); }
  40%  { transform: translateX(10px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
.recoil-anim {
  animation: recoil-anim 0.5s ease-out;
}

/* --- Grow (quand le lanceur se buff ou se soigne) --- */
@keyframes grow-anim {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.grow-anim {
  animation: grow-anim 1s ease-in-out;
}

/* --- Shrink (quand la cible subit un debuff) --- */
@keyframes shrink-anim {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.8); }
  100% { transform: scale(1); }
}
.shrink-anim {
  animation: shrink-anim 1s ease-in-out;
}

/* --- Anim "projectile" pour .png qui se déplace du lanceur au receveur --- */
.projectile {
  position: absolute;
  width: 60px;  /* ajustez selon votre image */
  height: 60px;
  pointer-events: none;
  z-index: 9999;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Pas d'animation par défaut, on la calcule en JS */
}

/* Pour secouer lors de l'impact, vous avez déjà .recoil-anim */

/* --- Overlay noir plein écran --- */
.black-overlay {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 999999; /* Au-dessus de tout */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* Le texte à l'intérieur */
#black-overlay-text {
  font-family: 'PokemonFireRed', sans-serif; 
  color: #f0f0f0;
  font-size: clamp(18px, 3vw, 32px);
  max-width: 800px;
  margin: 0 auto;
}

/* On masque par défaut l'overlay */
.black-overlay.hidden {
  display: none;
}

/* Animation de la flèche clignotante */
@keyframes arrow-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Style pour la flèche clignotante */
.blinking-arrow {
  position: absolute;
  left: -5%; /* Décalé encore plus vers la droite pour être collé au bouton */
  top: calc(50% + 3px); /* Ajusté d'1px vers le bas */
  transform: translateY(-50%) rotate(180deg); /* Rotation à 180 degrés */
  width: 30px;
  height: 30px;
  background-image: url('../assets/images/fleche-droite.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: arrow-blink 1s infinite;
  z-index: 100;
  pointer-events: none; /* Pour ne pas interférer avec les clics */
}