/* =========================
   AGENT NODES (BASE)
   ========================= */

.agent-1-tier-1,
.ag-2-tier-2,
.ag-3-tier-2,
.ag-4-tier-2,
.ag-5-tier-3,
.ag-6-tier-3,
.ag-7-tier-3,
.ag-8-tier-4,
.ag-9-tier-4,
.ag-10-tier-5,
.ag-11-tier-6,
.ag-12-tier-6,
.ag-13-tier-6,
.ag-sub-tier-7,
.ag-health-tier-4,
.ag-reaction-tier-5,
.ag-action-tier-5
{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

/* Images */
.agent-1-tier-1 img,
.ag-sub-tier-7 img
{
  width: 62px; /* big Agent size */
  height: auto;
}

.ag-2-tier-2 img,
.ag-3-tier-2 img,
.ag-5-tier-3 img,
.ag-6-tier-3 img,
.ag-7-tier-3 img,
.ag-8-tier-4 img,
.ag-9-tier-4 img,
.ag-10-tier-5 img,
.ag-11-tier-6 img,
.ag-12-tier-6 img,
.ag-13-tier-6 img{
  width: 28px; /* smaller Agents */
  height: auto;
}

.ag-4-tier-2 img{
  width: 26px; /* smaller Tier 2 Agents */
  height: auto;
}

/* Labels (shared styling) */
.agent-label{
  margin-top: -4px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: rgba(140, 210, 255, 1);
  text-shadow: 0 0 6px rgba(40, 160, 255, 0.4);
  white-space: nowrap;
  line-height: 1;

  /* default label size = small (AG: 2 / AG: 3) */
  font-size: 5px;
}

/* Label size: primary Agent only */
.agent-1-tier-1 .agent-label,
.ag-sub-tier-7 .agent-label
{
  font-size: 7px;
}

/* =========================
   MANUAL PLACEMENT
   (LOCKED - do not change)
   ========================= */

.agent-1-tier-1{ left: 904px; top: 750px; }

.ag-2-tier-2{ left: 906px; top: 710px;}
.ag-3-tier-2{ left: 931px; top: 715px; }
.ag-4-tier-2{ left: 957px; top: 719px; }

/* Tier 3: AG 5/6/7 */
.ag-5-tier-3{ left: 906px; top: 675px; }  
.ag-6-tier-3{ left: 941px; top: 680px; }  
.ag-7-tier-3{ left: 974px; top: 692px; }  

/* Tier 4: AG 8/9 (â‰ˆ Tier 3 top minus ~18px) */
.ag-8-tier-4{ left: 906px; top: 638px; }
.ag-9-tier-4{ left: 990px; top: 660px; }

/* Tier 5: AG 10 (â‰ˆ Tier 3 top minus ~36px) */
.ag-10-tier-5{ left: 957px; top: 609px; }

/* Tier 6: AG 11/12/13 (â‰ˆ Tier 3 top minus ~54px) */
.ag-11-tier-6{ left: 906px; top: 566px; }
.ag-12-tier-6{ left: 966px; top: 576px; }
.ag-13-tier-6{ left: 1025px; top: 596px; }

/* Tier 7: AG SUB */
.ag-sub-tier-7{ left: 963px; top: 522px; }

/* =========================
   AG:4 MINOR NODES (NO LABELS)
   ========================= */

.ag-4-minor-node-1,
.ag-4-minor-node-2,
.ag-4-minor-node-3,
.ag-4-minor-node-4{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.ag-4-minor-node-1 img,
.ag-4-minor-node-2 img,
.ag-4-minor-node-3 img,
.ag-4-minor-node-4 img{
  width: 7px; aspect-ratio: 1 / 1; 
}

/* =========================
   MANUAL PLACEMENT (YOU SET)
   Put them to the right of .ag-4-tier-2
   ========================= */

.ag-4-minor-node-1{ left: 978px; top: 711px; }
.ag-4-minor-node-2{ left: 982px; top: 716px; }
.ag-4-minor-node-3{ left: 978px; top: 722px; }
.ag-4-minor-node-4{ left: 971px; top: 726px; }

/* =========================
   AGENT VISUAL EMPHASIS
   ========================= */

/* Agents */
.agent-1-tier-1 img,
.ag-2-tier-2 img,
.ag-3-tier-2 img,
.ag-5-tier-3 img,
.ag-6-tier-3 img,
.ag-7-tier-3 img,
.ag-8-tier-4 img,
.ag-9-tier-4 img,
.ag-10-tier-5 img,
.ag-11-tier-6 img,
.ag-12-tier-6 img,
.ag-13-tier-6 img,
.ag-sub-tier-7 img
{
  filter: brightness(1.4);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

/* Agent hover glow (cyan/blue) */
.agent-1-tier-1:hover img,
.ag-2-tier-2:hover img,
.ag-3-tier-2:hover img,
.ag-5-tier-3:hover img,
.ag-6-tier-3:hover img,
.ag-7-tier-3:hover img,
.ag-8-tier-4:hover img,
.ag-9-tier-4:hover img,
.ag-10-tier-5:hover img,
.ag-11-tier-6:hover img,
.ag-12-tier-6:hover img,
.ag-13-tier-6:hover img,
.ag-sub-tier-7:hover img
{
  filter:
    brightness(1.6)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

/* Agent selected glow (cyan/blue - enhanced) */
.agent-1-tier-1.selected img,
.ag-2-tier-2.selected img,
.ag-3-tier-2.selected img,
.ag-5-tier-3.selected img,
.ag-6-tier-3.selected img,
.ag-7-tier-3.selected img,
.ag-8-tier-4.selected img,
.ag-9-tier-4.selected img,
.ag-10-tier-5.selected img,
.ag-11-tier-6.selected img,
.ag-12-tier-6.selected img,
.ag-13-tier-6.selected img,
.ag-sub-tier-7.selected img
{
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

/* =========================
   AG:4 VISUAL EMPHASIS
   ========================= */

.ag-4-tier-2 img,
.ag-4-minor-node-1 img,
.ag-4-minor-node-2 img,
.ag-4-minor-node-3 img,
.ag-4-minor-node-4 img{
  filter: brightness(2.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

/* AG:4 hover glow (cyan/blue) */
.ag-4-tier-2:hover img,
.ag-4-minor-node-1:hover img,
.ag-4-minor-node-2:hover img,
.ag-4-minor-node-3:hover img,
.ag-4-minor-node-4:hover img{
  filter:
    brightness(2.5)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

/* AG:4 selected glow (cyan/blue - enhanced) */
.ag-4-tier-2.selected img,
.ag-4-minor-node-1.selected img,
.ag-4-minor-node-2.selected img,
.ag-4-minor-node-3.selected img,
.ag-4-minor-node-4.selected img{
  filter:
    brightness(3.0)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

.ag-health-tier-4 img {
  width: 17px; aspect-ratio: 1 / 1;
}
.ag-reaction-tier-5 img,
.ag-action-tier-5 img{
  width: 22px;
  height: auto;
}

.ag-health-tier-4{ left: 954px; top: 646px; }   /* between 6/8/9/10 */
.ag-reaction-tier-5{ left: 910px; top: 602px; } /* between 8/11/10 */
.ag-action-tier-5{ left: 1010px; top: 629px; }   /* between 9/10/13 */

.ag-health-tier-4 .agent-label {
  font-size: 3px;  /* bigger than normal AG labels */
  margin-top: -3px; /* bring text closer to symbol */  
  color: rgba(255, 170, 70, 0.95);
  text-shadow: 0 0 6px rgba(255, 120, 40, 0.55);
}
.ag-reaction-tier-5 .agent-label,
.ag-action-tier-5 .agent-label{
  font-size: 3px;  /* bigger than normal AG labels */
  margin-top: -5.5px; /* bring text closer to symbol */
  color: rgba(255, 170, 70, 0.95);
  text-shadow: 0 0 6px rgba(255, 120, 40, 0.55);
}

.ag-health-tier-4 img {
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 500;
}

/* Health+ hover glow (red) */
.ag-health-tier-4: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));
}

/* Health+ selected glow (red - enhanced) */
.ag-health-tier-4.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));
}
.ag-reaction-tier-5 img,
.ag-action-tier-5 img{
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

/* React+ hover glow (blue) */
.ag-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));
}

/* React+ selected glow (blue - enhanced) */
.ag-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));
}

/* Act+ hover glow (orange) */
.ag-action-tier-5: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));
}

/* Act+ selected glow (orange - enhanced) */
.ag-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));
}

/* =========================
   APPLIED STATE (PERMANENT BREATHING GLOW)
   ========================= */

/* Agent nodes applied */
.agent-1-tier-1.applied img,
.ag-2-tier-2.applied img,
.ag-3-tier-2.applied img,
.ag-5-tier-3.applied img,
.ag-6-tier-3.applied img,
.ag-7-tier-3.applied img,
.ag-8-tier-4.applied img,
.ag-9-tier-4.applied img,
.ag-10-tier-5.applied img,
.ag-11-tier-6.applied img,
.ag-12-tier-6.applied img,
.ag-13-tier-6.applied img,
.ag-sub-tier-7.applied img
{
  animation: node-breathe 3s ease-in-out infinite;
}

/* AG:4 nodes applied */
.ag-4-tier-2.applied img,
.ag-4-minor-node-1.applied img,
.ag-4-minor-node-2.applied img,
.ag-4-minor-node-3.applied img,
.ag-4-minor-node-4.applied img
{
  animation: node-breathe 3s ease-in-out infinite;
}

/* Health+ applied */
.ag-health-tier-4.applied img {
  animation: node-breathe-health 3s ease-in-out infinite;
}

/* React+ applied (blue) */
.ag-reaction-tier-5.applied img {
  animation: node-breathe-react 3s ease-in-out infinite;
}

/* Act+ applied (orange) */
.ag-action-tier-5.applied img {
  animation: node-breathe-act 3s ease-in-out infinite;
}

/* Two rotating dots for applied nodes */
.agent-1-tier-1.applied::before,
.ag-2-tier-2.applied::before,
.ag-3-tier-2.applied::before,
.ag-5-tier-3.applied::before,
.ag-6-tier-3.applied::before,
.ag-7-tier-3.applied::before,
.ag-8-tier-4.applied::before,
.ag-9-tier-4.applied::before,
.ag-10-tier-5.applied::before,
.ag-11-tier-6.applied::before,
.ag-12-tier-6.applied::before,
.ag-13-tier-6.applied::before,
.ag-sub-tier-7.applied::before,
.ag-4-tier-2.applied::before,
.ag-4-minor-node-1.applied::before,
.ag-4-minor-node-2.applied::before,
.ag-4-minor-node-3.applied::before,
.ag-4-minor-node-4.applied::before,
.ag-health-tier-4.applied::before,
.ag-reaction-tier-5.applied::before,
.ag-action-tier-5.applied::before
{
  content: '';
  position: absolute;
  inset: -12%;
  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%;

  
}

.agent-1-tier-1.applied::after,
.ag-2-tier-2.applied::after,
.ag-3-tier-2.applied::after,
.ag-5-tier-3.applied::after,
.ag-6-tier-3.applied::after,
.ag-7-tier-3.applied::after,
.ag-8-tier-4.applied::after,
.ag-9-tier-4.applied::after,
.ag-10-tier-5.applied::after,
.ag-11-tier-6.applied::after,
.ag-12-tier-6.applied::after,
.ag-13-tier-6.applied::after,
.ag-sub-tier-7.applied::after,
.ag-4-tier-2.applied::after,
.ag-4-minor-node-1.applied::after,
.ag-4-minor-node-2.applied::after,
.ag-4-minor-node-3.applied::after,
.ag-4-minor-node-4.applied::after,
.ag-health-tier-4.applied::after,
.ag-reaction-tier-5.applied::after,
.ag-action-tier-5.applied::after
{
  content: '';
  position: absolute;
  inset: -12%;
  display: none; /* Not needed for 2-dot effect */
}

/* Health+ needs larger radius due to smaller node size */
.ag-health-tier-4.applied::before
{
  inset: -50%; /* larger than the default -12% */
}

/* Breathing glow animation for applied nodes */
@keyframes node-breathe {
  0%, 100% {
    filter:
      brightness(1.5)
      drop-shadow(0 0 3px rgba(58, 24, 194, 0.2))
      drop-shadow(0 0 6px rgba(68, 43, 213, 0.9))
      drop-shadow(0 0 8px rgba(73, 44, 237, 0.7));
  }
  50% {
    filter:
      brightness(2.6)
      drop-shadow(0 0 4px rgba(58, 24, 194, 0.7))
      drop-shadow(0 0 8px rgba(68, 43, 213, 0.5))
      drop-shadow(0 0 16px rgba(73, 44, 237, 0.3));
  }
}

@keyframes node-breathe-health {
  0%, 100% {
    filter:
      brightness(1.7) contrast(.9)
      drop-shadow(0 0 3px rgba(205, 57, 57, 1.0))
      drop-shadow(0 0 6px rgba(143, 8, 8, 0.8))
      drop-shadow(0 0 12px rgba(255, 80, 80, 0.6));
  }
  50% {
    filter:
      brightness(1.8) contrast(.9)
      drop-shadow(0 0 4px rgba(205, 57, 57, 0.7))
      drop-shadow(0 0 8px rgba(143, 8, 8, 0.5))
      drop-shadow(0 0 16px rgba(255, 80, 80, 0.3));
  }
}

@keyframes node-breathe-act {
  0%, 100% {
    filter:
      brightness(1.6)
      drop-shadow(0 0 3px rgba(255, 170, 70, 1.0))
      drop-shadow(0 0 6px rgba(255, 170, 70, 1.0))
      drop-shadow(0 0 12px rgba(255, 170, 70, 0.9));
  }
  50% {
    filter:
      brightness(1.7)
      drop-shadow(0 0 4px rgba(255, 170, 70, 0.7))
      drop-shadow(0 0 8px rgba(255, 170, 70, 0.5))
      drop-shadow(0 0 16px rgba(255, 170, 70, 0.3));
  }
}

@keyframes node-breathe-react {
  0%, 100% {
    filter:
      brightness(2.3)
      drop-shadow(0 0 3px rgba(77, 81, 193, 1.0))
      drop-shadow(0 0 6px rgba(74, 69, 230, 0.8))
      drop-shadow(0 0 12px rgba(70, 24, 169, 0.6));
  }
  50% {
    filter:
      brightness(2.5)
      drop-shadow(0 0 4px rgba(77, 81, 193, 0.7))
      drop-shadow(0 0 8px rgba(74, 69, 230, 0.5))
      drop-shadow(0 0 16px rgba(70, 24, 169, 0.3));
  }
}

@keyframes node-swirl-organic {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  33% {
    transform: rotate(120deg);
    opacity: 0.9;
  }
  51% {
    opacity: 0.6;
  }
  68% {
    transform: rotate(240deg);
    opacity: 1;
  }
  84% {
    opacity: 0.7;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes two-dot-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================================
   PREMIUM AGENT NODES
   ============================================================ */

/* =========================
   AG 14 / 15 / 16 (CONTINUED AGENT LINE)
   ========================= */

.ag-14-tier-8,
.ag-15-tier-8,
.ag-16-tier-12,
.ag-action-tier-10,
.ag-reaction-tier-12,
.ag-health-tier-12
{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.ag-14-tier-8 img,
.ag-16-tier-12 img {
  width: 28px;
  height: auto;
}

.ag-15-tier-8 img {
  width: 26px;
  height: auto;
}

/* AG 15 minor nodes */
.ag-15-minor-node-1,
.ag-15-minor-node-2,
.ag-15-minor-node-3,
.ag-15-minor-node-4 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.ag-15-minor-node-1 img,
.ag-15-minor-node-2 img,
.ag-15-minor-node-3 img,
.ag-15-minor-node-4 img {
  width: 7px; aspect-ratio: 1 / 1;
}

/* Premium ACT+ / REACT+ / HEALTH+ sizes */
.ag-action-tier-10 img,
.ag-reaction-tier-12 img {
  width: 22px;
  height: auto;
}

.ag-health-tier-12 img {
  width: 17px; aspect-ratio: 1 / 1;
}

/* Premium ACT+ / REACT+ / HEALTH+ labels */
.ag-action-tier-10 .agent-label,
.ag-reaction-tier-12 .agent-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);
}

.ag-health-tier-12 .agent-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: AG 14/15/16 & premium utility nodes
   ========================= */

.ag-14-tier-8       { left: 969px; top: 485px; }
.ag-15-tier-8       { left: 1012px; top: 492px; }
.ag-16-tier-12      { left: 1030px; top: 355px; }

.ag-15-minor-node-1 { left: 1007px; top: 496px; }
.ag-15-minor-node-2 { left: 1004px; top: 489px; }
.ag-15-minor-node-3 { left: 1009px; top: 485px; }
.ag-15-minor-node-4 { left: 1016px; top: 481px; }

.ag-action-tier-10  { left: 1012px; top: 420px; }
.ag-reaction-tier-12{ left: 993px; top: 346px; }
.ag-health-tier-12  { left: 1070px; top: 366px; }

/* =========================
   AG 14/15/16 VISUAL EMPHASIS
   ========================= */

.ag-14-tier-8 img,
.ag-16-tier-12 img {
  filter: brightness(1.4);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.ag-14-tier-8:hover img,
.ag-16-tier-12:hover img {
  filter:
    brightness(1.6)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

.ag-14-tier-8.selected img,
.ag-16-tier-12.selected img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

/* AG 15 cluster emphasis */
.ag-15-tier-8 img,
.ag-15-minor-node-1 img,
.ag-15-minor-node-2 img,
.ag-15-minor-node-3 img,
.ag-15-minor-node-4 img {
  filter: brightness(2.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.ag-15-tier-8:hover img,
.ag-15-minor-node-1:hover img,
.ag-15-minor-node-2:hover img,
.ag-15-minor-node-3:hover img,
.ag-15-minor-node-4:hover img {
  filter:
    brightness(2.5)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

.ag-15-tier-8.selected img,
.ag-15-minor-node-1.selected img,
.ag-15-minor-node-2.selected img,
.ag-15-minor-node-3.selected img,
.ag-15-minor-node-4.selected img {
  filter:
    brightness(3.0)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

/* Premium HEALTH+ emphasis */
.ag-health-tier-12 img {
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 500;
}

.ag-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));
}

.ag-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 */
.ag-action-tier-10 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.ag-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));
}

.ag-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 */
.ag-reaction-tier-12 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.ag-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));
}

.ag-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));
}

/* =========================
   AG 14/15/16 APPLIED STATE
   ========================= */

.ag-14-tier-8.applied img,
.ag-16-tier-12.applied img {
  animation: node-breathe 3s ease-in-out infinite;
}

.ag-15-tier-8.applied img,
.ag-15-minor-node-1.applied img,
.ag-15-minor-node-2.applied img,
.ag-15-minor-node-3.applied img,
.ag-15-minor-node-4.applied img {
  animation: node-breathe 3s ease-in-out infinite;
}

.ag-health-tier-12.applied img {
  animation: node-breathe-health 3s ease-in-out infinite;
}

.ag-reaction-tier-12.applied img {
  animation: node-breathe-react 3s ease-in-out infinite;
}

.ag-action-tier-10.applied img {
  animation: node-breathe-act 3s ease-in-out infinite;
}

/* Applied rotating dots */
.ag-14-tier-8.applied::before,
.ag-15-tier-8.applied::before,
.ag-15-minor-node-1.applied::before,
.ag-15-minor-node-2.applied::before,
.ag-15-minor-node-3.applied::before,
.ag-15-minor-node-4.applied::before,
.ag-16-tier-12.applied::before,
.ag-action-tier-10.applied::before,
.ag-reaction-tier-12.applied::before,
.ag-health-tier-12.applied::before
{
  content: '';
  position: absolute;
  inset: -12%;
  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%;
}

.ag-14-tier-8.applied::after,
.ag-15-tier-8.applied::after,
.ag-15-minor-node-1.applied::after,
.ag-15-minor-node-2.applied::after,
.ag-15-minor-node-3.applied::after,
.ag-15-minor-node-4.applied::after,
.ag-16-tier-12.applied::after,
.ag-action-tier-10.applied::after,
.ag-reaction-tier-12.applied::after,
.ag-health-tier-12.applied::after
{
  content: '';
  position: absolute;
  inset: -12%;
  display: none;
}

.ag-health-tier-12.applied::before {
  inset: -50%;
}

/* ============================================================
   INFILTRATOR NODES
   ============================================================ */

.infiltrator-1-tier-7,
.in-2-tier-9,
.in-3-tier-9,
.in-4-tier-9,
.in-5-tier-11,
.in-6-tier-11
{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

/* Images */
.infiltrator-1-tier-7 img {
  width: 47px;
  height: auto;
}

.in-2-tier-9 img,
.in-3-tier-9 img,
.in-4-tier-9 img,
.in-6-tier-11 img {
  width: 19px;
  height: auto;
}

.in-5-tier-11 img {
  width: 26px;
  height: auto;
}

/* IN 5 minor nodes */
.in-5-minor-node-1,
.in-5-minor-node-2,
.in-5-minor-node-3,
.in-5-minor-node-4 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.in-5-minor-node-1 img,
.in-5-minor-node-2 img,
.in-5-minor-node-3 img,
.in-5-minor-node-4 img {
  width: 7px; aspect-ratio: 1 / 1;
}

/* Labels */
.infiltrator-1-tier-7 .agent-label {
  font-size: 7px;
  margin-top: -10px;
}

/* =========================
   PLACEMENT: INFILTRATOR
   ========================= */

.infiltrator-1-tier-7 { left: 907px; top: 503px; }
.in-2-tier-9          { left: 916px; top: 440px; }
.in-3-tier-9          { left: 939px; top: 448px; }
.in-4-tier-9          { left: 962px; top: 444px; }
.in-5-tier-11         { left: 922px; top: 369px; }
.in-6-tier-11         { left: 962px; top: 375px; }

.in-5-minor-node-1   { left: 922px; top: 360px; }
.in-5-minor-node-2   { left: 915px; top: 364px; }
.in-5-minor-node-3   { left: 913px; top: 372px; }
.in-5-minor-node-4   { left: 915px; top: 378px; }

/* =========================
   INFILTRATOR VISUAL EMPHASIS
   ========================= */

.infiltrator-1-tier-7 img,
.in-2-tier-9 img,
.in-3-tier-9 img,
.in-4-tier-9 img,
.in-6-tier-11 img {
  filter: brightness(1.4);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.infiltrator-1-tier-7:hover img,
.in-2-tier-9:hover img,
.in-3-tier-9:hover img,
.in-4-tier-9:hover img,
.in-6-tier-11:hover img {
  filter:
    brightness(1.6)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

.infiltrator-1-tier-7.selected img,
.in-2-tier-9.selected img,
.in-3-tier-9.selected img,
.in-4-tier-9.selected img,
.in-6-tier-11.selected img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

/* IN 5 cluster emphasis */
.in-5-tier-11 img,
.in-5-minor-node-1 img,
.in-5-minor-node-2 img,
.in-5-minor-node-3 img,
.in-5-minor-node-4 img {
  filter: brightness(2.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.in-5-tier-11:hover img,
.in-5-minor-node-1:hover img,
.in-5-minor-node-2:hover img,
.in-5-minor-node-3:hover img,
.in-5-minor-node-4:hover img {
  filter:
    brightness(2.5)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

.in-5-tier-11.selected img,
.in-5-minor-node-1.selected img,
.in-5-minor-node-2.selected img,
.in-5-minor-node-3.selected img,
.in-5-minor-node-4.selected img {
  filter:
    brightness(3.0)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

/* =========================
   INFILTRATOR APPLIED STATE
   ========================= */

.infiltrator-1-tier-7.applied img,
.in-2-tier-9.applied img,
.in-3-tier-9.applied img,
.in-4-tier-9.applied img,
.in-6-tier-11.applied img {
  animation: node-breathe 3s ease-in-out infinite;
}

.in-5-tier-11.applied img,
.in-5-minor-node-1.applied img,
.in-5-minor-node-2.applied img,
.in-5-minor-node-3.applied img,
.in-5-minor-node-4.applied img {
  animation: node-breathe 3s ease-in-out infinite;
}

/* Applied rotating dots */
.infiltrator-1-tier-7.applied::before,
.in-2-tier-9.applied::before,
.in-3-tier-9.applied::before,
.in-4-tier-9.applied::before,
.in-5-tier-11.applied::before,
.in-5-minor-node-1.applied::before,
.in-5-minor-node-2.applied::before,
.in-5-minor-node-3.applied::before,
.in-5-minor-node-4.applied::before,
.in-6-tier-11.applied::before
{
  content: '';
  position: absolute;
  inset: -12%;
  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%;
}

.infiltrator-1-tier-7.applied::after,
.in-2-tier-9.applied::after,
.in-3-tier-9.applied::after,
.in-4-tier-9.applied::after,
.in-5-tier-11.applied::after,
.in-5-minor-node-1.applied::after,
.in-5-minor-node-2.applied::after,
.in-5-minor-node-3.applied::after,
.in-5-minor-node-4.applied::after,
.in-6-tier-11.applied::after
{
  content: '';
  position: absolute;
  inset: -12%;
  display: none;
}

/* ============================================================
   NINJA NODES
   ============================================================ */

.ninja-1-tier-7,
.nj-2-tier-9,
.nj-3-tier-9,
.nj-4-tier-11,
.nj-5-tier-11,
.nj-6-tier-11
{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

/* Images */
.ninja-1-tier-7 img {
  width: 56px;
  height: auto;
}

.nj-2-tier-9 img,
.nj-4-tier-11 img,
.nj-5-tier-11 img,
.nj-6-tier-11 img {
  width: 26px;
  height: auto;
}

.nj-3-tier-9 img {
  width: 26px;
  height: auto;
}

/* NJ 3 minor nodes */
.nj-3-minor-node-1,
.nj-3-minor-node-2,
.nj-3-minor-node-3,
.nj-3-minor-node-4 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.nj-3-minor-node-1 img,
.nj-3-minor-node-2 img,
.nj-3-minor-node-3 img,
.nj-3-minor-node-4 img {
  width: 7px; aspect-ratio: 1 / 1;
}

/* Labels */
.nj-2-tier-9 .agent-label,
.nj-4-tier-11 .agent-label,
.nj-5-tier-11 .agent-label,
.nj-6-tier-11 .agent-label {
  font-size: 5px;
  margin-top: -8px;
}

.nj-3-tier-9 .agent-label {
  font-size: 5px;
  margin-top: -5px;
}

/* Labels */
.ninja-1-tier-7 .agent-label {
  font-size: 7px;
  margin-top: -14px;
}

/* =========================
   PLACEMENT: NINJA
   ========================= */

.ninja-1-tier-7  { left: 1026px; top: 532px; }
.nj-2-tier-9     { left: 1043px; top: 465px; }
.nj-3-tier-9     { left: 1080px; top: 483px; }
.nj-4-tier-11    { left: 1072px; top: 400px; }
.nj-5-tier-11    { left: 1100px; top: 412px; }
.nj-6-tier-11    { left: 1125px; top: 423px; }

.nj-3-minor-node-1 { left: 1105px; top: 477px; }
.nj-3-minor-node-2 { left: 1110px; top: 483px; }
.nj-3-minor-node-3 { left: 1107px; top: 490px; }
.nj-3-minor-node-4 { left: 1099px; top: 492px; }

/* =========================
   NINJA VISUAL EMPHASIS
   ========================= */

.ninja-1-tier-7 img,
.nj-2-tier-9 img,
.nj-4-tier-11 img,
.nj-5-tier-11 img,
.nj-6-tier-11 img {
  filter: brightness(1.4);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.ninja-1-tier-7:hover img,
.nj-2-tier-9:hover img,
.nj-4-tier-11:hover img,
.nj-5-tier-11:hover img,
.nj-6-tier-11:hover img {
  filter:
    brightness(1.6)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

.ninja-1-tier-7.selected img,
.nj-2-tier-9.selected img,
.nj-4-tier-11.selected img,
.nj-5-tier-11.selected img,
.nj-6-tier-11.selected img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

/* NJ 3 cluster emphasis */
.nj-3-tier-9 img,
.nj-3-minor-node-1 img,
.nj-3-minor-node-2 img,
.nj-3-minor-node-3 img,
.nj-3-minor-node-4 img {
  filter: brightness(2.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.nj-3-tier-9:hover img,
.nj-3-minor-node-1:hover img,
.nj-3-minor-node-2:hover img,
.nj-3-minor-node-3:hover img,
.nj-3-minor-node-4:hover img {
  filter:
    brightness(2.5)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.8))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.4));
}

.nj-3-tier-9.selected img,
.nj-3-minor-node-1.selected img,
.nj-3-minor-node-2.selected img,
.nj-3-minor-node-3.selected img,
.nj-3-minor-node-4.selected img {
  filter:
    brightness(3.0)
    drop-shadow(0 0 2px rgba(58, 24, 194, 0.9))
    drop-shadow(0 0 4px rgba(68, 43, 213, 0.7))
    drop-shadow(0 0 8px rgba(73, 44, 237, 0.5));
}

/* =========================
   NINJA APPLIED STATE
   ========================= */

.ninja-1-tier-7.applied img,
.nj-2-tier-9.applied img,
.nj-4-tier-11.applied img,
.nj-5-tier-11.applied img,
.nj-6-tier-11.applied img {
  animation: node-breathe 3s ease-in-out infinite;
}

.nj-3-tier-9.applied img,
.nj-3-minor-node-1.applied img,
.nj-3-minor-node-2.applied img,
.nj-3-minor-node-3.applied img,
.nj-3-minor-node-4.applied img {
  animation: node-breathe 3s ease-in-out infinite;
}

/* Applied rotating dots */
.ninja-1-tier-7.applied::before,
.nj-2-tier-9.applied::before,
.nj-3-tier-9.applied::before,
.nj-3-minor-node-1.applied::before,
.nj-3-minor-node-2.applied::before,
.nj-3-minor-node-3.applied::before,
.nj-3-minor-node-4.applied::before,
.nj-4-tier-11.applied::before,
.nj-5-tier-11.applied::before,
.nj-6-tier-11.applied::before
{
  content: '';
  position: absolute;
  inset: -12%;
  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%;
}

.ninja-1-tier-7.applied::after,
.nj-2-tier-9.applied::after,
.nj-3-tier-9.applied::after,
.nj-3-minor-node-1.applied::after,
.nj-3-minor-node-2.applied::after,
.nj-3-minor-node-3.applied::after,
.nj-3-minor-node-4.applied::after,
.nj-4-tier-11.applied::after,
.nj-5-tier-11.applied::after,
.nj-6-tier-11.applied::after
{
  content: '';
  position: absolute;
  inset: -12%;
  display: none;
}
