/* css/szachownica.css — interaktywna szachownica do osadzania w treści.
 *
 * Wymaga css/base.css (tokeny: kolory pól --sq-*, znaczniki --mark-*,
 * klasyfikacja --cls-*, odstępy, promienie, fonty). Bez własnych kolorów pól:
 * widżet podąża za zestawem [data-board-theme] i motywem [data-theme] strony,
 * tak samo jak plansza w aplikacji i diagramy statyczne.
 *
 * Wzorzec funkcjonalny: widżet partii w artykułach chess.com. Lista ruchów to
 * wiersze „numer | białe | czarne” na zmianę cieniowane, komentarz jako blok pod
 * wierszem, wariant jako wcięty blok z nawiasami przy zagnieżdżeniu, znaki
 * oceny jako plakietki przed ruchem. Pasek dolny: lupa i udostępnianie po
 * lewej, obrót, odtwarzanie i nawigacja po prawej.
 *
 * Bez JavaScriptu: statyczny HTML z tools/render-board.js pokazuje planszę,
 * wprowadzenie i listę ruchów. Przyciski są ukryte, dopóki skrypt nie ustawi
 * data-szw-ready="true" (martwy przycisk jest gorszy niż brak przycisku).
 *
 * Ładować raz na stronę, niezależnie od liczby widżetów. */

.szachownica {
  --szw-side-w: minmax(16rem, 45fr);
  --szw-comment-fs: var(--fs-2);
  --szw-comment: color-mix(in srgb, #5b9fe0 78%, var(--text));
  --szw-last: #f8f06a;
  --szw-row: color-mix(in srgb, var(--text) 4%, transparent);
  box-sizing: border-box;
  position: relative;
  max-width: 50rem;
  margin: var(--sp-5) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  line-height: 1.55;
  overflow: hidden;
}

/* Domyślne pola widżetu: zestaw „forest" z base.css (zieleń i krem), bo taki
   charakter ma wzorzec z chess.com. Atrybut data-board-theme NA WIDŻECIE
   wybiera inny zestaw z base.css; bez atrybutu widżet nie dziedziczy zestawu
   strony, żeby artykuł wyglądał tak samo niezależnie od ustawień aplikacji. */
.szachownica:not([data-board-theme]) {
  --sq-light: #d9ddca;
  --sq-dark: #49645a;
}

.szachownica *,
.szachownica *::before,
.szachownica *::after { box-sizing: inherit; }

.szachownica:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* sprite figur wstawiony raz na stronę: niewidoczny, bez wpływu na układ */
.szw-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* podpis z data-caption: pod planszą, nad paskiem sterowania */
.szw-caption {
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--szw-comment-fs);
  color: var(--text-dim);
}

/* ---- pasek górny: gracze, wynik ---- */
.szw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 2.25rem;
  padding: var(--sp-1) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-dim);
  font-size: var(--fs-1);
}

.szw-players {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.szw-sep { margin: 0 .5em; }

.szw-result {
  flex: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ---- plansza + lista ruchów ---- */
.szw-body {
  display: grid;
  grid-template-columns: minmax(0, 55fr) var(--szw-side-w);
}

.szw-body-solo { grid-template-columns: minmax(0, 1fr); }

.szw-board-wrap { padding: 0; }

.szw-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  -webkit-user-select: none;
  user-select: none;
}

.szw-light { fill: var(--sq-light); }
.szw-dark { fill: var(--sq-dark); }

/* ślad ostatniego ruchu: żółta nakładka jak na chess.com i lichess. Złoto
   z css/board.css jest wymierzone pod dużą planszę; na małej w artykule
   wyglądało jak brązowa plama, nie jak podświetlenie. */
.szw-last { fill: var(--szw-last); opacity: .6; }

.szw-check {
  fill: var(--sq-check);
  opacity: .78;
}

/* kolorowe pola [%csl] i strzałki [%cal]: cztery role wspólne z lichess i chess.com */
.szw-csl { opacity: .6; }
.szw-mark-green { fill: var(--mark-green); }
.szw-mark-red { fill: var(--mark-red); }
.szw-mark-blue { fill: var(--mark-blue); }
.szw-mark-yellow { fill: var(--mark-yellow); }

.szw-arrow {
  opacity: .82;
  stroke: var(--board-ink);
  stroke-width: .025;
  stroke-linejoin: round;
  pointer-events: none;
}

/* figury: zestaw Cburnett (kolory wpisane w ścieżki), kształt z <symbol> per widżet */
.szw-pc { pointer-events: none; }

.szw-coord {
  font-family: var(--font-ui);
  font-weight: 600;
  pointer-events: none;
}
.szw-on-light { fill: color-mix(in srgb, var(--sq-dark) 80%, black); }
.szw-on-dark { fill: color-mix(in srgb, var(--sq-light) 70%, white); }

/* ---- kolumna z ruchami ----
   Zewnętrzny element nie wnosi wysokości (wnętrze jest absolutne), więc wiersz
   siatki ma dokładnie wysokość planszy, a lista przewija się w środku. */
.szw-side {
  position: relative;
  min-height: 12rem;
  border-left: 1px solid var(--border);
}

.szw-side-inner {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.szw-intro {
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  color: var(--szw-comment);
  font-size: var(--szw-comment-fs);
  line-height: 1.5;
}

/* wiersz: numer | białe | czarne */
.szw-moves { padding-bottom: var(--sp-2); }

.szw-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--sp-2) 0 var(--sp-3);
}

.szw-row:nth-of-type(even) { background: var(--szw-row); }

.szw-row-dead {
  grid-template-columns: 2.2rem minmax(0, 1fr);
  min-height: 1.6rem;
}

.szw-num {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.szw-cell { min-width: 0; }

.szw-ellipsis { color: var(--text-dim); }

.szw-mv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 5px;
  border-radius: calc(var(--radius-sm) / 2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.szachownica[data-szw-ready="true"] .szw-mv[data-node] { cursor: pointer; }
.szachownica[data-szw-ready="true"] .szw-mv[data-node]:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }

.szw-mv.is-current {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent);
}

.szw-mv-dead {
  color: var(--text-dim);
  font-weight: 400;
}

/* czytnik ekranu dostaje znak oceny jako tekst, plakietka jest ozdobą */
.szw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* znaki oceny: plakietka przed ruchem i kolor zapisu, jak na chess.com;
   kolory z klasyfikacji analizy (wspólne z lichess i chess.com) */
.szw-g {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .3rem;
  border-radius: var(--radius-pill);
  background: var(--szw-g-bg, var(--text-dim));
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.szw-g-brilliant { --szw-g-bg: var(--cls-brilliant); }
.szw-g-great { --szw-g-bg: var(--cls-great); }
.szw-g-interesting { --szw-g-bg: var(--text-dim); }
.szw-g-dubious { --szw-g-bg: var(--cls-inaccuracy); }
.szw-g-mistake { --szw-g-bg: var(--cls-mistake); }
.szw-g-blunder { --szw-g-bg: var(--cls-blunder); }

.szw-mv-brilliant .szw-san { color: var(--cls-brilliant); }
.szw-mv-great .szw-san { color: var(--cls-great); }
.szw-mv-dubious .szw-san { color: var(--cls-inaccuracy); }
.szw-mv-mistake .szw-san { color: var(--cls-mistake); }
.szw-mv-blunder .szw-san { color: var(--cls-blunder); }

/* komentarz: blok pod wierszem, wcięty do kolumny ruchów; w rozmiarze ruchów
   i w niebieskim jak na chess.com, żeby odcinał się od zapisu */
.szw-comment {
  margin: 0;
  padding: var(--sp-1) var(--sp-3) var(--sp-2) 2.5rem;
  color: var(--szw-comment);
  font-size: var(--szw-comment-fs);
  line-height: 1.5;
}

/* wariant: wcięty blok z lewą kreską, ruchy w jednym ciągu */
.szw-var {
  margin: var(--sp-1) var(--sp-3) var(--sp-2) 2.4rem;
  padding: 2px 0 2px var(--sp-2);
  border-left: 2px solid color-mix(in srgb, var(--text) 25%, transparent);
  font-size: var(--fs-2);
  line-height: 1.75;
}

.szw-var .szw-mv {
  padding: 0 3px;
  font-weight: 600;
}

.szw-var .szw-num { margin-right: 1px; }

.szw-var .szw-g {
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: .68rem;
}

.szw-vc,
.szw-paren {
  color: var(--szw-comment);
  font-style: italic;
}

.szw-err {
  display: block;
  margin: 4px 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cls-blunder) 14%, var(--bg-raised));
  color: var(--text);
  font-size: var(--szw-comment-fs);
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
}

p.szw-err { margin: var(--sp-1) var(--sp-3) var(--sp-2) 2.4rem; }

.szw-side-inner > p.szw-err:first-child { margin: var(--sp-3) var(--sp-4) 0; }

/* ---- sterowanie: lupa i udostępnianie po lewej, obrót + odtwarzanie + nawigacja po prawej ---- */
.szw-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}

.szachownica:not([data-szw-ready="true"]) .szw-controls { display: none; }

.szw-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.szw-share { position: relative; }

.szw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-dim);
  font: 600 var(--fs-2) var(--font-ui);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.szw-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.szw-btn:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.szw-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.szw-btn:disabled {
  opacity: .3;
  cursor: default;
  background: transparent;
}

.szw-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.szw-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: var(--z-overlay);
  min-width: 14rem;
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: 0 8px 24px rgb(0 0 0 / .28);
}

.szw-menu[hidden] { display: none; }

.szw-menu-item {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: 500 var(--fs-2) var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.szw-menu-item:hover,
.szw-menu-item:focus-visible {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  outline: none;
}

.szw-status {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-2);
  font-size: var(--fs-1);
  color: var(--text-dim);
}

.szw-status:empty { padding: 0; }

.szw-clip {
  position: fixed;
  left: -9999px;
  top: 0;
}

/* ---- powiększenie (lupa): widżet na całym oknie ---- */
.szachownica.is-zoomed {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.szachownica.is-zoomed .szw-body {
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
  align-items: stretch;
}

.szachownica.is-zoomed .szw-board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--sp-3);
}

.szachownica.is-zoomed .szw-board {
  width: min(100%, calc(100dvh - 7.5rem));
  height: auto;
}

.szachownica.is-zoomed .szw-side { min-height: 0; }

html.szw-lock { overflow: hidden; }

/* ---- telefon: plansza na całą szerokość, ruchy pod nią ---- */
@media (max-width: 699px) {
  .szachownica { margin-left: 0; margin-right: 0; }
  .szw-body { grid-template-columns: minmax(0, 1fr); }
  .szw-side {
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .szw-side-inner {
    position: static;
    max-height: 13rem;
  }
  .szw-row { padding-left: var(--sp-3); }
  .szw-btn { min-width: 40px; padding: 0 4px; }

  /* Powiększenie na telefonie: cały widżet przewija się jak strona, pasek
     sterowania przyklejony do dołu, lista bez ograniczenia wysokości. */
  .szachownica.is-zoomed { display: block; overflow: auto; }
  .szachownica.is-zoomed .szw-body { grid-template-columns: minmax(0, 1fr); }
  .szachownica.is-zoomed .szw-board-wrap { display: block; padding: 0; }
  .szachownica.is-zoomed .szw-board { width: 100%; }
  .szachownica.is-zoomed .szw-side-inner { max-height: none; }
  .szachownica.is-zoomed .szw-controls { position: sticky; bottom: 0; z-index: var(--z-raised); }
}

@media (prefers-reduced-motion: reduce) {
  .szw-side-inner { scroll-behavior: auto; }
  .szw-btn { transition: none; }
}

@media print {
  .szw-controls, .szw-status { display: none !important; }
  .szw-side-inner { position: static; max-height: none; overflow: visible; }
}