/* GOTO Tourneys — card sizing & layout. Pairs with js/cards.js + cardmeister.
   Faces render as a <playing-card> element (containing an <img> of the card
   SVG); backs render as an inline <svg>. We size the slot and let the child
   fill it; drop-shadow traces the rounded card silhouette so corners match. */

.card {
  position: relative;
  width: 64px;
  height: 90px;
  flex: 0 0 auto;
  display: inline-block;
  line-height: 0;
}

/* The child is either <playing-card> (face) or <svg> (back) */
.card > playing-card,
.card > svg {
  display: block !important;
  width: 100%;
  height: 100%;
}
.card > playing-card img,
.card > svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 7px 13px rgba(0, 0, 0, .5));
}

/* Opponent hand — slightly smaller, overlapped */
.opponent-hand .card { width: 60px; height: 84px; margin-left: -5px; }
.opponent-hand .card:first-child { margin-left: 0; }

/* Your hand — fanned, keeping the per-card --r rotation from the markup */
.your-hand .card {
  margin-left: -4px;
  transform-origin: bottom center;
  transform: rotate(var(--r, 0deg));
  transition: transform .16s ease;
}
.your-hand .card:first-child { margin-left: 0; }
.your-hand .card:hover {
  transform: translateY(-18px) rotate(var(--r, 0deg));
  z-index: 6;
}
.your-hand .card:hover > playing-card img,
.your-hand .card:hover > svg {
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55));
}

/* Stock + discard piles reuse the centring the old .deck/.playing-card had */
.pile-block .card { margin: 0 auto 9px; }

/* Stock shows a stacked-deck edge behind the top back card */
.card.is-stock::before,
.card.is-stock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: #0a1d3d;
  border: 1px solid rgba(219, 229, 248, .35);
  z-index: -1;
}
.card.is-stock::before { transform: translate(3px, 3px); }
.card.is-stock::after { transform: translate(6px, 6px); }

@media (max-width: 680px) {
  .card { width: 46px; height: 65px; }
  .opponent-hand .card { width: 42px; height: 59px; margin-left: -6px; }
  .your-hand .card { margin-left: -6px; }
  .your-hand .card:hover { transform: translateY(-12px) rotate(var(--r, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .your-hand .card { transition: none; }
}

/* Mini cards — used for the "cards in play" preview on lobby live tables */
.card.mini { width: 40px; height: 56px; }

.table-cards {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.table-cards .card {
  margin-left: -12px;
  transform-origin: bottom center;
  transform: rotate(var(--r, 0deg));
}
.table-cards .card:first-child { margin-left: 0; }

@media (max-width: 680px) {
  .card.mini { width: 34px; height: 48px; }
}