/* NAV — the ship nav (phone version lives in mobile.css) */
#shipnav {
  position: relative;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  --ship-w: min(760px, 92vw);
  --ship-line: calc(var(--ship-w) * 0.0105);   /* same thickness as the ship outline */
  width: var(--ship-w);
  z-index: 50;   /* above #hero (z-index 1) so the rope runs behind the ship */
  pointer-events: none;   /* clicks fall through to the astronaut behind the ship; links opt back in below */
}

#shipSvg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.25));
}

#navLinks {
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.nav-link {
  position: absolute;
  top: 47%;                 /* nav.js sets left; this is the hull's centre line */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--ship-w) * 0.105);   /* nav.js overrides this per button to fit the hull */
  aspect-ratio: 1;
  padding: 0;
  border: var(--ship-line) solid #000;
  border-radius: 50%;
  background: #fff;
  font-family: var(--font-display);
  font-size: calc(var(--ship-w) * 0.0165);   /* nav.js overrides this to fit each ring */
  font-weight: 800;
  white-space: nowrap;
  color: #000;
  cursor: pointer;
  transition: background 0.2s ease;
  pointer-events: auto;
  text-decoration: none;
}

.nav-link:hover, .nav-link.active {
  background: var(--accent);
}

.nav-link:focus-visible { outline: 3px solid var(--accent2); outline-offset: 4px; }