.rarity-dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  margin-right: 0.45em;
  border: 1.5px solid black;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.dot-common {background: #9ca3af;}
.dot-magic {background: #3b82f6;}
.dot-rare {background: #eab308;}
.dot-epic {background: #a855f7;}
.dot-unique {background: #22d3ee;}
.dot-set {background: #22c55e;}
.dot-legendary {background: #f97316;}