/*
 * mind.css — Poker all'italiana "the deck is stripped by player count" figure
 * for the "For your mind" Tab B. Built with REAL card faces (data-card) on the
 * shared kit; colours come only from the --gc-* theme vars and no text is baked
 * in (ranks are the card art, deck sizes are markup badges).
 *
 * One idea: the lowest rank in play is eleven minus the number of players, so a
 * two-handed table plays a short deck and a full table a long one — the same
 * game, two different probability landscapes. Both table sizes ship as default
 * templates, so the comparison is playable, not hypothetical.
 *
 * Under reduced motion anim-pop rests on the correct final frame: both rank
 * spans are complete and legible with no motion at all.
 */

.pk-decks { display: flex; flex-direction: column; gap: 16px; }

.pk-deck {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  box-shadow: 0 6px 18px var(--gc-glass);
}

/* Header line: which table this deck belongs to, and how many cards it holds. */
.pk-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-deck-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}

/*
 * Deck size. Deliberately NOT the kit's .gc-badge: that one is absolutely
 * positioned and expects a .gc-cardwrap to anchor to, so standalone it escapes
 * the figure entirely. This is the same pill, drawn in normal flow.
 */
.pk-count {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
  color: var(--gc-bg);
  background: color-mix(in srgb, var(--gc-text) 30%, var(--gc-bg));
}

/* The rank span itself: one clean unbroken row, using the kit's own overlap. */
.pk-row {
  justify-content: flex-start;
  flex-wrap: nowrap;
}