/* =========================
   ENGINEER NODES (BASE)
   (mirrors sizing conventions from agent.css)
   Adds: APPLIED breathing glow + swirling dots
   Normal EN nodes: grey/lightning-blue scheme
   Health/Act/React: match agent.css EXACTLY
   ========================= */

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

/* Images */
.engineer-1-tier-1 img,
.en-sub-tier-7 img{
  width: 40px; /* big */
  height: auto;
}

.en-2-tier-2 img,
.en-3-tier-2 img,
.en-4-tier-3 img,
.en-5-tier-3 img,
.en-6-tier-4 img,
.en-7-tier-6 img,
.en-8-tier-6 img,
.en-9-tier-6 img{
  width: 20px;
  height: auto;
}

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

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

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

/* Labels (Engineer normal nodes = cool grey/lightning-blue) */
.engineer-label{
  margin-top: -4px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: rgba(200, 220, 235, 1);
  text-shadow: 0 0 6px rgba(120, 200, 255, 0.35);
  white-space: nowrap;
  line-height: .5;
  font-size: 5px;
}

/* Label size: Tier 1 + TRADE (big like Agent:1 and SUB) */
.engineer-1-tier-1 .engineer-label,
.en-sub-tier-7 .engineer-label{
  font-size: 7px;
}

/* Health/Act/React label sizing like agent (keep exact orange styling) */
.en-health-tier-6 .engineer-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);
}

.en-reaction-tier-5 .engineer-label,
.en-action-tier-5 .engineer-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);
}

/* =========================
   MANUAL PLACEMENT (TEMP)
   Approx placements using your mirror idea (y mirrored around 900).
   Tweak freely after.
   ========================= */

/* Tier 1 */
.engineer-1-tier-1{ left: 1003px; top: 907px; }

/* Tier 2 */
.en-2-tier-2{ left: 1069px; top: 918px; }
.en-2-minor-node-1{ left: 1065px; top: 923px; }
.en-2-minor-node-2{ left: 1062px; top: 911px; }
.en-2-minor-node-3{ left: 1065px; top: 903px; }
.en-2-minor-node-4{ left: 1084px; top: 902px; }
.en-2-minor-node-5{ left: 1088px; top: 909px; }

/* EN:3 cluster (tier 2) */
.en-3-tier-2{ left: 1060px; top: 953px; }
.en-3-minor-node-1{ left: 1052px; top: 946px; }
.en-3-minor-node-2{ left: 1076px; top: 937px; }
.en-3-minor-node-3{ left: 1072px; top: 964px; }

/* Tier 3 */
.en-4-tier-3{ left: 1102px; top: 923px; }
.en-5-tier-3{ left: 1092px; top: 963px; }

/* Tier 4 */
.en-6-tier-4{ left: 1133px; top: 953px; }

/* Tier 5 */
.en-action-tier-5{ left: 1171px; top: 934px; }
.en-reaction-tier-5{ left: 1158px; top: 990px; }

/* Tier 6 */
.en-7-tier-6{ left: 1213px; top: 911px; }
.en-health-tier-6{ left: 1208px; top: 954px; }
.en-8-tier-6{ left: 1197px; top: 985px; }
.en-9-tier-6{ left: 1180px; top: 1031px; }

/* Tier 7 */
.en-sub-tier-7{ left: 1236px; top: 972px; }

/* =========================
   ENGINEER NORMAL NODES (grey + lightning blue)
   ========================= */

/* Base */
.en-2-tier-2 img,
.en-3-tier-2 img,
.en-4-tier-3 img,
.en-5-tier-3 img,
.en-6-tier-4 img,
.en-7-tier-6 img,
.en-8-tier-6 img,
.en-9-tier-6 img,
.engineer-1-tier-1 img,
.en-sub-tier-7 img{
  filter: brightness(1.2) saturate(0.85);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

/* Hover */
.en-2-tier-2:hover img,
.en-3-tier-2:hover img,
.en-4-tier-3:hover img,
.en-5-tier-3:hover img,
.en-6-tier-4:hover img,
.en-7-tier-6:hover img,
.en-8-tier-6:hover img,
.en-9-tier-6:hover img,
.engineer-1-tier-1:hover img,
.en-sub-tier-7:hover img{
  filter:
    brightness(1.4) saturate(0.95)
    drop-shadow(0 0 1px rgba(120, 200, 255, 0.85))
    drop-shadow(0 0 2px rgba(80, 160, 255, 0.50));
}

/* Selected */
.en-2-tier-2.selected img,
.en-3-tier-2.selected img,
.en-4-tier-3.selected img,
.en-5-tier-3.selected img,
.en-6-tier-4.selected img,
.en-7-tier-6.selected img,
.en-8-tier-6.selected img,
.en-9-tier-6.selected img,
.engineer-1-tier-1.selected img,
.en-sub-tier-7.selected img{
  filter:
    brightness(1.6) saturate(1.05)
    drop-shadow(0 0 1px rgba(160, 230, 255, 0.95))
    drop-shadow(0 0 2px rgba(120, 200, 255, 0.70))
    drop-shadow(0 0 4px rgba(90, 170, 255, 0.50));
}

/* Minor nodes (slightly brighter “spark” style) */
.en-2-minor-node-1 img,
.en-2-minor-node-2 img,
.en-2-minor-node-3 img,
.en-2-minor-node-4 img,
.en-2-minor-node-5 img,
.en-3-minor-node-1 img,
.en-3-minor-node-2 img,
.en-3-minor-node-3 img{
  filter: brightness(1.3) saturate(0.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.en-2-minor-node-1:hover img,
.en-2-minor-node-2:hover img,
.en-2-minor-node-3:hover img,
.en-2-minor-node-4:hover img,
.en-2-minor-node-5:hover img,
.en-3-minor-node-1:hover img,
.en-3-minor-node-2:hover img,
.en-3-minor-node-3:hover img{
  filter:
    brightness(1.5) saturate(1.0)
    drop-shadow(0 0 2px rgba(120, 200, 255, 0.85))
    drop-shadow(0 0 4px rgba(80, 160, 255, 0.50));
}

.en-2-minor-node-1.selected img,
.en-2-minor-node-2.selected img,
.en-2-minor-node-3.selected img,
.en-2-minor-node-4.selected img,
.en-2-minor-node-5.selected img,
.en-3-minor-node-1.selected img,
.en-3-minor-node-2.selected img,
.en-3-minor-node-3.selected img{
  filter:
    brightness(1.9) saturate(1.05)
    drop-shadow(0 0 2px rgba(160, 230, 255, 0.95))
    drop-shadow(0 0 4px rgba(120, 200, 255, 0.70))
    drop-shadow(0 0 8px rgba(90, 170, 255, 0.50));
}

/* =========================
   Health / React / Act MUST match agent.css EXACTLY (hover + selected)
   ========================= */

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

.en-health-tier-6: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));
}

.en-health-tier-6.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));
}

/* React base + hover + selected (Agent exact pattern) */
.en-reaction-tier-5 img,
.en-action-tier-5 img{
  filter: brightness(1.7);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

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

.en-reaction-tier-5.selected img{
  filter:
    brightness(2.0)
    drop-shadow(0 0 2px rgba(77, 81, 193, 0.9))
    drop-shadow(0 0 4px rgba(74, 69, 230, 0.7))
    drop-shadow(0 0 10px rgba(70, 24, 169, 0.6));
}

/* Act hover + selected (Agent exact pattern) */
.en-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));
}

.en-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 engineer nodes applied (unique keyframes so we don't override other classes) */
.engineer-1-tier-1.applied img,
.en-2-tier-2.applied img,
.en-3-tier-2.applied img,
.en-4-tier-3.applied img,
.en-5-tier-3.applied img,
.en-6-tier-4.applied img,
.en-7-tier-6.applied img,
.en-8-tier-6.applied img,
.en-9-tier-6.applied img,
.en-sub-tier-7.applied img,
.en-2-minor-node-1.applied img,
.en-2-minor-node-2.applied img,
.en-2-minor-node-3.applied img,
.en-2-minor-node-4.applied img,
.en-2-minor-node-5.applied img,
.en-3-minor-node-1.applied img,
.en-3-minor-node-2.applied img,
.en-3-minor-node-3.applied img{
  animation: node-breathe-engineer 3s ease-in-out infinite;
}

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

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

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

/* =========================
   KEYFRAMES (Engineer-only)
   ========================= */

/* Grey + lightning-blue breathing for normal Engineer nodes */
@keyframes node-breathe-engineer{
  0%, 100%{
    filter:
      brightness(1.1) saturate(0.9)
      drop-shadow(0 0 3px rgba(160, 230, 255, 0.20))
      drop-shadow(0 0 6px rgba(120, 200, 255, 0.75))
      drop-shadow(0 0 9px rgba(90, 170, 255, 0.55));
  }
  50%{
    filter:
      brightness(1.9) saturate(1.0)
      drop-shadow(0 0 4px rgba(160, 230, 255, 0.5))
      drop-shadow(0 0 8px rgba(120, 200, 255, 0.50))
      drop-shadow(0 0 16px rgba(90, 170, 255, 0.35));
  }
}

/* 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); }
}

/* ============================================================
   PREMIUM ENGINEER NODES
   ============================================================ */

/* =========================
   EN 10-12 (CONTINUED ENGINEER LINE)
   ========================= */

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

.en-10-tier-8 img,
.en-11-tier-8 img,
.en-12-tier-8 img {
  width: 20px;
  height: auto;
}

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

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

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

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

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

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

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

.en-health-tier-12 .engineer-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);
}

.en-12-tier-8 .engineer-label {
  margin-top: -1px;
  margin-left: -6px;
}

/* =========================
   PLACEMENT: EN 10-12 & premium utility
   ========================= */

.en-10-tier-8        { left: 1295px; top: 968px; }
.en-10-minor-node-1  { left: 1291px; top: 953px; }
.en-10-minor-node-2  { left: 1316px; top: 955px; }

.en-11-tier-8        { left: 1290px; top: 993px; }

.en-12-tier-8        { left: 1280px; top: 1015px; }
.en-12-minor-node-1  { left: 1274px; top: 1020px; }
.en-12-minor-node-2  { left: 1295px; top: 1025px; }

.en-action-tier-10   { left: 1359px; top: 1000px; }
.en-reaction-tier-12 { left: 1433px; top: 997px; }
.en-health-tier-12   { left: 1424px; top: 1040px; }

/* =========================
   EN 10-12 VISUAL EMPHASIS
   ========================= */

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

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

.en-10-tier-8.selected img,
.en-11-tier-8.selected img,
.en-12-tier-8.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));
}

/* EN minor emphasis */
.en-10-minor-node-1 img,
.en-10-minor-node-2 img,
.en-12-minor-node-1 img,
.en-12-minor-node-2 img {
  filter: brightness(1.3);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

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

.en-10-minor-node-1.selected img,
.en-10-minor-node-2.selected img,
.en-12-minor-node-1.selected img,
.en-12-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 */
.en-health-tier-12 img {
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

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

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

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

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

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

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

/* =========================
   EN 10-12 APPLIED STATE
   ========================= */

.en-10-tier-8.applied img,
.en-11-tier-8.applied img,
.en-12-tier-8.applied img,
.en-10-minor-node-1.applied img,
.en-10-minor-node-2.applied img,
.en-12-minor-node-1.applied img,
.en-12-minor-node-2.applied img {
  animation: node-breathe-engineer 3s ease-in-out infinite;
}

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

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

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

.en-10-tier-8.applied::before,
.en-10-minor-node-1.applied::before,
.en-10-minor-node-2.applied::before,
.en-11-tier-8.applied::before,
.en-12-tier-8.applied::before,
.en-12-minor-node-1.applied::before,
.en-12-minor-node-2.applied::before,
.en-action-tier-10.applied::before,
.en-reaction-tier-12.applied::before,
.en-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%;
}

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

/* ============================================================
   MACHINIST NODES
   ============================================================ */

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

.machinist-1-tier-7 img {
  width: 29px;
  height: auto;
}

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

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

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

.machinist-1-tier-7 .engineer-label {
  font-size: 7px;
}

/* =========================
   PLACEMENT: MACHINIST
   ========================= */

.machinist-1-tier-7  { left: 1242px; top: 915px; }
.mc-2-tier-9         { left: 1330px; top: 905px; }
.mc-3-tier-9         { left: 1347px; top: 923px; }
.mc-4-tier-9         { left: 1328px; top: 932px; }
.mc-5-tier-9         { left: 1342px; top: 950px; }
.mc-6-tier-9         { left: 1336px; top: 968px; }
.mc-7-tier-11        { left: 1407px; top: 950px; }

.mc-6-minor-node-1   { left: 1326px; top: 972px; }
.mc-6-minor-node-2   { left: 1335px; top: 977px; }
.mc-6-minor-node-3   { left: 1345px; top: 977px; }

/* =========================
   MACHINIST VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   MACHINIST APPLIED STATE
   ========================= */

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

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

/* ============================================================
   ELECTRICIAN NODES
   ============================================================ */

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

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

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

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

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

.electrician-1-tier-7 .engineer-label {
  font-size: 7px;
}

/* =========================
   PLACEMENT: ELECTRICIAN
   ========================= */

.electrician-1-tier-7 { left: 1202px; top: 1034px; }
.ec-2-tier-9          { left: 1321px; top: 1032px; }
.ec-3-tier-9          { left: 1310px; top: 1054px; }
.ec-4-tier-9          { left: 1302px; top: 1072px; }
.ec-5-tier-9          { left: 1290px; top: 1091px; }
.ec-6-tier-11         { left: 1377px; top: 1070px; }
.ec-7-tier-11         { left: 1362px; top: 1105px; }

.ec-2-minor-node-1    { left: 1315px; top: 1015px; }
.ec-2-minor-node-2    { left: 1326px; top: 1012px; }
.ec-2-minor-node-3    { left: 1336px; top: 1019px; }

/* =========================
   ELECTRICIAN VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   ELECTRICIAN APPLIED STATE
   ========================= */

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

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