/*
 * mind.css — Scopa figures for the "For your mind" Tab B.
 * One file, copied byte-for-byte into every variant folder (each deploys
 * standalone). Colours come only from the --gc-* theme vars. No baked-in text:
 * numerals live in the MARKUP (badges), captions and zone labels are data-i18n.
 *
 * Real cards only: every playing card is an <img class="gc-cardimg"
 * data-card="…"> (GUIDE_REVIEW_STANDARD §10). The abstract kit below is used
 * ONLY for genuinely schematic parts — the table frames, the sweep arrow and
 * the "where are the forty cards" count zones.
 */

/* ---- Capture choice: one hand card, two legal combinations (Classic) ---- */
.sm-choice {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.sm-opts { display: flex; flex-direction: column; gap: 10px; }
.sm-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
  border: 1px solid var(--gc-border);
}
.sm-op {
  font-size: 24px; font-weight: 800;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}
.sm-op.sm-op-sm { font-size: 18px; }

/* ---- Where are the forty cards (Scopone scientifico) -------------------- */
.sm-zones { display: flex; align-items: flex-start; justify-content: center; gap: 12px; flex-wrap: wrap; }
.sm-zone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
  border: 1px solid var(--gc-border);
}
.sm-count {
  font-size: 20px; font-weight: 800;
  min-width: 46px; height: 46px; padding: 0 10px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--gc-text);
  background: color-mix(in srgb, var(--gc-text) 14%, transparent);
}
.sm-count.mine { color: var(--gc-bg); background: var(--gc-accent); }
.sm-count.gold { color: var(--gc-bg); background: var(--gc-warning); }
.sm-count.seen { color: var(--gc-text); background: color-mix(in srgb, var(--gc-text) 26%, transparent); }
.sm-zlabel {
  font-size: 12.5px; font-weight: 700;
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}
.sm-total { display: flex; align-items: center; gap: 8px; align-self: center; }
.sm-badge {
  font-size: 15px; font-weight: 800;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 20px;
  display: grid; place-items: center;
  color: var(--gc-bg); background: var(--gc-accent);
}

/* ---- Before / after: an Ace sweeps the whole table (Asso piglia tutto) --- */
.sm-sweep { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.sm-table {
  display: flex; align-items: center; gap: 6px;
  min-width: 168px; min-height: 96px;
  padding: 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
  border: 1px solid var(--gc-border);
}
.sm-table.sm-empty {
  justify-content: center;
  border-style: dashed;
}
.sm-dash {
  width: 54px; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--gc-text) 26%, transparent);
}
.sm-arrow {
  font-size: 28px; font-weight: 800;
  color: color-mix(in srgb, var(--gc-accent) 85%, var(--gc-text));
}
html[dir="rtl"] .sm-arrow { transform: scaleX(-1); }