document.addEventListener("DOMContentLoaded", () => {
    const headline = document.querySelector(".headline h1");
    if (!headline) return;

    const wrapEmojis = (node) => {
        // Only process text nodes
        if (node.nodeType === Node.TEXT_NODE) {
            const wrapper = document.createElement('span');
            wrapper.innerHTML = node.textContent.replace(
                /([\uD800-\uDBFF][\uDC00-\uDFFF]|\u200D|\uFE0F|\p{Emoji})/gu,
                '<span class="emoji">$1</span>'
            );
            node.replaceWith(...wrapper.childNodes);
        } else if (node.nodeType === Node.ELEMENT_NODE) {
            // Recursively process child nodes, but skip our own emoji spans
            if (!node.classList.contains('emoji')) {
                Array.from(node.childNodes).forEach(wrapEmojis);
            }
        }
    };

    // Process all child nodes initially
    Array.from(headline.childNodes).forEach(wrapEmojis);

    // Observe future changes
    new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                mutation.addedNodes.forEach(wrapEmojis);
            }
        });
    }).observe(headline, { childList: true, subtree: true });
});