/*
 * guide.css — aiHoldEm Pot-Limit Omaha variant, on top of the shared
 * _shared/base.css. Geometry only: every colour comes from the --gc-* theme
 * variables. Real card faces come from .gc-cardimg / .gc-cardrow in base.css —
 * nothing here draws a card. The abstract .gc-tile kit is used ONLY for
 * schematic things that are not cards: seats, chips, and the play-screen mock.
 */

/* Stacked labelled groups (hole cards, the board, showdown hands). */
.he-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.he-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.he-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}
.he-label.win { color: var(--gc-accent); }

/* A felt stage that centres its content (board reveals, the goal hand). */
.he-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ---- Chips & pot ------------------------------------------------------- */

/* A round chip carrying a numeral (numerals always live in markup). */
.he-chip {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: var(--gc-bg);
  background: var(--gc-accent);
  box-shadow: 0 2px 8px var(--gc-glass);
}
.he-chip.gold { background: var(--gc-warning); }

/* The central pot capsule. */
.he-pot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid color-mix(in srgb, var(--gc-text) 16%, transparent);
}
.he-pot b { font-variant-numeric: tabular-nums; }

/* ---- Seats (blinds & button diagram) ----------------------------------- */

.he-seats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}
.he-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 62px;
}
.he-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
}
.he-avatar.sm { width: 28px; height: 28px; font-size: 12px; }

/* A small seat tag: Button / Folded / All-in / speaks first. */
.he-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid color-mix(in srgb, var(--gc-text) 18%, transparent);
  text-align: center;
}
.he-tag.first {
  color: var(--gc-accent);
  border-color: color-mix(in srgb, var(--gc-accent) 55%, transparent);
}

/* ---- Worked arithmetic -------------------------------------------------- */

.he-mathbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
/* Rides on the shared .gc-math kit (operators + total chip); only wrapping
   and centring are added here so long rows fold on a narrow screen. */
.he-mathrow {
  flex-wrap: wrap;
  justify-content: center;
}
.he-mathlabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}

/* ---- The betting menu (mirrors the docked panel's real buttons) --------- */

.he-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.he-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 11px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid color-mix(in srgb, var(--gc-text) 18%, transparent);
  font-variant-numeric: tabular-nums;
}
/* Aggressive actions (raise / all-in) are tinted in the real panel too. */
.he-btn.agg {
  color: var(--gc-warning);
  border-color: color-mix(in srgb, var(--gc-warning) 55%, transparent);
  background: color-mix(in srgb, var(--gc-warning) 12%, transparent);
}

/* ---- The play-screen mock ---------------------------------------------- */

.he-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}
.he-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gc-text);
  background: var(--gc-glass);
  border: 1px solid color-mix(in srgb, var(--gc-text) 16%, transparent);
  font-variant-numeric: tabular-nums;
}
.he-sep { opacity: 0.5; }

.he-oppseats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.he-seatmini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.he-seatmini.dim { opacity: 0.45; }

/* The community board sits above the player's own cards in the mock. */
.he-board { opacity: 0.95; }
.he-myhand { margin-top: 2px; }

/* The docked betting panel: a translucent card pinned under the table. */
.he-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--gc-text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc-text) 14%, transparent);
}
.he-panelhead {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 62%, transparent);
}
.he-hintbtn {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--gc-accent);
  border: 1px solid color-mix(in srgb, var(--gc-accent) 45%, transparent);
}

/* The hand-ranking list is long — tighten it so it reads as one compact chart. */
.he-ranklist { gap: 8px; }
.he-ranklist .gc-step { padding: 10px 14px; }
.he-ranklist .gc-step-text { font-size: 15px; }

/* ---- Omaha-only: which cards actually play ------------------------------
 * Exactly two of the four hole cards and exactly three of the five board
 * cards enter the hand. `he-used` rings the cards that play, `he-dim` fades
 * the ones that cannot — the single idea of this variant.
 */
.gc-cardimg.he-used {
  outline: 3px solid color-mix(in srgb, var(--gc-success) 85%, transparent);
  outline-offset: 1px;
  z-index: 1;
}
.gc-cardimg.he-dim {
  opacity: 0.34;
  filter: grayscale(0.55);
}

/* The docked panel also carries the live hand valuation line. */
.he-valuation {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: color-mix(in srgb, var(--gc-text) 78%, transparent);
}