/* ---------- Cartas (HTML/CSS, sem imagens) ---------- */
.pcard {
  --w: 56px; --h: 78px; --r: 7px;
  width: var(--w); height: var(--h); border-radius: var(--r); position: relative; display: inline-block;
  background: linear-gradient(160deg, #ffffff, #f1f3f6); color: #1b1b1b;
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.08);
  font-family: 'Inter', system-ui, sans-serif; user-select: none; flex: 0 0 auto;
  transform-style: preserve-3d; backface-visibility: hidden;
}
.pcard.sm { --w: 38px; --h: 54px; --r: 5px; }
.pcard.lg { --w: 92px; --h: 128px; --r: 10px; }
.pcard.red { color: #c81e2e; }
.pcard .rk { position: absolute; top: 4px; left: 5px; font-weight: 800; font-size: calc(var(--w) * .34); line-height: 1; letter-spacing: -.03em; }
.pcard .st { position: absolute; top: calc(var(--w) * .40); left: 5px; font-size: calc(var(--w) * .26); line-height: 1; }
.pcard .big { position: absolute; right: 5px; bottom: 3px; font-size: calc(var(--w) * .62); line-height: 1; opacity: .95; }
.pcard.sm .rk { font-size: 15px; top: 3px; left: 4px; } .pcard.sm .st { font-size: 11px; top: 19px; left: 4px; } .pcard.sm .big { font-size: 20px; right: 3px; bottom: 2px; }
.pcard.back {
  background: #1f3b8a;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px), repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0,0,0,.15);
}
.pcard.back::after { content: ''; position: absolute; inset: 9px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.55); }
.pcard.back.cb-crimson { background-color: #8a1f2b; }
.pcard.back.cb-onyx { background-color: #111318; }
.pcard.back.cb-gold { background-color: #a8841c; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 12px); }
.pcard.dealt { animation: dealIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-40px) scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
.pcard.flip { animation: flipIn .45s ease both; }
@keyframes flipIn { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.pcard.win { box-shadow: 0 0 0 2px #f0cf62, 0 0 18px rgba(240,207,98,.8); transform: translateY(-6px); }
.pcard.dim { opacity: .35; filter: grayscale(.4); }