/* =========================================================
   LAEVYL — shared mobile navigation (hamburger menu)
   Loaded by every page AFTER its own <style> block.
   Desktop (>800px) is untouched: the button and panel are
   hidden and the existing .nav-center links show as before.
========================================================= */

.nav-menu-btn{
  display:none;
  position:relative;
  width:42px;
  height:42px;
  flex:none;
  padding:0;
  border:1px solid rgba(180,95,255,.48);
  border-radius:10px;
  background:rgba(65,25,115,.16);
  color:#f8f6ff;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.nav-menu-btn:hover,
.nav-menu-btn[aria-expanded="true"]{
  background:rgba(126,52,208,.26);
  border-color:rgba(190,110,255,.85);
}

.nav-menu-btn:focus-visible,
.nav-menu a:focus-visible{
  outline:2px solid #c05fff;
  outline-offset:2px;
}

.nav-menu-btn .bar{
  position:absolute;
  left:12px;
  right:12px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.nav-menu-btn .bar:nth-child(1){top:14px;}
.nav-menu-btn .bar:nth-child(2){top:20px;}
.nav-menu-btn .bar:nth-child(3){top:26px;}

.nav-menu-btn[aria-expanded="true"] .bar:nth-child(1){top:20px;transform:rotate(45deg);}
.nav-menu-btn[aria-expanded="true"] .bar:nth-child(2){opacity:0;}
.nav-menu-btn[aria-expanded="true"] .bar:nth-child(3){top:20px;transform:rotate(-45deg);}

.nav-menu-btn .sr-only{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- dropdown panel ---------- */

.nav-menu{
  display:none;
  margin-top:10px;
  padding:8px;
  border:1px solid rgba(175,95,255,.24);
  border-radius:18px;
  background:
    radial-gradient(circle at 85% 0%,rgba(150,65,255,.18),transparent 45%),
    linear-gradient(180deg,rgba(20,11,40,.97),rgba(8,4,16,.98));
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(130,62,255,.14);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.nav-menu.open{
  display:block;
  animation:navMenuIn .22s ease-out;
}

.nav-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 16px;
  border-radius:12px;
  color:#f0ecf7;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.02em;
  transition:background .2s ease,color .2s ease;
}

.nav-menu a + a{
  border-top:1px solid rgba(255,255,255,.05);
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"]{
  background:rgba(126,52,208,.16);
  color:#fff;
}

.nav-menu a::after{
  content:"";
  width:7px;height:7px;
  border-top:2px solid rgba(192,95,255,.75);
  border-right:2px solid rgba(192,95,255,.75);
  transform:rotate(45deg);
}

.nav-menu a[aria-current="page"]{
  box-shadow:inset 3px 0 0 #a947ff;
}

@keyframes navMenuIn{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}

@media(max-width:800px){
  .nav-menu-btn{display:inline-flex;}
}

@media(min-width:801px){
  .nav-menu,
  .nav-menu.open{display:none;}
}

/* Header gets crowded once the menu button joins Discord + Waitlist:
   show Discord as icon-only a little earlier than before (was 380px). */
@media(max-width:470px){
  .nav-discord{padding:10px;}
  .nav-discord span{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .nav-menu.open{animation:none;}
  .nav-menu-btn .bar{transition:none;}
}

/* Footer: keep link labels on one line and let the row wrap
   now that it has a fourth link (Updates). */
.footer-privacy a,
.footer-links a{white-space:nowrap;}

@media(max-width:600px){
  .footer-privacy,
  .footer-links{flex-wrap:wrap;justify-content:center;gap:10px 22px;}
}

/* Legal pages (privacy/terms/account deletion) center the wordmark on phones
   and hide .nav-right; keep it hidden except for the menu button, pinned right. */
@media(max-width:600px){
  .privacy-page .nav-right,
  .account-page .nav-right{
    display:flex;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }
}