/* =========================
   MEDIC NODES (CLINICAL CYAN)
   - Same sizing + label + interaction conventions as your other upgraded classes
   - Normal MD nodes: Clinical Cyan
   - Health/Act/React: match agent.css EXACTLY
   - Adds: .selected + .applied + swirling dots (anchored to picture::before)
   ========================= */

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

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

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

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

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

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

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

/* =========================
   LABELS (Clinical Cyan)
   ========================= */

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

  /* Clinical Cyan */
  color: rgba(140, 220, 255, 1);
  text-shadow: 0 0 6px rgba(90, 190, 255, 0.35);

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

/* Tier 1 + Tier 7 label */
.medic-1-tier-1 .medic-label,
.md-sub-tier-7 .medic-label{
  font-size: 6px;
}

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

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

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

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

/* =========================
   NORMAL MEDIC NODES: Clinical Cyan
   ========================= */

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

/* Hover */
.md-2-tier-2:hover img,
.md-3-tier-3:hover img,
.md-4-tier-4:hover img,
.md-5-tier-4:hover img,
.md-6-tier-5:hover img,
.md-7-tier-6:hover img,
.md-8-tier-6:hover img,
.md-9-tier-6:hover img,
.medic-1-tier-1:hover img,
.md-sub-tier-7:hover img{
  filter:
    brightness(1.60)
    drop-shadow(0 0 2px rgba(90, 190, 255, 0.85))
    drop-shadow(0 0 4px rgba(30, 120, 170, 0.45));
}

/* Selected */
.md-2-tier-2.selected img,
.md-3-tier-3.selected img,
.md-4-tier-4.selected img,
.md-5-tier-4.selected img,
.md-6-tier-5.selected img,
.md-7-tier-6.selected img,
.md-8-tier-6.selected img,
.md-9-tier-6.selected img,
.medic-1-tier-1.selected img,
.md-sub-tier-7.selected img{
  filter:
    brightness(1.90)
    drop-shadow(0 0 2px rgba(200, 245, 255, 0.95))
    drop-shadow(0 0 4px rgba(90, 190, 255, 0.70))
    drop-shadow(0 0 8px rgba(30, 120, 170, 0.50));
}

/* Minor nodes (bright + cyan tint) */
.md-2-minor-node-1 img,
.md-2-minor-node-2 img,
.md-2-minor-node-3 img,
.md-2-minor-node-4 img,
.md-5-minor-node-1 img,
.md-5-minor-node-2 img,
.md-5-minor-node-3 img,
.md-5-minor-node-4 img{
  filter: brightness(2.20);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.md-2-minor-node-1:hover img,
.md-2-minor-node-2:hover img,
.md-2-minor-node-3:hover img,
.md-2-minor-node-4:hover img,
.md-5-minor-node-1:hover img,
.md-5-minor-node-2:hover img,
.md-5-minor-node-3:hover img,
.md-5-minor-node-4:hover img{
  filter:
    brightness(2.55)
    drop-shadow(0 0 2px rgba(90, 190, 255, 0.85))
    drop-shadow(0 0 4px rgba(30, 120, 170, 0.45));
}

.md-2-minor-node-1.selected img,
.md-2-minor-node-2.selected img,
.md-2-minor-node-3.selected img,
.md-2-minor-node-4.selected img,
.md-5-minor-node-1.selected img,
.md-5-minor-node-2.selected img,
.md-5-minor-node-3.selected img,
.md-5-minor-node-4.selected img{
  filter:
    brightness(2.90)
    drop-shadow(0 0 2px rgba(200, 245, 255, 0.95))
    drop-shadow(0 0 4px rgba(90, 190, 255, 0.70))
    drop-shadow(0 0 8px rgba(30, 120, 170, 0.50));
}

/* =========================
   Health / Reaction / Action
   MUST match agent.css EXACTLY (base/hover/selected)
   ========================= */

/* Health */
.md-health-tier-2 img{
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.md-health-tier-2: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));
}

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

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

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

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

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

/* Health / React / Act applied: use Agent's exact applied animations (defined in agent.css) */
.md-health-tier-2.applied img{
  animation: node-breathe-health 3s ease-in-out infinite;
}
.md-reaction-tier-5.applied img{
  animation: node-breathe-react 3s ease-in-out infinite;
}
.md-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 */
.medic-1-tier-1.applied picture::before,
.md-2-tier-2.applied picture::before,
.md-3-tier-3.applied picture::before,
.md-4-tier-4.applied picture::before,
.md-5-tier-4.applied picture::before,
.md-6-tier-5.applied picture::before,
.md-7-tier-6.applied picture::before,
.md-8-tier-6.applied picture::before,
.md-9-tier-6.applied picture::before,
.md-sub-tier-7.applied picture::before,
.md-2-minor-node-1.applied picture::before,
.md-2-minor-node-2.applied picture::before,
.md-2-minor-node-3.applied picture::before,
.md-2-minor-node-4.applied picture::before,
.md-5-minor-node-1.applied picture::before,
.md-5-minor-node-2.applied picture::before,
.md-5-minor-node-3.applied picture::before,
.md-5-minor-node-4.applied picture::before,
.md-health-tier-2.applied picture::before,
.md-reaction-tier-5.applied picture::before,
.md-action-tier-5.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%;
}

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

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

/* =========================
   KEYFRAMES (Medic-only)
   Clinical Cyan breathe
   ========================= */

@keyframes node-breathe-medic{
  0%, 100%{
    filter:
      brightness(1.70)
      drop-shadow(0 0 3px rgba(200, 245, 255, 0.90))
      drop-shadow(0 0 6px rgba(90, 190, 255, 0.75))
      drop-shadow(0 0 12px rgba(30, 120, 170, 0.55));
  }
  50%{
    filter:
      brightness(2.45)
      drop-shadow(0 0 4px rgba(200, 245, 255, 0.65))
      drop-shadow(0 0 8px rgba(90, 190, 255, 0.50))
      drop-shadow(0 0 16px rgba(30, 120, 170, 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); }
}

/* =========================
   PLACEMENT (UNCHANGED from your current file)
   ========================= */

/* Tier 1 */
.medic-1-tier-1 { left: 848px; top: 1006px; }

/* Tier 2 */
.md-health-tier-2 { left: 870px; top: 1067px; }
.md-2-tier-2      { left: 825px; top: 1056px; }

.md-2-minor-node-1 { left: 820px; top: 1058px; }
.md-2-minor-node-2 { left: 816px; top: 1052px; }
.md-2-minor-node-3 { left: 816px; top: 1044px; }
.md-2-minor-node-4 { left: 820px; top: 1038px; }

/* Tier 3 */
.md-3-tier-3 { left: 837px; top: 1096px; }

/* Tier 4 */
.md-4-tier-4 { left: 795px; top: 1120px; }
.md-5-tier-4 { left: 856px; top: 1138px; }

.md-5-minor-node-1 { left: 873px; top: 1141px; }
.md-5-minor-node-2 { left: 877px; top: 1135px; }
.md-5-minor-node-3 { left: 877px; top: 1127px; }
.md-5-minor-node-4 { left: 873px; top: 1121px; }

/* Tier 5 */
.md-action-tier-5   { left: 767px; top: 1146px; }
.md-6-tier-5        { left: 816px; top: 1166px; }
.md-reaction-tier-5 { left: 866px; top: 1173px; }

/* Tier 6 */
.md-7-tier-6 { left: 752px; top: 1179px; }
.md-8-tier-6 { left: 806px; top: 1200px; }
.md-9-tier-6 { left: 865px; top: 1209px; }

/* Tier 7 */
.md-sub-tier-7 { left: 786px; top: 1232px; }

/* ============================================================
   PREMIUM MEDIC NODES
   ============================================================ */

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

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

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

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

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

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

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

.md-health-tier-8 .medic-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: MD 10-12 & premium utility
   ========================= */

.md-10-tier-8        { left: 762px;  top: 1279px; }
.md-health-tier-8    { left: 788px;  top: 1288px; }
.md-11-tier-8        { left: 813px;  top: 1295px; }

.md-action-tier-10   { left: 768px;  top: 1354px; }

.md-12-tier-12       { left: 734px;  top: 1423px; }
.md-12-minor-node-1  { left: 732px;  top: 1403px; }
.md-12-minor-node-2  { left: 726px;  top: 1409px; }
.md-12-minor-node-3  { left: 725px;  top: 1417px; }
.md-12-minor-node-4  { left: 727px;  top: 1425px; }

.md-reaction-tier-12 { left: 765px;  top: 1427px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================
   MD PREMIUM APPLIED STATE
   ========================= */

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

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

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

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

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

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

/* ============================================================
   APOTHECARY NODES
   ============================================================ */

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

.apothecary-1-tier-7 img {
  width: 36px;
  height: auto;
}

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

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

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

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

.apothecary-1-tier-7 .medic-label {
  font-size: 6px;
}

/* =========================
   PLACEMENT: APOTHECARY
   ========================= */

.apothecary-1-tier-7 { left: 723px;  top: 1209px; }
.ap-2-tier-9         { left: 696px;  top: 1292px; }
.ap-3-tier-9         { left: 729px;  top: 1305px; }
.ap-4-tier-11        { left: 682px;  top: 1360px; }

.ap-2-minor-node-1   { left: 717px;  top: 1280px; }
.ap-2-minor-node-2   { left: 717px;  top: 1290px; }
.ap-2-minor-node-3   { left: 717px;  top: 1300px; }
.ap-2-minor-node-4   { left: 717px;  top: 1310px; }

.ap-3-minor-node-1   { left: 750px;  top: 1300px; }
.ap-3-minor-node-2   { left: 750px;  top: 1310px; }

/* =========================
   APOTHECARY VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   APOTHECARY APPLIED STATE
   ========================= */

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

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

/* ============================================================
   SERGEON NODES
   ============================================================ */

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

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

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

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

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

.sergeon-1-tier-7 .medic-label {
  font-size: 6px;
}

/* =========================
   PLACEMENT: SERGEON
   ========================= */

.sergeon-1-tier-7    { left: 852px;  top: 1248px; }
.sg-2-tier-9         { left: 809px;  top: 1330px; }
.sg-3-tier-9         { left: 844px;  top: 1334px; }
.sg-4-tier-9         { left: 872px;  top: 1338px; }
.sg-5-tier-11        { left: 802px;  top: 1400px; }
.sg-6-tier-11        { left: 835px;  top: 1405px; }
.sg-7-tier-11        { left: 868px;  top: 1408px; }

.sg-3-minor-node-1   { left: 834px;  top: 1316px; }
.sg-3-minor-node-2   { left: 834px;  top: 1327px; }
.sg-3-minor-node-3   { left: 834px;  top: 1339px; }

/* =========================
   SERGEON VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   SERGEON APPLIED STATE
   ========================= */

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

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