.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, margin-top 0.2s ease, opacity 0.2s ease;
  box-shadow: var(--shadow-sm);
  will-change: transform;
}

.card img,
.card .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Playable card glow — BOLD and unmissable */
.card.playable {
  box-shadow:
    0 0 12px rgba(0, 229, 255, 0.5),
    0 0 28px rgba(0, 229, 255, 0.2),
    0 0 4px rgba(255, 255, 255, 0.3),
    var(--shadow-sm);
  border: 2px solid rgba(0, 229, 255, 0.6);
  animation: cardPlayableGlow 1.5s ease-in-out infinite;
  filter: brightness(1.1);
}

.card.playable:active {
  transform: translateY(-16px) scale(1.06);
  box-shadow:
    0 0 22px rgba(0, 229, 255, 0.7),
    0 0 44px rgba(0, 229, 255, 0.25),
    var(--shadow-md);
}

@media (hover: hover) {
  .card.playable:hover {
    box-shadow:
      0 0 22px rgba(0, 229, 255, 0.7),
      0 0 44px rgba(0, 229, 255, 0.25),
      var(--shadow-md);
  }
}

/* Non-playable cards — clearly dimmed */
.card.not-playable {
  opacity: 0.4;
  filter: brightness(0.55) saturate(0.6) grayscale(0.2);
  cursor: not-allowed;
  border: 2px solid transparent;
}

@keyframes cardPlayableGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4), 0 0 24px rgba(0, 229, 255, 0.15), var(--shadow-sm);
    border-color: rgba(0, 229, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.7), 0 0 36px rgba(0, 229, 255, 0.25), var(--shadow-sm);
    border-color: rgba(0, 229, 255, 0.8);
  }
}

/* Card in hand — fan with slight rotation */
#player-hand {
  perspective: 800px;
}

.hand-card {
  transform-origin: bottom center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), margin-left 0.2s ease, margin-top 0.2s ease;
}

/* Card play animation */
.card.card-playing {
  animation: cardPlay 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cardPlay {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(0.75) translateY(-50px) rotate(8deg); opacity: 0.85; }
  100% { transform: scale(0.3) translateY(-90px) rotate(15deg); opacity: 0; }
}

/* Card draw animation */
.card.card-drawing {
  animation: cardDraw 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cardDraw {
  0% { transform: scale(0.3) translateY(-70px) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
}

/* Card back */
.card-back {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Discard pile top card */
.discard-top {
  width: calc(var(--card-w) * 1.25);
  height: calc(var(--card-h) * 1.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.discard-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Drawn card display */
.drawn-card-preview {
  width: calc(var(--card-w) * 1.6);
  height: calc(var(--card-h) * 1.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 229, 255, 0.15);
  margin: var(--space-md) auto;
}

.drawn-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}