/* Avatar Cosmetic Styles - Extracted from generate_avatar_frames_css() */
.username-cosmetic { text-decoration: none !important; font-weight: 500; }
.username-cosmetic:hover { text-decoration: underline !important; opacity: 0.9; }
.avatar-cosmetic-container { position: relative; display: inline-block; }
.avatar-cosmetic-container img { display: block; border: none !important; box-shadow: none !important; }
.avatar-frame { position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; pointer-events: none; z-index: 2; border: 3px solid; }
.avatar-frame-gold { border-color: #FFD700; background: transparent; box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 25px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.2); animation: goldGlow 2s ease-in-out infinite; }
@keyframes goldGlow { 0%, 100% { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 25px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.2); } 50% { border-color: #FFC700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.7), 0 0 35px rgba(255, 215, 0, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.3); } }
.avatar-frame-aura { border-color: #667eea; background: transparent; box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 35px rgba(102, 126, 234, 0.3), inset 0 0 12px rgba(102, 126, 234, 0.2); animation: auraGlow 3s ease-in-out infinite; }
@keyframes auraGlow { 0%, 100% { border-color: #667eea; box-shadow: 0 0 20px rgba(102, 126, 234, 0.5), 0 0 35px rgba(102, 126, 234, 0.3), inset 0 0 12px rgba(102, 126, 234, 0.2); } 50% { border-color: #764ba2; box-shadow: 0 0 30px rgba(118, 75, 162, 0.7), 0 0 50px rgba(118, 75, 162, 0.4), inset 0 0 18px rgba(118, 75, 162, 0.3); } }
.avatar-effect-particles::before { content: '✨'; position: absolute; top: -8px; right: -8px; font-size: 20px; animation: sparkle 2s ease-in-out infinite; z-index: 3; }
@keyframes sparkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 50% { opacity: 0.5; transform: scale(1.2) rotate(10deg); } }