/*
 * guide.css — Blackjack-specific figure geometry on top of the shared
 * _shared/base.css premium kit (real cards via gc-cardimg / gc-cardrow /
 * gc-felt / gc-math). Only layout lives here; every colour comes from the
 * --gc-* theme variables.
 */

/* A hand: a card row with its total pill below. */
.bj-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Total / result pill. Numbers are figures (markup), never translated strings. */
.bj-total {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(16px, 4.6vw, 19px);
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.bj-total.good { color: var(--gc-bg); background: var(--gc-success); border-color: transparent; }
.bj-total.bad  { color: #fff;        background: var(--gc-error);   border-color: transparent; }

/* Card-value chapter: three cards, each with its value under it. */
.bj-values { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.bj-value  { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* The table chapter: dealer row on top, seats below, inside the shared felt. */
.bj-table { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bj-row   { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bj-seatgrid { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.bj-seat  { display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding: 8px; border-radius: 12px; }
.bj-seat.is-you { background: var(--gc-glass); border: 1px solid var(--gc-border); }

/* Small caption labels inside figures (Dealer / You). */
.bj-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gc-muted);
}
.bj-label.you { color: var(--gc-accent); }

/* Conditional-rule frames: label under a card row. */
.bj-vslabel { display: block; margin-top: 6px; font-size: 12px; color: var(--gc-muted); }

/* H17/S17 contrast pair (mirrors the mind page's comparison lab). */
.bj-compare { display: flex; gap: 14px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.bj-compare .bj-col {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px; border-radius: 14px;
  background: var(--gc-glass); border: 1px solid var(--gc-border);
}
.bj-compare .bj-vs { align-self: center; font-size: 20px; color: var(--gc-muted); }

/* Rule badge: H17 / S17 / 3:2 / 6:5 / 1:1 (numerals live in markup). */
.bj-rulebadge {
  display: inline-grid; place-items: center;
  min-width: 40px; padding: 3px 10px; border-radius: 999px;
  font-weight: 800; font-size: 13px;
  color: var(--gc-text); background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.bj-rulebadge.default { color: var(--gc-bg); background: var(--gc-accent); border-color: transparent; }

/* Showdown: dealer hand vs your hand, side by side. */
.bj-showdown { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.bj-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Bust total inside a gc-math strip. */
.gc-math .bj-bust { color: #fff; background: var(--gc-error); border-color: transparent; }

/* Payout table: label rows with chip amounts (numerals in markup). */
.bj-paytable {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 420px; margin: 0 auto 14px;
}
.bj-paytable.alt { margin-top: 2px; opacity: 0.92; }
.bj-payrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--gc-glass); border: 1px solid var(--gc-border);
}
.bj-payrow > span:first-child { flex: 1 1 auto; font-size: 14px; }
.bj-pay {
  display: inline-grid; place-items: center;
  min-width: 48px; padding: 4px 10px; border-radius: 999px;
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--gc-text); background: var(--gc-bg);
  border: 1px solid var(--gc-border);
}
.bj-pay.plus  { color: var(--gc-bg); background: var(--gc-success); border-color: transparent; }
.bj-pay.minus { color: #fff;        background: var(--gc-error);   border-color: transparent; }
.bj-pay.lg    { font-size: 18px; padding: 6px 14px; }

/* Play-screen mock: banner, dealer row, seat tags, your hand, docked panel. */
.bj-screen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bj-banner {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, 0.55);
}
.bj-tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bj-tag {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--gc-text); background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.bj-tag.good { color: var(--gc-bg); background: var(--gc-success); border-color: transparent; }
.bj-tag.bad  { color: #fff;        background: var(--gc-error);   border-color: transparent; }

/* The docked "Your move" panel, as in the real play view (non-interactive). */
.bj-panel {
  width: 100%; max-width: 360px;
  padding: 12px 14px; border-radius: 18px;
  background: var(--gc-glass); border: 1px solid var(--gc-border);
  display: flex; flex-direction: column; gap: 10px;
}
.bj-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bj-panel-title { font-weight: 700; font-size: 14px; }
.bj-panel-total { font-size: 13px; color: var(--gc-muted); }
.bj-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bj-mockbtn { pointer-events: none; }