/* ==========================================================================
   Chessground Board Colors — Bauhaus Theme

   Board background SVG is generated dynamically in JS.
   ========================================================================== */

cg-board {
  background-image: var(--board-bg);
}

/* ==========================================================================
   Square Highlights
   ========================================================================== */

cg-board square.last-move {
  background-color: rgba(26, 58, 143, 0.12);
}

cg-board square.selected {
  background-color: rgba(26, 58, 143, 0.15);
}

cg-board square.check {
  background-color: rgba(212, 40, 40, 0.5);
  box-shadow: inset 0 0 0 3px var(--red);
}

cg-board square.move-dest {
  background: radial-gradient(rgba(26, 58, 143, 0.4) 22%, transparent 22%);
}

cg-board square.move-dest.oc {
  background: radial-gradient(transparent 0%, transparent 80%, rgba(26, 58, 143, 0.25) 80%);
}

cg-board square.highlight-blunder {
  background-color: rgba(212, 40, 40, 0.25) !important;
  box-shadow: inset 0 0 0 3px var(--red);
}

cg-board square.highlight-best {
  background-color: rgba(45, 143, 62, 0.25) !important;
  box-shadow: inset 0 0 0 3px var(--correct);
}

cg-board square.highlight-user {
  background-color: rgba(242, 193, 46, 0.25) !important;
  box-shadow: inset 0 0 0 3px var(--yellow);
}

cg-board square.highlight-hanging {
  background-color: rgba(212, 40, 40, 0.12) !important;
  box-shadow: inset 0 0 0 2px rgba(212, 40, 40, 0.4) !important;
}

cg-board square.highlight-king-danger {
  background-color: rgba(242, 193, 46, 0.1) !important;
  box-shadow: inset 0 0 0 2px rgba(242, 193, 46, 0.4) !important;
}

cg-board square.highlight-checking {
  background-color: rgba(242, 193, 46, 0.1) !important;
  box-shadow: inset 0 0 0 2px rgba(242, 193, 46, 0.4) !important;
}

cg-board square.highlight-tactic-primary {
  box-shadow: inset 0 0 0 3px var(--blue) !important;
  background-color: rgba(26, 58, 143, 0.25) !important;
}

cg-board square.highlight-tactic-secondary {
  background-color: rgba(26, 58, 143, 0.2) !important;
  box-shadow: inset 0 0 0 2px var(--blue) !important;
}

/* ==========================================================================
   Coordinate Labels — inside-board positioning
   ========================================================================== */

#board.cg-wrap coords {
  font-family: var(--font-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
  text-shadow: none;
  z-index: 2;
}

#board.cg-wrap coords.ranks,
#board.cg-wrap coords.ranks.left {
  left: 2px;
  top: 0;
  height: 100%;
  width: auto;
  align-items: flex-start;
}

#board.cg-wrap coords.ranks coord {
  transform: none;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  line-height: 1;
}

#board.cg-wrap coords.files,
#board.cg-wrap coords.files.black {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12.5%;
}

#board.cg-wrap coords.files coord {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 3px;
  padding-bottom: 5px;
}

#board.cg-wrap.hide-coords coords {
  display: none;
}

#board.cg-wrap coords coord.coord-light {
  color: var(--board-dark, #8B7355);
}

#board.cg-wrap coords coord.coord-dark {
  color: var(--board-light, #D4C4A0);
}

/* ==========================================================================
   Piece Images
   ========================================================================== */

.cg-wrap piece.pawn.white   { background-image: url(/static/pieces/gioco/wP.svg); }
.cg-wrap piece.rook.white   { background-image: url(/static/pieces/gioco/wR.svg); }
.cg-wrap piece.knight.white { background-image: url(/static/pieces/gioco/wN.svg); }
.cg-wrap piece.bishop.white { background-image: url(/static/pieces/gioco/wB.svg); }
.cg-wrap piece.queen.white  { background-image: url(/static/pieces/gioco/wQ.svg); }
.cg-wrap piece.king.white   { background-image: url(/static/pieces/gioco/wK.svg); }
.cg-wrap piece.pawn.black   { background-image: url(/static/pieces/gioco/bP.svg); }
.cg-wrap piece.rook.black   { background-image: url(/static/pieces/gioco/bR.svg); }
.cg-wrap piece.knight.black { background-image: url(/static/pieces/gioco/bN.svg); }
.cg-wrap piece.bishop.black { background-image: url(/static/pieces/gioco/bB.svg); }
.cg-wrap piece.queen.black  { background-image: url(/static/pieces/gioco/bQ.svg); }
.cg-wrap piece.king.black   { background-image: url(/static/pieces/gioco/bK.svg); }

.cg-wrap piece.ghost.pawn.white   { background-image: url(/static/pieces/gioco/wP.svg); }
.cg-wrap piece.ghost.rook.white   { background-image: url(/static/pieces/gioco/wR.svg); }
.cg-wrap piece.ghost.knight.white { background-image: url(/static/pieces/gioco/wN.svg); }
.cg-wrap piece.ghost.bishop.white { background-image: url(/static/pieces/gioco/wB.svg); }
.cg-wrap piece.ghost.queen.white  { background-image: url(/static/pieces/gioco/wQ.svg); }
.cg-wrap piece.ghost.king.white   { background-image: url(/static/pieces/gioco/wK.svg); }
.cg-wrap piece.ghost.pawn.black   { background-image: url(/static/pieces/gioco/bP.svg); }
.cg-wrap piece.ghost.rook.black   { background-image: url(/static/pieces/gioco/bR.svg); }
.cg-wrap piece.ghost.knight.black { background-image: url(/static/pieces/gioco/bN.svg); }
.cg-wrap piece.ghost.bishop.black { background-image: url(/static/pieces/gioco/bB.svg); }
.cg-wrap piece.ghost.queen.black  { background-image: url(/static/pieces/gioco/bQ.svg); }
.cg-wrap piece.ghost.king.black   { background-image: url(/static/pieces/gioco/bK.svg); }