/* card.css — how a card face looks. Markup: render/card-render.js.
   Sizes follow the card: the page sets --cw and --ch (px) on each card's
   wrapper, so one rule fits a 56×80 opponent card and a 66×94 board card.
   Ink follows the face's `data-suit`; which colour a suit wears under the
   two- or four-colour deck is decided in styles/tokens.css off the root's
   `data-deck`. Colours are tokens. */

.card-face {
  /* layout */
  width: 100%; height: 100%;
  /* content */
  display: grid;
  border-radius: 7px;
  background: transparent;
  backface-visibility: hidden;
  grid-template-areas:
    "nw dn ne"
    "dw c  de"
    "sw ds se";

  /* text */
  line-height: 1;
}

.card-glyph {
  font-family: 'Instrument Serif', 'Georgia', serif; line-height: 1;
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  /* Canvas units, not vh: the face sits inside the play area's transform
     scale and the stage's zoom, so a vh length would be scaled by both and
     shrink as the window does. --ch is the card's own height, set per card
     by the page, and already carries every factor. 0.3 is the original rank
     size (28.2px on a 94px card). */
  font-size: calc(var(--ch) * 0.3);
}

/* the suit svg sits in the glyph span and is sized BY the span's font-size,
   so every font-size rule in this sheet keeps working unchanged */
.suit-glyph { display: none; width: 1em; height: 1em; fill: currentColor; }
/* The character is what shows until the symbols are KNOWN to be in the
   document: the page's loader sets data-suits="svg" on the root only after
   all four #suit-x ids resolve. A failed or slow fetch therefore leaves a
   readable suit, never an empty corner. Times New Roman is the face the
   symbols were traced from. */
.suit-utf { font-family: 'Times New Roman', Times, serif; line-height: 1; }
:root[data-suits="svg"] .suit-glyph { display: block; }
:root[data-suits="svg"] .suit-utf { display: none; }

.card-nw { grid-area: nw; }
.card-ne { grid-area: ne; }
.card-sw { grid-area: sw; }
.card-se { grid-area: se; }

/* THE INK, for everything that draws a suit. Two users wear these attributes:
   the card face (render/card-render.js) and the settings deck preview, whose
   whole job is to show the inks the felt is about to use — it used to paint
   itself from a second copy of these colours in the page's logic block, which
   is one hand-copy away from a preview that argues against itself. One
   selector list, so a suit cannot be two colours. */
:is(.card-face, .suit-ink) { color: var(--suit-s); }
:is(.card-face, .suit-ink)[data-suit="h"] { color: var(--suit-h); }
:is(.card-face, .suit-ink)[data-suit="d"] { color: var(--suit-d); }
:is(.card-face, .suit-ink)[data-suit="c"] { color: var(--suit-c); }

/* show or muck: a card the hero has armed to show, before committing */
.card-face[data-armed="1"] { outline: 2px solid var(--brass); outline-offset: -2px; border-radius: 7px; }
/* a card the table has seen: the hero showed it */
.card-face[data-tabled="1"] { box-shadow: 0 0 0 2px var(--brass), 0 0 24px 6px rgba(201, 169, 97, .45); border-radius: 7px; }
/* ghost: the hero's own folded card — present, dead. Deep-felt ground; the
   glyphs go paper so they stay legible on it (dark ground, light ink). */
.card-face[data-ghost="1"] { background: var(--ink); border-radius: 7px; }
.card-face[data-ghost="1"] .card-glyph { color: var(--paper); }