/* Raiders-Faehigkeiten am Brett (board-fx-swap/-boarding/-command/-cannon/-devour.js).
   Partikel sind .boardFx-dust (main-12.css); Bewegungen laufen ueber Web Animations,
   hier stehen nur Formen, Farben und kleine Keyframes. */

/* Positionswechsel (Quartiermeister): Drehscheibe in der Mitte, Geister kreisen. */
.boardFx-swapHub { position: fixed; width: 0; height: 0; z-index: 2; }
.boardFx-swapGhost {
  filter: drop-shadow(0 0 7px rgba(92, 200, 255, .5));
  animation: boardFxSwapLift var(--swap-ms, 620ms) ease-in-out 1 both;
}
@keyframes boardFxSwapLift {
  0%, 100% { scale: 1; }
  50%      { scale: 1.1; }
}
.boardFx-swapTrail {
  position: fixed; pointer-events: none; border-radius: 50%; z-index: -1;
  border: 1.5px dashed rgba(186, 236, 255, .7);
  box-shadow: 0 0 10px rgba(92, 200, 255, .35);
  opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.85);
  animation: boardFxSwapTrail calc(var(--swap-ms, 620ms) + 240ms) ease-out 1 forwards;
}
@keyframes boardFxSwapTrail {
  0%   { opacity: 0;   transform: translate(-50%, -50%) rotate(0deg) scale(.85); }
  25%  { opacity: .75; }
  70%  { opacity: .5;  transform: translate(-50%, -50%) rotate(150deg) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) rotate(200deg) scale(1.08); }
}

/* Entern (Matrose): Tau mit Enterhaken, Schwung, Beute-Muenzen. */
.boardFx-boardRope {
  position: fixed; height: 3px; margin-top: -1.5px; pointer-events: none;
  transform-origin: 0 50%; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--rope-color, #d9b77a) 0 6px, #a8844a 6px 9px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.boardFx-boardRope::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px;
  margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f2f4f6, #8d939a 70%);
}
.boardFx-boardSailor, .boardFx-boardRaider { z-index: 2; }
.boardFx-boardRaider { transform-origin: 50% 55%; }
.boardFx-coin {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 38% 32%, #fff6c8, var(--coin-color, #f5c84c) 55%, #a87a1c);
  box-shadow: 0 0 6px rgba(255, 210, 90, .75);
}

/* Kommando (Kapitaen): Befehls-Welle und kurzes Nicken. */
.boardFx-commandWave {
  position: fixed; pointer-events: none; border-radius: 50%;
  border: 2px solid rgba(186, 236, 255, .8);
  box-shadow: 0 0 12px rgba(92, 200, 255, .5), inset 0 0 8px rgba(92, 200, 255, .3);
  opacity: 0; transform: translate(-50%, -50%) scale(.1);
  animation: boardFxCommandWave var(--command-ms, 560ms) cubic-bezier(.2, .6, .3, 1) 1 forwards;
}
@keyframes boardFxCommandWave {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.1); }
  20%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1); }
}
.boardFx-commandNod {
  transform-origin: 50% 90%;
  animation: boardFxCommandNod 340ms ease-out 1 both;
}
@keyframes boardFxCommandNod {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-6%) scale(1.06); filter: drop-shadow(0 0 8px rgba(92, 200, 255, .7)); }
}

/* Kanonenschuss (Kanonier): Muendungsblitz, eiserne Kugel mit Schatten. */
.boardFx-muzzle {
  position: fixed; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #ffe08a 34%, rgba(255, 140, 50, .7) 55%, transparent 72%);
  opacity: 0; transform: translate(-50%, -50%) scale(.3);
  animation: boardFxMuzzle 240ms ease-out 1 forwards;
}
@keyframes boardFxMuzzle {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
.boardFx-ironBall {
  z-index: 2;
  background: radial-gradient(circle at 35% 30%, #a3a9b0, #3a3e44 58%, #121417);
  box-shadow: 0 0 8px rgba(255, 170, 80, .55);
}
.boardFx-ballShadow {
  position: fixed; pointer-events: none; border-radius: 50%;
  background: rgba(0, 0, 0, .38); filter: blur(1.5px);
}

/* Verschlingen (Seehexe): flacher Strudel unter den Figuren, dreht auf und schliesst sich. */
.boardFx-vortex {
  position: fixed; pointer-events: none; z-index: -1;
  transform: translate(-50%, -50%) scaleY(.42) scale(.2); opacity: 0;
  animation: boardFxVortex var(--vortex-ms, 1100ms) ease-in-out 1 forwards;
}
.boardFx-vortex > svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 4px rgba(92, 200, 255, .7));
  animation: boardFxVortexSpin var(--vortex-ms, 1100ms) linear 1 both;
}
.boardFx-vortex polyline {
  fill: none; stroke: rgba(216, 246, 255, .9); stroke-width: 3.2; stroke-linecap: round;
}
.boardFx-vortexEye { fill: rgba(3, 14, 28, .82); filter: blur(4px); }
@keyframes boardFxVortex {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scaleY(.42) scale(.2); }
  22%  { opacity: .95; transform: translate(-50%, -50%) scaleY(.42) scale(1); }
  75%  { opacity: .85; transform: translate(-50%, -50%) scaleY(.42) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scaleY(.42) scale(.15); }
}
@keyframes boardFxVortexSpin { to { transform: rotate(-600deg); } }

@media (prefers-reduced-motion: reduce) {
  .boardFx-swapGhost, .boardFx-swapTrail, .boardFx-commandWave, .boardFx-commandNod,
  .boardFx-muzzle, .boardFx-vortex, .boardFx-vortex > svg { animation: none !important; }
  .boardFx-swapTrail, .boardFx-commandWave, .boardFx-muzzle, .boardFx-vortex,
  .boardFx-boardRope, .boardFx-coin, .boardFx-ballShadow { display: none !important; }
}