/* ---------------------------------------------------------------------------
   Playing cards, drawn in CSS with the full anatomy of a real card:
   an index (rank over suit) in the TOP-LEFT and the SAME index rotated 180
   degrees in the BOTTOM-RIGHT, plus the suit in the middle. Every size is
   driven by --w, so one number scales the whole card.
--------------------------------------------------------------------------- */
.card{
  --w:74px;
  position:relative;flex:0 0 auto;
  width:var(--w);height:calc(var(--w) * 1.42);
  border-radius:calc(var(--w) * .09);
  background:linear-gradient(168deg,#fff 0%,#fbfcfd 58%,#eef1f5 100%);
  color:var(--card-ink);
  box-shadow:
    0 0 0 1px var(--card-edge),
    0 1px 1px rgba(16,34,48,.06),
    0 6px 14px rgba(16,34,48,.10);
  overflow:hidden;
}
.card .ix{
  position:absolute;top:calc(var(--w) * .085);left:calc(var(--w) * .09);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--w) * .01);
  font-family:var(--body);font-weight:700;line-height:.95;letter-spacing:-.04em;
}
.card .ix.br{top:auto;left:auto;bottom:calc(var(--w) * .085);right:calc(var(--w) * .09);
  transform:rotate(180deg)}
.card .ix .r{font-size:calc(var(--w) * .25)}
.card .ix .s{font-size:calc(var(--w) * .195);line-height:1}
.card .mid{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:calc(var(--w) * .40);line-height:1;
}
.card.red{color:var(--card-red)}
.card.sm{--w:46px}
.card.lg{--w:96px}

/* A hand: laid out side by side, never overlapping, so BOTH indexes on every
   card stay visible - top-left and the upside-down one bottom-right. */
.hand{display:flex;align-items:center;gap:4px}