/* Board, pieces and chessground styling.
   Board colours come from --sq-light / --sq-dark, piece images from --pc-wK … --pc-bP
   (both set by js/lib/settings.js). */

.cg-wrap {
  box-sizing: content-box;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* --sq-light, --sq-dark, --sq-last, --sq-dest and --sq-selected come from the board theme (settings.js) */
  --sq-premove: rgba(20, 30, 85, 0.5);
}

cg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
}

cg-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  line-height: 0;
  background-color: var(--sq-light);
  background-image: var(--board-texture, linear-gradient(transparent, transparent)),
    repeating-conic-gradient(var(--sq-dark) 0 25%, var(--sq-light) 0 50%);
  background-size: 100% 100%, 25% 25%;
  border-radius: var(--board-radius, 3px);
}

.cg-wrap.manipulable cg-board { cursor: pointer; }

cg-board square {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
}
cg-board square.move-dest { pointer-events: auto; }
cg-board square.last-move { will-change: transform; background-color: var(--sq-last, rgba(155, 199, 0, 0.41)); }
cg-board square.selected { background-color: var(--sq-selected, rgba(20, 85, 30, 0.5)); }
cg-board square.move-dest {
  background: radial-gradient(var(--sq-dest) 19%, rgba(0, 0, 0, 0) calc(19% + 1px));
}
cg-board square.premove-dest {
  background: radial-gradient(var(--sq-premove) 19%, rgba(0, 0, 0, 0) calc(19% + 1px));
  pointer-events: auto;
}
cg-board square.oc.move-dest {
  background: radial-gradient(transparent 0%, transparent 79%, var(--sq-dest) 80%);
}
cg-board square.oc.premove-dest {
  background: radial-gradient(transparent 0%, transparent 79%, var(--sq-premove) 80%);
}
cg-board square.move-dest:hover,
cg-board square.move-dest.hover { background: var(--sq-dest); opacity: 0.6; }
cg-board square.premove-dest:hover { background: var(--sq-premove); opacity: 0.6; }
cg-board square.current-premove { background-color: var(--sq-premove); }
cg-board 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%);
}
cg-board square.hint { background-color: rgba(60, 130, 255, 0.35); }

.cg-wrap piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}
cg-board piece.dragging { cursor: move; z-index: 11 !important; }
piece.anim { z-index: 8; }
piece.fading { z-index: 1; opacity: 0.5; }
.cg-wrap piece.ghost { opacity: 0.3; }

.cg-wrap cg-auto-pieces,
.cg-wrap .cg-shapes,
.cg-wrap .cg-custom-svgs,
.cg-wrap .cg-shapes-below,
.cg-wrap .cg-custom-below {
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cg-wrap cg-auto-pieces { z-index: 2; }
.cg-wrap cg-auto-pieces piece { opacity: 0.3; }
.cg-wrap .cg-shapes { overflow: hidden; opacity: 0.6; z-index: 2; }
.cg-wrap .cg-shapes-below { overflow: hidden; z-index: 1; }
.cg-wrap .cg-custom-below { z-index: 1; }
.cg-wrap .cg-custom-svgs { z-index: 9; }
.cg-wrap .cg-custom-svgs svg,
.cg-wrap .cg-custom-below svg { overflow: visible; }

/* coordinates, drawn inside the edge squares */
.cg-wrap coords {
  position: absolute;
  display: flex;
  pointer-events: none;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(8px, calc(var(--board-px, 480px) / 48), 14px);
  line-height: 1;
  z-index: 3;
}
.cg-wrap coords.ranks {
  top: 0;
  left: 0;
  height: 100%;
  width: 12.5%;
  flex-flow: column-reverse;
}
.cg-wrap coords.ranks.black { flex-flow: column; }
.cg-wrap coords.ranks coord { flex: 1 1 0; padding: 4% 0 0 4%; }
.cg-wrap coords.files {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12.5%;
  flex-flow: row;
  align-items: flex-end;
}
.cg-wrap coords.files.black { flex-flow: row-reverse; }
.cg-wrap coords.files coord { flex: 1 1 0; text-align: right; padding: 0 3% 3% 0; }
.cg-wrap coord.coord-light { color: var(--sq-dark); }
.cg-wrap coord.coord-dark { color: var(--sq-light); }

/* piece images */
.cg-wrap piece.pawn.white, .piece-img.pawn.white { background-image: var(--pc-wP); }
.cg-wrap piece.knight.white, .piece-img.knight.white { background-image: var(--pc-wN); }
.cg-wrap piece.bishop.white, .piece-img.bishop.white { background-image: var(--pc-wB); }
.cg-wrap piece.rook.white, .piece-img.rook.white { background-image: var(--pc-wR); }
.cg-wrap piece.queen.white, .piece-img.queen.white { background-image: var(--pc-wQ); }
.cg-wrap piece.king.white, .piece-img.king.white { background-image: var(--pc-wK); }
.cg-wrap piece.pawn.black, .piece-img.pawn.black { background-image: var(--pc-bP); }
.cg-wrap piece.knight.black, .piece-img.knight.black { background-image: var(--pc-bN); }
.cg-wrap piece.bishop.black, .piece-img.bishop.black { background-image: var(--pc-bB); }
.cg-wrap piece.rook.black, .piece-img.rook.black { background-image: var(--pc-bR); }
.cg-wrap piece.queen.black, .piece-img.queen.black { background-image: var(--pc-bQ); }
.cg-wrap piece.king.black, .piece-img.king.black { background-image: var(--pc-bK); }
.piece-img { background-size: contain; background-repeat: no-repeat; background-position: center; }

/* atomic explosion */
cg-board square.exploding1 { background: radial-gradient(rgba(255, 160, 0, .8) 0%, rgba(255, 60, 0, .6) 40%, transparent 70%); }
cg-board square.exploding2 { background: radial-gradient(rgba(255, 60, 0, .5) 0%, transparent 60%); }

/* promotion chooser */
.promotion {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.45);
  border-radius: var(--board-radius, 3px);
}
.promotion button {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background-color: #b0b0b0;
  box-shadow: inset 0 0 25px 3px #808080;
  cursor: pointer;
  transition: border-radius .12s, background-color .12s, box-shadow .12s;
}
.promotion button:hover,
.promotion button:focus-visible {
  border-radius: 0;
  background-color: #f2f2f2;
  box-shadow: inset 0 0 48px 8px #6b6b70;
  outline: none;
}
.promotion button span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(0.85);
  transition: transform .12s;
}
.promotion button:hover span { transform: scale(1); }