/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SITE-WIDE TOP NAV
   Canonical version lives on the desk/computer page (index.html).
   Shared here so every page uses the same bar.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #111118;
  border-bottom: 1px solid #2a2a3a;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 24px;
  box-sizing: border-box;
}
.top-nav a {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #8fd5ff;
  text-decoration: none;
  letter-spacing: 0.1em;
  padding: 0 18px;
  height: 44px;
  display: flex;
  align-items: center;
  border-right: 1px solid #2a2a3a;
  transition: background 0.15s, color 0.15s;
  box-sizing: border-box;
}
.top-nav a:first-child { border-left: 1px solid #2a2a3a; }
.top-nav a:hover { background: #1e1e30; color: #fff; }
.top-nav .nav-logo {
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: #ff6ec7;
  margin-right: auto;
  padding: 0; border: none;
  letter-spacing: 0.05em;
}
.top-nav .nav-logo:hover { background: none; color: #fff; }

.top-nav-spacer { height: 44px; }

@media (max-width: 800px) {
  .top-nav { padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; }
  .top-nav a { font-size: 6px; padding: 0 10px; white-space: nowrap; letter-spacing: 0.04em; }
  .top-nav .nav-logo { font-size: 16px; margin-right: 8px; flex-shrink: 0; }
}