html,body{height:100%;margin:0;background:#000;overflow:hidden;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#stage{
  position:fixed; left:0; top:0; width:100vw; height:100vh;
  display:block; background:#03040a; z-index:1;
}

/* Center the HUD horizontally; top is set dynamically by JS to the seam */
.hud{
  position:fixed;left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;align-items:center;z-index:20;
  pointer-events:auto;
}
.hud button,.hud select{
  background:#0b1220;color:#aef; border:1px solid #26ffc1; border-radius:12px;
  padding:.5rem .7rem; font-weight:700; letter-spacing:.02em; cursor:pointer;
  box-shadow:0 0 12px rgba(38,255,193,.25), inset 0 0 18px rgba(0,255,166,.10);
  backdrop-filter: blur(2px);
}
.hud button[aria-pressed="true"]{background:#142437;color:#fff}

/* FPS badge pinned bottom-left above underworld panel */
#fps{
  position:fixed;left:12px;bottom:12px;color:#7effd3;font-weight:700;
  text-shadow:0 0 10px #00ffa6;
  padding:.2rem .5rem;border:1px solid #00ffa6;border-radius:10px;background:#06121a80;z-index:25
}

.scanlines::before{
  content:"";position:fixed;inset:0;pointer-events:none;background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 2px,transparent 3px);
  mix-blend-mode:overlay;opacity:.15
}

/* Bottom UNDERWORLD canvas occupies from seam to bottom */
#closeup{
  position:fixed;left:0;right:0;bottom:0;height:35vh; /* JS keeps this aligned with the seam */
  z-index:10; /* under HUD, above main canvas */
}

#logo {
  position: relative;      /* sits over everything, anchored to the viewport */
  height: 28px;         /* keep one dimension; lets width auto-scale */
  z-index: 10002;       /* must be higher than your 9999 widgets */
  pointer-events: none; /* clicks pass through; remove if you want it clickable */
  image-rendering: auto;
}

/* clean neon-ish label */
.hud-brand {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  color: #00ffaa;
  text-shadow: 0 0 8px rgba(0,255,170,.5), 0 0 20px rgba(0,255,170,.25);
  user-select: none;
}

.hud-spacer { flex: 1; }   /* pushes the logo to the far right */

.hud { display:flex; align-items:center; gap:.5rem; }
.hud-logo-link { display:inline-flex; align-items:center; margin-left:auto; }

.hud-logo-mask {
  --h: 28px;                /* logo height */
  width: 28px;             /* tweak to your logo aspect */
  height: var(--h);
  display: inline-block;
  /* use the logo as a mask */
  -webkit-mask: url(/qvlx.svg) no-repeat center / contain;
          mask: url(/qvlx.svg) no-repeat center / contain;

  /* animated rainbow gradient behind the mask */
  
  background: conic-gradient(
    from 0deg,
    #00ffa6, #00f0ff, #00ffa6, #ff2bd6, #ffe45c, #6effc6, #00ffa6
  );
  background-size: 200% 200%;

  /* neon glow via drop-shadow on the element box */
  filter: drop-shadow(0 0 10px rgba(0,255,166,.45));
  transition: transform .18s ease, filter .18s ease;
  animation: qvlx-gradient 8s linear infinite;
}

.hud-logo-link:hover .hud-logo-mask {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 0 10px rgba(0,255,166,.6)) drop-shadow(0 0 26px rgba(0,255,166,.35));
}

@keyframes qvlx-gradient {
  0%   { background-position: 0% 100%; }
  100% { background-position: 200% 100%; }
}