/* BLOC pixel icons (js/icons.js): sizing anywhere outside the main menu.
   Icons are 16x16 pixel art; whole multiples of 16px stay perfectly crisp. */
.bi { display: inline-flex; width: 1.15em; height: 1.15em; line-height: 0; vertical-align: -0.2em; flex: none; }
/* A bare blocIcon() SVG sits in text like a glyph; inside a sized .bi slot it fills the slot. */
.bi-svg { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.bi svg, .bi .bi-svg { width: 100%; height: 100%; vertical-align: top; }
.btn .bi, .hdr-btn .bi, .btn > .bi-svg { margin-right: 6px; }
.btn .bi:only-child, .hdr-btn .bi:only-child, .btn > .bi-svg:only-child { margin-right: 0; }
/* Player portraits (js/avatar/portrait.js): a 24px pixel headshot that fills its slot.
   The slot (.lb-avatar, .avatar, #mm-avatar...) sets the size. */
.pp { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.pp img { width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: cover; }
.pp.pp-npc img { image-rendering: auto; object-position: top center; }
.pp > .bi-svg { width: 60%; height: 60%; vertical-align: top; }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px rgba(61,220,132,.7); vertical-align: 1px; }