/*
 * The deck — structure only. Every colour, gradient and typeface comes from a
 * theme (see themes.css); nothing here hard-codes a value, which is what makes
 * a reskin a one-file change.
 *
 * As shipped the default theme is black stock with silver rules and figures
 * cut in bone.
 *
 * Suit is carried by *brightness*, not hue — what used to be red (Hearts,
 * Diamonds) is bright silver; what used to be black (Clubs, Spades) is
 * charcoal. `.is-red` still names the bright pair so the template didn't have
 * to change.
 *
 * --font-display is the one place the deck's typeface is named; everything
 * from the corner index to the name plate reads it.
 *
 * Layout stays with Tailwind in the template; everything here is the card's
 * own look. Royal art lives in royals.js and paints in `currentColor`, with
 * cut-outs in var(--card-bg) — so a card only has to set those two.
 */

/* ── bars ──────────────────────────────────────────────────────────────────
 * Health runs royal blue → violet → mauve; attack runs silver → charcoal.
 *
 * The gradient lives on the *track*, at full width, and the depleted part is
 * covered rather than the filled part being drawn. That keeps every colour
 * pinned to an absolute value — 12 health is the same violet whether the
 * enemy has 20 health or 40 — instead of the gradient rescaling as it shrinks.
 */

.bar {
  position: relative;
  height: 1.5rem;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--bar-edge);
}
.bar--health { background: var(--bar-health); }
.bar--attack { background: var(--bar-attack); }

/* Covers the depleted end of a health bar. */
.bar__void {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background: var(--bar-void);
  box-shadow: inset 1px 0 0 var(--bar-edge);
}
/* Covers the shielded end of an attack bar — blocked damage, gone dark. */
.bar__shield {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  background: var(--bar-shield);
  box-shadow: inset 1px 0 0 var(--bar-edge-strong);
}
/* The band a pending play would take away. */
.bar__ghost {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--bar-ghost);
}
.bar__ghost--shield { background: var(--bar-ghost-shield); }

/* ── stat numerals ─────────────────────────────────────────────────────── */

.stat--health          { color: var(--stat-health); }
.stat--health-preview  { color: var(--stat-health-preview); }
.stat--attack          { color: var(--stat-attack); }
.stat--attack-spent    { color: var(--stat-attack-spent); }
.stat--attack-preview  { color: var(--stat-attack-preview); }
.stat--shield          { color: var(--stat-shield); }

.card {
  --card-bg: var(--stock);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  color: var(--suit-dim);
  border-radius: var(--card-radius);
  background:
    radial-gradient(120% 90% at 24% 10%, var(--card-sheen), transparent 55%),
    radial-gradient(90% 70% at 82% 90%, var(--card-shade), transparent 62%),
    linear-gradient(160deg, var(--stock), var(--stock-deep));
  box-shadow:
    inset 0 0 0 1px rgb(var(--rule-rgb) / .34),
    inset 0 0 0 3px var(--card-bg),
    inset 0 0 0 4px rgb(var(--rule-rgb) / .15),
    inset 0 0 26px var(--card-shade),
    0 6px 16px var(--drop-shadow);
  overflow: hidden;
  user-select: none;
}

/* Hearts and Diamonds run bright; Clubs and Spades stay charcoal. */
.card.is-red { color: var(--suit-bright); }

/* The enemy's card carries a trace of warmth the others don't. */
.card.is-enemy {
  --stock: var(--stock-enemy);
  --stock-deep: var(--stock-enemy-deep);
  --card-bg: var(--stock-enemy);
}

/* ── corner index ──────────────────────────────────────────────────────── */

/* Rank over pip. Three things make these collide if left alone: Garamond's
 * descenders (the Q's tail, the J), its default *oldstyle* figures — where 4
 * and 7 drop below the baseline — and any negative leading. So: lining
 * figures, line-height 1, and the pip gets its own box with real clearance. */
.card__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  font-family: var(--font-display);
}
.card__corner--tl { top: .26em; left: .4em; }
.card__corner--br { bottom: .26em; right: .4em; transform: rotate(180deg); }
.card__corner > span { display: block; line-height: 1; }
.card__corner .pip {
  font-weight: 400;
  font-size: .82em;
  margin-top: .22em;
  /* Suit glyphs aren't in EB Garamond — name the fallback rather than letting
   * the browser pick one with unpredictable metrics. */
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
}

/* ── the middle ────────────────────────────────────────────────────────── */

.card__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* Number cards: one large suit mark, worn at the edges. */
.card__mark {
  line-height: 1;
  opacity: .92;
  filter: drop-shadow(0 1px 0 var(--mark-emboss));
}

/* Royal art fills the frame; the name plate sits under it.
 *
 * The art ignores the card's suit colour — every figure is cut in bone, with a
 * dark rim. Four drop-shadows rather than a stroke, because the SVGs already
 * use `stroke` at varying widths for tentacles and limbs; overriding those
 * would wreck the drawings. The filter works on the rendered silhouette, so
 * the cut-outs (eyes, maws) stay clean — those paint in var(--card-bg), which
 * is the stock, so they read as holes punched through to the black. */
.card__art { width: 100%; height: 100%; color: var(--art-ink); padding: 0 .12em .06em; }
.card__art svg {
  width: 100%; height: 100%; display: block;
  filter:
    drop-shadow(.6px 0 0 var(--art-outline))
    drop-shadow(-.6px 0 0 var(--art-outline))
    drop-shadow(0 .6px 0 var(--art-outline))
    drop-shadow(0 -.6px 0 var(--art-outline));
}

.card__plate {
  text-align: center;
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: var(--plate-tracking);
  line-height: 1.05;
  color: var(--stock-ink);
  border-top: 1px solid rgb(var(--rule-rgb) / .3);
  padding-top: .18em;
  margin: 0 .5em .1em;
  opacity: .92;
}

/* Royals get a second hairline rule, like an engraved plate. */
.card.is-royal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(var(--rule-rgb) / .16);
  border-radius: 3px;
  pointer-events: none;
}

/* ── sizes ─────────────────────────────────────────────────────────────── */

/* One unit per size — width, height, type and padding all derive from it, so a
 * card keeps its proportions and a breakpoint changes one number instead of
 * twelve. Structure, not theme: a skin doesn't get to resize the deck. */
:root {
  --card-xl: 7.5rem;
  --card-md: 4.25rem;
  --card-sm: 2.6rem;
}

.card--xl { width: var(--card-xl); height: calc(var(--card-xl) * 1.4);
            font-size: calc(var(--card-xl) * .2);
            padding: calc(var(--card-xl) * .2) .3rem .3rem; }
.card--md { width: var(--card-md); height: calc(var(--card-md) * 1.412);
            font-size: calc(var(--card-md) * .224);
            padding: calc(var(--card-md) * .282) .2rem .2rem; }
.card--sm { width: var(--card-sm); height: calc(var(--card-sm) * 1.385);
            font-size: calc(var(--card-sm) * .238);
            padding: calc(var(--card-sm) * .327) .12rem .12rem; }

.card--xl .card__mark { font-size: calc(var(--card-xl) * .453); }
.card--md .card__mark { font-size: calc(var(--card-md) * .47); }
.card--sm .card__mark { font-size: calc(var(--card-sm) * .423); }

.card--xl .card__plate { font-size: calc(var(--card-xl) * .091); }

/* Narrow: only the enemy's card shrinks. The hand keeps its size — at 4.25rem
 * four cards still fit a 375px row, and shrinking would drop the pip to ~8px,
 * which is precisely where a suit misread becomes a misplay. */
@media (max-width: 46rem) {
  :root { --card-xl: 5rem; }
}
.card--md .card__plate,
.card--sm .card__plate { display: none; }

/* The rotated bottom index is authentic on a big card and illegible noise on
 * a small one — and on a royal it collides with the name plate. */
.card--md .card__corner--br,
.card--sm .card__corner--br,
.card.is-royal .card__corner--br { display: none; }

.card--sm.is-royal::after { display: none; }

/* A card's suit power, printed small along the bottom edge. */
.card__power {
  position: absolute;
  left: 0; right: 0; bottom: .22em;
  text-align: center;
  font: 400 .5em/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stock-ink);
  opacity: .62;
}
.card--xl .card__power,
.card--sm .card__power { display: none; }

/* ── deck tiles ────────────────────────────────────────────────────────── */
/* Castle / Tavern / Discard, drawn as a stack of face-down cards. */

.deck-tile {
  position: relative;
  min-width: 8.5rem;
  padding: .6rem .85rem .7rem;
  border-radius: 7px;
  background:
    repeating-linear-gradient(45deg, rgb(var(--tile-weave-rgb) / .055) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, rgb(var(--tile-weave-rgb) / .055) 0 5px, transparent 5px 10px),
    linear-gradient(160deg, var(--tile-face), var(--tile-face-deep));
  box-shadow:
    5px 5px 0 -1px var(--tile-gap), 5px 5px 0 0 rgb(var(--tile-weave-rgb) / .16),
    10px 10px 0 -1px var(--tile-gap), 10px 10px 0 0 rgb(var(--tile-weave-rgb) / .10),
    inset 0 0 0 1px rgb(var(--tile-weave-rgb) / .28),
    0 8px 18px var(--drop-shadow);
}
.deck-tile__label {
  font: 500 .7rem/1 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tile-label);
}
.deck-tile__count {
  font: 600 2.6rem/1 var(--font-display);
  color: var(--tile-count);
  font-variant-numeric: lining-nums tabular-nums;
  margin-top: .15rem;
}
.deck-tile__sub {
  font-size: .72rem;
  color: var(--tile-sub);
  margin-top: .1rem;
}
.deck-tile.is-empty .deck-tile__count { color: var(--tile-empty); }

/* Inline chip used on the mat, where a full card would be too big. */
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
  padding: .12em .34em;
  border-radius: 3px;
  font: 700 .72rem/1 var(--font-display);
  color: var(--suit-dim);
  background: linear-gradient(160deg, var(--stock), var(--stock-deep));
  box-shadow: inset 0 0 0 1px rgb(var(--rule-rgb) / .3), 0 1px 3px var(--drop-shadow);
}
.chip.is-red { color: var(--suit-bright); }
.chip.is-jester {
  background: linear-gradient(160deg, var(--stock-jester), var(--stock-jester-deep));
  color: var(--ink-jester);
}

/* ── the Jester ────────────────────────────────────────────────────────── */

.card.is-jester {
  --stock: var(--stock-jester);
  --stock-deep: var(--stock-jester-deep);
  --card-bg: var(--stock-jester);
  color: var(--ink-jester);
}

/* ── interaction ───────────────────────────────────────────────────────── */

.card--hand { transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: hover) {
  .card--hand:hover { transform: translateY(-6px); }
}
.card--hand.is-selected {
  transform: translateY(-12px);
  box-shadow:
    inset 0 0 0 1px rgb(var(--rule-rgb) / .34),
    inset 0 0 0 3px var(--card-bg),
    inset 0 0 0 4px rgb(var(--ui-accent-rgb) / .9),
    inset 0 0 26px var(--card-shade),
    0 10px 22px var(--drop-shadow),
    0 0 0 2px rgb(var(--ui-accent-rgb) / .55);
}

/* ── suit power chips on the mat ───────────────────────────────────────── */
/* One class per suit so a theme controls them; the template just picks. */

.chip-power {
  font-size: .62rem;
  padding: .1rem .3rem;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}
.chip-power--h { border-color: rgb(var(--chip-hearts-rgb) / .4);   background: rgb(var(--chip-hearts-rgb) / .1);   color: rgb(var(--chip-hearts-rgb)); }
.chip-power--d { border-color: rgb(var(--chip-diamonds-rgb) / .4); background: rgb(var(--chip-diamonds-rgb) / .1); color: rgb(var(--chip-diamonds-rgb)); }
.chip-power--c { border-color: rgb(var(--chip-clubs-rgb) / .4);    background: rgb(var(--chip-clubs-rgb) / .1);    color: rgb(var(--chip-clubs-rgb)); }
.chip-power--s { border-color: rgb(var(--chip-spades-rgb) / .4);   background: rgb(var(--chip-spades-rgb) / .1);   color: rgb(var(--chip-spades-rgb)); }
.chip-power--x { border-color: rgb(var(--chip-jester-rgb) / .4);   background: rgb(var(--chip-jester-rgb) / .1);   color: rgb(var(--chip-jester-rgb)); }
.chip-power--off {
  border-color: rgb(var(--ui-600-rgb));
  color: rgb(var(--ui-text-600-rgb));
  text-decoration: line-through;
}