/* The section shares the page's darkness; light belongs to the figure. */
.training-scene {
  background: var(--void);
  border-block-color: transparent;
}

/* Only the atmosphere fades. The anatomy and controls retain full clarity. */
.anatomy-theater {
  --aura-bleed: clamp(12px, 5vw, 80px);
  width: calc(100% + var(--aura-bleed) * 2);
  margin-inline: calc(var(--aura-bleed) * -1);
  overflow: hidden;
  overflow: clip;
}

/* Both views share the front artwork's framing. Their source viewBoxes have
 * slightly different ratios; switching must not move the head or the feet. */
.anatomy-map {
  aspect-ratio: 186.89 / 486.6;
  /* The atmosphere gains room while the original anatomy keeps its size. */
  max-width: calc(67% - var(--aura-bleed) * 1.34);
}
.anatomy-map > svg {
  height: 100%;
  shape-rendering: geometricPrecision;
}

/* Keep the fine anatomy lines legible at Retina density instead of rendering
 * them as brittle subpixel hairlines. The source remains scalable SVG. */
.anatomy-map svg path {
  stroke-width: 0.28;
  stroke-opacity: 0.72;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#anatomy-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The fallback also dissolves into page black, without a ring or floor disc. */
.anatomy-aura {
  inset: 9% 12%;
  background:
    radial-gradient(ellipse 27% 31% at 41% 34%, #779eca0b, transparent 74%),
    radial-gradient(ellipse 24% 23% at 61% 58%, #5685b408, transparent 74%);
  opacity: 1;
}
.anatomy-stage[data-view="back"] .anatomy-aura {
  filter: none;
}
.anatomy-rings,
.anatomy-floor {
  display: none;
}
.has-living-field .anatomy-aura {
  display: none;
}

/* Hover previews a region; a deliberate click retains the selection. */
.anatomy-map svg g[data-interactive]:hover path,
.anatomy-map svg g.is-hovered path {
  fill: #729bb8;
  filter: none;
}

.anatomy-map svg g[data-interactive].is-selected path {
  fill: #b6e1fa;
  filter: drop-shadow(0 0 2px #b0ddff28);
}

.anatomy-map svg g[data-interactive]:focus-visible path {
  stroke: #fff;
  stroke-width: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .anatomy-map svg path {
    transition: none;
  }
}