/*
 * guide.css — aiPoker figure geometry on top of the shared _shared/base.css
 * premium kit (real cards via gc-cardimg / gc-cardrow / gc-felt / gc-cardwrap).
 * Only layout lives here; every colour comes from the --gc-* theme variables.
 * Numerals (chip amounts, pot totals, seat counts) live in the markup, never
 * in a localized string.
 */

/* --- Shared bits -------------------------------------------------------- */

/* The shared theme has no muted-text variable; derive one from --gc-text so
   captions read as secondary in both the light and the dark theme. */
.gc-guide { --pk-muted: color-mix(in srgb, var(--gc-text) 62%, transparent); }

/* The shared operator glyph is scoped to .gc-math; reuse the look outside it. */
.pk-redeal .gc-math-op {
  font-size: 22px; font-weight: 800; line-height: 1;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}

/* A LIGHTER overlap than the shared default for this guide's many five-card
   rows: every rank and suit has to stay readable (the value is negative — it
   is the margin between neighbours). */
.gc-cardrow.sm { --overlap: -18px; }
.gc-cardrow.backs { --overlap: -22px; }

/* A card that is out of play (stripped from the deck, or thrown on the draw).
   This static frame is what TEACHES: the shared anim-strike is built for text
   tiles (it repaints a background and hides the text) and does nothing to a
   card image, so out-of-play cards get their own motion below and rest on
   exactly this greyed frame when motion is reduced. */
.gc-cardimg.is-out { opacity: 0.32; filter: grayscale(1); }

/* A card leaving the hand / the deck: it drops and fades out of the row, then
   settles back on the greyed resting frame. Gated on the active chapter like
   every shared motion class. */
.gc-chapter.is-active .pk-throw { animation: pkThrow 2.8s var(--gc-ease) infinite; }
@keyframes pkThrow {
  0%, 15%   { transform: none;                     opacity: 1;    filter: grayscale(0); }
  45%, 100% { transform: translateY(14px) rotate(6deg); opacity: 0.32; filter: grayscale(1); }
}

/* Non-interactive mock buttons that mirror the real betting surface. */
.pk-mockbtn { pointer-events: none; white-space: nowrap; }
.pk-mockbtn.is-out { opacity: 0.35; text-decoration: line-through; }
.pk-btnrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Small caption label under a frame. */
.pk-vslabel { display: block; margin-top: 6px; font-size: 12px; color: var(--pk-muted); }

/* A table tag ("Stand pat", "Folded") as drawn beside a seat. */
.pk-tag {
  display: inline-block;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--gc-text); background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}

/* --- 1 · The pot -------------------------------------------------------- */
.pk-scene { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pk-pot { display: flex; align-items: center; gap: 6px; }
.pk-chip {
  width: clamp(22px, 7vw, 30px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--gc-warning);
  border: 3px dashed color-mix(in srgb, var(--gc-bg) 55%, transparent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.pk-pot-total {
  margin-left: 6px;
  font-weight: 800; font-size: clamp(16px, 4.4vw, 20px);
  font-variant-numeric: tabular-nums;
  color: var(--gc-text);
}

/* --- 2 · The deck rule -------------------------------------------------- */
.pk-decks { display: flex; flex-direction: column; gap: 12px; }
.pk-deckrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 14px;
  background: var(--gc-glass); border: 1px solid var(--gc-border);
}
.pk-seats {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px;
  font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--gc-bg); background: var(--gc-accent);
}
.pk-deckcap { flex: 1 1 130px; min-width: 120px; font-size: 13px; color: var(--pk-muted); }

/* The minimum ("minima") straight: the ace tucked UNDER the deck's lowest card. */
.pk-minima { display: flex; align-items: flex-end; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pk-lowace { transform: translateY(10px); }
.pk-lowace .gc-badge { font-size: 11px; }

/* --- 3 · The ranking ladder (STRONGEST FIRST) --------------------------- */
.pk-ranks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-rank {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.pk-rank-name { flex: 1 1 40%; min-width: 104px; font-weight: 700; }
.pk-rank-note { flex: 1 1 100%; font-size: 12px; color: var(--pk-muted); }
/* The Italian inversion: the flush sits ABOVE the full house. */
.pk-rank.beats { background: color-mix(in srgb, var(--gc-warning) 14%, transparent);
                 border-color: color-mix(in srgb, var(--gc-warning) 60%, transparent); }
.pk-rank.under { border-color: color-mix(in srgb, var(--gc-warning) 35%, transparent); }
.pk-rank.top   { border-color: color-mix(in srgb, var(--gc-accent) 60%, transparent); }

/* --- 4 · Invito & re-deal ---------------------------------------------- */
.pk-invito { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pk-redeal { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pk-potpill {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gc-text); background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.pk-potpill.grown { color: var(--gc-bg); background: var(--gc-accent); border-color: transparent; }

/* --- 5 · Meet & the draw ------------------------------------------------ */
.pk-drawscene { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pk-signals { display: flex; gap: 26px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.pk-signal { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* --- 6 · Worked example ------------------------------------------------- */
.pk-ledger, .pk-settle {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 440px; margin: 0 auto 14px;
}
.pk-ledrow, .pk-settlerow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--gc-glass); border: 1px solid var(--gc-border);
}
.pk-ledrow > span:first-child,
.pk-settlerow > span:first-child { flex: 1 1 auto; font-size: 13px; }
.pk-amt, .pk-run, .pk-net {
  display: inline-grid; place-items: center;
  min-width: 56px; 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);
}
.pk-amt { min-width: 48px; background: transparent; border-color: transparent; color: var(--pk-muted); }
.pk-ledrow.total .pk-run,
.pk-settlerow.total .pk-net { color: var(--gc-bg); background: var(--gc-accent); border-color: transparent; }
.pk-net.plus  { color: var(--gc-bg); background: var(--gc-success); border-color: transparent; }
.pk-net.minus { color: #fff;         background: var(--gc-error);   border-color: transparent; }

/* --- 7 · The play screen mock ------------------------------------------ */
.pk-screen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pk-seatstrip { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pk-seat { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pk-seat.is-folded { opacity: 0.35; }
.pk-chippill {
  display: inline-grid; place-items: center;
  min-width: 34px; padding: 3px 9px; border-radius: 999px;
  font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--gc-text); background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.pk-potbadge {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gc-text); background: var(--gc-glass);
  border: 1px solid color-mix(in srgb, var(--gc-accent) 45%, transparent);
}
/* The DOCKED betting panel, exactly as the real play view shows it. */
.pk-panel {
  width: 100%; max-width: 380px;
  padding: 12px 14px; border-radius: 20px;
  background: var(--gc-glass); border: 1px solid var(--gc-border);
  display: flex; flex-direction: column; gap: 9px;
}
.pk-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pk-panel-title { font-weight: 700; font-size: 14px; }
.pk-panel-val { font-size: 13px; font-weight: 700; color: var(--gc-accent); }
.pk-panel-note { font-size: 11px; color: var(--pk-muted); }
.pk-panel-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--pk-muted);
}

/* --- 8 · Showdown ------------------------------------------------------- */
.pk-showdown { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pk-side { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.pk-side.pk-loser { opacity: 0.5; }
.pk-crown { position: absolute; top: -16px; right: -8px; font-size: 22px; }