/* Szachownica i figury — wspólne dla gry z komputerem (index.html) i partii przez internet (gra.html).
   Figury: zestaw „Cburnett” (Colin M.L. Burnett, licencja BSD) w img/figury/. */
.board {
  position: relative; border: 6px solid #5a3a22; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08);
  background: #f0d9b5; touch-action: manipulation; cursor: pointer;
}
.squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.sq { position: relative; background: #f0d9b5; }
.sq.d { background: #b58863; }
.sq.last { background: #e4dc84; }
.sq.d.last { background: #b9a648; }
.sq.sel { background: #9fc08a; }
.sq.d.sel { background: #7e9b5e; }
.sq.check { background-image: radial-gradient(circle, rgba(255,40,40,.95) 0%, rgba(230,20,20,.75) 35%, rgba(200,0,0,0) 72%); }
.sq.hint { box-shadow: inset 0 0 0 4px #1d4ed8; }
.sq .dot { position: absolute; inset: 36%; border-radius: 50%; background: rgba(20,75,25,.55); pointer-events: none; z-index: 2; }
.sq .ring { position: absolute; inset: 2%; border-radius: 50%; border: calc(var(--sq, 40px) * .09) solid rgba(20,75,25,.55); pointer-events: none; z-index: 2; }
.sq:focus-visible { outline: 4px solid var(--fokus, #1d4ed8); outline-offset: -4px; z-index: 3; }
/* współrzędne w CSS (nie w treści pola): nazwa pola dla czytnika to „e4, …”, a widoczny tekst nie może jej przeczyć */
.sq[data-cl]::before, .sq[data-cn]::after { position: absolute; font-size: 0.625rem; font-weight: 700; color: #6b4423; pointer-events: none; line-height: 1; z-index: 1; }
.sq.d[data-cl]::before, .sq.d[data-cn]::after { color: #2b1708; }
.sq[data-cl]::before { content: attr(data-cl); left: 2px; top: 2px; }
.sq[data-cn]::after { content: attr(data-cn); right: 2px; bottom: 2px; }

.pieces { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.piece, .pc { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.piece { position: absolute; width: 12.5%; height: 12.5%; transition: left .18s ease-in-out, top .18s ease-in-out, opacity .2s; }
.piece.moving { z-index: 5; }
.piece.gone { opacity: 0; }
.piece.shake { animation: shake .3s; }
@keyframes shake { 0%, 100% { translate: 0; } 25% { translate: -4px; } 75% { translate: 4px; } }
.w.t1 { background-image: url('/img/figury/wp.svg'); } .b.t1 { background-image: url('/img/figury/bp.svg'); }
.w.t2 { background-image: url('/img/figury/wn.svg'); } .b.t2 { background-image: url('/img/figury/bn.svg'); }
.w.t3 { background-image: url('/img/figury/wb.svg'); } .b.t3 { background-image: url('/img/figury/bb.svg'); }
.w.t4 { background-image: url('/img/figury/wr.svg'); } .b.t4 { background-image: url('/img/figury/br.svg'); }
.w.t5 { background-image: url('/img/figury/wq.svg'); } .b.t5 { background-image: url('/img/figury/bq.svg'); }
.w.t6 { background-image: url('/img/figury/wk.svg'); } .b.t6 { background-image: url('/img/figury/bk.svg'); }

/* zbite figury przy wyniku */
.taken { display: inline-flex; align-items: center; }
.taken .pc { width: 1rem; height: 1rem; margin-right: -0.3rem; display: inline-block; }
.taken .plus { margin-left: 0.45rem; font-weight: 700; }

/* zapis partii w jednym wierszu */
.moves { width: 100%; max-width: 760px; flex-shrink: 0; overflow-x: auto; white-space: nowrap; font-size: 0.8125rem; font-variant-numeric: tabular-nums; padding: 2px 4px; min-height: 1.6rem; scrollbar-width: thin; border-radius: 8px; }
.moves:focus-visible { outline: 3px solid var(--fokus, #1d4ed8); outline-offset: 1px; }
.moves .no { opacity: .8; margin-left: 6px; }
.moves .mv { padding: 1px 3px; border-radius: 4px; }
.moves .mv.cur { background: var(--chip, rgba(0,0,0,.12)); font-weight: 700; }
.moves .empty { opacity: .8; }

/* wybór figury przy promocji */
.promo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.promo button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px !important; font-size: 0.8125rem !important; min-height: 44px; }
.promo .pc { width: 3rem; height: 3rem; display: block; background-color: #f0d9b5; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) { .piece { transition: none; } .piece.shake { animation: none; } }