/* The level icon (level-badge.js): one SVG -- a heraldic shield fitted
   snugly around the number, centred by the SVG itself -- so nothing around
   it can shift the number. About 17 x 20 px at 13 px text. Sized by the
   surrounding font; it never grows the line it sits in (negative margins). */
.level-badge {
  display: inline-block;
  width: 1.32em;
  height: 1.5em; /* the shield's 30 x 34 */
  margin: -.3em .1em;
  vertical-align: middle;
  font-size: max(1em, 13px);
  line-height: 0;
  letter-spacing: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.level-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The top bar's level: the player's own, a touch larger. */
.player-level:has(.level-badge) { flex-wrap: nowrap; }
.player-level .level-badge { font-size: 15px; }
/* The fight HUD's label clips its overflow (for the name's ellipsis): room
   above and below for the shield, without moving the layout. */
.sheet-hud-label:has(.level-badge), .sheet-hud-label span:has(> .level-badge) { padding-block: .5em; margin-block: -.5em; }
/* an item you cannot wear yet: a greyed shield and a red number */
.level-badge.is-too-high { filter: grayscale(.85) drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.level-badge.is-too-high .lvb-num { fill: #ff9a8a; }