/* V1.42 · Spatial targeting trajectory. Hover/focus explains actor-to-target causality without moving the viewport. */
.targeting-trajectory-layer {
  --trajectory-line: rgba(116, 224, 255, .96);
  --trajectory-core: #f0fcff;
  --trajectory-soft: rgba(70, 198, 255, .32);
  position: fixed;
  inset: 0;
  z-index: 57;
  width: 100vw;
  height: 100dvh;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.targeting-trajectory-layer[hidden] { display: none !important; }
.targeting-trajectory-layer.is-active { opacity: 1; }
.targeting-trajectory-layer.is-committing { animation: targeting-trajectory-commit 420ms cubic-bezier(.12,.84,.16,1) both; }

.targeting-trajectory-layer[data-tone="danger"] {
  --trajectory-line: rgba(255, 105, 79, .98);
  --trajectory-core: #fff0bd;
  --trajectory-soft: rgba(255, 78, 48, .4);
}

.targeting-trajectory-layer[data-tone="support"] {
  --trajectory-line: rgba(101, 220, 255, .98);
  --trajectory-core: #e8fbff;
  --trajectory-soft: rgba(63, 188, 255, .36);
}

.targeting-trajectory-layer[data-tone="self"] {
  --trajectory-line: rgba(105, 255, 226, .98);
  --trajectory-core: #edfffa;
  --trajectory-soft: rgba(55, 255, 213, .32);
}

.targeting-trajectory-layer :is(path, circle) {
  vector-effect: non-scaling-stroke;
}

.targeting-trajectory-base,
.targeting-trajectory-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.targeting-trajectory-base {
  stroke: var(--trajectory-soft);
  stroke-width: 8;
  opacity: .58;
  filter: blur(1.2px) drop-shadow(0 0 10px var(--trajectory-soft));
}

.targeting-trajectory-flow {
  stroke: var(--trajectory-line);
  stroke-width: 2;
  stroke-dasharray: 4 10 18 10;
  opacity: .94;
  filter: drop-shadow(0 0 4px var(--trajectory-line)) drop-shadow(0 0 10px var(--trajectory-soft));
  animation: targeting-trajectory-flow 760ms linear infinite;
}

.targeting-trajectory-arrow {
  fill: var(--trajectory-core);
  stroke: var(--trajectory-line);
  stroke-width: 1;
  filter: drop-shadow(0 0 4px var(--trajectory-line));
}

.targeting-trajectory-node {
  fill: rgba(4, 12, 18, .96);
  stroke: var(--trajectory-line);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--trajectory-line)) drop-shadow(0 0 11px var(--trajectory-soft));
}

.targeting-trajectory-node-target {
  fill: var(--trajectory-core);
  stroke-width: 1.5;
  animation: targeting-trajectory-target-node 820ms ease-in-out infinite;
}

html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter, .team-fighter).is-target-preview {
  --position-frame-opacity: 1 !important;
  filter: saturate(1.22) brightness(1.1) !important;
}

html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter, .team-fighter).is-target-preview::after {
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px var(--target-lock-glow)) drop-shadow(0 0 22px var(--target-lock-soft)) !important;
}

html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle .is-target-preview .target-reticle {
  opacity: 1 !important;
  filter: drop-shadow(0 0 9px var(--target-lock-core)) drop-shadow(0 0 24px var(--target-lock-glow)) !important;
  animation: targeting-preview-acquire 620ms cubic-bezier(.12,.82,.18,1) infinite alternate !important;
}

html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter, .team-fighter).is-target-source-preview {
  filter: saturate(1.08) brightness(1.04) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.fighter, .team-fighter).is-target-committing .target-reticle {
  animation: targeting-target-commit 420ms cubic-bezier(.1,.88,.14,1) both !important;
}

@keyframes targeting-trajectory-flow {
  to { stroke-dashoffset: -42; }
}

@keyframes targeting-trajectory-target-node {
  0%, 100% { r: 4px; opacity: .74; }
  50% { r: 6px; opacity: 1; }
}

@keyframes targeting-preview-acquire {
  from { transform: translate(-50%, -50%) scale(.98); }
  to { transform: translate(-50%, -50%) scale(1.045); }
}

@keyframes targeting-trajectory-commit {
  0% { opacity: .48; filter: brightness(1.5); }
  28% { opacity: 1; filter: brightness(1.2); }
  100% { opacity: .92; filter: brightness(1); }
}

@keyframes targeting-target-commit {
  0% { transform: translate(-50%, -50%) scale(1.16); opacity: .35; }
  36% { transform: translate(-50%, -50%) scale(.91); opacity: 1; }
  68% { transform: translate(-50%, -50%) scale(1.035); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@media (max-width: 720px) {
  .targeting-trajectory-base { stroke-width: 6; }
  .targeting-trajectory-flow { stroke-width: 1.5; stroke-dasharray: 3 8 14 8; }
}

@media (prefers-reduced-motion: reduce) {
  .targeting-trajectory-layer,
  .targeting-trajectory-layer *,
  html body:not(.maintenance-mode) #battle .is-target-preview .target-reticle {
    animation-duration: 180ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}