/* =========================
   SCION NODES (CONSISTENT TEMPLATE)
   Mirrors Nanotek across the Engineer/Demo axis (y = 900)

   UPDATED:
   - Aether Cyan + Moon Violet scheme for normal Scion nodes
   - Adds: .selected + .applied + swirling dots (anchored to picture::before)
   - Health/Action/Reaction: match Agent template behavior
   ========================= */

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

/* =========================
   SIZES (match your other classes)
   ========================= */

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

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

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

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

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

/* =========================
   LABELS (Aether Cyan + Moon Violet)
   ========================= */

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

  /* Aether cyan label */
  color: rgba(170, 255, 252, 1);
  text-shadow:
    0 0 6px rgba(120, 255, 245, 0.35),
    0 0 10px rgba(160, 120, 255, 0.22); /* moon violet accent */

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

.sc-4-tier-3 .scion-label {
  line-height: 4;
}

.scion-1-tier-1 .scion-label,
.sc-sub-tier-7 .scion-label {
  font-size: 7px;
}

.sc-health-tier-3 .scion-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);
}

.sc-action-tier-5 .scion-label,
.sc-reaction-tier-5 .scion-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
   ========================= */

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

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

/* =========================
   BRIGHTNESS + HOVER GLOW
   Aether Cyan + Moon Violet
   ========================= */

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

.sc-2-tier-2:hover img,
.sc-3-tier-3:hover img,
.sc-4-tier-3:hover img,
.sc-5-tier-4:hover img,
.sc-6-tier-4:hover img,
.sc-7-tier-6:hover img,
.sc-8-tier-6:hover img,
.sc-9-tier-6:hover img,
.scion-1-tier-1:hover img,
.sc-sub-tier-7:hover img {
  filter:
    brightness(1.20)
    drop-shadow(0 0 1px rgba(120, 255, 245, 0.85))  
    drop-shadow(0 0 2px rgba(0, 170, 170, 0.45))    
    drop-shadow(0 0 4px rgba(160, 120, 255, 0.35)); 
}

/* Selected */
.sc-2-tier-2.selected img,
.sc-3-tier-3.selected img,
.sc-4-tier-3.selected img,
.sc-5-tier-4.selected img,
.sc-6-tier-4.selected img,
.sc-7-tier-6.selected img,
.sc-8-tier-6.selected img,
.sc-9-tier-6.selected img,
.scion-1-tier-1.selected img,
.sc-sub-tier-7.selected img {
  filter:
    brightness(1.4)
    drop-shadow(0 0 1px rgba(210, 255, 252, 0.92)) 
    drop-shadow(0 0 2px rgba(120, 255, 245, 0.72))
    drop-shadow(0 0 4px rgba(0, 170, 170, 0.55))
    drop-shadow(0 0 6px rgba(160, 120, 255, 0.45));
}

/* =========================
   Health / Reaction / Action (Agent-template)
   ========================= */

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

.sc-health-tier-3: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));
}

.sc-health-tier-3.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 */
.sc-reaction-tier-5 img,
.sc-action-tier-5 img {
  filter: brightness(1.7);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

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

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

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

.sc-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 + selected)
   ========================= */

.sc-4-minor-node-1 img,
.sc-4-minor-node-2 img,
.sc-4-minor-node-3 img,
.sc-4-minor-node-4 img,
.sc-4-minor-node-5 img,
.sc-4-minor-node-6 img,
.sc-4-minor-node-7 img,
.sc-4-minor-node-8 img {
  filter: brightness(1.30);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.sc-4-minor-node-1:hover img,
.sc-4-minor-node-2:hover img,
.sc-4-minor-node-3:hover img,
.sc-4-minor-node-4:hover img,
.sc-4-minor-node-5:hover img,
.sc-4-minor-node-6:hover img,
.sc-4-minor-node-7:hover img,
.sc-4-minor-node-8:hover img {
  filter:
    brightness(1.75)
    drop-shadow(0 0 2px rgba(120, 255, 245, 0.85))
    drop-shadow(0 0 4px rgba(0, 170, 170, 0.45))
    drop-shadow(0 0 6px rgba(160, 120, 255, 0.35));
}

.sc-4-minor-node-1.selected img,
.sc-4-minor-node-2.selected img,
.sc-4-minor-node-3.selected img,
.sc-4-minor-node-4.selected img,
.sc-4-minor-node-5.selected img,
.sc-4-minor-node-6.selected img,
.sc-4-minor-node-7.selected img,
.sc-4-minor-node-8.selected img {
  filter:
    brightness(1.9)
    drop-shadow(0 0 2px rgba(210, 255, 252, 0.92))
    drop-shadow(0 0 4px rgba(120, 255, 245, 0.72))
    drop-shadow(0 0 8px rgba(0, 170, 170, 0.55))
    drop-shadow(0 0 10px rgba(160, 120, 255, 0.45));
}

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

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

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

/* Swirling two-dot overlay (same exact colors as Agent), anchored to picture::before */
.scion-1-tier-1.applied picture::before,
.sc-2-tier-2.applied picture::before,
.sc-3-tier-3.applied picture::before,
.sc-4-tier-3.applied picture::before,
.sc-health-tier-3.applied picture::before,
.sc-5-tier-4.applied picture::before,
.sc-6-tier-4.applied picture::before,
.sc-action-tier-5.applied picture::before,
.sc-reaction-tier-5.applied picture::before,
.sc-7-tier-6.applied picture::before,
.sc-8-tier-6.applied picture::before,
.sc-9-tier-6.applied picture::before,
.sc-sub-tier-7.applied picture::before,
.sc-4-minor-node-1.applied picture::before,
.sc-4-minor-node-2.applied picture::before,
.sc-4-minor-node-3.applied picture::before,
.sc-4-minor-node-4.applied picture::before,
.sc-4-minor-node-5.applied picture::before,
.sc-4-minor-node-6.applied picture::before,
.sc-4-minor-node-7.applied picture::before,
.sc-4-minor-node-8.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 */
.sc-health-tier-3.applied picture::before {
  inset: -50%;
}

/* Tier-1 big icon gets a wider orbit so dots are clearly visible */
.scion-1-tier-1.applied picture::before {
  inset: -28%;
}

/* =========================
   KEYFRAMES (Scion-only)
   Aether Cyan + Moon Violet breathe
   ========================= */

@keyframes node-breathe-scion {
  0%, 100% {
    filter:
      brightness(1.1)
      drop-shadow(0 0 1px rgba(210, 255, 252, 0.90))
      drop-shadow(0 0 2px rgba(120, 255, 245, 0.75))
      drop-shadow(0 0 4px rgba(0, 170, 170, 0.55))
      drop-shadow(0 0 6px rgba(160, 120, 255, 0.40));
  }
  50% {
    filter:
      brightness(1.6)
      drop-shadow(0 0 4px rgba(210, 255, 252, 0.65))
      drop-shadow(0 0 8px rgba(120, 255, 245, 0.55))
      drop-shadow(0 0 10px rgba(0, 170, 170, 0.35))
      drop-shadow(0 0 12px rgba(160, 120, 255, 0.25));
  }
}

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

/* =========================
   PLACEMENT (mirrored from Nanotek)
   ========================= */

/* Tier 1 */
.scion-1-tier-1 { left: 752px; top: 843px; }

/* Tier 2 */
.sc-2-tier-2 { left: 716px; top: 844px; }

/* SC:4 minor nodes (8) */
.sc-4-minor-node-1 { left: 701px; top: 823px; }
.sc-4-minor-node-2 { left: 696px; top: 817px; }
.sc-4-minor-node-3 { left: 688px; top: 815px; }
.sc-4-minor-node-4 { left: 680px; top: 817px; }
.sc-4-minor-node-5 { left: 677px; top: 840px; }
.sc-4-minor-node-6 { left: 683px; top: 845px; }
.sc-4-minor-node-7 { left: 692px; top: 846px; }
.sc-4-minor-node-8 { left: 699px; top: 842px; }

/* Tier 3 */
.sc-3-tier-3 { left: 695px; top: 798px; }
.sc-4-tier-3 { left: 683px; top: 835px; }
.sc-health-tier-3 { left: 680px; top: 872px; }

/* Tier 4 */
.sc-5-tier-4 { left: 653px; top: 810px; }
.sc-6-tier-4 { left: 643px; top: 847px; }

/* Tier 5 */
.sc-action-tier-5 { left: 621px; top: 786px; }
.sc-reaction-tier-5 { left: 605px; top: 849px; }

/* Tier 6 */
.sc-7-tier-6 { left: 594px; top: 760px; }
.sc-8-tier-6 { left: 577px; top: 805px; }
.sc-9-tier-6 { left: 569px; top: 850px; }

/* Tier 7 */
.sc-sub-tier-7 { left: 523px; top: 778px; }

/* ============================================================
   PREMIUM SCION NODES
   ============================================================ */

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

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

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

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

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

.sc-health-tier-12 .scion-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: SC 10-16 & premium utility
   ========================= */

.sc-10-tier-8        { left: 506px;  top: 760px; }
.sc-11-tier-8        { left: 486px;  top: 787px; }
.sc-12-tier-8        { left: 493px;  top: 818px; }

.sc-action-tier-10   { left: 427px;  top: 757px; }
.sc-reaction-tier-10 { left: 420px;  top: 780px; }

.sc-13-tier-12       { left: 374px;  top: 698px; }
.sc-14-tier-12       { left: 366px;  top: 723px; }
.sc-health-tier-12   { left: 356px;  top: 752px; }
.sc-15-tier-12       { left: 351px;  top: 778px; }
.sc-16-tier-12       { left: 345px;  top: 810px; }

/* =========================
   SC 10-16 VISUAL EMPHASIS
   ========================= */

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

.sc-10-tier-8:hover img,
.sc-11-tier-8:hover img,
.sc-12-tier-8:hover img,
.sc-13-tier-12:hover img,
.sc-14-tier-12:hover img,
.sc-15-tier-12:hover img,
.sc-16-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));
}

.sc-10-tier-8.selected img,
.sc-11-tier-8.selected img,
.sc-12-tier-8.selected img,
.sc-13-tier-12.selected img,
.sc-14-tier-12.selected img,
.sc-15-tier-12.selected img,
.sc-16-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 */
.sc-health-tier-12 img {
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

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

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

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

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

.sc-reaction-tier-10: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));
}

.sc-reaction-tier-10.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));
}

/* =========================
   SC PREMIUM APPLIED STATE
   ========================= */

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

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

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

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

.sc-10-tier-8.applied::before,
.sc-11-tier-8.applied::before,
.sc-12-tier-8.applied::before,
.sc-13-tier-12.applied::before,
.sc-14-tier-12.applied::before,
.sc-15-tier-12.applied::before,
.sc-16-tier-12.applied::before,
.sc-action-tier-10.applied::before,
.sc-reaction-tier-10.applied::before,
.sc-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%;
}

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

/* ============================================================
   OVERLORD NODES
   ============================================================ */

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

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

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

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

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

.overlord-1-tier-7 .scion-label {
  font-size: 7px;
}

.ol-3-tier-9 .scion-label {
  margin-left: -8px;
  margin-top: -2px;
}

/* =========================
   PLACEMENT: OVERLORD
   ========================= */

.overlord-1-tier-7   { left: 535px;  top: 735px; }
.ol-2-tier-9         { left: 491px;  top: 681px; }
.ol-3-tier-9         { left: 482px;  top: 714px; }
.ol-4-tier-9         { left: 471px;  top: 744px; }
.ol-5-tier-11        { left: 436px;  top: 652px; }
.ol-6-tier-11        { left: 416px;  top: 670px; }
.ol-7-tier-11        { left: 417px;  top: 697px; }

.ol-3-minor-node-1   { left: 484px;  top: 692px; }
.ol-3-minor-node-2   { left: 472px;  top: 717px; }
.ol-3-minor-node-3   { left: 494px;  top: 728px; }

/* =========================
   OVERLORD VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   OVERLORD APPLIED STATE
   ========================= */

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

.overlord-1-tier-7.applied::before,
.ol-2-tier-9.applied::before,
.ol-3-tier-9.applied::before,
.ol-3-minor-node-1.applied::before,
.ol-3-minor-node-2.applied::before,
.ol-3-minor-node-3.applied::before,
.ol-4-tier-9.applied::before,
.ol-5-tier-11.applied::before,
.ol-6-tier-11.applied::before,
.ol-7-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%;
}

/* ============================================================
   TEMPEST NODES
   ============================================================ */

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

.tempest-1-tier-7 img {
  width: 41px;
  height: 43px;
}

.tp-2-tier-9 img,
.tp-3-tier-11 img {
  width: 20px;
  height: 21px;
}

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

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

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

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

.tempest-1-tier-7 .scion-label {
  font-size: 7px;
}

.tp-3-tier-11 .scion-label {
  margin-left: -22px;
}

/* =========================
   PLACEMENT: TEMPEST
   ========================= */

.tempest-1-tier-7    { left: 512px;  top: 840px; }
.tp-2-tier-9         { left: 447px;  top: 856px; }
.tp-3-tier-11        { left: 376px;  top: 859px; }

.tp-2-minor-node-1   { left: 442px;  top: 841px; }
.tp-2-minor-node-2   { left: 454px;  top: 832px; }
.tp-2-minor-node-3   { left: 468px;  top: 842px; }
.tp-2-minor-node-4   { left: 440px;  top: 867px; }
.tp-2-minor-node-5   { left: 468px;  top: 867px; }

.tp-3-minor-node-1   { left: 383px;  top: 837px; }
.tp-3-minor-node-2   { left: 383px;  top: 872px; }

/* =========================
   TEMPEST VISUAL EMPHASIS
   ========================= */

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

.tempest-1-tier-7:hover img,
.tp-2-tier-9:hover img,
.tp-3-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));
}

.tempest-1-tier-7.selected img,
.tp-2-tier-9.selected img,
.tp-3-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));
}

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

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

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

/* =========================
   TEMPEST APPLIED STATE
   ========================= */

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

.tempest-1-tier-7.applied::before,
.tp-2-tier-9.applied::before,
.tp-2-minor-node-1.applied::before,
.tp-2-minor-node-2.applied::before,
.tp-2-minor-node-3.applied::before,
.tp-2-minor-node-4.applied::before,
.tp-2-minor-node-5.applied::before,
.tp-3-tier-11.applied::before,
.tp-3-minor-node-1.applied::before,
.tp-3-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%;
}