/* 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;
}

/* Royal pieces already mark targets with their own glow + electric arc. */
body[data-piece-set="royal"] .move-targets {
  display: none;
}

.move-target {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  display: grid;
  place-items: center;
  opacity: 1;
}

.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);
  display: none;
}

.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);
}