/* --- Population Bar Polish (Holo Button Feel) --- */
#zonePanel .hzDist{
  position: relative;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#zonePanel .hzDist::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}
#zonePanel .hzDist::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), transparent 55%);
  opacity:.45;
  filter: blur(10px);
  pointer-events:none;
}
#zonePanel .hzDist:hover{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.26);
}
#zonePanel .hzDistBar{
  position: relative;
}
/* Slow shimmer scan across the bar */
#zonePanel .hzDistBar::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.10) 60%, transparent 100%);
  transform: translateX(-70%);
  animation: hzScan 6.5s ease-in-out infinite;
  opacity:.45;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes hzScan{
  0%{ transform: translateX(-70%); }
  55%{ transform: translateX(20%); }
  100%{ transform: translateX(70%); }
}
#zonePanel .hzSeg{
  position: relative;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
#zonePanel .hzSeg:hover{
  filter: brightness(1.18) saturate(1.08);
}
#zonePanel .hzSeg:hover{
  transform: translateY(-1px);
}

#zonePanel .hzDistTip{
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 7px 12px 7px 18px;
  border-radius: 12px;
  background: rgba(0,0,0,.74);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.40);
  color: rgba(255,255,255,.94);
  pointer-events: none;
  z-index: 5;
  /* Stylised (B): subtle accent strip + glow */
  --tipAccent: rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06), 0 0 18px var(--tipAccent);
}
#zonePanel .hzDistTip::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 6px;
  background: var(--tipAccent);
  opacity: .95;
}
#zonePanel .hzDistTip::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(0,0,0,.74);
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Segment tooltip (no extra HTML) */
#zonePanel .hzSeg::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: 155%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
#zonePanel .hzSeg::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: 140%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,.72);
  border-left: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  transform: translateX(-50%) rotate(45deg);
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease;
}
#zonePanel .hzSeg:hover::after,
#zonePanel .hzSeg:hover::before{
  opacity: 1;
}
:root{
  /* Defaults (JS overrides these per selected faction) */
  --panelAccent: #FFAA46;
  --panelAccent2: #FFD37A;
  --panelAccentA: rgba(255,170,70,.55);
  --panelAccentA2: rgba(255,170,70,.22);
}

.stage{
  position:relative;
  height: auto;
  min-height: calc(100vh - 56px);
  padding-bottom: 28px;
  padding: 22px 28px;
}

/* (Removed) HomeZone quick strip above planet — reclaimed space for the BodSphere. */

/* Planet bottom-centre */
.planetWrap{
  position:absolute;
  /* Align planet with the right column gutter */
  right: 28px;
  bottom: 18px;
  left: auto;
  transform: none;
  /* Match the right-column panel width without overpowering layout */
  width: 420px;
  height: 420px;
  pointer-events:auto;
  z-index: 0;
  opacity: .95;
  overflow: visible;
}

/* Soft radial “halo” around the planet */
.planetWrap::before{
  content:"";
  position:absolute;
  inset:-62px;
  background:
    radial-gradient(closest-side,
      rgba(120,180,255,.20) 0%,
      rgba(140,90,255,.14) 38%,
      rgba(120,180,255,.06) 56%,
      transparent 72%);
  filter: blur(10px);
  z-index:0;
  pointer-events:none;
}

/* Contained “atmosphere ring” */
.planetWrap::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  box-shadow:
    0 0 26px rgba(120,180,255,.20),
    0 0 60px rgba(140,90,255,.12),
    inset 0 0 80px rgba(0,0,0,.58);
  z-index:2;
  pointer-events:none;
}

#planetCanvas{
  width:100%;
  height:100%;
  display:block;
  border-radius: 999px;
  box-shadow: 0 30px 90px rgba(0,0,0,.60);
  position:relative;
  z-index:1;
  cursor: grab;
}

.planetWrap.is-grabbing #planetCanvas{ cursor: grabbing; }

.dragPill{
  position:absolute;
  left:50%;
  bottom:-16px;
  transform:translateX(-50%);
  padding:6px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.85);
  user-select:none;
  pointer-events:none;
}

/* Info panel top-right */
.panelWrap{
  position:absolute;
  top: 28px;
  right: 28px;
  /* Thinner right column so the swarm has more space */
  width: 420px;
  z-index: 3;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.panel{ padding: 18px 18px 14px; }
.panel h2{ margin:4px 0 6px; font-size: 22px; }
.panel .kicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.65) }
.panel .desc{ color: rgba(255,255,255,.82); line-height:1.35; font-size: 13px; margin: 8px 0 12px; }
.panel .chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); font-size:12px; color: rgba(255,255,255,.85); }
.dot{width:8px; height:8px; border-radius:99px; background:var(--accent)}
.stack{display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 12px;}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* Swarm area (big interactive field) */
.swarm{
  position:absolute;
  top: 28px;
  left: 28px;
  /* Leave extra space for the premium pop-out */
  /* Must match panelWrap width + spacing */
  /* Match panelWrap width (420) + right gutter (28) + a little breathing room */
  /* Match the right panel width + gutter (do NOT reserve extra dock space) */
  right: 472px; /* 420 panel + 28 gutter + 24 tidy spacing */
  bottom: 28px; /* planet overlays; no reserved space */
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(16,20,27,.34), rgba(16,20,27,.10));
  backdrop-filter: blur(10px);
  overflow:hidden;

  z-index: 1;
}

/* BuddiUp dock positioning is defined later with the BuddiUp component styles */


.swarmHeader{
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.swarmHeaderRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.swarmRight{
  display:flex;
  flex-direction: column;
  align-items:flex-end;
  gap: 10px;
  min-width: 0;
}
.swarmKicker{ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.swarmMeta{ font-size: 12px; color: rgba(255,255,255,.78); white-space:nowrap; }
.swarmHint{
  display:none;
}

.swarmMetaRow{ display:flex; align-items:center; gap:10px; }
.swarmMetaLogo{ height:18px; width:auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); opacity:.95; }
.swarmMetaTitle{ font-weight:700; font-size:12px; color: rgba(255,255,255,.88); }
.swarmMetaSub{ font-size:11px; color: rgba(255,255,255,.62); }

/* Bigger, steadier faction badge on the right of the swarm header */
.swarmBadge{
  display:flex;
  align-items:center;
  gap:10px;
  /* Standalone logo (no pill) so it never visually "connects" to the
     top-right discovered counter in the header strip. */
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
}
.swarmBadge img{ height:64px; width:auto; display:block; object-fit:contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.swarmBadge img{ max-width: min(260px, calc(100vw - 520px)); }
.swarmCount{ display:none; }

/* Park the faction badge in the top-right corner of the swarm pane (outside header height) */
.swarmBadgeCorner{
  position:absolute;
  /* Keep it clearly separate from the slim header strip (KNOWN BODS / 69 discovered)
     but park it in the *swarm pane* corner (not in the header bar). */
  top: 36px;
  left: 18px;
  z-index: 5;
}

/* Ambient spores / particles behind the Swarm bubbles (decorative layer)
   Implemented as pseudo-elements on .swarmField so JS can freely clear/rebuild
   bubbles without ever deleting the particle layer. */

:root{
  /* Main intensity dial (raise/lower only this if needed) */
  --swarm-particles-opacity: 0.14;
  --swarm-particles-color: rgba(76,217,100,1);
}

.swarmField{
  position:relative;
  z-index: 2;
  position:absolute;
  left:0; right:0;
  top: 44px;
  bottom:0;
  overflow:hidden;
  isolation:isolate;
}

/* Particle layers (behind bubbles) */
.swarmField::before,
.swarmField::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index: 0;
  opacity: var(--swarm-particles-opacity);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.swarmField::before{
  background-image:
    
    /* ORIGINAL MAP */
    radial-gradient(circle at 83% 16%, rgba(255,255,255,0.04) 1px, transparent 6px),
    radial-gradient(circle at 88% 96%, rgba(76,217,100,0.10) 1px, transparent 5px),
    radial-gradient(circle at 29% 31%, rgba(76,217,100,0.08) 1px, transparent 6px),
    radial-gradient(circle at 71% 55%, rgba(76,217,100,0.18) 1.2px, transparent 5px),
    radial-gradient(circle at 22% 91%, rgba(76,217,100,0.12) 1px, transparent 6px),
    radial-gradient(circle at 15% 13%, rgba(76,217,100,0.14) 1px, transparent 5px),
    radial-gradient(circle at 7% 95%, rgba(76,217,100,0.10) 1.2px, transparent 5px),
    radial-gradient(circle at 39% 82%, rgba(76,217,100,0.20) 1.1px, transparent 6px),
    radial-gradient(circle at 7% 86%, rgba(76,217,100,0.12) 1px, transparent 5px),
    radial-gradient(circle at 14% 50%, rgba(76,217,100,0.18) 1px, transparent 6px),
    /* DUPLICATE MAP (offset slightly so it doesn't look grid-like) */
    radial-gradient(circle at 12% 18%, rgba(76,217,100,0.12) 1px, transparent 6px),
    radial-gradient(circle at 44% 76%, rgba(76,217,100,0.18) 1px, transparent 6px),
    radial-gradient(circle at 66% 12%, rgba(255,255,255,0.05) 1px, transparent 6px),
    radial-gradient(circle at 91% 43%, rgba(76,217,100,0.14) 1px, transparent 5px),
    radial-gradient(circle at 53% 90%, rgba(76,217,100,0.16) 1px, transparent 6px),
    radial-gradient(circle at 4% 62%, rgba(76,217,100,0.11) 1px, transparent 5px),
    radial-gradient(circle at 74% 37%, rgba(76,217,100,0.17) 1px, transparent 6px),
    radial-gradient(circle at 32% 59%, rgba(76,217,100,0.13) 1px, transparent 5px),
    radial-gradient(circle at 85% 73%, rgba(76,217,100,0.15) 1px, transparent 6px),
    radial-gradient(circle at 58% 41%, rgba(76,217,100,0.19) 1px, transparent 6px),
    /* ORIGINAL MAP */
    radial-gradient(circle at 92% 29%, rgba(255,255,255,0.04) 1px, transparent 6px),
    radial-gradient(circle at 97% 9%, rgba(76,217,100,0.10) 1px, transparent 5px),
    radial-gradient(circle at 38% 44%, rgba(76,217,100,0.08) 1px, transparent 6px),
    radial-gradient(circle at 80% 68%, rgba(76,217,100,0.18) 1.2px, transparent 5px),
    radial-gradient(circle at 31% 4%, rgba(76,217,100,0.12) 1px, transparent 6px),
    radial-gradient(circle at 24% 26%, rgba(76,217,100,0.14) 1px, transparent 5px),
    radial-gradient(circle at 16% 8%, rgba(76,217,100,0.10) 1.2px, transparent 5px),
    radial-gradient(circle at 48% 95%, rgba(76,217,100,0.20) 1.1px, transparent 6px),
    radial-gradient(circle at 16% 99%, rgba(76,217,100,0.12) 1px, transparent 5px),
    radial-gradient(circle at 23% 63%, rgba(76,217,100,0.18) 1px, transparent 6px),
    /* DUPLICATE MAP (offset slightly so it doesn't look grid-like) */
    radial-gradient(circle at 21% 31%, rgba(76,217,100,0.12) 1px, transparent 6px),
    radial-gradient(circle at 53% 89%, rgba(76,217,100,0.18) 1px, transparent 6px),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,0.05) 1px, transparent 6px),
    radial-gradient(circle at 0% 56%, rgba(76,217,100,0.14) 1px, transparent 5px),
    radial-gradient(circle at 62% 3%, rgba(76,217,100,0.16) 1px, transparent 6px),
    radial-gradient(circle at 13% 75%, rgba(76,217,100,0.11) 1px, transparent 5px),
    radial-gradient(circle at 83% 50%, rgba(76,217,100,0.17) 1px, transparent 6px),
    radial-gradient(circle at 41% 72%, rgba(76,217,100,0.13) 1px, transparent 5px),
    radial-gradient(circle at 94% 86%, rgba(76,217,100,0.15) 1px, transparent 6px),
    radial-gradient(circle at 67% 54%, rgba(76,217,100,0.19) 1px, transparent 6px),
    /* ORIGINAL MAP */
    radial-gradient(circle at 6% 23%, rgba(255,255,255,0.04) 1px, transparent 6px),
    radial-gradient(circle at 11% 3%, rgba(76,217,100,0.10) 1px, transparent 5px),
    radial-gradient(circle at 52% 38%, rgba(76,217,100,0.08) 1px, transparent 6px),
    radial-gradient(circle at 94% 62%, rgba(76,217,100,0.18) 1.2px, transparent 5px),
    radial-gradient(circle at 45% 98%, rgba(76,217,100,0.12) 1px, transparent 6px),
    radial-gradient(circle at 38% 20%, rgba(76,217,100,0.14) 1px, transparent 5px),
    radial-gradient(circle at 30% 2%, rgba(76,217,100,0.10) 1.2px, transparent 5px),
    radial-gradient(circle at 62% 89%, rgba(76,217,100,0.20) 1.1px, transparent 6px),
    radial-gradient(circle at 30% 93%, rgba(76,217,100,0.12) 1px, transparent 5px),
    radial-gradient(circle at 37% 57%, rgba(76,217,100,0.18) 1px, transparent 6px),
    /* DUPLICATE MAP (offset slightly so it doesn't look grid-like) */
    radial-gradient(circle at 35% 25%, rgba(76,217,100,0.12) 1px, transparent 6px),
    radial-gradient(circle at 67% 83%, rgba(76,217,100,0.18) 1px, transparent 6px),
    radial-gradient(circle at 89% 19%, rgba(255,255,255,0.05) 1px, transparent 6px),
    radial-gradient(circle at 14% 50%, rgba(76,217,100,0.14) 1px, transparent 5px),
    radial-gradient(circle at 76% 97%, rgba(76,217,100,0.16) 1px, transparent 6px),
    radial-gradient(circle at 27% 69%, rgba(76,217,100,0.11) 1px, transparent 5px),
    radial-gradient(circle at 97% 44%, rgba(76,217,100,0.17) 1px, transparent 6px),
    radial-gradient(circle at 55% 66%, rgba(76,217,100,0.13) 1px, transparent 5px),
    radial-gradient(circle at 8% 80%, rgba(76,217,100,0.15) 1px, transparent 6px),
    radial-gradient(circle at 81% 48%, rgba(76,217,100,0.19) 1px, transparent 6px)
;

  filter: blur(0.8px);
  animation: swarm-drift-1 42s linear infinite;
}

.swarmField::after{
  /* Softer, larger motes for depth */
  background-image:
    radial-gradient(circle at 85% 69%, rgba(255,255,255,0.07) 2.5px, transparent 14px),
    radial-gradient(circle at 19% 35%, rgba(255,255,255,0.04) 2.9px, transparent 12px),
    radial-gradient(circle at 79% 28%, rgba(76,217,100,0.06) 3.0px, transparent 12px),
    radial-gradient(circle at 64% 34%, rgba(76,217,100,0.11) 2.1px, transparent 13px),
    radial-gradient(circle at 37% 7%, rgba(255,255,255,0.07) 3.0px, transparent 12px),
    radial-gradient(circle at 96% 58%, rgba(76,217,100,0.07) 2.0px, transparent 10px),
    radial-gradient(circle at 90% 21%, rgba(76,217,100,0.11) 2.9px, transparent 11px),
    radial-gradient(circle at 18% 7%, rgba(76,217,100,0.11) 3.3px, transparent 15px),
    radial-gradient(circle at 47% 28%, rgba(76,217,100,0.09) 2.6px, transparent 13px),
    radial-gradient(circle at 54% 81%, rgba(76,217,100,0.11) 2.4px, transparent 11px),
    radial-gradient(circle at 24% 54%, rgba(255,255,255,0.07) 2.5px, transparent 16px),
    radial-gradient(circle at 87% 96%, rgba(76,217,100,0.06) 3.3px, transparent 11px),
    radial-gradient(circle at 6% 62%, rgba(255,255,255,0.07) 2.7px, transparent 12px),
    radial-gradient(circle at 31% 30%, rgba(255,255,255,0.04) 2.5px, transparent 15px),
    radial-gradient(circle at 37% 46%, rgba(76,217,100,0.07) 3.6px, transparent 13px),
    radial-gradient(circle at 5% 16%, rgba(76,217,100,0.06) 2.9px, transparent 16px),
    radial-gradient(circle at 6% 15%, rgba(76,217,100,0.07) 3.3px, transparent 13px),
    radial-gradient(circle at 67% 16%, rgba(76,217,100,0.09) 2.4px, transparent 14px);
  filter: blur(3.2px) saturate(.9);
  opacity: calc(var(--swarm-particles-opacity) * .75);
  animation: swarm-drift-2 86s linear infinite;
}

@keyframes swarm-drift-1{
  from{ transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
  to  { transform: translate3d(8%,-20%,0) rotate(10deg); opacity: .96; }
}

@keyframes swarm-drift-2{
  from{ transform: translate3d(0,0,0) scale(1); opacity: .9; }
  to  { transform: translate3d(-10%,-34%,0) scale(1.03); opacity: .82; }
}

@media (prefers-reduced-motion: reduce){
  .swarmField::before,
  .swarmField::after{
    animation: none;
    opacity: calc(var(--swarm-particles-opacity) * .6);
  }
}

.swarmBubble{
  /* Wrapper only: positioned via JS transform translate3d(x,y,0) */
  --accent: var(--panelAccent);
  --accent2: var(--panelAccent2);
  --accentA: var(--panelAccentA);
  --accentA2: var(--panelAccentA2);
  position:absolute;
  left:0;
  top:0;
  cursor:pointer;
  user-select:none;
  will-change: transform;
  touch-action: none;
  z-index: 1;
}

/* Improve click accuracy when bubbles overlap: hovered/selected should sit above neighbours */
.swarmBubble:hover{ z-index: 3; }
.swarmBubble.isSelected{ z-index: 4; }

.bubbleCore{
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: #000;
  border: 2px solid var(--accentA2);
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 10px var(--accentA2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  /* Center the core around the wrapper's (x,y) point */
  transform: translate(-50%, -50%);
  transition: transform .10s ease, filter .10s ease, box-shadow .10s ease, border-color .10s ease;
}

.bubbleCore img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.swarmBubble img{ width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)); }

/* Hover: subtle glow + tiny grow (like the old build, but restrained) */
.swarmBubble:hover .bubbleCore{
  filter: brightness(1.06);
  border-color: var(--accent);
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    0 0 0 2px rgba(255,255,255,.10),
    0 0 14px var(--accentA);
  transform: translate(-50%, -50%) scale(1.04);
}

/* Selected: bigger than hover, bold rim, minimal glow */
.swarmBubble.isSelected .bubbleCore{
  /* Match the pop-out border weight (single clean rim, minimal glow). */
  border-color: transparent;
  box-shadow:
    0 0 0 3px var(--accent),
    0 18px 40px rgba(0,0,0,.55);
  transform: translate(-50%, -50%) scale(1.09);
}

/* Click feedback: a subtle pulse ring (kept restrained to match the UI) */
.swarmBubble.isSelected .bubbleCore::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border: 3px solid var(--accent);
  opacity:0;
  pointer-events:none;
  animation: bubblePulse 900ms ease-out 1;
}

@keyframes bubblePulse{
  0%{ transform: scale(0.96); opacity: .35; }
  60%{ opacity: .18; }
  100%{ transform: scale(1.10); opacity: 0; }
}
.swarmLabel{
  position:absolute;
  left:50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255,255,255,.80);
  white-space: nowrap;
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events:none;
}
.swarmBubble:hover .swarmLabel{ opacity: 1; }

/* Docked Bod pop-out */
.bodPanel{
  overflow: hidden;

  --accent: var(--panelAccent);
  --accent2: var(--panelAccent2);
  --accentA: var(--panelAccentA);
  --accentA2: var(--panelAccentA2);
  margin-top: 0px;
  padding: 10px;
  position:relative;
  container-type: inline-size; /* enables cqw units for responsive media-height math */
  opacity:1;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28,34,44,.86), rgba(18,22,28,.78));
  /* Bolder faction accent so the panel reads as linked to the selected bubble */
  border: 3px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08);
/* Keep the card stable so it never "pops" in size when switching Bods */
  height: 680px;
  display:flex;
  flex-direction:column;
}

/* Subtle top accent strip (premium, helps tie selection to panel) */
/* Make the close + nav controls always visible (above the video pane) */
.bodFloatControls{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  z-index:12;
}
.bodFloatControls .iconBtn{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.bodFloatControls .iconBtn:hover{ background: rgba(0,0,0,.34); }

/* Keeps the panel from visually "jumping" when paging through bods */
.bodPanel.updating{ opacity:0; transition: opacity 120ms ease; }
.bodClose{display:none !important;}

.miniNav{
  position:absolute;
  width:40px;
  height:40px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.85);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  opacity:.85;
  z-index: 20;
  /* Placement: bottom corners of the whole pop-out card */
  bottom: 16px;
  top: auto;
}
.miniNav:hover{ opacity:1; }
.miniNavLeft{ left:16px; }
.miniNavRight{ right:16px; }
.bodMedia{
  border-radius: 16px;
  overflow:hidden;
  background: rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  aspect-ratio: 1 / 1;  z-index: 20; /* keep media above KIT drawer */
}

.bodMedia video,
.bodMedia img{
  width:100%;
  height:100%;
  /* Square clips: fill the frame like a game card */
  object-fit: cover;
  display:block;
  padding: 0;
}
.bodMedia video{ background: rgba(0,0,0,.20); }
.bodInfo{ padding: 12px 14px 132px; display:flex; flex-direction:column; flex:1; min-height:0; }

/* Pop-out uses the logo, so hide the repeated faction text */
#bodFaction{ display:none; }
.bodBrand{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 2px; }

/* Role + KIT button */
.bodRoleWrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.kitBtn{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.kitBtn:hover{
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 0 2px var(--accentA2);
}
.kitBtn:active{ transform: translateY(1px); }

.kitBtn::after{
  content:"▸";
  margin-left: 2px;
  opacity: .85;
}
.kitBtn[data-open="1"]::after{ content:"▾"; }
.kitIcon{ font-size: 12px; line-height: 1; }
.bodPanel.kitOpen .kitBtn{
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accentA), rgba(0,0,0,.22));
}

/* Slide-up KIT drawer — sits ABOVE the bottom stats + arrows so nothing overlaps */
/* Slide-up KIT drawer — Snapshot only (no scrollbars) */
.kitDrawer{
    box-sizing: border-box;
position:absolute;
  left: 14px;
  right: 14px;
  top: calc(10px + 100cqw);  /* start at bottom of square media */
  bottom: 72px;           /* clears the stat pips + arrows area */
  /* Close button is overlaid, so it shouldn't take layout space. */
  padding: 16px 14px 16px;
  border-radius: 14px;
  /* Match BuddiBod pop-out outline: faction colour + same stroke width */
  border: 3px solid var(--accent);
  background: rgba(12,16,24,0.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 18px 40px rgba(0,0,0,.42);
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  overflow: visible;      /* no scroll */
  max-height: none;       /* no scroll */
  z-index: 15;            /* sits below .bodMedia (z-index:20) */
}

.kitClose{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 28px;            /* smaller */
  height: 28px;
  border-radius: 999px;   /* circular */
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
  z-index: 10;
}
.kitClose:hover{ border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.32), 0 0 0 2px var(--accentA2); }
.kitClose:active{ transform: translateY(1px); }

.bodPanel.kitOpen .kitDrawer{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.kitRows{
  display:flex;
  flex-direction:column;
  gap: 10px;
  /* Leave room so the top-right close button never overlaps text */
  padding-right: 44px;
}

.kitSection{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12px;            /* stronger title */
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  position: relative;
}
.kitSection::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accentA2), transparent);
  opacity: .9;
}
.kitSection:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.kitRow{
  display:grid;
  grid-template-columns: minmax(78px, 92px) 1fr;
  gap: 12px;
  align-items:flex-start;
}

.kitRow.kitRow--solo{
  grid-template-columns: 1fr;
}

.kitKey{
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding-top: 2px;
  white-space:nowrap;
}

.kitVal{
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.90);
  min-width: 0;
  word-break: break-word;
}

/* DNA row (Kit identity) */
.kitDnaRow { align-items: center; }
.kitDnaPills { display: flex; flex-wrap: wrap; gap: 8px; }
.dnaPill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
}
.dnaPill .dnaIcon{ display: inline-flex; }
.dnaPill svg{ width: 14px; height: 14px; opacity: .9; }
.dnaPill .dnaText{ transform: translateY(-.2px); }



/* When KIT is open, hide the normal description so the panel stays clean */
.bodPanel.kitOpen .bodDesc{
  opacity: 0;
}

.factionMark{ display:flex; align-items:center; gap:10px; min-width:0; }
#swarmFactionLogo{ width:auto; height:84px; object-fit:contain; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.bodFactionLogo{ width:auto; height:30px; object-fit:contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.factionText{ display:none; }
.bodRole{ font-size: 11px; letter-spacing:.14em; text-transform: uppercase; color: rgba(210,235,255,.95); background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10); padding: 6px 10px; border-radius:999px; white-space:nowrap; }
.bodName{ margin: 6px 0 6px; font-size: 20px; }
.bodDesc{
  margin: 0 0 10px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.40;
  /* No scrollbars — clamp the copy */
  overflow: hidden;
  display: -webkit-box;
  /* Give more room now that BuddiUp action is anchored lower */
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  /* Always show at least ~2 lines worth of height */
  min-height: calc(1.40em * 2);
  position: relative;
  z-index: 5;
}
.pipStats{
  /* Center the stats between the bottom nav buttons, giving the description max space */
  position:absolute;
  left: 84px;   /* leave room for left arrow */
  right: 84px;  /* leave room for right arrow */
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap:4px;      /* tighter vertical spacing */

  z-index: 30;   /* keep tooltips above KIT drawer */
  overflow: visible;
}
.pipRow{
  width: 100%;
  max-width: 360px;  /* keeps the pips compact + centered */
  margin: 0 auto;
  display:grid;
  grid-template-columns: 52px 1fr;
  align-items:center;
  gap:10px;
}
.pipLabel{
  display:flex;
  align-items:center;
  gap:6px;
 font-size: 10px; letter-spacing:.14em; text-transform: uppercase; color: rgba(255,255,255,.70); }

/* Hover tooltip for MIND / BODY / SOUL — styled like the Homezone population bar */
.pipLabel[data-tip]{
  position: relative;
  cursor: help;
  /* default accent (overridden per label) */
  --tipAccent: rgba(255,255,255,.18);
}
/* Accent per pillar */
.pipLabel--mind{ --tipAccent: rgba(83,179,255,.28); }
.pipLabel--body{ --tipAccent: rgba(255,170,70,.28); }
.pipLabel--soul{ --tipAccent: rgba(255,79,209,.26); }

/* Disable the old pseudo-element tooltip (we now use the floating .pipTip) */
.pipLabel[data-tip]::after,
.pipLabel[data-tip]::before{ display:none !important; }

/* Floating stat tooltip — wide glass bubble + arrow that points at the hovered stat */
.pipTip{
  position: absolute;
  left: 12px;
  top: 0;
  width: min(360px, calc(100% - 24px));
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
  --tipAccent: rgba(255,255,255,.18);
  --arrowX: 50%;
}
.pipTip.show{ opacity: 1; transform: translateY(0); }

.pipTipInner{
  position: relative;
  white-space: normal;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1.25;
  padding: 10px 12px 10px 18px;
  border-radius: 14px;
  color: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 22px var(--tipAccent);
  overflow: visible;
}
.pipTipInner::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 8px;
  background: var(--tipAccent);
  opacity: .95;
}
.pipTipInner::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 13px;
  background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 55%);
  opacity: .35;
  pointer-events:none;
}

/* Two-column tooltip layout (stat + icon on the left, explanation on the right) */
.pipTipContent{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.pipTipCol{ display:flex; }
.pipTipCol--left{
  flex: 0 0 92px;
  align-items: center;
  justify-content: center;
}
.pipTipStat{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}
.pipTipIcon{
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
.pipTipName{
  font-size: 11px;
}
.pipTipCol--right{
  flex: 1 1 auto;
  align-items: center;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.pipTipText{
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}

\.pipTipArrow{
  position: absolute;
  left: var(--arrowX);
  bottom: -8px;
  width: 18px;
  height: 10px;
  background: rgba(0,0,0,.55);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  border: 1px solid rgba(255,255,255,.18);
  border-top: none;
  border-left: none;
  border-right: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pips{ display:flex; gap:4px; }
.pip{ flex:1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.08); overflow:hidden; }
.pip.on{ background: linear-gradient(90deg, rgba(120,200,255,.85), rgba(255,170,70,.9)); border-color: rgba(255,255,255,.18); }

/* When inside the docked panel, use the selected faction accent for stat fills */
.bodPanel .pip.on{ background: linear-gradient(90deg, var(--accent, #FFAA46), var(--accent2, #FFD37A)); }

/* Pop-out wrapper padding tweak (base .card padding is a bit chunky for 1:1 MP4) */
.bodDock{ padding: 8px; }

.versionTag{ position:fixed; left:12px; bottom:10px; color: rgba(255,255,255,.35); font-size:11px; }

@media (max-width: 1200px){
  .planetWrap{
  position:absolute;
  right: 34px;
  bottom: 26px;
  left: auto;
  transform: none;
  width: 320px;
  height: 320px;
  pointer-events:auto;
  z-index: 0;
  opacity: .92;
}
  .panelWrap{width: 400px; right: 18px;}
  .swarm{right: 450px;}
}

@media (max-width: 920px){
  .panelWrap{position:relative; top:auto; right:auto; width: min(520px, 92vw); margin: 0 auto;}
  .swarm{position:relative; top:auto; left:auto; right:auto; bottom:auto; width:min(760px, 92vw); height: 420px; margin: 14px auto 0;}
  .planetWrap{
  position:absolute;
  right: 34px;
  bottom: 26px;
  left: auto;
  transform: none;
  width: 340px;
  height: 340px;
  pointer-events:auto;
  z-index: 0;
  opacity: .92;
}
  .stage{height:auto; min-height: calc(100vh - 64px); padding-bottom: 28px;}
}

/* If the discovered text is empty, don't reserve space */
.swarmMeta:empty{ display:none; }


/* Fix14: Swap right-column order so Bod panel sits above HomeZones */
#bodPanel{ order: 1; }
#zonePanel{ 
  order: 2; 
  min-height: 214px; 
  display:flex; 
  flex-direction:column; 
  /* Tighten vertical whitespace inside the panel */
  padding-top: 12px;
  padding-bottom: 8px; 
}


/* HomeZones panel polish */
#zonePanel .kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  /* Nudge header up slightly to free room below */
  margin-top: -6px;
}
#zonePanel .kicker::after{
  content:"BODSPHERE";
  font-size:10px;
  letter-spacing:.22em;
  opacity:.55;
}

/* If the HomeZone subheader is empty, don't reserve space */
.hzSub:empty{ display:none; }
#zonePanel h2{
  font-size: 20px;
  margin-top: 6px;
}
#zonePanel .desc{
  line-height: 1.35;
}
#zonePanel .actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
#zonePanel .actions .btn{
  justify-content:center;
  padding: 12px 10px;
}
#zonePanel #viewBodsBtn{
  grid-column: 1 / -1;
}
#zonePanel .stack{
  margin-top: 10px;
}
#zonePanel .chip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
}


.pipIcon{ font-size: 12px; line-height: 1; opacity: .9; }

/* === POPFIX10: Rarity/Class/KIT row alignment === */
/* Hide the old faction text row element in header area (logo now overlays media) */
.bodBrand .factionMark{ display:none; }

/* Make the role wrap span the full width of the info area */
.bodBrand{ display:block !important; }
.bodRoleWrap{
  width: 100% !important;
  display:grid !important;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 12px;
  padding: 0 18px;           /* aligns with name/desc left edge */
  box-sizing: border-box;
}

/* Rarity left, Class center, KIT right */
.bodRarity{ justify-self:start; }
.bodRole{ justify-self:center; text-align:center; margin:0 !important; }
#kitBtn, .kitBtn{ justify-self:end; }

.bodRarity{
  white-space:nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* Faction logo overlay on media: readable, still never clips */
.bodMedia{ position:relative; overflow:hidden; }
#bodFactionLogo{
  position:absolute;
  top: 12px;
  left: 12px;
  height: clamp(22px, 4vw, 36px) !important;
  width:auto !important;
  max-width: 26% !important;
  max-height: 36px !important;
  object-fit: contain;
  pointer-events:none;
  z-index: 6;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}

/* Nav arrows hover/focus glow to match KIT close vibe */
.miniNav:hover,
.miniNav:focus-visible{
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0,0,0,.32), 0 0 0 2px var(--accentA2);
  outline: none;
}

/* === POPFIX11: restore faction logo overlay + push pills to video-frame edges === */

/* Hide the old in-header faction block (we use overlay on media now) */
.factionMark{ display:none !important; }

/* Make the top pills row span full available width (aligned to panel/media inset) */
.bodBrand{ display:block !important; }
.bodRoleWrap{
  display:grid !important;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bodRarity{ justify-self:start; }
.bodRole{ justify-self:center; margin:0 !important; text-align:center; white-space:nowrap; }
.kitBtn{ justify-self:end; }

/* Overlay logo in top-left of media (bigger than before but capped; never clips) */
.bodMedia{ position:relative; overflow:hidden; }
#bodFactionLogoOverlay{
  position:absolute;
  top: 12px;
  left: 12px;
  height: clamp(22px, 4.2vw, 34px);
  width: auto;
  max-width: 26%;
  max-height: 34px;
  object-fit: contain;
  pointer-events:none;
  z-index: 7;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}

/* Ensure the original logo (if still used elsewhere) doesn't take space */
#bodFactionLogo{ display:none !important; }

/* === POPFIX12: Rarity Colour Coding === */
.bodRarity[data-rarity="COMMON"]{
  color:#9aa3ad;
  border-color:rgba(154,163,173,.35);
}

.bodRarity[data-rarity="UNCOMMON"]{
  color:#4cd964;
  border-color:rgba(76,217,100,.45);
}

.bodRarity[data-rarity="RARE"]{
  color:#4da3ff;
  border-color:rgba(77,163,255,.45);
}

.bodRarity[data-rarity="EPIC"]{
  color:#b67cff;
  border-color:rgba(182,124,255,.45);
}

.bodRarity[data-rarity="LEGENDARY"]{
  color:#ffcc33;
  border-color:rgba(255,204,51,.55);
}

/* === POPFIX13: subtle rarity pill glow/tint === */
.bodRarity{
  /* base: keep it subtle */
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.bodRarity[data-rarity="COMMON"]{
  background: rgba(154,163,173,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(154,163,173,.12), 0 0 14px rgba(154,163,173,.10);
}

.bodRarity[data-rarity="UNCOMMON"]{
  background: rgba(76,217,100,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(76,217,100,.14), 0 0 18px rgba(76,217,100,.12);
}

.bodRarity[data-rarity="RARE"]{
  background: rgba(77,163,255,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(77,163,255,.14), 0 0 18px rgba(77,163,255,.12);
}

.bodRarity[data-rarity="EPIC"]{
  background: rgba(182,124,255,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(182,124,255,.14), 0 0 20px rgba(182,124,255,.12);
}

.bodRarity[data-rarity="LEGENDARY"]{
  background: rgba(255,204,51,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(255,204,51,.16), 0 0 22px rgba(255,204,51,.14);
}

/* === POPFIX16: Discovered Bods bubble (top-right of swarm pane) === */
.discoveredBubble{
  position:absolute;
  top: 12px;
  right: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  z-index: 20;
  pointer-events: none; /* doesn't block upcoming top-bar buttons */
}
.discoveredBubble .discoveredLabel{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
.discoveredBubble .discoveredCount{
  min-width: 2.2em;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
/* Ensure swarm pane container can anchor absolutely-positioned bubble */
.swarmPane, #swarmPane, .swarmWindow, #swarmWindow{
  position: relative;
}

/* === POPFIX20: combine 'KNOWN BODS' + '69 discovered' into one bubble on top-right of swarm pane header === */
.swarmKicker{ display:none !important; }           /* hides KNOWN BODS */
#swarmMeta{ display:none !important; }             /* hides old "69 discovered" text */

/* bubble layout */
.swarmDiscoveredBubble{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  user-select:none;
}
.swarmDiscoveredLabel{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
.swarmDiscoveredCount{
  min-width: 2.2em;
  text-align:center;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

/* === POPFIX21: position discovered bubble far-right + move faction corner badge down === */

/* Ensure swarm header row behaves like a proper left/right bar */
.swarmHeaderRow{
  display:flex !important;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* Keep left kicker hidden, and force right side to hug the far right */
.swarmRight{
  margin-left: auto !important;
  display:flex !important;
  align-items:center;
  justify-content:flex-end !important;
  gap: 10px;
  width: 100%;
}
.swarmDiscoveredBubble{
  margin-left: auto !important; /* pushes it to the far right */
}

/* The faction badge/logo in the swarm window: move down below the header */
.swarmBadgeCorner{
  top: 56px !important;   /* moved down */
  left: 14px !important;
}

/* === POPFIX22: move discovered bubble into swarm pane + stable 2-digit counter === */

/* Move bubble down into the swarm pane (below header strip) */
.swarmDiscoveredBubble{
  position:absolute !important;
  top: 56px !important;   /* inside swarm pane, under header line */
  right: 14px !important;
  z-index: 60;
}

/* Ensure the count pill doesn't "jump" between 1 and 2 digits */
.swarmDiscoveredCount{
  min-width: 3ch !important;      /* enough for 2 digits */
  font-variant-numeric: tabular-nums;
}

/* === POPFIX23: Top-bar faction buttons (visual only) === */
.swarmKicker{ display:block !important; } /* re-enable (was hidden in earlier fixes) */
.swarmHeaderRow{
  align-items:center;
}

/* faction bar */
.factionBar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.factionBar::-webkit-scrollbar{ display:none; }

.factionBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  cursor: pointer;
  user-select:none;
  white-space: nowrap;
  line-height: 1;
}
.factionBtn .factionText{
  font-weight: 900;
  letter-spacing: .04em;
  font-size: 14px;
  text-transform: uppercase;
}
.factionBtn .factionMark{
  font-size: 14px;
  opacity: .9;
}
.factionBtn:hover,
.factionBtn:focus-visible{
  outline: none;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.10);
}

/* faction colors (text + subtle glow) */
.faction--MAGI{ color:#b67cff; }
.faction--MEXX{ color:#cfd6df; }
.faction--HOLOWZ{ color:#a6e3ff; }
.faction--MEZMAZ{ color:#d09bff; }
.faction--HEXX{ color:var(--fc-HEXX, #ff3d66); }
.faction--SEPTIX{ color:var(--fc-SEPTIX, #d0f53b); }
.faction--TYTANZ{ color:#ff8a2a; }
.faction--JURASIX{ color:#ffb84d; }
.faction--WYLDZ{ color:var(--fc-WYLDZ, #0d7a28); }
.faction--BROOTZ{ color:#ff7a3a; }
.faction--BUGZ{ color:#8bdcff; }
.faction--REEVERZ{ color:#ff4a4a; }

.factionBtn.faction--MAGI:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(182,124,255,.18); }
.factionBtn.faction--TYTANZ:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(255,138,42,.18); }
.factionBtn.faction--SEPTIX:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(118,255,99,.18); }
.factionBtn.faction--REEVERZ:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 18px rgba(255,74,74,.18); }


/* === POPFIX24: Faction buttons visuals (logos, hover outline, locked underline) === */
.factionBar{display:flex;gap:10px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:10px 12px;}
.factionBar::-webkit-scrollbar{display:none;}
.factionBtn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:rgba(255,255,255,.86);backdrop-filter: blur(6px);box-shadow: 0 8px 18px rgba(0,0,0,.18);cursor:pointer;white-space:nowrap;}
.factionBtn .factionText{font-weight:700;letter-spacing:.02em;font-size:13px;}
.factionBtn .factionLogo{width:22px;height:22px;flex:0 0 22px;background-size:contain;background-repeat:no-repeat;background-position:center;filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));opacity:.95;}
.factionBtn::after{content:'';position:absolute;left:14px;right:14px;bottom:-6px;height:3px;border-radius:999px;background:transparent;opacity:0;transform:translateY(2px);transition:opacity .15s ease, transform .15s ease;}
.factionBtn:hover{border-color: var(--factionColor);box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px color-mix(in srgb, var(--factionColor) 55%, transparent);}
.factionBtn.is-active{border-color: var(--factionColor);box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px color-mix(in srgb, var(--factionColor) 65%, transparent);} 
.factionBtn.is-active::after{background: var(--factionColor);opacity:1;transform:translateY(0);} 
.faction--MAGI{--factionColor:#b67cff;}
.faction--MAGI .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%204l6%2018h18l-15%2011%206%2018-15-11-15%2011%206-18L8%2022h18z%22/%3E%3C/svg%3E');}
.faction--MEXX{--factionColor:#7fd0ff;}
.faction--MEXX .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M36%206l2%208a18%2018%200%200%201%208%204l8-2%204%208-6%206a18%2018%200%200%201%200%208l6%206-4%208-8-2a18%2018%200%200%201-8%204l-2%208h-8l-2-8a18%2018%200%200%201-8-4l-8%202-4-8%206-6a18%2018%200%200%201%200-8l-6-6%204-8%208%202a18%2018%200%200%201%208-4l2-8zM32%2024a8%208%200%201%200%200%2016%208%208%200%200%200%200-16z%22/%3E%3C/svg%3E');}
.faction--HOLOWZ{--factionColor:#9bd2ff;}
.faction--HOLOWZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c12%200%2022%2010%2022%2022%200%2012-10%2022-22%2030C20%2050%2010%2040%2010%2028%2010%2016%2020%206%2032%206zm-8%2024a4%204%200%201%200%200%208%204%204%200%200%200%200-8zm16%200a4%204%200%201%200%200%208%204%204%200%200%200%200-8z%22/%3E%3C/svg%3E');}
.faction--MEZMAZ{--factionColor:#d28bff;}
.faction--HEXX{--factionColor:var(--fc-HEXX, #ff3d66);}
.faction--MEZMAZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c8%200%2014%206%2014%2014%200%206-4%2010-8%2013%208%201%2014%208%2014%2016%200%2010-8%2018-20%2018S12%2059%2012%2049c0-8%206-15%2014-16-4-3-8-7-8-13%200-8%206-14%2014-14zm0%2010a4%204%200%201%200%200%208%204%204%200%200%200%200-8z%22/%3E%3C/svg%3E');}
.faction--SEPTIX{--factionColor:var(--fc-SEPTIX, #d0f53b);}
.faction--SEPTIX .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c14%200%2026%2012%2026%2026S46%2058%2032%2058%206%2046%206%2032%2018%206%2032%206zm0%2010a6%206%200%201%200%200%2012%206%206%200%200%200%200-12zm16%2012a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zM16%2028a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zm8%2018a4%204%200%201%200%200%208%204%204%200%200%200%200-8zm16%200a4%204%200%201%200%200%208%204%204%200%200%200%200-8z%22/%3E%3C/svg%3E');}
.faction--TYTANZ{--factionColor:#ff9d3a;}
.faction--TYTANZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206l20%2014-8%2026H20L12%2020%2032%206zm0%2010l-10%207%204%2013h12l4-13-10-7z%22/%3E%3C/svg%3E');}
.faction--JURASIX{--factionColor:#ff7a3a;}
.faction--JURASIX .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M14%2044c6-18%2022-32%2036-30%200%2010-6%2018-16%2022l6%2010-10-2-6%2010-4-10-6%202z%22/%3E%3C/svg%3E');}
.faction--WYLDZ{--factionColor:var(--fc-WYLDZ, #0d7a28);}
.faction--WYLDZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M18%2054c10-8%2010-18%2014-30%204%2012%204%2022%2014%2030-12%202-16%202-28%200zm14-44c4%206%204%2010%200%2016-4-6-4-10%200-16z%22/%3E%3C/svg%3E');}
.faction--BROOTZ{--factionColor:#ff7a2e;}
.faction--BROOTZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M10%2038l10-12%208%206%208-18%2010%2010-10%2010%208%206-12%2014-10-8-10%208z%22/%3E%3C/svg%3E');}
.faction--BUGZ{--factionColor:#62b6ff;}
.faction--BUGZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%2010c8%200%2014%206%2014%2014v6h6v6h-6v6c0%2010-8%2018-14%2018s-14-8-14-18v-6h-6v-6h6v-6c0-8%206-14%2014-14zm0%208a6%206%200%200%200-6%206v2h12v-2a6%206%200%200%200-6-6z%22/%3E%3C/svg%3E');}
.faction--REEVERZ{--factionColor:#ff3a3a;}
.faction--REEVERZ .factionLogo{background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206l10%2010-6%206%2010%2010-6%206%2010%2010-8%208-10-10-6%206-10-10%206-6-10-10%206-6-10-10%208-8%2010%2010%206-6z%22/%3E%3C/svg%3E');}

/* move discovered bod counter down slightly */
.swarmDiscoveredBubble{top:72px !important;}

/* === POPFIX25: move swarm corner elements down + improve faction button hitbox + outline === */

/* Move faction badge (logo) down into swarm window */
.swarmBadgeCorner{
  top: 82px !important;
}

/* Move discovered bubble down into swarm window */
.swarmDiscoveredBubble{
  top: 86px !important;
  right: 14px !important;
}

/* Make faction buttons fully clickable (children won't steal pointer events) */
.factionBtn{ cursor:pointer; }
.factionBtn *{ pointer-events:none; }

/* Crisper single outline on hover/active (avoid double-line feel) */
.factionBtn{
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.factionBtn:hover,
.factionBtn.is-active{
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 2px var(--factionColor);
}

/* === POPFIX26: make faction buttons easy to hit (z-index) + better underline + align discovered bubble === */

/* Bring the whole header controls above any overlays */
.swarmHeaderRow, .swarmRight, .factionBar{
  position: relative;
  z-index: 120;
  pointer-events: auto;
}

/* Ensure the button row itself receives clicks */
.factionBar{ pointer-events:auto; }

/* Make buttons slightly taller + larger click area */
.factionBtn{
  padding: 12px 16px;
}
/* Make sure nothing blocks button clicks */
.factionBtn, .factionBtn *{ pointer-events: auto; }
.factionBtn .factionLogo,
.factionBtn .factionText{ pointer-events:none; } /* keep inner visual elements non-interactive */

/* Underline: thicker + a bit lower so it doesn't kiss the border */
.factionBtn::after{
  bottom: -10px;
  height: 4px;
  left: 12px;
  right: 12px;
}

/* Align discovered bubble vertically with faction badge */
.swarmBadgeCorner{ top: 88px !important; }
.swarmDiscoveredBubble{ top: 88px !important; }

/* === POPFIX27: move faction badge + discovered counter below Buttons Bar === */
.swarmBadgeCorner{ top: 118px !important; }
.swarmDiscoveredBubble{ top: 118px !important; }

/* === POPFIX28: Stable faction button hover/active + reliable hit targets + aligned pane badges === */

/* Keep the buttons bar on top of any overlays so hover/click is never "random" */
#factionBar, .factionBar, .swarmHeaderRow{
  position: relative;
  z-index: 300;
  pointer-events: auto;
}

/* Make each pill fully clickable; prevent inner spans from stealing events */
.factionBtn{
  pointer-events: auto;
}
.factionBtn *{
  pointer-events: none;
}

/* Hover vs Active: hover is temporary, active is locked. Hover never removes active. */
.factionBtn{
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.factionBtn:hover{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 2px var(--factionColor);
}
.factionBtn.is-active{
  border-color: rgba(255,255,255,.26);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 3px var(--factionColor);
}
.factionBtn.is-active:hover{
  /* stays active, but still allows the hovered button to show its hover outline */
  border-color: rgba(255,255,255,.26);
}

/* Underline: a touch thicker + lower, so it reads like the reference */
.factionBtn::after{
  content:'';
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: -12px;
  height: 4px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
}
.factionBtn.is-active::after{
  background: var(--factionColor);
  opacity: 1;
  transform: translateY(0);
}

/* Pane badges: align Faction Logo (left) and Discovered bubble (right) under the Buttons Bar */
.swarmBadgeCorner{
  top: 102px !important;
  left: 14px !important;
  z-index: 200;
}
.swarmDiscoveredBubble{
  top: 102px !important;
  right: 14px !important;
  z-index: 200;
}

/* === POPFIX29: Fix random hover/selection by forcing hover target = button (children non-interactive),
                 crisp single outline, better underline, and adjust pane badge positions === */

/* Ensure the buttons bar is always on top and receives pointer events */
.factionBar{
  position: relative;
  z-index: 500;
  pointer-events: auto;
}

/* Make the whole button the hover/click target (prevents "random" hover on inner spans) */
.factionBar .factionBtn{
  pointer-events: auto !important;
}
.factionBar .factionBtn *{
  pointer-events: none !important;
}

/* Crisp outline: remove border contribution on hover/active (prevents double-line feel) */
.factionBar .factionBtn{
  border: 1px solid rgba(255,255,255,.14);
}
.factionBar .factionBtn:hover,
.factionBar .factionBtn.is-active{
  border-color: transparent !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 2.5px var(--factionColor) !important;
}

/* Underline: slightly longer, thicker, and further below the pill */
.factionBar .factionBtn::after{
  left: 10px !important;
  right: 10px !important;
  height: 5px !important;
  bottom: -12px !important;
}

/* Position badges: move up a touch to match your Positions.png */
.swarmBadgeCorner{
  top: 90px !important;
}
.swarmDiscoveredBubble{
  top: 90px !important;
}


/* === POPFIX30: Nudge Discovered Bods bubble slightly higher into top-right corner === */
.swarmDiscoveredBubble{
  top: 74px !important;  /* moved up for tighter corner alignment */
}



/* === POPFIX31: Discovered Bods bubble up 6px more === */
.swarmDiscoveredBubble{
  top: 68px !important;
}



/* === POPFIX32: Discovered Bods bubble up 4px more === */
.swarmDiscoveredBubble{
  top: 64px !important;
}


/* === POPFIX33: Discovered count turns faction-colour when a faction is selected === */
.swarmDiscoveredBubble{ --discAccent: rgba(255,255,255,.92); }
.swarmDiscoveredCount{
  color: var(--discAccent) !important;
  border-color: color-mix(in srgb, var(--discAccent) 35%, rgba(255,255,255,.10)) !important;
}


/* === POPFIX34: Use PNG faction symbols in buttons === */
.factionBtn{
  display:flex;
  align-items:center;
  justify-content:center;
}

.factionSymbol{
  width:26px;
  height:26px;
  object-fit:contain;
  pointer-events:none;
}



/* === POPFIX35: Scale faction symbols up for better visual balance === */
.factionSymbol{
  width:34px !important;
  height:34px !important;
}



/* === POPFIX36: Scale symbol visually without affecting button layout === */

/* Lock button size explicitly so layout never shifts */
.factionBtn{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
}

/* Scale symbol inside using transform instead of changing box size */
.factionSymbol{
  width:26px !important;
  height:26px !important;
  transform: scale(1.35);
  transform-origin:center;
}



/* HomeZone population distribution bar */
#zonePanel .hzDistWrap{
  margin-top: 14px;
  position: relative;
}
#zonePanel .hzDistLabel{
  font-size:10px;
  letter-spacing:.22em;
  opacity:.55;
  margin: 0 0 8px;
}
#zonePanel .hzDist{
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  padding: 4px;
}
#zonePanel .hzDistBar{
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}
#zonePanel .hzSeg{
  height: 100%;
  min-width: 10px; /* keep tiny populations visible */
}
#zonePanel .hzSeg + .hzSeg{
  box-shadow: -1px 0 0 rgba(0,0,0,.22);
}

/* --- HomeZone Meta (Status + Resources) --- */
#zonePanel .hzMeta{
  /* bring Resources/Meta closer to the content above */
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
#zonePanel .hzResLabel{
  font-size:10px;
  letter-spacing:.22em;
  opacity:.55;
  margin-top: 2px;
}
#zonePanel .hzChips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
#zonePanel .hzPill{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .02em;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#zonePanel .hzPill.is-warn{
  border-color: rgba(255,130,80,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(255,120,80,.10);
}
#zonePanel .hzPill.is-danger{
  border-color: rgba(255,70,90,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 16px rgba(255,70,90,.12);
}
#zonePanel .hzPill.is-good{
  border-color: rgba(120,255,170,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(120,255,170,.10);
}

/* Keep the population bar anchored at the bottom of the HomeZones panel */
#zonePanel #zoneDistWrap{
  margin-top: auto;
}


/* --- Title block stacked layout (chips under name) --- */
#zonePanel .hzTitleBlock{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
#zonePanel .hzTitleBlock h2{
  margin: 0;
}
#zonePanel .hzTitleChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#zonePanel .hzTitleChips:empty{
  display:none;
}

/* --- HomeZone header: name in top-left --- */
#zonePanel .kLeft{ display:flex; flex-direction:column; gap:4px; }
#zonePanel .kLabel{ font-size:10px; letter-spacing:.22em; opacity:.55; }
#zonePanel .kName{ font-size:20px; font-weight:700; }

/* Status row (now below description) */
#zonePanel .hzStatusRow{ margin-top: 10px; }

/* Resources label + chips inline */
#zonePanel .hzResRow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 6px;
}
#zonePanel .hzResRow .hzResLabel{
  margin:0;
  white-space:nowrap;
}
#zonePanel .hzResRow #zoneResRow{
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap: 8px;
  overflow:hidden;
}
/* Planet footer label in unused space */

/* HomeZones badge in the undiscovered hemisphere */
#planetFooterLabel{
  position:absolute;
  left:50%;
  bottom: 44px;               /* sits inside the bottom hemisphere */
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  background: rgba(20,24,34,.42);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  pointer-events:none;
}
#planetPanel{ position: relative; }

/* --- Compact HomeZone header --- */
#zonePanel .kLabel{ display:none; } /* frees space; title carries meaning */
#zonePanel .kName{ font-size: 20px; font-weight: 800; letter-spacing: .02em; text-transform:none; }
#zonePanel .kicker{ padding-bottom: 2px; }

/* Status row under description */
#zonePanel .hzStatusRow{ margin-top: 10px; }

/* Planet badge centered in undiscovered area */
#planetBadge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 70px; /* sits inside lower hemisphere (slightly lower) */
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(10,14,20,0.45);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .38;
  pointer-events:none;
  text-transform:none;
}

/* Chip icons */
#zonePanel .hzPill .hzIcon{
  display:inline-block;
  margin-right:6px;
  opacity:.85;
  transform: translateY(0.5px);
}
#zonePanel .hzStatusRow .hzPill{
  padding: 6px 10px;
  font-size: 10.5px;
}

/* HomeZone title accent (matches selected holo hex) */
:root{ --hz-accent: #9aa3b2; }
#zonePanel #zoneTitle{
  color: var(--hz-accent);
  text-shadow: 0 8px 22px rgba(0,0,0,0.55);
}

.planetBadge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 38px;               /* sits inside the bottom hemisphere */
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  background: rgba(18,22,32,.46);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 26px rgba(0,0,0,.48),
    0 0 28px rgba(120,110,255,.10);
  backdrop-filter: blur(10px);
  pointer-events:none;
  z-index: 6;
}

.spanseBadge{
  position:absolute;
  left:50%;
  top: 56%;
  transform:translate(-50%,-50%) skewX(-10deg);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,210,215,.86);
  background: rgba(40,10,14,.35);
  border: 1px solid rgba(255,90,110,.22);
  box-shadow:
    0 0 18px rgba(255,60,90,.16),
    0 0 42px rgba(255,40,70,.10),
    inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow: 0 0 10px rgba(255,60,90,.25);
  pointer-events:none;
  z-index: 6;
  opacity: .95;
}

/* THE SPANSE label stays, but remove the red scar line through it.
   Preserve the existing planet atmosphere ring (defined earlier). */
.planetWrap::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  box-shadow:
    0 0 26px rgba(120,180,255,.20),
    0 0 60px rgba(140,90,255,.12),
    inset 0 0 80px rgba(0,0,0,.58);
  z-index:2;
  pointer-events:none;
}

/* Resource pills (slightly smaller + icon) */
#zonePanel #zoneResRow .hzPill{
  padding: 6px 10px;
  font-size: 10.5px;
}
#zonePanel #zoneResRow .hzPill .hzIcon{
  opacity: .9;
}

/* --- Zone panel rhythm --- */
#zonePanel .kName{
  margin-top: 2px;
  margin-bottom: 6px;
}
#zonePanel .desc{
  margin-top: 0;
  margin-bottom: 8px;
}
#zonePanel .hzStatusRow{
  margin-top: 0;
  margin-bottom: 8px;
}
#zonePanel .hzMeta{
  margin-top: 0;
  gap: 8px;
}
#zonePanel .hzResRow{
  margin-top: 0;
}
#zonePanel .hzDistWrap{
  margin-top: auto;
  padding-top: 8px;
}

/* Kit drawer outline: faction colour (not rarity) */
.kitDrawer{
  border: 3px solid var(--accent);
}

/* Faction button theme via BB_FACTIONS */
/* Any element with [data-faction="SEPTIX"] can use the same color tokens */
[data-faction]{
  --factionColor: var(--fc-MAGI, #b36bff);
}
[data-faction="SEPTIX"]{ --factionColor: var(--fc-SEPTIX, #d0f53b); }
[data-faction="WYLDZ"]{  --factionColor: var(--fc-WYLDZ,  #0d7a28); }
[data-faction="HOLOWZ"]{ --factionColor: var(--fc-HOLOWZ, #24e0e7); }
[data-faction="MEZMAZ"]{ --factionColor: var(--fc-MEZMAZ, #ff4fd1); }
[data-faction="MEXX"]{   --factionColor: var(--fc-MEXX,   #53b3ff); }
[data-faction="TYTANZ"]{ --factionColor: var(--fc-TYTANZ, #ff8a2a); }
[data-faction="JURASIX"]{--factionColor: var(--fc-JURASIX,#ffb84d); }
[data-faction="BROOTZ"]{ --factionColor: var(--fc-BROOTZ, #ff7a3a); }
[data-faction="BUGZ"]{   --factionColor: var(--fc-BUGZ,   #8bdcff); }
[data-faction="REEVERZ"]{--factionColor: var(--fc-REEVERZ,#ff4a4a); }



/* === RESTORE PIP LABEL TOOLTIPS (CSS-only fallback) ===
   If JS-driven .pipTip tooltips fail or are blocked, this restores hover tooltips
   for MIND / BODY / SOUL labels using the existing data-tip attribute.
*/
.pipLabel[data-tip]{ position: relative; cursor: help; }

.pipLabel[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: 165%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.15;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(12, 14, 18, .92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  z-index: 500;
  transition: opacity .12s ease, transform .12s ease;
}

.pipLabel[data-tip]::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 150%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: rgba(12, 14, 18, .92);
  border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  rotate: 225deg;
  opacity: 0;
  pointer-events: none;
  z-index: 499;
  transition: opacity .12s ease, transform .12s ease;
}

/* Override any previous "display:none !important" rules */
.pipLabel[data-tip]:hover::after,
.pipLabel[data-tip]:hover::before,
.pipLabel[data-tip]:focus-visible::after,
.pipLabel[data-tip]:focus-visible::before{
  display: block !important;
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}




/* =========================================================
   Swarm click accuracy guard
   Ensures no decorative layers intercept pointer events.
   ========================================================= */
.swarm::before,
.swarm::after,
.swarmField::before,
.swarmField::after{
  pointer-events: none !important;
}

.swarm,
.swarmField,
.swarmBubble{
  pointer-events: auto;
}


/* =========================================================
   Swarm click feel regression guard
   Disable heavy decorative particle pseudo-layers that can
   introduce frame lag and make clicks feel "off".
   (CSS-only; restores old build responsiveness.)
   ========================================================= */
.swarmField{ overflow: visible !important; isolation: auto !important; }
.swarmField::before,
.swarmField::after{
  content: none !important;
  animation: none !important;
  filter: none !important;
}



/* =========================================================
   LIGHTWEIGHT SWARM PARTICLES (SAFE FOR HIT TEST)
   ---------------------------------------------------------
   IMPORTANT: Do NOT change .swarmField positioning.
   We only restyle the pseudo layers.
   No blur filters, no blend-modes, no heavy animations.
   Pointer-events disabled. Keeps swarm click responsiveness.
   ========================================================= */

/* Ensure swarm layout stays as designed (some older overrides used !important). */
.swarmField{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 44px !important;
  bottom: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Replace heavy particle backgrounds with a lightweight dust map. */
.swarmField::before,
.swarmField::after{
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  will-change: transform !important;
  z-index: 0 !important;
}

.swarmField::before{
  opacity: .22 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.09) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.05) 0 1px, transparent 2px);
  background-size: 140px 140px, 260px 260px;
  background-position: 0 0, 60px 90px;
  animation: swarmDustDrift 22s linear infinite;
}

.swarmField::after{
  opacity: .14 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 2px);
  background-size: 320px 320px;
  background-position: 120px 40px;
  animation: swarmDustDrift2 30s linear infinite;
}

@keyframes swarmDustDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-70px, 45px, 0); }
}

@keyframes swarmDustDrift2{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(80px, -50px, 0); }
}

@media (prefers-reduced-motion: reduce){
  .swarmField::before,
  .swarmField::after{ animation: none !important; }
}

/* =========================
   BuddiUp quick slots (Explore)
   ========================= */

.buddiUp{
  /* Overlayed INSIDE the swarm (safe: no page/layout rebalance) */
  position: absolute;
  top: 108px;  /* sit just under the header divider (nudged down slightly) */
  right: 14px; /* tuck into swarm padding */
  width: 118px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  z-index: 5;
}

.buddiUpTitle{
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: none;
  opacity: .9;
  text-align: center;
}

.buddiUpSlots{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.buddiUpSlot{
  position: relative;
  width: 118px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  /* Empty slots are neutral; filled slots take the chosen Bod's faction colour */
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(15, 17, 24, .55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: pointer;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.buddiUpSlot:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.40);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 16px 40px rgba(0,0,0,.45);
}

.buddiUpSlot:active{
  transform: translateY(0);
}

.buddiUpSlot .slotLabel{
  position: absolute;
  left: 10px;
  top: 10px;
  font-weight: 900;
  font-size: 26px;
  color: rgba(255,255,255,.55);
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

.buddiUpSlot .slotImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* Mild scale so we clip cleanly inside the rounded box without pixelating */
  transform: scale(1.06) translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform;
  /* Helps soften harsh cutouts on transparent PNG edges */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
  transition: opacity .18s ease;
}

.buddiUpSlot.isFilled .slotImg{ opacity: .95; }
.buddiUpSlot.isFilled .slotLabel{ opacity: .0; }

@keyframes buddiGlowPulse{
  0%{ box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35); }
  50%{ box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 16px 44px rgba(0,0,0,.45), 0 0 22px var(--slotGlow, rgba(255,255,255,.12)); }
  100%{ box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 12px 36px rgba(0,0,0,.40); }
}

.buddiUpSlot.isFilled{ animation: buddiGlowPulse 2.2s ease-in-out infinite; }

.buddiUpSlot.isFilled{
  border-color: var(--slotAccent, rgba(255,255,255,.70));
}

.buddiUpLabBtn{
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.22);
  background: rgba(15, 17, 24, .65);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
  user-select: none;
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

.buddiUpLabBtn[aria-disabled="true"]{
  opacity: .35;
  pointer-events: none;
  filter: grayscale(1);
}

.buddiUpLabBtn.isReady{
  opacity: 1;
  pointer-events: auto;
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 18px 50px rgba(255,255,255,.10);
  animation: buddiLabPulse 1.85s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.buddiUpLabBtn.isReady::before{
  content: "";
  position: absolute;
  inset: -2px;
  transform: translateX(-120%);
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.10) 65%,
    rgba(255,255,255,0) 100%);
  filter: blur(.2px);
  opacity: .75;
  animation: bodLabShimmer 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bodLabShimmer{
  0%{ transform: translateX(-120%); }
  55%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce){
  .buddiUpLabBtn.isReady{ animation: none; }
  .buddiUpLabBtn.isReady::before{ display:none; }
}

@keyframes buddiLabPulse{
  0%{ transform: translateY(0); filter: brightness(1); box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 16px 46px rgba(255,255,255,.08); }
  50%{ transform: translateY(-1px); filter: brightness(1.10); box-shadow: 0 0 0 1px rgba(255,255,255,.36), 0 18px 58px rgba(255,255,255,.14), 0 0 26px rgba(255,255,255,.14); }
  100%{ transform: translateY(0); filter: brightness(1); box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 16px 46px rgba(255,255,255,.10); }
}

.buddiUpHint{
  font-size: 12px;
  line-height: 1.2;
  opacity: .72;
  text-align: center;
}

/* Add-to-BuddiUp row inside the selected Bod card */
.buddiUpAddRow{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  /* Anchor the BuddiUp button just above the MIND/BODY/SOUL block */
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 74px;
  margin: 0;
}

.buddiUpAddBtn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 3px solid var(--factionAccent, rgba(255,255,255,.18));
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.20);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

.buddiUpAddBtn:not([disabled]):hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 0 18px var(--factionAccentA, rgba(255,255,255,.22));
  filter: brightness(1.06);
}

.buddiUpAddBtn[disabled]{
  opacity: .45;
  cursor: default;
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}

.buddiUpAddMsg{
  display: none; /* keep UI clean — no inline warning text */
}

/* BuddiUp slot shimmer (empty slots) */
.buddiUpSlot.isEmpty{
  position: relative;
  overflow: hidden;
}
.buddiUpSlot.isEmpty::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.05) 35%,
    rgba(255,255,255,.02) 70%);
  opacity: .9;
}
.buddiUpSlot.isEmpty::after{
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 55%;
  left: -65%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.18),
    rgba(255,255,255,0));
  transform: skewX(-18deg);
  animation: buddiShimmer 2.4s ease-in-out infinite;
  opacity: .35;
  pointer-events: none;
}
@keyframes buddiShimmer{
  0%{ left: -65%; opacity: .0; }
  18%{ opacity: .35; }
  55%{ opacity: .35; }
  100%{ left: 130%; opacity: 0; }
}

@media (max-width: 1100px){
  .buddiUp{ display:none; }
}



/* =========================================================
   TOOLTIP ARROW (POINT-DOWN) — DO NOT CLIP
   Fixes the 'bubble/blob' artifact by ensuring:
   - inner shine layer sits behind content + arrow
   - arrow is drawn as a real triangle (border + fill)
   ========================================================= */

.pipTipInner{ position: relative; overflow: visible !important; isolation: isolate; }
/* We intentionally layer a 'card cover' (::after) ABOVE the arrow so the pointer
   looks tucked UNDER the tooltip body (not stuck on top). */
.pipTipInner::after{ z-index: 1; }
.pipTipInner::before{ z-index: 2; }
.pipTipContent{ position: relative; z-index: 3; }

/* Rebuild arrow (overrides earlier styles) */
.pipTipArrow{
  position: absolute;
  left: var(--arrowX);
  bottom: -10px; /* aligned to pips without sitting on top of card */
  width: 18px;
  height: 11px;
  background: transparent !important;
  border: none !important;
  z-index: 0; /* keep the arrow BEHIND the tooltip body */
  filter: none !important;
  pointer-events: none;
  transform: translateX(-50%) translateY(0); /* remove +Y shift that made it look 'on top' */
}
.pipTipArrow::before,
.pipTipArrow::after{
  content:"";
  position:absolute;
  left:0; right:0; margin:auto;
  width:0; height:0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.pipTipArrow::before{
  top: 0;
  border-top: 10px solid rgba(255,255,255,.18); /* border */
}
.pipTipArrow::after{
  top: 1px;
  border-top: 9px solid rgba(0,0,0,0);          /* no fill (prevents 'colored-in' look) */
}

/* Card cover: extends a few px below the tooltip so it overlaps the arrow top */
.pipTipInner::after{
  content:"";
  position:absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: -7px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 55%),
    rgba(0,0,0,.55);
  pointer-events:none;
}


/* =========================================================
   TOOLTIP CLEANUP — DISABLE CSS FALLBACK BUBBLES
   ---------------------------------------------------------
   We use the JS-driven floating tooltip (#pipTip).
   The CSS-only fallback (::before/::after) can overlap and create
   the 'weird bubble' artifact near MIND/BODY/SOUL.
   Keep this OFF unless we intentionally remove #pipTip.
   ========================================================= */
.pipLabel[data-tip]::before,
.pipLabel[data-tip]::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   SWARM PARTICLES — MAKE THEM VISIBLE (SAFE)
   ---------------------------------------------------------
   Increase contrast/opacity without blur/blend-mode.
   Does NOT affect hit testing (pointer-events: none).
   ========================================================= */
.swarmField::before{ opacity: .38 !important; }
.swarmField::after{ opacity: .24 !important; }

/* Slightly denser dot map */
.swarmField::before{
  background-image:
    radial-gradient(circle, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 2px);
  background-size: 120px 120px, 210px 210px, 340px 340px;
  background-position: 0 0, 70px 110px, 160px 40px;
}

/* =========================================================
   BUILD 14 — POLISH LOCK
   ---------------------------------------------------------
   1) Tooltip arrow must render *behind* the tooltip body.
   2) Swarm particles should feel like random dust (NOT a grid)
      while keeping click responsiveness intact.
   ========================================================= */

/* 1) Tooltip arrow behind body */
.pipTip{ position: absolute; }
.pipTipInner{
  position: relative;
  z-index: 2;               /* body above arrow */
}
.pipTipContent{
  position: relative;
  z-index: 3;               /* content above body shine */
}
.pipTipArrow{
  z-index: 1 !important;    /* arrow behind body */
  filter: none !important;  /* prevents "on-top" looking edge */
}

/* 2) Random dust particles (no repeating background-size grids)
      We override the previous grid-based dust.
      Keep: pointer-events none; no blur; no blend-mode.
*/
.swarmField::before{
  opacity: .26 !important;
  animation: swarmDustDrift 24s linear infinite !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-image:
    radial-gradient(circle at 7% 12%,  rgba(255,255,255,.10) 0 1px, transparent 3px),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.06) 0 1px, transparent 3px),
    radial-gradient(circle at 26% 34%, rgba(255,255,255,.08) 0 1px, transparent 3px),
    radial-gradient(circle at 33% 62%, rgba(255,255,255,.05) 0 1px, transparent 3px),
    radial-gradient(circle at 41% 18%, rgba(255,255,255,.09) 0 1px, transparent 3px),
    radial-gradient(circle at 48% 86%, rgba(255,255,255,.06) 0 1px, transparent 3px),
    radial-gradient(circle at 56% 44%, rgba(255,255,255,.08) 0 1px, transparent 3px),
    radial-gradient(circle at 63% 71%, rgba(255,255,255,.05) 0 1px, transparent 3px),
    radial-gradient(circle at 72% 26%, rgba(255,255,255,.09) 0 1px, transparent 3px),
    radial-gradient(circle at 79% 90%, rgba(255,255,255,.06) 0 1px, transparent 3px),
    radial-gradient(circle at 86% 53%, rgba(255,255,255,.08) 0 1px, transparent 3px),
    radial-gradient(circle at 94% 15%, rgba(255,255,255,.05) 0 1px, transparent 3px),

    radial-gradient(circle at 11% 48%, rgba(255,255,255,.07) 0 1px, transparent 3px),
    radial-gradient(circle at 22% 9%,  rgba(255,255,255,.05) 0 1px, transparent 3px),
    radial-gradient(circle at 37% 40%, rgba(255,255,255,.06) 0 1px, transparent 3px),
    radial-gradient(circle at 52% 12%, rgba(255,255,255,.07) 0 1px, transparent 3px),
    radial-gradient(circle at 68% 58%, rgba(255,255,255,.06) 0 1px, transparent 3px),
    radial-gradient(circle at 81% 33%, rgba(255,255,255,.07) 0 1px, transparent 3px),
    radial-gradient(circle at 92% 74%, rgba(255,255,255,.06) 0 1px, transparent 3px);
}

.swarmField::after{
  opacity: .16 !important;
  animation: swarmDustDrift2 34s linear infinite !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  background-image:
    radial-gradient(circle at 9% 66%,  rgba(255,255,255,.05) 0 2px, transparent 10px),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.04) 0 2px, transparent 10px),
    radial-gradient(circle at 31% 88%, rgba(255,255,255,.05) 0 2px, transparent 12px),
    radial-gradient(circle at 46% 55%, rgba(255,255,255,.04) 0 2px, transparent 12px),
    radial-gradient(circle at 58% 17%, rgba(255,255,255,.05) 0 2px, transparent 10px),
    radial-gradient(circle at 73% 77%, rgba(255,255,255,.04) 0 2px, transparent 12px),
    radial-gradient(circle at 84% 38%, rgba(255,255,255,.05) 0 2px, transparent 10px),
    radial-gradient(circle at 96% 92%, rgba(255,255,255,.04) 0 2px, transparent 12px);
}


/* =========================================================
   BUILD 15 — FINAL TOOLTIP & PARTICLE POLISH (LOCK)
   ---------------------------------------------------------
   1) Tooltip pointer MUST appear tucked UNDER the tooltip body.
   2) Particles must read as RANDOM DUST (not a grid) and be
      visible, without harming swarm hit testing.
   ========================================================= */

/* --- 1) Tooltip pointer tucked under card --- */
.pipTipInner{
  position: relative !important;
  isolation: isolate !important;
}

/* Keep content on top */
.pipTipContent{ z-index: 3 !important; }

/* Arrow behind the card */
.pipTipArrow{ z-index: 0 !important; filter: none !important; }

/* Card cover layer: extend below bottom edge to overlap arrow top */
.pipTipInner::after{
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  bottom: -7px !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 55%),
    rgba(0,0,0,.55) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* --- 2) Random dust particles (VISIBLE, SAFE) --- */
.swarmField::before,
.swarmField::after{
  pointer-events: none !important;
  background-size: auto !important;
  background-position: 0 0 !important;
}

/* Primary dust layer */
.swarmField::before{
  opacity: .90 !important; /* doubled visibility without filters/blend-modes */
  animation: swarmDustDrift 22s linear infinite !important;
  background-image:
    radial-gradient(circle at 6% 14%,  rgba(255,255,255,.12) 0 1px, transparent 4px),
    radial-gradient(circle at 13% 52%, rgba(255,255,255,.08) 0 1px, transparent 4px),
    radial-gradient(circle at 17% 84%, rgba(255,255,255,.10) 0 1px, transparent 4px),
    radial-gradient(circle at 24% 28%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 31% 71%, rgba(255,255,255,.11) 0 1px, transparent 4px),
    radial-gradient(circle at 38% 40%, rgba(255,255,255,.06) 0 1px, transparent 4px),
    radial-gradient(circle at 44% 10%, rgba(255,255,255,.10) 0 1px, transparent 4px),
    radial-gradient(circle at 49% 88%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 56% 58%, rgba(255,255,255,.11) 0 1px, transparent 4px),
    radial-gradient(circle at 63% 22%, rgba(255,255,255,.08) 0 1px, transparent 4px),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.10) 0 1px, transparent 4px),
    radial-gradient(circle at 78% 35%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 86% 63%, rgba(255,255,255,.09) 0 1px, transparent 4px),
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.06) 0 1px, transparent 4px),
    radial-gradient(circle at 5% 35%,  rgba(255,255,255,.09) 0 1px, transparent 4px),
    radial-gradient(circle at 11% 9%,  rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 27% 93%, rgba(255,255,255,.08) 0 1px, transparent 4px),
    radial-gradient(circle at 41% 63%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 59% 6%,  rgba(255,255,255,.08) 0 1px, transparent 4px),
    radial-gradient(circle at 74% 49%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 88% 90%, rgba(255,255,255,.08) 0 1px, transparent 4px),
    radial-gradient(circle at 33% 16%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 47% 27%, rgba(255,255,255,.06) 0 1px, transparent 4px),
    radial-gradient(circle at 52% 78%, rgba(255,255,255,.08) 0 1px, transparent 4px),
    radial-gradient(circle at 66% 64%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 81% 24%, rgba(255,255,255,.06) 0 1px, transparent 4px),
    radial-gradient(circle at 94% 57%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 18% 38%, rgba(255,255,255,.06) 0 1px, transparent 4px),
    radial-gradient(circle at 29% 57%, rgba(255,255,255,.07) 0 1px, transparent 4px),
    radial-gradient(circle at 76% 90%, rgba(255,255,255,.06) 0 1px, transparent 4px);
}

/* Secondary, larger motes for depth */
.swarmField::after{
  opacity: .70 !important;
  animation: swarmDustDrift2 34s linear infinite !important;
  background-image:
    radial-gradient(circle at 9% 66%,  rgba(255,255,255,.06) 0 2px, transparent 8px),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.05) 0 2px, transparent 8px),
    radial-gradient(circle at 37% 82%, rgba(255,255,255,.05) 0 2px, transparent 8px),
    radial-gradient(circle at 53% 34%, rgba(255,255,255,.05) 0 2px, transparent 8px),
    radial-gradient(circle at 68% 12%, rgba(255,255,255,.05) 0 2px, transparent 8px),
    radial-gradient(circle at 83% 74%, rgba(255,255,255,.05) 0 2px, transparent 8px),
    radial-gradient(circle at 14% 44%, rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 46% 8%,  rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 61% 91%, rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 95% 41%, rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 7% 20%,  rgba(255,255,255,.05) 0 2px, transparent 8px),
    radial-gradient(circle at 28% 64%, rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 41% 48%, rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 58% 73%, rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 72% 33%, rgba(255,255,255,.04) 0 2px, transparent 8px),
    radial-gradient(circle at 89% 10%, rgba(255,255,255,.04) 0 2px, transparent 8px);
}

@keyframes swarmDustDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-60px, -40px, 0); }
}
@keyframes swarmDustDrift2{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(40px, -70px, 0); }
}

@media (prefers-reduced-motion: reduce){
  .swarmField::before,
  .swarmField::after{ animation: none !important; }
}

/* =========================
   BuddiUp + Discovered (LOCK)
   - Discovered pill sits on the SAME LINE as the faction buttons
   - Pinned FAR RIGHT inside the Swarm header row
   - BuddiUp remains an overlay inside the swarm (no layout drift)
   ========================= */

.swarmHeaderRow{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ensure the discovered pill is truly top-right, level with the faction buttons */
.swarmDiscoveredBubble{
  position: static !important;
  margin-left: auto !important;
  margin-top: 0 !important;
  align-self: center;
}

/* No extra reserved padding needed when using flex alignment */
.swarmHeaderRow .factionBar{ padding-right: 0 !important; }