@keyframes hudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes hudPulse {
  0% {
    border-color: rgba(0, 255, 102, 0.25);
    box-shadow:
      0 0 6px rgba(0, 255, 102, 0.3),
      inset 0 0 6px rgba(0, 255, 102, 0.2);
  }
  50% {
    border-color: rgba(0, 255, 102, 0.9);
    box-shadow:
      0 0 18px rgba(0, 255, 102, 0.9),
      inset 0 0 14px rgba(0, 255, 102, 0.6);
  }
  100% {
    border-color: rgba(0, 255, 102, 0.25);
    box-shadow:
      0 0 6px rgba(0, 255, 102, 0.3),
      inset 0 0 6px rgba(0, 255, 102, 0.2);
  }
}

.top-bar {
  position: fixed;
  top: 16px;
  right: 24px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(0, 255, 102, 0.4);
  box-shadow:
    0 0 12px rgba(0, 255, 102, 0.5),
    inset 0 0 12px rgba(0, 255, 102, 0.3);
  z-index: 1000;
  animation: hudFloat 4s ease-in-out infinite, hudPulse 2.4s ease-in-out infinite;
}