Je propose ça : https://jsfiddle.net/p5ctwv6x/

C'est ce que j'ai proposé ce matin et j'y ai ajouté ton idée de remplacer le rang par un cadre autour de l'avatar
Le cercle en bas de l'avatar est à remplir avec une icone d'un carton/bronze/diamant/rubis etc... selon le rang