/*
 * mind.css — No-Limit Texas Hold'em "both, one, or neither" 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
 * (the counts are markup badges).
 *
 * One idea, and it is the exact inverse of the sibling Omaha page: Hold'em puts
 * NO constraint on how many hole cards enter your hand. All three readings in
 * the figure are legal on the one board shown, so a viewer cannot wrongly
 * conclude that some fixed number of hole cards must play.
 *
 * Deliberately mirrors the Omaha figure's visual language (count badge, ringed
 * cards that play, faded cards that do not) so the contrast between the two
 * variants reads at a glance.
 *
 * Under reduced motion anim-pop rests on the correct final frame: the board and
 * all three hole pairs are complete and legible with no motion at all.
 */

.hs-fig { display: flex; flex-direction: column; gap: 16px; }

/* The five shared cards, common to every reading below. */
.hs-board {
  display: flex;
  flex-direction: column;
  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);
}
.hs-board-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}

/* Three candidate hole pairs, side by side, wrapping on narrow viewports. */
.hs-holes { display: flex; flex-wrap: wrap; gap: 12px; }
.hs-hole {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
}

/*
 * A hole pair is only two cards and BOTH of them carry the idea, so they are
 * spaced rather than fanned — the kit's default overlap is tuned for a hand of
 * five or more and would bury the first card behind the second.
 */
.hs-hole .gc-cardrow { --overlap: 6px; }

/* How many of THIS pair enter the final hand. Mirrors Omaha's .ho-count. */
.hs-count {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--gc-bg);
  background: var(--gc-accent);
  box-shadow: 0 2px 8px var(--gc-glass);
}

/* Which cards actually enter the hand: ringed play, faded do not. */
.gc-cardimg.hs-used {
  outline: 3px solid color-mix(in srgb, var(--gc-success) 85%, transparent);
  outline-offset: 1px;
  z-index: 1;
}
.gc-cardimg.hs-dim {
  opacity: 0.34;
  filter: grayscale(0.55);
}