.card {
  --card-w: 72px;
  --card-h: calc(var(--card-w) * 1.5);
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
  user-select: none;
  -webkit-user-select: none;
  /* Long-pressing a card is our own gesture (peek at its info) - these two
     stop the browser's native long-press behavior (text-selection callout on
     iOS, "select text"/context menu on Android) from firing alongside it. */
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1), margin 0.15s ease, filter 0.15s ease;
}

.card-face-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.card-pack-tag {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(var(--card-w) * 0.1);
  letter-spacing: 0.05em;
  opacity: 0.85;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.hand-row .card {
  cursor: pointer;
}

.hand-row .card:hover {
  transform: translateY(-14px) scale(1.08);
  z-index: 5;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)) brightness(1.06);
}

.hand-row .card.illegal {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) grayscale(0.75) brightness(0.55);
  cursor: not-allowed;
}

.hand-row .card.illegal:hover {
  transform: none;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) grayscale(0.75) brightness(0.55);
}

.discard-pile .card {
  --card-w: 84px;
}

.give-card-grid .card {
  --card-w: 56px;
}

.give-card-grid .card:hover {
  transform: translateY(-6px) scale(1.06);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)) brightness(1.06);
  z-index: 2;
}

.give-card-grid .card.selected {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: calc(var(--card-w) * 0.12);
}

/* Mini face-down cards used to show an opponent's hand size visually - sized
   generously so the hand (and the Catch! opportunity) reads clearly at a glance. */
.mini-hand {
  display: flex;
  align-items: center;
}

.mini-hand .card {
  --card-w: 34px;
  margin-left: -20px;
  transition: none;
}

.mini-hand .card:first-child {
  margin-left: 0;
}

.mini-hand .card:hover {
  transform: none;
}

/* ---------- Card animations ---------- */
.card.card-deal-in {
  animation: cardDealIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.card.discard-pop {
  animation: discardPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cardDealIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes discardPop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-25deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.pile.draw-pile.pulse .card {
  animation: drawPilePulse 0.3s ease-out;
}

@keyframes drawPilePulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.9) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* Ghost card that visually travels between the draw pile, a hand, and the
   discard pile - see flyingCard.js. Sits above ordinary table content but
   below the always-on-top hand controls, modal, toast, and tooltip layers. */
.flying-card {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  margin: 0 !important;
  transform: translate(0, 0) scale(1);
  opacity: 1;
  transition: transform 420ms cubic-bezier(0.3, 0.55, 0.3, 1), opacity 420ms ease;
}