/* Original nine-league artwork supplied by the user (2048 × 1152).
   Each badge is a 200 × 232 display window over that unchanged image.
   Set --league-badge-size to change the badge height without stretching it. */
.league-badge {
  --league-badge-size: 40px;
  --league-sprite-x: -0.405172414;
  display: inline-block;
  flex: 0 0 auto;
  width: calc(var(--league-badge-size) * 0.862068966);
  height: var(--league-badge-size);
  background-image: url('./rank-lineup.png');
  background-repeat: no-repeat;
  background-size: calc(var(--league-badge-size) * 8.827586207) calc(var(--league-badge-size) * 4.965517241);
  background-position: calc(var(--league-badge-size) * var(--league-sprite-x)) calc(var(--league-badge-size) * -2);
  vertical-align: middle;
  overflow: hidden;
  /* The outline hides the surrounding screenshot; the emblem pixels are unchanged. */
  clip-path: polygon(7% 12%, 40% 3%, 40% 0%, 60% 0%, 60% 3%, 94% 12%, 96% 29%, 96% 59%, 94% 78%, 76% 90%, 50% 99%, 24% 90%, 7% 78%, 4% 59%, 4% 29%);
}
.league-badge[data-league="Bronze"] { --league-sprite-x: -0.405172414; }
.league-badge[data-league="Silver"] { --league-sprite-x: -1.301724138; }
.league-badge[data-league="Gold"] { --league-sprite-x: -2.202586207; }
.league-badge[data-league="Platinum"] { --league-sprite-x: -3.090517241; }
.league-badge[data-league="Emerald"] { --league-sprite-x: -3.982758621; }
.league-badge[data-league="Diamond"] { --league-sprite-x: -4.870689655; }
.league-badge[data-league="Elite"] { --league-sprite-x: -5.758620690; }
.league-badge[data-league="Master"] { --league-sprite-x: -6.650862069; }
.league-badge[data-league="Legend"] { --league-sprite-x: -7.543103448; }
.league-badge[data-league="Diamond"],
.league-badge[data-league="Elite"],
.league-badge[data-league="Master"],
.league-badge[data-league="Legend"] {
  clip-path: polygon(4% 3%, 25% 0%, 36% 4%, 40% 0%, 60% 0%, 64% 4%, 75% 0%, 97% 3%, 97% 25%, 100% 27%, 100% 61%, 96% 79%, 76% 92%, 50% 100%, 24% 92%, 4% 79%, 0% 61%, 0% 27%, 4% 25%);
}