.na-wrap {
  position: absolute;
  bottom: 6%;
  left: calc(50% - 230px);
  width: 130px;
  height: 130px;
  z-index: 0;
  pointer-events: auto;
}

@media (max-width: 900px) {
  .na-wrap {
    left: calc(50% - 170px);
    width: 100px;
    height: 100px;
    bottom: 4%;
  }
}

@media (max-width: 640px) {
  .na-wrap {
    display: none;
  }
}

.na-orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 36%,
    hsl(258 100% 85% / 0.95) 0%,
    hsl(256 96% 64% / 0.9) 38%,
    hsl(256 80% 38% / 0.85) 70%,
    hsl(256 60% 18% / 0.9) 100%
  );
  box-shadow:
    0 0 0 1px hsl(256 80% 60% / 0.35),
    0 0 28px 8px hsl(256 96% 60% / 0.55),
    0 0 60px 18px hsl(256 96% 60% / 0.28),
    inset 0 0 20px 0 hsl(258 100% 90% / 0.12);
  animation: na-breathe 3.4s ease-in-out infinite;
  cursor: pointer;
}

@keyframes na-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px hsl(256 80% 60% / 0.35), 0 0 28px 8px hsl(256 96% 60% / 0.55), 0 0 60px 18px hsl(256 96% 60% / 0.28), inset 0 0 20px 0 hsl(258 100% 90% / 0.12); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 1px hsl(256 80% 60% / 0.5), 0 0 36px 14px hsl(256 96% 60% / 0.68), 0 0 80px 28px hsl(256 96% 60% / 0.36), inset 0 0 24px 0 hsl(258 100% 90% / 0.18); }
}

.na-highlight {
  position: absolute;
  top: 14%;
  left: 20%;
  width: 32%;
  height: 20%;
  border-radius: 50%;
  background: hsl(258 100% 96% / 0.55);
  filter: blur(4px);
  pointer-events: none;
}

.na-eyes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38%);
  display: flex;
  gap: 28%;
  align-items: center;
}

.na-eye {
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsl(258 100% 96% / 0.9);
  box-shadow: 0 0 6px 2px hsl(256 100% 90% / 0.7);
  animation: na-blink 5s ease-in-out infinite;
}

@keyframes na-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

.na-eye:nth-child(2) {
  animation-delay: 0.08s;
}

.na-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid hsl(256 96% 64% / 0.22);
  animation: na-ring-pulse 3.4s ease-in-out infinite;
}

.na-ring-2 {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px solid hsl(256 96% 64% / 0.12);
  animation: na-ring-pulse 3.4s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes na-ring-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.na-label {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--primary) / 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  pointer-events: none;
  animation: na-float 3.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 18px hsl(256 96% 60% / 0.3));
}

@keyframes na-float {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.na-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: hsl(var(--primary) / 0.35);
}

.na-label-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(var(--primary));
  margin-bottom: 4px;
  font-family: "DM Sans", ui-sans-serif, sans-serif;
}

.na-label-name .na-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(145 70% 55%);
  box-shadow: 0 0 6px 2px hsl(145 70% 55% / 0.6);
  flex-shrink: 0;
  animation: na-dot-pulse 2s ease-in-out infinite;
}

@keyframes na-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.na-label-body {
  font-size: 11.5px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
  font-family: "DM Sans", ui-sans-serif, sans-serif;
}