/* board.css — szachownica, figury, podswietlenia, strzalki, okno promocji */

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  /* dotyk: blokujemy scroll/zoom nad plansza, zeby przeciaganie dzialalo */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.sq {
  position: relative;
  display: grid;
  place-items: center;
}
.sq:focus-visible {
  outline: 4px solid #fff;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 7px #111;
  z-index: 5;
}
.sq-light { background: var(--sq-light); }
.sq-dark  { background: var(--sq-dark); }

.board-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- wspolrzedne w rogach pol ---- */
.coord {
  position: absolute;
  font-size: clamp(8px, 1.5cqw, 11px);
  font-weight: 700;
  line-height: 1;
  opacity: .72;
  pointer-events: none;
  font-family: var(--font-mono);
}
.coord-file { right: 3px; bottom: 2px; }
.coord-rank { left: 3px; top: 2px; }
.sq-light .coord { color: var(--sq-dark); }
.sq-dark  .coord { color: var(--sq-light); }
.board.no-coords .coord { display: none; }

/* ---- figury ---- */
.piece {
  width: 88%;
  height: 88%;
  display: block;
  pointer-events: none;   /* zdarzenia obsluguje kontener planszy */
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.32));
}
.pc-w { --pc-fill: var(--pc-white-fill); --pc-edge: var(--pc-white-edge); }
.pc-b { --pc-fill: var(--pc-black-fill); --pc-edge: var(--pc-black-edge); }

/* figura w trakcie przeciagania — oryginal znika, leci klon */
.piece.is-dragging { opacity: 0; }

.drag-ghost {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
  will-change: transform, left, top;
}

/* animacja przesuniecia figury po ruchu */
.piece.is-sliding { transition: transform .16s var(--ease); }

/* ---- stany pol ---- */
.sq.is-last-move.sq-light { background: var(--sq-light-active); }
.sq.is-last-move.sq-dark  { background: var(--sq-dark-active); }

/* Informacja zwrotna po próbie ruchu w zadaniu. Źródło dostaje obwódkę,
   cel pełny impuls, więc znaczenie nie zależy wyłącznie od koloru. */
.sq.is-move-feedback { z-index: 3; }
.sq.is-move-source { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--move-feedback-color) 84%, white); }
.sq.is-move-target { box-shadow: inset 0 0 0 6px var(--move-feedback-color); }
.sq.is-move-success { --move-feedback-color: var(--cls-best); }
.sq.is-move-error { --move-feedback-color: var(--cls-blunder); }

@keyframes move-error-target {
  0% { box-shadow: inset 0 0 0 0 var(--move-feedback-color); }
  38% { box-shadow: inset 0 0 0 7px var(--move-feedback-color); }
  100% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--move-feedback-color) 72%, transparent); }
}
@keyframes move-error-board {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-2px); }
  65% { transform: translateX(2px); }
}
@keyframes move-success-piece {
  0% { transform: scale(.9); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes task-waiting-ring {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
}

.sq.is-move-error.is-move-target { animation: move-error-target 360ms cubic-bezier(.22,1,.36,1); }
.board.is-feedback-error { animation: move-error-board 180ms ease-out; }
.sq.is-move-success.is-move-target .piece { animation: move-success-piece 300ms cubic-bezier(.22,1,.36,1); }
.board.is-task-waiting {
  cursor: progress;
  animation: task-waiting-ring 520ms ease-in-out infinite;
}

.sq.is-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent-strong) 42%, transparent);
  z-index: 1;
}

.sq.is-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid rgba(255,255,255,.75);
  z-index: 3;
  pointer-events: none;
}

/* kropka = puste pole, obwodka = bicie */
.sq.is-legal > .legal-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.sq.is-legal > .legal-hint::before {
  content: "";
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0,0,0,.26);
}
.sq.is-legal.is-capture > .legal-hint::before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: none;
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.26);
}

/* krol w szachu */
.sq.is-check::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at center,
              rgba(216,72,63,.95) 12%,
              rgba(216,72,63,.55) 44%,
              rgba(216,72,63,0) 72%);
}

/* recznie zaznaczone pole (prawy przycisk myszy) */
.sq.is-marked::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 4px solid var(--mark-green);
  opacity: .85;
  pointer-events: none;
}

/* pole nieaktywne przy przegladaniu historii */
.board.is-readonly { cursor: default; }
.board:not(.is-readonly) .sq.has-movable-piece { cursor: grab; }

/* ---- warstwa strzalek ---- */
.board-arrows {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.arrow-shape {
  fill: var(--mark-green);
  opacity: .78;
  transform-box: fill-box;
  transform-origin: left center;
  animation: arrow-reveal 200ms cubic-bezier(.22,1,.36,1) both;
}
.arrow-shape.arrow-hint { fill: #2f80ed; opacity: .8; }
.arrow-shape.arrow-best { fill: var(--cls-best); opacity: .85; }
.arrow-shape.arrow-played-inaccuracy { fill: var(--cls-inaccuracy); opacity: .88; }
.arrow-shape.arrow-played-mistake { fill: var(--cls-mistake); opacity: .88; }
.arrow-shape.arrow-played-blunder { fill: var(--cls-blunder); opacity: .88; }

@keyframes arrow-reveal {
  from { opacity: 0; transform: scaleX(.72); }
}

/* ---- okno wyboru figury przy promocji ---- */
.promo-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(6,10,14,.62);
  display: grid;
  place-items: center;
  border-radius: var(--radius);
}
.promo-box {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 90%;
}
.promo-title { font-size: 15px; margin-bottom: var(--sp-3); color: var(--text-dim); }
.promo-choices { display: flex; gap: var(--sp-2); }
.promo-choice {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  border-radius: var(--radius);
  padding: 6px;
  cursor: pointer;
  width: clamp(52px, 12vw, 68px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.promo-choice:hover { border-color: var(--accent); background: var(--bg-raised); }
.promo-choice .piece { width: 100%; height: 100%; filter: none; }
.promo-cancel {
  margin-top: var(--sp-3);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- podswietlenia dydaktyczne (js/board.js: setHighlights) ----
   Kazdy rodzaj ma WLASNY KSZTALT, nie tylko kolor: pelna ramka, ramka
   przerywana, krazek albo naroznik. Dzieki temu znaczenie zostaje czytelne
   przy daltonizmie i w druku, a tresc znaczeniowa i tak trafia dodatkowo do
   nazwy dostepnej pola. */
.sq.is-highlight { position: relative; }

.sq.is-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Figura, ktora wykonuje robote: pelna, gruba ramka. */
.sq.is-highlight-attacker::after {
  border: 4px solid var(--hl-attacker);
}

/* Cel ataku: krazek w srodku pola, wyraznie inny ksztalt niz ramka. */
.sq.is-highlight-target::after {
  border: 4px solid var(--hl-target);
  border-radius: 50%;
  inset: 12%;
}

/* Slaby punkt: ramka przerywana, czyli „uwaga, tu jest dziura". */
.sq.is-highlight-weak::after {
  border: 3px dashed var(--hl-weak);
}

/* Linia dzialania figury: delikatne wypelnienie, bez ramki. */
.sq.is-highlight-path::after {
  background: color-mix(in srgb, var(--hl-path) 26%, transparent);
}

/* Pole docelowe planu: naroznik, jak znacznik na mapie. */
.sq.is-highlight-idea::after {
  border-top: 5px solid var(--hl-idea);
  border-right: 5px solid var(--hl-idea);
  inset: 8% 8% auto auto;
  width: 30%;
  height: 30%;
}

/* Podswietlenia nie moga przykrywac zaznaczenia wlasnego ruchu gracza. */
.sq.is-selected.is-highlight::after { opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  .sq.is-highlight::after { transition: opacity 140ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  .sq.is-move-feedback,
  .sq.is-move-feedback .piece,
  .board.is-feedback-error,
  .board.is-task-waiting,
  .arrow-shape { animation: none !important; }
}