/* Cards, and your hand (see hand.js). The computers' fans are in table.css. */

/* Cards: big and chunky for small hands. The images include the white border. */
.card {
  display: block;
  width: var(--card-width);
  /* the card pictures' shape, so a card has its height before its picture loads */
  aspect-ratio: var(--card-image-width) / var(--card-image-height);
  border-radius: 7px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

/* Your hand */
.hand {
  position: relative; /* so the drag code can measure where the cards sit */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 16px;
}

/* In the hand: every card lifts on hover */
.hand .card { cursor: pointer; transition: transform 0.15s, filter 0.15s, box-shadow 0.15s; }
.hand .card:hover { transform: translateY(-12px); }

/* During the computers' turns your cards don't respond, except ones that can interrupt */
.hand.out-of-turn .card:not(.playable) { cursor: default; }
.hand.out-of-turn .card:not(.playable):hover { transform: none; }

/* With "Show playable cards" on: playable cards stand up and glow, the rest are dimmed */
.hand.show-hints .card { filter: brightness(0.6); }
.hand.show-hints .card:hover { transform: none; }
.hand.show-hints .card.playable {
  filter: none;
  transform: translateY(-14px);
  box-shadow: 0 0 0 4px var(--yellow), 0 10px 18px rgba(0, 0, 0, 0.5);
}
.hand.show-hints .card.playable:hover { transform: translateY(-22px); }
/* A card that can evolve the top card glows purple instead */
.hand.show-hints .card.playable.evolves { box-shadow: 0 0 0 4px var(--evolve-glow), 0 0 22px 6px rgba(183, 124, 255, 0.7); }

/* Dragging a card to play it (see drag/). Touching a card picks it up instead of scrolling. */
.hand .card { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* The card's place in your hand while it's being dragged */
.hand .card.dragging { opacity: 0.3; }
/* Where a card you're pulling off the deck would go in your hand */
.hand .card.draw-gap { opacity: 0.3; }

@media (max-width: 640px) {
  .card { border-radius: 5px; }
}