/* ============================================
   CARD - Styles de la carte
   ============================================ */

.card {
  width: 320px;
  height: 480px;
  background: white;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================
   VALEURS (coins)
   ============================================ */

.value {
  position: absolute;
  font-size: 42px;
  font-weight: bold;
  color: #00c27a;
  text-shadow: 0 0 3px #008f5c;
  transition: all 0.3s;
}

.value.top {
  top: 10px;
  left: 15px;
}

.value.bottom {
  bottom: 10px;
  right: 15px;
  transform: rotate(180deg);
}

/* ============================================
   ICÔNE CENTRALE
   ============================================ */

.stamina-icon {
  width: 150px;
  height: 150px;
  margin: 135px auto 0 auto;
  background: radial-gradient(circle, #00ffa3 0%, #00cc80 60%, #00995c 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px #00ffa3;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.bolt-svg {
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 0 4px white);
  transition: all 0.3s;
}

/* ============================================
   ICÔNE SPÉCIALE (Joker, Valet, Dame, Roi, As)
   ============================================ */

.special-icon {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 90px;
  display: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  z-index: 10;
}

.special-icon.active {
  display: block;
}

.special-icon svg {
  width: 100%;
  height: 100%;
}

.special-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: -1;
}

/* ============================================
   TEXTES
   ============================================ */

.ability-name {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 80px;
  font-size: 22px;
  font-weight: bold;
  color: #00995c;
  transition: all 0.3s;
}

.level-text {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 50px;
  font-size: 18px;
  color: #00c27a;
  transition: all 0.3s;
}