/* GAMEPLAY-CLARITY-HOTFIX-001 — current Rail truth, not scoring feedback. */

.active-slide-state {
  margin: 4px auto 6px;
  width: fit-content;
  max-width: calc(100% - 12px);
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 54%, transparent);
  border-radius: 999px;
  color: var(--line);
  background: rgba(3, 10, 10, 0.82);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.025);
  text-align: center;
  font-size: clamp(0.54rem, 2.2vw, 0.68rem);
  font-weight: 950;
  letter-spacing: 0.095em;
  line-height: 1.25;
}

.active-slide-state[data-active-slides*="Black"] {
  color: #f4f7f7;
  border-color: rgba(244, 247, 247, 0.58);
}

.active-slide-axis .axis-name::after {
  content: " · ACTIVE";
  font-size: 0.88em;
}

.active-gold-axis .axis-name {
  color: var(--line);
  text-shadow: 0 0 8px color-mix(in srgb, var(--line) 55%, transparent);
}

.active-black-axis .axis-name {
  color: #f4f7f7;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.46);
}

.active-star-trace {
  position: absolute;
  z-index: 6;
  top: 44%;
  width: 14%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  font-size: calc(var(--card-w) * 0.105);
  line-height: 1;
  opacity: 0.84;
  isolation: isolate;
}

.active-star-trace::after {
  content: "★";
  position: relative;
  z-index: 1;
}

.active-black-trace::after { content: "☆"; }

/*
 * WEB-VISUAL-PAIN-001 — only the empty center of the exact participating
 * Slide Star breathes. The printed star, active-channel ring, card, and Rail
 * remain still. These four colors are reserved for this purpose.
 */
.active-star-trace::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--slide-core-base);
  opacity: 0.62;
  box-shadow:
    0 0 2px color-mix(in srgb, var(--slide-core-glow) 70%, transparent),
    0 0 5px color-mix(in srgb, var(--slide-core-glow) 42%, transparent);
  animation: active-slide-core-breathe 3.2s ease-in-out infinite;
}

.active-gold-trace {
  --slide-core-base: #FDB515;
  --slide-core-glow: #FFC30B;
  color: var(--line);
  background: rgba(0, 18, 16, 0.52);
  box-shadow: 0 0 6px color-mix(in srgb, var(--line) 62%, transparent);
}

.active-black-trace {
  --slide-core-base: #3d1c59;
  --slide-core-glow: #700c70;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.48);
}

.active-return-trace { border-style: double; }
.active-ascent-trace { border-style: solid; }

@keyframes active-slide-core-breathe {
  0%, 100% {
    opacity: 0.58;
    box-shadow:
      0 0 1px color-mix(in srgb, var(--slide-core-glow) 62%, transparent),
      0 0 4px color-mix(in srgb, var(--slide-core-glow) 34%, transparent);
  }
  50% {
    opacity: 0.96;
    box-shadow:
      0 0 3px color-mix(in srgb, var(--slide-core-glow) 78%, transparent),
      0 0 7px color-mix(in srgb, var(--slide-core-glow) 52%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .active-star-trace { transition: none; }
  .active-star-trace::before {
    animation: none;
    opacity: 0.84;
    box-shadow:
      0 0 2px color-mix(in srgb, var(--slide-core-glow) 68%, transparent),
      0 0 5px color-mix(in srgb, var(--slide-core-glow) 40%, transparent);
  }
}