(() => {
    const CARD_ICONS = ['★', '◆', '✦', '☀', '☘', '⚙', '♣', '♠', '♥', '♦', '✚', '⚡', '☾', '✿'];

    function iconForValue(value) {
        const normalized = String(value || '');
        if (normalized === '?') return '❓';
        if (normalized === '☕') return '☕';
        if (normalized === '∞') return '∞';

        let hash = 0;
        for (let i = 0; i < normalized.length; i += 1) {
            hash = (hash * 31 + normalized.charCodeAt(i)) >>> 0;
        }
        return CARD_ICONS[hash % CARD_ICONS.length];
    }

    function appendFace(el, value) {
        const normalized = String(value || '');

        const topLeft = document.createElement('span');
        topLeft.className = 'card-corner top-left';
        topLeft.textContent = normalized;

        const center = document.createElement('span');
        center.className = 'card-center-icon';
        center.textContent = iconForValue(normalized);

        const bottomRight = document.createElement('span');
        bottomRight.className = 'card-corner bottom-right';
        bottomRight.textContent = normalized;

        el.appendChild(topLeft);
        el.appendChild(center);
        el.appendChild(bottomRight);
    }

    window.CardUI = {
        iconForValue,
        appendFace,
    };
})();