/* IGRA Vault — premium playing card art */
.vault-card {
  --card-w: 72px;
  --card-h: 100px;
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 8px;
  background: linear-gradient(160deg, #fefefe 0%, #e8ecf0 45%, #d8dee6 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.vault-card--sm { --card-w: 52px; --card-h: 72px; }
.vault-card--lg { --card-w: 88px; --card-h: 122px; }
.vault-card--deal {
  animation: vault-deal 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes vault-deal {
  from {
    opacity: 0;
    transform: translateY(-40px) rotateX(20deg) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
  }
}
.vault-card:hover:not(.vault-card--back) {
  transform: translateY(-6px) rotate(-1deg);
  z-index: 5;
}

/* suit colors */
.vault-card--red { color: #c41e3a; }
.vault-card--black { color: #1a1a2e; }

/* corners */
.vault-card__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: var(--vault-display, Georgia, serif);
  font-weight: 700;
}
.vault-card__corner--tl { top: 5px; left: 6px; }
.vault-card__corner--br {
  bottom: 5px;
  right: 6px;
  transform: rotate(180deg);
}
.vault-card__rank {
  font-size: calc(var(--card-w) * 0.22);
  letter-spacing: -0.02em;
}
.vault-card__suit {
  font-size: calc(var(--card-w) * 0.16);
  margin-top: 1px;
}

/* center pip / face */
.vault-card__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--card-w) * 0.42);
  opacity: 0.92;
}
.vault-card__face {
  font-family: var(--vault-display, Georgia, serif);
  font-size: calc(var(--card-w) * 0.38);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* pip patterns for number cards */
.vault-card__pips {
  position: absolute;
  inset: 18% 12%;
  display: grid;
  gap: 2px;
  font-size: calc(var(--card-w) * 0.11);
  place-items: center;
}
.vault-card__pips.pip-2 { grid-template-rows: 1fr 1fr; }
.vault-card__pips.pip-3 { grid-template-rows: 1fr 1fr 1fr; }
.vault-card__pips.pip-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.vault-card__pips.pip-5 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.vault-card__pips.pip-5 .pip-mid { grid-column: 1 / -1; }
.vault-card__pips.pip-6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
.vault-card__pips.pip-7,
.vault-card__pips.pip-8,
.vault-card__pips.pip-9,
.vault-card__pips.pip-10 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 1fr);
  font-size: calc(var(--card-w) * 0.09);
}

/* card back — vault pattern */
.vault-card--back {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(73, 234, 203, 0.06) 4px,
      rgba(73, 234, 203, 0.06) 8px
    ),
    linear-gradient(145deg, #0d2847 0%, #061a2e 50%, #0a2d3d 100%);
  border: 2px solid var(--vault-gold, #d4af37);
  color: var(--vault-emerald, #49eacb);
}
.vault-card--back::before {
  content: "♛";
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  font-size: calc(var(--card-w) * 0.35);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
}
.vault-card--back .vault-card__corner,
.vault-card--back .vault-card__center { display: none; }

/* hand layout */
.vault-hand {
  display: flex;
  gap: 0;
  min-height: calc(var(--card-h, 100px) + 8px);
  padding: 4px 0;
}
.vault-hand .vault-card {
  margin-left: -18px;
}
.vault-hand .vault-card:first-child { margin-left: 0; }
.vault-hand--spread .vault-card { margin-left: 8px; }
.vault-hand--spread .vault-card:first-child { margin-left: 0; }

/* suit symbols via unicode */
.suit-H::before { content: "♥"; }
.suit-D::before { content: "♦"; }
.suit-C::before { content: "♣"; }
.suit-S::before { content: "♠"; }