/* French-deck playing cards (public/js/cards-ui.js) — shared by the big screen
   and the phones. Everything scales from --card-w, set by the container. */

.pcard {
  --card-w: 80px;
  --pcard-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 calc(var(--card-w) * 0.04) calc(var(--card-w) * 0.14) rgba(0, 0, 0, 0.5);
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  position: relative;
  perspective: calc(var(--card-w) * 14);
  flex-shrink: 0;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.5s var(--p-motion-ease), opacity 0.5s var(--p-motion-ease), filter 0.5s var(--p-motion-ease);
}
.pcard__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.3, 0.7, 0.25, 1);
}
.pcard.is-up .pcard__inner { transform: rotateY(180deg); }

.pcard__face {
  position: absolute; inset: 0;
  border-radius: calc(var(--card-w) * 0.075);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: var(--pcard-shadow);
}

/* ---------- front ---------- */
.pcard__front {
  transform: rotateY(180deg);
  background: linear-gradient(155deg, #fffef9 0%, #f8f4ea 55%, #efe8d8 100%);
  color: #1c1c25;
}
.pcard--red .pcard__front { color: #c8122c; }

.pcard__corner {
  position: absolute; top: 3.5%; left: 6%;
  display: flex; flex-direction: column; align-items: center;
  line-height: 0.88;
  font-weight: 700;
  font-size: calc(var(--card-w) * 0.24);
  letter-spacing: -0.03em;
}
.pcard__corner svg { width: calc(var(--card-w) * 0.16); height: auto; margin-top: 6%; fill: currentColor; }
.pcard__corner--br { top: auto; left: auto; bottom: 3.5%; right: 6%; transform: rotate(180deg); }

.pcard__pips { position: absolute; inset: 11% 21%; }
.pcard__pip {
  position: absolute;
  width: calc(var(--card-w) * 0.215);
  transform: translate(-50%, -50%);
  display: block; line-height: 0;
}
.pcard__pip svg { width: 100%; height: auto; fill: currentColor; display: block; }
.pcard__pip--flip { transform: translate(-50%, -50%) rotate(180deg); }
.pcard__pip--ace { width: calc(var(--card-w) * 0.52); }
.pcard__pips--ace-spades .pcard__pip--ace { width: calc(var(--card-w) * 0.6); }
.pcard__pips--ace-spades::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--card-w) * 0.7); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 74, 0.9);
  box-shadow: 0 0 0 calc(var(--card-w) * 0.02) rgba(201, 162, 74, 0.25);
}

/* court cards: framed panel with a crest */
.pcard__court {
  position: absolute; inset: 13% 16%;
  border: calc(var(--card-w) * 0.02) solid currentColor;
  border-radius: 3%;
  outline: 1px solid #c9a24a;
  outline-offset: calc(var(--card-w) * 0.022);
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.14) 0 50%, rgba(0, 0, 0, 0.055) 50% 100%);
  display: flex; align-items: center; justify-content: center;
}
.pcard__crest { width: 60%; height: auto; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)); }
.pcard__court .pcard__pip { width: calc(var(--card-w) * 0.15); }
.pcard__pip--court-tl { left: 15%; top: 12%; }
.pcard__pip--court-br { left: 85%; top: 88%; }

/* ---------- back ---------- */
.pcard__back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.13) 0 calc(var(--card-w) * 0.022), transparent calc(var(--card-w) * 0.022) calc(var(--card-w) * 0.1)),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.13) 0 calc(var(--card-w) * 0.022), transparent calc(var(--card-w) * 0.022) calc(var(--card-w) * 0.1)),
    linear-gradient(160deg, #8f1c33 0%, #6b1226 55%, #4a0b1a 100%);
  box-shadow:
    inset 0 0 0 calc(var(--card-w) * 0.05) #f4eee0,
    inset 0 0 0 calc(var(--card-w) * 0.066) #c9a24a,
    var(--pcard-shadow);
}
.pcard__emblem {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.pcard__emblem::before {
  content: '';
  position: absolute;
  width: 54%; aspect-ratio: 1;
  border-radius: 50%;
  border: calc(var(--card-w) * 0.018) solid rgba(255, 224, 150, 0.7);
  background: rgba(0, 0, 0, 0.18);
}
.pcard__emblem svg { width: 34%; height: auto; fill: #f1cf78; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); position: relative; }

/* ---------- states & animations ---------- */
@keyframes pcard-deal {
  from { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, -25deg)) scale(0.72); opacity: 0.25; }
  55% { opacity: 1; }
  to { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
.pcard.is-dealing { animation: pcard-deal 0.62s cubic-bezier(0.2, 0.75, 0.25, 1) both; }

@keyframes pcard-lift {
  0% { transform: scale(1); }
  45% { transform: scale(1.14) translateY(-7%); }
  100% { transform: scale(1); }
}
.pcard.is-flipping { animation: pcard-lift 0.72s ease-in-out; z-index: 3; }

.pcard.is-win { transform: translateY(-10%) scale(1.06); z-index: 2; }
.pcard.is-win .pcard__front {
  box-shadow:
    0 0 0 calc(var(--card-w) * 0.035) #ffd54a,
    0 0 calc(var(--card-w) * 0.4) calc(var(--card-w) * 0.1) rgba(255, 200, 60, 0.7),
    var(--pcard-shadow);
}
.pcard.is-dim { opacity: 0.4; filter: saturate(0.3) brightness(0.8); }

.pcard-slot {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  border-radius: calc(var(--card-w) * 0.075);
  border: 2px dashed rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}