.spider-action-fx-layer {
  position: fixed;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

html[data-spider-mode="shadow"] {
  --spider-accent: #ff3048;
  --spider-accent-soft: #ff6b78;
  --spider-ink: #07080e;
}

html[data-spider-mode="classic"] {
  --spider-accent: #e51d2b;
  --spider-accent-soft: #65b9ff;
  --spider-ink: #081323;
}

html[data-spider-mode="shadow"] .spider-suit-layer {
  filter: hue-rotate(316deg) saturate(1.7) brightness(0.62) contrast(1.24);
}

html[data-spider-mode="shadow"] .spider-face-mask-layer {
  filter: brightness(0.52) saturate(1.45) contrast(1.18) hue-rotate(322deg);
}

html[data-spider-mode="shadow"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 54%, transparent 0 28%, rgb(0 0 0 / 12%) 57%, rgb(0 0 0 / 42%) 100%),
    linear-gradient(130deg, rgb(204 7 37 / 14%), transparent 44%, rgb(16 0 27 / 34%));
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .spider-action-fx-layer { display: none; }
}