/* =========================
   SKIRMISHER NODES (CONSISTENT TEMPLATE)
   Deep Blue + Ember Orange + Neon Pink scheme (SKIRMISHER / SK / DISCIPLINE)
   - Adds: .selected + .applied + swirling dots (anchored to picture::before)
   - Health/Action/Reaction: match Agent-template behavior
   - Placement section preserved exactly
   ========================= */

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

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

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

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

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

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

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

/* =========================
   LABELS (Synthwave Cyan + Hot Magenta)
   ========================= */

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

  /* Electric cyan text */
  color: rgba(160, 205, 255, 0.95); /* deep ice-blue */
  text-shadow:
    0 0 6px rgba(40, 110, 255, 0.28),
    0 0 10px rgba(255, 70, 190, 0.20);

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

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

/* Keep your existing Tier-2 multi-line spacing behavior */
.sk-3-tier-2 .skirmisher-label,
.sk-4-tier-2 .skirmisher-label {
  line-height: 4;
}

.sk-health-tier-3 .skirmisher-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);
}

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

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

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

/* =========================
   NORMAL NODES: base + hover + selected
   Synthwave Cyan (primary) + Hot Magenta (secondary)
   ========================= */

.sk-2-tier-2 img,
.sk-3-tier-2 img,
.sk-4-tier-2 img,
.sk-5-tier-3 img,
.sk-6-tier-3 img,
.sk-7-tier-4 img,
.sk-8-tier-5 img,
.sk-9-tier-5 img,
.sk-10-tier-6 img,
.sk-11-tier-6 img,
.skirmisher-1-tier-1 img,
.sk-sub-tier-7 img {
  filter: brightness(1.3);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.sk-2-tier-2:hover img,
.sk-3-tier-2:hover img,
.sk-4-tier-2:hover img,
.sk-5-tier-3:hover img,
.sk-6-tier-3:hover img,
.sk-7-tier-4:hover img,
.sk-8-tier-5:hover img,
.sk-9-tier-5:hover img,
.sk-10-tier-6:hover img,
.sk-11-tier-6:hover img,
.skirmisher-1-tier-1:hover img,
.sk-sub-tier-7:hover img {
  filter:
    brightness(1.4)
    drop-shadow(0 0 1px rgba(40, 110, 255, 0.82))  
    drop-shadow(0 0 2px rgba(15, 45, 130, 0.45))   
    drop-shadow(0 0 4px rgba(255, 70, 190, 0.58))   
    drop-shadow(0 0 6px rgba(255, 130, 50, 0.22)); 
}

.sk-2-tier-2.selected img,
.sk-3-tier-2.selected img,
.sk-4-tier-2.selected img,
.sk-5-tier-3.selected img,
.sk-6-tier-3.selected img,
.sk-7-tier-4.selected img,
.sk-8-tier-5.selected img,
.sk-9-tier-5.selected img,
.sk-10-tier-6.selected img,
.sk-11-tier-6.selected img,
.skirmisher-1-tier-1.selected img,
.sk-sub-tier-7.selected img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 1px rgba(190, 220, 255, 0.92))
    drop-shadow(0 0 2px rgba(40, 110, 255, 0.72))
    drop-shadow(0 0 4px rgba(15, 45, 130, 0.55))
    drop-shadow(0 0 6px rgba(255, 70, 190, 0.75))
    drop-shadow(0 0 7px rgba(255, 130, 50, 0.25));
}

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

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

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

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

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

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

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

.sk-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: base + hover + selected
   ========================= */

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

.sk-7-minor-node-1:hover img,
.sk-7-minor-node-2:hover img,
.sk-7-minor-node-3:hover img,
.sk-7-minor-node-4:hover img,
.sk-7-minor-node-5:hover img,
.sk-7-minor-node-6:hover img {
  filter:
    brightness(1.5)
    drop-shadow(0 0 1px rgba(40, 110, 255, 0.82))
    drop-shadow(0 0 2px rgba(15, 45, 130, 0.45))
    drop-shadow(0 0 4px rgba(255, 70, 190, 0.58))
    drop-shadow(0 0 6px rgba(255, 130, 50, 0.18));
}

.sk-7-minor-node-1.selected img,
.sk-7-minor-node-2.selected img,
.sk-7-minor-node-3.selected img,
.sk-7-minor-node-4.selected img,
.sk-7-minor-node-5.selected img,
.sk-7-minor-node-6.selected img {
  filter:
    brightness(2.20)
    drop-shadow(0 0 2px rgba(190, 220, 255, 0.92))
    drop-shadow(0 0 4px rgba(40, 110, 255, 0.72))
    drop-shadow(0 0 8px rgba(15, 45, 130, 0.55))
    drop-shadow(0 0 10px rgba(255, 70, 190, 0.75))
    drop-shadow(0 0 10px rgba(255, 130, 50, 0.22));
}

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

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

/* Health / React / Act applied (Agent animations) */
.sk-health-tier-3.applied img { animation: node-breathe-health 3s ease-in-out infinite; }
.sk-reaction-tier-5.applied img { animation: node-breathe-react 3s ease-in-out infinite; }
.sk-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 */
.skirmisher-1-tier-1.applied picture::before,
.sk-2-tier-2.applied picture::before,
.sk-3-tier-2.applied picture::before,
.sk-4-tier-2.applied picture::before,
.sk-health-tier-3.applied picture::before,
.sk-5-tier-3.applied picture::before,
.sk-6-tier-3.applied picture::before,
.sk-7-tier-4.applied picture::before,
.sk-7-minor-node-1.applied picture::before,
.sk-7-minor-node-2.applied picture::before,
.sk-7-minor-node-3.applied picture::before,
.sk-7-minor-node-4.applied picture::before,
.sk-7-minor-node-5.applied picture::before,
.sk-7-minor-node-6.applied picture::before,
.sk-action-tier-5.applied picture::before,
.sk-8-tier-5.applied picture::before,
.sk-9-tier-5.applied picture::before,
.sk-reaction-tier-5.applied picture::before,
.sk-10-tier-6.applied picture::before,
.sk-11-tier-6.applied picture::before,
.sk-sub-tier-7.applied picture::before {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 80% 50%, rgba(40, 110, 255, 0.9) 1px, transparent 1px),
    radial-gradient(circle at 20% 50%, rgba(255, 70, 190, 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 */
.sk-health-tier-3.applied picture::before {
  inset: -50%;
}

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

/* =========================
   KEYFRAMES (Skirmisher-only)
   Synthwave Cyan + Hot Magenta breathe
   ========================= */

@keyframes node-breathe-skirmisher {
  0%, 100% {
    filter:
      brightness(1.3)
      drop-shadow(0 0 1px rgba(190, 220, 255, 0.90))
      drop-shadow(0 0 2px rgba(40, 110, 255, 0.75))
      drop-shadow(0 0 4px rgba(15, 45, 130, 0.55))
      drop-shadow(0 0 6px rgba(255, 70, 190, 0.70))
      drop-shadow(0 0 8px rgba(255, 130, 50, 0.25));
  }
  50% {
    filter:
      brightness(2.1)
      drop-shadow(0 0 2px rgba(190, 220, 255, 0.65))
      drop-shadow(0 0 4px rgba(40, 110, 255, 0.55))
      drop-shadow(0 0 8px rgba(15, 45, 130, 0.35))
      drop-shadow(0 0 10px rgba(255, 70, 190, 0.45))
      drop-shadow(0 0 12px rgba(255, 130, 50, 0.18));
  }
}

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

/* =========================
   PLACEMENT (mirrored from Mystic across y=900)
   (UNCHANGED FROM YOUR FILE)
   ========================= */

/* Tier 1 */
.skirmisher-1-tier-1 { left: 784px; top: 774px; }

/* Tier 2 */
.sk-2-tier-2 { left: 744px; top: 780px; }
.sk-3-tier-2 { left: 763px; top: 758px; }
.sk-4-tier-2 { left: 786px; top: 741px; }

/* Tier 3 */
.sk-health-tier-3 { left: 717px; top: 765px; }
.sk-5-tier-3      { left: 739px; top: 733px; }
.sk-6-tier-3      { left: 766px; top: 713px; }

/* Tier 4 */
.sk-7-tier-4 { left: 714px; top: 707px; }

.sk-7-minor-node-1 { left: 709px; top: 714px; }
.sk-7-minor-node-2 { left: 709px; top: 720px; }
.sk-7-minor-node-3 { left: 709px; top: 726px; }
.sk-7-minor-node-4 { left: 732px; top: 684px; }
.sk-7-minor-node-5 { left: 732px; top: 690px; }
.sk-7-minor-node-6 { left: 732px; top: 696px; }

/* Tier 5 */
.sk-action-tier-5   { left: 654px; top: 724px; }
.sk-8-tier-5        { left: 674px; top: 698px; }
.sk-9-tier-5        { left: 703px; top: 668px; }
.sk-reaction-tier-5 { left: 725px; top: 652px; }

/* Tier 6 */
.sk-10-tier-6 { left: 625px; top: 702px; }
.sk-11-tier-6 { left: 708px; top: 621px; }

/* Tier 7 */
.sk-sub-tier-7 { left: 614px; top: 608px; }

/* ============================================================
   PREMIUM SKIRMISHER NODES
   ============================================================ */

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

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

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

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

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

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

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

.sk-health-tier-8 .skirmisher-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);
}

.sk-13-tier-8 .skirmisher-label {
  margin-top: -11px;
  margin-left: -27px;
}

/* =========================
   PLACEMENT: SK 12-15 & premium utility
   ========================= */

.sk-12-tier-8        { left: 589px;  top: 610px; }
.sk-13-tier-8        { left: 611px;  top: 590px; }
.sk-13-minor-node-1  { left: 603px;  top: 585px; }
.sk-13-minor-node-2  { left: 632px;  top: 584px; }
.sk-13-minor-node-3  { left: 608px;  top: 606px; }

.sk-health-tier-8    { left: 632px;  top: 572px; }

.sk-14-tier-10       { left: 548px;  top: 555px; }
.sk-action-tier-10   { left: 566px;  top: 530px; }

.sk-reaction-tier-12 { left: 496px;  top: 500px; }
.sk-15-tier-12       { left: 521px;  top: 478px; }

/* =========================
   SK 12-15 VISUAL EMPHASIS
   ========================= */

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

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

.sk-12-tier-8.selected img,
.sk-13-tier-8.selected img,
.sk-14-tier-10.selected img,
.sk-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));
}

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

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

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

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

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

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

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

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

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

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

/* =========================
   SK PREMIUM APPLIED STATE
   ========================= */

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

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

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

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

.sk-12-tier-8.applied::before,
.sk-13-tier-8.applied::before,
.sk-13-minor-node-1.applied::before,
.sk-13-minor-node-2.applied::before,
.sk-13-minor-node-3.applied::before,
.sk-14-tier-10.applied::before,
.sk-15-tier-12.applied::before,
.sk-action-tier-10.applied::before,
.sk-reaction-tier-12.applied::before,
.sk-health-tier-8.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%;
}

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

/* ============================================================
   SPARTAN NODES
   ============================================================ */

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

.spartan-1-tier-7 img {
  width: 40px;
  height: auto;
}

.st-2-tier-9 img,
.st-3-tier-11 img {
  width: 24px;
  height: auto;
}

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

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

/* ST 3 minor node */
.st-3-minor-node-1 {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

.spartan-1-tier-7 .skirmisher-label {
  font-size: 6px;
}

.st-2-tier-9 .skirmisher-label {
  margin-top: 7px;
  margin-left: -27px;
}

/* =========================
   PLACEMENT: SPARTAN
   ========================= */

.spartan-1-tier-7    { left: 581px;  top: 660px; }
.st-2-tier-9         { left: 532px;  top: 620px; }
.st-3-tier-11        { left: 475px;  top: 576px; }

.st-2-minor-node-1   { left: 541px;  top: 596px; }
.st-2-minor-node-2   { left: 553px;  top: 595px; }
.st-2-minor-node-3   { left: 561px;  top: 604px; }
.st-2-minor-node-4   { left: 523px;  top: 624px; }
.st-2-minor-node-5   { left: 528px;  top: 635px; }
.st-2-minor-node-6   { left: 539px;  top: 639px; }

.st-3-minor-node-1   { left: 499px;  top: 557px; }

/* =========================
   SPARTAN VISUAL EMPHASIS
   ========================= */

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

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

.spartan-1-tier-7.selected img,
.st-2-tier-9.selected img,
.st-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));
}

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

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

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

/* =========================
   SPARTAN APPLIED STATE
   ========================= */

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

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

/* ============================================================
   BRAWLER NODES
   ============================================================ */

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

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

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

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

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

.br-4-minor-node-1 img,
.br-4-minor-node-2 img,
.br-4-minor-node-3 img,
.br-4-minor-node-4 img,
.br-3-minor-node-1 img,
.br-3-minor-node-2 img {
  width: 9px;
  height: auto;
}

.brawler-1-tier-7 .skirmisher-label {
  font-size: 6px;
  margin-top: -13px;
}

.br-2-tier-9 .skirmisher-label,
.br-3-tier-11 .skirmisher-label,
.br-4-tier-11 .skirmisher-label {
  margin-top: -8px;
}

/* =========================
   PLACEMENT: BRAWLER
   ========================= */

.brawler-1-tier-7    { left: 668px;  top: 582px; }
.br-2-tier-9         { left: 625px;  top: 525px; }
.br-3-tier-11        { left: 572px;  top: 487px; }
.br-4-tier-11        { left: 601px;  top: 465px; }

.br-3-minor-node-1   { left: 558px;  top: 484px; }
.br-3-minor-node-2   { left: 562px;  top: 495px; }

.br-4-minor-node-1   { left: 606px;  top: 447px; }
.br-4-minor-node-2   { left: 616px;  top: 447px; }
.br-4-minor-node-3   { left: 622px;  top: 454px; }
.br-4-minor-node-4   { left: 620px;  top: 463px; }

/* =========================
   BRAWLER VISUAL EMPHASIS
   ========================= */

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

.brawler-1-tier-7:hover img,
.br-2-tier-9:hover img,
.br-3-tier-11:hover img,
.br-4-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));
}

.brawler-1-tier-7.selected img,
.br-2-tier-9.selected img,
.br-3-tier-11.selected img,
.br-4-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));
}

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

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

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

/* =========================
   BRAWLER APPLIED STATE
   ========================= */

.brawler-1-tier-7.applied img,
.br-2-tier-9.applied img,
.br-3-tier-11.applied img,
.br-4-tier-11.applied img,
.br-3-minor-node-1.applied img,
.br-3-minor-node-2.applied img,
.br-4-minor-node-1.applied img,
.br-4-minor-node-2.applied img,
.br-4-minor-node-3.applied img,
.br-4-minor-node-4.applied img {
  animation: node-breathe-skirmisher 3s ease-in-out infinite;
}

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