/* game_tgn_0049 — member nav · Sample Bay Lab Rail */

.g49-header-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
}

.g49-header-meta {
  display: contents;
}

.g49-header-avatar {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(196, 216, 46, 0.35);
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(230, 240, 236, 0.25);
  flex-shrink: 0;
}

.g49-header-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.g49-header-out {
  color: #fda4a4;
  font-size: 0.72rem;
  font-weight: 700;
}
.g49-header-out:hover { color: #fff; }

/* Hidden dual-ID hooks used by api-service.js */
.nav-user[hidden] { display: none !important; }

#userInfo {
  position: relative;
}
#userMenuToggle {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
#userAvatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(196, 216, 46, 0.35);
  background-size: cover;
  background-position: center;
}
#userMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  padding: 6px;
  background: var(--g49-panel, #f0f5f2);
  border: 1px solid var(--g49-line, rgba(21, 32, 37, 0.12));
  border-radius: 4px;
  z-index: 10002;
  box-shadow: 0 8px 20px rgba(21, 32, 37, 0.12);
}
#userMenu[hidden] { display: none !important; }
#userMenu a {
  display: block;
  padding: 8px 10px;
  color: var(--g49-ink, #152025);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 3px;
}
#userMenu a:hover {
  background: rgba(196, 216, 46, 0.2);
  color: var(--g49-ink, #152025);
}

/* Ensure rail auth stays visible when logged in */
#userInfoRow {
  width: auto;
}
#userInfoRow[style*="display: flex"],
#userInfoRow[style*="display:flex"] {
  display: flex !important;
  flex-direction: row;
  align-items: center;
}
@media (min-width: 900px) {
  #userInfoRow {
    width: 100%;
  }
  #userInfoRow[style*="display: flex"],
  #userInfoRow[style*="display:flex"] {
    flex-direction: row;
    align-items: center;
  }
  .g49-header-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }
}