/* ========================================================
   CARDS ENGINE & RENDERING : RPG-CARDS
   ======================================================== */

#playerCards {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  width: var(--board-width);
  max-width: 100%;
  min-height: calc(var(--hand-card-h) + 18px);
  margin: 6px auto 4px;
  position: relative;
  z-index: 30;
  perspective: 1200px;
  overflow: visible;
  box-sizing: border-box;
  padding: 0 clamp(10px, 2.6%, 22px);

  /* Paramètres dynamiques de la main : la main de 7 cartes couvre exactement la largeur du stepboard sans déborder */
  --hand-card-w: clamp(66px, calc(var(--board-width) * 0.165), 122px);
  --hand-card-h: calc(var(--hand-card-w) * 1.45);
  --hand-card-step: calc((100% - var(--hand-card-w)) / 6);
}

#playerCards.hand-few,
#playerCards.hand-medium,
#playerCards.hand-many {
  --hand-card-step: calc((100% - var(--hand-card-w)) / 6);
}

.card {
  width: calc((100vw / 6) - 12px);
  max-width: var(--card-width);
  aspect-ratio: var(--card-aspect-ratio);
  border: none;
  display: flex;
  margin: 4px;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.7);
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.15), box-shadow 0.28s ease, filter 0.2s ease, border-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Cartes disposées en éventail ("Hand Fan") comme dans les mains --- */
.card.in-fan {
  width: var(--hand-card-w);
  height: var(--hand-card-h);
  aspect-ratio: var(--card-aspect-ratio);
  flex-shrink: 0;
  margin: 0 !important;
  margin-left: calc(var(--hand-card-step) - var(--hand-card-w)) !important;
  transform-origin: bottom center;
  transform: translateY(var(--fan-y, 0px)) rotate(var(--fan-angle, 0deg));
  box-shadow: -4px 8px 18px rgba(0, 0, 0, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}

.card.in-fan:first-child {
  margin-left: 0 !important;
}

/* Survol de carte : s'élève au premier plan et se redresse verticalement */
.card.in-fan:hover {
  transform: translateY(-46px) rotate(0deg) scale(1.14) !important;
  z-index: 100 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 24px rgba(212, 175, 55, 0.8) !important;
  border-color: var(--gold-highlight);
  filter: brightness(1.12);
}

/* Carte sélectionnée dans l'éventail : élévation franche de 16px, bordure émeraude vive à haut contraste */
.card.in-fan.selected {
  transform: translateY(calc(var(--fan-y, 0px) - 16px)) rotate(var(--fan-angle, 0deg)) !important;
  border: 2.5px solid #00e676 !important;
  box-shadow: 0 0 0 2px rgba(10, 38, 16, 0.95), 0 8px 24px rgba(0, 230, 118, 0.65), 0 0 16px rgba(0, 230, 118, 0.8) !important;
  filter: brightness(1.15) contrast(1.05) !important;
}


/* Rangement en dessous : quand la carte sélectionnée n'est PAS survolée, elle conserve son z-index naturel dans l'éventail */
.card.in-fan.selected:not(:hover) {
  /* Aucun z-index forcé : elle reste sous la carte suivante */
}

/* Carte sélectionnée et survolée : passe au tout premier plan pour inspection */
.card.in-fan.selected:hover {
  transform: translateY(-46px) rotate(0deg) scale(1.14) !important;
  z-index: 100 !important;
  border-color: #00e676 !important;
  box-shadow: 0 0 0 2px rgba(10, 38, 16, 0.95), 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 28px rgba(0, 230, 118, 0.95) !important;
  filter: brightness(1.2) contrast(1.05) !important;
}

/* Comportement par défaut pour les cartes hors éventail (ex: grille ou inventaire) */
.card:not(.in-fan):hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

.card:not(.in-fan).selected {
  box-shadow: 0 0 0 3px #4CAF50, 0 14px 24px rgba(0, 0, 0, 0.75);
  transform: translateY(-18px) scale(1.06);
  filter: brightness(1.12);
}

.card.facedown {
  background-image: url('../backdeck.webp');
  background-size: cover;
}

/* Structure spécifique des cartes élémentaires avec indices stylisés */
.card.carte .card-carte {
  position: relative;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.card.carte .card-carte-num,
.card.carte .card-carte-num-rev {
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 1.3rem;
  line-height: 1.3rem;
  color: #ffffff;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.9), 0px 0px 1px #ffffff;
  text-align: center;
  font-family: var(--font-carte-num);
  user-select: none;
}

.card.carte .card-carte-num-rev {
  left: initial;
  top: initial;
  right: 6px;
  bottom: 6px;
  transform: rotate(180deg);
}

/* Coin supérieur droit du stepboard : piles Deck et Défausse côte à côte */
.step-deck-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.8cqw, 12px);
  z-index: 15;
  pointer-events: auto;
}

/* Piles de pioche et de défausse */
.pile {
  width: clamp(34px, 5.5vw, 48px);
  width: clamp(34px, 7cqw, 48px);
  aspect-ratio: var(--card-aspect-ratio);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  background-image: url('../backdeck.webp');
  background-size: cover;
  background-position: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: var(--font1);
  font-size: clamp(0.75rem, 2cqw, 0.9rem);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  margin: 0;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease;
}

.pile:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 215, 0, 0.4), 0 0 0 1px rgba(255, 215, 0, 0.6);
}

#deck::after {
  content: "Deck";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.6rem, 1.4cqw, 0.7rem);
  font-weight: 600;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
}

#discardPile::after {
  content: "Défausse";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.6rem, 1.4cqw, 0.7rem);
  font-weight: 600;
  color: #f1f5f9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
}

/* Animations d'entrée */
.card.fade-in {
  animation: cardFadeIn 0.3s ease forwards;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animation de Défausse : envol vers le haut à droite et fondu vers la pile */
.card.in-fan.discarding {
  animation: cardDiscardFly 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
  pointer-events: none !important;
  z-index: 95 !important;
}

@keyframes cardDiscardFly {
  0% {
    transform: translateY(calc(var(--fan-y, 0px) - 6px)) rotate(var(--fan-angle, 0deg)) scale(1);
    opacity: 1;
    filter: brightness(1.1);
  }
  30% {
    transform: translateY(-28px) rotate(calc(var(--fan-angle, 0deg) + 8deg)) scale(1.06);
    opacity: 0.95;
    filter: brightness(1.25);
  }
  100% {
    transform: translate(90px, -180px) rotate(25deg) scale(0.35);
    opacity: 0;
    filter: brightness(0.6);
  }
}

/* Effet pop sur la pile de défausse lors de la réception */
.pile.pop {
  transform: scale(1.14);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.8);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Responsive Mobile : adaptation optimale de l'éventail sans débordement */
@media (max-width: 600px) {
  #playerCards {
    min-height: calc(var(--hand-card-h) + 16px);
    margin: 4px auto 2px;
    padding: 0 clamp(8px, 2.4%, 14px);
    --hand-card-w: clamp(60px, calc(var(--board-width) * 0.18), 74px);
    --hand-card-step: calc((100% - var(--hand-card-w)) / 6);
  }

  #playerCards.hand-few,
  #playerCards.hand-medium,
  #playerCards.hand-many {
    --hand-card-step: calc((100% - var(--hand-card-w)) / 6);
  }

  .card.carte .card-carte-num,
  .card.carte .card-carte-num-rev {
    font-size: 1.15rem;
    line-height: 1.15rem;
    left: 5px;
    top: 5px;
  }

  .card.carte .card-carte-num-rev {
    left: initial;
    top: initial;
    right: 5px;
    bottom: 5px;
  }

  .card.in-fan:hover,
  .card.in-fan.selected:hover {
    transform: translateY(-30px) rotate(0deg) scale(1.1) !important;
  }
}

/* Responsive Desktop */
@media (min-width: 601px) {
  .card {
    width: 140px;
    border-radius: 12px;
  }

  .card.carte .card-carte-num,
  .card.carte .card-carte-num-rev {
    font-size: 1.7rem;
    line-height: 1.7rem;
    left: 8px;
    top: 8px;
  }

  .card.carte .card-carte-num-rev {
    left: initial;
    top: initial;
    right: 8px;
    bottom: 8px;
  }
}