/* ==========================================================================
 * board.css — the board, pieces, highlights, arrows and the eval bar.
 * ========================================================================== */

.board-root {
  --sq-light: #ebecd0;
  --sq-dark:  #739552;
  --sq-move:  rgba(255, 236, 100, .52);
  --sq-select: rgba(255, 236, 100, .62);
  --sq-check: rgba(232, 62, 47, .85);
  --arrow:    rgba(255, 170, 0, .82);
  --arrow-best: rgba(56, 178, 172, .85);
  --arrow-alt: rgba(90, 158, 214, .8);
  --piece-fill: #fff;
  --piece-stroke: #4a4643;
  --piece-detail: #4a4643;
  width: 100%;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* board themes */
.board-root[data-board="brown"] { --sq-light: #f0d9b5; --sq-dark: #b58863; }
.board-root[data-board="blue"]  { --sq-light: #dee3e6; --sq-dark: #7a9db2; }
.board-root[data-board="grey"]  { --sq-light: #dcdcdc; --sq-dark: #8f8f8f; }
.board-root[data-board="purple"]{ --sq-light: #e6dced; --sq-dark: #8a6ea8; }
.board-root[data-board="night"] { --sq-light: #6b7f96; --sq-dark: #37485c;
                                  --sq-move: rgba(255, 220, 90, .42); }

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  touch-action: none;
  container-type: inline-size;
}

.board-layer { position: absolute; inset: 0; }

/* ------------------------------------------------------------- squares -- */

.board-squares { display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); }

.sq { position: relative; }
.sq.light { background: var(--sq-light); }
.sq.dark  { background: var(--sq-dark); }

.sq.last-move::after,
.sq.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sq-move);
  pointer-events: none;
}
.sq.selected::after { background: var(--sq-select); }

.sq.in-check::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    var(--sq-check) 12%, rgba(232, 62, 47, .55) 42%, transparent 72%);
  pointer-events: none;
  animation: check-pulse 1.1s ease-in-out infinite;
}
@keyframes check-pulse { 50% { opacity: .62; } }

.sq.drag-over::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .72);
  pointer-events: none;
  z-index: 2;
}
.sq.circled::before {
  content: '';
  position: absolute;
  inset: 4%;
  border: 4px solid rgba(255, 170, 0, .85);
  border-radius: 50%;
  pointer-events: none;
}

.sq.pulse-bad  { animation: shake .38s var(--ease); }
.sq.pulse-good { animation: flash-good .4s var(--ease); }
@keyframes shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5%); }
  75% { transform: translateX(5%); }
}
@keyframes flash-good {
  0%   { box-shadow: inset 0 0 0 0 rgba(129, 182, 76, .9); }
  40%  { box-shadow: inset 0 0 0 6px rgba(129, 182, 76, .9); }
  100% { box-shadow: inset 0 0 0 0 rgba(129, 182, 76, 0); }
}

/* -------------------------------------------------------------- pieces -- */

.board-pieces { pointer-events: none; }

.piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  will-change: transform;
  transition: transform .16s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.piece.w { --piece-fill: #fff;    --piece-stroke: #4a4643; --piece-detail: #4a4643; }
.piece.b { --piece-fill: #2e2b28; --piece-stroke: #14120f; --piece-detail: #f2f2f0; }

.piece-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
}

.piece.dragging {
  transition: none;
  z-index: 20;
  cursor: grabbing;
}
.piece.dragging .piece-svg {
  transform: scale(1.1);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}
.piece.appearing { opacity: 0; transform: scale(.6); }
.piece.captured {
  animation: capture-out .18s var(--ease) forwards;
  z-index: 2;
}
@keyframes capture-out {
  to { opacity: 0; transform: var(--tw, translate(0, 0)) scale(.72); }
}

.board.dragging-piece { cursor: grabbing; }
.board:not(.dragging-piece) .sq { cursor: default; }

/* --------------------------------------------------------------- hints -- */

.board-marks { pointer-events: none; }

.hint {
  position: absolute;
  top: 0; left: 0;
  width: 12.5%;
  height: 12.5%;
  display: grid;
  place-items: center;
  z-index: 2;
}
.hint::after {
  content: '';
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(20, 20, 20, .22);
  transition: transform .12s var(--ease);
}
.hint-capture::after {
  width: 96%;
  height: 96%;
  background: transparent;
  border: 7px solid rgba(20, 20, 20, .2);
  box-sizing: border-box;
}

/* -------------------------------------------------------------- arrows -- */

.board-arrows {
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}
.arrow line    { stroke: var(--arrow); }
.arrow polygon { fill: var(--arrow); stroke: none; }
.arrow.best line { stroke: var(--arrow-best); }
.arrow.best polygon { fill: var(--arrow-best); }
.arrow.alt  line { stroke: var(--arrow-alt); }
.arrow.alt  polygon { fill: var(--arrow-alt); }
.arrow.threat line { stroke: rgba(202, 52, 49, .82); }
.arrow.threat polygon { fill: rgba(202, 52, 49, .82); }
.arrow { animation: fade-in .16s var(--ease); }

/* --------------------------------------------------------- coordinates -- */

.board-coords { pointer-events: none; z-index: 4; font-size: clamp(9px, 2.7cqw, 15px); }
.coord {
  position: absolute;
  font-weight: 700;
  opacity: .9;
  line-height: 1;
}
.board-coords .coord-file { bottom: 2.5%; margin-left: .55%; }
.board-coords .coord-rank { left: 1%; margin-top: .55%; }
.coord.on-light { color: var(--sq-dark); }
.coord.on-dark  { color: var(--sq-light); }

/* ----------------------------------------------------------- promotion -- */

.promotion-picker { position: absolute; inset: 0; z-index: 30; }
.promo-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.promo-choice {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  padding: 6%;
  border: none;
  background: var(--surface);
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--shadow);
  transition: background .12s var(--ease), transform .12s var(--ease);
  animation: pop-in .14s var(--ease) backwards;
}
.promo-choice:hover { background: var(--accent); transform: scale(1.06); }
.promo-choice:nth-child(2) { animation-delay: .03s; }
.promo-choice:nth-child(3) { animation-delay: .06s; }
.promo-choice:nth-child(4) { animation-delay: .09s; }
.promo-choice .piece-svg { width: 100%; height: 100%; }
.promotion-picker { --piece-fill: #fff; --piece-stroke: #4a4643; --piece-detail: #4a4643; }

/* ------------------------------------------------------------ eval bar -- */

.eval-bar {
  width: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #f4f4f3;
  position: relative;
  flex: none;
  box-shadow: var(--shadow-sm);
  transition: opacity .2s var(--ease);
}
.eval-bar .eval-black {
  position: absolute;
  inset: 0 0 auto 0;
  background: #403d39;
  height: 50%;
  transition: height .45s var(--ease);
}
.eval-bar .eval-text {
  position: absolute;
  left: 0; right: 0;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  letter-spacing: -.02em;
}
.eval-bar .eval-text.top    { top: 3px; color: #f4f4f3; }
.eval-bar .eval-text.bottom { bottom: 3px; color: #403d39; }
.eval-bar .eval-mid {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(129, 182, 76, .8);
}

/* ------------------------------------------------------ captured pieces -- */

.captured-tray {
  display: flex;
  align-items: center;
  min-height: 20px;
  gap: 1px;
}
.captured-tray .cap {
  width: 19px;
  height: 19px;
  margin-right: -7px;
  opacity: .95;
}
.captured-tray .cap:last-child { margin-right: 0; }
.captured-tray.w { --piece-fill: #fff; --piece-stroke: #6a6663; --piece-detail: #6a6663; }
.captured-tray.b { --piece-fill: #2e2b28; --piece-stroke: #14120f; --piece-detail: #d8d8d6; }
.captured-tray .lead {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-2);
  margin-left: 9px;
}

/* ------------------------------------------------------------- premove -- */

.sq.premove::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(88, 154, 219, .55);
  pointer-events: none;
}
.hint-premove::after { background: rgba(88, 154, 219, .45); }
.hint-premove.hint-capture::after {
  background: transparent;
  border-color: rgba(88, 154, 219, .5);
}

/* review arrows: the move played vs what the engine wanted */
.arrow.played line    { stroke: rgba(255, 170, 0, .8); }
.arrow.played polygon { fill: rgba(255, 170, 0, .8); }
.arrow.played-bad line    { stroke: rgba(202, 52, 49, .82); }
.arrow.played-bad polygon { fill: rgba(202, 52, 49, .82); }