/* ─── Chess board ─────────────────────────────────────────────────── */
.board-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.board{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px #0a0a0b,
    0 0 0 5px rgba(255,255,255,.04),
    0 24px 60px -20px rgba(0,0,0,.7);
  user-select: none;
  position: relative;
}
.square{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 7.5vw, 56px);
  line-height: 1;
  cursor: default;
}
.square.light{ background: var(--board-light); }
.square.dark{  background: var(--board-dark); }
.square .coord{
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #565758;
  pointer-events: none;
}
.square.dark .coord{ color: #818384; }
.square .coord.file{ bottom: 2px; right: 4px; }
.square .coord.rank{ top: 2px; left: 4px; }

.piece{
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
  transition: transform .12s;
}
.piece.moving{
  position: relative;
  z-index: 6;
  pointer-events: none;
  will-change: transform;
}
.board.interactive .square:hover .piece.moving{ transform: none; }
.board.interactive .square:hover .piece{ transform: scale(1.05); }
.board.locked{ pointer-events: none; }
.board.locked::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(245,241,234,.0) 0%, rgba(245,241,234,.05) 100%);
  pointer-events: none;
}

/* Square states */
.square.selected{
  box-shadow: inset 0 0 0 100px rgba(83,141,78,.55);
}
.square.legal::before{
  content: "";
  position: absolute;
  width: 30%; height: 30%;
  border-radius: 99px;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}
.square.dark.legal::before{ background: rgba(0,0,0,.28); }
.square.legal.capture::before{
  width: 86%; height: 86%;
  background: transparent;
  border: 4px solid rgba(0,0,0,.22);
}
.square.last-move{
  box-shadow: inset 0 0 0 100px rgba(181,159,59,.45);
}
.square.hint-from{
  box-shadow: inset 0 0 0 100px rgba(181,159,59,.55);
}
.square.hint-to::after{
  content: none;
}
.square.checkmated::after{
  content: "#";
  position: absolute;
  right: -20%;
  top: -20%;
  width: 50%;
  height: 50%;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--bad);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  font: 700 clamp(13px, 4vw, 24px)/1 var(--sans);
  z-index: 4;
}
.square.checkmated.edge-top::after{ top: 0; }
.square.checkmated.edge-right::after{ right: 0; }

.promotion-layer{
  position: absolute;
  inset: 0;
  z-index: 12;
  background: transparent;
}
.promotion-picker{
  position: absolute;
  width: 12.5%;
  height: 50%;
  display: flex;
  background: var(--board-light);
  box-shadow:
    inset 0 0 0 1px rgba(10,10,11,.34),
    0 8px 20px rgba(0,0,0,.28);
  overflow: hidden;
  border-radius: 3px;
}
.promotion-picker.down{
  flex-direction: column;
}
.promotion-picker.up{
  flex-direction: column-reverse;
}
.promotion-choice{
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(10,10,11,.14);
  background: transparent;
  display: grid;
  place-items: center;
  width: 100%;
  height: 25%;
  padding: 0;
  cursor: pointer;
  flex: 0 0 25%;
  transition: background .12s ease, box-shadow .12s ease;
}
.promotion-choice:nth-child(even){ background: rgba(10,10,11,.06); }
.promotion-choice:last-child{ border-bottom: 0; }
.promotion-choice:hover,
.promotion-choice:focus-visible{
  background: rgba(181,159,59,.34);
  box-shadow: inset 0 0 0 2px rgba(10,10,11,.22);
  outline: none;
}
.promotion-choice img{
  width: 76%;
  height: 76%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
@keyframes hint-pulse{
  0%,100%{ opacity: .5; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.04); }
}