/* === HEART TOKENS === */
/* Visual turn counter - hearts disappear as turns are used */

.stat-hearts-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-hearts-container .stat-label {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 12px;
  color: var(--storybook-brown-deep);
}

.stat-hearts {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 168px;
  justify-content: center;
  align-items: center;
}

.heart {
  font-size: 18px;
  line-height: 1;
  transition: all 0.3s ease;
  display: inline-block;
}

/* Full heart - active turn */
.heart.full {
  color: #e74c3c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: scale(1);
  opacity: 1;
}

/* Empty heart - used turn */
.heart.empty {
  color: #ccc;
  transform: scale(0.7);
  opacity: 0.4;
}

/* Danger state - last 5 hearts pulse */
.heart.danger {
  color: #c0392b;
  animation: heartBeat 0.5s ease-in-out infinite;
}

@keyframes heartBeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Bonus turn gained - pop animation */
.heart.gained {
  animation: heartPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes heartPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Heart lost animation */
.heart.lost {
  animation: heartLost 0.3s ease-out forwards;
}

@keyframes heartLost {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
    color: #e74c3c;
  }
  100% {
    transform: scale(0.7);
    opacity: 0.4;
    color: #ccc;
  }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .stat-hearts {
    max-width: 160px;
    gap: 2px;
  }

  .heart {
    font-size: 14px;
  }

  .stat-hearts-container .stat-label {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .stat-hearts {
    max-width: 140px;
  }

  .heart {
    font-size: 12px;
  }
}