/* Шахматы в сцене PvP: доска 8×8 на кнопках, слой фигур поверх, часы над и под, список ходов справа (на телефоне —
   лентой под доской). Цвета — токены game.css; у клеток свои два тона из латуни и сажи, чтобы кость и тёмная латунь
   фигур читались на обеих. Переворот за чёрных — direction: rtl и column-reverse, DOM не трогается.
   Ширину меряем по контейнеру (.ch-host, его ставит CH.mount), не по окну: сцена на телефоне и так во весь экран.
   Старые браузеры (iOS ≤ 15) без container queries и color-mix: клетки — готовые цвета (те же смеси, посчитанные
   для основной темы), узкая раскладка — по ширине окна.
   Все классы с префиксом ch-. */
.ch-host { container-type: inline-size; }
.ch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }   /* символы фигур: в строку не встают (иначе +21 px сверху) */
/* доска — по ширине и по высоте окна: всё остальное в широкой раскладке (часы, строка, кнопки, шапка сцены) ≈ 256 px;
   сначала vh для старых браузеров, потом dvh (на телефоне без панели адреса) */
.ch {
  --ch-light: #74673e; --ch-dark: #3e3b23; --ch-last: rgba(240,181,122,.25); --ch-size: 480px;
  --ch-size: max(240px, min(480px, calc(100vh - 256px)));
  --ch-size: max(240px, min(480px, calc(100dvh - 256px)));
  display: grid; grid-template-columns: var(--ch-size) minmax(150px, 220px); grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "top side" "board side" "bottom side" "status side" "btns side";
  gap: 10px 16px; justify-content: center; align-items: start; font-family: var(--ui); color: var(--text);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ch { --ch-light: color-mix(in srgb, var(--brass) 48%, var(--surface-2)); --ch-dark: color-mix(in srgb, var(--line-brass) 34%, var(--surface-2));
    --ch-last: color-mix(in srgb, var(--call) 25%, transparent); }
}

/* часы: имя слева, время справа; ходящая сторона — латунная рамка, меньше 20 с — кровь */
.ch-clock { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--r-2);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t-fast), background var(--t-fast); }
.ch-top { grid-area: top; }
.ch-bottom { grid-area: bottom; }
.ch-who { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 15px/1 var(--ui); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-who::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 2px; background: #f1e6c8; box-shadow: inset 0 0 0 1px #6e5326; }
.ch-who .ch-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ch-who .ch-rk { display: inline-flex; flex: none; margin: 0 -2px; }
.ch-who .ch-rk:empty { display: none; }
.ch-clock[data-c="b"] .ch-who::before { background: #4a3a1c; box-shadow: inset 0 0 0 1px #c9a45c; }
.ch-time { font: 700 26px/1 var(--ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text); }
.ch-clock.ch-active { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--brass); }
.ch-clock.ch-active .ch-who { color: var(--text); }
.ch-clock.ch-low .ch-time { color: var(--danger); }
.ch-clock.ch-active.ch-low { box-shadow: inset 0 0 0 2px var(--danger); }

/* доска */
.ch-boardwrap { grid-area: board; position: relative; width: 100%; aspect-ratio: 1; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 1px var(--line-brass), 0 12px 32px rgba(0,0,0,.5); }
@supports not (aspect-ratio: 1) { .ch-boardwrap::before { content: ""; display: block; padding-top: 100%; } }   /* iOS 14: квадрат без aspect-ratio */
.ch-board { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ch-flip .ch-board { direction: rtl; flex-direction: column-reverse; }
.ch-row { display: flex; flex: 1; min-height: 0; }
.ch-cell { position: relative; flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--ch-light); color: inherit;
  -webkit-tap-highlight-color: transparent; cursor: default; touch-action: manipulation; }
.ch-cell.ch-d { background: var(--ch-dark); }
.ch-cell.ch-last { background-image: linear-gradient(var(--ch-last), var(--ch-last)); }
.ch-cell.ch-mine { cursor: pointer; }
.ch-cell.ch-mine:hover { box-shadow: inset 0 0 0 2px var(--line-brass); }
.ch-cell.ch-can, .ch-cell.ch-cap { cursor: pointer; }
.ch-cell.ch-sel, .ch-cell.ch-sel:hover { box-shadow: inset 0 0 0 3px var(--brass); }
.ch-cell:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: -2px; z-index: 1; }
/* шах: заливка кровью и два пульса */
.ch-cell.ch-check::before { content: ""; position: absolute; inset: 0; background: var(--danger); opacity: .35; animation: ch-pulse .7s ease-in-out 2; pointer-events: none; }
@keyframes ch-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
/* цели хода: точка души, на взятии — кольцо вокруг фигуры */
.ch-cell.ch-can::after, .ch-cell.ch-cap::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.ch-cell.ch-can::after { width: 28%; height: 28%; background: var(--soul); opacity: .85; box-shadow: 0 0 0 2px rgba(13,42,34,.35); }
.ch-cell.ch-cap::after { width: 88%; height: 88%; box-shadow: inset 0 0 0 4px var(--soul); opacity: .85; }
.ch-cell.ch-can:hover::after { opacity: 1; }
/* координаты: буквы в нижнем ряду, цифры в левом столбце; у перевёрнутой доски — другие края */
.ch-cf, .ch-cr { position: absolute; display: none; font: 600 10px/1 var(--ui); color: rgba(0,0,0,.6); pointer-events: none; direction: ltr; }
.ch-d .ch-cf, .ch-d .ch-cr { color: rgba(241,230,200,.6); }
.ch-cf { right: 3px; bottom: 2px; }
.ch-cr { left: 3px; top: 2px; }
[data-sq$="1"] .ch-cf, [data-sq^="a"] .ch-cr { display: block; }
.ch-flip [data-sq$="1"] .ch-cf, .ch-flip [data-sq^="a"] .ch-cr { display: none; }
.ch-flip [data-sq$="8"] .ch-cf, .ch-flip [data-sq^="h"] .ch-cr { display: block; }

/* фигуры: слой поверх клеток, позиция через transform, ход — плавный переезд, снятие — растворение */
.ch-pieces { position: absolute; inset: 0; pointer-events: none; }
.ch-piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; padding: 2px; overflow: visible;
  transition: transform .18s ease-out, opacity .16s ease-out; will-change: transform; }
.ch-piece.ch-gone { opacity: 0; }
.ch-locked .ch-board { pointer-events: none; }
.ch-locked .ch-cell.ch-mine { cursor: default; }

/* превращение: четыре фигуры над клеткой */
.ch-promo { position: absolute; z-index: 6; display: flex; gap: 4px; padding: 4px; border-radius: var(--r-2); background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--brass), 0 10px 26px rgba(0,0,0,.6); }
.ch-pbtn { width: 50px; height: 50px; padding: 3px; border: 0; border-radius: var(--r-1); background: var(--ch-light); cursor: pointer; }
.ch-pbtn:hover, .ch-pbtn:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.ch-pbtn svg { display: block; width: 100%; height: 100%; }

/* итог поверх доски */
.ch-result { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(13,16,12,.72); }
.ch-card { display: grid; gap: 6px; max-width: 82%; padding: 18px 26px; text-align: center; border-radius: var(--r-3); background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--brass), 0 20px 50px rgba(0,0,0,.6); }
.ch-card h3 { margin: 0; font: 900 30px/1.1 var(--display); color: var(--brass-hi); }
.ch-card.ch-lost h3 { color: var(--danger-soft); }
.ch-card.ch-draw h3 { color: var(--text); }
.ch-card p { margin: 0; color: var(--text-dim); font-size: 15px; }
.ch-card b { color: var(--soul); font-size: 18px; }
.ch-card .ch-rk-off { max-width: 34ch; margin: 2px auto 0; color: var(--text-dim); font-size: 13px; line-height: 1.35; font-style: italic; }

/* строка состояния и кнопки */
.ch-status { grid-area: status; display: flex; align-items: baseline; gap: 8px; min-height: 22px; font: 600 15px/1.3 var(--ui); }
.ch-left { font-weight: 500; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ch-note { margin-left: auto; font: 500 13px/1.3 var(--ui); color: var(--danger-soft); text-align: right; }
.ch-note:empty { display: none; }
.ch-btns { grid-area: btns; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ch-btn { min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-brass); font: 600 13px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: box-shadow var(--t-fast), background var(--t-fast); }
.ch-btn:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.ch-btn:disabled { opacity: .45; cursor: default; box-shadow: inset 0 0 0 1px var(--line); }
.ch-btn.ch-warn { background: var(--danger); color: #fff; box-shadow: none; }
.ch-btn.ch-ok { background: var(--soul); color: var(--on-soul); box-shadow: none; }
.ch-btn[hidden] { display: none; }

/* список ходов парами */
.ch-side { grid-area: side; display: flex; flex-direction: column; height: 0; min-height: 100%; min-width: 0; }
.ch-side h4 { margin: 0 0 6px; font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.ch-moves { flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; border-radius: var(--r-2); background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line); font: 15px/1.3 var(--ui); font-variant-numeric: tabular-nums; scrollbar-width: thin; }
.ch-moves li { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 4px; padding: 3px 8px; }
.ch-moves li:nth-child(even) { background: rgba(255,255,255,.03); }
.ch-moves b { color: var(--text-dim); font-weight: 500; }
.ch-moves .ch-cur { color: var(--brass-hi); font-weight: 700; }
.ch-moves:empty::after { content: "ходов ещё нет"; display: block; padding: 8px; color: var(--text-dim); font-size: 13px; }

/* узко (телефон, планшет): один столбец не шире 480 — часы 40, доска во всю ширину (358 при 390), лента ходов 32, кнопки в ряд по 3 */
@container (max-width: 720px) {
  .ch { max-width: 480px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "top" "board" "bottom" "side" "status" "btns"; gap: 8px; }
  .ch { max-width: max(240px, min(480px, calc(100vh - 320px))); max-width: max(240px, min(480px, calc(100dvh - 320px))); }   /* ≈ 315 px на остальное */
  .ch-clock { height: 40px; padding: 0 12px; }
  .ch-who { font-size: 14px; }
  .ch-time { font-size: 24px; }
  .ch-side { height: auto; min-height: 0; }
  .ch-side h4 { display: none; }
  .ch-moves { display: flex; flex: none; align-items: center; height: 32px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; font-size: 14px; }
  .ch-moves::-webkit-scrollbar { display: none; }
  .ch-moves li { display: flex; flex: none; gap: 6px; align-items: center; height: 100%; padding: 0 8px; white-space: nowrap; }
  .ch-moves li:nth-child(even) { background: transparent; }
  .ch-moves:empty::after { padding: 0 8px; }
  .ch-status { font-size: 14px; }
  .ch-btn { padding: 8px 6px; font-size: 12px; }
  .ch-pbtn { width: 44px; height: 44px; }
  .ch-card h3 { font-size: 26px; }
}
/* то же без container queries: окно сцены — 96 % ширины минус поля, так что 760 px окна ≈ 720 px контейнера */
@supports not (container-type: inline-size) {
  @media (max-width: 760px) {
    .ch { max-width: 480px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "top" "board" "bottom" "side" "status" "btns"; gap: 8px; }
    .ch { max-width: max(240px, min(480px, calc(100vh - 320px))); max-width: max(240px, min(480px, calc(100dvh - 320px))); }
    .ch-clock { height: 40px; padding: 0 12px; }
    .ch-who { font-size: 14px; }
    .ch-time { font-size: 24px; }
    .ch-side { height: auto; min-height: 0; }
    .ch-side h4 { display: none; }
    .ch-moves { display: flex; flex: none; align-items: center; height: 32px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; font-size: 14px; }
    .ch-moves::-webkit-scrollbar { display: none; }
    .ch-moves li { display: flex; flex: none; gap: 6px; align-items: center; height: 100%; padding: 0 8px; white-space: nowrap; }
    .ch-moves li:nth-child(even) { background: transparent; }
    .ch-moves:empty::after { padding: 0 8px; }
    .ch-status { font-size: 14px; }
    .ch-btn { padding: 8px 6px; font-size: 12px; }
    .ch-pbtn { width: 44px; height: 44px; }
    .ch-card h3 { font-size: 26px; }
  }
}
/* телефон лёжа (и любое низкое окно): доска слева во всю высоту, часы, строка, кнопки и ходы — колонкой справа */
@media (orientation: landscape) and (max-height: 520px) {
  .ch-host .ch { max-width: none; margin: 0 auto; --ch-size: max(200px, min(480px, calc(100vh - 92px))); --ch-size: max(200px, min(480px, calc(100dvh - 92px)));
    grid-template-columns: var(--ch-size) minmax(150px, 240px); grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "board top" "board bottom" "board status" "board btns" "board side"; gap: 6px 12px; }
  .ch-host .ch-clock { height: 36px; padding: 0 10px; }
  .ch-host .ch-time { font-size: 22px; }
  .ch-host .ch-btns { grid-template-columns: repeat(2, 1fr); }
  .ch-host .ch-side { height: 0; min-height: 100%; }
  .ch-host .ch-side h4 { display: none; }
  .ch-host .ch-moves { display: block; height: auto; overflow-x: hidden; overflow-y: auto; }
  .ch-host .ch-moves li { display: grid; height: auto; padding: 2px 8px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-piece { transition: none; }
  .ch-cell.ch-check::before { animation: none; }
}