/* =========================
   MYSTIC NODES (CONSISTENT TEMPLATE)
   Mirrors Gunner (x-axis center at 900px)

   UPDATED:
   - Arcane Indigo + Gold Accent scheme for normal Mystic nodes
   - Adds: .selected + .applied + swirling dots (anchored to picture::before)
   - MY:6 cluster stays inverted EVEN WHEN APPLIED (uses node-breathe-mystic-invert)
   - Health/Action/Reaction selected + applied match the Agent template conventions
   ========================= */

.mystic-1-tier-1,
.my-2-tier-2,
.my-3-tier-3,
.my-4-tier-3,
.my-5-tier-4,
.my-6-tier-4,
.my-reaction-tier-5,
.my-action-tier-5,
.my-7-tier-6,
.my-health-tier-6,
.my-8-tier-6,
.my-sub-tier-7,
.my-5-minor-node-1,
.my-5-minor-node-2,
.my-5-minor-node-3,
.my-5-minor-node-4,
.my-5-minor-node-5,
.my-6-minor-node-1,
.my-6-minor-node-2,
.my-6-minor-node-3,
.my-6-minor-node-4 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

/* =========================
   SIZES (match Hunter/Gunner)
   ========================= */

/* Big nodes (Tier 1 + Tier 7) */
.mystic-1-tier-1 img,
.my-sub-tier-7 img {
  width: 45px;
  height: auto;
}

/* Regular nodes */
.my-2-tier-2 img,
.my-3-tier-3 img,
.my-4-tier-3 img,
.my-5-tier-4 img,
.my-6-tier-4 img,
.my-7-tier-6 img,
.my-8-tier-6 img {
  width: 20px;
  height: auto;
}

/* Minor nodes */
.my-5-minor-node-1 img,
.my-5-minor-node-2 img,
.my-5-minor-node-3 img,
.my-5-minor-node-4 img,
.my-5-minor-node-5 img,
.my-6-minor-node-1 img,
.my-6-minor-node-2 img,
.my-6-minor-node-3 img,
.my-6-minor-node-4 img {
  width: 6px;
  height: auto;
}

/* Health / Action / Reaction */
.my-health-tier-6 img {
  width: 17px;
  height: auto;
}

.my-reaction-tier-5 img,
.my-action-tier-5 img {
  width: 22px;
  height: auto;
}

/* =========================
   LABELS (Arcane Indigo + Gold Accent)
   ========================= */

.mystic-label {
  margin-top: -4px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;

  /* Arcane Indigo label */
  color: rgba(190, 175, 255, 1);
  text-shadow:
    0 0 6px rgba(120, 70, 200, 0.45),
    0 0 10px rgba(255, 210, 140, 0.18); /* subtle gold hint */

  white-space: nowrap;
  line-height: .5;
  font-size: 5px;
}

.mystic-1-tier-1 .mystic-label {
  font-size: 6px;
}

.my-sub-tier-7 .mystic-label {
  font-size: 4px;
}

.my-health-tier-6 .mystic-label {
  font-size: 3px;
  margin-top: -3px;
  color: rgba(255, 170, 70, 0.95);
  text-shadow: 0 0 6px rgba(255, 120, 40, 0.55);
}

.my-reaction-tier-5 .mystic-label,
.my-action-tier-5 .mystic-label {
  font-size: 3px;
  margin-top: -5.5px;
  color: rgba(255, 170, 70, 0.95);
  text-shadow: 0 0 6px rgba(255, 120, 40, 0.55);
}

/* =========================
   Anchor dots to ICON (picture), not wrapper
   + stacking context so dots can sit behind icon without vanishing
   ========================= */

.mystic-1-tier-1 picture,
.my-2-tier-2 picture,
.my-3-tier-3 picture,
.my-4-tier-3 picture,
.my-5-tier-4 picture,
.my-6-tier-4 picture,
.my-reaction-tier-5 picture,
.my-action-tier-5 picture,
.my-7-tier-6 picture,
.my-health-tier-6 picture,
.my-8-tier-6 picture,
.my-sub-tier-7 picture,
.my-5-minor-node-1 picture,
.my-5-minor-node-2 picture,
.my-5-minor-node-3 picture,
.my-5-minor-node-4 picture,
.my-5-minor-node-5 picture,
.my-6-minor-node-1 picture,
.my-6-minor-node-2 picture,
.my-6-minor-node-3 picture,
.my-6-minor-node-4 picture {
  position: relative;
  display: inline-block;
  z-index: 0; /* stacking context for ::before */
}

/* Put icon ABOVE the dots */
.mystic-1-tier-1 img,
.my-2-tier-2 img,
.my-3-tier-3 img,
.my-4-tier-3 img,
.my-5-tier-4 img,
.my-6-tier-4 img,
.my-7-tier-6 img,
.my-8-tier-6 img,
.my-sub-tier-7 img,
.my-5-minor-node-1 img,
.my-5-minor-node-2 img,
.my-5-minor-node-3 img,
.my-5-minor-node-4 img,
.my-5-minor-node-5 img,
.my-6-minor-node-1 img,
.my-6-minor-node-2 img,
.my-6-minor-node-3 img,
.my-6-minor-node-4 img,
.my-health-tier-6 img,
.my-reaction-tier-5 img,
.my-action-tier-5 img {
  position: relative;
  z-index: 1;
}

/* =========================
   BRIGHTNESS + HOVER GLOW (Arcane Indigo + Gold Accent)
   ========================= */

.my-2-tier-2 img,
.my-3-tier-3 img,
.my-4-tier-3 img,
.my-5-tier-4 img,
.my-6-tier-4 img,
.my-7-tier-6 img,
.my-8-tier-6 img,
.mystic-1-tier-1 img,
.my-sub-tier-7 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-2-tier-2:hover img,
.my-3-tier-3:hover img,
.my-4-tier-3:hover img,
.my-5-tier-4:hover img,
.my-6-tier-4:hover img,
.my-7-tier-6:hover img,
.my-8-tier-6:hover img,
.mystic-1-tier-1:hover img,
.my-sub-tier-7:hover img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 1px rgba(180, 85, 255, 0.2))
    drop-shadow(0 0 2px rgba(120, 40, 220, 0.45))
    drop-shadow(0 0 4px rgba(255, 245, 220, 0.22));
}

/* Selected (normal mystic nodes) */
.my-2-tier-2.selected img,
.my-3-tier-3.selected img,
.my-4-tier-3.selected img,
.my-5-tier-4.selected img,
.my-6-tier-4.selected img,
.my-7-tier-6.selected img,
.my-8-tier-6.selected img,
.mystic-1-tier-1.selected img,
.my-sub-tier-7.selected img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(235, 210, 255, 0.20))
    drop-shadow(0 0 4px rgba(180, 85, 255, 0.70))
    drop-shadow(0 0 10px rgba(110, 20, 215, 0.55))
    drop-shadow(0 0 10px rgba(255, 245, 220, 0.30));
}

/* Health hover (red) */
.my-health-tier-6 img {
  filter: brightness(1.8) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-health-tier-6:hover img {
  filter:
    brightness(1.0)
    drop-shadow(0 0 2px rgba(255, 80, 80, 0.8))
    drop-shadow(0 0 4px rgba(255, 80, 80, 0.4));
}

.my-health-tier-6.selected img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(205, 57, 57, 1.0))
    drop-shadow(0 0 4px rgba(143, 8, 8, 0.7))
    drop-shadow(0 0 8px rgba(255, 80, 80, 0.5));
}

/* Reaction hover (blue) + Action hover (orange) */
.my-reaction-tier-5 img,
.my-action-tier-5 img {
  filter: brightness(1.7);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-reaction-tier-5:hover img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(77, 81, 193, 0.8))
    drop-shadow(0 0 4px rgba(74, 69, 230, 0.5));
}

.my-reaction-tier-5.selected img {
  filter:
    brightness(2.0)
    drop-shadow(0 0 2px rgba(77, 81, 193, 0.9))
    drop-shadow(0 0 4px rgba(74, 69, 230, 0.7))
    drop-shadow(0 0 10px rgba(70, 24, 169, 0.6));
}

.my-action-tier-5:hover img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(255, 170, 70, 0.8))
    drop-shadow(0 0 4px rgba(255, 170, 70, 0.5));
}

.my-action-tier-5.selected img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(255, 170, 70, 0.7))
    drop-shadow(0 0 4px rgba(255, 170, 70, 0.5))
    drop-shadow(0 0 8px rgba(255, 170, 70, 0.3));
}

/* Minor nodes (bright + hover) */
.my-5-minor-node-1 img,
.my-5-minor-node-2 img,
.my-5-minor-node-3 img,
.my-5-minor-node-4 img,
.my-5-minor-node-5 img,
.my-6-minor-node-1 img,
.my-6-minor-node-2 img,
.my-6-minor-node-3 img,
.my-6-minor-node-4 img {
  filter: brightness(1.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-5-minor-node-1:hover img,
.my-5-minor-node-2:hover img,
.my-5-minor-node-3:hover img,
.my-5-minor-node-4:hover img,
.my-5-minor-node-5:hover img,
.my-6-minor-node-1:hover img,
.my-6-minor-node-2:hover img,
.my-6-minor-node-3:hover img,
.my-6-minor-node-4:hover img {
  filter:
    brightness(1.4)
    drop-shadow(0 0 2px rgba(120, 70, 200, 0.85))
    drop-shadow(0 0 4px rgba(80, 40, 170, 0.45))
    drop-shadow(0 0 6px rgba(255, 210, 140, 0.22));
}

.my-5-minor-node-1.selected img,
.my-5-minor-node-2.selected img,
.my-5-minor-node-3.selected img,
.my-5-minor-node-4.selected img,
.my-5-minor-node-5.selected img,
.my-6-minor-node-1.selected img,
.my-6-minor-node-2.selected img,
.my-6-minor-node-3.selected img,
.my-6-minor-node-4.selected img {
  filter:
    brightness(1.6)
    drop-shadow(0 0 2px rgba(190, 175, 255, 0.90))
    drop-shadow(0 0 4px rgba(120, 70, 200, 0.70))
    drop-shadow(0 0 10px rgba(80, 40, 170, 0.55))
    drop-shadow(0 0 10px rgba(255, 210, 140, 0.35));
}

/* =========================
   MYSTIC – Inverted MY:6 Cluster (EVIL OPTIONS)
   ========================= */

.my-6-tier-4 img,
.my-6-minor-node-1 img,
.my-6-minor-node-2 img,
.my-6-minor-node-3 img,
.my-6-minor-node-4 img {
  filter: invert(1) brightness(1);
}

/* =========================
   MYSTIC – Inverted MY:6 Hover (KEEP INVERT)
   ========================= */

.my-6-tier-4:hover img,
.my-6-minor-node-1:hover img,
.my-6-minor-node-2:hover img,
.my-6-minor-node-3:hover img,
.my-6-minor-node-4:hover img {
  filter:
    invert(1)
    brightness(.7)
    drop-shadow(0 0 2px rgba(120, 70, 200, 0.85))
    drop-shadow(0 0 4px rgba(80, 40, 170, 0.45))
    drop-shadow(0 0 6px rgba(255, 210, 140, 0.22));
}

/* Inverted MY:6 selected (KEEP INVERT) */
.my-6-tier-4.selected img,
.my-6-minor-node-1.selected img,
.my-6-minor-node-2.selected img,
.my-6-minor-node-3.selected img,
.my-6-minor-node-4.selected img {
  filter:
    invert(1)
    brightness(.5)
    drop-shadow(0 0 2px rgba(190, 175, 255, 0.90))
    drop-shadow(0 0 4px rgba(120, 70, 200, 0.70))
    drop-shadow(0 0 10px rgba(80, 40, 170, 0.55))
    drop-shadow(0 0 10px rgba(255, 210, 140, 0.35));
}

/* =========================
   APPLIED STATE (breathing + swirling dots)
   ========================= */

/* Normal Mystic nodes applied */
.mystic-1-tier-1.applied img,
.my-2-tier-2.applied img,
.my-3-tier-3.applied img,
.my-4-tier-3.applied img,
.my-5-tier-4.applied img,
.my-7-tier-6.applied img,
.my-8-tier-6.applied img,
.my-sub-tier-7.applied img,
.my-5-minor-node-1.applied img,
.my-5-minor-node-2.applied img,
.my-5-minor-node-3.applied img,
.my-5-minor-node-4.applied img,
.my-5-minor-node-5.applied img {
  animation: node-breathe-mystic 3s ease-in-out infinite;
}

/* MY:6 evil cluster applied (KEEP INVERT EVEN WHILE APPLIED) */
.my-6-tier-4.applied img,
.my-6-minor-node-1.applied img,
.my-6-minor-node-2.applied img,
.my-6-minor-node-3.applied img,
.my-6-minor-node-4.applied img {
  animation: node-breathe-mystic-invert 3s ease-in-out infinite;
}

/* Health / React / Act applied (matches agent template) */
.my-health-tier-6.applied img { animation: node-breathe-health 3s ease-in-out infinite; }
.my-reaction-tier-5.applied img { animation: node-breathe-react 3s ease-in-out infinite; }
.my-action-tier-5.applied img { animation: node-breathe-act 3s ease-in-out infinite; }

/* Swirling two-dot overlay (Agent colors), anchored to picture::before */
.mystic-1-tier-1.applied picture::before,
.my-2-tier-2.applied picture::before,
.my-3-tier-3.applied picture::before,
.my-4-tier-3.applied picture::before,
.my-5-tier-4.applied picture::before,
.my-6-tier-4.applied picture::before,
.my-reaction-tier-5.applied picture::before,
.my-action-tier-5.applied picture::before,
.my-7-tier-6.applied picture::before,
.my-health-tier-6.applied picture::before,
.my-8-tier-6.applied picture::before,
.my-sub-tier-7.applied picture::before,
.my-5-minor-node-1.applied picture::before,
.my-5-minor-node-2.applied picture::before,
.my-5-minor-node-3.applied picture::before,
.my-5-minor-node-4.applied picture::before,
.my-5-minor-node-5.applied picture::before,
.my-6-minor-node-1.applied picture::before,
.my-6-minor-node-2.applied picture::before,
.my-6-minor-node-3.applied picture::before,
.my-6-minor-node-4.applied picture::before {
  content: '';
  position: absolute;
  inset: -32%;
  background:
    radial-gradient(circle at 80% 50%, rgba(58, 24, 194, 0.9) 1px, transparent 1px),
    radial-gradient(circle at 20% 50%, rgba(68, 43, 213, 0.9) 1px, transparent 1px);
  background-size: 100% 100%;
  animation: two-dot-rotate 3s linear infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* Health+ needs larger radius due to smaller node size */
.my-health-tier-6.applied picture::before {
  inset: -50%;
}

/* Wider orbit for Tier-1 big icon so dots are clearly visible */
.mystic-1-tier-1.applied picture::before {
  inset: -28%;
}

/* =========================
   APPLIED BREATHING — Noticeably More Purple (Option B)
   ========================= */

@keyframes node-breathe-mystic {

  0%, 100%{
    filter:
      brightness(1.2)
      drop-shadow(0 0 3px rgba(235, 210, 255, 0.2))
      drop-shadow(0 0 6px rgba(180, 85, 255, 0.75))
      drop-shadow(0 0 12px rgba(110, 20, 215, 0.55))
      drop-shadow(0 0 16px rgba(255, 245, 220, 0.28));
  }

  50%{
    filter:
      brightness(1.8)
      drop-shadow(0 0 4px rgba(235, 210, 255, 0.22))
      drop-shadow(0 0 8px rgba(180, 85, 255, 0.52))
      drop-shadow(0 0 16px rgba(110, 20, 215, 0.35))
      drop-shadow(0 0 12px rgba(255, 245, 220, 0.18));
  }
}

/* Same breathe, but keeps invert for MY:6 while applied */
@keyframes node-breathe-mystic-invert {
  0%, 100%{
    filter:
      invert(1)
      brightness(.9)
      drop-shadow(0 0 2px rgba(190, 175, 255, 0.85))
      drop-shadow(0 0 4px rgba(120, 70, 200, 0.75))
      drop-shadow(0 0 6px rgba(80, 40, 170, 0.55))
      drop-shadow(0 0 8px rgba(255, 210, 140, 0.28));
  }
  50%{
    filter:
      invert(1)
      brightness(.45)
      drop-shadow(0 0 3px rgba(190, 175, 255, 0.62))
      drop-shadow(0 0 6px rgba(120, 70, 200, 0.52))
      drop-shadow(0 0 8px rgba(80, 40, 170, 0.35))
      drop-shadow(0 0 10px rgba(255, 210, 140, 0.18));
  }
}

@keyframes two-dot-rotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* =========================
   PLACEMENT
   ========================= */

/* Tier 1 */
.mystic-1-tier-1 { left: 784px; top: 968px; }

/* Tier 2 */
.my-2-tier-2 { left: 763px; top: 1017px; }

/* Tier 3 */
.my-3-tier-3 { left: 727px; top: 1028px; }
.my-4-tier-3 { left: 752px; top: 1053px; }

/* Tier 4 */
.my-5-tier-4 { left: 690px; top: 1042px; }

.my-5-minor-node-1 { left: 686px; top: 1029px; }
.my-5-minor-node-2 { left: 684px; top: 1036px; }
.my-5-minor-node-3 { left: 692px; top: 1024px; }
.my-5-minor-node-4 { left: 700px; top: 1024px; }
.my-5-minor-node-5 { left: 706px; top: 1027px; }

.my-6-tier-4 { left: 737px; top: 1088px; }

.my-6-minor-node-1 { left: 757px; top: 1083px; }
.my-6-minor-node-2 { left: 764px; top: 1082px; }
.my-6-minor-node-3 { left: 754px; top: 1093px; }
.my-6-minor-node-4 { left: 759px; top: 1098px; }

/* Tier 5 */
.my-reaction-tier-5 { left: 655px; top: 1055px; }
.my-action-tier-5   { left: 720px; top: 1122px; }

/* Tier 6 */
.my-7-tier-6      { left: 625px; top: 1071px; }
.my-health-tier-6 { left: 664px; top: 1117px; }
.my-8-tier-6      { left: 705px; top: 1151px; }

/* Tier 7 */
.my-sub-tier-7 { left: 624px; top: 1136px; }

/* ============================================================
   PREMIUM MYSTIC NODES
   ============================================================ */

.my-9-tier-8,
.my-10-tier-8,
.my-11-tier-8,
.my-12-tier-8,
.my-13-tier-12,
.my-14-tier-12,
.my-15-tier-12,
.my-action-tier-10,
.my-reaction-tier-12,
.my-health-tier-12
{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.my-9-tier-8 img,
.my-10-tier-8 img,
.my-11-tier-8 img,
.my-12-tier-8 img,
.my-13-tier-12 img,
.my-14-tier-12 img,
.my-15-tier-12 img {
  width: 20px;
  height: auto;
}

/* Premium utility node sizes */
.my-action-tier-10 img,
.my-reaction-tier-12 img {
  width: 22px;
  height: auto;
}

.my-health-tier-12 img {
  width: 17px;
  aspect-ratio: 1 / 1;
}

/* Premium utility labels */
.my-action-tier-10 .mystic-label,
.my-reaction-tier-12 .mystic-label {
  font-size: 3px;
  margin-top: -5.5px;
  color: rgba(255, 170, 70, 0.95);
  text-shadow: 0 0 6px rgba(255, 120, 40, 0.55);
}

.my-health-tier-12 .mystic-label {
  font-size: 3px;
  margin-top: -3px;
  color: rgba(255, 170, 70, 0.95);
  text-shadow: 0 0 6px rgba(255, 120, 40, 0.55);
}

/* =========================
   PLACEMENT: MY 9-15 & premium utility
   ========================= */

.my-9-tier-8         { left: 575px;  top: 1158px; }
.my-10-tier-8        { left: 591px;  top: 1175px; }
.my-11-tier-8        { left: 607px;  top: 1190px; }
.my-12-tier-8        { left: 624px;  top: 1204px; }

.my-action-tier-10   { left: 550px;  top: 1229px; }

.my-13-tier-12       { left: 466px;  top: 1243px; }
.my-reaction-tier-12 { left: 485px;  top: 1263px; }
.my-14-tier-12       { left: 501px;  top: 1288px; }
.my-health-tier-12   { left: 525px;  top: 1300px; }
.my-15-tier-12       { left: 542px;  top: 1320px; }

/* =========================
   MY 9-15 VISUAL EMPHASIS
   ========================= */

.my-9-tier-8 img,
.my-10-tier-8 img,
.my-11-tier-8 img,
.my-12-tier-8 img,
.my-13-tier-12 img,
.my-14-tier-12 img,
.my-15-tier-12 img {
  filter: brightness(1.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-9-tier-8:hover img,
.my-10-tier-8:hover img,
.my-11-tier-8:hover img,
.my-12-tier-8:hover img,
.my-13-tier-12:hover img,
.my-14-tier-12:hover img,
.my-15-tier-12:hover img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.85))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.45));
}

.my-9-tier-8.selected img,
.my-10-tier-8.selected img,
.my-11-tier-8.selected img,
.my-12-tier-8.selected img,
.my-13-tier-12.selected img,
.my-14-tier-12.selected img,
.my-15-tier-12.selected img {
  filter:
    brightness(1.4)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.95))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.70))
    drop-shadow(0 0 8px rgba(140, 230, 255, 0.50));
}

/* Premium HEALTH+ emphasis */
.my-health-tier-12 img {
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-health-tier-12:hover img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 2px rgba(255, 80, 80, 0.6))
    drop-shadow(0 0 4px rgba(255, 80, 80, 0.4));
}

.my-health-tier-12.selected img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(205, 57, 57, 1.0))
    drop-shadow(0 0 4px rgba(143, 8, 8, 0.7))
    drop-shadow(0 0 8px rgba(255, 80, 80, 0.5));
}

/* Premium ACT+ emphasis */
.my-action-tier-10 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-action-tier-10:hover img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 2px rgba(255, 170, 70, 0.8))
    drop-shadow(0 0 4px rgba(255, 170, 70, 0.5));
}

.my-action-tier-10.selected img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(255, 170, 70, 0.7))
    drop-shadow(0 0 4px rgba(255, 170, 70, 0.5))
    drop-shadow(0 0 8px rgba(255, 170, 70, 0.3));
}

/* Premium REACT+ emphasis */
.my-reaction-tier-12 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.my-reaction-tier-12:hover img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(77, 81, 193, 0.8))
    drop-shadow(0 0 4px rgba(74, 69, 230, 0.5));
}

.my-reaction-tier-12.selected img {
  filter:
    brightness(2.0)
    drop-shadow(0 0 2px rgba(77, 81, 193, 0.9))
    drop-shadow(0 0 4px rgba(74, 69, 230, 0.7))
    drop-shadow(0 0 10px rgba(70, 24, 169, 0.6));
}

/* =========================
   MY PREMIUM APPLIED STATE
   ========================= */

.my-9-tier-8.applied img,
.my-10-tier-8.applied img,
.my-11-tier-8.applied img,
.my-12-tier-8.applied img,
.my-13-tier-12.applied img,
.my-14-tier-12.applied img,
.my-15-tier-12.applied img {
  animation: node-breathe-mystic 3s ease-in-out infinite;
}

.my-health-tier-12.applied img {
  animation: node-breathe-health 3s ease-in-out infinite;
}

.my-reaction-tier-12.applied img {
  animation: node-breathe-react 3s ease-in-out infinite;
}

.my-action-tier-10.applied img {
  animation: node-breathe-act 3s ease-in-out infinite;
}

.my-9-tier-8.applied::before,
.my-10-tier-8.applied::before,
.my-11-tier-8.applied::before,
.my-12-tier-8.applied::before,
.my-13-tier-12.applied::before,
.my-14-tier-12.applied::before,
.my-15-tier-12.applied::before,
.my-action-tier-10.applied::before,
.my-reaction-tier-12.applied::before,
.my-health-tier-12.applied::before
{
  content: '';
  position: absolute;
  inset: -32%;
  background:
    radial-gradient(circle at 80% 50%, rgba(58, 24, 194, 0.9) 1px, transparent 1px),
    radial-gradient(circle at 20% 50%, rgba(68, 43, 213, 0.9) 1px, transparent 1px);
  background-size: 100% 100%;
  animation: two-dot-rotate 3s linear infinite;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

.my-health-tier-12.applied::before {
  inset: -50%;
}

/* ============================================================
   VOID NODES
   ============================================================ */

.void-1-tier-7,
.vo-2-tier-9,
.vo-3-tier-9,
.vo-4-tier-11,
.vo-5-tier-11
{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.void-1-tier-7 img {
  width: 42px;
  height: auto;
}

.vo-2-tier-9 img,
.vo-3-tier-9 img,
.vo-4-tier-11 img,
.vo-5-tier-11 img {
  width: 21px;
  height: auto;
}

/* VO 3 minor nodes */
.vo-3-minor-node-1,
.vo-3-minor-node-2,
.vo-3-minor-node-3,
.vo-3-minor-node-4,
.vo-3-minor-node-5 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.vo-3-minor-node-1 img,
.vo-3-minor-node-2 img,
.vo-3-minor-node-3 img,
.vo-3-minor-node-4 img,
.vo-3-minor-node-5 img {
  width: 8px;
  height: auto;
}

.void-1-tier-7 .mystic-label {
  font-size: 6px;
  margin-top: -8px;
}

.vo-3-tier-9 .mystic-label {
  margin-left: 20px;
}

/* =========================
   PLACEMENT: VOID
   ========================= */

.void-1-tier-7       { left: 585px;  top: 1100px; }
.vo-2-tier-9         { left: 514px;  top: 1134px; }
.vo-3-tier-9         { left: 532px;  top: 1158px; }
.vo-4-tier-11        { left: 466px;  top: 1181px; }
.vo-5-tier-11        { left: 480px;  top: 1202px; }

.vo-3-minor-node-1   { left: 540px;  top: 1166px; }
.vo-3-minor-node-2   { left: 542px;  top: 1174px; }
.vo-3-minor-node-3   { left: 547px;  top: 1182px; }
.vo-3-minor-node-4   { left: 557px;  top: 1186px; }
.vo-3-minor-node-5   { left: 564px;  top: 1182px; }

/* =========================
   VOID VISUAL EMPHASIS
   ========================= */

.void-1-tier-7 img,
.vo-2-tier-9 img,
.vo-3-tier-9 img,
.vo-4-tier-11 img,
.vo-5-tier-11 img {
  filter: brightness(1.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.void-1-tier-7:hover img,
.vo-2-tier-9:hover img,
.vo-3-tier-9:hover img,
.vo-4-tier-11:hover img,
.vo-5-tier-11:hover img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.85))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.45));
}

.void-1-tier-7.selected img,
.vo-2-tier-9.selected img,
.vo-3-tier-9.selected img,
.vo-4-tier-11.selected img,
.vo-5-tier-11.selected img {
  filter:
    brightness(1.4)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.95))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.70))
    drop-shadow(0 0 8px rgba(140, 230, 255, 0.50));
}

/* VO 3 minor emphasis */
.vo-3-minor-node-1 img,
.vo-3-minor-node-2 img,
.vo-3-minor-node-3 img,
.vo-3-minor-node-4 img,
.vo-3-minor-node-5 img {
  filter: brightness(1.3);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.vo-3-minor-node-1:hover img,
.vo-3-minor-node-2:hover img,
.vo-3-minor-node-3:hover img,
.vo-3-minor-node-4:hover img,
.vo-3-minor-node-5:hover img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.85))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.45));
}

.vo-3-minor-node-1.selected img,
.vo-3-minor-node-2.selected img,
.vo-3-minor-node-3.selected img,
.vo-3-minor-node-4.selected img,
.vo-3-minor-node-5.selected img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.95))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.70))
    drop-shadow(0 0 8px rgba(140, 230, 255, 0.50));
}

/* =========================
   VOID APPLIED STATE
   ========================= */

.void-1-tier-7.applied img,
.vo-2-tier-9.applied img,
.vo-3-tier-9.applied img,
.vo-4-tier-11.applied img,
.vo-5-tier-11.applied img,
.vo-3-minor-node-1.applied img,
.vo-3-minor-node-2.applied img,
.vo-3-minor-node-3.applied img,
.vo-3-minor-node-4.applied img,
.vo-3-minor-node-5.applied img {
  animation: node-breathe-mystic 3s ease-in-out infinite;
}

.void-1-tier-7.applied::before,
.vo-2-tier-9.applied::before,
.vo-3-tier-9.applied::before,
.vo-3-minor-node-1.applied::before,
.vo-3-minor-node-2.applied::before,
.vo-3-minor-node-3.applied::before,
.vo-3-minor-node-4.applied::before,
.vo-3-minor-node-5.applied::before,
.vo-4-tier-11.applied::before,
.vo-5-tier-11.applied::before
{
  content: '';
  position: absolute;
  inset: -32%;
  background:
    radial-gradient(circle at 80% 50%, rgba(58, 24, 194, 0.9) 1px, transparent 1px),
    radial-gradient(circle at 20% 50%, rgba(68, 43, 213, 0.9) 1px, transparent 1px);
  background-size: 100% 100%;
  animation: two-dot-rotate 3s linear infinite;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

/* ============================================================
   EMPYREAN NODES
   ============================================================ */

.empyrean-1-tier-7,
.em-2-tier-9,
.em-3-tier-9,
.em-4-tier-9,
.em-5-tier-11,
.em-6-tier-11
{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.empyrean-1-tier-7 img {
  width: 37px;
  height: auto;
}

.em-2-tier-9 img,
.em-3-tier-9 img,
.em-4-tier-9 img,
.em-5-tier-11 img,
.em-6-tier-11 img {
  width: 18px;
  height: auto;
}

/* EM 5 minor nodes */
.em-5-minor-node-1,
.em-5-minor-node-2 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.em-5-minor-node-1 img,
.em-5-minor-node-2 img {
  width: 6px;
  height: auto;
}

/* EM 6 minor nodes */
.em-6-minor-node-1,
.em-6-minor-node-2 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.em-6-minor-node-1 img,
.em-6-minor-node-2 img {
  width: 6px;
  height: auto;
}

.em-2-tier-9 .mystic-label,
.em-3-tier-9 .mystic-label,
.em-4-tier-9 .mystic-label,
.em-5-tier-11 .mystic-label,
.em-6-tier-11 .mystic-label {
  margin-top: -2px;
}

.empyrean-1-tier-7 .mystic-label {
  font-size: 6px;
  margin-top: -1px;
}

/* =========================
   PLACEMENT: EMPYREAN
   ========================= */

.empyrean-1-tier-7   { left: 665px;  top: 1171px; }
.em-2-tier-9         { left: 603px;  top: 1229px; }
.em-3-tier-9         { left: 623px;  top: 1250px; }
.em-4-tier-9         { left: 649px;  top: 1266px; }
.em-5-tier-11        { left: 577px;  top: 1298px; }
.em-6-tier-11        { left: 602px;  top: 1319px; }

.em-5-minor-node-1   { left: 578px;  top: 1277px; }
.em-5-minor-node-2   { left: 570px;  top: 1282px; }

.em-6-minor-node-1   { left: 622px;  top: 1320px; }
.em-6-minor-node-2   { left: 624px;  top: 1312px; }

/* =========================
   EMPYREAN VISUAL EMPHASIS
   ========================= */

.empyrean-1-tier-7 img,
.em-2-tier-9 img,
.em-3-tier-9 img,
.em-4-tier-9 img,
.em-5-tier-11 img,
.em-6-tier-11 img {
  filter: brightness(1.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.empyrean-1-tier-7:hover img,
.em-2-tier-9:hover img,
.em-3-tier-9:hover img,
.em-4-tier-9:hover img,
.em-5-tier-11:hover img,
.em-6-tier-11:hover img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.85))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.45));
}

.empyrean-1-tier-7.selected img,
.em-2-tier-9.selected img,
.em-3-tier-9.selected img,
.em-4-tier-9.selected img,
.em-5-tier-11.selected img,
.em-6-tier-11.selected img {
  filter:
    brightness(1.4)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.95))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.70))
    drop-shadow(0 0 8px rgba(140, 230, 255, 0.50));
}

/* EM minor emphasis */
.em-5-minor-node-1 img,
.em-5-minor-node-2 img,
.em-6-minor-node-1 img,
.em-6-minor-node-2 img {
  filter: brightness(1.3);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.em-5-minor-node-1:hover img,
.em-5-minor-node-2:hover img,
.em-6-minor-node-1:hover img,
.em-6-minor-node-2:hover img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.85))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.45));
}

.em-5-minor-node-1.selected img,
.em-5-minor-node-2.selected img,
.em-6-minor-node-1.selected img,
.em-6-minor-node-2.selected img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.95))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.70))
    drop-shadow(0 0 8px rgba(140, 230, 255, 0.50));
}

/* =========================
   EMPYREAN APPLIED STATE
   ========================= */

.empyrean-1-tier-7.applied img,
.em-2-tier-9.applied img,
.em-3-tier-9.applied img,
.em-4-tier-9.applied img,
.em-5-tier-11.applied img,
.em-6-tier-11.applied img,
.em-5-minor-node-1.applied img,
.em-5-minor-node-2.applied img,
.em-6-minor-node-1.applied img,
.em-6-minor-node-2.applied img {
  animation: node-breathe-mystic 3s ease-in-out infinite;
}

.empyrean-1-tier-7.applied::before,
.em-2-tier-9.applied::before,
.em-3-tier-9.applied::before,
.em-4-tier-9.applied::before,
.em-5-tier-11.applied::before,
.em-5-minor-node-1.applied::before,
.em-5-minor-node-2.applied::before,
.em-6-tier-11.applied::before,
.em-6-minor-node-1.applied::before,
.em-6-minor-node-2.applied::before
{
  content: '';
  position: absolute;
  inset: -32%;
  background:
    radial-gradient(circle at 80% 50%, rgba(58, 24, 194, 0.9) 1px, transparent 1px),
    radial-gradient(circle at 20% 50%, rgba(68, 43, 213, 0.9) 1px, transparent 1px);
  background-size: 100% 100%;
  animation: two-dot-rotate 3s linear infinite;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}