/* CpBoard theme (cssClass "cp") — the lichess look on cm-chessboard.
 * Load after cm-chessboard's chessboard.css, markers.css and
 * promotion-dialog.css. Colours are lichess's (brown board, cburnett
 * pieces, last-move / selected / check marks). */

/* The board is a touch surface, as on lichess: no page scroll or zoom
   mid-move, no selection, no long-press callout. */
.cp-board {
  position: relative;       /* anchors the promotion picker */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cm-chessboard.cp .board .square.white { fill: #f0d9b5; }
.cm-chessboard.cp .board .square.black { fill: #b58863; }
.cm-chessboard.cp.border-type-none .board .border { stroke: #b58863; stroke-width: 0; fill: #b58863; }

.cm-chessboard.cp .coordinates { pointer-events: none; user-select: none; }
.cm-chessboard.cp .coordinates .coordinate { font-weight: 600; cursor: default; }  /* size: cm-chessboard scales it to the squares */
.cm-chessboard.cp .coordinates .coordinate.black { fill: #f0d9b5; }
.cm-chessboard.cp .coordinates .coordinate.white { fill: #b58863; }

/* Marks (cpBoard.ts). */
.cm-chessboard .markers .marker.cp-last-move { fill: rgb(155, 199, 0); opacity: 0.41; }
.cm-chessboard .markers .marker.cp-selected  { fill: rgb(20, 85, 30); opacity: 0.5; }
.cm-chessboard .markers .marker.cp-check     { fill: rgb(231, 0, 0); stroke: none; opacity: 0.55; }
/* Legal-move hints: lichess-green dots, and rings on captures. */
.cm-chessboard .markers .marker.marker-dot   { fill: rgb(20, 85, 30); opacity: 0.5; }
.cm-chessboard .markers .marker.marker-bevel { fill: rgb(20, 85, 30); opacity: 0.35; }

/* Promotion picker (lichess style, cpBoard.ts showPromotion): the board dims
   and round pieces open from the promotion square. */
.cp-promo {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(20, 23, 32, 0.55);
}
.cp-promo-piece {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #f3f2ee 25%, #b8b6ae 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: border-radius 120ms, background 120ms;
}
.cp-promo-piece svg { display: block; width: 100%; height: 100%; padding: 6%; transition: padding 120ms; }
.cp-promo-piece:hover,
.cp-promo-piece:focus-visible { border-radius: 0; background: #c5963e; outline: none; }
.cp-promo-piece:hover svg,
.cp-promo-piece:focus-visible svg { padding: 0; }