@charset "UTF-8";
.combat-screen {
  position: fixed;
  inset: 0;
  background-color: #212529;
  /* Fond sombre fallback */
  background-size: cover;
  background-position: bottom;
  /*background-position: center;*/
  display: flex;
  flex-direction: column;
  /* Organiser verticalement */
  overflow: hidden;
  color: #fff;
  font-family: var(--police-texte-general, "DejaVuSansCondensed"), sans-serif;
  /* Police configurée pour le texte général */
  --portrait-filter: none;
  --scene-filter: none; }

/* Pseudo-élément pour appliquer le filtre de scène sur le fond */
.combat-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  filter: var(--scene-filter, none);
  z-index: 0;
  pointer-events: none; }

/* --- Zone Feedback/Animations --- */
#combat-feedback-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 200;
  /* Au-dessus du fond et des overlays */
  overflow: hidden; }

.floating-text {
  position: absolute;
  font-size: 1.4rem;
  /* Plus visible */
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 5px;
  text-shadow: 1px 1px 3px black;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 1s ease-out, transform 1s ease-out;
  /* Ajouté */
  transform: translateX(-50%);
  /* Ajouté */
  z-index: 101;
  /* Ajouté pour être au-dessus du panneau de résolution */ }

.floating-text.damage {
  color: #ff4d4d;
  /* Rouge */ }

.floating-text.damage-physique {
  color: #ff4d4d; }

/* Style pour les dégâts en overkill (cible déjà morte) */
.floating-text.damage-overkill {
  opacity: 0.6;
  /* Plus transparent pour indiquer que c'est de l'overkill */
  font-style: italic;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); }

#combat-feedback-area.loot-active {
  pointer-events: auto; }

.floating-text.damage-feu {
  color: #ff8c00; }

.floating-text.damage-froid {
  color: #00d2ff; }

.floating-text.damage-poison {
  color: #39d353; }

.floating-text.damage-ombre {
  color: #bf40bf; }

.floating-text.damage-lumiere {
  color: #ffff66; }

.floating-text.damage-magique {
  color: #8a2be2; }

.floating-text.damage-acide {
  color: #9acd32; }

.floating-text.damage-electrique {
  color: #ffd700; }

.floating-text.damage-pur {
  color: #ffffff; }

.floating-text.dodge {
  color: #cccccc;
  font-style: italic;
  font-size: 1.1rem; }

.floating-text.damage-total {
  color: #ff4d4d;
  font-size: 2rem;
  /* Plus grand pour le total */ }

.floating-text.heal {
  color: #77dd77;
  /* Vert */ }

.floating-text.block {
  color: #87ceeb;
  /* Bleu ciel */ }

.floating-text.miss {
  color: #cccccc;
  font-style: italic;
  font-size: 1.1rem; }

.floating-text.crit {
  color: #ffae42;
  /* Orange/Or pour critique */
  font-size: 1.6rem;
  /* Un peu plus gros */
  font-weight: bold;
  text-transform: uppercase; }

.floating-text.xp {
  color: #ffff66; }

.floating-text.gold {
  color: #ffd700; }

.floating-text.level-up {
  color: #ffd700;
  text-transform: uppercase;
  font-size: 1.6rem; }

/* --- HUD (AP, Piles, Phase) --- */
.combat-hud-deckbuilder {
  position: absolute;
  bottom: -100px;
  left: -20px;
  padding: 8px 15px;
  z-index: 50;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 15px;
  transform: scale(0.9); }

.combat-hud-deckbuilder .badge {
  vertical-align: middle; }

/* ==========================================================================
   PILES DE CARTES (Pioche, Défausse, Épuisées)
   ========================================================================== */
/* Conteneur principal pour les piles Pioche et Défausse en bas à droite */
.deck-piles-visual-container {
  position: absolute;
  top: 80%;
  right: -40px;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  /* Piles alignées verticalement le long du bord droit */ }

.visual-pile {
  margin-bottom: -30px;
  width: 190px;
  /* Largeur après rotation */
  height: 190px;
  /* Hauteur après rotation */
  background-size: contain;
  /* Ou cover, selon vos images */
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  /* Compteur en bas */
  justify-content: flex-end;
  /* Compteur à droite */
  position: relative;
  transform: rotate(90deg);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }

.visual-pile:hover {
  transform: rotate(90deg) scale(1.05) translateY(-5px);
  /* Léger soulèvement au survol */ }

.visual-pile.draw-pile-visual {
  background-image: url("/assets/combats/UI/pioche.webp");
  z-index: 2;
  /* Pioche au-dessus de la défausse pour la superposition */ }

.visual-pile.draw-pile-visual .revealed-draw-overlay {
  position: absolute;
  top: -130px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  pointer-events: none; }

.visual-pile.draw-pile-visual .revealed-draw-overlay .player-card {
  position: relative;
  width: 80px;
  height: 120px;
  transform: none; }

.visual-pile.discard-pile-visual {
  background-image: url("/assets/combats/UI/defausse.webp");
  /* margin-left: -30px; Commenté car le gap négatif gère la superposition */ }

.pile-card-count {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: bold;
  margin: 5px;
  /* Marge interne pour ne pas coller aux bords de l'image */
  pointer-events: none;
  transform: rotate(-90deg); }

.pile-card-count i {
  margin-right: 4px; }

/* Conteneur pour le badge "Épuisées" (l'ancien .defausse-pioche) */
.exhaust-pile-container {
  position: absolute;
  bottom: 20px;
  /* Positionnez où vous voulez ce badge */
  right: 200px;
  /* Ajustez pour ne pas chevaucher les nouvelles piles */
  z-index: 20; }

.exhaust-pile-badge {
  cursor: pointer;
  padding: 5px 8px;
  background-color: rgba(50, 50, 50, 0.8);
  border-radius: 5px;
  color: #ccc;
  font-size: 0.9rem;
  border: 1px solid #444; }

.exhaust-pile-badge:hover {
  background-color: rgba(70, 70, 70, 0.9); }

.exhaust-pile-badge i {
  margin-right: 4px; }

.pile-popup-overlay {
  position: fixed;
  inset: 0;
  /* Raccourci pour top, right, bottom, left = 0 */
  /* Fond semi-transparent */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  /* Au-dessus des éléments de combat, mais sous les modales de plus haut niveau si besoin */
  padding: 20px; }

.pile-popup-content {
  background-color: #282c34;
  /* Un fond sombre pour la popup */
  color: #e0e0e0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
  width: 90%;
  max-width: 800px;
  /* Limiter la largeur max */
  max-height: 85vh;
  /* Limiter la hauteur max */
  display: flex;
  flex-direction: column;
  position: relative;
  /* Pour le bouton de fermeture absolu */ }

.pile-popup-content .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #444; }

.pile-popup-content .popup-header h5 {
  margin: 0;
  color: #ffc107; }

.pile-popup-content .close-popup-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 5px; }

.pile-popup-content .close-popup-btn:hover {
  color: #fff; }

.pile-cards-display {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Centrer les cartes si elles ne remplissent pas la ligne */
  gap: 10px;
  /* Espace entre les cartes */
  padding: 10px 0; }

/* Styles pour la scrollbar (Webkit) dans la popup */
.pile-cards-display::-webkit-scrollbar {
  width: 8px; }

.pile-cards-display::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px; }

.pile-cards-display::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px; }

.pile-cards-display::-webkit-scrollbar-thumb:hover {
  background: #777; }

/* S'assurer que les cartes dans la popup ont une apparence correcte */
.pile-cards-display .player-card.resolution-display-card {
  /* La classe resolution-display-card a déjà des styles pour une taille réduite.
     On peut surcharger si besoin, par ex:
     width: 120px;
     height: 180px;
     font-size: 0.7em;
  */
  cursor: default;
  /* Pas de curseur grab ici */ }

.deckbuilder-cards .player-card {
  position: relative;
  width: 120px;
  height: 180px;
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease; }

.deckbuilder-cards .player-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); }

.deck-manager-content .lateral-power-bars {
  display: none; }

.deckbuilder-cards .player-card .card-cost {
  font-size: 0.9em;
  width: 24px;
  height: 24px;
  top: 26px; }

.deckbuilder-cards .card-description-preview {
  overflow-y: hidden !important; }

.deckbuilder-cards .add-card-btn,
.deckbuilder-cards .remove-card-btn {
  position: absolute;
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 5px;
  bottom: 2px;
  left: 2px;
  top: auto;
  right: auto;
  z-index: 3; }

.deckbuilder-cards .card-preview-btn {
  position: absolute;
  top: 2px;
  left: 2px;
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 5px;
  z-index: 3; }

/* Badges indiquant le nombre de copies */
.deckbuilder-cards .copy-count-badge,
.deckbuilder-cards .card-index-badge {
  position: absolute;
  bottom: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 2px 4px;
  font-size: 0.75em;
  border-radius: 4px;
  z-index: 2; }

.deckbuilder-cards .copy-count-badge {
  right: 4px; }

.deckbuilder-cards .card-index-badge {
  right: 4px; }

.pile-cards-display .player-card.resolution-display-card .card-cost {
  /* Ajuster si la taille de la carte est différente */
  /* font-size: 0.9em; width: 24px; height: 24px; top: 26px; */ }

.ap-orb-visual {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 0 7px 0;
  vertical-align: middle;
  background: url(/assets/combats/UI/ap-orb-vide.webp) no-repeat center center;
  background-size: contain; }

.ap-orb-visual.full {
  background-image: url(/assets/combats/UI/ap-orb-pleine.webp); }

/* Indicateur de Tour Actif */
.phase-indicator {
  position: absolute;
  top: 15px;
  left: 90px;
  padding: 5px 15px 5px 15px;
  z-index: 50;
  font-size: 1.3rem;
  font-family: var(--police-texte-general, "DejaVuSansCondensed"), sans-serif;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1px;
  color: #ffffff;
  white-space: nowrap;
  height: 80px;
  display: flex;
  align-items: center; }
  .phase-indicator::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 10%, white 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0) 100%); }

/* --- DÉCORS INTERACTIFS DE COMBAT --- */
.combat-decors-background {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; }

.combat-decors-midground {
  position: absolute;
  inset: 0;
  z-index: 25;
  /* Entre enemies-area et mid-area */
  pointer-events: none; }

.combat-decors-foreground {
  position: absolute;
  inset: 0;
  z-index: 95;
  /* Avant les UI de combat mais après player-area */
  pointer-events: none; }

.combat-decors-background canvas,
.combat-decors-midground canvas,
.combat-decors-foreground canvas {
  pointer-events: auto !important; }

/* Éléments individuels de décor */
.combat-decor-item {
  position: absolute;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
  filter: var(--portrait-filter, none); }

.combat-decor-item:hover {
  filter: var(--portrait-filter, none) brightness(1.2); }

.combat-decor-item.physical-blocker {
  /* Les bloqueurs physiques masquent les personnages */
  z-index: 1; }

/* --- ZONES PRINCIPALES --- */
.enemies-area {
  flex: 0 0 55%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 0;
  gap: 3%;
  position: relative;
  z-index: 15; /* Entre combat-decors-background (5) et combat-decors-midground (25) */ }

/* Flip par défaut de l'ennemi de gauche (slot 1) - utilise la variable CSS */
.enemies-area:not(.custom-layout) > div:nth-child(1) {
  --flip-x-default: -1; }

.enemies-area > div:nth-child(1) .enemy-portrait .status-icons {
  transform: scaleX(-1); }

.enemy-portrait .status-icons {
  position: absolute; }

.mid-area {
  flex: 0 0 35%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 5%;
  position: relative;
  z-index: 30; /* Entre combat-decors-midground (25) et player-area (35) */
  pointer-events: none; }

.mid-area .companion-slot,
.mid-area .companion-container {
  pointer-events: auto; }

.bottom-ui {
  z-index: 40; }

/* --- ELEMENTS ENNEMIS & COMPAGNONS --- */
.enemy-slot, .companion-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease-out, filter 0.3s ease-out, box-shadow 0.3s ease-out;
  width: 200px; }

.enemies-area:not(.custom-layout) .enemy-slot.side-enemy,
.companions-area:not(.custom-layout) .companion-slot.side-enemy {
  width: 18%;
  max-width: 280px;
  --enemy-scale: 0.8; }

.enemies-area:not(.custom-layout) .enemy-slot.center-enemy,
.companions-area:not(.custom-layout) .companion-slot.center-enemy {
  width: 22%;
  max-width: 300px;
  transform: translateY(70px); }

.enemies-area:not(.custom-layout) .enemy-slot .enemy-container.flying {
  transform: translateY(-100px);
  transition: transform 0.5s ease-out; }

/* Ennemis volants blessés en mode non-custom - hauteur réduite de 30% */
.enemies-area:not(.custom-layout) .enemy-slot .enemy-container.flying.hurt {
  transform: translateY(-70px); /* 100px * 0.7 = 70px */ }

.enemy-slot.placeholder, .companion-slot.placeholder {
  visibility: hidden; }

.enemies-area.custom-layout {
  position: relative;
  display: block;
  flex: 0 0 55%; }

.enemies-area.custom-layout .enemy-slot {
  position: absolute;
  left: var(--slot-left, 50%);
  top: var(--slot-top, 0%);
  transform: translate(-50%, -100%);
  transform-origin: bottom center;
  width: var(--slot-width, 20%);
  max-width: none;
  /* Transition smooth pour le changement de position (quand blessé) */
  transition: top 0.5s ease-out; }

.enemies-area.custom-layout .enemy-slot .enemy-container {
  width: 100%; }

.enemies-area.custom-layout .slot-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  visibility: hidden; }

/* --- Companion slots avec positions personnalisées --- */
/* Position par défaut: companion 0 = left:12.5%, companion 1 = right:7.5%, bottom: 65% */
/* Offset visuel de 2.5% appliqué pour centrer le slot sur sa position de données (10% et 90%) */
.companion-slot {
  position: absolute;
  left: 12.5%;
  bottom: 65%; }

/* Le second companion-slot utilise right au lieu de left par défaut (sauf si custom) */
.mid-area > .companion-slot:nth-child(2):not(.custom-companion-slot) {
  left: auto;
  right: 7.5%; }

/* Positions personnalisées via CSS variables */
.companion-slot.custom-companion-slot {
  left: var(--companion-left, 12.5%);
  right: auto;
  bottom: var(--companion-bottom, 65%);
  transform: translateX(-50%) scale(var(--companion-scale, 1));
  transform-origin: bottom center; }

.companion-slot.slot-inactive {
  opacity: 0.3;
  pointer-events: none; }

.enemy-container, .companion-container {
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  border: 2px solid transparent;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.3s ease-out;
  pointer-events: auto;
  width: 100%;
  position: relative; }

/* Miroir horizontal - utilise une variable CSS pour combiner avec les transforms existants */
.enemy-slot.flip-x,
.companion-slot.flip-x,
.player-area.flip-x {
  --flip-x: -1; }

/* Indicateur de tour actif désactivé */
.enemy-container.active-turn-indicator, .companion-container.active-turn-indicator {
  /* box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); */
  /* transform: scale(1.03); */
  /* border-color: yellow; */ }

.enemy-container.drag-over, .companion-container.drag-over {
  background-color: transparent;
  border-color: transparent !important;
  box-shadow: none; }

.enemy-container.drag-over .enemy-portrait img,
.companion-container.drag-over .companion-portrait img {
  filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.8)); }

.enemy-container.drag-highlight .enemy-portrait img,
.companion-container.drag-highlight .companion-portrait img {
  filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.9)); }

.enemy-container:hover:not(.targeted):not(.active-turn-indicator) .enemy-portrait img,
.companion-container:hover:not(.targeted):not(.active-turn-indicator) .companion-portrait img {
  filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
  transition: filter 0.2s ease-out; }

.enemy-container {
  transition: opacity 0.4s ease-out, filter 0.4s ease-out;
  opacity: 1;
  filter: grayscale(0%); }

.enemy-container.pre-entrance {
  opacity: 0; }

.enemy-container.fading-out {
  opacity: 0;
  filter: grayscale(100%); }

.enemy-container.fading-in {
  opacity: 0; }

.enemy-container.fading-in.visible {
  opacity: 1; }

.enemy-container.visually-defeated {
  cursor: default !important;
  pointer-events: none;
  filter: grayscale(80%) brightness(0.6); }

.enemy-portrait, .companion-portrait {
  position: relative;
  scale: var(--enemy-scale, 1) !important;
  transform-origin: bottom center;
  transition: scale 0.4s ease-out, translate 0.4s ease-out;
  width: 100%;
  border-radius: 5px;
  overflow: visible; }

.enemy-container.fading-out .enemy-portrait {
  scale: calc(var(--enemy-scale, 1) * 0.8) !important;
  translate: 0 30px; }

.enemy-container.fading-in .enemy-portrait {
  scale: calc(var(--enemy-scale, 1) * 0.9) !important;
  translate: 0 -20px; }

.enemy-container.fading-in.visible .enemy-portrait {
  scale: var(--enemy-scale, 1) !important;
  translate: 0 0; }

.enemy-portrait {
  aspect-ratio: var(--enemy-aspect, 1/1);
  height: var(--enemy-base-height, auto);
  perspective: 800px;
  display: flex;
  justify-content: center;
  /* Centrage horizontal parfait */
  align-items: flex-end;
  /* Aligne l'image en bas du conteneur */
  --enemy-dynamic-scale: 1; }

.enemy-portrait img {
  position: relative;
  /* ou static, mais relative est plus sûr si vous avez des z-index dessus */
  transform-origin: bottom center;
  --enemy-offset-x: 0px;
  --enemy-offset-y: 0px;
  --enemy-pose-scale: 1;
  /* Combine le flip par défaut (ennemi gauche = -1) avec le flip personnalisé */
  --flip-x-final: calc(var(--flip-x, 1) * var(--flip-x-default, 1));
  --enemy-base-transform: scaleX(var(--flip-x-final)) scale(var(--enemy-dynamic-scale, 1)) scale(var(--enemy-pose-scale, 1)) translate(var(--enemy-offset-x, 0px), var(--enemy-offset-y, 0px));
  transform: var(--enemy-base-transform);
  will-change: transform;
  backface-visibility: hidden;
  height: auto;
  width: auto;
  object-fit: contain;
  filter: var(--portrait-filter, none); }

.companion-portrait img {
  display: block;
  width: 100%;
  object-fit: cover;
  filter: var(--portrait-filter, none);
  transform: scaleX(var(--flip-x, 1)); }

.companion-portrait {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid #6c757d; }

/* --- Barres de vie, Statuts, Indicateur Cible --- */
.health-bar-container {
  position: absolute;
  bottom: -20px;
  left: -5%;
  width: 90%;
  height: 15px;
  background-color: #dc3545;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.5); }

.health-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #28a745;
  transition: width 0.3s ease-out;
  border-radius: 4px 0 0 4px; }

/* === BARRAS DE VIDA DE ENEMIGOS EN LA PARTE SUPERIOR === */
.enemy-health-bars-top {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 50;
  pointer-events: none;
  overflow: visible; }

.enemy-health-bar-top {
  position: absolute;
  width: 280px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  pointer-events: auto;
  transform: translateX(-50%);
  --fill-color: #ff4444; }

/* Frame decorativo encima de la barra */
.enemy-health-bar-top::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/combats/UI/enemy-health-frame.webp') no-repeat center;
  background-size: 100% 100%;
  z-index: 2;
  pointer-events: none; }

.enemy-health-bar-fill {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 100%;
  width: 100%;
  background: var(--fill-color, #ff4444);
  transition: clip-path 0.3s ease-out;
  z-index: 1;
  /* Máscara para dar forma al fill */
  -webkit-mask-image: url('../assets/combats/UI/enemy-health-mask.webp');
  mask-image: url('../assets/combats/UI/enemy-health-mask.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Clip para mostrar solo el porcentaje de vida */
  clip-path: inset(0 calc(100% - var(--health-percent, 100%)) 0 0); }

/* L'image custom est positionnée en absolu par-dessus le filler en mode normal */
.enemy-health-bar-top .custom-hp-bar-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
}

.enemy-health-bar-top.has-custom-bar .enemy-health-bar-fill {
  z-index: 1;
  /* Retirer le masque par défaut car l'image personnalisée sert de cadre */
  -webkit-mask-image: none;
  mask-image: none;
  /* Support fillZone : positionner et limiter le filler à la zone définie */
  left: var(--fill-offset-start, 0px);
  width: calc(var(--fill-max-width, 100%) * var(--health-value, 100) / 100);
  clip-path: none; }

.enemy-health-bar-top .enemy-health-bar-text {
  z-index: 3; }

.enemy-health-bar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.65rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 1);
  white-space: nowrap;
  z-index: 3; }

/* === THREE-SLICE MODE === */
/* En mode 3-slice : la JAUGE change de taille selon la valeur, le filler remplit toujours 100% */
.enemy-health-bar-top.three-slice-mode {
  /* La largeur du container varie selon le pourcentage de vie */
  width: calc(var(--ts-max-width, 280px) * var(--health-value, 100) / 100) !important;
  min-width: calc(var(--ts-slice1, 20px) + var(--ts-slice-end-width, 20px) + 4px);
  transition: width 0.3s ease-out;
  overflow: hidden; }

.enemy-health-bar-top.three-slice-mode::after {
  display: none; }

.enemy-health-bar-top.three-slice-mode .enemy-health-bar-fill {
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
  background: none;
  display: none; }

/* Cacher les anciens éléments 3-slice par défaut pour éviter le flash vert du chroma key */
/* Le rendu dynamique (.ts-dynamic-wrapper) les remplace */
/* IMPORTANT: On masque SANS dépendre de .three-slice-mode pour éviter le flash avant qu'Alpine applique la classe */
.enemy-health-bar-top .ts-fill-layer,
.enemy-health-bar-top .ts-frame-layer,
.enemy-health-bar-top[data-ts-initialized="true"] .enemy-health-bar-fill,
.enemy-health-bar-top[data-ts-initialized="true"] .custom-hp-bar-image {
  display: none !important;
}

/* L'image de barre custom est cachée par défaut en mode 3-slice avec chroma key */
/* En mode non-3-slice, Alpine contrôle la visibilité via x-show (style inline) */
.enemy-health-bar-top.three-slice-mode .custom-hp-bar-image {
  display: none !important;
}

/* Cacher UNIQUEMENT les barres en mode 3-slice jusqu'à ce que le rendu dynamique soit prêt */
/* Les barres en mode normal (non 3-slice) sont toujours visibles */
.enemy-health-bar-top.three-slice-mode:not([data-ts-initialized="true"]) {
  opacity: 0 !important;
  pointer-events: none;
}

/* Afficher la barre 3-slice une fois initialisée avec une transition douce */
.enemy-health-bar-top.three-slice-mode[data-ts-initialized="true"] {
  opacity: 1 !important;
  transition: opacity 0.1s ease-in;
}

.enemy-health-bar-top.three-slice-mode .ts-fill-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; /* Le filler remplit toujours 100% de la jauge */
  background: var(--fill-color, #ff4444);
  z-index: 0; }

.enemy-health-bar-top.three-slice-mode .ts-frame-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  z-index: 1;
  overflow: hidden; }

/* Zones du cadre 3-slice */
.enemy-health-bar-top.three-slice-mode .ts-zone {
  background-image: var(--ts-image);
  background-repeat: no-repeat; }

.enemy-health-bar-top.three-slice-mode .ts-start {
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--ts-slice1, 20px);
  height: 100%;
  background-position: left center;
  background-size: auto 100%; }

.enemy-health-bar-top.three-slice-mode .ts-middle {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  height: 100%;
  background-position: calc(-1 * var(--ts-slice1, 20px)) center;
  background-size: auto 100%;
  background-repeat: repeat-x; }

.enemy-health-bar-top.three-slice-mode .ts-end {
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--ts-slice-end-width, 20px);
  height: 100%;
  background-position: right center;
  background-size: auto 100%; }

/* Vertical orientation */
.enemy-health-bar-top.three-slice-mode.vertical {
  width: var(--ts-max-width, 280px) !important; /* Largeur fixe en vertical */
  height: calc(var(--ts-max-height, 48px) * var(--health-value, 100) / 100) !important;
  min-height: calc(var(--ts-slice1, 20px) + var(--ts-slice-end-width, 20px) + 4px);
  transition: height 0.3s ease-out; }

.enemy-health-bar-top.three-slice-mode.vertical .ts-fill-layer {
  width: 100%;
  height: 100%; /* Remplit toujours 100% */
  bottom: 0;
  top: auto; }

.enemy-health-bar-top.three-slice-mode.vertical .ts-frame-layer {
  flex-direction: column; }

.enemy-health-bar-top.three-slice-mode.vertical .ts-start {
  width: 100%;
  height: var(--ts-slice1, 20px);
  flex-shrink: 0;
  flex-grow: 0;
  background-position: center top;
  background-size: 100% auto; }

.enemy-health-bar-top.three-slice-mode.vertical .ts-middle {
  width: 100%;
  min-height: 0;
  background-position: center calc(-1 * var(--ts-slice1, 20px));
  background-size: 100% auto;
  background-repeat: repeat-y; }

.enemy-health-bar-top.three-slice-mode.vertical .ts-end {
  width: 100%;
  height: var(--ts-slice-end-width, 20px);
  flex-shrink: 0;
  flex-grow: 0;
  background-position: center bottom;
  background-size: 100% auto; }

/* Stats enemigos (arriba de barra de vida) */
.enemy-stats-top {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
  z-index: 4; }

.enemy-stats-top .stat-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 1); }

.enemy-stats-top .stat-item i {
  font-size: 0.75rem; }

.enemy-stats-top .stat-item.attack i {
  color: #ff6b6b; }

.enemy-stats-top .stat-item.attack.magic i {
  color: #da77f2; }

.enemy-stats-top .stat-item.defense i {
  color: #4dabf7; }

.enemy-stats-top .stat-item.defense.magic i {
  color: #9775fa; }

/* Estados enemigos (abajo de barra de vida) */
.enemy-statuses-bottom {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  margin-top: 4px;
  z-index: 4; }

.enemy-statuses-bottom .status-icon {
  width: 20px;
  height: 20px;
  position: relative; }

.enemy-statuses-bottom .status-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; }

.enemy-statuses-bottom .status-icon .status-stacks {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 0.55rem;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  min-width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none; }

/* === CUSTOM HP BAR CONFIG === */
.health-bar-container.enemy-health-bar {
  position: relative;
  --fill-color: #4CAF50; }

.health-bar-container.enemy-health-bar .health-bar-fill {
  background: var(--fill-color) !important; }

.health-bar-container.enemy-health-bar .custom-hp-bar-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 4px;
  pointer-events: none; }

.health-bar-container.enemy-health-bar.has-custom-bar .enemy-health-track {
  background: transparent;
  border: none;
  box-shadow: none; }

.health-bar-container.enemy-health-bar.has-custom-bar .health-bar-fill {
  z-index: 1;
  /* Support fillZone : positionner et limiter le filler à la zone définie */
  left: var(--fill-offset-start, 0px);
  width: calc(var(--fill-max-width, 100%) * var(--health-value, 100) / 100); }

.health-bar-container.enemy-health-bar.has-custom-bar .health-text {
  z-index: 3;
  text-shadow: 0 0 4px rgba(0, 0, 0, 1), 1px 1px 2px rgba(0, 0, 0, 0.9); }

/* === COMPANION HEALTH BAR === */
.health-bar-container.companion-health-bar {
  position: relative;
  --fill-color: #28a745; }

.health-bar-container.companion-health-bar .companion-hp-bar-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 4px;
  pointer-events: none; }

.health-bar-container.companion-health-bar .health-bar-fill {
  background: var(--fill-color, #28a745) !important; }

.health-bar-container.companion-health-bar.has-custom-bar .health-bar-fill {
  z-index: 1;
  /* Support fillZone : positionner et limiter le filler à la zone définie */
  left: var(--fill-offset-start, 0px);
  width: calc(var(--fill-max-width, 100%) * var(--health-value, 100) / 100); }

.health-bar-container.companion-health-bar.has-custom-bar .health-text {
  z-index: 3;
  text-shadow: 0 0 4px rgba(0, 0, 0, 1), 1px 1px 2px rgba(0, 0, 0, 0.9); }

/* Companion Health Bar - THREE-SLICE MODE */
/* En mode 3-slice : la JAUGE change de taille selon la valeur, le filler remplit toujours 100% */
/* La taille de base (90% du parent) devient la taille max, et varie selon --health-value */
.health-bar-container.companion-health-bar.three-slice-mode {
  width: calc(90% * var(--health-value, 100) / 100);
  min-width: calc(var(--ts-slice1, 10px) + var(--ts-slice-end-width, 10px) + 4px);
  transition: width 0.3s ease-out;
  overflow: hidden; }

.health-bar-container.companion-health-bar.three-slice-mode .health-bar-fill {
  display: none; }

.health-bar-container.companion-health-bar.three-slice-mode .ts-fill-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; /* Le filler remplit toujours 100% de la jauge */
  background: var(--fill-color, #28a745);
  z-index: 0; }

.health-bar-container.companion-health-bar.three-slice-mode .ts-frame-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; }

.health-bar-container.companion-health-bar.three-slice-mode .ts-zone {
  background-image: var(--ts-image);
  background-repeat: no-repeat; }

.health-bar-container.companion-health-bar.three-slice-mode .ts-start {
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--ts-slice1, 10px);
  height: 100%;
  background-position: left center;
  background-size: auto 100%; }

.health-bar-container.companion-health-bar.three-slice-mode .ts-middle {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  height: 100%;
  background-position: calc(-1 * var(--ts-slice1, 10px)) center;
  background-size: auto 100%;
  background-repeat: repeat-x; }

.health-bar-container.companion-health-bar.three-slice-mode .ts-end {
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--ts-slice-end-width, 10px);
  height: 100%;
  background-position: right center;
  background-size: auto 100%; }

.health-bar-container.companion-health-bar.three-slice-mode .companion-hp-bar-image {
  display: none; }

/* Ocultar armor-display, base-attack-display y base-defense-display en enemigos */
.enemy-container .armor-display,
.enemy-container .base-attack-display,
.enemy-container .base-defense-display {
  display: none !important; }

/* Ocultar displays de stats en HUD (reservado para uso futuro) */
.armor-display-hud,
.base-attack-display-hud,
.base-defense-display-hud {
  display: none !important; }

/* Ocultar iconos de status dentro del portrait del enemigo */
.enemy-container .enemy-portrait .status-icons {
  display: none !important; }

/* Cacher les anciennes barres de vie dans les enemy-slot */
.enemy-slot .health-bar-container.enemy-health-bar {
  display: none; }

/* === BARRA DE VIDA DEL JUGADOR (ESPADA) === */
.player-sword-health {
  position: relative;
  /* Proporciones originales: 153x980, ratio = 0.156 */
  /* Con altura de 500px: width = 500 * 0.156 = ~78px */
  width: 78px;
  height: 500px;
  --health-percent: 100; }

.player-sword-health .sword-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none; }

.player-sword-health .sword-health-fill-container {
  position: absolute;
  top: 2%;
  left: 15%;
  width: 70%;
  height: 76%;
  overflow: hidden;
  z-index: 1;
  /* Clip-path para la forma de la hoja de espada (punta triangular arriba más pronunciada) */
  clip-path: polygon(
    50% 0%,       /* Punta superior centro */
    90% 10%,      /* Esquina derecha de la punta (más baja para punta más pronunciada) */
    90% 100%,     /* Esquina inferior derecha */
    10% 100%,    /* Esquina inferior izquierda */
    10% 10%       /* Esquina izquierda de la punta (más baja para punta más pronunciada) */
  ); }

.player-sword-health .sword-health-fill {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 73%;
  height: calc(var(--health-percent) * 1%);
  background: linear-gradient(to top, #cc0000 0%, #ff4444 50%, #ff6666 100%);
  transition: height 0.4s ease-out;
  box-shadow: inset 0 0 10px rgba(255, 100, 100, 0.5); }

/* === PLAYER SWORD HEALTH - THREE-SLICE MODE === */
/* En mode 3-slice : la JAUGE change de taille selon la valeur, le filler remplit toujours 100% */
/* La taille de base (500px) devient la taille max, et varie selon --health-value */
.player-sword-health.three-slice-mode {
  /* La hauteur varie selon le pourcentage de vie (jauge verticale) */
  height: calc(500px * var(--health-value, 100) / 100);
  min-height: calc(var(--ts-slice1, 20px) + var(--ts-slice-end-width, 20px) + 10px);
  transition: height 0.4s ease-out;
  overflow: hidden; }

.player-sword-health.three-slice-mode .sword-health-fill-container {
  display: none; }

.player-sword-health.three-slice-mode .ts-fill-layer {
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 100%; /* Le filler remplit toujours 100% de la jauge */
  background: var(--fill-color, #cc0000);
  z-index: 0;
  /* Même clip-path que sword-health-fill-container */
  clip-path: polygon(
    50% 0%,
    90% 10%,
    90% 100%,
    10% 100%,
    10% 10%
  ); }

.player-sword-health.three-slice-mode .ts-frame-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; }

.player-sword-health.three-slice-mode .ts-zone {
  background-image: var(--ts-image);
  background-repeat: no-repeat; }

.player-sword-health.three-slice-mode .ts-start {
  flex-shrink: 0;
  flex-grow: 0;
  width: 100%;
  height: var(--ts-slice1, 20px);
  background-position: center top;
  background-size: 100% auto; }

.player-sword-health.three-slice-mode .ts-middle {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
  min-height: 0;
  background-position: center calc(-1 * var(--ts-slice1, 20px));
  background-size: 100% auto;
  background-repeat: repeat-y; }

.player-sword-health.three-slice-mode .ts-end {
  flex-shrink: 0;
  flex-grow: 0;
  width: 100%;
  height: var(--ts-slice-end-width, 20px);
  background-position: center bottom;
  background-size: 100% auto; }

/* Masquer le cadre par défaut en mode 3-slice si une image custom est définie */
.player-sword-health.three-slice-mode .sword-frame {
  z-index: 2; }

/* Cacher les éléments originaux quand le chroma key est en attente ou initialisé */
/* Cela évite le flash du chroma key vert au démarrage du combat */
.player-sword-health[data-chroma-pending="true"] .sword-frame,
.player-sword-health[data-chroma-pending="true"] .sword-health-fill-container,
.player-sword-health[data-chroma-pending="true"] .ts-fill-layer,
.player-sword-health[data-chroma-pending="true"] .ts-frame-layer,
.player-sword-health[data-dynamic-initialized="true"] .sword-frame,
.player-sword-health[data-dynamic-initialized="true"] .sword-health-fill-container,
.player-sword-health[data-dynamic-initialized="true"] .ts-fill-layer,
.player-sword-health[data-dynamic-initialized="true"] .ts-frame-layer {
  display: none !important; }

.player-sword-health .sword-health-text {
  position: absolute;
  bottom: 0;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  z-index: 4;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2; }

/* Escudo detrás de la espada */
.player-sword-health .health-shield-button {
  position: absolute;
  bottom: 36px;
  left: 85%;
  transform: translateX(-50%);
  width: 220px;
  height: auto;
  z-index: 0;
  cursor: default;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease, filter 0.2s ease; }


.health-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px black; }

.target-indicator {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: #ffc107;
  text-shadow: 0 0 5px black;
  animation: bounce 1s infinite ease-in-out; }

@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0); }
  50% {
    transform: translateX(-50%) translateY(-5px); } }
@keyframes drag-jiggle {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-1.5deg); }
  50% {
    transform: rotate(1.5deg); }
  75% {
    transform: rotate(-1.5deg); }
  100% {
    transform: rotate(0deg); } }
.status-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin: 0 1px;
  position: relative; }

.status-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 1px #675733) drop-shadow(0 0 1px #675733) drop-shadow(0 0 1px #675733); }

.status-duration, .status-stacks {
  position: absolute;
  bottom: -1px;
  right: -1px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 0.6rem;
  padding: 0 2px;
  border-radius: 2px;
  line-height: 1; }

.status-stacks {
  bottom: auto;
  top: -1px;
  background-color: rgba(200, 0, 0, 0.8); }

/*
.total-block-display {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 50, 100, 0.8);
  color: #e0f2ff;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: bold;
  border: 1px solid #87ceeb;
  white-space: nowrap;
  z-index: 6;
}
.total-block-display.player-block {
  top: auto;
  bottom: 5px;
  left: 180px;
  transform: none;
}
*/
.base-defense-display {
  position: absolute;
  top: -30px;
  /* This might need adjustment later, especially for companions/side-enemies */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(120, 120, 140, 0.75);
  color: #d0d0f0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: normal;
  border: 1px solid #a0a0c0;
  white-space: nowrap;
  z-index: 5; }

.base-defense-display i {
  margin-right: 3px; }

/* --- Zone Joueur --- */
.player-area {
  bottom: 0;
  position: absolute;
  width: 500px;
  left: 55%;
  transform: translateX(-50%);
  margin: auto;
  pointer-events: auto;
  z-index: 35; /* Entre combat-decors-midground (25) et combat-decors-foreground (95) */ }

/* Position personnalisée du joueur via CSS variables */
.player-area.custom-player-slot {
  left: var(--player-left, 55%);
  bottom: var(--player-bottom, 0);
  top: auto;
  /* Largeur en % pour correspondre à l'éditeur (21%) */
  width: 21%;
  transform: translateX(-50%) scale(var(--player-scale, 1));
  transform-origin: bottom center; }

/* Annuler les décalages par défaut du buste en mode personnalisé */
.player-area.custom-player-slot .player-bust {
  position: relative;
  left: auto;
  bottom: auto;
  /* Largeur 100% du conteneur pour remplir le player-area */
  width: 100%;
  height: auto;
  transform: scaleX(var(--flip-x, 1));
  transform-origin: bottom center; }

.player-area.custom-player-slot .player-visual {
  position: relative;
  bottom: auto;
  width: 100%;
  height: auto;
  /* Centrer le contenu avec flexbox */
  display: flex;
  justify-content: center;
  align-items: flex-end; }

/* Indicateur de tour actif du joueur désactivé */
.player-area.active-turn-indicator .player-visual {
  /* box-shadow: 0 -5px 15px 5px rgba(255, 255, 0, 0.6); */ }

.player-area.drag-over .player-visual {
  background-color: transparent;
  border-color: transparent !important;
  box-shadow: none; }

.player-area.drag-over .player-bust,
.player-area.drag-over .player-weapon {
  filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.8)); }

.player-area.drag-highlight .player-visual {
  border-color: rgba(255, 255, 200, 0.8);
  box-shadow: 0 0 12px rgba(255, 255, 200, 0.7); }

.player-area.drag-highlight .player-bust,
.player-area.drag-highlight .player-weapon {
  filter: drop-shadow(0 0 10px rgba(255, 255, 200, 0.8)); }

.resolution-display-card.drag-highlight {
  border-color: rgba(255, 255, 200, 0.8);
  box-shadow: 0 0 15px rgba(255, 255, 200, 0.9); }

.player-visual {
  position: absolute;
  bottom: -75px;
  width: 100%;
  transition: transform 0.2s ease-out, filter 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.2s, background-color 0.2s;
  border: 2px solid transparent;
  border-radius: 5px; }

.player-bust {
  position: absolute;
  bottom: -320px;
  left: -45%;
  /* Note: scaleX est géré par GSAP (getPlayerScaleX) qui prend en compte le flipX du layout */
  transform: scale(0.9) translateX(-60%) translateY(-40%);
  width: 340px;
  filter: var(--portrait-filter, none);
  visibility: hidden; /* Caché par défaut jusqu'à l'animation GSAP */ }

.player-weapon {
  position: absolute;
  bottom: 80px;
  left: -4%;
  width: 50%;
  height: auto;
  transform: rotate(24deg);
  z-index: -1;
  display: none; }

.player-status {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  z-index: 8; }

/* --- Main du Joueur --- */
.player-hand-container {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, 65%);
  width: 85%;
  height: 250px;
  z-index: 9000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: auto;
  transition: transform 0.3s; }

.player-hand-container .player-card:hover {
  z-index: 9999 !important;
  position: relative; }

.player-hand-container:has(.player-card:hover) {
  z-index: 9999 !important; }

.player-hand-container.hand-lowered {
  transform: translate(-50%, 65%) translateY(200px); }

.player-card, .resolution-display-card {
  position: absolute;
  width: 180px;
  height: 270px;
  color: #eaeaea;
  border-radius: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  transform-origin: bottom center;
  transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s ease-out, border-color 0.25s ease-out;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
  overflow: hidden;
  user-select: none;
  opacity: 1;
  background-size: cover;
  /* background-size: cover; // Removed, image will be the background */
  will-change: transform;
  background-color: transparent;
  /* Ensure no default color interferes */ }

.player-card.player-card-hovered, .player-card-hovered.resolution-display-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }

/* Removed .player-card .bordure and .resolution-display-card .bordure */
.player-card:hover:not(.not-playable):not(.disabled-by-effect),
.resolution-display-card:hover:not(.not-playable):not(.disabled-by-effect) {
  /* border-color: #ffc107; // Border might be part of the card image now */ }

.player-card.playable, .playable.resolution-display-card {
  border-color: #0dcaf0;
  cursor: grab; }

.player-card.playable:hover, .playable.resolution-display-card:hover {
  box-shadow: 0 6px 15px rgba(13, 202, 240, 0.4); }

.player-card.defense-playable, .defense-playable.resolution-display-card {
  border-color: #20c997;
  cursor: grab; }

.player-card.defense-playable:hover, .defense-playable.resolution-display-card:hover {
  box-shadow: 0 6px 15px rgba(32, 201, 151, 0.4);
  transform: translateY(-25px) scale(1);
  border-color: #6f42c1;
  z-index: 100 !important; }

.player-card.interrupt-playable, .interrupt-playable.resolution-display-card {
  border-color: #ff69b4;
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.7); }

.player-card.interrupt-playable:hover, .interrupt-playable.resolution-display-card:hover {
  border-color: #ff1493;
  box-shadow: 0 6px 15px rgba(255, 20, 147, 0.5); }

.player-card.not-playable, .not-playable.resolution-display-card, .player-card.disabled-by-effect, .disabled-by-effect.resolution-display-card {
  cursor: not-allowed;
  pointer-events: auto;
  opacity: 1; }

.player-card.not-playable:hover, .not-playable.resolution-display-card:hover, .player-card.disabled-by-effect:hover, .disabled-by-effect.resolution-display-card:hover {
  transform: none; }

.player-card.not-playable, .not-playable.resolution-display-card {
  filter: grayscale(75%) brightness(0.75);
  border-color: #6c757d; }

.player-card.disabled-by-effect, .disabled-by-effect.resolution-display-card {
  filter: sepia(80%) brightness(0.7);
  border-color: #dc3545; }

.player-card.dragging, .dragging.resolution-display-card {
  opacity: 1;
  border-style: solid;
  animation: drag-jiggle 0.6s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }

.player-card.discard-selectable {
  box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.8);
  border-color: #ffd700; }

.player-card.not-discardable {
  pointer-events: none;
  filter: grayscale(80%) brightness(0.7);
  border-color: #6c757d; }

.player-card.selected-for-play, .selected-for-play.resolution-display-card {
  border-color: #0dcaf0;
  box-shadow: 0 0 15px rgba(13, 202, 240, 0.6);
  transform: translateY(-30px) scale(1.08);
  z-index: 101 !important; }

.player-card.selected-for-play:hover, .selected-for-play.resolution-display-card:hover {
  transform: translateY(-32px) scale(1.09); }

.player-card.original-card-is-dragging {
  opacity: 0;
  /* Ou 0 si vous préférez la cacher complètement */
  /* Ne pas utiliser visibility: hidden; car cela pourrait faire "sauter" les autres cartes en main */ }

.player-card.card-executing {
  opacity: 0;
  /* Hide attack cards during their execution animation */
  pointer-events: none;
  /* Disable interactions while executing */
  /* Keep the card in layout to prevent hand jumping */ }

.dragged-card-clone {
  /* Styles pour s'assurer que le clone a la même apparence que la carte en main (surtout si les styles de base sont complexes) */
  /* La plupart des styles devraient être clonés, mais les transformations dynamiques de la main (fan, scale) ne le seront pas. */
  /* On veut que le clone ait la taille "normale" d'une carte (avant scale de la main). */
  /* Si vos cartes en main sont réduites (scale(0.667)), le cloneNode(true) va cloner cet état.
     Vous pourriez vouloir réinitialiser le scale du clone à 1 ici, ou le faire en JS lors de sa création.
     Pour l'instant, on laisse JS gérer sa taille et sa position.
  */
  /* Exemple pour forcer la taille si besoin, mais le JS le fait déjà: */
  /* width: 240px !important;  */
  /* Correspond à la taille non-scalée de .player-card */
  /* height: 360px !important; */
  transform: scale(1) rotate(0deg);
  /* Assurez-vous qu'il commence sans transformation de la main */
  /* background-image est cloné. */
  /* Assurez-vous que les enfants (coût, barres, nom, desc) sont bien clonés et stylés */ }

.player-card .zone-img,
.resolution-display-card .zone-img {
  width: 100%;
  /* Takes full space of parent */
  height: 52.5%;
  margin: 0;
  position: relative;
  display: flex;
  /* To help position content on top */
  flex-direction: column;
  /* Stack elements like image and description */
  justify-content: center;
  /* Center content if needed */
  align-items: center;
  /* Center content if needed */ }

.resolution-display-card .zone-img {
  height: 53%; }

.player-card .card-cost,
.resolution-display-card .card-cost {
  right: 1px;
  top: 28px;
  position: absolute;
  color: white;
  font-weight: bold;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem; }

.card-status-icons {
  position: absolute;
  top: 25px;
  left: 20px;
  max-width: 60px;
  flex-wrap: wrap;
  display: flex;
  gap: 2px;
  z-index: 3; }

.card-status-icons .status-icon {
  width: 25px;
  height: 25px;
  position: relative;
  left: -15px; }

.card-status-icons .status-value {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 0.6rem;
  padding: 0 2px;
  border-radius: 2px;
  line-height: 1; }

.player-status-combat-area .status-value {
  position: absolute;
  width: 25px;
  display: flex;
  bottom: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  height: 12px;
  font-size: 13px; }

.player-card .card-header, .resolution-display-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 4px;
  position: relative;
  width: 70%;
  margin-top: -2px; }

.player-card .card-name, .resolution-display-card .card-name {
  font-family: var(--police-nom-cartes, "DejaVuSansCondensed"), sans-serif;
  font-weight: bold;
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.3;
  flex-grow: 1;
  margin: 0;
  color: #efefef;
  white-space: nowrap;
  text-overflow: ellipsis; }

.player-card .card-type, .resolution-display-card .card-type {
  /* Caché par défaut, mais peut être utilisé par JS */
  display: none;
  position: absolute;
  font-size: 1rem;
  color: #ededed;
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  flex-shrink: 0; }

.player-card .card-image-container, .resolution-display-card .card-image-container {
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* Removed background */
  border: none;
  /* Removed border */
  transform: none;
  /* Removed rotate */
  top: 0;
  /* Reset top */
  margin: 0;
  /* Reset margin */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Added to center the image */
  overflow: hidden;
  position: absolute;
  /* Make it cover the parent */
  left: 0; }

.player-card .card-image-container img,
.resolution-display-card .card-image-container img {
  transform: none;
  /* Removed rotate */
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Or contain, depending on preference */
  position: static;
  /* Reset positioning */ }

.player-card .card-description-preview,
.resolution-display-card .card-description-preview {
  font-family: var(--police-description-cartes, "DejaVuSansCondensed"), sans-serif;
  font-size: 0.65rem;
  line-height: 1.15;
  text-align: center;
  flex-grow: 1;
  color: #242424;
  padding: 2px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  width: 70%;
  margin: 0 auto;
  height: auto;
  border: none;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1; }

.player-card .card-description-preview {
  max-height: 70px; }

.player-card .desc-footer,
.resolution-display-card .desc-footer {
  background: transparent;
  /* Removed background */
  width: 68%;
  height: auto;
  /* Auto height or remove if not needed */
  margin: 0 auto;
  border-bottom: none;
  /* Removed border */
  position: relative;
  z-index: 1;
  /* Above the image */ }

.player-card .desc-footer:before,
.resolution-display-card .desc-footer:before,
.player-card .desc-footer:after,
.resolution-display-card .desc-footer:after {
  content: '';
  position: absolute;
  bottom: 0;
  /* Adjusted */
  display: none;
  /* Removed angled edges by default */
  width: 18px;
  height: 18px;
  border-bottom: none;
  /* Removed border */
  background: transparent;
  /* Removed background */ }

/* If angled footers are still desired with new design, these might need to be re-styled */
/* For now, effectively removing them by setting display: none or removing background/border */
/*
.player-card .desc-footer:before,
.resolution-display-card .desc-footer:before {
    left: -9px;
    transform: rotate(45deg);
}

.player-card .desc-footer:after,
.resolution-display-card .desc-footer:after {
    right: -9px;
    transform: rotate(-45deg);
}
*/
/* --- Barres de puissance latérales pour les cartes --- */
.lateral-power-bars {
  position: absolute;
  right: 30px;
  top: 52%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 50px;
  align-items: flex-end; }

.lateral-bar {
  height: 20px;
  max-width: 50px;
  /* Largeur maximale comme demandé */
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease-out;
  position: relative;
  min-width: 15%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px -3px black; }

.lateral-bar.top-bar {
  background-color: #8A2BE2;
  /* Violet */ }

.lateral-bar.mid-bar {
  background-color: #007BFF;
  /* Bleu */ }

.lateral-bar.bot-bar {
  background-color: #28A745;
  /* Vert */ }

.lateral-bar-value {
  position: absolute;
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  text-shadow: 1px 1px 1px black;
  text-align: left; }

/* DOUBLE JAUGES (Physique + Magique) - Barre unique segmentée */
.lateral-power-bars-dual {
  position: absolute;
  right: 30px;
  top: 77%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100px;
  /* Largeur maximale d'une barre */
  align-items: flex-end; }

.dual-bar-zone {
  position: relative;
  height: 20px;
  max-width: 100px;
  border-radius: 1px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 5px -3px black;
  background: rgba(0, 0, 0, 0.2);
  /* Fond pour la partie vide */
  overflow: hidden;
  display: flex;
  transition: width 0.3s ease-out; }

/* Segment physique (rouge) - à gauche */
.dual-bar.physical-bar {
  height: 100%;
  background: var(--ts-physical-color, #dc3545);
  transition: width 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 0%;
  /* Couleur depuis config via --ts-physical-color */ }

/* Segment magique (bleu) - après le physique */
.dual-bar.magical-bar {
  height: 100%;
  background: var(--ts-magical-color, #007bff);
  transition: width 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 0%;
  /* Couleur depuis config via --ts-magical-color */ }

.dual-bar .bar-value {
  color: white;
  font-size: 0.75em;
  font-weight: bold;
  text-shadow: 1px 1px 2px black;
  z-index: 1;
  white-space: nowrap; }

/* Les jauges dans la résolution utilisent le même positionnement que dans la main (top: 52% par défaut) */

/* === DUAL BAR ZONE - NORMAL IMAGE MODE (avec fillZone) === */
/* Mode normal avec image de cadre et zone de remplissage configurable */
.dual-bar-zone.normal-image-mode {
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  /* Utilise padding pour créer la zone de fill */
  padding-left: var(--fill-offset-start, 0px);
  box-sizing: content-box; }

/* Cadre de la jauge en mode normal - couvre toute la zone incluant le padding */
.dual-bar-zone.normal-image-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* La largeur totale = offset + zone fill */
  width: calc(var(--fill-offset-start, 0px) + var(--fill-max-width, 100px));
  height: 100%;
  background-image: var(--bar-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2; }

/* Les barres sont positionnées dans la zone de fill (après le padding) */
.dual-bar-zone.normal-image-mode .dual-bar {
  position: relative;
  z-index: 1;
  /* La largeur max est relative à la zone de fill (--fill-max-width) */
  max-width: var(--fill-max-width, 100px); }

/* Le conteneur des barres est limité à la zone de fill */
.dual-bar-zone.normal-image-mode {
  /* La largeur de la zone = zone de fill seulement (le padding est en plus) */
  width: var(--fill-max-width, 100px) !important;
  max-width: var(--fill-max-width, 100px) !important; }

/* === DUAL BAR ZONE - THREE-SLICE MODE === */
/* En mode 3-slice: utilise ::before et ::after pour les zones start/end du cadre */
.dual-bar-zone.three-slice-mode {
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible; }

/* Zone du milieu (background répétable) - affiché derrière le contenu */
.dual-bar-zone.three-slice-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--ts-slice1, 3px);
  right: var(--ts-slice-end-width, 3px);
  height: 100%;
  background-image: var(--ts-image);
  background-position: calc(-1 * var(--ts-slice1, 3px)) center;
  background-size: auto 100%;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2; }

/* Les barres dual gardent leur background mais sont positionnées derrière le cadre */
.dual-bar-zone.three-slice-mode .dual-bar {
  z-index: 0; }

/* Frame overlay avec les 3 zones */
.dual-bar-zone.three-slice-mode::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  /* Composite des 3 zones en un seul pseudo-element */
  background-image:
    var(--ts-image),
    var(--ts-image);
  background-position:
    left center,
    right center;
  background-size:
    auto 100%,
    auto 100%;
  background-repeat: no-repeat, no-repeat;
  /* Clip pour montrer seulement les extrémités */
  -webkit-mask-image:
    linear-gradient(to right,
      black 0, black var(--ts-slice1, 3px),
      transparent var(--ts-slice1, 3px),
      transparent calc(100% - var(--ts-slice-end-width, 3px)),
      black calc(100% - var(--ts-slice-end-width, 3px)), black 100%);
  mask-image:
    linear-gradient(to right,
      black 0, black var(--ts-slice1, 3px),
      transparent var(--ts-slice1, 3px),
      transparent calc(100% - var(--ts-slice-end-width, 3px)),
      black calc(100% - var(--ts-slice-end-width, 3px)), black 100%); }

/* Les valeurs des barres sont au-dessus du cadre */
.dual-bar-zone.three-slice-mode .bar-value {
  position: relative;
  z-index: 4; }

/* Cacher les zones 3-slice jusqu'à ce que le rendu dynamique soit prêt */
/* Cela évite le flash vert du chroma key pendant l'initialisation */
.dual-bar-zone.three-slice-mode:not([data-card-bar-initialized="true"]) {
  opacity: 0 !important;
  pointer-events: none; }

/* Afficher la zone une fois initialisée - PAS de transition pour éviter le blink */
/* L'initialisation est maintenant synchrone quand les images sont en cache */
.dual-bar-zone.three-slice-mode[data-card-bar-initialized="true"] {
  opacity: 1 !important; }

/* === DUAL BAR ZONE - DODGE MODE (Zone d'esquive) === */
/* Les zones d'esquive utilisent l'image d'esquive au lieu de la jauge de puissance */
.dual-bar-zone.dodge-zone {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
  min-width: 30px;
}

/* L'image d'esquive remplace les barres physique/magique */
/* Alignée à droite et 100% de la largeur comme les jauges de puissance */
.dual-bar-zone.dodge-zone::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: var(--dodge-zone-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: right center;
  z-index: 2;
  opacity: 0.9;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Animation subtile pour indiquer que c'est une zone d'esquive */
.dual-bar-zone.dodge-zone::before {
  animation: dodge-zone-pulse 2s ease-in-out infinite;
}

@keyframes dodge-zone-pulse {
  0%, 100% {
    transform: scale(1);
    transform-origin: right center;
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    transform-origin: right center;
    opacity: 1;
  }
}

/* Cacher les barres physique/magique dans les zones d'esquive */
.dual-bar-zone.dodge-zone .dual-bar {
  display: none !important;
}

/* Indicateur visuel de zone d'esquive (icône de pied) si pas d'image configurée */
.dual-bar-zone.dodge-zone:not([style*="--dodge-zone-image"])::before {
  content: '👟';
  font-size: 14px;
  background: none;
}

/* Quand le rendu dynamique JS est actif, désactiver les pseudo-elements CSS */
.dual-bar-zone.dynamic-render-active::before,
.dual-bar-zone.dynamic-render-active::after {
  display: none !important;
  content: none !important; }

/* Les valeurs des barres restent visibles avec le rendu dynamique */
.dual-bar-zone.dynamic-render-active .bar-value {
  position: relative;
  z-index: 15; }

/* Bouton Fin de Tour */
.end-turn-button {
  position: absolute;
  top: 40%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 30;
  pointer-events: auto; }

.end-turn-button button {
  background: none;
  border: none;
  padding: 0;
  width: 128px;
  height: 128px; }

.end-turn-button button img {
  width: 100%;
  height: auto;
  display: block; }

.end-turn-button button:disabled {
  cursor: not-allowed; }

/* --- Visualisation Résolution Combat --- */
.combat-resolution-visual {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  background: none;
  border: none;
  z-index: 100;
  color: #e0e0ff;
  max-height: 90vh;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: auto; }

.combat-resolution-visual.resolution-hidden {
  opacity: 0;
  pointer-events: none;
  z-index: -10; }

/* Fond noir semi-transparent derrière l'encart de résolution - pleine largeur */
.combat-resolution-visual::before {
  content: '';
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: -20px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  pointer-events: none; }

.combat-resolution-visual.resolving-player {
  border-color: #4ecdc4;
  background: none;
  border: none; }

.combat-resolution-visual.resolving-player .attacker-column h6 {
  color: #a2d2ff; }

.combat-resolution-visual.resolving-player .attacker-column .resolution-display-card {
  border-color: #a2d2ff; }

.combat-resolution-visual.resolving-enemy {
  border-color: #ff6b6b;
  background: none;
  border: none; }

.combat-resolution-visual.resolving-enemy .attacker-column h6 {
  color: #ff8a8a; }

.combat-resolution-visual.resolving-enemy .attacker-column .resolution-display-card {
  border-color: #ff8a8a; }

.combat-resolution-visual::-webkit-scrollbar {
  width: 8px; }

.combat-resolution-visual::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px; }

.combat-resolution-visual::-webkit-scrollbar-thumb {
  background: rgba(106, 127, 186, 0.7);
  border-radius: 4px; }

.combat-resolution-visual::-webkit-scrollbar-thumb:hover {
  background: #6a7fba; }

.btn-pass-def {
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  text-align: center;
  position: relative;
  top: 15px;
  opacity: 1;
  transition: opacity 0.2s ease; }

.btn-pass-def.btn-pass-def-hidden {
  opacity: 0;
  pointer-events: none; }

.btn-pass-def .btn {
  transition: opacity 0.2s ease; }

.btn-pass-def .btn.btn-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute; }

.player-defense-prompt {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(200, 0, 0, 0.8);
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 110;
  text-align: center;
  border: 1px solid #ffc107; }

.player-defense-prompt h5 {
  color: #ffc107;
  margin-bottom: 5px; }

.player-defense-prompt p {
  margin-bottom: 0;
  font-size: 0.9em; }

.player-defense-prompt + .resolution-content {
  margin-top: 60px; }

.resolution-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px; }

.resolution-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto; }

.resolution-column h6 {
  margin-bottom: 10px;
  font-weight: bold;
  color: #d5b778; }

.resolution-portrait {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  top: 33px;
  position: relative;
  z-index: 0;
  border: 2px solid #d5b778;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

.resolution-column .player-card, .resolution-column .resolution-display-card {
  position: relative;
  z-index: 1; }

.vs-clash-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
  min-height: 35px; }

.vs-clash-effect {
  width: 200px;
  height: auto;
  margin: -100px auto -120px auto; }

/*
.total-damage-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  width: 100%;
}

.total-damage-summary .damage-value {
  font-size: 1.3em;
  padding: 3px 8px;
  border-radius: 5px;
  text-shadow: 1px 1px 2px black;
}

.total-damage-summary .defender-total {
  color: #ff4d4d;
}

.total-damage-summary .attacker-total {
  color: #ffc107;
}

.total-damage-summary i {
  margin-right: 5px;
}
*/
.resolution-display-card {
  width: 200px;
  height: 300px;
  transform: scale(1);
  margin: 10px auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  cursor: default;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }

.resolution-display-card:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  z-index: 110; }

.resolution-display-card.drag-over {
  background-color: rgba(0, 255, 0, 0.2) !important;
  border-color: lightgreen !important;
  box-shadow: 0 0 10px 3px rgba(0, 255, 0, 0.5) !important; }

.resolution-display-card .zone-img {
  height: 52.5%;
  /* Takes full space of parent */
  margin-top: 0; }

.resolution-display-card .card-image-container {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.resolution-display-card .card-image-container img {
  height: 100%;
  /* Full height of container */
  width: 100%;
  /* Full width of container */
  left: 0;
  top: 0;
  position: static;
  /* Image is part of the flow of card-image-container */
  object-fit: cover;
  /* Or contain */ }

.resolution-display-card .card-header {
  padding: 4px;
  width: 70%; }

.resolution-display-card .card-name {
  font-size: 0.9em; }

.resolution-display-card .card-cost {
  width: 28px;
  height: 28px;
  font-size: 1em;
  top: 31px; }

.resolution-display-card .card-type {
  font-size: 0.8em;
  padding: 1px 4px;
  display: none;
  /* Assurer affichage */ }

.resolution-display-card .card-description-preview {
  font-size: 0.8em;
  line-height: 1.2;
  color: #242424;
  padding: 5px;
  width: 66%;
  margin: -2px auto -2px;
  height: 82px;
  overflow-y: auto;
  overflow-x: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* Ensure no background/border from base .card-description-preview is inherited if not overridden */
  background: transparent;
  /* Fully transparent */
  border: none; }

.resolution-display-card .desc-footer {
  width: 70%;
  height: auto;
  /* Auto height or remove if not needed */
  margin-top: 0;
  /* Ensure no background/border from base .desc-footer is inherited if not overridden */
  background: transparent;
  /* Fully transparent */
  border: none; }

.resolution-display-card .desc-footer:before,
.resolution-display-card .desc-footer:after {
  bottom: 0;
  /* Adjusted */
  width: 14px;
  height: 14px;
  /* Ensure no background/border from base pseudo-elements is inherited */
  background: transparent;
  /* Fully transparent */
  border: none;
  display: none;
  /* Removing angled footers for now */ }

.resolution-display-card .desc-footer:before {
  left: -7px; }

.resolution-display-card .desc-footer:after {
  right: -7px; }

.resolution-display-card.standard-defense-card .zone-img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; }

.resolution-display-card.standard-defense-card .card-image-container.standard-defense-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  z-index: 0; }

.resolution-display-card.standard-defense-card .card-image-container.standard-defense-img i {
  font-size: 4em;
  color: #ced4da; }

/* Barres latérales pour carte de défense passive dans la colonne de résolution */
.resolution-column .resolution-display-card.standard-defense-card .lateral-power-bars-dual {
  position: absolute;
  right: 30px;
  top: 77%;
  transform: translateY(-50%);
  z-index: 1; }

.resolution-display-card.standard-defense-card .card-header {
  justify-content: center; }

.resolution-display-card.standard-defense-card .card-description-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  color: #555; }

.barre-pv:not(.player-sword-health) {
  width: 160px;
  position: absolute;
  bottom: 0; }

.barre-pv {
  cursor: pointer; }

.ap-container {
  position: absolute;
  bottom: 220px;
  left: calc(180px + 430px);
  flex-direction: row;
  gap: 4px; }

.defausse-pioche {
  position: absolute;
  bottom: 0;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px; }

.barre-pv-container .progress-bar {
  width: 19px;
  transition: height 0.3s ease-out;
  font-size: 14px; }

.barre-pv-container .progress {
  width: 19px;
  height: 352px;
  position: absolute;
  bottom: 14px;
  left: 37px;
  z-index: -1;
  display: flex;
  flex-direction: column-reverse; }

.xp-feedback-area {
  -webkit-text-stroke: thin;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  left: 104px;
  bottom: 144px; }

.xp-gauge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px; }

.level-up-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  min-height: 0; }

.level-up-wrapper .level-up-display {
  margin-top: 0;
  margin-bottom: 0; }

.level-up-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 22px;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffd74d;
  background: linear-gradient(180deg, #fff4d2 0%, #ffe070 38%, #ffb347 72%, #ff8f3f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 0 rgba(104, 46, 0, 0.85), 0 6px 14px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 210, 90, 0.75);
  filter: drop-shadow(0 0 6px rgba(255, 230, 160, 0.45));
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  animation: none;
  user-select: none;
  pointer-events: none; }

.level-up-banner.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: levelUpBannerPop 0.85s ease-out; }

@keyframes levelUpBannerPop {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.85); }
  45% {
    opacity: 1;
    transform: translateY(-6px) scale(1.08); }
  70% {
    opacity: 1;
    transform: translateY(0) scale(0.98); }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1); } }
.xp-gauge-track {
  position: relative;
  width: 35px;
  height: 290px;
  background-color: #ffffff;
  /* transform: skewX(-45deg); */
  transform: skewY(30deg);
  overflow: hidden;
  border: 4px solid rgba(61, 38, 0, 0.85);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35); }

.xp-gauge-layer {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  transform-origin: bottom;
  transition: height 1.5s ease-out;
  will-change: height; }

.xp-gauge-layer-initial {
  background: linear-gradient(180deg, #173c7d 0%, #0d2853 100%);
  transition: none;
  z-index: 1; }

.xp-gauge-layer-gain {
  background: linear-gradient(180deg, #1fa3ff 0%, #0588e9 100%);
  z-index: 2; }

.xp-gauge-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 60px; }
  .xp-gauge-value .xp-gauge-gain {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em; }
  .xp-gauge-value .xp-gauge-progress {
    display: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9; }

.level-up-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid rgba(255, 215, 0, 0.75);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
  text-transform: uppercase;
  color: #ffd74d;
  margin-top: auto;
  margin-bottom: auto; }
  .level-up-display .level-up-display {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(255, 215, 0, 0.18);
    border: 1px solid rgba(255, 215, 0, 0.75);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    text-transform: uppercase;
    color: #ffd74d;
    align-self: flex-end; }

.level-up-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: #ffe066;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  perspective: 900px; }
  .level-up-number.is-rolling {
    will-change: transform; }
  .level-up-number .level-number-roller {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: inherit;
    width: var(--level-roll-width, auto);
    height: var(--level-roll-height, 100%); }
  .level-up-number .level-number-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    color: inherit;
    backface-visibility: hidden;
    transform-style: preserve-3d; }
  .level-up-number .level-number-roller.roll-up .level-number-face.level-number-old {
    transform-origin: center bottom;
    animation: level-number-roll-up-out var(--level-roll-duration, 1300ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
  .level-up-number .level-number-roller.roll-up .level-number-face.level-number-new {
    transform-origin: center top;
    animation: level-number-roll-up-in var(--level-roll-duration, 1300ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
  .level-up-number .level-number-roller.roll-down .level-number-face.level-number-old {
    transform-origin: center top;
    animation: level-number-roll-down-out var(--level-roll-duration, 1300ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
  .level-up-number .level-number-roller.roll-down .level-number-face.level-number-new {
    transform-origin: center bottom;
    animation: level-number-roll-down-in var(--level-roll-duration, 1300ms) cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes level-number-roll-up-out {
  0% {
    transform: rotateX(0deg);
    opacity: 1; }
  100% {
    transform: rotateX(90deg);
    opacity: 0; } }
@keyframes level-number-roll-up-in {
  0% {
    transform: rotateX(-90deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    opacity: 1; } }
@keyframes level-number-roll-down-out {
  0% {
    transform: rotateX(0deg);
    opacity: 1; }
  100% {
    transform: rotateX(-90deg);
    opacity: 0; } }
@keyframes level-number-roll-down-in {
  0% {
    transform: rotateX(90deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    opacity: 1; } }
.level-up-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  text-wrap-mode: nowrap; }

.level-up-label {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: #fff8c4; }

.level-up-subtext {
  font-size: 1.15rem;
  color: #ffffff;
  opacity: 0.85; }

.bg-magical {
  background-color: purple !important; }

.physical-shield-fill,
.magical-shield-fill {
  position: absolute;
  top: 0;
  height: 100%;
  transition: width 0.3s ease-out, left 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 1px black; }

.physical-shield-fill {
  background-color: #6c757d; }

.magical-shield-fill {
  background-color: purple; }

/*# sourceMappingURL=combats.css.map */
/* CSS for Score Highlighting in Combat Resolution */
.lateral-bar.score-winner-highlight,
.dual-bar.score-winner-highlight {
  animation: highlight-winner 0.5s ease-in-out forwards;
  animation-delay: 0.1s;
  /* Slight delay to sync with card appearance */
  /* Ensure it's above other elements if scaling causes overlap */
  z-index: 10; }

.lateral-bar.score-winner-highlight .lateral-bar-value,
.dual-bar.score-winner-highlight .bar-value {
  /* Optional: if only text needs to change color */
  /* color: #ffd700; /* Gold color for winner */ }

.lateral-bar.score-loser-fade,
.dual-bar.score-loser-fade {
  animation: fade-loser 0.5s ease-in-out forwards;
  animation-delay: 0.1s;
  opacity: 0.6;
  /* Default faded state */ }

.lateral-bar.score-loser-fade .lateral-bar-value,
.dual-bar.score-loser-fade .bar-value {
  /* filter: brightness(0.7); */ }

/* Animations for cumulative badges */
.dual-bar-zone.zone-winner-highlight {
  position: relative; }

.dual-bar-zone.zone-winner-highlight > div[x-show]:last-child {
  animation: highlight-winner-badge 0.5s ease-in-out forwards;
  animation-delay: 0.1s; }

.dual-bar-zone.zone-loser-fade > div[x-show]:last-child {
  animation: fade-loser-badge 0.5s ease-in-out forwards;
  animation-delay: 0.1s; }

@keyframes highlight-winner-badge {
  0% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    filter: brightness(1); }
  50% {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.8);
    filter: brightness(1.3); }
  100% {
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 20px 6px rgba(255, 215, 0, 0.6);
    filter: brightness(1.2); } }
@keyframes fade-loser-badge {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 1; }
  100% {
    transform: translateY(-50%) scale(0.9);
    opacity: 0.5; } }
@keyframes highlight-winner {
  0% {
    transform: scale(1);
    box-shadow: inset 0 0 5px -3px black;
    /* Existing shadow */
    filter: brightness(1); }
  50% {
    transform: scale(1.15);
    /* Scale up */
    box-shadow: 0 0 10px 3px gold, inset 0 0 5px -3px black;
    /* Add gold glow */
    filter: brightness(1.2); }
  100% {
    transform: scale(1.1);
    /* Slightly settle back */
    box-shadow: 0 0 15px 5px gold, inset 0 0 5px -3px black;
    /* Persistent glow */
    filter: brightness(1.1);
    /* Keep the color of the bar itself, let shadow do the highlight, or change background:
    // background-color: #FFD700; /* Example: change bar color to gold */ } }
@keyframes fade-loser {
  0% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0.5;
    /* Fade out */
    transform: scale(0.95);
    /* Slightly shrink */ } }
.player-status-combat-area {
  position: absolute;
  bottom: 30% !important;
  left: 70px !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3px;
  z-index: 26;
  max-width: 150px;
  max-height: 100px;
  overflow: hidden;
  padding-right: 0; }

/* Ajustement pour les icônes de statut elles-mêmes si nécessaire */
.player-status-combat-area .status-icon {
  width: 24px;
  /* Légèrement plus petit pour un alignement vertical dense */
  height: 24px;
  margin-bottom: 5px;
  /* Espace sous chaque icône */ }

.player-status-combat-area .status-icon .status-duration,
.player-status-combat-area .status-icon .status-stacks {
  font-size: 0.7rem;
  /* Plus petit pour ne pas surcharger */ }

/*# sourceMappingURL=combats.css.map */
/* =================================== */
/* Styles for Combat Transition Screen */
/* =================================== */
#combat-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  /* Ensure it's on top of everything */
  display: none;
  /* Initially hidden, JS will manage display */
  overflow: hidden;
  /* To contain the swipe panel if it uses % based translation */
  pointer-events: none;
  /* Allow clicks to pass through when not active */ }

#combat-transition-overlay.active {
  /* Class to be added by JS when transition starts */
  pointer-events: auto;
  /* Block clicks during transition */ }

#swipe-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  /* Ensure full viewport width */
  height: 100vh;
  /* Ensure full viewport height */
  background-color: black;
  z-index: 0;
  /* Behind the white animation panel */
  /* transform: translateX(100%); GSAP will handle this */ }

#white-animation-panel {
  position: absolute;
  top: 0;
  left: 0;
  /* GSAP will control transform: translateX for animation */
  width: 33.33vw;
  /* 1/3rd of the screen width */
  height: 100vh;
  /* Full screen height */
  background-color: white;
  z-index: 1;
  /* Above the black swipe-panel */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* In case content animates/overflows */ }

#transition-portraits-container {
  position: relative;
  /* Centered by flex on #white-animation-panel */
  /* top: 50%; left: 50%; transform: translate(-50%, -50%); remove if flex handles all */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 50px);
  /* Responsive gap */
  opacity: 0;
  /* Initial state for GSAP */
  /* z-index: 1; Not needed if it's a direct child of #white-animation-panel and #white-animation-panel has z-index */
  padding: 20px;
  /* Add some padding so portraits don't touch edges */
  box-sizing: border-box;
  width: 100%;
  /* Take full width of its parent white panel */ }

.transition-portrait {
  border-radius: 50%;
  overflow: hidden;
  background-color: #2a2a2a;
  /* Dark fallback */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* Prevent shrinking in flex container */ }

.transition-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image covers the circle without distortion */ }

.transition-portrait.player {
  width: clamp(120px, 18vw, 180px);
  /* Slightly larger player portrait */
  height: clamp(120px, 18vw, 180px);
  border: 4px solid #007bff;
  /* Example: Blue border for player */
  box-shadow: 0 0 18px rgba(0, 123, 255, 0.7); }

.transition-portrait.enemy {
  width: clamp(80px, 12vw, 120px);
  /* Smaller enemy portraits */
  height: clamp(80px, 12vw, 120px);
  border: 3px solid #dc3545;
  /* Example: Red border for enemies */
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.6); }

.transition-vs-text {
  /* Added class for specific VS text styling */
  font-size: clamp(30px, 6vw, 50px);
  color: #ffc107;
  /* Gold/Yellow VS text */
  font-weight: bold;
  font-family: 'Arial Black', Gadget, sans-serif;
  /* More impactful font */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
  margin: 0 10px;
  /* Ensure some space around VS */ }

.transition-portraits-enemies-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  /* Prevent wrapping if too many, though JS limits to 3 */
  gap: clamp(10px, 2vw, 20px);
  /* Gap between enemy portraits */ }

/* ========================================== */
/* Support for Character Entrance Animations */
/* ========================================== */
.player-visual .player-bust,
.enemy-container .enemy-portrait img,
.companion-container .companion-portrait img {
  /* Assuming this is the main visual */
  /* Ensure elements are visible by default if not for opacity:0 set by GSAP */
  /* display: block; or inline-block if that's their natural state */
  /* GSAP will handle opacity and transform. Ensure no conflicting CSS transitions on these properties. */
  opacity: 1;
  /* Default state, GSAP will set to 0 then animate to 1 */ }

/* ================================================= */
/* Support for Attack Resolution Card Animations    */
/* ================================================= */
.combat-resolution-visual .player-card.resolution-display-card {
  /* Ensure cards are ready for transform. Most styles are already there. */
  /* position: relative; /* Or absolute, depending on parent. Already styled. */
  /* overflow: hidden; /* Typically good for cards, already styled. */ }

/* If any specific setup for card animation is needed, add here */
/* For example, if cards needed a specific transform-origin not at center */
/* .resolution-display-card { transform-origin: 50% 50%; } */
/* Ensure parent containers allow visibility if cards animate slightly out of bounds */
/* .resolution-column { overflow: visible; } /* Might be needed if cards rotate wildly */
/* .combat-resolution-visual { overflow: hidden; } /* To clip anything too far out */
/*# sourceMappingURL=combats.css.map */
/*# sourceMappingURL=combats.css.map */
#player-stats-panel {
  position: absolute;
  left: 170px;
  bottom: 0;
  z-index: 40;
  width: 450px;
  height: 120px;
  max-height: 120px;
  overflow: hidden;
  border: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.6);
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition: none;
  background: linear-gradient(140deg, rgba(15, 23, 42, 0.9) 90%, rgba(15, 23, 42, 0.6) 100%);
  text-align: -webkit-right;
  padding: 8px 8px 8px 10px; }

#player-stats-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  #player-stats-panel {
    transition: none; } }

/* Stats Slider */
.stats-slider-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative; }

.stats-slider-viewport {
  flex: 1;
  overflow: hidden;
  height: 100%;
  max-height: 100%; }

.stats-slider-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-out; }

.stats-slide {
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden; }

.stats-slider-arrows {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin-left: 4px;
  margin-top: 10px; }

.stats-slider-arrow.carousel-arrow {
  background: url("../assets/UI/fleche.webp") no-repeat center/contain;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 5;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease; }

.stats-slider-arrow.carousel-arrow:hover {
  opacity: 1;
  transform: scale(1.1); }

.stats-slider-arrow.carousel-arrow.up {
  transform: rotate(-90deg); }

.stats-slider-arrow.carousel-arrow.up:hover {
  transform: rotate(-90deg) scale(1.1); }

.stats-slider-arrow.carousel-arrow.down {
  transform: rotate(90deg); }

.stats-slider-arrow.carousel-arrow.down:hover {
  transform: rotate(90deg) scale(1.1); }

.stats-panel-content {
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: #e5e7eb;
  font-family: var(--police-texte-general, "DejaVuSansCondensed"), sans-serif;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.6) rgba(30, 41, 59, 0.4); }

.stats-panel-content::-webkit-scrollbar {
  width: 6px; }

.stats-panel-content::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.6);
  border-radius: 3px; }

.stats-panel-content::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.4); }

.stats-panel-content h3 {
  color: #facc15;
  font-size: 0.95em;
  font-weight: 600;
  margin: 0 0 2px;
  text-align: left;
  letter-spacing: 0.02em; }

.stats-panel-content h5 {
  text-align: left; }

.stats-section {
  padding-top: 3px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  display: flex;
  flex-direction: column;
  gap: 3px; }

.stats-section:first-of-type {
  border-top: none;
  padding-top: 0; }

.stats-section h4 {
  text-align: left;
  color: #9ca3af;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 2px; }

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75em; }

.stat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #cbd5f5; }

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px; }

.stat-value {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: bold;
  color: #f9fafb; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px; }

.stat-grid-item {
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25); }

.stat-grid-icon {
  font-size: 1em;
  line-height: 1; }

.stat-grid-label {
  font-size: 0.7em;
  color: #cbd5f5;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

.stats-bonus-resistance-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px; }

.bonus-resistance-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  background: none;
  border: none; }

.br-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  font-size: 12px;
  text-align: center; }

.br-label {
  font-size: 0.75em;
  color: #e5e7eb;
  text-align: left;
  flex: 0 0 auto; }

.br-bonus {
  font-size: 0.7em;
  color: #60a5fa;
  font-weight: 600; }

.br-separator {
  font-size: 0.7em;
  color: #9ca3af; }

.br-resist {
  font-size: 0.7em;
  color: #34d399;
  font-weight: 600; }

.br-resist.immune {
  color: #fbbf24;
  font-weight: 700; }

.stat-grid-value {
  font-size: 0.8em;
  font-weight: 600;
  color: #f9fafb; }

.stat-value-positive {
  color: #a3e635; }

.stat-value-negative {
  color: #f87171; }

.stat-value-immune {
  color: #38bdf8; }

.stats-panel-empty {
  margin: 0;
  font-size: 0.9em;
  color: #94a3b8;
  text-align: center; }

.stats-panel-content hr {
  border: 0;
  height: 1px;
  background-color: #4a5568;
  /* Or rgb(68, 68, 68) */
  margin: 8px 0;
  /* Adjusted from 10px */ }

/* ==========================================================================
   Sacoche et Ceinture d'Objets Rapides (Haut-Droite) - STYLES DE BASE
   ========================================================================== */
.quick-item-area {
  position: absolute;
  top: 15px;
  right: 10px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
  transition: right 0.3s ease; }

.flee-button-top {
  display: flex;
  align-items: center; }

.flee-button-top button {
  padding: 0;
  border: none !important;
  background: url('../assets/combats/UI/out-run-btn.webp') no-repeat center !important;
  background-color: transparent !important;
  background-size: contain !important;
  width: 120px;
  height: 60px;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  outline: none !important;
  box-shadow: none !important; }

.flee-button-top button:hover,
.flee-button-top button:focus,
.flee-button-top button:active {
  background: url('../assets/combats/UI/out-run-btn.webp') no-repeat center !important;
  background-color: transparent !important;
  background-size: contain !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }

.flee-button-top button:disabled {
  filter: grayscale(100%) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  cursor: not-allowed;
  background: url('../assets/combats/UI/out-run-btn.webp') no-repeat center !important;
  background-color: transparent !important;
  background-size: contain !important; }

.flee-button-top button i,
.flee-button-top button span {
  display: none; }

.glossary-icon {
  position: relative;
  width: auto;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background-color: transparent;
  border-radius: 0;
  cursor: pointer;
  color: #fff; }

.satchel-icon {
  width: auto;
  /* Taille de l'icône de la sacoche */
  height: 80px;
  cursor: pointer;
  transition: transform 0.2s, margin-right 0.3s, opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
  align-self: center;
  /* background-image: url('/path/to/your/satchel-icon.webp'); */
  /* Mettez votre image ici */
  /* background-size: contain; */
  /* background-repeat: no-repeat; */
  /* Pour l'exemple, une couleur unie */
  /* background-color: #8B4513; */
  border-radius: 5px;
  margin-left: 5px;
  /* Pour que la ceinture se déploie à gauche */ }

.satchel-icon:hover {
  transform: scale(1.1); }

.satchel-icon:active {
  opacity: 0.7;
  filter: brightness(0.8); }

/* Contenedor de Satchel y Belt centrado arriba de la mano del jugador */
.satchel-belt-container {
  position: absolute;
  bottom: 130px;
  left: 40%;
  transform: translateX(-50%);
  z-index: 55; }

.satchel-belt-container .item-belt {
  position: absolute;
  top: 60%;
  left: 75%;
  transform: translateY(-50%);
  flex-direction: row;
  margin-left: 5px; }

.satchel-belt-container .item-belt.open {
  margin-left: 5px; }

.satchel-icon-centered {
  width: auto;
  height: 100px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }

.satchel-icon-centered:hover {
  transform: scale(1.1); }

.satchel-icon-centered:active {
  opacity: 0.7;
  filter: brightness(0.8); }

.item-belt {
  display: flex;
  align-items: center;
  /* Aligner les slots verticalement au centre de la ceinture */
  height: 50px;
  /* Hauteur de la ceinture, correspond à la sacoche */
  padding: 5px 0 5px 0;
  /* Un peu de padding interne */
  overflow: hidden;
  /* Important pour l'animation de largeur */
  /* Initial state (closed) */
  --belt-open-width: 360px;
  --belt-open-offset: -50px;
  max-width: 0;
  opacity: 0;
  transform-origin: left center;
  /* L'animation de déploiement part de la gauche (hacia la derecha) */
  margin-left: 0;
  transition: max-width 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease-out, margin-left 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  /* cubic-bezier pour un effet un peu "élastique" à l'ouverture */ }

.item-belt.open {
  /* Classe ajoutée par Alpine.js via :class="{'open': showItemBelt}" */
  max-width: var(--belt-open-width);
  opacity: 1;
  margin-left: var(--belt-open-offset); }

.item-belt.closing {
  pointer-events: none;
  transition: none;
  animation: item-belt-close 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }

@keyframes item-belt-close {
  0% {
    max-width: var(--belt-open-width);
    margin-left: var(--belt-open-offset);
    opacity: 1; }
  85% {
    opacity: 1; }
  100% {
    max-width: 0;
    margin-left: 0;
    opacity: 0; } }

.item-belt.open::before,
.item-belt.closing::before {
  content: "";
  width: 40px;
  height: 40px;
  background: url("../assets/combats/UI/laniere-centre.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  display: flex;
  z-index: -1; }

.item-belt.open::after,
.item-belt.closing::after {
  content: "";
  width: 39px;
  height: 39px;
  background: url("../assets/combats/UI/bout-laniere.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  display: flex;
  margin-top: 0.5px; }

.belt-slot {
  width: 40px;
  height: 40px;
  background: url("../assets/combats/UI/bouton-point.webp"), url("../assets/combats/UI/laniere-centre.webp");
  background-size: contain;
  /* Bordure interne plus discrète */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  /* Indique qu'on peut drag */
  flex-shrink: 0;
  position: relative;
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; }

/*.belt-slot:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 223, 186, 0.7);
    // Lueur claire au survol
} */
.belt-slot img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255, 223, 186, 0.7); }

.belt-slot.dragging {
  opacity: 0.4;
  transform: scale(0.9);
  border-style: dashed;
  border-color: #ffc107; }

.belt-slot img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  pointer-events: none; }

.belt-slot .placeholder-icon {
  font-size: 20px;
  color: #9ca3af;
  pointer-events: none; }

/* ==========================================================================
   Panneau de Logs de Combat (Haut-Gauche)
   ========================================================================== */
.combat-log-toggle-button {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 60;
  background-color: transparent;
  color: #ffc107;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.2s, transform 0.2s; }

.combat-log-toggle-button:hover {
  transform: scale(1.05); }

.combat-log-toggle-button img {
  width: 64px;
  height: 80px;
  display: block; }

.combat-log-panel {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 55;
  --combat-log-height: min(1339px, calc(100vh - 120px));
  height: var(--combat-log-height);
  width: calc(var(--combat-log-height) * 0.365);
  min-width: 350px;
  max-width: 489px;
  background-image: url("/assets/combats/UI/historique-combats.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  color: #fdf1d0;
  font-family: 'DejaVuSerif', 'Georgia', serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  border: none;
  border-radius: 0 62px 62px 0;
  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.6);
  overflow: hidden; }

.combat-log-panel .panel-header {
  position: absolute;
  top: 50px;
  left: 10px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  border: none; }

.combat-log-panel .panel-header h5 {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit; }

.combat-log-panel .close-panel-btn {
  background: rgba(16, 16, 16, 0.6);
  border: 1px solid rgba(255, 240, 210, 0.7);
  color: #fef6db;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }

.combat-log-panel .close-panel-btn:hover {
  background: rgba(255, 240, 210, 0.3);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 214, 110, 0.6);
  transform: scale(1.05); }

.combat-log-panel .close-panel-btn:focus-visible {
  outline: 2px solid rgba(255, 240, 210, 0.85);
  outline-offset: 3px; }

.combat-log-scroll-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, filter 0.2s ease; }

.combat-log-scroll-button img {
  width: 24px;
  height: auto;
  display: block; }

.combat-log-scroll-button.scroll-up {
  top: 10px; }

.combat-log-scroll-button.scroll-down {
  bottom: 15px; }

.combat-log-scroll-button:hover {
  transform: translateX(-50%) scale(1.05);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65)); }

.combat-log-scroll-button:focus-visible {
  outline: 2px solid rgba(255, 240, 210, 0.85);
  outline-offset: 6px; }

.combat-log-panel .logs-container {
  position: absolute;
  top: 120px;
  bottom: 40px;
  left: 10px;
  right: 10px;
  overflow-y: auto;
  padding: 0 16px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  background: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2rem; }

.combat-log-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0 0 1.2rem;
  color: #f6ead2;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(218, 165, 32, 0.4);
  box-shadow: none;
  text-shadow: none;
  width: 100%;
  max-width: 100%; }

.combat-log-entry.no-card {
  display: none; }

.combat-log-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  max-width: 100%; }

.combat-log-entry-turn {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 238, 209, 0.9); }

.combat-log-entry-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 0.75rem;
  max-width: 100%; }

.combat-log-entry-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 100%; }

.combat-log-entry-details.no-card {
  align-items: flex-start; }

.combat-log-entry-actor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff0d5; }

.combat-log-entry-actor span {
  display: inline-flex;
  justify-content: flex-end;
  text-align: right; }

.combat-log-entry-actor-avatar {
  display: none; }

.combat-log-entry-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 240, 210, 0.92);
  text-shadow: none;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  order: 1; }

.combat-log-entry-message .combat-log-inline-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.35rem;
  padding: 0.15rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  vertical-align: middle; }

.combat-log-entry-message .combat-log-inline-card img {
  width: 46px;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  object-fit: cover; }

.combat-log-entry-message .combat-log-inline-card.defense-card {
  background: rgba(118, 173, 255, 0.12);
  box-shadow: 0 3px 10px rgba(30, 66, 113, 0.35); }

.combat-log-entry-targets {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  order: 4; }

.combat-log-vs-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.combat-log-vs-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff8e5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  user-select: none; }

.combat-log-entry-target {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: rgba(255, 240, 210, 0.92);
  text-shadow: none; }

.combat-log-entry-target-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 240, 210, 0.5);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55); }

.combat-log-entry-damages {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B08941;
  max-width: 100%;
  order: 2; }

.combat-log-entry-damages span {
  padding: 0;
  border: none;
  background: none;
  text-shadow: none;
  font-weight: 600; }

.combat-log-entry-damages span.damage-none {
  color: rgba(182, 238, 206, 0.95); }

.combat-log-entry-damages span.damage-counter {
  color: rgba(255, 182, 182, 0.95); }

/* ====================================================================
   NOUVEAU: Affichage visuel des cartes dans l'historique de combat
   ==================================================================== */
.combat-log-cards-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 1rem 0;
  padding: 0.75rem;
  background: transparent;
  border-radius: 8px;
  position: relative;
  max-width: 100%;
  order: 3; }

.combat-log-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  margin: 0 -15px;
  overflow: visible; }

.combat-log-card-portrait {
  width: 75px;
  height: 75px;
  object-fit: cover;
  display: block;
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  border-radius: 50%; }

.combat-log-card-image {
  width: 100px;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid rgba(255, 240, 210, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 2; }
  .combat-log-card-image:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8);
    z-index: 3; }

.combat-log-card-wrapper.attack-card .combat-log-card-image {
  border-color: rgba(255, 120, 120, 0.6); }

.combat-log-card-wrapper.defense-card .combat-log-card-image {
  border-color: rgba(120, 180, 255, 0.6); }

.combat-log-card-wrapper.utility-card {
  margin: 0;
  margin-top: 1rem; }

.combat-log-card-wrapper.utility-card .combat-log-card-image {
  border-color: rgba(180, 220, 120, 0.6); }

.combat-log-attack-defense-view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin-top: 50px; }

.combat-log-card-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 240, 210, 0.95);
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.combat-log-cards-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  margin: 0 -20px;
  align-self: flex-start; }

.combat-log-vs-icon {
  width: auto;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  opacity: 0.9; }

.combat-log-vs-effect {
  width: 42px;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); }

/* ====================================================================
   Aperçu de carte au survol (historique)
   ==================================================================== */
.combat-log-card-preview-container {
  position: fixed;
  left: 400px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: none; }

.combat-log-card-preview {
  width: 240px;
  height: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9);
  position: absolute;
  overflow: visible; }
  .combat-log-card-preview .zone-img {
    position: relative;
    overflow: visible; }

/* Carte utilitaire flottante (sans overlay de fond) */
.utility-card-floating {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  transform: translate(-50%, -50%); }

.utility-card-shown {
  width: 240px;
  height: 360px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.95); }

.combat-log-panel .logs-container .text-muted {
  color: rgba(255, 244, 220, 0.7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65); }

.combat-log-panel .logs-container::-webkit-scrollbar {
  width: 6px; }

.combat-log-panel .logs-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px; }

.combat-log-panel .logs-container::-webkit-scrollbar-thumb {
  background: rgba(255, 240, 210, 0.55);
  border-radius: 3px; }

.combat-log-panel .logs-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 240, 210, 0.8); }

.-translate-x-full {
  transform: translateX(-100%); }

.translate-x-0 {
  transform: translateX(0); }

.companion-skill-icon.dragging {
  opacity: 1;
  border: 2px solid #ffc107 !important;
  transform: scale(1) !important;
  animation: drag-jiggle 0.6s infinite ease-in-out; }

/* Optionnel: Curseur pendant le drag d'une compétence compagnon */
.companion-skill-icon[draggable="true"]:active {
  cursor: grabbing; }

/*# sourceMappingURL=combats.css.map */
/* --- Companion Skill Icon Hover Effect --- */
.companion-skill-icon {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  /* Add a default transition for smoothness */ }

.companion-skill-icon:hover {
  transform: scale(1.2);
  /* Increase size on hover */
  box-shadow: 0 0 10px rgba(255, 255, 100, 0.7);
  /* Optional: add a glow effect like a highlight */
  z-index: 50;
  /* Ensure it comes above other elements if needed */ }

/* === Simple Combat Animations === */
@keyframes breathe {
  0%, 100% {
    transform: translateY(0) scale(1); }
  50% {
    transform: translateY(-3px) scale(1.02); } }
@keyframes breathe-centered {
  0%, 100% {
    transform: var(--enemy-base-transform) rotateX(0deg); }
  50% {
    transform: var(--enemy-base-transform) scale(1.01) rotateX(-1deg); } }
@keyframes attack-lunge {
  0% {
    transform: var(--enemy-base-transform); }
  50% {
    transform: var(--enemy-base-transform) translate(15px, -15px) scale(1.1); }
  100% {
    transform: var(--enemy-base-transform); } }
@keyframes block-recoil {
  0% {
    transform: var(--enemy-base-transform); }
  40% {
    transform: var(--enemy-base-transform) translate(-12px, 0); }
  60% {
    transform: var(--enemy-base-transform) translate(6px, 0); }
  80% {
    transform: var(--enemy-base-transform) translate(-3px, 0); }
  100% {
    transform: var(--enemy-base-transform); } }
@keyframes flying {
  0%, 100% {
    transform: var(--enemy-base-transform) translateY(-8px) translateX(0); }
  25% {
    transform: var(--enemy-base-transform) translateY(-18px) translateX(5px); }
  50% {
    transform: var(--enemy-base-transform) translateY(-8px) translateX(0); }
  75% {
    transform: var(--enemy-base-transform) translateY(-18px) translateX(-5px); } }
.enemy-container:not(.visually-defeated):not(.fading-out):not(.flying) .enemy-portrait > img {
  animation: breathe-centered 3s ease-in-out infinite; }

.enemy-container.flying:not(.visually-defeated):not(.fading-out):not(.dying) .enemy-portrait > img {
  animation: flying 2.5s ease-in-out infinite; }

/* Désactiver l'animation de vol pendant la mort (chute) */
.enemy-container.flying.dying .enemy-portrait > img {
  animation: none !important; }

/* Ennemis volants blessés - hauteur de vol réduite de 30% */
.enemy-container.flying.hurt:not(.visually-defeated):not(.fading-out):not(.dying) {
  --flying-height-reduction: 0.7; }

.enemy-container.flying.hurt:not(.visually-defeated):not(.fading-out):not(.dying) .enemy-portrait > img {
  animation: flying-hurt 2.5s ease-in-out infinite; }

@keyframes flying-hurt {
  0%, 100% {
    transform: var(--enemy-base-transform) translateY(-5px) translateX(0); }
  25% {
    transform: var(--enemy-base-transform) translateY(-12px) translateX(3px); }
  50% {
    transform: var(--enemy-base-transform) translateY(-5px) translateX(0); }
  75% {
    transform: var(--enemy-base-transform) translateY(-12px) translateX(-3px); } }

.enemy-container.pause-breathing .enemy-portrait > img {
  animation-play-state: paused !important; }

.companion-container:not(.visually-defeated):not(.fading-out) .companion-portrait img {
  animation: breathe 3s ease-in-out infinite; }

.attacking-shake {
  animation: attack-lunge 0.3s ease-out; }

.hit-shake,
.block-recoil {
  animation: block-recoil 0.3s ease-out; }

/* Vision Overlay for card reveal */
.vision-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8000; }

.vision-overlay .player-card,
.vision-overlay .resolution-display-card {
  position: relative;
  margin: 0; }

.vision-overlay .vision-cards {
  display: flex;
  gap: 15px; }

/* Loot drop icons shown at end of combat */
.loot-drop-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, 0);
  cursor: pointer;
  z-index: 85;
  animation: loot-pop 1s ease-out;
  transition: transform 0.2s; }

.loot-drop-icon:hover {
  transform: translate(-50%, -5px) scale(1.1); }

@keyframes loot-pop {
  0% {
    transform: translate(-50%, -10px) scale(0);
    opacity: 0; }
  30% {
    transform: translate(-50%, -30px) scale(1.2);
    opacity: 1; }
  60% {
    transform: translate(-50%, 0) scale(1); }
  75% {
    transform: translate(-50%, -8px) scale(1); }
  90% {
    transform: translate(-50%, 0) scale(1); }
  100% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1; } }
.loot-exit-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;
  text-align: center; }

/* --- Combatant context menu --- */
.combat-context-menu {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  pointer-events: none;
  z-index: 200; }

.combat-context-menu.visible {
  display: block; }

.combat-context-menu-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: auto;
  cursor: pointer; }

.combat-context-menu-item[data-action="bestiary"] {
  transform: translate(-50%, -50%) translateY(-30px); }

.combat-context-menu-item:hover {
  background: rgba(255, 255, 255, 0.2); }

/* Sidebar right position during combat */
.sidebar.sidebar-right {
  top: 90px; }

/*# sourceMappingURL=combats.css.map */