.card {
  width: clamp(62px, 5.6vw, 84px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(22, 22, 22, 0.22);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease, filter 120ms ease;
  cursor: pointer;
  flex: 0 0 auto;
}

.card.playable:hover {
  transform: translateY(-12px) rotate(-1deg) scale(1.02) !important;
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.28),
    0 0 0 4px rgba(255, 210, 26, 0.5) !important;
  z-index: 3;
}

.card.selected {
  transform: translateY(-24px) rotate(-2deg) scale(1.05) !important;
  box-shadow:
    0 24px 40px rgba(0, 0, 0, 0.38),
    0 0 0 6px rgba(95, 213, 255, 0.82) !important;
  z-index: 10 !important;
}

.card.not-playable {
  opacity: 0.58;
  filter: grayscale(0.08);
  cursor: default;
}

.hand-cards .card {
  position: relative;
}

.card.papayoo-card > * {
  position: relative;
  z-index: 1;
}

.card.papayoo-card.not-playable {
  opacity: 0.64;
  filter: saturate(0.92);
}

.card.papayoo-card.playable:hover {
  transform: translateY(-12px) rotate(-1deg) scale(1.02) !important;
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.30),
    0 0 0 4px rgba(255, 210, 26, 0.55) !important;
  z-index: 4;
}