/* =========================
   GUNNER NODES
   Adds: APPLIED breathing glow + swirling dots (anchored to picture)
   Normal GU nodes: Gunmetal + Ember scheme
   Health/Act/React: match agent.css EXACTLY
   ========================= */

.gunner-1-tier-1,
.gu-2-tier-2,
.gu-3-tier-2,
.gu-4-tier-2,
.gu-5-tier-3,
.gu-6-tier-3,
.gu-7-tier-3,
.gu-8-tier-4,
.gu-health-tier-4,
.gu-9-tier-4,
.gu-action-tier-5,
.gu-10-tier-5,
.gu-reaction-tier-5,
.gu-11-tier-6,
.gu-12-tier-6,
.gu-13-tier-6,
.gu-sub-tier-7,
.gu-6-minor-node-1,
.gu-6-minor-node-2,
.gu-6-minor-node-3,
.gu-6-minor-node-4{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

/* =========================
   SIZES
   ========================= */

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

/* Regular GU nodes */
.gu-2-tier-2 img,
.gu-3-tier-2 img,
.gu-4-tier-2 img,
.gu-5-tier-3 img,
.gu-6-tier-3 img,
.gu-7-tier-3 img,
.gu-8-tier-4 img,
.gu-9-tier-4 img,
.gu-10-tier-5 img,
.gu-11-tier-6 img,
.gu-12-tier-6 img,
.gu-13-tier-6 img{
  width: 20px;
  height: auto;
}

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

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

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

/* =========================
   LABELS (Gunmetal + Ember)
   ========================= */

.gunner-label{
  margin-top: -4px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: rgba(225, 215, 205, 1);                 /* warm gunmetal */
  text-shadow:
    0 0 6px rgba(255, 120, 40, 0.42),            /* firing orange */
    0 0 10px rgba(255, 80, 20, 0.28);            /* hot ember */
  white-space: nowrap;
  line-height: 1;
  font-size: 5px;
}

.gunner-1-tier-1 .gunner-label,
.gu-sub-tier-7 .gunner-label{
  font-size: 6px;
}

/* Health/Act/React labels MUST match agent.css (your orange label system) */
.gu-health-tier-4 .gunner-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);
}

.gu-reaction-tier-5 .gunner-label,
.gu-action-tier-5 .gunner-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
   Also create a stacking context so dots can sit behind the icon
   without disappearing behind the page.
   ========================= */

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

/* Put icon ABOVE the dots */
.gunner-1-tier-1 img,
.gu-2-tier-2 img,
.gu-3-tier-2 img,
.gu-4-tier-2 img,
.gu-5-tier-3 img,
.gu-6-tier-3 img,
.gu-7-tier-3 img,
.gu-8-tier-4 img,
.gu-9-tier-4 img,
.gu-10-tier-5 img,
.gu-11-tier-6 img,
.gu-12-tier-6 img,
.gu-13-tier-6 img,
.gu-sub-tier-7 img,
.gu-6-minor-node-1 img,
.gu-6-minor-node-2 img,
.gu-6-minor-node-3 img,
.gu-6-minor-node-4 img,
.gu-health-tier-4 img,
.gu-reaction-tier-5 img,
.gu-action-tier-5 img{
  position: relative;
  z-index: 1;
}

/* =========================
   NORMAL GUNNER NODES: Gunmetal + Ember
   ========================= */

/* Base */
.gu-2-tier-2 img,
.gu-3-tier-2 img,
.gu-4-tier-2 img,
.gu-5-tier-3 img,
.gu-6-tier-3 img,
.gu-7-tier-3 img,
.gu-8-tier-4 img,
.gu-9-tier-4 img,
.gu-10-tier-5 img,
.gu-11-tier-6 img,
.gu-12-tier-6 img,
.gu-13-tier-6 img,
.gunner-1-tier-1 img,
.gu-sub-tier-7 img{
  filter: brightness(1.2) saturate(0.95);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

/* Hover (ember heat) */
.gu-2-tier-2:hover img,
.gu-3-tier-2:hover img,
.gu-4-tier-2:hover img,
.gu-5-tier-3:hover img,
.gu-6-tier-3:hover img,
.gu-7-tier-3:hover img,
.gu-8-tier-4:hover img,
.gu-9-tier-4:hover img,
.gu-10-tier-5:hover img,
.gu-11-tier-6:hover img,
.gu-12-tier-6:hover img,
.gu-13-tier-6:hover img,
.gunner-1-tier-1:hover img,
.gu-sub-tier-7:hover img{
  filter:
    brightness(1.3) saturate(1.05)
    drop-shadow(0 0 1px rgba(255, 120, 40, 0.95))
    drop-shadow(0 0 2px rgba(255, 80, 20, 0.60))
    drop-shadow(0 0 4px rgba(180, 40, 10, 0.38))
    drop-shadow(0 0 6px rgba(255, 210, 140, 0.18));
}

/* Selected (stronger ember) */
.gu-2-tier-2.selected img,
.gu-3-tier-2.selected img,
.gu-4-tier-2.selected img,
.gu-5-tier-3.selected img,
.gu-6-tier-3.selected img,
.gu-7-tier-3.selected img,
.gu-8-tier-4.selected img,
.gu-9-tier-4.selected img,
.gu-10-tier-5.selected img,
.gu-11-tier-6.selected img,
.gu-12-tier-6.selected img,
.gu-13-tier-6.selected img,
.gunner-1-tier-1.selected img,
.gu-sub-tier-7.selected img{
  filter:
    brightness(1.4) saturate(1.15)
    drop-shadow(0 0 1px rgba(255, 190, 140, 0.92)) 
    drop-shadow(0 0 2px rgba(255, 120, 40, 0.82)) 
    drop-shadow(0 0 4px rgba(255, 80, 20, 0.55))  
    drop-shadow(0 0 6px rgba(180, 40, 10, 0.40)) 
    drop-shadow(0 0 6px rgba(120, 120, 120, 0.28));
}

/* Minor nodes (small ember sparks) */
.gu-6-minor-node-1 img,
.gu-6-minor-node-2 img,
.gu-6-minor-node-3 img,
.gu-6-minor-node-4 img{
  filter: brightness(1.2) saturate(0.95);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.gu-6-minor-node-1:hover img,
.gu-6-minor-node-2:hover img,
.gu-6-minor-node-3:hover img,
.gu-6-minor-node-4:hover img{
  filter:
    brightness(1.5) saturate(1.05)
    drop-shadow(0 0 2px rgba(255, 120, 40, 0.90))
    drop-shadow(0 0 4px rgba(255, 80, 20, 0.55))
    drop-shadow(0 0 6px rgba(180, 40, 10, 0.32));
}

.gu-6-minor-node-1.selected img,
.gu-6-minor-node-2.selected img,
.gu-6-minor-node-3.selected img,
.gu-6-minor-node-4.selected img{
  filter:
    brightness(1.7) saturate(1.15)
    drop-shadow(0 0 2px rgba(255, 190, 140, 0.90))
    drop-shadow(0 0 4px rgba(255, 120, 40, 0.75))
    drop-shadow(0 0 8px rgba(255, 80, 20, 0.50))
    drop-shadow(0 0 10px rgba(180, 40, 10, 0.35));
}

/* =========================
   Health / Reaction / Action
   MUST match agent.css EXACTLY
   ========================= */

/* Health base + hover + selected */
.gu-health-tier-4 img{
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.gu-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));
}

.gu-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));
}

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

/* Reaction hover + selected */
.gu-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));
}

.gu-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));
}

/* Action hover + selected */
.gu-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));
}

.gu-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 + SWIRLING DOTS)
   ========================= */

/* Normal gunner nodes applied (unique keyframes) */
.gunner-1-tier-1.applied img,
.gu-2-tier-2.applied img,
.gu-3-tier-2.applied img,
.gu-4-tier-2.applied img,
.gu-5-tier-3.applied img,
.gu-6-tier-3.applied img,
.gu-7-tier-3.applied img,
.gu-8-tier-4.applied img,
.gu-9-tier-4.applied img,
.gu-10-tier-5.applied img,
.gu-11-tier-6.applied img,
.gu-12-tier-6.applied img,
.gu-13-tier-6.applied img,
.gu-sub-tier-7.applied img,
.gu-6-minor-node-1.applied img,
.gu-6-minor-node-2.applied img,
.gu-6-minor-node-3.applied img,
.gu-6-minor-node-4.applied img{
  animation: node-breathe-gunner 3s ease-in-out infinite;
}

/* Health / React / Act applied (Agent exact animations) */
.gu-health-tier-4.applied img{
  animation: node-breathe-health 3s ease-in-out infinite;
}
.gu-reaction-tier-5.applied img{
  animation: node-breathe-react 3s ease-in-out infinite;
}
.gu-action-tier-5.applied img{
  animation: node-breathe-act 3s ease-in-out infinite;
}

/* Swirling two-dot overlay (Agent colors), anchored to picture::before */
.gunner-1-tier-1.applied picture::before,
.gu-2-tier-2.applied picture::before,
.gu-3-tier-2.applied picture::before,
.gu-4-tier-2.applied picture::before,
.gu-5-tier-3.applied picture::before,
.gu-6-tier-3.applied picture::before,
.gu-7-tier-3.applied picture::before,
.gu-8-tier-4.applied picture::before,
.gu-9-tier-4.applied picture::before,
.gu-10-tier-5.applied picture::before,
.gu-11-tier-6.applied picture::before,
.gu-12-tier-6.applied picture::before,
.gu-13-tier-6.applied picture::before,
.gu-sub-tier-7.applied picture::before,
.gu-6-minor-node-1.applied picture::before,
.gu-6-minor-node-2.applied picture::before,
.gu-6-minor-node-3.applied picture::before,
.gu-6-minor-node-4.applied picture::before,
.gu-health-tier-4.applied picture::before,
.gu-reaction-tier-5.applied picture::before,
.gu-action-tier-5.applied picture::before{
  content: '';
  position: absolute;
  inset: -38%;
  background:
    radial-gradient(circle at 80% 50%, rgba(255, 120, 40, 0.90) 1px, transparent 1px),
    radial-gradient(circle at 20% 50%, rgba(255, 80, 20, 0.90) 1px, transparent 1px);
  background-size: 100% 100%;
  animation: two-dot-rotate 3s linear infinite;
  pointer-events: none;
  z-index: 0; /* visible (not stuck behind page) */
  border-radius: 50%;
}

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

/* GUNNER:1 needs the dots pushed farther out so they show clearly */
.gunner-1-tier-1.applied picture::before{
  inset: -28%;
}

/* =========================
   KEYFRAMES (Gunner-only)
   Gunmetal + Ember breathe
   ========================= */

@keyframes node-breathe-gunner{
  0%, 100%{
    filter:
      brightness(1.3) saturate(1.10)
      drop-shadow(0 0 1px rgba(255, 220, 200, 0.25)) 
      drop-shadow(0 0 2px rgba(255, 120, 40, 0.80))   
      drop-shadow(0 0 4px rgba(255, 80, 20, 0.55))   
      drop-shadow(0 0 6px rgba(180, 40, 10, 0.40))   
      drop-shadow(0 0 8px rgba(255, 210, 140, 0.22)); 
  }
  50%{
    filter:
      brightness(1.9) saturate(1.20)
      drop-shadow(0 0 2px rgba(255, 220, 200, 0.25))
      drop-shadow(0 0 4px rgba(255, 120, 40, 0.55))
      drop-shadow(0 0 8px rgba(255, 80, 20, 0.35))
      drop-shadow(0 0 10px rgba(180, 40, 10, 0.28))
      drop-shadow(0 0 12px rgba(255, 210, 140, 0.16));
  }
}

/* If two-dot-rotate isn't defined elsewhere, this keeps it working.
   If it *is* defined elsewhere (agent.css), this identical block is harmless. */
@keyframes two-dot-rotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* =========================
   PLACEMENT (your existing left/top values)
   ========================= */

/* Tier 1 */
.gunner-1-tier-1{ left: 973px; top: 968px; }

/* Tier 2 */
.gu-2-tier-2{ left: 1035px; top: 994px; }
.gu-3-tier-2{ left: 1019px; top: 1017px; }
.gu-4-tier-2{ left: 996px; top: 1034px; }

/* Tier 3 */
.gu-5-tier-3{ left: 1065px; top: 1013px; }
.gu-6-tier-3{ left: 1042px; top: 1041px; }
.gu-7-tier-3{ left: 1015px; top: 1063px; }

/* GU:6 minor nodes */
.gu-6-minor-node-1{ left: 1049px; top: 1021px; }
.gu-6-minor-node-2{ left: 1031px; top: 1038px; }
.gu-6-minor-node-3{ left: 1049px; top: 1054px; }
.gu-6-minor-node-4{ left: 1066px; top: 1038px; }

/* Tier 4 */
.gu-8-tier-4{ left: 1094px; top: 1033px; }
.gu-health-tier-4{ left: 1070px; top: 1067px; }
.gu-9-tier-4{ left: 1038px; top: 1092px; }

/* Tier 5 */
.gu-action-tier-5{ left: 1123px; top: 1055px; }
.gu-10-tier-5{ left: 1094px; top: 1090px; }
.gu-reaction-tier-5{ left: 1058px; top: 1122px; }

/* Tier 6 */
.gu-11-tier-6{ left: 1153px; top: 1075px; }
.gu-12-tier-6{ left: 1119px; top: 1115px; }
.gu-13-tier-6{ left: 1079px; top: 1150px; }

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

/* ============================================================
   PREMIUM GUNNER NODES
   ============================================================ */

/* =========================
   GU 14/15 & PREMIUM UTILITY
   ========================= */

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

.gu-14-tier-8 img,
.gu-15-tier-12 img {
  width: 20px;
  height: auto;
}

/* GU 14 minor nodes */
.gu-14-minor-node-1,
.gu-14-minor-node-2,
.gu-14-minor-node-3 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

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

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

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

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

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

/* Premium utility labels */
.gu-action-tier-10 .gunner-label,
.gu-reaction-tier-12 .gunner-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);
}

.gu-health-tier-8 .gunner-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: GU 14/15 & premium utility
   ========================= */

.gu-14-tier-8        { left: 1195px; top: 1165px; }
.gu-14-minor-node-1  { left: 1215px; top: 1164px; }
.gu-14-minor-node-2  { left: 1215px; top: 1157px; }
.gu-14-minor-node-3  { left: 1215px; top: 1150px; }

.gu-health-tier-8    { left: 1172px; top: 1189px; }

.gu-action-tier-10   { left: 1236px; top: 1223px; }
.gu-reaction-tier-12 { left: 1279px; top: 1283px; }

.gu-15-tier-12       { left: 1303px; top: 1260px; }
.gu-15-minor-node-1  { left: 1316px; top: 1242px; }
.gu-15-minor-node-2  { left: 1324px; top: 1248px; }

/* =========================
   GU 14/15 VISUAL EMPHASIS
   ========================= */

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

.gu-14-tier-8:hover img,
.gu-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));
}

.gu-14-tier-8.selected img,
.gu-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));
}

/* GU minor emphasis */
.gu-14-minor-node-1 img,
.gu-14-minor-node-2 img,
.gu-14-minor-node-3 img,
.gu-15-minor-node-1 img,
.gu-15-minor-node-2 img {
  filter: brightness(1.3);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.gu-14-minor-node-1:hover img,
.gu-14-minor-node-2:hover img,
.gu-14-minor-node-3:hover img,
.gu-15-minor-node-1:hover img,
.gu-15-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));
}

.gu-14-minor-node-1.selected img,
.gu-14-minor-node-2.selected img,
.gu-14-minor-node-3.selected img,
.gu-15-minor-node-1.selected img,
.gu-15-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));
}

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

.gu-health-tier-8: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));
}

.gu-health-tier-8.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 */
.gu-action-tier-10 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.gu-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));
}

.gu-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 */
.gu-reaction-tier-12 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.gu-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));
}

.gu-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));
}

/* =========================
   GU 14/15 APPLIED STATE
   ========================= */

.gu-14-tier-8.applied img,
.gu-15-tier-12.applied img,
.gu-14-minor-node-1.applied img,
.gu-14-minor-node-2.applied img,
.gu-14-minor-node-3.applied img,
.gu-15-minor-node-1.applied img,
.gu-15-minor-node-2.applied img {
  animation: node-breathe-gunner 3s ease-in-out infinite;
}

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

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

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

.gu-14-tier-8.applied::before,
.gu-14-minor-node-1.applied::before,
.gu-14-minor-node-2.applied::before,
.gu-14-minor-node-3.applied::before,
.gu-15-tier-12.applied::before,
.gu-15-minor-node-1.applied::before,
.gu-15-minor-node-2.applied::before,
.gu-action-tier-10.applied::before,
.gu-reaction-tier-12.applied::before,
.gu-health-tier-8.applied::before
{
  content: '';
  position: absolute;
  inset: -38%;
  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%;
}

.gu-health-tier-8.applied::before {
  inset: -50%;
}

/* ============================================================
   QUICK DRAW NODES
   ============================================================ */

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

.quickdraw-1-tier-7 img {
  width: 33px;
  height: auto;
}

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

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

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

.quickdraw-1-tier-7 .gunner-label {
  font-size: 6px;
}

/* =========================
   PLACEMENT: QUICK DRAW
   ========================= */

.quickdraw-1-tier-7  { left: 1173px; top: 1090px; }
.qd-2-tier-9         { left: 1270px; top: 1136px; }
.qd-3-tier-9         { left: 1250px; top: 1158px; }
.qd-4-tier-9         { left: 1232px; top: 1183px; }
.qd-5-tier-11        { left: 1325px; top: 1178px; }
.qd-6-tier-11        { left: 1307px; top: 1199px; }
.qd-7-tier-11        { left: 1286px; top: 1226px; }

.qd-3-minor-node-1   { left: 1251px; top: 1140px; }
.qd-3-minor-node-2   { left: 1269px; top: 1151px; }
.qd-3-minor-node-3   { left: 1242px; top: 1150px; }

/* =========================
   QUICK DRAW VISUAL EMPHASIS
   ========================= */

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

.quickdraw-1-tier-7:hover img,
.qd-2-tier-9:hover img,
.qd-3-tier-9:hover img,
.qd-4-tier-9:hover img,
.qd-5-tier-11:hover img,
.qd-6-tier-11:hover img,
.qd-7-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));
}

.quickdraw-1-tier-7.selected img,
.qd-2-tier-9.selected img,
.qd-3-tier-9.selected img,
.qd-4-tier-9.selected img,
.qd-5-tier-11.selected img,
.qd-6-tier-11.selected img,
.qd-7-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));
}

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

.qd-3-minor-node-1:hover img,
.qd-3-minor-node-2:hover img,
.qd-3-minor-node-3: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));
}

.qd-3-minor-node-1.selected img,
.qd-3-minor-node-2.selected img,
.qd-3-minor-node-3.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));
}

/* =========================
   QUICK DRAW APPLIED STATE
   ========================= */

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

.quickdraw-1-tier-7.applied::before,
.qd-2-tier-9.applied::before,
.qd-3-tier-9.applied::before,
.qd-3-minor-node-1.applied::before,
.qd-3-minor-node-2.applied::before,
.qd-3-minor-node-3.applied::before,
.qd-4-tier-9.applied::before,
.qd-5-tier-11.applied::before,
.qd-6-tier-11.applied::before,
.qd-7-tier-11.applied::before
{
  content: '';
  position: absolute;
  inset: -38%;
  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%;
}

/* ============================================================
   SHARP SHOOTER NODES
   ============================================================ */

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

.sharpshooter-1-tier-7 img {
  width: 31px;
  height: auto;
}

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

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

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

.sharpshooter-1-tier-7 .gunner-label {
  font-size: 6px;
}

/* =========================
   PLACEMENT: SHARP SHOOTER
   ========================= */

.sharpshooter-1-tier-7 { left: 1088px; top: 1180px; }
.sp-2-tier-9           { left: 1193px; top: 1220px; }
.sp-3-tier-9           { left: 1177px; top: 1233px; }
.sp-4-tier-9           { left: 1160px; top: 1247px; }
.sp-5-tier-9           { left: 1141px; top: 1260px; }
.sp-6-tier-11          { left: 1225px; top: 1289px; }
.sp-7-tier-11          { left: 1197px; top: 1310px; }

.sp-2-minor-node-1     { left: 1197px; top: 1206px; }
.sp-2-minor-node-2     { left: 1209px; top: 1209px; }
.sp-2-minor-node-3     { left: 1212px; top: 1217px; }

/* =========================
   SHARP SHOOTER VISUAL EMPHASIS
   ========================= */

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

.sharpshooter-1-tier-7:hover img,
.sp-2-tier-9:hover img,
.sp-3-tier-9:hover img,
.sp-4-tier-9:hover img,
.sp-5-tier-9:hover img,
.sp-6-tier-11:hover img,
.sp-7-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));
}

.sharpshooter-1-tier-7.selected img,
.sp-2-tier-9.selected img,
.sp-3-tier-9.selected img,
.sp-4-tier-9.selected img,
.sp-5-tier-9.selected img,
.sp-6-tier-11.selected img,
.sp-7-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));
}

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

.sp-2-minor-node-1:hover img,
.sp-2-minor-node-2:hover img,
.sp-2-minor-node-3: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));
}

.sp-2-minor-node-1.selected img,
.sp-2-minor-node-2.selected img,
.sp-2-minor-node-3.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));
}

/* =========================
   SHARP SHOOTER APPLIED STATE
   ========================= */

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

.sharpshooter-1-tier-7.applied::before,
.sp-2-tier-9.applied::before,
.sp-2-minor-node-1.applied::before,
.sp-2-minor-node-2.applied::before,
.sp-2-minor-node-3.applied::before,
.sp-3-tier-9.applied::before,
.sp-4-tier-9.applied::before,
.sp-5-tier-9.applied::before,
.sp-6-tier-11.applied::before,
.sp-7-tier-11.applied::before
{
  content: '';
  position: absolute;
  inset: -38%;
  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%;
}