/* ===== AVATAR IMAGE OPTIMIZATION ===== */
/* Improves clarity, sharpness, and prevents distortion */

/* All avatar images */
img[id*="avatar"],
img[class*="avatar"],
.broadcaster-avatar,
.streamer-avatar,
.broadcaster-avatar-splash {
    /* Rendering optimization - prevents blurriness */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    
    /* Fit and position - prevents distortion */
    object-fit: cover;
    object-position: center;
    
    /* Performance - smoother rendering */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Anti-aliasing - smoother edges */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Broadcast page avatar (top-right corner) */
#broadcasterTopAvatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    object-fit: cover;
    object-position: center;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Viewer page header avatar */
#broadcasterHeaderAvatar {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    object-fit: cover;
    object-position: center;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Mobile viewer avatars */
#streamer-avatar,
#streamer-avatar-large {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    object-fit: cover;
    object-position: center;
    /* Removed transform to fix mobile alignment issues */
}

/* Splash page stream card avatars */
.broadcaster-avatar-splash {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    object-fit: cover;
    object-position: center;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Prevent pixelation on high-DPI displays (Retina, 4K) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img[id*="avatar"],
    img[class*="avatar"],
    .broadcaster-avatar,
    .streamer-avatar,
    .broadcaster-avatar-splash {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: high-quality;
    }
}

/* Circular avatars - maintain quality */
img[id*="avatar"][style*="border-radius"],
img[class*="avatar"][class*="rounded"],
.rounded-full img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}