/*
 * shared/cards.css — the one card face, shared by phone + TV, all card games.
 * Loaded by both player/index.html and host/index.html. Colours are literal
 * (not themed) so a card always reads as a real playing card.
 *
 * Real-card anatomy: paper-white face with a hairline border, rank-over-suit
 * corner index top-left, the same index rotated 180° bottom-right, and a big
 * center suit pip. Backs are a printed lattice inside a white border frame.
 */
.cc-hand { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.cc-card { position: relative; border-radius: 9px; flex: none;
  background: linear-gradient(155deg, #ffffff 0%, #fbfaf6 55%, #f1efe8 100%);
  border: 1px solid #d9d6cc;
  box-shadow: 0 1px 0 #ffffff inset, 0 5px 12px #0006, 0 1px 3px #0004; }
.cc-card.red { color: #c9252d; }
.cc-card.black { color: #14141c; }

/* Corner indices — rank over a small suit, mirrored bottom-right. */
.cc-idx { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.cc-idx.tl { top: 5%; left: 7%; }
.cc-idx.br { bottom: 5%; right: 7%; transform: rotate(180deg); }
.cc-rank { font-weight: 900; line-height: 1; font-family: Georgia, 'Times New Roman', serif; }
.cc-rank.ten { letter-spacing: -.12em; margin-left: -.06em; }   /* '10' is two glyphs — keep it in the corner */
.cc-idx-suit { line-height: 1; margin-top: 1px; }

/* The big center pip, with a soft press-print shading. */
.cc-pip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); line-height: 1;
  text-shadow: 0 1px 0 #ffffffb0; }

/* A printed card back: burgundy lattice inside a white frame — like a real
 * casino deck (matches the burgundy table rail). */
.cc-card.back { background: #fbfaf6; border-color: #d9d6cc; }
.cc-back-pattern { position: absolute; inset: 7%; border-radius: 5px;
  background:
    repeating-linear-gradient(45deg, #ffffff26 0 2px, #ffffff00 2px 7px),
    repeating-linear-gradient(-45deg, #ffffff26 0 2px, #ffffff00 2px 7px),
    radial-gradient(circle at 50% 50%, #a03040 0 30%, #7a1f2b 100%);
  box-shadow: inset 0 0 0 1.5px #ffffff88, inset 0 0 12px #00000042; }

/* Sizes */
.cc-card.cc-xs { width: 38px; height: 54px; border-radius: 6px; }
.cc-card.cc-xs .cc-rank { font-size: 12px; } .cc-card.cc-xs .cc-idx-suit { font-size: 8px; } .cc-card.cc-xs .cc-pip { font-size: 19px; }
.cc-card.cc-sm { width: 58px; height: 82px; }
.cc-card.cc-sm .cc-rank { font-size: 17px; } .cc-card.cc-sm .cc-idx-suit { font-size: 11px; } .cc-card.cc-sm .cc-pip { font-size: 30px; }
.cc-card.cc-md { width: 70px; height: 98px; }
.cc-card.cc-md .cc-rank { font-size: 20px; } .cc-card.cc-md .cc-idx-suit { font-size: 13px; } .cc-card.cc-md .cc-pip { font-size: 38px; }
.cc-card.cc-lg { width: 104px; height: 146px; }
.cc-card.cc-lg .cc-rank { font-size: 29px; } .cc-card.cc-lg .cc-idx-suit { font-size: 19px; } .cc-card.cc-lg .cc-pip { font-size: 58px; }
.cc-card.cc-xl { width: 150px; height: 206px; }
.cc-card.cc-xl .cc-rank { font-size: 41px; } .cc-card.cc-xl .cc-idx-suit { font-size: 27px; } .cc-card.cc-xl .cc-pip { font-size: 84px; }

/* Deal / flip-in animation (used for the dealer draw + War reveal). */
.cc-card.cc-deal { animation: ccDealIn .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ccDealIn { from { transform: translateY(-14px) rotateY(60deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-card.cc-deal { animation: none; } }