/* =========================
   DEMOLITIONIST (scoped only)
   Adds: APPLIED glow + swirling dots
   Special nodes (Health/Act/React): match agent.css EXACTLY
   Normal DE nodes: YELLOW scheme
   ========================= */

/* Base wrappers */
.demolitionist-1-tier-1,
.de-2-tier-2,
.de-3-tier-3,
.de-4-tier-3,
.de-5-tier-3,
.de-6-tier-4,
.de-7-tier-6,
.de-8-tier-6,
.de-9-tier-6,
.de-sub-tier-7,
.de-health-tier-4,
.de-action-tier-5,
.de-reaction-tier-5{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

/* Minor node wrappers */
.de-2-minor-node-1,
.de-2-minor-node-2,
.de-2-minor-node-3,
.de-2-minor-node-4,
.de-2-minor-node-5,
.de-2-minor-node-6,
.de-2-minor-node-7,
.de-2-minor-node-8{
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  text-align: center;
}

/* Label (YELLOW for normal DE nodes) */
.demo-label{
  margin-top: -4px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: rgba(255, 230, 120, 1);
  text-shadow: 0 0 6px rgba(255, 210, 60, 0.45);
  white-space: nowrap;
  line-height: 1;
  font-size: 5px;
}

/* DE:2 specific adjustment */
.de-2-tier-2 .demo-label {
  line-height: 5;
}

/* Bigger label for Tier 1 + Specialty */
.demolitionist-1-tier-1 .demo-label,
.de-sub-tier-7 .demo-label{
  font-size: 7px;
}

/* =========================
   Sizes (consistent standards)
   ========================= */

/* Main big icons */
.demolitionist-1-tier-1 img,
.de-sub-tier-7 img{
  width: 48px;
  height: auto;
}

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

/* Minor nodes (AG minor standard) */
.de-2-minor-node-1 img,
.de-2-minor-node-2 img,
.de-2-minor-node-3 img,
.de-2-minor-node-4 img,
.de-2-minor-node-5 img,
.de-2-minor-node-6 img,
.de-2-minor-node-7 img,
.de-2-minor-node-8 img{
  width: 6px;
  aspect-ratio: 1 / 1;
}

.de-2-tier-2 picture{
  position: relative;
  display: inline-block;
}

/* Health/React/Act standard sizes */
.de-health-tier-4 img{
  width: 17px;
  aspect-ratio: 1 / 1;
}
.de-reaction-tier-5 img,
.de-action-tier-5 img{
  width: 22px;
  height: auto;
}

/* =========================
   Interactivity + glow
   Normal DE nodes = YELLOW scheme
   ========================= */

/* Normal DE nodes: base */
.demolitionist-1-tier-1 img,
.de-2-tier-2 img,
.de-3-tier-3 img,
.de-4-tier-3 img,
.de-5-tier-3 img,
.de-6-tier-4 img,
.de-7-tier-6 img,
.de-8-tier-6 img,
.de-9-tier-6 img,
.de-sub-tier-7 img{
  filter: brightness(1.2);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

/* Normal DE nodes: hover */
.demolitionist-1-tier-1:hover img,
.de-2-tier-2:hover img,
.de-3-tier-3:hover img,
.de-4-tier-3:hover img,
.de-5-tier-3:hover img,
.de-6-tier-4:hover img,
.de-7-tier-6:hover img,
.de-8-tier-6:hover img,
.de-9-tier-6:hover img,
.de-sub-tier-7:hover img{
  filter:
    brightness(1.3)
    drop-shadow(0 0 1px rgba(255, 220, 90, 0.85))
    drop-shadow(0 0 2px rgba(255, 200, 40, 0.45));
}

/* Normal DE nodes: selected */
.demolitionist-1-tier-1.selected img,
.de-2-tier-2.selected img,
.de-3-tier-3.selected img,
.de-4-tier-3.selected img,
.de-5-tier-3.selected img,
.de-6-tier-4.selected img,
.de-7-tier-6.selected img,
.de-8-tier-6.selected img,
.de-9-tier-6.selected img,
.de-sub-tier-7.selected img{
  filter:
    brightness(1.4)
    drop-shadow(0 0 2px rgba(255, 230, 120, 0.95))
    drop-shadow(0 0 3px rgba(255, 210, 60, 0.70))
    drop-shadow(0 0 4px rgba(255, 190, 30, 0.45));
}

/* Minor nodes: match Agent minor “pop” style, but yellow-tinted */
.de-2-minor-node-1 img,
.de-2-minor-node-2 img,
.de-2-minor-node-3 img,
.de-2-minor-node-4 img,
.de-2-minor-node-5 img,
.de-2-minor-node-6 img,
.de-2-minor-node-7 img,
.de-2-minor-node-8 img{
  filter: brightness(1.3);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}

.de-2-minor-node-1:hover img,
.de-2-minor-node-2:hover img,
.de-2-minor-node-3:hover img,
.de-2-minor-node-4:hover img,
.de-2-minor-node-5:hover img,
.de-2-minor-node-6:hover img,
.de-2-minor-node-7:hover img,
.de-2-minor-node-8:hover img{
  filter:
    brightness(1.5)
    drop-shadow(0 0 1px rgba(255, 220, 90, 0.85))
    drop-shadow(0 0 2px rgba(255, 200, 40, 0.45));
}

.de-2-minor-node-1.selected img,
.de-2-minor-node-2.selected img,
.de-2-minor-node-3.selected img,
.de-2-minor-node-4.selected img,
.de-2-minor-node-5.selected img,
.de-2-minor-node-6.selected img,
.de-2-minor-node-7.selected img,
.de-2-minor-node-8.selected img{
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(255, 230, 120, 0.95))
    drop-shadow(0 0 3px rgba(255, 210, 60, 0.70))
    drop-shadow(0 0 4px rgba(255, 190, 30, 0.45));
}

/* =========================
   Health / React / Act MUST match agent.css EXACTLY
   ========================= */

/* Tight labels for stat-like nodes (Agent orange text styling) */
.de-health-tier-4 .demo-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);
}
.de-reaction-tier-5 .demo-label,
.de-action-tier-5 .demo-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);
}

/* Health base + hover + selected (Agent exact pattern) */
.de-health-tier-4 img{
  filter: brightness(1.0) contrast(.9);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}
.de-health-tier-4: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));
}
.de-health-tier-4.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) */
.de-reaction-tier-5 img{
  filter: brightness(1.7);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}
.de-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));
}
.de-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 base + hover + selected (Agent exact pattern) */
.de-action-tier-5 img{
  filter: brightness(1.7);
  transition: none;
  pointer-events: auto;
  cursor: pointer;
}
.de-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));
}
.de-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 demo nodes applied (unique keyframes so we don't override other classes) */
.demolitionist-1-tier-1.applied img,
.de-2-tier-2.applied img,
.de-3-tier-3.applied img,
.de-4-tier-3.applied img,
.de-5-tier-3.applied img,
.de-6-tier-4.applied img,
.de-7-tier-6.applied img,
.de-8-tier-6.applied img,
.de-9-tier-6.applied img,
.de-sub-tier-7.applied img,
.de-2-minor-node-1.applied img,
.de-2-minor-node-2.applied img,
.de-2-minor-node-3.applied img,
.de-2-minor-node-4.applied img,
.de-2-minor-node-5.applied img,
.de-2-minor-node-6.applied img,
.de-2-minor-node-7.applied img,
.de-2-minor-node-8.applied img{
  animation: node-breathe-demo 3s ease-in-out infinite;
}

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

.demolitionist-1-tier-1 picture,
.de-3-tier-3 picture,
.de-4-tier-3 picture,
.de-5-tier-3 picture,
.de-6-tier-4 picture,
.de-7-tier-6 picture,
.de-8-tier-6 picture,
.de-9-tier-6 picture,
.de-sub-tier-7 picture,
.de-2-minor-node-1 picture,
.de-2-minor-node-2 picture,
.de-2-minor-node-3 picture,
.de-2-minor-node-4 picture,
.de-2-minor-node-5 picture,
.de-2-minor-node-6 picture,
.de-2-minor-node-7 picture,
.de-2-minor-node-8 picture,
.de-health-tier-4 picture,
.de-reaction-tier-5 picture,
.de-action-tier-5 picture{
  position: relative;
  display: inline-block;
}

/* Swirling two-dot overlay (same exact colors as Agent) */
.demolitionist-1-tier-1.applied picture::before,
.de-2-tier-2.applied picture::before,
.de-3-tier-3.applied picture::before,
.de-4-tier-3.applied picture::before,
.de-5-tier-3.applied picture::before,
.de-6-tier-4.applied picture::before,
.de-7-tier-6.applied picture::before,
.de-8-tier-6.applied picture::before,
.de-9-tier-6.applied picture::before,
.de-sub-tier-7.applied picture::before,
.de-2-minor-node-1.applied picture::before,
.de-2-minor-node-2.applied picture::before,
.de-2-minor-node-3.applied picture::before,
.de-2-minor-node-4.applied picture::before,
.de-2-minor-node-5.applied picture::before,
.de-2-minor-node-6.applied picture::before,
.de-2-minor-node-7.applied picture::before,
.de-2-minor-node-8.applied picture::before,
.de-health-tier-4.applied picture::before,
.de-reaction-tier-5.applied picture::before,
.de-action-tier-5.applied picture::before{

  content: '';
  position: absolute;
  inset: -28%;
  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 */
.de-health-tier-4.applied picture::before{
  inset: -50%;
}

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

/* Yellow breathing for normal Demo nodes */
@keyframes node-breathe-demo{
  0%, 100%{
    filter:
      brightness(1.2)
      drop-shadow(0 0 1px rgba(255, 230, 120, 0.25))
      drop-shadow(0 0 2px rgba(255, 210, 60, 0.80))
      drop-shadow(0 0 4px rgba(255, 190, 30, 0.65));
  }
  50%{
    filter:
      brightness(1.9)
      drop-shadow(0 0 3px rgba(255, 230, 120, 0.80))
      drop-shadow(0 0 6px rgba(255, 210, 60, 0.50))
      drop-shadow(0 0 10px rgba(255, 190, 30, 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); }
}

/* =========================
   MANUAL PLACEMENT (your existing starter guesses)
   ========================= */

.demolitionist-1-tier-1{ left: 995px; top: 839px; }   /* Tier 1 */

.de-2-tier-2{ left: 1063px; top: 841px; }    /* Tier 2 */
.de-2-minor-node-1{ left: 1057px; top: 830px; }
.de-2-minor-node-2{ left: 1063px; top: 823px; }
.de-2-minor-node-3{ left: 1073px; top: 823px; }
.de-2-minor-node-4{ left: 1085px; top: 842px; }
.de-2-minor-node-5{ left: 1062px; top: 850px; }
.de-2-minor-node-6{ left: 1068px; top: 853px; }
.de-2-minor-node-7{ left: 1075px; top: 854px; }
.de-2-minor-node-8{ left: 1082px; top: 852px; }

.de-3-tier-3{ left: 1086px; top: 800px; }    /* Tier 3 */
.de-4-tier-3{ left: 1097px; top: 832px; }
.de-5-tier-3{ left: 1103px; top: 864px; }

.de-6-tier-4{ left: 1126px; top: 803px; }    /* Tier 4 */
.de-health-tier-4{ left: 1139px; top: 850px; }

.de-action-tier-5{ left: 1153px; top: 775px; }   /* Tier 5 */
.de-reaction-tier-5{ left: 1174px; top: 853px; }

.de-7-tier-6{ left: 1182px; top: 748px; }    /* Tier 6 */
.de-8-tier-6{ left: 1195px; top: 782px; }
.de-9-tier-6{ left: 1211px; top: 860px; }

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

/* ============================================================
   PREMIUM DEMOLITIONIST NODES
   ============================================================ */

/* =========================
   DE 10-16 (CONTINUED DEMO LINE)
   ========================= */

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

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

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

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

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

.de-health-tier-10 .demo-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: DE 10-16 & premium utility
   ========================= */

.de-10-tier-8       { left: 1272px; top: 746px; }
.de-11-tier-8       { left: 1288px; top: 762px; }
.de-12-tier-8       { left: 1281px; top: 785px; }
.de-13-tier-8       { left: 1299px; top: 798px; }
.de-14-tier-8       { left: 1290px; top: 821px; }
.de-15-tier-10      { left: 1350px; top: 747px; }
.de-16-tier-10      { left: 1355px; top: 772px; }

.de-health-tier-10  { left: 1348px; top: 727px; }
.de-reaction-tier-10{ left: 1363px; top: 797px; }
.de-action-tier-12  { left: 1427px; top: 750px; }

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

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

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

.de-10-tier-8.selected img,
.de-11-tier-8.selected img,
.de-12-tier-8.selected img,
.de-13-tier-8.selected img,
.de-14-tier-8.selected img,
.de-15-tier-10.selected img,
.de-16-tier-10.selected img {
  filter:
    brightness(1.4)
    drop-shadow(0 0 2px rgba(40, 160, 255, 0.95))
    drop-shadow(0 0 4px rgba(80, 200, 255, 0.70))
    drop-shadow(0 0 8px rgba(140, 230, 255, 0.50));
}

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

.de-health-tier-10: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));
}

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

.de-action-tier-12: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));
}

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

.de-reaction-tier-10:hover img {
  filter:
    brightness(1.7)
    drop-shadow(0 0 2px rgba(77, 81, 193, 0.8))
    drop-shadow(0 0 4px rgba(74, 69, 230, 0.5));
}

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

/* =========================
   DE 10-16 APPLIED STATE
   ========================= */

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

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

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

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

.de-10-tier-8.applied::before,
.de-11-tier-8.applied::before,
.de-12-tier-8.applied::before,
.de-13-tier-8.applied::before,
.de-14-tier-8.applied::before,
.de-15-tier-10.applied::before,
.de-16-tier-10.applied::before,
.de-action-tier-12.applied::before,
.de-reaction-tier-10.applied::before,
.de-health-tier-10.applied::before
{
  content: '';
  position: absolute;
  inset: -28%;
  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%;
}

.de-health-tier-10.applied::before {
  inset: -50%;
}

/* ============================================================
   GRENADIER NODES
   ============================================================ */

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

.grenadier-1-tier-7 img {
  width: 34px;
  height: auto;
}

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

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

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

.grenadier-1-tier-7 .demo-label {
  font-size: 7px;
}

.gr-2-tier-9 .demo-label {
  margin-top: 2px;
  margin-left: 6px;
}

/* =========================
   PLACEMENT: GRENADIER
   ========================= */

.grenadier-1-tier-7  { left: 1220px; top: 730px; }
.gr-2-tier-9         { left: 1296px; top: 703px; }
.gr-3-tier-11        { left: 1353px; top: 655px; }
.gr-4-tier-11        { left: 1365px; top: 677px; }
.gr-5-tier-11        { left: 1375px; top: 701px; }

.gr-2-minor-node-1   { left: 1285px; top: 690px; }
.gr-2-minor-node-2   { left: 1292px; top: 682px; }
.gr-2-minor-node-3   { left: 1304px; top: 684px; }
.gr-2-minor-node-4   { left: 1294px; top: 713px; }
.gr-2-minor-node-5   { left: 1313px; top: 707px; }

/* =========================
   GRENADIER VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   GRENADIER APPLIED STATE
   ========================= */

.grenadier-1-tier-7.applied img,
.gr-2-tier-9.applied img,
.gr-3-tier-11.applied img,
.gr-4-tier-11.applied img,
.gr-5-tier-11.applied img {
  animation: node-breathe-demo 3s ease-in-out infinite;
}

.gr-2-minor-node-1.applied img,
.gr-2-minor-node-2.applied img,
.gr-2-minor-node-3.applied img,
.gr-2-minor-node-4.applied img,
.gr-2-minor-node-5.applied img {
  animation: node-breathe-demo 3s ease-in-out infinite;
}

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

/* ============================================================
   MINE SETTER NODES
   ============================================================ */

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

.minesetter-1-tier-7 img {
  width: 38px;
  height: auto;
}

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

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

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

.minesetter-1-tier-7 .demo-label {
  font-size: 6px;
  margin-top: -8px;
}

.ms-2-tier-9 .demo-label {
  margin-top: 6px;
}

/* =========================
   PLACEMENT: MINE SETTER
   ========================= */

.minesetter-1-tier-7 { left: 1243px; top: 842px; }
.ms-2-tier-9         { left: 1335px; top: 844px; }
.ms-3-tier-11        { left: 1404px; top: 823px; }
.ms-4-tier-11        { left: 1408px; top: 857px; }

.ms-2-minor-node-1   { left: 1330px; top: 832px; }
.ms-2-minor-node-2   { left: 1341px; top: 826px; }
.ms-2-minor-node-3   { left: 1351px; top: 830px; }
.ms-2-minor-node-4   { left: 1330px; top: 854px; }
.ms-2-minor-node-5   { left: 1343px; top: 855px; }
.ms-2-minor-node-6   { left: 1355px; top: 852px; }

/* =========================
   MINE SETTER VISUAL EMPHASIS
   ========================= */

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

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

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

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

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

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

/* =========================
   MINE SETTER APPLIED STATE
   ========================= */

.minesetter-1-tier-7.applied img,
.ms-2-tier-9.applied img,
.ms-3-tier-11.applied img,
.ms-4-tier-11.applied img {
  animation: node-breathe-demo 3s ease-in-out infinite;
}

.ms-2-minor-node-1.applied img,
.ms-2-minor-node-2.applied img,
.ms-2-minor-node-3.applied img,
.ms-2-minor-node-4.applied img,
.ms-2-minor-node-5.applied img,
.ms-2-minor-node-6.applied img {
  animation: node-breathe-demo 3s ease-in-out infinite;
}

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