/**
 * Blackhole Client — per-module visual FX layer
 * Composes with index.html — each [data-module] gets bespoke art (CSS + canvas where noted)
 */

/* ── Base art plane ─────────────────────────────────────────── */
.module-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}

.module-art .fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.92;
}

/* Canvas sits above CSS layers inside art */
.module-art:has(.fx-canvas) {
  background: transparent !important;
}

.module-art:has(.fx-canvas)::before,
.module-art:has(.fx-canvas)::after {
  opacity: 0.35;
}

/* ── Combat ─────────────────────────────────────────────────── */

[data-module="aim-assist"] .module-art {
  background:
    radial-gradient(ellipse 120% 80% at 50% 50%, rgba(255, 80, 160, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 28%, rgba(196, 181, 253, 0.12) 29%, transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(34, 211, 238, 0.06) 43%, transparent 44%);
}
[data-module="aim-assist"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(280px, 70vw);
  height: min(280px, 70vw);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(196, 181, 253, 0.15);
  border-radius: 50%;
  animation: aim-pulse 4s ease-in-out infinite;
  box-shadow: inset 0 0 60px rgba(139, 92, 246, 0.08);
}
[data-module="aim-assist"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.4),
    0 0 20px rgba(255, 100, 200, 0.3);
  animation: aim-cross 3.2s ease-in-out infinite;
}
@keyframes aim-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@keyframes aim-cross {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

[data-module="auto-clicker"] .module-art {
  background: radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.07) 0%, transparent 60%);
}
[data-module="auto-clicker"] .module-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
  transform: scale(0);
  animation: click-ripple 2.4s ease-out infinite;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  margin: -100% 0 0 -100%;
}
[data-module="auto-clicker"] .module-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 35%);
  transform: scale(0);
  animation: click-ripple 2.4s ease-out 0.8s infinite;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  margin: -100% 0 0 -100%;
}
@keyframes click-ripple {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(0.55); opacity: 0; }
}

[data-module="hit-select"] .module-art {
  background:
    linear-gradient(105deg, transparent 45%, rgba(34, 211, 238, 0.04) 50%, transparent 55%),
    radial-gradient(ellipse 100% 50% at 30% 50%, rgba(255, 100, 200, 0.06) 0%, transparent 50%);
}
[data-module="hit-select"] .module-art::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 50%;
  width: 55%;
  height: 2px;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.5), rgba(34, 211, 238, 0.3), transparent);
  transform-origin: left center;
  animation: lead-swing 5s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}
[data-module="hit-select"] .module-art::after {
  content: "";
  position: absolute;
  left: 62%;
  top: 48%;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fff, rgba(255, 80, 160, 0.8));
  border-radius: 50%;
  filter: blur(0.5px);
  animation: lead-dot 5s ease-in-out infinite;
}
@keyframes lead-swing {
  0%, 100% { transform: translateY(-8px) rotate(-4deg); opacity: 0.7; }
  50% { transform: translateY(8px) rotate(4deg); opacity: 1; }
}
@keyframes lead-dot {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -6px); }
}

[data-module="trigger-aura"] .module-art {
  background: conic-gradient(from 0deg at 50% 55%, transparent 0deg, rgba(255, 80, 80, 0.06) 32deg, transparent 64deg, rgba(34, 211, 238, 0.05) 96deg, transparent 128deg);
}
[data-module="trigger-aura"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 0;
  height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 200px solid rgba(255, 60, 60, 0.06);
  transform: translateX(-50%);
  filter: blur(1px);
  animation: cone-flicker 3.5s ease-in-out infinite;
}
@keyframes cone-flicker {
  0%, 100% { opacity: 0.5; filter: blur(1px); }
  50% { opacity: 0.85; filter: blur(0.5px); }
}

[data-module="reach"] .module-art {
  background: radial-gradient(ellipse at 40% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}
[data-module="reach"] .module-art::before {
  content: "";
  position: absolute;
  left: 15%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(196, 181, 253, 0.6);
  animation: reach-beam 3.8s ease-in-out infinite;
}
[data-module="reach"] .module-art::after {
  content: "";
  position: absolute;
  left: 15%;
  top: 50%;
  height: 3px;
  margin-top: -1px;
  width: 0;
  background: linear-gradient(90deg, rgba(196, 181, 253, 0.6), transparent);
  animation: reach-grow 3.8s ease-in-out infinite;
}
@keyframes reach-beam {
  0%, 100% { left: 15%; opacity: 1; }
  50% { left: 72%; opacity: 0.5; }
}
@keyframes reach-grow {
  0% { width: 0; opacity: 0.8; }
  50% { width: 58%; opacity: 0.4; }
  100% { width: 0; opacity: 0; }
}

/* velocity: canvas + subtle vignette */
[data-module="velocity"] .module-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255, 100, 80, 0.06) 0%, transparent 45%);
  z-index: 0;
  pointer-events: none;
}

[data-module="w-tap"] .module-art {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.03) 0%, transparent 30%, transparent 70%, rgba(255, 200, 100, 0.04) 100%);
}
[data-module="w-tap"] .module-art::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 50%;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: wtap-dash 1.8s ease-in-out infinite;
}
@keyframes wtap-dash {
  0% { transform: translateX(-30%) scaleX(0.3); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateX(180%) scaleX(1); opacity: 0; }
}

[data-module="anti-fireball"] .module-art {
  background: radial-gradient(circle at 75% 35%, rgba(255, 140, 40, 0.18) 0%, transparent 25%);
}
[data-module="anti-fireball"] .module-art::before {
  content: "";
  position: absolute;
  right: 18%;
  top: 32%;
  width: 36px;
  height: 36px;
  background: radial-gradient(circle, #ff6a00, #ff2200 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  animation: fireball-in 2.2s linear infinite;
  box-shadow: 0 0 30px rgba(255, 100, 0, 0.5);
}
[data-module="anti-fireball"] .module-art::after {
  content: "";
  position: absolute;
  right: 35%;
  top: 38%;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
  transform-origin: right center;
  animation: bat-swing 2.2s ease-out infinite;
}
@keyframes fireball-in {
  0% { transform: translate(80px, -20px) scale(0.6); opacity: 0.4; }
  70% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-40px, 10px) scale(0.3); opacity: 0; }
}
@keyframes bat-swing {
  0%, 60% { transform: rotate(0deg); opacity: 0; }
  75% { transform: rotate(-35deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}

[data-module="auto-blockhit"] .module-art {
  background: radial-gradient(ellipse at 50% 50%, rgba(100, 200, 255, 0.08) 0%, transparent 55%);
}
[data-module="auto-blockhit"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 120px;
  margin: -60px 0 0 -50px;
  border-radius: 8px 8px 40% 40%;
  border: 2px solid rgba(180, 220, 255, 0.25);
  background: linear-gradient(180deg, rgba(100, 150, 255, 0.1), transparent);
  animation: shield-flash 1.6s ease-in-out infinite;
}
@keyframes shield-flash {
  0%, 70% { opacity: 0.4; filter: brightness(0.8); }
  75%, 85% { opacity: 1; filter: brightness(1.3); box-shadow: 0 0 40px rgba(100, 200, 255, 0.3); }
  100% { opacity: 0.4; }
}

[data-module="auto-totem"] .module-art {
  background: radial-gradient(circle at 50% 45%, rgba(255, 200, 100, 0.1) 0%, transparent 40%);
}
[data-module="auto-totem"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 28px;
  height: 56px;
  margin: -28px 0 0 -14px;
  background: linear-gradient(180deg, #8b5a2b 0%, #5c3d1e 40%, #3d2814 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
  box-shadow: 0 0 20px rgba(255, 180, 60, 0.25);
  animation: totem-glow 3s ease-in-out infinite;
}
[data-module="auto-totem"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid rgba(255, 220, 120, 0.2);
  border-radius: 50%;
  animation: totem-ring 3s ease-in-out infinite;
}
@keyframes totem-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); box-shadow: 0 0 35px rgba(255, 200, 80, 0.35); }
}
@keyframes totem-ring {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

[data-module="criticals"] .module-art {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 80, 40, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(255, 200, 80, 0.1) 0%, transparent 30%);
}
[data-module="criticals"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 2px solid rgba(255, 160, 80, 0.3);
  transform: rotate(45deg);
  animation: crit-spin 6s linear infinite;
  box-shadow: 0 0 40px rgba(255, 100, 60, 0.15);
}
[data-module="criticals"] .module-art::after {
  content: "✦";
  position: absolute;
  left: 50%;
  top: 42%;
  font-size: 2rem;
  color: rgba(255, 200, 120, 0.9);
  text-shadow: 0 0 20px rgba(255, 100, 60, 0.8);
  transform: translate(-50%, -50%) scale(0);
  animation: crit-star 2s ease-out infinite;
}
@keyframes crit-spin {
  to { transform: rotate(405deg); }
}
@keyframes crit-star {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(180deg); }
  100% { transform: translate(-50%, -80%) scale(0.3) rotate(360deg); opacity: 0; }
}

/* ── Render ─────────────────────────────────────────────────── */

[data-module="esp"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 180px;
  margin: -90px 0 0 -50px;
  border: 1px solid rgba(255, 60, 60, 0.35);
  transform: perspective(400px) rotateY(-12deg);
  box-shadow:
    0 0 0 1px rgba(255, 100, 100, 0.1) inset,
    0 0 30px rgba(255, 0, 0, 0.08);
  animation: esp-box 5s ease-in-out infinite;
}
[data-module="esp"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 180px;
  margin: -90px 0 0 -50px;
  border: 1px solid rgba(60, 255, 120, 0.2);
  transform: perspective(400px) rotateY(-12deg) translate(24px, -10px);
  opacity: 0.6;
  animation: esp-box 5s ease-in-out 0.3s infinite;
}
@keyframes esp-box {
  0%, 100% { filter: hue-rotate(0deg); opacity: 0.7; }
  50% { filter: hue-rotate(30deg); opacity: 1; }
}

[data-module="tracers"] .module-art {
  background: radial-gradient(circle at 10% 50%, rgba(196, 181, 253, 0.08) 0%, transparent 35%);
}
[data-module="tracers"] .module-art::before {
  content: "";
  position: absolute;
  left: 5%;
  top: 50%;
  width: 90%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 100, 100, 0.5), rgba(100, 255, 150, 0.3), rgba(100, 200, 255, 0.3), transparent);
  transform: translateY(-20px);
  animation: trace-1 4s ease-in-out infinite;
}
[data-module="tracers"] .module-art::after {
  content: "";
  position: absolute;
  left: 5%;
  top: 50%;
  width: 75%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 200, 100, 0.4), transparent);
  transform: translateY(25px);
  animation: trace-2 4.5s ease-in-out infinite;
}
@keyframes trace-1 {
  0%, 100% { opacity: 0.4; transform: translateY(-20px) scaleX(0.9); }
  50% { opacity: 1; transform: translateY(-20px) scaleX(1); }
}
@keyframes trace-2 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}

[data-module="name-tags"] .module-art::before {
  content: "PLAYER";
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.35);
  animation: tag-float 4s ease-in-out infinite;
}
[data-module="name-tags"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 120px;
  height: 4px;
  margin-left: -60px;
  border-radius: 2px;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
  opacity: 0.6;
  animation: hp-bar 3s ease-in-out infinite;
}
@keyframes tag-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}
@keyframes hp-bar {
  0%, 100% { transform: scaleX(0.85); }
  50% { transform: scaleX(1); }
}

[data-module="storage-esp"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 56px;
  margin: -28px 0 0 -40px;
  background: linear-gradient(180deg, #8b5a2b, #5c3d1e);
  border-radius: 4px;
  box-shadow:
    0 4px 0 #3d2814,
    0 0 25px rgba(255, 200, 100, 0.15);
  animation: chest-pulse 3.5s ease-in-out infinite;
}
[data-module="storage-esp"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 24px;
  height: 8px;
  margin-left: -12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
}

[data-module="item-esp"] .module-art:not(:has(.fx-canvas)) {
  background: radial-gradient(circle at 60% 40%, rgba(255, 220, 100, 0.1) 0%, transparent 40%);
}

[data-module="trajectories"] .module-art::before {
  content: "";
  position: absolute;
  left: 10%;
  bottom: 25%;
  width: 50%;
  height: 40%;
  border: dashed 1px rgba(34, 211, 238, 0.2);
  border-bottom: none;
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
  border-color: rgba(34, 211, 238, 0.25) transparent transparent transparent;
  animation: arc-fade 4s ease-in-out infinite;
}

[data-module="fullbright"] .module-art {
  background: radial-gradient(circle at 50% 20%, rgba(255, 250, 220, 0.25) 0%, transparent 45%);
}
[data-module="fullbright"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(255, 220, 100, 0.15) 40%, transparent 70%);
  animation: sun-pulse 4s ease-in-out infinite;
}
[data-module="fullbright"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 8deg, rgba(255, 255, 200, 0.04) 8deg 16deg);
  animation: sun-rays 20s linear infinite;
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes sun-rays {
  to { transform: rotate(360deg); }
}

@keyframes chest-pulse {
  0%, 100% { box-shadow: 0 4px 0 #3d2814, 0 0 20px rgba(255, 200, 100, 0.1); }
  50% { box-shadow: 0 4px 0 #3d2814, 0 0 40px rgba(255, 200, 100, 0.25); }
}
@keyframes arc-fade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* ── Player ─────────────────────────────────────────────────── */

[data-module="scaffold"] .module-art {
  background: linear-gradient(180deg, transparent 60%, rgba(139, 92, 246, 0.06) 100%);
}
[data-module="scaffold"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 160px;
  height: 24px;
  margin-left: -80px;
  background: repeating-linear-gradient(
    90deg,
    rgba(120, 100, 80, 0.4) 0px,
    rgba(120, 100, 80, 0.4) 22px,
    rgba(80, 70, 60, 0.35) 22px,
    rgba(80, 70, 60, 0.35) 44px
  );
  transform: perspective(200px) rotateX(55deg);
  animation: scaffold-build 4s ease-in-out infinite;
}
@keyframes scaffold-build {
  0%, 100% { transform: perspective(200px) rotateX(55deg) translateZ(0); opacity: 0.7; }
  50% { opacity: 1; transform: perspective(200px) rotateX(55deg) translateZ(8px); }
}

[data-module="mlg"] .module-art:not(:has(.fx-canvas)) {
  background: linear-gradient(180deg, #0a2040 0%, #041830 100%);
}

[data-module="parkour"] .module-art::before {
  content: "";
  position: absolute;
  left: 25%;
  bottom: 30%;
  width: 40%;
  height: 8px;
  background: rgba(100, 100, 110, 0.4);
  border-radius: 2px;
  animation: edge-near 2.5s ease-in-out infinite;
}
[data-module="parkour"] .module-art::after {
  content: "";
  position: absolute;
  left: 38%;
  bottom: 38%;
  width: 16px;
  height: 16px;
  background: rgba(196, 181, 253, 0.5);
  border-radius: 4px;
  animation: jump-hop 2.5s ease-in-out infinite;
}
@keyframes edge-near {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.08); }
}
@keyframes jump-hop {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-45px); }
  50% { transform: translateY(0); }
}

[data-module="auto-sprint"] .module-art {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.05) 0%, transparent 50%, rgba(34, 211, 238, 0.05) 100%);
}
[data-module="auto-sprint"] .module-art::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 24px 0 0 -2px rgba(255, 255, 255, 0.3), 48px 0 0 -4px rgba(255, 255, 255, 0.15);
  animation: sprint-streak 1.2s linear infinite;
}
@keyframes sprint-streak {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120px); opacity: 0.2; }
}

[data-module="blink"] .module-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(139, 92, 246, 0.08) 0%, transparent 40%, rgba(139, 92, 246, 0.08) 80%);
  animation: blink-ghost 2.8s ease-in-out infinite;
}
@keyframes blink-ghost {
  0%, 100% { opacity: 0.3; transform: translateX(0); }
  33% { opacity: 0.6; transform: translateX(-15px); }
  66% { opacity: 0.5; transform: translateX(15px); }
}

[data-module="block-in"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border: 1px solid rgba(120, 200, 255, 0.2);
  transform: rotate(0deg);
  animation: cube-spin 8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(120, 200, 255, 0.08) inset,
    0 0 40px rgba(100, 150, 255, 0.05);
}
[data-module="block-in"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border: 1px solid rgba(196, 181, 253, 0.15);
  animation: cube-spin 8s linear reverse infinite;
}
@keyframes cube-spin {
  to { transform: rotate(360deg); }
}

[data-module="fastplace-legit"] .module-art::before {
  content: "";
  position: absolute;
  left: 45%;
  top: 48%;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: place-ring 0.9s ease-out infinite;
}
@keyframes place-ring {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

[data-module="fastplace-legacy"] .module-art {
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 8px,
    rgba(34, 211, 238, 0.04) 8px,
    rgba(34, 211, 238, 0.04) 10px
  );
}
[data-module="fastplace-legacy"] .module-art::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
  animation: speed-line 0.6s linear infinite;
}
@keyframes speed-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Inventory ──────────────────────────────────────────────── */

[data-module="auto-armor"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 2px solid rgba(180, 200, 220, 0.25);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(100, 150, 255, 0.15), transparent);
  animation: armor-slot 4s ease-in-out infinite;
}
[data-module="auto-armor"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 40px;
  height: 28px;
  margin: -14px 0 0 -20px;
  border: 2px solid rgba(180, 200, 220, 0.2);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(150, 180, 255, 0.12), transparent);
}

[data-module="auto-eat"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 32px;
  height: 28px;
  margin: -14px 0 0 -16px;
  background: radial-gradient(ellipse at 50% 30%, #c4a574, #8b6914);
  border-radius: 40% 40% 45% 45%;
  animation: eat-bob 2.8s ease-in-out infinite;
}
@keyframes eat-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-6px) scale(1.05); }
}

[data-module="chest-steal"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 90px;
  height: 54px;
  margin: -27px 0 0 -45px;
  background: linear-gradient(180deg, #8b5a2b, #5c3d1e);
  border-radius: 4px 4px 8px 8px;
  animation: chest-open 2.2s ease-in-out infinite;
}
@keyframes chest-open {
  0%, 100% { transform: perspective(300px) rotateX(0deg); }
  40% { transform: perspective(300px) rotateX(-8deg); }
}

[data-module="refill"] .module-art::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: rgba(200, 200, 220, 0.5);
  border-radius: 2px;
  box-shadow: 20px 0 rgba(200, 200, 220, 0.35), 40px 0 rgba(200, 200, 220, 0.2);
  animation: refill-slide 2.5s ease-in-out infinite;
}
@keyframes refill-slide {
  0%, 100% { transform: translateX(0); opacity: 0.8; }
  50% { transform: translateX(30px); opacity: 1; }
}

[data-module="inv-cleaner"] .module-art::before {
  content: "×";
  position: absolute;
  left: 35%;
  top: 40%;
  font-size: 2rem;
  color: rgba(255, 100, 100, 0.35);
  animation: trash-1 2s ease-in infinite;
}
[data-module="inv-cleaner"] .module-art::after {
  content: "×";
  position: absolute;
  left: 55%;
  top: 52%;
  font-size: 1.5rem;
  color: rgba(255, 200, 100, 0.3);
  animation: trash-2 2.4s ease-in infinite;
}
@keyframes trash-1 {
  0% { transform: translateY(0) rotate(0); opacity: 0.8; }
  100% { transform: translateY(40px) rotate(20deg); opacity: 0; }
}
@keyframes trash-2 {
  0% { transform: translateY(0); opacity: 0.6; }
  100% { transform: translateY(35px); opacity: 0; }
}

[data-module="auto-tool"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 8px;
  height: 70px;
  margin: -35px 0 0 -4px;
  background: linear-gradient(90deg, #6b7280, #9ca3af, #6b7280);
  border-radius: 2px;
  transform: rotate(-25deg);
  box-shadow: 0 0 15px rgba(200, 200, 220, 0.15);
}
[data-module="auto-tool"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 28px;
  height: 20px;
  margin: -10px 0 0 -14px;
  background: linear-gradient(135deg, #9ca3af, #4b5563);
  clip-path: polygon(50% 0%, 100% 35%, 85% 100%, 15% 100%, 0% 35%);
  transform: rotate(-25deg);
  animation: pick-glint 3s ease-in-out infinite;
}
@keyframes pick-glint {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

[data-module="throw-pot"] .module-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 22px;
  height: 36px;
  margin: -18px 0 0 -11px;
  background: linear-gradient(180deg, rgba(100, 255, 150, 0.35), rgba(50, 150, 100, 0.5));
  border-radius: 30% 30% 45% 45%;
  border: 1px solid rgba(150, 255, 180, 0.3);
  animation: pot-tilt 3s ease-in-out infinite;
}
[data-module="throw-pot"] .module-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 255, 180, 0.15) 0%, transparent 70%);
  animation: splash-ring 2s ease-out infinite;
}
@keyframes pot-tilt {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes splash-ring {
  0% { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ── HUD ────────────────────────────────────────────────────── */

[data-module="array-list"] .module-art::before {
  content: "";
  position: absolute;
  right: 12%;
  top: 28%;
  width: min(200px, 40vw);
  height: 8px;
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.4), rgba(139, 92, 246, 0.35));
  border-radius: 2px;
  box-shadow: 0 14px 0 rgba(34, 197, 94, 0.25), 0 28px 0 rgba(59, 130, 246, 0.2);
  animation: list-stack 4s ease-in-out infinite;
}
@keyframes list-stack {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50% { transform: translateX(-6px); opacity: 1; }
}

[data-module="coords-hud"] .module-art::before {
  content: "X 128  ·  Y 71  ·  Z -45";
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(34, 211, 238, 0.35);
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
  animation: coords-flick 5s step-end infinite;
}
@keyframes coords-flick {
  0%, 90% { opacity: 0.9; }
  92% { opacity: 0.4; }
  94% { opacity: 1; }
}

[data-module="arrows"] .module-art::before {
  content: "➤";
  position: absolute;
  left: 8%;
  top: 42%;
  font-size: 1.5rem;
  color: rgba(255, 80, 100, 0.45);
  animation: arrow-edge-a 3.5s ease-in-out infinite;
}
[data-module="arrows"] .module-art::after {
  content: "➤";
  position: absolute;
  right: 8%;
  top: 52%;
  font-size: 1.2rem;
  color: rgba(100, 200, 255, 0.4);
  animation: arrow-edge-b 4s ease-in-out 0.5s infinite;
}
@keyframes arrow-edge-a {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(8px); }
}
@keyframes arrow-edge-b {
  0%, 100% { opacity: 0.45; transform: rotate(180deg) translateX(0); }
  50% { opacity: 0.95; transform: rotate(180deg) translateX(8px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .module-art,
  .module-art::before,
  .module-art::after {
    animation: none !important;
    transition: none !important;
  }
  .module-art .fx-canvas {
    opacity: 0.35;
  }
}