.brand { width: 140px; height: 54px; padding: 4px; flex: 0 0 auto; }
.brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nav-btn { white-space: nowrap; }
.profile-button { padding: 0; overflow: hidden; flex: 0 0 auto; }
.sprite-avatar,.sprite-resident,.sprite-companion,.sprite-building { background-size: contain; background-position: center; }
.portrait.sprite { height: 300px; }
.wallet .avatar-mini { display: block; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background-size: cover; background-position: center 20%; background-repeat: no-repeat; }
@media (max-width: 1100px) {
  .topbar { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .brand { width: 105px; }
  .nav-btn { padding-left: 9px; padding-right: 9px; }
  .topbar nav { overflow-x: auto; }
}
.collection-lock { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: 0 7px 22px rgba(17,59,85,.22); font-size: 1.9rem; }