/* ==========================================================================
   ШАХМАТЫ — доска на всю ширину, плашки игроков с часами сверху и снизу,
   запись ходов под доской, кнопки внизу.

   Свои цвета у игры только одни — клетки доски. Всё остальное — токены.

   ЗЕЛЁНОГО НА ДОСКЕ БОЛЬШЕ НЕТ. #137A43 к тёмной клетке #5F7F76 даёт 1.23:
   зелёная точка на тёмной клетке не видна вообще. Поэтому «сюда можно»
   показывают светлый маркер с тёмным кольцом — на светлой клетке его держит
   кольцо (14.17), на тёмной сам маркер (4.05). Зелёный остался за полосой
   «чей ход» над доской: это неТекст на обычном фоне, и ему хватает 3.50.
   Красный шах — красное кольцо со светлым: 3.88 на светлой, 4.05 на тёмной.
   ========================================================================== */

:root {
  --ch-light: #d9e1db;
  --ch-dark: #5f7f76;
  /* Сторона доски: ширина экрана, но не выше того, что остаётся от плашек. */
  --ch-axis: 20px; /* ширина столбца цифр и высота строки букв вокруг доски */
  --ch-size: min(calc(100vw - var(--ch-axis)), 500px, calc(100dvh - 400px - env(safe-area-inset-top, 0px)));
}

.ch { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ------------------------------------------------------------------ шапка */

.ch-head {
  flex: none;
  display: grid;
  grid-template-columns: var(--k-tap) 1fr var(--k-tap);
  align-items: center;
  padding: calc(var(--k-s4) + var(--sat, 0px)) var(--k-s4) 0;
}
.ch-head-gap { width: var(--k-tap); }
.ch-title {
  min-width: 0;
  text-align: center;
  font: var(--k-w-semibold) var(--k-fs-component)/var(--k-lh-component) var(--k-font);
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-title small {
  display: block;
  font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--k-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------------- плашка */

.ch-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--k-s8);
  padding: var(--k-s8) var(--k-s12);
  border-top: 2px solid transparent;
  transition: border-color 0.2s var(--k-ease);
}
.ch-bar.turn { border-top-color: var(--k-green); }
.ch-bar.away { opacity: 0.55; }
.ch-bar .av.sm { flex: none; width: var(--k-av-sm); height: var(--k-av-sm); font-size: var(--k-fs-caption); }
.ch-who { flex: 1; min-width: 0; }
.ch-name {
  font: var(--k-w-semibold) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-name small { color: var(--k-text-2); font-weight: var(--k-w-regular); }
.ch-eaten {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--k-s16);
  color: var(--k-text-2);
  font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
}
.ch-pc.mini { width: var(--k-s16); height: var(--k-s16); margin-right: -4px; }
.ch-lead { margin-left: var(--k-s8); }

.ch-clock {
  flex: none;
  min-width: 72px;
  padding: var(--k-s4) var(--k-s8);
  border-radius: var(--k-r-md);
  background: var(--k-surface);
  border: 1px solid var(--k-divider);
  text-align: center;
  font: var(--k-w-semibold) var(--k-fs-section)/var(--k-lh-section) var(--k-font);
  font-variant-numeric: tabular-nums;
  color: var(--k-text-2);
}
.ch-clock.run { color: var(--k-text); background: var(--k-elevated); }
.ch-bar.turn .ch-clock.run { border-color: var(--k-green); }
/* Время кончается — красная заливка со светлыми цифрами (4.78). Красными
   цифрами на поверхности это 3.17. */
.ch-clock.run.urgent { background: var(--color-danger); color: var(--text-primary); border-color: transparent; }
.ch-clock.off { visibility: hidden; }

/* ------------------------------------------------------------------ доска */

.ch-board-wrap { flex: none; display: flex; justify-content: center; }
.ch-board {
  width: var(--ch-size);
  height: var(--ch-size);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  user-select: none;
  -webkit-user-select: none;
  /* Палец, ведущий фигуру, не должен прокручивать страницу. */
  touch-action: none;
}
.ch-sq {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--ch-light);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ch-sq.dark { background: var(--ch-dark); }
.ch-sq .ch-pc { position: relative; z-index: 1; width: 92%; height: 92%; pointer-events: none; } /* над подсветкой хода: фигура не тускнеет */

/*
 * Последний ход: подчёркнуты ОБЕ клетки — откуда сошла фигура и куда пришла, —
 * но мягко, лёгкой тёмной тенью без рамок: рамка тут была бы громче маркеров
 * «сюда можно», а они важнее. «Откуда» чуть темнее «куда»: по пустой клетке
 * глаз находит «здесь что-то было», а на «куда» и так стоит сама фигура.
 * Название хода — буквами по краю и строкой под доской.
 */
.ch-sq.last-from::before,
.ch-sq.last-to::before {
  content: '';
  position: absolute;
  inset: 0;
}
.ch-sq.last-from::before { background: color-mix(in srgb, var(--bg-main) 30%, transparent); }
.ch-sq.last-to::before   { background: color-mix(in srgb, var(--bg-main) 20%, transparent); }
/*
 * МАРКЕРЫ ХОДА — светлое с тёмным, а не зелёное.
 *
 * Клетки доски это игровой арт, менять их нельзя, а на тёмной клетке
 * #5F7F76 зелёный даёт 1.23. Один цвет тут не работает в принципе: что
 * видно на светлой клетке, пропадает на тёмной. Поэтому маркер ДВУХСЛОЙНЫЙ
 * — светлое ядро и тёмное кольцо, — и на любой клетке читается хотя бы один
 * слой: на светлой кольцо (14.17), на тёмной ядро (4.05) и кольцо (4.31).
 */
.ch-sq.sel,
.ch-sq.cap {
  box-shadow:
    inset 0 0 0 3px var(--text-primary),
    inset 0 0 0 5px var(--bg-main);
}
.ch-sq.dot::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-main);
}
/* Король под шахом: плоское красное кольцо со светлым внутри — было
   красное свечение радиальным градиентом. */
.ch-sq.check::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 3px var(--color-danger),
    inset 0 0 0 5px var(--text-primary);
}
/* Фигура в руке: над доской, чуть крупнее; куда её можно положить — рамка клетки. */
.ch-sq .ch-pc.drag { z-index: 20; will-change: transform; filter: none; }
.ch-sq.hover { box-shadow: inset 0 0 0 3px var(--text-primary), inset 0 0 0 5px var(--bg-main); }
.ch-sq:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; z-index: 1; }

/*
 * Рамка с координатами — ВНЕ клеток. Раньше буквы и цифры жили внутри клеток
 * мелким шрифтом поверх фигур, на тёмной клетке не дотягивали до 4.5 и по ним
 * нельзя было прочитать ход. Теперь они по краям доски, на фоне экрана
 * (--text-secondary даёт там 9.6), а у клеток последнего хода — на светлой
 * плашке: взгляд на край сразу даёт «e7 → e5».
 */
.ch-frame {
  display: grid;
  grid-template-columns: var(--ch-axis) var(--ch-size);
  grid-template-rows: var(--ch-size) var(--ch-axis);
}
.ch-ranks { display: grid; grid-template-rows: repeat(8, 1fr); }
.ch-files { display: grid; grid-template-columns: repeat(8, 1fr); }
.ch-ranks span, .ch-files span {
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--k-w-semibold) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
  color: var(--text-secondary);
}
.ch-ranks span.hot, .ch-files span.hot {
  color: var(--bg-main);
  background: var(--text-primary);
  border-radius: var(--k-r-sm);
}
.ch-ranks span.hot { margin: 0 2px; }
.ch-files span.hot { margin: 2px 0; }

/* ------------------------------------------------------------ статус, ходы */

.ch-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s12);
  min-height: var(--k-s32);
  padding: var(--k-s4) var(--k-s16);
  text-align: center;
  font: var(--k-w-semibold) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
}
/*
 * «ВАШ ХОД» — светлый текст на зелёной плашке. Зелёной надписью в 14
 * пикселей это 3.50 на фоне, а мелкому тексту нужно 4.5; на плашке —
 * 4.98. Полоса над плашкой игрока осталась зелёной: она неТекст.
 */
.ch-status.mine {
  color: var(--k-on-green);
  background: var(--color-success);
  border-radius: var(--k-r-pill);
  padding: var(--k-s4) var(--k-s12);
  align-self: center;
}
.ch-status.over { color: var(--k-text); flex-wrap: wrap; gap: var(--k-s4) var(--k-s12); }
.ch-rematch { flex-basis: 100%; font-weight: var(--k-w-regular); }
/* Победа названа словом — цвет ей не нужен. */
.ch-status.over.won { color: var(--k-text); }
.ch-status.offer { flex-wrap: wrap; color: var(--k-text); }
.ch-offer-btns { display: flex; gap: var(--k-s8); }

.ch-nav {
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--k-tap);
  padding: 0 var(--k-s4);
}
.ch-nav.empty { display: none; }
.ch-nav-btn { flex: none; font-size: var(--k-fs-component); color: var(--text-primary); }
.ch-nav-btn:disabled { color: var(--color-muted); }
.ch-sub {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--text-secondary);
}
.ch-sub b { color: var(--text-primary); font-weight: var(--k-w-semibold); font-variant-numeric: tabular-nums; }
.ch-status.review { color: var(--text-primary); }

.ch-moves {
  flex: 1;
  min-height: var(--k-s32);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: baseline;
  gap: var(--k-s4) var(--k-s8);
  padding: var(--k-s4) var(--k-s16) var(--k-s8);
  overflow-y: auto;
  scrollbar-width: none;
  font: var(--k-w-regular) var(--k-fs-secondary)/var(--k-lh-secondary) var(--k-font);
  color: var(--k-text-2);
  font-variant-numeric: tabular-nums;
}
.ch-moves::-webkit-scrollbar { display: none; }
/* Низкий экран: доске нужнее место, чем записи; листать ходы можно кнопками выше. */
@media (max-height: 700px) {
  :root { --ch-size: min(calc(100vw - var(--ch-axis)), 500px, calc(100dvh - 345px - env(safe-area-inset-top, 0px))); }
  .ch-moves { display: none; }
}
.ch-moves.empty { justify-content: center; align-content: center; }
/* Номер хода — вторичный текст, а не выключенный: выключенного цвета на
   фоне 2.07, и прочесть номер нельзя. */
.ch-n { color: var(--k-text-2); }
.ch-mv {
  padding: 0 var(--k-s4);
  min-height: var(--k-s24);
  border: 0;
  border-radius: var(--k-r-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
}
.ch-mv.cur { color: var(--bg-main); background: var(--text-primary); font-weight: var(--k-w-semibold); }

/* ----------------------------------------------------- действия и шторки */

.ch ~ .panel { grid-auto-flow: column; }
.ch ~ .panel .k-btn { padding: 0 var(--k-s8); }
.ch ~ .panel .k-btn[data-cd] { font-variant-numeric: tabular-nums; }

.ch-promo { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--k-s8); }
.ch-promo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--k-s4);
  min-height: var(--k-tap);
  padding: var(--k-s8) 0;
  border: 1px solid var(--k-divider);
  border-radius: var(--k-r-md);
  background: var(--k-surface);
  color: var(--k-text-2);
  font: var(--k-w-regular) var(--k-fs-caption)/var(--k-lh-caption) var(--k-font);
}
.ch-promo-btn:active { background: var(--k-elevated); }
.ch-promo-btn .ch-pc { width: 48px; height: 48px; background: var(--ch-light); border-radius: var(--k-r-sm); }

/* Лобби дуэли: два места, а не шесть. */
.seats-grid.duo { grid-template-columns: repeat(2, 1fr); }

@media (prefers-reduced-motion: reduce) {
  .ch-bar { transition: none; }
}