/* ==========================================================================
   ШАШКИ — та же доска, что у шахмат (chess.css: .ch-*); здесь только своё.

   Метки — по тому же правилу, что шахматные: светлое ядро и тёмное кольцо,
   чтобы читался хотя бы один слой и на светлой, и на тёмной клетке. Шашки
   стоят только на тёмных полях (#5F7F76): светлое ядро на них — 4.05,
   тёмное кольцо — 4.31. Различаются метки ФОРМОЙ, а не цветом:
     · точка          — куда шагнуть;
     · пустое кольцо  — конец единственной серии (можно тапнуть сразу);
     · кольцо вокруг шашки — ей надо бить;
     · рамка клетки   — пройденный шаг серии;
     · пунктир вокруг бледной шашки — побита, снимется в конце хода.
   ========================================================================== */

/* Шашка чуть меньше клетки: круг на всю клетку сливается с соседними. */
.ck .ch-sq .ch-pc { width: 86%; height: 86%; }

/* Сколько у кого шашек и дамок: значок и число, без наложения. */
.ck-have { gap: var(--k-s4); }
.ck-have .ch-pc.mini { margin-right: 0; }
.ck-have .num + .ch-pc { margin-left: var(--k-s8); }

/* Ей надо бить: кольцо вокруг шашки — поверх неё, светлое на тёмном. */
.ch-sq.ck-must::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 4%;
  border-radius: 50%;
  border: 3px solid var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-main), inset 0 0 0 2px var(--bg-main);
  pointer-events: none;
}

/* Конец единственной серии: пустое кольцо вместо точки. */
.ch-sq.ck-end::after {
  content: '';
  position: absolute;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  border: 3px solid var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-main), inset 0 0 0 2px var(--bg-main);
}

/* Пройденный шаг серии — рамка клетки. */
.ch-sq.ck-step {
  box-shadow:
    inset 0 0 0 3px var(--text-primary),
    inset 0 0 0 5px var(--bg-main);
}

/* Побитая, но ещё на доске («турецкий удар»): бледная, в пунктирном кольце. */
.ch-sq.ck-taken .ch-pc { opacity: 0.4; }
.ch-sq.ck-taken::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 8%;
  border-radius: 50%;
  border: 3px dashed var(--text-primary);
  pointer-events: none;
}