/* Legal targets are drawn above the board; native interaction stays intact. */
g-chess-board {
  --move-target-marker-color-dark-square: var(--square-color-dark) !important;
  --move-target-marker-color-light-square: var(--square-color-light) !important;
  --move-target-marker-radius: 0%;
  --move-target-marker-radius-occupied: 100%;
}

.move-targets {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  --target-color: #397b35;
  --target-light: #ecffbe;
}

body[data-theme="space"] .move-targets {
  --target-color: #9865eb;
  --target-light: #f4e8ff;
}
body[data-theme="ocean"] .move-targets {
  --target-color: #078eab;
  --target-light: #d1ffff;
}
body[data-theme="dino"] .move-targets {
  --target-color: #b96616;
  --target-light: #fff1ae;
}

.move-target {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: target-arrive 240ms ease-out var(--target-delay) forwards;
}

.move-target::before,
.move-target::after {
  content: "";
  grid-area: 1 / 1;
  width: 28%;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 50%;
}

.move-target::before {
  border: 2px solid var(--target-light);
  background: radial-gradient(circle at 35% 30%, var(--target-light), var(--target-color) 75%);
  box-shadow: 0 0 0 2px var(--target-color), 0 0 12px var(--target-color);
}

.move-target::after {
  border: 2px solid var(--target-color);
  animation: target-ripple 1800ms ease-out calc(var(--target-delay) + 240ms) infinite backwards;
}

.move-target--capture::before,
.move-target--capture::after {
  width: 82%;
}
.move-target--capture::before {
  background: transparent;
  box-shadow: 0 0 0 2px var(--target-color), inset 0 0 8px var(--target-color);
}

@keyframes target-arrive {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes target-ripple {
  from { opacity: 0.65; transform: scale(1); }
  to { opacity: 0; transform: scale(1.65); }
}

@media (prefers-reduced-motion: reduce) {
  .move-target { animation: none; opacity: 1; }
  .move-target::after { animation: none; display: none; }
}