/* ───────────────────────────────────────────────────────────────
   board.css — the chessboard, pieces and move markers.
   Shared by play.html and the landing-page demo board.
   ─────────────────────────────────────────────────────────────── */
.board {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.board-grid { position: absolute; inset: -1.7%; width: 103.4%; height: 103.4%; overflow: visible; }
.board-marks, .board-pieces { position: absolute; inset: 0; }
.board-pieces { z-index: 2; }

/* pieces */
.piece {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  transition: left 0.32s cubic-bezier(.34, 1.3, .64, 1), top 0.32s cubic-bezier(.34, 1.3, .64, 1);
  will-change: left, top;
  z-index: 1;
}
.piece .piece-svg { width: 126%; height: 126%; margin: -20% 0 0 -13%; overflow: visible; pointer-events: none; }
.board:not(.locked):not(.flipped) .piece.team-w,
.board.flipped:not(.locked) .piece.team-b { cursor: grab; }
.piece.selected { z-index: 3; }
.piece.selected .piece-svg { animation: bob 0.9s ease-in-out infinite; }
.piece.dragging { z-index: 10; transition: none; cursor: grabbing; filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .7)); }
.piece.hop .piece-svg { animation: hop 0.34s ease-out; }
.piece.poof { animation: poof 0.38s ease-in forwards; z-index: 0; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-14%) scale(1.06, .96); } 100% { transform: translateY(0) scale(1); } }
@keyframes poof { to { opacity: 0; transform: scale(.4) rotate(-25deg); } }

/* markers */
.mark { position: absolute; width: 12.5%; height: 12.5%; pointer-events: none; }
.mark.last::before {
  content: ''; position: absolute; inset: 8%;
  background: rgba(220, 224, 232, .16);
  border-radius: var(--radius-sketch);
  filter: url(#wobble);
}
.mark.hint::before {
  content: ''; position: absolute; inset: 6%;
  border: 3px dashed var(--orange);
  border-radius: 50%;
  filter: url(#wobble);
  animation: spin 8s linear infinite;
}
.mark.sel::before {
  content: ''; position: absolute; inset: 4%;
  border: 3px solid var(--orange);
  border-radius: var(--radius-sketch-2);
  filter: url(#wobble);
}
.mark.dot::before {
  content: ''; position: absolute; left: 35%; top: 35%; width: 30%; height: 30%;
  border-radius: 50%;
  background: rgba(232, 234, 238, .6);
  box-shadow: 0 0 0 2px rgba(232, 234, 238, .2);
  filter: url(#wobble-sm);
}
.mark.ring::before {
  content: ''; position: absolute; inset: 6%;
  border: 3.5px solid rgba(208, 86, 90, .8);
  border-radius: 50%;
  filter: url(#wobble);
}
.mark.check::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(208, 86, 90, .5) 0 35%, rgba(208, 86, 90, 0) 70%);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

/* labels */
.rank-labels, .file-labels { position: absolute; display: flex; font-family: var(--font-title); font-weight: 700; pointer-events: none; }
.rank-labels { left: -7%; top: 0; bottom: 0; flex-direction: column; width: 5%; }
.file-labels { left: 0; right: 0; bottom: -8%; height: 6%; }
.rank-labels span, .file-labels span { flex: 1; display: grid; place-items: center; font-size: clamp(11px, 2.2vmin, 22px); color: var(--pencil); }
.board.no-labels .rank-labels, .board.no-labels .file-labels { display: none; }