:root {
  --header-h: 60px; /* Reduced from 72px for mobile */
}

.zp-nav{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(6,8,8,.85),rgba(6,8,8,.65));
  border-bottom:1px solid rgba(235,241,228,.08);
}

.zp-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
}

/* Brand */
.zp-nav__brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  letter-spacing:-.02em;
  position:relative;
  z-index:102;
  white-space:nowrap;
  overflow:hidden;
}
.zp-nav__mark{
  width:32px;
  height:32px;
  border-radius:10px;
  background:radial-gradient(circle at 30% 25%,rgba(240,255,107,.55),transparent 55%),
             radial-gradient(circle at 70% 72%,rgba(199,255,0,.45),transparent 60%),
             linear-gradient(135deg,rgba(199,255,0,.16),rgba(211,30,45,.12));
  box-shadow:var(--shadow-neon);
  border:1px solid rgba(235,241,228,.10);
  flex-shrink:0;
}
.zp-nav__word{font-weight:780;font-size:1rem}
.zp-nav__word--accent{color:var(--zp-accent)}

/* Desktop Links */
.zp-nav__links{
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  padding:6px;
  border-radius:999px;
  background:rgba(16,21,20,.55);
  border:1px solid rgba(235,241,228,.08);
  box-shadow:0 18px 70px rgba(0,0,0,.35);
}
.zp-nav__link{
  position:relative;
  text-decoration:none;
  padding:8px 14px;
  border-radius:999px;
  color:rgba(235,233,223,.70);
  font-size:.85rem;
  letter-spacing:.04em;
  font-weight:600;
  text-transform:uppercase;
  transition:color .2s ease;
  white-space:nowrap;
}
.zp-nav__link:hover{color:rgba(235,233,223,.96)}
.zp-nav__link.is-active{color:rgba(8,10,8,.92)}
.zp-nav__linkText{position:relative;z-index:2}

.zp-nav__indicator{
  position:absolute;
  inset:6px auto 6px 6px;
  width:0;
  border-radius:999px;
  background:var(--grad-accent);
  box-shadow:var(--shadow-neon);
  opacity:0;
  transition:all .4s cubic-bezier(.2,.9,.2,1);
}
.zp-nav__links:has(.is-active) .zp-nav__indicator{opacity:1}

/* Actions */
.zp-nav__actions{
  display:flex;
  align-items:center;
  gap:16px;
  z-index:102;
}

/* Theme Switch Toggle */
.zp-theme-switch{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  width:44px;
  height:24px;
  position:relative;
  display:flex;
  align-items:center;
}
.zp-theme-switch__track{
  display:block;
  width:100%;
  height:100%;
  border-radius:999px;
  background:rgba(16,21,20,.55);
  border:1px solid rgba(235,241,228,.15);
  position:relative;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.zp-theme-switch:hover .zp-theme-switch__track{
  border-color:var(--zp-stroke-2);
  box-shadow:var(--shadow-neon);
}
.zp-theme-switch__knob{
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--zp-gold-lime);
  position:absolute;
  top:2px;
  left:2px;
  transition:transform .3s cubic-bezier(.3,1.2,.3,1), background-color .3s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.zp-theme-switch[aria-checked="true"] .zp-theme-switch__knob{
  transform:translateX(20px);
  background:#a55cff;
}
.zp-theme-switch[aria-checked="true"] .zp-theme-switch__track{
  border-color:rgba(165,92,255,.3);
}

/* Hamburger */
.zp-nav__hamburger{
  display:none;
  padding:10px;
  margin:-10px;
  background:transparent;
  border:none;
  cursor:pointer;
  color:var(--zp-bone);
}
.zp-nav__hamburgerBox{
  display:block;
  width:24px;
  height:24px;
  position:relative;
}
.zp-nav__hamburgerInner{
  display:block;
  top:50%;
  margin-top:-1px;
  width:24px;
  height:2px;
  background-color:currentColor;
  border-radius:2px;
  position:absolute;
  transition:transform .15s ease;
}
.zp-nav__hamburgerInner::before,
.zp-nav__hamburgerInner::after{
  content:"";
  display:block;
  width:24px;
  height:2px;
  background-color:currentColor;
  border-radius:2px;
  position:absolute;
  transition:transform .15s ease;
}
.zp-nav__hamburgerInner::before{top:-8px}
.zp-nav__hamburgerInner::after{bottom:-8px}
.zp-nav__hamburger[aria-expanded="true"] .zp-nav__hamburgerInner{transform:rotate(45deg)}
.zp-nav__hamburger[aria-expanded="true"] .zp-nav__hamburgerInner::before{top:0;opacity:0}
.zp-nav__hamburger[aria-expanded="true"] .zp-nav__hamburgerInner::after{bottom:0;transform:rotate(-90deg)}

/* Mobile Menu (Drawer) */
.zp-nav__mobile{
  position:fixed;
  inset:0;
  z-index:300;
  visibility:hidden;
  pointer-events:none;
}
.zp-nav__mobile[data-state]{
  visibility:visible;
  pointer-events:auto;
}
.zp-nav__mobile[data-state="closing"]{
  pointer-events:none;
}

.zp-nav__mobileBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity 180ms ease-in;
  z-index:0;
}
.zp-nav__mobile[data-state="open"] .zp-nav__mobileBackdrop{opacity:1}

.zp-nav__mobileInner{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:min(340px, 88vw);
  background:rgba(10,10,10,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-left:1px solid rgba(255,255,255,0.07);
  transform:translateX(100%);
  transition:transform 180ms ease-in;
  display:flex;
  flex-direction:column;
  box-shadow:-18px 0 60px rgba(0,0,0,.62), -1px 0 0 rgba(255,255,255,0.04);
  height:100dvh;
  min-height:100vh;
  z-index:1;
  will-change:transform;
}
.zp-nav__mobile[data-state="open"] .zp-nav__mobileBackdrop{
  transition-duration:220ms;
  transition-timing-function:ease-out;
}
.zp-nav__mobile[data-state="open"] .zp-nav__mobileInner{
  transform:translateX(0);
  transition-duration:220ms;
  transition-timing-function:ease-out;
}

/* Drawer Structure */
.zp-nav__mobileTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  height:56px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.zp-nav__mobileLabel{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(235,233,223,.58);
  font-weight:820;
}
.zp-nav__close{
  background:rgba(6,8,8,.20);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--zp-bone);
  font-size:1.35rem;
  cursor:pointer;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  margin-right:-4px;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.zp-nav__close:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,0.14);
  box-shadow:var(--shadow-neon);
  transform:translateY(-1px);
}
.zp-nav__close:active{transform:translateY(0)}

.zp-nav__mobileLinks{
  flex:1;
  padding:10px 0;
  overflow-y:auto;
}
.zp-nav__mobileLink{
  position:relative;
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 20px;
  font-size:1rem;
  font-weight:760;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(235,233,223,.76);
  transition:background-color .18s ease, color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.zp-nav__mobileLink:hover{
  background:rgba(255,255,255,0.04);
  color:rgba(235,233,223,.95);
}
.zp-nav__mobileLink:focus-visible{
  outline:none;
  background:rgba(255,255,255,0.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 3px rgba(199,255,0,.12);
}
.zp-nav__mobileLink::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:2px;
  background:transparent;
}
.zp-nav__mobileLink.is-active{
  color:var(--zp-bone);
  background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent 55%);
  text-shadow:0 0 12px rgba(0,0,0,.35);
}
.zp-nav__mobileLink.is-active::before{
  background:var(--zp-accent);
  box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 0 18px var(--zp-stroke-2);
}

.zp-nav__mobileBottom{
  padding:12px 20px 14px;
  border-top:1px solid rgba(255,255,255,0.07);
}
.zp-nav__switchRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.zp-nav__switchLabel{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(235,233,223,.58);
  font-weight:820;
}

/* Focus Visible */
.zp-theme-switch:focus-visible{outline:2px solid var(--zp-accent);outline-offset:4px;border-radius:999px}
.zp-nav__hamburger:focus-visible{outline:2px solid var(--zp-accent);outline-offset:4px;border-radius:4px}
.zp-nav__close:focus-visible{outline:2px solid var(--zp-accent);outline-offset:2px}

/* Responsive */
@media (min-width: 901px) {
  .zp-nav__mobile{display:none} /* Hide entirely on large screens */
}

@media (max-width: 900px) {
  :root{--header-h:60px}
  .zp-desktop-only{display:none}
  .zp-nav__hamburger{display:block}
  /* Hide desktop theme switch if space is tight, otherwise keep it */
}

@media (max-width: 480px) {
  .zp-nav__word{display:none}
  .zp-nav__brand::after{
    content:"Zombie Panda";
    font-weight:780;
    font-size:1rem;
    color:var(--zp-bone);
  }
}
@media (max-width: 350px) {
  .zp-nav__brand::after{
    content:"ZP";
  }
}

@media (prefers-reduced-motion: reduce) {
  .zp-nav__mobile{transition:none}
  .zp-nav__mobileBackdrop{transition:none}
  .zp-nav__mobileInner{transition:none;will-change:auto}
}