/*
 * guide.css — Machiavelli-specific geometry on top of the shared
 * _shared/base.css. Only layout/shape here; every colour derives from the
 * --gc-* theme variables. Card faces are REAL images via data-card
 * (GUIDE_REVIEW_STANDARD §10) — no glyph tiles.
 */

/* A felt scene: labelled zones (table above, hand below) stacked vertically. */
.mc-scene {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
}

/* One labelled zone (TABLE or YOUR HAND) inside a scene. */
.mc-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-bg) 25%, transparent);
}
.mc-zone.hand {
  background: color-mix(in srgb, var(--gc-text) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--gc-text) 35%, transparent);
}
.mc-zonelabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}

/* The "hand is empty" check in the goal figure. */
.mc-done {
  font-size: 26px;
  font-weight: 800;
  color: var(--gc-success);
  padding: 6px 0 2px;
}

/* Decorative connectors (aria-hidden in the markup). */
.mc-arrow {
  color: var(--gc-text);
  opacity: 0.55;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

/* Stock → hand draw vignette. */
.mc-drawfig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
}

/* Before/after frames of the star-move figure. */
.mc-frames {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-frames .gc-cardrow { --overlap: -6px; }

/* ── Workbench mock (mirrors TableWorkbenchView) ───────────────────────── */
.mc-bench {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px;
  border-radius: var(--gc-radius);
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
}
.mc-bench-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-success) 16%, var(--gc-bg));
}
.mc-bench-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-text) 8%, transparent);
}
.mc-bench-row .gc-cardimg { width: calc(var(--gc-card-w) * 0.55); }
.mc-mark {
  margin-left: auto;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.mc-mark.ok   { color: var(--gc-success); }
.mc-mark.warn { color: var(--gc-warning); }
.mc-bench-new {
  padding: 8px;
  border-radius: var(--gc-radius-sm);
  border: 1px dashed color-mix(in srgb, var(--gc-text) 40%, transparent);
  color: color-mix(in srgb, var(--gc-text) 65%, transparent);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.mc-bench-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--gc-warning);
  text-align: center;
}
.mc-bench-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-text) 10%, transparent);
}
.mc-bench-hand .gc-cardimg { width: calc(var(--gc-card-w) * 0.55); }
.mc-bench-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.mc-btnchip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--gc-border);
  background: color-mix(in srgb, var(--gc-text) 7%, transparent);
  color: var(--gc-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.mc-btnchip.play {
  background: var(--gc-accent);
  color: var(--gc-bg);
  border-color: transparent;
}
.mc-btnchip.dim { opacity: 0.4; }

/* ── Match-target strip (scoring chapter) ──────────────────────────────── */
.mc-target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--gc-radius-sm);
  border: 1px solid var(--gc-border);
  background: color-mix(in srgb, var(--gc-text) 5%, transparent);
  font-size: 14px;
}
.mc-targetchip {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gc-accent);
  color: var(--gc-bg);
  font-weight: 800;
  font-size: 15px;
}