/* VillageRealm V2.2.6 targeted layout hotfix — no business logic changes. */
/* Guest hero: use the real village artwork to occupy the previously empty column. */
@media (min-width: 851px) {
  body.realm-app .vr-landing-hero { align-items: stretch; }
  body.realm-app .vr-landing-hero .vr-landing-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    background: linear-gradient(180deg, #213b35 0%, #213b35 30%, rgba(32,57,49,.96) 48%, rgba(32,57,49,.58) 68%, rgba(32,57,49,.24) 100%), url('/assets/img/pure-village-1280.webp') center bottom / cover no-repeat;
  }
}
/* Thumbnail art must remain within each feature/world tile. */
body.realm-app .vr-landing-art img,
body.realm-app .vr-landing-world img { display:block; max-width:100%; object-fit:contain; }
/* Profile trigger: a circular avatar + readable name + discreet chevron, no hover background. */
body.realm-app .site-nav .profile-menu { flex: 0 0 auto; min-width: 0; }
body.realm-app .site-nav .profile-menu > summary.vr-profile-trigger,
body.realm-app .site-nav .profile-menu > summary.vr-profile-trigger:is(:hover,:active,:focus),
body.realm-app .site-nav .profile-menu[open] > summary.vr-profile-trigger {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 240px;
  width: auto !important;
  padding: 4px 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: none !important;
  color: #fff1d7 !important;
}
body.realm-app .site-nav .profile-menu .profile-summary-avatar {
  flex: 0 0 36px !important;
  display: block;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
body.realm-app .site-nav .profile-menu .vr-profile-nickname {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: 155px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 750;
  line-height: 1.2;
}
body.realm-app .site-nav .profile-menu .profile-chevron {
  flex: 0 0 auto;
  display: inline-block;
  opacity: .82;
}
body.realm-app .site-header .profile-menu-items {
  right: 0;
  top: calc(100% + 5px);
  width: min(290px, calc(100vw - 24px));
  min-width: 0;
  max-width: calc(100vw - 24px);
}
/* Prevent the generic dropdown anchor width:100% rule from stretching the avatar. */
body.realm-app .profile-menu-items .profile-menu-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-width: 0;
}
body.realm-app .profile-menu-items .profile-menu-head > a {
  flex: 0 0 42px !important;
  display: block !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.realm-app .profile-menu-items .profile-menu-head > a img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover;
}
body.realm-app .profile-menu-items .profile-menu-head > div {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
body.realm-app .profile-menu-items .profile-menu-head strong {
  overflow-wrap: anywhere;
}
body.realm-app .profile-menu-items .profile-menu-head small a {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
@media (max-width: 900px) {
  body.realm-app .site-nav .profile-menu > summary.vr-profile-trigger { max-width: 100%; }
  body.realm-app .site-nav .profile-menu .vr-profile-nickname { max-width: min(30ch, calc(100vw - 170px)); }
  body.realm-app .site-header .profile-menu-items { position: static; width: 100%; max-width: 100%; }
}