/* ============================================================
   cards.css — shared playing-card face surface for the card games
   (Solitaire + Freecell). Layered on common.css, before each game's
   own stylesheet.

   ONLY the structure-independent face surface lives here — the parts
   that are byte-identical across both games (gradient, shape, ink
   colour, edge). Each game keeps its own:
     - positioning (Solitaire absolute stacks vs Freecell relative
       cascades), drop-shadow depth and transitions,
     - corner / rank / suit / centre glyph layout (the markup differs),
     - and, for Solitaire only, the face-down card backs.
   ============================================================ */

.card {
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 9px;
  background: linear-gradient(180deg, #fbf5ea 0%, var(--card) 50%, #ede2cf 100%);
  color: var(--ink);
  border: 1px solid var(--card-edge);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.card.red { color: var(--red); }