/*
 * mind.css — chess board motifs for the aiChess "For your mind" Tab B figures.
 * Copied verbatim into each variant folder (chess.standard / chess.chess960 /
 * chess.four-towers) because the guide serves every folder as its own root.
 * Colours come only from the --gc-* theme vars. No baked-in text: piece glyphs
 * are locale-agnostic Unicode; labels/captions/counts are data-i18n or markup
 * badges in the HTML, never strings here.
 */

/* ---- A single rank of squares (starting-array / comparison figures) ------ */
.cm-ranks { display: flex; flex-direction: column; gap: 6px; align-items: center; }

.cm-rank {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gc-border);
}

.cm-sq {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 23px; line-height: 1;
  color: var(--gc-text);
}
.cm-sq.dark  { background: color-mix(in srgb, var(--gc-text) 20%, transparent); }
.cm-sq.light { background: color-mix(in srgb, var(--gc-text)  7%, transparent); }

/* ---- Standard ⇄ shuffled comparison -------------------------------------- */
.cm-compare { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.cm-row { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cm-label {
  font-size: 13px; font-weight: 700;
  color: color-mix(in srgb, var(--gc-text) 62%, transparent);
}

/* A numeral kept OUT of every localized string (SPEC): lives only in markup. */
.cm-badge {
  font-size: 14px; font-weight: 800; line-height: 1;
  padding: 5px 11px; border-radius: 999px;
  color: var(--gc-bg); background: var(--gc-accent);
  box-shadow: 0 2px 8px var(--gc-glass);
}
.cm-count { display: grid; place-items: center; }

/* ---- Connected-Rooks board (Four Towers) --------------------------------- */
.cm-board {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gc-border);
  width: max-content;
  margin-inline: auto;
}
/* A crop of a REAL board, so the squares keep their true alternating colours
   (same tints as the .cm-sq rank strips) instead of one flat tile shade. */
.cm-cell {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 23px; line-height: 1;
  color: var(--gc-text);
}
.cm-cell.dark  { background: color-mix(in srgb, var(--gc-text) 20%, transparent); }
.cm-cell.light { background: color-mix(in srgb, var(--gc-text)  7%, transparent); }

/* The open, commanded file: an accent wash drawn OVER the square, so the
   board's own colour is never replaced by a marker. */
.cm-cell.file::before {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--gc-accent) 26%, transparent);
}

/* A piece the chapter is pointing at: ringed, like the play view's selection —
   never repainted in an accent colour. */
.cm-cell.mark::after {
  content: "";
  position: absolute; inset: 2px;
  border: 2px solid var(--gc-accent);
  border-radius: 5px;
}
.cm-cell .cm-piece { position: relative; z-index: 2; }

/* ---- Real WS-14 piece art inside the mind figures (2026-07) -------------- *
 * The figures used bare Unicode glyphs; the review standard (§10) wants the
 * REAL pieces the player sees on the board. boot.js resolves data-piece.
 */
.cm-piece { width: 84%; height: auto; display: block; }
.cm-sq, .cm-cell { padding: 2px; }