/* navigation: floating pill at the top (js/nav.js). Above the scanlines (z 10), below the intro (z 100). */
.nav-pill { position: fixed; top: 12px; left: 50%; z-index: 40; transform: translateX(-50%); display: flex; padding: 6px; border-radius: 999px;
  font-family: var(--font-display); background: rgba(18,20,29,.85); border: 1px solid var(--color-border-default); backdrop-filter: blur(8px); }
/* the two blobs: the hover one is a red outline, the selected one is filled red; both spring along under the links */
.nav-pill .blob { position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: left .35s cubic-bezier(.3, 1.5, .5, 1), width .35s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; }
.nav-pill .blob-hover { border: 1.5px solid var(--cyber-cyan-500); box-shadow: 0 0 12px rgba(255,43,63,.4), inset 0 0 8px rgba(255,43,63,.2); }
.nav-pill .blob-active { background: var(--cyber-cyan-500); box-shadow: 0 0 18px rgba(255,43,63,.6); }
.pill-item { position: relative; padding: 8px 18px; border-radius: 999px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 15px;
  text-decoration: none; color: var(--color-text-primary); transition: color .2s; }
.pill-item:focus-visible { outline: none; }
.pill-item[aria-current] { color: #fff; }
.pill-item.locked { opacity: .38; }                          /* until the ToS is agreed to */
.pill-item.unlocking { animation: unlock .7s ease; }
@keyframes unlock { 0% { opacity: .38; } 40% { opacity: 1; color: #fff; text-shadow: 0 0 12px #ff2b3f, 0 0 24px #ff2b3f; } 100% { opacity: 1; } }
/* phones: all five links still fit on one line */
@media (max-width: 480px) { .nav-pill { top: 8px; padding: 4px; max-width: calc(100vw - 16px); box-sizing: border-box; }
  .nav-pill .blob { top: 4px; bottom: 4px; } .pill-item { padding: 7px 9px; font-size: 12.5px; letter-spacing: .04em; } }
@media (prefers-reduced-motion: reduce) { .nav-pill .blob { transition: opacity .2s; } }

/* music on / off, top left (js/sound.js); slashed and dimmed when off */
.music-btn { position: fixed; top: 12px; left: 12px; z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(18,20,29,.85); border: 1px solid var(--color-border-default); backdrop-filter: blur(8px); color: var(--cyber-cyan-500);
  box-shadow: 0 0 12px rgba(255,43,63,.35); transition: box-shadow .2s, color .2s; }
.music-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.music-btn .slash { opacity: 0; transition: opacity .2s; }
.music-btn[aria-pressed="false"] { color: #8a8d99; box-shadow: none; }
.music-btn[aria-pressed="false"] .slash { opacity: 1; }
.music-btn:hover, .music-btn:focus-visible { outline: none; box-shadow: 0 0 18px rgba(255,43,63,.65); }
/* narrower screens: the nav pill reaches the corner, so the button sits just under it */
@media (max-width: 760px) { .music-btn { top: 60px; left: 10px; width: 40px; height: 40px; } }
@media (max-width: 480px) { .music-btn { top: 52px; left: 8px; } }