/* Плеер партий (templates/includes/chess/player.html). Раскладка "доска +
   панель", карточки и навигация - общие стили доски (board/board.css). */

/* Над доской и под ней - строки игроков: доска чуть меньше, чтобы всё
   помещалось на экране. */
.chess-app.pl { --board-max: max(300px, calc(100vh - 340px)); }
@supports (height: 100svh) {
  .chess-app.pl { --board-max: max(300px, calc(100svh - 340px)); }
}

/* ---------- Игроки над и под доской ---------- */
.pl-player {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--board-max);
  margin-inline: auto;
  padding: 6px 2px;
  min-height: 38px;
  font-weight: 600;
}
.pl-player .cb-piece-image { width: 24px; height: 24px; flex-shrink: 0; }
.pl-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-player-elo { color: var(--hint); font-weight: 400; font-size: 0.9rem; }
.pl-player-material { margin-left: auto; color: var(--link-green); font-size: 0.9rem; }
/* Доска на телефоне - от края до края экрана, а имена и перевес - с отступом
   текста страницы, не вплотную к краям. */
@media (max-width: 640px) {
  .chess-app-bleed .pl-player { padding-inline: 20px; }
}

/* ---------- Сведения о партии ---------- */
.pl-info p { margin: 0; }
.pl-info .chess-favorite ~ .pl-event { padding-right: 30px; }
.pl-event { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.pl-event:empty { display: none; }
.pl-opening { margin-top: 6px !important; color: var(--hint); font-size: 0.86rem; }
.pl-opening[hidden] { display: none; }
.pl-position { margin-top: 8px !important; }
.pl-position strong { font-size: 1.05rem; }
.pl-position span { color: var(--muted); font-size: 0.92rem; }
.pl-error { margin-top: 8px !important; color: var(--danger); font-size: 0.9rem; }
.pl-error[hidden] { display: none; }

/* ---------- Управление ---------- */
.pl-controls button[aria-pressed="true"],
.pl-controls .pl-play.is-playing { color: var(--accent); background: var(--bg-hover); }
.pl-play .icon-pause,
.pl-play.is-playing .icon-play { display: none; }
.pl-play.is-playing .icon-pause { display: block; }
/* Кнопка воспроизведения - главная: шире остальных. */
.pl-controls .pl-play { flex-grow: 1.4; }

/* Ползунок по партии, скорость воспроизведения и поворот доски - одной строкой. */
.pl-settings { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; }
.pl-progress { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: var(--accent); }
.pl-settings select { width: auto; flex-shrink: 0; padding: 4px 6px; font-size: 0.9rem; }
.pl-flip {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  cursor: pointer;
}
.pl-flip:hover { background: var(--bg-hover); color: var(--link); }
.pl-flip .icon { width: 20px; height: 20px; }

/* ---------- Комментарий к ходу ---------- */
.pl-comment {
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-block);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
  max-height: 140px;
  overflow-y: auto;
}
.pl-comment[hidden] { display: none; }

/* Действия под плеером: по центру под доской и панелью. */
.pl-actions { justify-content: center; margin-top: 12px; }
.pl-actions .btn .icon { width: 18px; height: 18px; }

/* На широком экране панель не выше доски с игроками: список ходов
   прокручивается внутри. */
@container (min-width: 700px) {
  .pl .chess-app-side > * { flex-shrink: 0; }
  .pl .chess-app-side .chess-moves { flex: 1 1 auto; min-height: 90px; }
}

/* ---------- Списки плеера ---------- */
.pl-list-meta { color: var(--hint); font-size: 0.85rem; }

.pl-favorite-mark { color: var(--warning); }
.pl-favorite-mark .icon { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; }

.pl-upload textarea { font-family: var(--mono); font-size: 0.88rem; }
.pl-upload-message { margin: 10px 0 0; font-size: 0.92rem; }
.pl-upload-message[data-tone="good"] { color: var(--link-green); }
.pl-upload-message[data-tone="bad"] { color: var(--danger); }
.pl-preview { margin-top: 24px; }
.pl-preview[hidden] { display: none; }

/* Удаление партии - со второго нажатия (static/js/main.js, data-confirm). */
.my-row-actions .btn.confirm { border-color: var(--danger); color: var(--danger); }
.pl-actions .btn { flex: 0 0 auto; }