.top-menu {
  position: fixed;
  top: 0;
  left: 50%;

  width: min(100%, 480px);
  height: 45px;

  transform: translateX(-50%) translateY(-100%);
  opacity: 0;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  overflow: hidden; 
  position: fixed;

  background: rgba(20, 24, 28, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);

  pointer-events: none;

  transition:
    transform 0.38s cubic-bezier(.2,.8,.2,1),
    opacity 0.25s ease;
}

.top-menu.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Electronic texture */
.top-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(0,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,0.12) 1px, transparent 1px);

  background-size: 12px 12px;

  opacity: 0.18;

  /* 👇 Gradient overlay */
  mask-image: linear-gradient(
    90deg,
    transparent,
    rgba(0,0,0,1) 20%,
    rgba(0,0,0,1) 80%,
    transparent
  );

  animation: 
    topbarGridBreath 4.5s ease-in-out infinite,
    topbarGridDrift 18s linear infinite;
}

@keyframes topbarGridBreath {
  0% {
    opacity: 0.10;
    transform: translateX(0px);
  }

  50% {
    opacity: 0.38;
    transform: translateX(7px); /* 👈 Micro-movement = the feeling of being alive */
  }

  100% {
    opacity: 0.10;
    transform: translateX(0px);
  }
}

@keyframes topbarGridDrift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 120px 0, 120px 0;
  }
}

.top-menu::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(22, 255, 255, 0.55),
    transparent
  );

  opacity: 0.45;
  animation: topbarLinePulse 3.8s ease-in-out infinite;
}

@keyframes topbarLinePulse {
  0%, 100% {
    opacity: 0.18;
  }

  50% {
    opacity: 0.85;
  }
}

/* ------------------------------------- */

.top-menu button {
  height: 45px;
  min-width: 36px;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 8px;
  border: 0;
  background: rgba(255,255,255,0.01);
  border-radius: 6px;

  color: rgba(230, 240, 240, 0.72);
  font-family: 'PRESSSTART', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;

  cursor: pointer;
}

.top-menu-btn {
  width: 36px;
  padding: 0;
}

.nav-btn {
  width: auto;
  transform: translateY(1px);
}

.top-menu button:hover {
  color: #00f6ff;
  background: rgba(0, 255, 255, 0.08);
  filter: drop-shadow(0 0 6px #00f6ff);
}

.top-menu button:active {
  transform: scale(0.78);
  background: rgba(0,255,255,0.08);
}

.menu-logo-slot {
  width: 2px;
  height: 100%;
  pointer-events: none;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1px;
}

.topbar-left {
  justify-content: flex-start;
  gap: 2px;
  margin-right: 1px;
}

.topbar-right {
  justify-content: flex-end;
  gap: 2px;
  margin-left: -5px;
}

.topbar-center {
  display: flex;
  justify-content: center;
}

.top-menu-btn img {
  width: 23px;
  height: 23px;
  display: block;
  pointer-events: none;

  filter: brightness(0) invert(1);
  opacity: 0.72;

  transition:
    opacity 0.2s ease,
    filter 0.2s ease,
    transform 0.16s ease;
}

.top-menu-btn:hover img {
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(84%)
    sepia(96%)
    saturate(1322%)
    hue-rotate(132deg)
    brightness(105%)
    contrast(105%)
    drop-shadow(0 0 6px #00f6ff);
}

.top-menu-btn:active img {
  transform: scale(0.78);
}