/* Playing cards: faces, and the five selectable backs. */

:root {
  --card-w: clamp(58px, 17vw, 92px);
  --card-h: calc(var(--card-w) * 1.4);
  --card-radius: 8px;
}

.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  position: relative;
  flex: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background: #fdfdf8;
  color: #16161a;
  overflow: hidden;
  font-size: calc(var(--card-w) * 0.19);
  transition: transform 130ms ease, box-shadow 130ms ease;
}

/* ---------- faces ---------- */

.card__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.98;
  font-weight: 750;
}
.card__corner--tl { top: 5%; left: 7%; }
.card__corner--br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.card__corner i { font-style: normal; font-size: 0.92em; }

.card__pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--card-w) * 0.45);
  line-height: 1;
}

.card[data-suit="H"], .card[data-suit="D"] { color: #c92a2a; }
.card[data-suit="S"], .card[data-suit="C"] { color: #16161a; }

/* Court cards get a tinted panel so they read as different at a glance. */
.card.is-court .card__pip { font-size: calc(var(--card-w) * 0.34); }
.card.is-court::before {
  content: "";
  position: absolute;
  inset: 17% 16%;
  border: 1px solid currentColor;
  opacity: 0.28;
  border-radius: 3px;
}

.card.is-ace .card__pip { font-size: calc(var(--card-w) * 0.55); }

/* interactive states for the player's own hand */
.card--button {
  cursor: pointer;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.card--button:hover:not(:disabled) { transform: translateY(-9px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45); }
.card--button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.card--button:disabled { cursor: default; }
.card--button.is-blocked { opacity: 0.45; }
.card.is-selected { transform: translateY(-12px); box-shadow: 0 0 0 3px var(--gold), 0 12px 22px rgba(0, 0, 0, 0.5); }
.card.is-new { animation: dealt 260ms ease; }
@keyframes dealt {
  from { transform: translateY(-18px) scale(0.94); opacity: 0; }
}

/* ---------- backs ---------- */

.card--back { background: #123; }
.card--back::after {
  /* Uniform inner border on every back design. */
  content: "";
  position: absolute;
  inset: 6%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--card-radius) - 3px);
  pointer-events: none;
}

/* 1. Classic Red - crosshatch lattice */
.back-classic {
  background-color: #a4172a;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.22) 0 1.5px, transparent 1.5px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.22) 0 1.5px, transparent 1.5px 7px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16) 0%, transparent 62%);
}

/* 2. Midnight - navy with gold lattice */
.back-midnight {
  background-color: #101c3d;
  background-image:
    repeating-linear-gradient(0deg, rgba(233,196,106,0.3) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(233,196,106,0.3) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 40%, rgba(233,196,106,0.28) 0%, transparent 55%);
}

/* 3. Forest - green basket weave */
.back-forest {
  background-color: #17503a;
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,0.14) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-60deg, rgba(0,0,0,0.22) 0 3px, transparent 3px 9px);
}

/* 4. Sunset - warm rays */
.back-sunset {
  background-color: #c4562a;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,214,150,0.4) 0deg 9deg, transparent 9deg 18deg),
    radial-gradient(circle at 50% 50%, #f4a259 0%, #b83c2c 78%);
}

/* 5. Circuit - slate with cyan traces */
.back-circuit {
  background-color: #1b2430;
  background-image:
    repeating-linear-gradient(90deg, rgba(94,215,224,0.3) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(0deg, rgba(94,215,224,0.16) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 25% 25%, rgba(94,215,224,0.5) 0 2px, transparent 2.5px),
    radial-gradient(circle at 75% 75%, rgba(94,215,224,0.5) 0 2px, transparent 2.5px);
}

/* Stacked look for the draw pile. */
.pile__slot .card--back { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 3px 3px 0 -1px rgba(0,0,0,0.35), 6px 6px 0 -2px rgba(0,0,0,0.28); }

.card--tappable { cursor: pointer; border: 0; padding: 0; }
.card--tappable:hover:not(:disabled) { transform: translateY(-5px); }
.card--tappable:disabled { cursor: default; filter: saturate(0.65) brightness(0.85); }
.card--tappable:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }