/* ==========================================================================
   Шахматная доска (static/chess/board/board.js) и панель рядом с ней:
   задачи и игра с компьютером. Подключается после main.css и берёт его
   переменные (цвета, радиусы).

   Доска и фигуры заданы в процентах от её ширины, поэтому она тянется по
   контейнеру. Раскладка "доска + панель" переключается контейнерным
   запросом: виджет сам решает, хватает ли ему места рядом с доской, и
   одинаково работает на отдельной странице и в карточке на главной.
   ========================================================================== */

/* ---------- Доска ---------- */
.cb {
  --cb-light: #EFDAB5;
  --cb-dark: #B88762;
  --cb-green: 32, 104, 46;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  border-radius: 4px;
  /* Клетки рисует фон: доска видна сразу, ещё до запуска скрипта. */
  background: repeating-conic-gradient(var(--cb-dark) 0 25%, var(--cb-light) 0 50%) 0 0 / 25% 25%;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cb-board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  touch-action: manipulation;
}

/* Слои: подсветка клеток, обозначения (.cb-coords, z-index 2), фигуры, значки,
   стрелки. */
.cb-layer { position: absolute; inset: 0; }
.cb-squares { z-index: 1; pointer-events: none; }
.cb-pieces { z-index: 3; }
.cb-marks { z-index: 4; pointer-events: none; }
.cb-shapes { z-index: 5; width: 100%; height: 100%; pointer-events: none; }

/* Клетка или фигура: 1/8 доски, место задаёт transform: translate(x00%, y00%). */
.cb-square,
.cb-piece,
.cb-mark,
.cb-promotion-choice {
  position: absolute;
  left: 0;
  top: 0;
  width: 12.5%;
  height: 12.5%;
}

/* ---------- Фигуры ---------- */
.cb-piece,
.cb-dragging,
.cb-piece-image,
.chess-figurine {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:is(.cb-piece, .cb-dragging, .cb-piece-image).white.king { background-image: url("../pieces/wK.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).white.queen { background-image: url("../pieces/wQ.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).white.rook { background-image: url("../pieces/wR.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).white.bishop { background-image: url("../pieces/wB.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).white.knight { background-image: url("../pieces/wN.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).white.pawn { background-image: url("../pieces/wP.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).black.king { background-image: url("../pieces/bK.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).black.queen { background-image: url("../pieces/bQ.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).black.rook { background-image: url("../pieces/bR.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).black.bishop { background-image: url("../pieces/bB.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).black.knight { background-image: url("../pieces/bN.svg"); }
:is(.cb-piece, .cb-dragging, .cb-piece-image).black.pawn { background-image: url("../pieces/bP.svg"); }

.cb-piece {
  z-index: 1;
  /* Касание фигуры не прокручивает страницу - её можно тащить пальцем.
     Пустые клетки прокрутку не держат. */
  touch-action: none;
}
.cb[data-movable="w"] .cb-piece.white,
.cb[data-movable="b"] .cb-piece.black { cursor: pointer; }
.cb-piece.cb-moving { z-index: 2; }
.cb-piece.cb-fading { z-index: 0; }
.cb-piece.cb-ghost { opacity: 0.3; }

/* Фигура под указателем при перетаскивании. */
.cb-dragging {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}
.cb-is-dragging,
.cb-is-dragging .cb-piece { cursor: grabbing; }

/* ---------- Подсветка клеток ---------- */
.cb-square { pointer-events: none; }
.cb-square.last-move { background: rgba(176, 196, 44, 0.5); }
.cb-square.selected { background: rgba(var(--cb-green), 0.55); }
.cb-square.move-dest { background: radial-gradient(rgba(var(--cb-green), 0.55) 19%, transparent 20%); }
.cb-square.move-dest.oc { background: radial-gradient(transparent 0 79%, rgba(var(--cb-green), 0.45) 80%); }
.cb-square.move-dest.hover,
.cb-square.drag-over { background: rgba(var(--cb-green), 0.35); }
/* Под пальцем клетки не видно - вокруг неё рисуется большой круг. */
.cb-touch-dragging .cb-square.drag-over::after {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: rgba(var(--cb-green), 0.3);
}
.cb-square.check {
  background: radial-gradient(ellipse at center, #FF2020 0%, #E70000 25%, rgba(169, 0, 0, 0) 89%);
}
.cb-square.hint {
  background: rgba(201, 108, 64, 0.6);
  animation: cb-hint 1.4s ease-in-out infinite alternate;
}
@keyframes cb-hint { to { background: rgba(201, 108, 64, 0.25); } }

/* ---------- Значок верного / неверного хода ---------- */
.cb-mark svg {
  position: absolute;
  top: 3%;
  right: 3%;
  width: 40%;
  height: 40%;
  padding: 6%;
  border-radius: 50%;
  color: #FFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  animation: cb-pop 0.2s ease-out;
}
.cb-mark.good svg { background: #3F9E4A; }
.cb-mark.bad svg { background: #D24B3E; }
@keyframes cb-pop { from { transform: scale(0.4); opacity: 0; } }

/* ---------- Обозначения вертикалей и горизонталей ---------- */
.cb-coords {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font);
  font-size: 11px;
  font-size: clamp(8px, 2.3cqi, 14px);
  font-weight: 700;
  line-height: 1;
}
.cb-coords span { position: absolute; }
/* Цифры - у правого края, буквы - у нижнего; цвет - противоположный клетке. */
.cb-coords span:nth-child(odd) { color: var(--cb-light); }
.cb-coords span:nth-child(even) { color: var(--cb-dark); }
.cb-ranks span { right: 0.3em; }
.cb-files span { bottom: 0.3em; }
.cb-ranks span:nth-child(1) { top: calc(0 * 12.5% + 0.3em); }
.cb-ranks span:nth-child(2) { top: calc(1 * 12.5% + 0.3em); }
.cb-ranks span:nth-child(3) { top: calc(2 * 12.5% + 0.3em); }
.cb-ranks span:nth-child(4) { top: calc(3 * 12.5% + 0.3em); }
.cb-ranks span:nth-child(5) { top: calc(4 * 12.5% + 0.3em); }
.cb-ranks span:nth-child(6) { top: calc(5 * 12.5% + 0.3em); }
.cb-ranks span:nth-child(7) { top: calc(6 * 12.5% + 0.3em); }
.cb-ranks span:nth-child(8) { top: calc(7 * 12.5% + 0.3em); }
.cb-files span:nth-child(1) { left: calc(0 * 12.5% + 0.35em); }
.cb-files span:nth-child(2) { left: calc(1 * 12.5% + 0.35em); }
.cb-files span:nth-child(3) { left: calc(2 * 12.5% + 0.35em); }
.cb-files span:nth-child(4) { left: calc(3 * 12.5% + 0.35em); }
.cb-files span:nth-child(5) { left: calc(4 * 12.5% + 0.35em); }
.cb-files span:nth-child(6) { left: calc(5 * 12.5% + 0.35em); }
.cb-files span:nth-child(7) { left: calc(6 * 12.5% + 0.35em); }
.cb-files span:nth-child(8) { left: calc(7 * 12.5% + 0.35em); }

/* ---------- Выбор фигуры при превращении ---------- */
.cb-promotion {
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  background: rgba(24, 21, 16, 0.62);
}
.cb-promotion-choice {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #F6F1E5 25%, #B5AB94 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: border-radius 0.15s, background 0.15s;
}
.cb-promotion-choice .cb-piece-image {
  position: absolute;
  inset: 12%;
  transition: inset 0.15s;
}
.cb-promotion-choice:hover,
.cb-promotion-choice:focus-visible {
  border-radius: 10%;
  background: radial-gradient(circle, #FFFFFF 25%, var(--accent) 100%);
  outline: none;
}
.cb-promotion-choice:hover .cb-piece-image,
.cb-promotion-choice:focus-visible .cb-piece-image { inset: 2%; }

@media (prefers-reduced-motion: reduce) {
  .cb-square.hint,
  .cb-mark svg { animation: none; }
}

/* ==========================================================================
   Раскладка "доска + панель"
   ========================================================================== */

.chess-app {
  container-type: inline-size;
  /* Доска целиком помещается на экране под шапкой сайта и заголовком
     страницы; меньше 300px не сжимается. */
  --board-max: max(300px, calc(100vh - 260px));
}
@supports (height: 100svh) {
  .chess-app { --board-max: max(300px, calc(100svh - 260px)); }
}

.chess-app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.chess-app-board { min-width: 0; }
.chess-app-board .cb { max-width: var(--board-max); margin-inline: auto; }

.chess-app-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* Под доской на узком экране первой идёт навигация по ходам, как в
   мобильных шахматных приложениях. */
.chess-app-side .chess-nav { order: -1; }

@container (min-width: 700px) {
  .chess-app-grid {
    grid-template-columns: minmax(0, var(--board-max)) minmax(250px, 330px);
    justify-content: center;
    gap: 18px;
  }
  /* Высоту ряда задаёт доска, панель её не увеличивает: длинный список
     ходов прокручивается внутри панели. */
  .chess-app-side { contain: size; }
  .chess-app-side .chess-nav { order: 0; }
  .chess-app-side .chess-moves { flex: 1 1 auto; min-height: 0; max-height: none; }
  /* Игра с компьютером: раскрытый блок "Новая партия" не помещается рядом
     с невысокой доской (ноутбук, планшет). Тогда ряд растёт по панели, а не
     сжимает список ходов и навигацию до нуля; сам список высоту ряда
     по-прежнему не увеличивает - он прокручивается внутри. */
  [data-chess-computer] .chess-app-side { contain: none; }
  [data-chess-computer] .chess-app-side > * { flex-shrink: 0; }
  [data-chess-computer] .chess-app-side .chess-moves { flex: 1 1 0; min-height: 96px; contain: size; }
}

/* На отдельной странице на телефоне доска - от края до края экрана. */
@media (max-width: 640px) {
  .chess-app-bleed .chess-app-board { margin-inline: -20px; }
  .chess-app-bleed .cb { border-radius: 0; box-shadow: none; }
}

/* Компактный вид для карточки на главной: доска и под ней статус. */
.chess-app-compact { max-width: 520px; margin-inline: auto; }
.chess-app-compact .chess-moves { display: none; }

/* ---------- Карточки панели ---------- */
.chess-card,
.chess-moves,
.chess-nav {
  background: var(--bg-block);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.chess-card { position: relative; padding: 16px 18px; }

/* Звёздочка "в избранное" - в углу карточки статуса задачи. */
.chess-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--hint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.chess-favorite:hover { color: var(--warning); background: var(--bg-hover); }
.chess-favorite[aria-pressed="true"] { color: var(--warning); }
.chess-favorite[aria-pressed="true"] .icon-star { fill: currentColor; }
.chess-favorite .icon { width: 22px; height: 22px; }
.chess-favorite ~ .chess-status { padding-right: 30px; }

.chess-note {
  margin: 12px 0 0;
  color: var(--hint);
  font-size: 0.86rem;
  line-height: 1.45;
}
.chess-note[hidden] { display: none; }
.chess-solved { display: flex; align-items: center; gap: 6px; color: var(--link-green); }

.chess-status {
  display: flex;
  align-items: center;
  gap: 14px;
}
.chess-status-icon {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Светлый круг цвета клетки: на тёмной панели виден и чёрный король. */
  background: #E9D6B4;
}
.chess-status-icon .cb-piece-image { width: 84%; height: 84%; }
.chess-status-icon .icon { display: none; width: 30px; height: 30px; color: #FFF; }
.chess-status[data-tone="good"] .chess-status-icon { background: #3F9E4A; }
.chess-status[data-tone="bad"] .chess-status-icon { background: #D24B3E; }
.chess-status[data-tone="good"] .cb-piece-image,
.chess-status[data-tone="bad"] .cb-piece-image { display: none; }
.chess-status[data-tone="good"] .chess-status-good,
.chess-status[data-tone="bad"] .chess-status-bad { display: block; }
.chess-status[data-tone="wait"] .cb-piece-image { animation: chess-thinking 1.1s ease-in-out infinite alternate; }
@keyframes chess-thinking { to { opacity: 0.35; transform: scale(0.9); } }

.chess-status-body { min-width: 0; }
.chess-status-body strong {
  display: block;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--text);
}
.chess-status[data-tone="good"] strong { color: var(--link-green); }
.chess-status[data-tone="bad"] strong { color: var(--danger); }
.chess-status-body span { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

.chess-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.chess-actions:empty,
.chess-actions[hidden] { display: none; }
.chess-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 auto;
}
/* Король на кнопке новой партии - на светлом круге, как в статусе. */
.chess-actions .cb-piece-image {
  width: 1.5em;
  height: 1.5em;
  margin: -0.25em 0;
  border-radius: 50%;
  background-color: #E9D6B4;
  background-size: 82% 82%;
}
.chess-actions .btn[hidden] { display: none; }
/* Кнопки-ссылки (анализ партии) - как кнопки действий. */
.chess-actions a.btn { text-decoration: none; }

/* Сдача - по второму нажатию; первое перекрашивает кнопку. */
.chess-actions .btn.confirm { border-color: var(--danger); color: var(--danger); }

/* Половина белого и половина чёрного короля - "случайный цвет". */
.cb-piece-image.random-king { position: relative; }
.cb-piece-image.random-king::before,
.cb-piece-image.random-king::after {
  content: "";
  position: absolute;
  inset: 9%;
  background: center / contain no-repeat;
}
.cb-piece-image.random-king::before { background-image: url("../pieces/wK.svg"); clip-path: inset(0 50% 0 0); }
.cb-piece-image.random-king::after { background-image: url("../pieces/bK.svg"); clip-path: inset(0 0 0 50%); }

/* ---------- Новая партия: соперник, уровень, цвет ---------- */
.chess-setup summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--text);
}
.chess-setup summary::-webkit-details-marker { display: none; }
.chess-setup summary .icon { transform: rotate(-90deg); transition: transform 0.15s; }
.chess-setup[open] summary .icon { transform: none; }
.chess-setup summary:hover { color: var(--link); }
.chess-setup[open] summary { margin-bottom: 12px; }
/* Цвет новой партии: три плитки с королём над подписью. */
.chess-setup .chess-actions { flex-wrap: nowrap; }
.chess-setup .chess-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
}
.chess-setup .chess-actions .cb-piece-image { width: 2em; height: 2em; margin: 0; }
.chess-setup-row {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}
.chess-setup-row select { width: 100%; padding: 6px 10px; }
.chess-levels {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.chess-levels button {
  padding: 6px 0;
  border: 0;
  background: var(--bg-input);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.chess-levels button + button { border-left: 1px solid var(--border); }
.chess-levels button:hover { background: var(--bg-hover); }
.chess-levels button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.chess-setup .chess-note:first-of-type { margin-top: 0; }
.chess-setup .chess-actions { margin-top: 12px; }

/* ---------- Список ходов ---------- */
.chess-moves {
  max-height: 168px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}
.chess-moves-empty { margin: 4px 6px; color: var(--hint); font-size: 0.9rem; }
.chess-moves-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.chess-move-number,
.chess-move-skip { color: var(--hint); font-size: 0.85rem; }
.chess-move-number { padding-left: 6px; }
.chess-moves-list button {
  padding: 3px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chess-moves-list button:hover { background: var(--bg-hover); }
.chess-moves-list button.active { background: var(--accent); color: var(--accent-text); }
.chess-figurine {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.22em;
}
/* У рисунков фигур прозрачные поля по бокам, у каждой свои. Отрицательные
   поля их убирают: фигура начинается там же, где ход пешкой, а до буквы
   остаётся 0.15em. */
.chess-figurine.king { background-image: url("../pieces/wK.svg"); margin: 0 -0.06em 0 -0.21em; }
.chess-figurine.queen { background-image: url("../pieces/wQ.svg"); margin: 0 -0.03em 0 -0.18em; }
.chess-figurine.rook { background-image: url("../pieces/wR.svg"); margin: 0 -0.08em 0 -0.23em; }
.chess-figurine.bishop { background-image: url("../pieces/wB.svg"); margin: 0 -0.11em 0 -0.26em; }
.chess-figurine.knight { background-image: url("../pieces/wN.svg"); margin: 0 -0.07em 0 -0.17em; }

/* Рядом с доской - таблица в три колонки: номер, ход белых, ход чёрных. */
@container (min-width: 700px) {
  .chess-moves { padding: 0; }
  .chess-moves-list {
    display: grid;
    grid-template-columns: 2.8em 1fr 1fr;
    gap: 0;
  }
  .chess-move-number {
    padding: 5px 0;
    text-align: center;
    background: var(--bg-input);
  }
  .chess-move-skip { padding: 5px 12px; }
  .chess-moves-list button {
    border-radius: 0;
    padding: 5px 12px;
    text-align: left;
  }
  .chess-moves-empty { margin: 12px 14px; }
}

/* ---------- Навигация по ходам ---------- */
.chess-nav {
  display: flex;
  overflow: hidden;
}
.chess-nav button {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chess-nav button + button { border-left: 1px solid var(--border); }
.chess-nav button:hover:not(:disabled) { background: var(--bg-hover); color: var(--link); }
.chess-nav button:disabled { color: var(--hint); opacity: 0.45; cursor: default; }
.chess-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chess-nav .icon { width: 22px; height: 22px; }

.chess-noscript { margin: 12px 0 0; color: var(--muted); }
.chess-engines-note { margin: 18px 0 0; }