/**
 * Twemoji Styles
 * Ensures Twemoji SVG images integrate well with existing styles
 */

/* Twemoji SVG images */
img.twemoji {
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
    display: inline-block;
    /* Preserve aspect ratio */
    object-fit: contain;
    /* Smooth rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Ensure emojis in headings scale properly */
h1 img.twemoji,
h2 img.twemoji,
h3 img.twemoji,
h4 img.twemoji,
h5 img.twemoji,
h6 img.twemoji {
    height: 1.2em;
    width: 1.2em;
    vertical-align: -0.2em;
}

/* Emojis in navigation */
.nav-logo-emoji img.twemoji,
.intensity-icon img.twemoji,
.vip-badge img.twemoji {
    display: inline-block;
    vertical-align: middle;
}

/* Emojis in buttons */
button img.twemoji,
.btn img.twemoji {
    vertical-align: middle;
    margin: 0 0.2em;
}

/* Emojis in modals */
.modal img.twemoji,
.victory-icon img.twemoji {
    display: inline-block;
    vertical-align: middle;
}

/* Emojis in lists */
li img.twemoji {
    margin-right: 0.3em;
    vertical-align: middle;
}

/* Prevent layout shift during emoji replacement */
span:has(img.twemoji),
div:has(img.twemoji) {
    display: inline-block;
}

/* Ensure emojis don't break text flow */
img.twemoji {
    max-width: 100%;
    height: auto;
}