/* cards.css — what is PRINTED on a standard playing card. Shared by every Deckades game.
 *
 * The companion to core/cards/cards.js; read the contract at the top of that file first. The
 * short version: this file styles the inside of a card and nothing else. It never sets the
 * card's position, size, radius, face background or state look — those belong to the game,
 * which also has to declare `--card-w` and make the card a positioning context.
 *
 * Every size below derives from `--card-w`, so a zone that overrides that variable (a smaller
 * stack, an opponent's hand) gets a correctly scaled face for free.
 *
 * Tokens a game may re-declare:
 *   --dk-card-red     ink for hearts and diamonds
 *   --dk-card-black   ink for clubs and spades
 *   --dk-card-font    the index and court letter face
 */

.dk-face.dk-red   { color: var(--dk-card-red, #7a1f2b); }
.dk-face.dk-black { color: var(--dk-card-black, #1a1a1a); }

/* ── Corner index: rank over suit, repeated upside down ───────────────────────
 * Percentages, not container units: a card is not a container, so `cqh` here would resolve
 * against some ancestor and silently size every card on the table the same. */
.dk-face .dk-corner {
    position: absolute;
    text-align: center;
    line-height: 0.9;
    font-weight: 700;
}
.dk-face .dk-tl { top: 6%; left: 7%; }
.dk-face .dk-br { bottom: 6%; right: 7%; transform: rotate(180deg); }
.dk-face .dk-rank {
    display: block;
    font-family: var(--dk-card-font, "Playfair Display", Georgia, serif);
    font-weight: 800;
    font-size: calc(var(--card-w) * 0.24);
}
.dk-face .dk-suit {
    display: block;
    font-size: calc(var(--card-w) * 0.20);
    margin-top: 3%;
}
/* The ten is the only two-glyph index on the card. Left at the width of every other rank it
   either overhangs the corner or crowds the pips, so it is set smaller and tracked tighter. */
.dk-face[data-rank="10"] .dk-rank {
    font-size: calc(var(--card-w) * 0.215);
    letter-spacing: -0.055em;
}

/* ── The middle of the card ───────────────────────────────────────────────────
 * Two layers, only ever one of them visible: the pip layout, and a single big suit glyph for
 * compact mode. Both are always in the markup so the switch costs no repaint. */
.dk-face .dk-centre { position: absolute; inset: 0; pointer-events: none; }
.dk-face .dk-pips { position: absolute; inset: 0; }
.dk-face .dk-glyph { display: none; }

.dk-face .dk-pip {
    position: absolute;
    font-weight: 700;
    line-height: 1;
    font-size: calc(var(--card-w) * 0.24);
}
.dk-face .dk-ace {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: calc(var(--card-w) * 0.74);
}
.dk-face .dk-court {
    position: absolute; inset: 12%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4%;
}
.dk-face .dk-court-rank {
    font-family: var(--dk-card-font, "Playfair Display", Georgia, serif);
    font-weight: 800;
    font-size: calc(var(--card-w) * 0.44);
    line-height: 1;
}
.dk-face .dk-court-suit {
    font-weight: 700;
    font-size: calc(var(--card-w) * 0.46);
    line-height: 1;
}

/* ── Compact mode ─────────────────────────────────────────────────────────────
 * Pips stop being readable somewhere around a 46px card, and a crowded table on a phone goes
 * well below that. Below `.dk-cards-compact` the pips give way to one centred suit and the
 * corner index grows to carry the rank by itself. */
.dk-cards-compact .dk-face .dk-pips { display: none; }
.dk-cards-compact .dk-face .dk-glyph {
    display: flex;
    position: absolute; inset: 0;
    align-items: center; justify-content: center;
    font-size: calc(var(--card-w) * 0.52);
    opacity: 0.92;
}
.dk-cards-compact .dk-face .dk-rank { font-size: calc(var(--card-w) * 0.30); }
.dk-cards-compact .dk-face .dk-suit { font-size: calc(var(--card-w) * 0.26); }
.dk-cards-compact .dk-face[data-rank="10"] .dk-rank {
    font-size: calc(var(--card-w) * 0.255);
}

/* ── The back ─────────────────────────────────────────────────────────────────
 * Gold mandala on wine (cardback.webp — WebP with alpha, ~6x smaller than the same PNG). The
 * art is pre-cropped to CARD_RATIO and its rounded corners are baked into the alpha channel,
 * so it maps 1:1 with `100% 100%` — cropping would slice those corners off. This is the one
 * place the shared deck does paint over the game's card background, because a back has no
 * face to show. */
.dk-back {
    background: url('cardback.webp') center / 100% 100% no-repeat;
    border: none;
    color: transparent;
}
.dk-back::before, .dk-back::after { content: none; }