:root{
  --bg:#0f1115;
  --header:#1e2124;
  --blurple:#5865F2;
  --text:#ffffff;
  --muted:#b5bac1;
}

/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ===== HEADER ===== */
header{background:var(--header);position:relative;width:100%;z-index:10}

/* ===== INNER ===== */
.header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ===== LOGO ===== */
.logo{font-size:20px;font-weight:800;color:#ffffff}

/* ===== DESKTOP NAV ===== */
nav{display:flex}
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links li{display:flex;align-items:center}
.nav-links a{
  font-size:14px;font-weight:600;color:var(--muted);
  padding:6px 10px;border-radius:6px;transition:.15s
}
.nav-links a:hover{background:#2b2d31;color:#ffffff}

/* ===== BUTTONS ===== */
.btn-login{
  padding:8px 16px;border-radius:999px;border:none;
  font-weight:700;font-size:14px;cursor:pointer
}
.btn-login.discord{background:var(--blurple);color:#ffffff}
.btn-login.logout{background:#2b2d31;color:var(--muted)}

/* ===== BURGER ===== */
.burger{
  display:none;width:32px;height:24px;
  flex-direction:column;justify-content:space-between;cursor:pointer
}
.burger span{width:100%;height:3px;background:#ffffff;border-radius:2px}

/* ===== OVERLAY ===== */
.mobile-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:.3s;z-index:998
}
.mobile-overlay.active{opacity:1;pointer-events:auto}

/* ===== MOBILE MENU ===== */
.mobile-menu{
  position:fixed;
  top:0;
  right:-320px;
  width:320px;
  height:100%;
  background:#1e1f22;
  padding:70px 24px 24px; 
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:.3s;
  z-index:999;
}
.mobile-menu.active{right:0}


.menu-close{
  position:absolute;
  top:18px;
  right:50px;
  width:32px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px; 
  font-weight:800;
  color:#ffffff;
  background:none;
  border:none;
  cursor:pointer;
}
@media(max-width:600px){
  .menu-close{right:16px;}
}



/* ===== MOBILE LINKS ===== */
.mobile-menu a,
.mobile-menu button{
  text-align:left;
  padding:12px;
  border-radius:6px;
  background:none;
  color:#ffffff;
  font-weight:600;
}
.mobile-menu a:hover,
.mobile-menu button:hover{background:#2b2d31}
.mobile-menu .btn-login{width:100%}

/* ===== ADAPTIVE ===== */
@media (max-width:900px){
  nav{display:none}
  .burger{display:flex}
}
@media (max-width:600px){
  .header-inner{
    padding-left:16px;
    padding-right:16px;
  }
}