/*
 * guide.css — Rubber Bridge guide geometry on top of the shared _shared/base.css.
 * ONLY layout/geometry + theme-derived tints here; every colour comes from a
 * --gc-* variable. Real cards are rendered by the shared .gc-cardimg /
 * .gc-cardrow / .gc-cardwrap / .gc-math components — the bg-* rules below are the
 * bridge-specific furniture around them (contract banners, the auction ladder,
 * the bidding box, the rubber score line).
 */

/* Red suits read red on any background, matching a real deck. */
.s-red { color: var(--gc-error); }

/* Shared numeric chip used inside figures (numbers live in markup, never in a
   translated string). */
.bg-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.bg-num.muted { color: color-mix(in srgb, var(--gc-text) 45%, transparent); }

/* ── 1 · The goal ─────────────────────────────────────────────────────────── */
.bg-goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
}
.bg-contract {
  display: inline-grid;
  place-items: center;
  min-width: 62px;
  aspect-ratio: 3 / 4;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--gc-accent);
  color: var(--gc-on-accent, var(--gc-bg));
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 800;
}
.bg-contract .s-red { color: inherit; }
/* Thirteen tricks must read as ONE row — a wrapped thirteenth pip looks like a
   fourteenth trick. Sized so the row always fits its container. */
.bg-promise {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(3px, 1vw, 5px);
  justify-content: center;
  width: 100%;
  max-width: 320px;
}
.bg-pip {
  flex: 0 1 16px;
  aspect-ratio: 1;
  min-width: 9px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--gc-text) 14%, transparent);
}
.bg-pip.won { background: var(--gc-accent); }
.bg-pip.book { background: color-mix(in srgb, var(--gc-text) 22%, transparent); }
.bg-count { display: flex; align-items: baseline; gap: 3px; font-size: clamp(17px, 5vw, 22px); }
.bg-count .bg-of { color: color-mix(in srgb, var(--gc-text) 40%, transparent); }

/* ── 2 · Partners & the deal ──────────────────────────────────────────────── */
.bg-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
}
.bg-mid { display: flex; align-items: center; gap: clamp(10px, 5vw, 26px); }
.bg-seat { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.bg-seatcount {
  font-size: 13px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.bg-seat.you .bg-seatcount, .bg-seat.partner .bg-seatcount {
  background: color-mix(in srgb, var(--gc-accent) 28%, transparent);
}
.bg-vs {
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 700;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
  text-align: center;
  max-width: 96px;
}

/* ── 3 · Hand value ───────────────────────────────────────────────────────── */
.bg-hcp { flex-wrap: wrap; justify-content: center; }
.bg-valuation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gc-text) 7%, transparent);
}
.bg-valuation.inline { margin-top: 0; padding: 6px 10px; }
.bg-hcpchip {
  font-weight: 800;
  font-size: clamp(15px, 4.4vw, 18px);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gc-accent);
  color: var(--gc-on-accent, var(--gc-bg));
}
.bg-shape {
  font-weight: 700;
  font-size: clamp(14px, 4.2vw, 17px);
  letter-spacing: .02em;
}

/* ── 4 · The auction ──────────────────────────────────────────────────────── */
.bg-book { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
/* Ten markers: six for the book, four for the level bid. One row, never wrapped. */
.bg-bookrow {
  display: flex;
  gap: clamp(3px, 1.2vw, 6px);
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  max-width: 280px;
}
.bg-bookrow .bg-pip { flex: 0 1 22px; border-radius: 5px; }
.bg-booklegend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bg-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.bg-legend.won { background: color-mix(in srgb, var(--gc-accent) 30%, transparent); }
.bg-legend-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.bg-legend-call { font-weight: 800; }

/* Auction ladder — one column per seat, calls read left to right, top to bottom
   exactly as the in-app auction table draws them. */
.bg-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.bg-lhead {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  text-align: center;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
  padding-bottom: 2px;
}
.bg-lcall {
  display: grid;
  place-items: center;
  padding: 7px 2px;
  border-radius: 8px;
  font-weight: 800;
  font-size: clamp(14px, 4.2vw, 17px);
  background: color-mix(in srgb, var(--gc-text) 10%, transparent);
}
.bg-lcall.pass { color: color-mix(in srgb, var(--gc-text) 45%, transparent); }
.bg-lcall.empty { background: transparent; }
.bg-lcall.final { background: var(--gc-accent); color: var(--gc-on-accent, var(--gc-bg)); }
.bg-lcall.foe { background: color-mix(in srgb, var(--gc-error) 26%, transparent); }
.bg-lcall.mine { background: color-mix(in srgb, var(--gc-accent) 30%, transparent); }
.bg-lcall.dbl { background: color-mix(in srgb, var(--gc-warning, var(--gc-accent)) 34%, transparent); }
/* The final contract, restated once below the table (it is the SAME call as the
   highest bid in the grid, not a seventh call). */
.bg-contractline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}
.bg-contractline .bg-lcall { min-width: 46px; padding: 5px 10px; }

/* Doubling contrast: each call is tagged with WHOSE it is, otherwise the two
   frames are visually identical and teach nothing. */
.bg-dblrow { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; }
.bg-dblwho { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.bg-whotag {
  font-size: clamp(9px, 2.8vw, 11px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}
.bg-whotag.foe { color: var(--gc-error); }
.bg-dblrow .bg-lcall { min-width: 40px; padding: 5px 9px; }
.bg-arrow { color: color-mix(in srgb, var(--gc-text) 45%, transparent); font-weight: 800; }

/* ── 5 · Bidding systems ──────────────────────────────────────────────────── */
.bg-systems {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.bg-syscol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 132px;
  flex: 1 1 132px;
  max-width: 180px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gc-text) 8%, transparent);
}
.bg-sysname {
  font-weight: 800;
  font-size: clamp(13px, 3.8vw, 15px);
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--gc-text) 15%, transparent);
}
.bg-sysrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bg-syscall { font-weight: 800; font-size: clamp(14px, 4.2vw, 17px); }
.bg-sysval {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(13px, 3.8vw, 15px);
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-accent) 26%, transparent);
}
.bg-list {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── 6 · The play + contract banners ──────────────────────────────────────── */
.bg-tricktable, .bg-playscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
}
.bg-banner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gc-accent);
  color: var(--gc-on-accent, var(--gc-bg));
  font-weight: 800;
  font-size: clamp(14px, 4.2vw, 17px);
}
.bg-banner .s-red { color: inherit; }
.bg-bannerdot { opacity: .6; }
.bg-bannername { font-weight: 700; }
.bg-bannerx {
  font-weight: 800;
  padding: 0 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--gc-bg) 45%, transparent);
}
.bg-trick { --overlap: 10px; }
.bg-winner {
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-accent) 28%, transparent);
  text-align: center;
}

/* ── 7 · The play interface mock ──────────────────────────────────────────── */
.bg-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--gc-text) 7%, transparent);
}
.bg-screentitle {
  font-weight: 800;
  font-size: clamp(13px, 3.8vw, 15px);
  text-align: center;
  letter-spacing: .03em;
}
.bg-seatstrip { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.bg-seatchip {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.bg-seatchip.is-current { background: var(--gc-accent); color: var(--gc-on-accent, var(--gc-bg)); }
.bg-box { display: flex; flex-direction: column; gap: 4px; }
.bg-boxrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.bg-boxrow.special { grid-template-columns: repeat(3, 1fr); }
.bg-bid {
  display: grid;
  place-items: center;
  padding: 6px 2px;
  border-radius: 7px;
  font-weight: 800;
  font-size: clamp(12px, 3.6vw, 15px);
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
/* Greyed = an illegal call, exactly as the real bidding box dims them. */
.bg-bid.off { opacity: .32; }
.bg-bid.pass { background: color-mix(in srgb, var(--gc-text) 18%, transparent); }
.bg-bid.dbl { background: color-mix(in srgb, var(--gc-warning, var(--gc-accent)) 34%, transparent); }
.bg-btnrow { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.bg-fakebtn {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gc-accent);
  color: var(--gc-on-accent, var(--gc-bg));
}
.bg-fakebtn.ghost {
  background: transparent;
  color: var(--gc-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc-text) 28%, transparent);
}
.bg-dummylabel {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}
.bg-dummyhand { --overlap: 14px; }
.bg-trickcount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 3.6vw, 14px);
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}

/* ── 8 · Rubber scoring ───────────────────────────────────────────────────── */
.bg-tricksum { flex-wrap: wrap; justify-content: center; }
.bg-scorecall {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--gc-accent);
  color: var(--gc-on-accent, var(--gc-bg));
  font-weight: 800;
  font-size: clamp(17px, 5vw, 21px);
}
.bg-scorecall .s-red { color: inherit; }
.bg-factor { display: inline-flex; align-items: center; gap: 4px; font-size: clamp(16px, 4.8vw, 20px); }
.bg-times { color: color-mix(in srgb, var(--gc-text) 45%, transparent); }

/* The rubber score sheet: a real line with points above it and below it. */
.bg-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.bg-linehead {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}
.bg-lineitems { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bg-math-eq {
  font-weight: 800;
  font-size: clamp(14px, 4.2vw, 17px);
  color: color-mix(in srgb, var(--gc-text) 45%, transparent);
}
.bg-linerule {
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gc-text) 40%, transparent);
  margin: 4px 0;
}
.bg-chip {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(14px, 4.2vw, 17px);
  padding: 4px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.bg-chip.win { background: var(--gc-accent); color: var(--gc-on-accent, var(--gc-bg)); }
.bg-chip.gold {
  background: color-mix(in srgb, var(--gc-warning, var(--gc-accent)) 42%, transparent);
}

/* ═══ Duplicate-only additions ════════════════════════════════════════════════
 * Everything above is shared with the Rubber guide (the two guides teach the
 * same auction, play and interface, so they share the same furniture). The dp-*
 * rules below are what Duplicate adds: the twin-table figure, the board
 * vulnerability rotation, the worked board and the club-field ranking.
 */

/* Twin tables holding identical cards. */
.dp-twin {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 3vw, 16px);
  align-items: center;
  justify-content: center;
  width: 100%;
}
.dp-tablecard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gc-text) 8%, transparent);
}
.dp-tablelabel {
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 800;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}
.dp-hand { --overlap: 16px; }
.dp-eq {
  font-size: clamp(22px, 7vw, 30px);
  font-weight: 800;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}

/* Board vulnerability rotation: four numbered boards, vulnerable sides lit. */
.dp-rotation {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.dp-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gc-text) 9%, transparent);
}
.dp-boardnum { font-weight: 800; font-size: clamp(17px, 5vw, 21px); font-variant-numeric: tabular-nums; }
.dp-vulrow { display: flex; gap: 3px; }
.dp-vul {
  font-size: clamp(9px, 2.8vw, 11px);
  font-weight: 800;
  letter-spacing: .03em;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}
.dp-vul.on {
  background: color-mix(in srgb, var(--gc-error) 34%, transparent);
  color: var(--gc-text);
}

/* One worked board: three results, all at the SAME vulnerability. */
.dp-worked { flex-wrap: wrap; justify-content: center; }
.dp-sample {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.dp-samplehead {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}
.dp-srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--gc-text) 9%, transparent);
}
.dp-scard {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 7px;
  font-weight: 800;
  font-size: clamp(14px, 4.2vw, 17px);
  background: color-mix(in srgb, var(--gc-accent) 26%, transparent);
}
.dp-sresult {
  flex: 1;
  text-align: center;
  font-size: clamp(11px, 3.2vw, 13px);
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}
.dp-sscore { font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(15px, 4.4vw, 18px); }
.dp-sscore.plus { color: var(--gc-accent); }
.dp-sscore.minus { color: var(--gc-error); }

/* The club field: every pair that held the same cards, best score on top. */
.dp-ranks {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}
.dp-rank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 700;
  background: color-mix(in srgb, var(--gc-text) 9%, transparent);
}
.dp-rank.top { background: color-mix(in srgb, var(--gc-accent) 30%, transparent); }
.dp-rank.low { background: color-mix(in srgb, var(--gc-error) 22%, transparent); }