.player-portrait{isolation:isolate;border:1px solid var(--border);background:var(--surface);box-sizing:border-box;border-radius:22%;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.portrait-face{border-radius:inherit;background:var(--surface);justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.portrait-face img{object-fit:cover;width:100%;height:100%;display:block}.player-portrait.has-frame{background:0 0;border:0;border-radius:0}.has-frame .portrait-face{border-radius:50%;inset:12%}.avatar-frame{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.frame-wave_silver{--frame-ink:#344b5f;--frame-main:#65b4ce;--frame-light:#ceebed;--frame-deep:#3b8fae;--frame-cream:#fff9ed}.frame-orbit_gold{--frame-ink:#6a4938;--frame-main:#e8b75b;--frame-light:#ffe7a4;--frame-deep:#b98039;--frame-cream:#fff9ed}.frame-dusk_violet{--frame-ink:#49385f;--frame-main:#a79adb;--frame-light:#e0d5f7;--frame-deep:#8070bb;--frame-cream:#fff9ed}.frame-glints{animation:4.2s ease-in-out infinite portrait-glint}.frame-bubbles{animation:5s ease-in-out infinite portrait-bubbles}.avatar-frame:not([data-animate=true]) :is(.frame-glints,.frame-bubbles){animation-play-state:paused}.player-portrait[data-compact=true] .frame-filigree{display:none}@keyframes portrait-glint{0%,to{opacity:.55}50%{opacity:1}}@keyframes portrait-bubbles{0%,to{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.app .topbar .tb-avatar{width:52px;height:52px;box-shadow:none;background:0 0;border:0;border-radius:12px;flex:0 0 52px;display:inline-flex;overflow:visible}.app .topbar .tb-avatar>.player-portrait{width:100%!important;height:100%!important}.app .topbar .tb-id{gap:10px}@media (max-width:1023px){.app .topbar .tb-avatar{flex-basis:44px;width:44px;height:44px}.app .topbar .tb-id{gap:8px}}@media (max-width:767px){.app .topbar .tb-avatar{flex-basis:40px;width:40px;height:40px}.app .topbar .tb-id{gap:6px}.app .topbar .tb-id-txt{min-width:0}.app .topbar .tb-name{text-overflow:ellipsis;max-width:100%;overflow:hidden}}@media (prefers-reduced-motion:reduce){.avatar-frame :is(.frame-glints,.frame-bubbles){animation:none}}