.emoji-sprite {
    background-image: url('../img/emojis-sprite.png');
    background-repeat: no-repeat;
    background-size: 640px 192px;
    display: inline-block;
    width: 64px;
    height: 64px;
    vertical-align: middle;
    overflow: hidden;
}

/* Size variations using width/height instead of scale to avoid overflow issues */
.emoji-sm { 
    --emoji-size: 24px;
    width: 24px; 
    height: 24px; 
    background-size: 240px 72px; /* 640 * (24/64) = 240 */
}
.emoji-md { 
    --emoji-size: 32px;
    width: 32px; 
    height: 32px; 
    background-size: 320px 96px; /* 640 * (32/64) = 320 */
}
.emoji-lg { 
    --emoji-size: 64px;
    width: 64px; 
    height: 64px; 
    background-size: 640px 192px;
}

.emoji-sparkles { background-position: 0 0; }
.emoji-fire { background-position: calc(-1 * var(--emoji-size, 64px)) 0; }
.emoji-heart { background-position: calc(-2 * var(--emoji-size, 64px)) 0; }
.emoji-star { background-position: calc(-3 * var(--emoji-size, 64px)) 0; }
.emoji-bulb { background-position: calc(-4 * var(--emoji-size, 64px)) 0; }
.emoji-rocket { background-position: calc(-5 * var(--emoji-size, 64px)) 0; }
.emoji-camera { background-position: calc(-6 * var(--emoji-size, 64px)) 0; }
.emoji-palette { background-position: calc(-7 * var(--emoji-size, 64px)) 0; }
.emoji-memo { background-position: calc(-8 * var(--emoji-size, 64px)) 0; }
.emoji-pin { background-position: calc(-9 * var(--emoji-size, 64px)) 0; }
.emoji-crown { background-position: 0 calc(-1 * var(--emoji-size, 64px)); }
.emoji-gift { background-position: calc(-1 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-coffee { background-position: calc(-2 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-balloon { background-position: calc(-3 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-music { background-position: calc(-4 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-pizza { background-position: calc(-5 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-moon { background-position: calc(-6 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-rainbow { background-position: calc(-7 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-medal { background-position: calc(-8 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-trophy { background-position: calc(-9 * var(--emoji-size, 64px)) calc(-1 * var(--emoji-size, 64px)); }
.emoji-laptop { background-position: 0 calc(-2 * var(--emoji-size, 64px)); }
.emoji-book { background-position: calc(-1 * var(--emoji-size, 64px)) calc(-2 * var(--emoji-size, 64px)); }
.emoji-heart_eyes { background-position: calc(-2 * var(--emoji-size, 64px)) calc(-2 * var(--emoji-size, 64px)); }
.emoji-laugh { background-position: calc(-3 * var(--emoji-size, 64px)) calc(-2 * var(--emoji-size, 64px)); }
.emoji-cool { background-position: calc(-4 * var(--emoji-size, 64px)) calc(-2 * var(--emoji-size, 64px)); }
.emoji-think { background-position: calc(-5 * var(--emoji-size, 64px)) calc(-2 * var(--emoji-size, 64px)); }
.emoji-party { background-position: calc(-6 * var(--emoji-size, 64px)) calc(-2 * var(--emoji-size, 64px)); }