nav > a.nav-logo,
.site-nav > a.nav-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-logo .nav-mark {
  position: absolute;
  left: -18px;
  top: 50%;
  width: 50%;
  height: 38px;
  transform: translateY(-50%);
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}

.nav-logo .nav-name {
  position: relative;
  z-index: 1;
  display: block;
  height: 23px;
  width: auto;
  margin-left: 12px;
  image-rendering: pixelated;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style: none;
}

body > nav:first-of-type {
  min-height: 64px;
  padding: 1rem 2.5rem;
}

body > nav:first-of-type .nav-links {
  gap: 2rem;
  margin: 0;
  padding: 0;
}

body .nav-links > li > a.nav-login {
  color: rgba(255,255,255,0.48);
  font-size: 0.82rem;
  font-weight: 300;
  transition: color 0.15s;
}

body .nav-links > li > a.nav-login:hover,
body .nav-links > li > a.nav-login.is-active {
  color: #fff;
}

.nav-links a.is-active {
  color: rgba(255,255,255,0.92) !important;
  position: relative;
}
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 2px;
  border-radius: 2px;
  background: #dad1ff;
}

html:not(.poethack-auth-ready) .nav-links > li > a.nav-login[href*="login"] {
  visibility: hidden;
}

.nav-links li.nav-forum-item {
  display: none;
}

html.poethack-logged-in .nav-links li.nav-forum-item {
  display: list-item;
}

.nav-user {
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 3px;
}

.nav-user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  line-height: 0;
  flex-shrink: 0;
}

.nav-user-btn:hover,
.nav-user.is-open .nav-user-btn {
  border-color: rgba(255,255,255,0.22);
}

.nav-user-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-user-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 180px;
  padding: 0.35rem;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  background: #151515;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  display: none;
  z-index: 120;
}

.nav-user.is-open .nav-user-menu {
  display: block;
}

.nav-user-menu a,
.nav-user-menu button {
  display: block;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-family: 'Geist', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.nav-user-menu a:hover,
.nav-user-menu button:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}

.nav-user-menu .is-danger {
  color: rgba(255,150,150,0.85);
}

.nav-user-menu .is-danger:hover {
  color: #ffb0b0;
  background: rgba(255,80,80,0.06);
}

@media (max-width: 760px) {
  body > nav:first-of-type { padding: 0.9rem 0.8rem; }
  body > nav:first-of-type .nav-links { gap: 0.75rem; }
  body .nav-links > li > a.nav-login { font-size: 0.7rem; }
}