/* === Card Design (CSS-only with Unicode Suits) === */
/* Fully dynamic sizing — vmin scales with the smaller viewport dimension */
.card {
  width: clamp(40px, 6vmin, 90px);
  height: clamp(56px, 8.4vmin, 125px);
  border-radius: clamp(4px, 0.6vmin, 8px);
  font-family: 'Inter', sans-serif;
  position: relative;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

/* Human cards: larger for readability */
.seat-0 .card {
  width: clamp(52px, 7.5vmin, 105px);
  height: clamp(72px, 10.5vmin, 146px);
}

.seat-0 .card:hover {
  transform: translateY(-4px);
}

/* Touch devices: no hover lift */
@media (hover: none) {
  .seat-0 .card:hover { transform: none; }
}

/* === Card Face === */
.card-face {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #ffffff, #f0f0e8);
  border-radius: inherit;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2px, 0.3vmin, 4px) clamp(3px, 0.4vmin, 5px);
  cursor: default;
  animation: cardDeal 0.3s ease-out;
}

@keyframes cardDeal {
  from { transform: scale(0.5) translateY(-20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.card-face.no-anim {
  animation: none;
}

.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.card-corner-bottom {
  align-self: flex-end;
  transform: rotate(180deg);
}

.card-rank {
  font-size: clamp(0.65em, 1.1vmin, 1.3em);
  font-weight: 800;
}

.card-suit-small {
  font-size: clamp(0.45em, 0.75vmin, 0.95em);
  line-height: 1;
}

.card-center {
  font-size: clamp(1em, 1.8vmin, 2.5em);
  text-align: center;
  line-height: 1;
}

/* Suit Colors */
.card-face.hearts .card-rank,
.card-face.hearts .card-suit-small,
.card-face.hearts .card-center,
.card-face.diamonds .card-rank,
.card-face.diamonds .card-suit-small,
.card-face.diamonds .card-center {
  color: #dc2626;
}

.card-face.spades .card-rank,
.card-face.spades .card-suit-small,
.card-face.spades .card-center,
.card-face.clubs .card-rank,
.card-face.clubs .card-suit-small,
.card-face.clubs .card-center {
  color: #1a1a2e;
}

/* === Card Back === */
.card-back {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #c0392b, #8e2420);
  border: 2px solid #a83228;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}

.card-back::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.2);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,.05) 3px,
    rgba(255,255,255,.05) 6px
  );
}

.card-back::after {
  content: '♠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.7em, 1vmin, 1.2em);
  color: rgba(255,255,255,.2);
}

/* Opponent cards */
.card-sm {
  width: clamp(28px, 4.2vmin, 64px);
  height: clamp(40px, 5.9vmin, 90px);
  border-radius: clamp(3px, 0.5vmin, 6px);
}

.card-sm .card-back::after {
  font-size: clamp(0.55em, 0.85vmin, 1em);
}

.card-sm .card-face {
  padding: clamp(1px, 0.25vmin, 3px) clamp(2px, 0.35vmin, 4px);
}

.card-sm .card-rank { font-size: clamp(0.5em, 0.8vmin, 1em); }
.card-sm .card-suit-small { font-size: clamp(0.35em, 0.55vmin, 0.7em); }
.card-sm .card-center { font-size: clamp(0.75em, 1.2vmin, 1.5em); }

/* === Reveal animation === */
.card-reveal {
  animation: cardFlip 0.4s ease-out;
}

@keyframes cardFlip {
  0% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

/* === Winner highlight === */
.card-winner .card-face {
  box-shadow: 0 0 14px rgba(255,215,0,.5), 0 2px 6px rgba(0,0,0,.2);
  border-color: var(--gold);
}

/* === Folded cards === */
.card-folded {
  opacity: 0.3;
  transform: scale(0.85);
}

.player-cards { gap: clamp(1px, 0.3vmin, 3px); }