.emoji-sprite {
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: middle;
    overflow: hidden;
}

/* 统一图源：128px版 */
.emoji-128 {
    background-image: url('../img/sprite_128.webp');
    background-size: 1024px 1152px;
    --emoji-unit: 128px;
    width: 128px;
    height: 128px;
}

/* 尺寸变体 */
.emoji-sm { 
    --emoji-size: 24px;
    width: 24px; 
    height: 24px; 
    background-size: calc(1024px * 24 / 128) calc(1152px * 24 / 128);
    --emoji-unit: 24px;
}
.emoji-md { 
    --emoji-size: 32px;
    width: 32px; 
    height: 32px; 
    background-size: calc(1024px * 32 / 128) calc(1152px * 32 / 128);
    --emoji-unit: 32px;
}
.emoji-lg { 
    --emoji-size: 64px;
    width: 64px; 
    height: 64px; 
    background-size: calc(1024px * 64 / 128) calc(1152px * 64 / 128);
    --emoji-unit: 64px;
}

/* 8列网格位置定义 */
.emoji-p-0-0 { background-position: 0 0; }
.emoji-p-0-1 { background-position: calc(-1 * var(--emoji-unit)) 0; }
.emoji-p-0-2 { background-position: calc(-2 * var(--emoji-unit)) 0; }
.emoji-p-0-3 { background-position: calc(-3 * var(--emoji-unit)) 0; }
.emoji-p-0-4 { background-position: calc(-4 * var(--emoji-unit)) 0; }
.emoji-p-0-5 { background-position: calc(-5 * var(--emoji-unit)) 0; }
.emoji-p-0-6 { background-position: calc(-6 * var(--emoji-unit)) 0; }
.emoji-p-0-7 { background-position: calc(-7 * var(--emoji-unit)) 0; }

.emoji-p-1-0 { background-position: 0 calc(-1 * var(--emoji-unit)); }
.emoji-p-1-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-1 * var(--emoji-unit)); }
.emoji-p-1-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-1 * var(--emoji-unit)); }
.emoji-p-1-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-1 * var(--emoji-unit)); }
.emoji-p-1-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-1 * var(--emoji-unit)); }
.emoji-p-1-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-1 * var(--emoji-unit)); }
.emoji-p-1-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-1 * var(--emoji-unit)); }
.emoji-p-1-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-1 * var(--emoji-unit)); }

.emoji-p-2-0 { background-position: 0 calc(-2 * var(--emoji-unit)); }
.emoji-p-2-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-2 * var(--emoji-unit)); }
.emoji-p-2-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-2 * var(--emoji-unit)); }
.emoji-p-2-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-2 * var(--emoji-unit)); }
.emoji-p-2-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-2 * var(--emoji-unit)); }
.emoji-p-2-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-2 * var(--emoji-unit)); }
.emoji-p-2-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-2 * var(--emoji-unit)); }
.emoji-p-2-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-2 * var(--emoji-unit)); }

.emoji-p-3-0 { background-position: 0 calc(-3 * var(--emoji-unit)); }
.emoji-p-3-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-3 * var(--emoji-unit)); }
.emoji-p-3-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-3 * var(--emoji-unit)); }
.emoji-p-3-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-3 * var(--emoji-unit)); }
.emoji-p-3-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-3 * var(--emoji-unit)); }
.emoji-p-3-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-3 * var(--emoji-unit)); }
.emoji-p-3-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-3 * var(--emoji-unit)); }
.emoji-p-3-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-3 * var(--emoji-unit)); }

.emoji-p-4-0 { background-position: 0 calc(-4 * var(--emoji-unit)); }
.emoji-p-4-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-4 * var(--emoji-unit)); }
.emoji-p-4-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-4 * var(--emoji-unit)); }
.emoji-p-4-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-4 * var(--emoji-unit)); }
.emoji-p-4-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-4 * var(--emoji-unit)); }
.emoji-p-4-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-4 * var(--emoji-unit)); }
.emoji-p-4-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-4 * var(--emoji-unit)); }
.emoji-p-4-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-4 * var(--emoji-unit)); }

.emoji-p-5-0 { background-position: 0 calc(-5 * var(--emoji-unit)); }
.emoji-p-5-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-5 * var(--emoji-unit)); }
.emoji-p-5-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-5 * var(--emoji-unit)); }
.emoji-p-5-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-5 * var(--emoji-unit)); }
.emoji-p-5-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-5 * var(--emoji-unit)); }
.emoji-p-5-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-5 * var(--emoji-unit)); }
.emoji-p-5-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-5 * var(--emoji-unit)); }
.emoji-p-5-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-5 * var(--emoji-unit)); }

.emoji-p-6-0 { background-position: 0 calc(-6 * var(--emoji-unit)); }
.emoji-p-6-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-6 * var(--emoji-unit)); }
.emoji-p-6-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-6 * var(--emoji-unit)); }
.emoji-p-6-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-6 * var(--emoji-unit)); }
.emoji-p-6-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-6 * var(--emoji-unit)); }
.emoji-p-6-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-6 * var(--emoji-unit)); }
.emoji-p-6-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-6 * var(--emoji-unit)); }
.emoji-p-6-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-6 * var(--emoji-unit)); }

.emoji-p-7-0 { background-position: 0 calc(-7 * var(--emoji-unit)); }
.emoji-p-7-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-7 * var(--emoji-unit)); }
.emoji-p-7-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-7 * var(--emoji-unit)); }
.emoji-p-7-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-7 * var(--emoji-unit)); }
.emoji-p-7-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-7 * var(--emoji-unit)); }
.emoji-p-7-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-7 * var(--emoji-unit)); }
.emoji-p-7-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-7 * var(--emoji-unit)); }
.emoji-p-7-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-7 * var(--emoji-unit)); }

.emoji-p-8-0 { background-position: 0 calc(-8 * var(--emoji-unit)); }
.emoji-p-8-1 { background-position: calc(-1 * var(--emoji-unit)) calc(-8 * var(--emoji-unit)); }
.emoji-p-8-2 { background-position: calc(-2 * var(--emoji-unit)) calc(-8 * var(--emoji-unit)); }
.emoji-p-8-3 { background-position: calc(-3 * var(--emoji-unit)) calc(-8 * var(--emoji-unit)); }
.emoji-p-8-4 { background-position: calc(-4 * var(--emoji-unit)) calc(-8 * var(--emoji-unit)); }
.emoji-p-8-5 { background-position: calc(-5 * var(--emoji-unit)) calc(-8 * var(--emoji-unit)); }
.emoji-p-8-6 { background-position: calc(-6 * var(--emoji-unit)) calc(-8 * var(--emoji-unit)); }
.emoji-p-8-7 { background-position: calc(-7 * var(--emoji-unit)) calc(-8 * var(--emoji-unit)); }