/* ── card.css — Single source of truth for all card components ────────────────
   One rule governs all card types: font-size: 16cqw.
   No per-type overrides. Adding a new card type inherits everything for free.

   Card types covered:
     .card        — hand strip, BIGCARD, results winning cards
     .rcard       — reveal flip cards (your-reveal view)
     .rc-lg       — large reveal card variant
     .wslot       — watching mirror slots
     .pc          — mini proposal cards (face-down in most views)
     .jsq         — judge/judge-wait square cards
     .trouble-card — host trouble card
     .hpc         — host proposal cards
     .wins-card   — host results cards
     .lslot       — locked proposal sealed cards
     .tsc         — TRBLHDR thumbnail (img-only, card-name not used)
   ────────────────────────────────────────────────────────────────────── */

/* ── 1. Shell: structure shared by every card type ────────────────────────── */
.card, .rcard, .rc-lg, .wslot, .pc, .jsq,
.trouble-card, .hpc, .wins-card, .lslot, .tsc {
  aspect-ratio: 5/7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

/* Pin parchment text colour on all non-.card types so .dark modifier
   gold-text doesn't bleed through onto light card faces. */
.rcard, .rc-lg, .wslot, .pc, .jsq,
.trouble-card, .hpc, .wins-card, .lslot, .tsc {
  --surf-cname: var(--card-tx);
}

/* ── 2. Card name — ONE rule, proportional at every size ─────────────────── */
.card-name {
  font-family: var(--font-display);
  /* Scale down for long single words (--max-word-len) and verbose names
     (--name-len). Both properties are set by card.js via MutationObserver.
     Short names (≤11 chars longest word, ≤16 chars total) stay at 16cqw. */
  font-size: min(
    clamp(6px, 16cqw, 64px),
    calc(170cqw / var(--max-word-len, 11)),
    calc(280cqw / var(--name-len,     16))
  );
  color: var(--surf-cname);
  padding: 5cqw 4cqw 2cqw;
  width: 100%;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-shrink: 0
}

/* Bilingual secondary name — only created in the DOM (by renderCardEl, see
   card-render.js setSecondaryLang()) when a player's chosen language differs
   from the host's, so no display:none gate is needed here: if it exists,
   show it. Dashed rule + reduced opacity mark it as the secondary line so
   the two names don't compete for attention. */
.cn-bot {
  font-family: var(--font-display);
  font-size: clamp(6px, 14cqw, 56px);
  color: var(--surf-cname);
  opacity: 0.75;
  padding: 2cqw 4cqw 4cqw;
  margin-top: 1cqw;
  border-top: 1px dashed var(--surf-cname);
  width: 100%;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  flex-shrink: 0
}

/* ── 3. Card art — shared layout ──────────────────────────────────────────── */
.card-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2cqw;
  width: 100%;
  min-height: 0
}

.card-art img {
  image-rendering: pixelated;
  width: 80%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain
}

/* ── 4. Exceptions: card types where text never wraps ─────────────────────── */
/* .rc-lg is used as a single-line label; keep nowrap */
.rc-lg .card-name { white-space: nowrap }

/* .pc mini cards are always face-down in gameplay; nowrap prevents
   layout shift in the rare case the name is briefly visible */
.pc .card-name { white-space: nowrap }