.rank-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.rank-icon.small { width: 28px; height: 28px; }
.rank-icon.large { width: 48px; height: 48px; }
.rank-icon.xl { width: 64px; height: 64px; }

/* Authentic Valorant Rank Icons - Using Real Images */
.rank-unranked { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTQiIGZpbGw9IiMyODI4MjgiIHN0cm9rZT0iIzQ0NDQ0NCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xMCAxNGg0djRoLTRWMTRaTTE4IDE0aDR2NGgtNFYxNFoiIGZpbGw9IiM2NjY2NjYiLz4KPHR9Q5ZCdGggZD0iTTggMjBoMTZhMiAyIDAgMCAxIDIgMnYySDZ2LTJhMiAyIDAgMCAxIDItMloiIGZpbGw9IiM0NDQ0NDQiLz4KPHRleHQgeD0iMTYiIHk9IjI3IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjOTk5OTk5IiBmb250LXNpemU9IjYiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiI+VU5SQU5LRUQ8L3RleHQ+Cjwvc3ZnPgo='); }

/* Iron Ranks */
.rank-iron_1, .rank-iron { background-image: url('Iron_1_Rank.webp'); }
.rank-iron_2 { background-image: url('Iron_2_Rank.webp'); }
.rank-iron_3 { background-image: url('Iron_3_Rank.webp'); }

/* Bronze Ranks */
.rank-bronze_1, .rank-bronze { background-image: url('Bronze_1_Rank.webp'); }
.rank-bronze_2 { background-image: url('Bronze_2_Rank.webp'); }
.rank-bronze_3 { background-image: url('Bronze_3_Rank.webp'); }

/* Silver Ranks */
.rank-silver_1, .rank-silver { background-image: url('Silver_1_Rank.webp'); }
.rank-silver_2 { background-image: url('Silver_2_Rank.webp'); }
.rank-silver_3 { background-image: url('Silver_3_Rank.webp'); }

/* Gold Ranks */
.rank-gold_1, .rank-gold { background-image: url('Gold_1_Rank.webp'); }
.rank-gold_2 { background-image: url('Gold_2_Rank.webp'); }
.rank-gold_3 { background-image: url('Gold_3_Rank.webp'); }

/* Platinum Ranks */
.rank-platinum_1, .rank-platinum { background-image: url('Platinum_1_Rank.webp'); }
.rank-platinum_2 { background-image: url('Platinum_2_Rank.webp'); }
.rank-platinum_3 { background-image: url('Platinum_3_Rank.webp'); }

/* Diamond Ranks */
.rank-diamond_1, .rank-diamond { background-image: url('Diamond_1_Rank.webp'); }
.rank-diamond_2 { background-image: url('Diamond_2_Rank.webp'); }
.rank-diamond_3 { background-image: url('Diamond_3_Rank.webp'); }

/* Ascendant Ranks */
.rank-ascendant_1, .rank-ascendant { background-image: url('Ascendant_1_Rank.webp'); }
.rank-ascendant_2 { background-image: url('Ascendant_2_Rank.webp'); }
.rank-ascendant_3 { background-image: url('Ascendant_3_Rank.webp'); }

/* Immortal Ranks */
.rank-immortal_1, .rank-immortal { background-image: url('Immortal_1_Rank.webp'); }
.rank-immortal_2 { background-image: url('Immortal_2_Rank.webp'); }
.rank-immortal_3 { background-image: url('Immortal_3_Rank.webp'); }

/* Radiant Rank */
.rank-radiant { background-image: url('Radiant_Rank.webp'); }

/* Hover effects */
.rank-icon:hover { transform: scale(1.1); transition: transform 0.2s ease; }
.rank-icon.animated { animation: rankGlow 2s ease-in-out infinite; }

@keyframes rankGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(255,255,255,0.3)); }
    50% { filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,255,255,0.6)); }
}