/* Player Styles */
/* Defines the player’s visual look and subtle animations */

:root {
  --player-size: 28px; /* slightly smaller than tile for padding */
}

/* Player base */
.player {
  width: var(--player-size);
  height: var(--player-size);
  background: var(--color-player-fill);
  border-radius: 6px;
  box-shadow:
    0 0 10px 2px var(--color-player-glow),
    inset 0 3px 8px rgba(255 204 0, 0.8);
  transition: box-shadow 0.3s ease;
  position: relative;
  user-select: none;
}

/* Player glow pulse animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0 10px 2px var(--color-player-glow),
      inset 0 3px 8px rgba(255 204 0, 0.8);
  }
  50% {
    box-shadow:
      0 0 18px 6px var(--color-player-glow),
      inset 0 4px 10px rgba(255 224 80, 1);
  }
}

.player.pulse {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* Optional: add subtle movement bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.player.bounce {
  animation: bounce 1.2s ease-in-out infinite;
}