/* =========================
   TACTICIAN NODES
   Biotech Emerald + Neural Violet
   - Adds: .selected + .applied + swirling dots (picture::before)
   - Health/Action/Reaction: match the same behavior pattern used in other class files
   ========================= */

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

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

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

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

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

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

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

/* =========================
   LABELS (Biotech Emerald + Neural Violet)
   ========================= */

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

  /* Emerald-forward label, with a violet halo */
  color: rgba(150, 255, 210, 1);
  text-shadow:
    0 0 6px rgba(80, 255, 170, 0.40),
    0 0 10px rgba(160, 120, 255, 0.22);

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

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

.tc-health-tier-5 .tactician-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);
}

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

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

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

/* =========================
   NORMAL NODES: base + hover + selected
   ========================= */

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

.tc-2-tier-2:hover img,
.tc-3-tier-3:hover img,
.tc-4-tier-3:hover img,
.tc-5-tier-3:hover img,
.tc-6-tier-4:hover img,
.tc-7-tier-4:hover img,
.tc-8-tier-4:hover img,
.tc-9-tier-5:hover img,
.tc-10-tier-6:hover img,
.tc-11-tier-6:hover img,
.tactician-1-tier-1:hover img,
.tc-sub-tier-7:hover img {
  filter:
    brightness(1.2)
    drop-shadow(0 0 1px rgba(80, 255, 170, 0.85))
    drop-shadow(0 0 2px rgba(0, 170, 110, 0.45))
    drop-shadow(0 0 4px rgba(160, 120, 255, 0.40));
}

.tc-2-tier-2.selected img,
.tc-3-tier-3.selected img,
.tc-4-tier-3.selected img,
.tc-5-tier-3.selected img,
.tc-6-tier-4.selected img,
.tc-7-tier-4.selected img,
.tc-8-tier-4.selected img,
.tc-9-tier-5.selected img,
.tc-10-tier-6.selected img,
.tc-11-tier-6.selected img,
.tactician-1-tier-1.selected img,
.tc-sub-tier-7.selected img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 1px rgba(210, 255, 245, 0.55))
    drop-shadow(0 0 2px rgba(80, 255, 170, 0.75))
    drop-shadow(0 0 4px rgba(0, 170, 110, 0.55))
    drop-shadow(0 0 6px rgba(160, 120, 255, 0.50));
}

/* =========================
   MINOR NODES: base + hover + selected
   ========================= */

.tc-10-minor-node-1 img,
.tc-10-minor-node-2 img,
.tc-10-minor-node-3 img,
.tc-11-minor-node-1 img,
.tc-11-minor-node-2 img,
.tc-11-minor-node-3 img {
  filter: brightness(1.1);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.tc-10-minor-node-1:hover img,
.tc-10-minor-node-2:hover img,
.tc-10-minor-node-3:hover img,
.tc-11-minor-node-1:hover img,
.tc-11-minor-node-2:hover img,
.tc-11-minor-node-3:hover img {
  filter:
    brightness(1.2)
    drop-shadow(0 0 1px rgba(80, 255, 170, 0.85))
    drop-shadow(0 0 2px rgba(0, 170, 110, 0.45))
    drop-shadow(0 0 4px rgba(160, 120, 255, 0.35));
}

.tc-10-minor-node-1.selected img,
.tc-10-minor-node-2.selected img,
.tc-10-minor-node-3.selected img,
.tc-11-minor-node-1.selected img,
.tc-11-minor-node-2.selected img,
.tc-11-minor-node-3.selected img {
  filter:
    brightness(1.3)
    drop-shadow(0 0 1px rgba(210, 255, 245, 0.55))
    drop-shadow(0 0 2px rgba(80, 255, 170, 0.75))
    drop-shadow(0 0 4px rgba(0, 170, 110, 0.55))
    drop-shadow(0 0 6px rgba(160, 120, 255, 0.45));
}

/* =========================
   HEALTH / ACTION / REACTION (Agent-template pattern)
   ========================= */

.tc-health-tier-5 img {
  filter: brightness(1.8) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.tc-health-tier-5: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));
}

.tc-health-tier-5.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));
}

.tc-action-tier-5 img,
.tc-reaction-tier-5 img {
  filter: brightness(1.7);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

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

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

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

.tc-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 (breathing + swirling dots)
   ========================= */

.tactician-1-tier-1.applied img,
.tc-2-tier-2.applied img,
.tc-3-tier-3.applied img,
.tc-4-tier-3.applied img,
.tc-5-tier-3.applied img,
.tc-6-tier-4.applied img,
.tc-7-tier-4.applied img,
.tc-8-tier-4.applied img,
.tc-9-tier-5.applied img,
.tc-10-tier-6.applied img,
.tc-11-tier-6.applied img,
.tc-sub-tier-7.applied img,
.tc-10-minor-node-1.applied img,
.tc-10-minor-node-2.applied img,
.tc-10-minor-node-3.applied img,
.tc-11-minor-node-1.applied img,
.tc-11-minor-node-2.applied img,
.tc-11-minor-node-3.applied img {
  animation: node-breathe-tactician 3s ease-in-out infinite;
}

.tc-health-tier-5.applied img { animation: node-breathe-health 3s ease-in-out infinite; }
.tc-reaction-tier-5.applied img { animation: node-breathe-react 3s ease-in-out infinite; }
.tc-action-tier-5.applied img { animation: node-breathe-act 3s ease-in-out infinite; }

/* Swirling two-dot overlay (same dot colors as Agent), anchored to picture::before */
.tactician-1-tier-1.applied picture::before,
.tc-2-tier-2.applied picture::before,
.tc-3-tier-3.applied picture::before,
.tc-4-tier-3.applied picture::before,
.tc-5-tier-3.applied picture::before,
.tc-6-tier-4.applied picture::before,
.tc-7-tier-4.applied picture::before,
.tc-8-tier-4.applied picture::before,
.tc-action-tier-5.applied picture::before,
.tc-health-tier-5.applied picture::before,
.tc-9-tier-5.applied picture::before,
.tc-reaction-tier-5.applied picture::before,
.tc-10-tier-6.applied picture::before,
.tc-10-minor-node-1.applied picture::before,
.tc-10-minor-node-2.applied picture::before,
.tc-10-minor-node-3.applied picture::before,
.tc-11-tier-6.applied picture::before,
.tc-11-minor-node-1.applied picture::before,
.tc-11-minor-node-2.applied picture::before,
.tc-11-minor-node-3.applied picture::before,
.tc-sub-tier-7.applied picture::before {
  content: '';
  position: absolute;
  inset: -42%;
  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%;
}

.tc-health-tier-5.applied picture::before { inset: -50%; }
.tactician-1-tier-1.applied picture::before { inset: -28%; }

/* =========================
   KEYFRAMES
   ========================= */

@keyframes node-breathe-tactician {
  0%, 100% {
    filter:
      brightness(1.1)
      drop-shadow(0 0 1px rgba(210, 255, 245, 0.55))
      drop-shadow(0 0 2px rgba(80, 255, 170, 0.75))
      drop-shadow(0 0 4px rgba(0, 170, 110, 0.55))
      drop-shadow(0 0 6px rgba(160, 120, 255, 0.40));
  }
  50% {
    filter:
      brightness(1.8)
      drop-shadow(0 0 2px rgba(210, 255, 245, 0.40))
      drop-shadow(0 0 4px rgba(80, 255, 170, 0.25))
      drop-shadow(0 0 8px rgba(0, 170, 110, 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 Agent across x = 900)
   ========================= */

/* Tier 1 */
.tactician-1-tier-1 { left: 848px; top: 748px; }

/* Tier 2 */
.tc-2-tier-2 { left: 845px; top: 714px; }

/* Tier 3 */
.tc-3-tier-3 { left: 807px; top: 692px; }
.tc-4-tier-3 { left: 837px; top: 682px; }
.tc-5-tier-3 { left: 867px; top: 676px; }

/* Tier 4 */
.tc-6-tier-4 { left: 787px; top: 660px; }
.tc-7-tier-4 { left: 827px; top: 646px; }
.tc-8-tier-4 { left: 867px; top: 639px; }

/* Tier 5 */
.tc-action-tier-5   { left: 768px; top: 628px; }
.tc-health-tier-5   { left: 802px; top: 617px; }
.tc-9-tier-5        { left: 835px; top: 606px; }
.tc-reaction-tier-5 { left: 865px; top: 601px; }

/* Tier 6 */
.tc-10-tier-6 { left: 774px; top: 588px; }
.tc-10-minor-node-1 { left: 768px; top: 584px; }
.tc-10-minor-node-2 { left: 760px; top: 584px; }
.tc-10-minor-node-3 { left: 760px; top: 592px; }

.tc-11-tier-6 { left: 845px; top: 570px; }
.tc-11-minor-node-1 { left: 864px; top: 565px; }
.tc-11-minor-node-2 { left: 872px; top: 565px; }
.tc-11-minor-node-3 { left: 872px; top: 558px; }

/* Tier 7 */
.tc-sub-tier-7 { left: 785px; top: 521px; }

/* ============================================================
   PREMIUM TACTICIAN NODES
   ============================================================ */

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

.tc-12-tier-8 img,
.tc-13-tier-12 img,
.tc-14-tier-12 img {
  width: 19px;
  height: auto;
}

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

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

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

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

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

.tc-health-tier-12 .tactician-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: TC 12-14 & premium utility
   ========================= */

.tc-12-tier-8        { left: 793px;  top: 493px; }
.tc-12-minor-node-1  { left: 786px;  top: 488px; }
.tc-12-minor-node-2  { left: 775px;  top: 488px; }
.tc-12-minor-node-3  { left: 814px;  top: 488px; }
.tc-12-minor-node-4  { left: 823px;  top: 488px; }

.tc-action-tier-10   { left: 773px;  top: 423px; }

.tc-13-tier-12       { left: 718px;  top: 361px; }
.tc-reaction-tier-12 { left: 741px;  top: 352px; }
.tc-health-tier-12   { left: 770px;  top: 348px; }
.tc-14-tier-12       { left: 798px;  top: 341px; }

/* =========================
   TC 12-14 VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================
   TC PREMIUM APPLIED STATE
   ========================= */

.tc-12-tier-8.applied img,
.tc-12-minor-node-1.applied img,
.tc-12-minor-node-2.applied img,
.tc-12-minor-node-3.applied img,
.tc-12-minor-node-4.applied img,
.tc-13-tier-12.applied img,
.tc-14-tier-12.applied img {
  animation: node-breathe-tactician 3s ease-in-out infinite;
}

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

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

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

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

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

/* ============================================================
   COMMAND NODES
   ============================================================ */

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

.command-1-tier-7 img {
  width: 46px;
  height: auto;
}

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

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

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

.command-1-tier-7 .tactician-label {
  font-size: 6px;
  margin-top: -9px;
}

/* =========================
   PLACEMENT: COMMAND
   ========================= */

.command-1-tier-7    { left: 725px;  top: 538px; }
.cm-2-tier-9         { left: 723px;  top: 476px; }
.cm-3-tier-11        { left: 676px;  top: 415px; }
.cm-4-tier-11        { left: 701px;  top: 404px; }

.cm-2-minor-node-1   { left: 708px;  top: 479px; }
.cm-2-minor-node-2   { left: 719px;  top: 489px; }
.cm-2-minor-node-3   { left: 747px;  top: 478px; }
.cm-2-minor-node-4   { left: 740px;  top: 463px; }
.cm-2-minor-node-5   { left: 754px;  top: 468px; }
.cm-2-minor-node-6   { left: 768px;  top: 470px; }

/* =========================
   COMMAND VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   COMMAND APPLIED STATE
   ========================= */

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

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

/* ============================================================
   FLOW NODES
   ============================================================ */

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

.flow-1-tier-7 img {
  width: 28px;
  height: auto;
}

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

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

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

.flow-1-tier-7 .tactician-label {
  font-size: 6px;
}

/* =========================
   PLACEMENT: FLOW
   ========================= */

.flow-1-tier-7       { left: 857px;  top: 514px; }
.fl-2-tier-9         { left: 813px;  top: 452px; }
.fl-3-tier-9         { left: 845px;  top: 446px; }
.fl-4-tier-9         { left: 873px;  top: 442px; }
.fl-5-tier-11        { left: 825px;  top: 376px; }
.fl-6-tier-11        { left: 857px;  top: 373px; }

.fl-2-minor-node-1   { left: 808px;  top: 440px; }
.fl-2-minor-node-2   { left: 808px;  top: 450px; }
.fl-2-minor-node-3   { left: 828px;  top: 448px; }
.fl-2-minor-node-4   { left: 828px;  top: 458px; }

/* =========================
   FLOW VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   FLOW APPLIED STATE
   ========================= */

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

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