/* Board component styles. Everything is sized relative to the board so it
   scales with its panel: squares and pieces are 12.5% wide and positioned by
   transform, coordinates use container-query units. Colours come from the
   theme variables set on .cg-wrap by board.js. */

.cg-wrap { position: relative; --cg-light: #f0d9b5; --cg-dark: #b58863; user-select: none; -webkit-user-select: none; touch-action: none; }
.cg-board {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  background-color: var(--cg-dark);
  background-image: conic-gradient(var(--cg-dark) 25%, var(--cg-light) 0 50%, var(--cg-dark) 0 75%, var(--cg-light) 0);
  background-size: 25% 25%;
  container-type: inline-size;
  cursor: default;
}
.cg-squares, .cg-pieces, .cg-shapes, .cg-coords, .cg-promotion { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-squares { z-index: 1; pointer-events: none; }
.cg-pieces { z-index: 2; pointer-events: none; }
.cg-shapes { z-index: 3; pointer-events: none; overflow: visible; }
.cg-coords { z-index: 4; pointer-events: none; }
.cg-promotion { z-index: 20; background: rgba(0, 0, 0, .55); pointer-events: auto; }
.cg-promotion[hidden] { display: none; }

square, piece { position: absolute; top: 0; left: 0; width: 12.5%; height: 12.5%; display: block; }
square { pointer-events: none; }
square.last-move { background: rgba(155, 199, 0, .41); }
square.selected { background: rgba(20, 85, 30, .5); }
square.check { background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%); }
square.dest { background: radial-gradient(rgba(20, 85, 30, .5) 19%, rgba(0, 0, 0, 0) 20%); }
square.dest.oc { background: radial-gradient(transparent 0%, transparent 79%, rgba(20, 85, 0, .3) 80%); }
square.hover { background: rgba(20, 85, 30, .3); }
/* A lesson highlight is a ring plus an inner glow in the semantic brush colour
   (--cg-hl, set inline by board.js), so it reads around and under the piece
   instead of being a flat wash the piece covers. Sized in cqw so it scales. */
square.highlight {
  border-radius: 3px;
  box-shadow: inset 0 0 0 .85cqw var(--cg-hl, #9aa6b2), inset 0 0 2.4cqw .5cqw var(--cg-hl, #9aa6b2);
  opacity: .85;
}

piece {
  pointer-events: auto; background-size: cover; background-repeat: no-repeat; background-position: center;
  will-change: transform; z-index: 2;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), opacity .16s ease;
}
.no-anim piece { transition: none; }
piece.movable { cursor: grab; }
piece.dragging { transition: none; z-index: 11; cursor: grabbing; }
.dragging-piece .cg-board, .dragging-piece piece { cursor: grabbing; }
piece.fading { opacity: 0; }
piece.appearing { opacity: 0; }

.cg-coords { display: flex; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 2.3cqw; line-height: 1.2; text-align: left; }
/* Each label owns exactly one square. Use board-relative units for the
   small corner inset: percentage padding on file labels uses the entire
   board's width and puts the letters near the middle of their squares. */
.cg-coords coord { flex: 0 0 12.5%; min-width: 0; min-height: 0; box-sizing: border-box; display: flex; padding: .5cqw; }
.cg-coords.ranks { flex-direction: column; width: 12.5%; }
.cg-coords.ranks coord { align-items: flex-start; justify-content: flex-start; }
.cg-coords.ranks coord:nth-child(odd) { color: var(--cg-dark); }
.cg-coords.ranks coord:nth-child(even) { color: var(--cg-light); }
.cg-coords.files { flex-direction: row; top: auto; bottom: 0; height: 12.5%; }
.cg-coords.files coord { align-items: flex-end; justify-content: flex-end; }
.cg-coords.files coord:nth-child(odd) { color: var(--cg-light); }
.cg-coords.files coord:nth-child(even) { color: var(--cg-dark); }
.no-coords .cg-coords { display: none; }

.cg-promotion square { pointer-events: auto; cursor: pointer; background: #fff; border-radius: 50%; box-shadow: inset 0 0 25px 3px #808080; transition: background .1s, border-radius .1s; }
.cg-promotion square:hover { background: #ffd8a8; border-radius: 0; }
.cg-promotion piece { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; pointer-events: none; }

/* Pieces: the cburnett set from lichess (Colin M.L. Burnett, GPLv2+). */
.cg-wrap[data-piece-set="cburnett"] piece.white.king { background-image: url(pieces/cburnett/wK.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.white.queen { background-image: url(pieces/cburnett/wQ.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.white.rook { background-image: url(pieces/cburnett/wR.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.white.bishop { background-image: url(pieces/cburnett/wB.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.white.knight { background-image: url(pieces/cburnett/wN.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.white.pawn { background-image: url(pieces/cburnett/wP.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.black.king { background-image: url(pieces/cburnett/bK.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.black.queen { background-image: url(pieces/cburnett/bQ.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.black.rook { background-image: url(pieces/cburnett/bR.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.black.bishop { background-image: url(pieces/cburnett/bB.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.black.knight { background-image: url(pieces/cburnett/bN.svg); }
.cg-wrap[data-piece-set="cburnett"] piece.black.pawn { background-image: url(pieces/cburnett/bP.svg); }