/* ================================================
   nav.css — Sticky navigation bar
   ================================================ */

.nav-bar{
  position:sticky;top:0;z-index:1001;
  background:var(--pixel-bg);border-bottom:1px solid var(--border);
  padding:0 16px;backdrop-filter:blur(6px);
  transition:background .5s,border-color .5s;
}
.nav-inner{max-width:780px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:nowrap}
.nav-link{
  display:inline-block;padding:12px 12px;white-space:nowrap;
  font-family:'Press Start 2P',monospace;font-size:9px;
  color:var(--dim);text-decoration:none;letter-spacing:.12em;
  transition:all .25s;position:relative;
}
.nav-link:hover{color:var(--amber)}
.nav-link.active{color:var(--amber)}
.nav-link.active::after{
  content:'';position:absolute;bottom:8px;left:12px;right:12px;height:1px;
  background:var(--amber);box-shadow:0 0 6px var(--amber-glow);
}
.nav-link .bracket{color:var(--dim);font-size:8px;opacity:.5}
.nav-link:hover .bracket,.nav-link.active .bracket{color:var(--amber);opacity:.8}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--border);
  color: var(--amber); font-size: 22px;
  padding: 8px 14px; cursor: pointer;
  line-height: 1; border-radius: 2px;
}

/* Mobile nav */
@media(max-width:600px){
  .nav-toggle { display: block; margin: 0 auto; }
  .nav-inner { 
    display: none; flex-direction: column; 
    gap: 2px; padding: 8px 0;
  }
  .nav-open .nav-inner { display: flex; }
  .nav-link { 
    font-size: 13px; padding: 12px 16px; 
    text-align: center; border-bottom: 1px solid var(--border);
  }
  .nav-link .bracket { font-size: 12px; }
  .nav-link.active::after { bottom: 0; left: 16px; right: 16px; }
}