/* Shared intrinsic honor-strip geometry. Artwork lettering is an intentional UI-size exception. */
.nameBg-narrow, .nameBg-responsive { width:100px; height:20px; line-height:20px; aspect-ratio:5 / 1; font-size:8px; }
.nameBg-wide { width:200px; height:30px; line-height:30px; aspect-ratio:20 / 3; font-size:11px; }
/* Select by actual space beside an avatar, not by viewport width. */
.nameTagSlot { display:block; width:100%; min-width:0; container-type:inline-size; container-name:name-tag; }
.nameBg-responsive { background-image:var(--name-tag-small); }
@container name-tag (min-width:202px) {
  .nameBg-responsive { width:200px; height:30px; line-height:30px; aspect-ratio:20 / 3; font-size:11px; background-image:var(--name-tag-large); }
}
.nameBg .nameTagText { display:block; max-width:100%; min-width:0; padding:0 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; }

/* Let the chosen artwork lead; no outer chrome or bright bevel on equipped tags. */
.nameicon.nameGroup { border:0; background:transparent; }
.nameBg { box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }