/* A tabla szerkezete (web spec 10.2) – temafuggetlen. A kinezet a themes/<nev>.css tokenjeibol jon. */
.board-frame {
  display: grid;
  /* koordinatak mind a negy oldalon, mint a valodi tablan */
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: ". top ." "left board right" ". bottom .";
  width: 100%;
  max-width: var(--board-max, 36rem);
  background: var(--board-frame);
  border-radius: .35rem;
  padding: .25rem;
  box-sizing: border-box;
  user-select: none;
  touch-action: manipulation;
}
.board { grid-area: board; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; }
.sq { position: relative; aspect-ratio: 1; background-size: contain; background-repeat: no-repeat; background-position: center; }
.sq.light { background-color: var(--sq-light); }
.sq.dark { background-color: var(--sq-dark); }
.coords { display: flex; color: var(--coord-color); font: 600 .7rem/1 system-ui, sans-serif; }
.coords span { flex: 1; display: flex; align-items: center; justify-content: center; }
.coords.ranks { flex-direction: column; width: 1rem; }
.coords.files { height: 1rem; }
.coords.left { grid-area: left; } .coords.right { grid-area: right; }
.coords.top { grid-area: top; } .coords.bottom { grid-area: bottom; }
/* forgatas: a keret fordul, a mezok es a feliratok visszafordulnak (a JS csak az attributumot irja) */
.board-frame[data-orientation="black"] { transform: rotate(180deg); }
.board-frame[data-orientation="black"] .sq,
.board-frame[data-orientation="black"] .coords span { transform: rotate(180deg); }
/* kiemelesek */
.sq.last { box-shadow: inset 0 0 0 100vmax var(--hl-last); }
.sq.selected { box-shadow: inset 0 0 0 100vmax var(--hl-selected); }
.sq.check { background-image: radial-gradient(circle, var(--hl-check) 0%, transparent 70%); }
.sq.dest::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: var(--hl-dest); }
.sq.dest[data-piece]::after { inset: 0; border-radius: 0; background: none; box-shadow: inset 0 0 0 .3rem var(--hl-dest); }
.board-frame[data-interactive="1"] .sq[data-piece] { cursor: grab; }
.sq.dragging { opacity: .4; }
/* babuk: a tema adja az utvonalakat */
.sq[data-piece="wK"], .pc[data-piece="wK"] { background-image: var(--piece-wK); }
.sq[data-piece="wQ"], .pc[data-piece="wQ"] { background-image: var(--piece-wQ); }
.sq[data-piece="wR"], .pc[data-piece="wR"] { background-image: var(--piece-wR); }
.sq[data-piece="wB"], .pc[data-piece="wB"] { background-image: var(--piece-wB); }
.sq[data-piece="wN"], .pc[data-piece="wN"] { background-image: var(--piece-wN); }
.sq[data-piece="wP"], .pc[data-piece="wP"] { background-image: var(--piece-wP); }
.sq[data-piece="bK"], .pc[data-piece="bK"] { background-image: var(--piece-bK); }
.sq[data-piece="bQ"], .pc[data-piece="bQ"] { background-image: var(--piece-bQ); }
.sq[data-piece="bR"], .pc[data-piece="bR"] { background-image: var(--piece-bR); }
.sq[data-piece="bB"], .pc[data-piece="bB"] { background-image: var(--piece-bB); }
.sq[data-piece="bN"], .pc[data-piece="bN"] { background-image: var(--piece-bN); }
.sq[data-piece="bP"], .pc[data-piece="bP"] { background-image: var(--piece-bP); }
/* a tablan kivuli babu (paletta, promocio, huzott kep) */
.pc { display: inline-block; width: 2.75rem; height: 2.75rem; background-size: contain; background-repeat: no-repeat; background-position: center; }
.drag-ghost { position: fixed; pointer-events: none; z-index: 10; }
/* promocio-valaszto */
.promo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--promo-bg); z-index: 5; }
.promo .pc { width: 20%; height: 20%; background-color: var(--sq-light); border-radius: .3rem; cursor: pointer; }