/* One identity format across lobby, preview and match. */
.hud-avatar-wrap { position:relative; display:block; width:22%; aspect-ratio:1; flex-shrink:0; }
.hud-card .hud-avatar-wrap .hud-avatar { display:block; width:100%; height:100%; }
.beta-avatar-border .hud-avatar-wrap::after { content:''; position:absolute; inset:-12%; background:url('assets/beta-border.png') center/100% 100% no-repeat; pointer-events:none; }
:root { --profile-width:min(22vw,340px); --profile-height:clamp(62px,7.5vw,90px); }
@media(max-aspect-ratio:4/3) and (min-width:701px) { :root { --profile-width:min(29vw,340px); } }
@media(max-width:700px) { :root { --profile-width:min(40vw,340px); } }
@media(max-width:450px) { :root { --profile-width:40vw; } }
.hud-card,.menu-profile.hud-card,.inventory-profile.hud-card {
 box-sizing:border-box; width:var(--profile-width); min-width:0; height:var(--profile-height);
 padding:7px 12px; gap:12px; align-items:center; justify-content:flex-start;
 font-family:'Barlow Condensed',sans-serif; background-size:cover; background-position:center;
}
.hud-card .hud-avatar { width:22%; height:auto; max-height:100%; aspect-ratio:1; object-fit:cover; }
.hud-card .hud-name { font-size:clamp(14px,1.5vw,25px); line-height:1.2; }
.hud-card .hud-title { font-size:clamp(10px,1vw,16px); line-height:1.3; }
.match-hud { left:50%; transform:translateX(-50%); width:calc(var(--profile-width) * 2 + 80px); height:var(--profile-height); grid-template-columns:var(--profile-width) 80px var(--profile-width); box-sizing:content-box; }
@media(max-width:700px) {
 .hud-card,.menu-profile.hud-card,.inventory-profile.hud-card { padding:7px 10px; gap:10px; }
 .hud-card .hud-name { font-size:18px; }.hud-card .hud-title { font-size:13px; }
 .match-hud { width:calc(var(--profile-width) * 2 + 44px); grid-template-columns:var(--profile-width) 44px var(--profile-width); }
}

/* Player titles share their treatment in menu, inventory and match HUD. */
.hud-card .hud-title { text-transform:uppercase; }
.hud-card .hud-title.beta-player-title,
#customization-page .cosmetic-item strong.beta-player-title {
 color:#ff858c;
 text-transform:uppercase;
 text-shadow:0 0 5px #ff586550,0 0 10px #ff40552b;
}