English

DiceLab

Balls of Fortune

ElRoyal Casino

// Global welcome-bonus dropdown: makes a RichText header toggle its paired
// bonuses/promo-code organism. Supports multiple independent instances on
// the same page (e.g. the in-page block and a modal copy), each with its
// own collapse behavior controlled via data attributes.

(function () {
  'use strict';

  const SCRIPT_ID = 'welcome-bonus-dropdown';

  // ---- Config: adjust these per brand ----
  const CONFIG = {
    animation: {
      durationMs: 300,
      // Max height of the expanded dropdown (in vh); content taller than this scrolls inside
      maxHeightVh: 60,
    },

    // Auto-collapse the dropdown once a bonus pick gets confirmed server-side (Cancel button becomes active)
    autoCollapseOnConfirm: true,

    icon: {
      default: '/assets/gift_7f58f876fd.svg', // bonus list available, nothing picked yet
      selected: '/assets/gift_7f58f876fd.svg', // a bonus is selected/confirmed
      noBonuses: '/assets/gift_7f58f876fd.svg', // no bonuses available, promo code only
    },

    texts: {
      // Bonus list is available, user has not picked one yet
      notSelected: {
        title: '',
        subtitle: 'Available bonuses',
        buttonText: 'Select',
      },
      // A bonus is selected/confirmed — subtitle gets overridden with the actual bonus name
      selected: {
        title: 'Your Bonus',
        buttonText: 'Change',
      },
      // No bonuses available, only a promo code can be entered
      noBonuses: {
        title: '',
        subtitle: 'Have a promo code?',
        buttonText: 'Continue',
      },
    },
  };

  // Instance pairing: every header/organism pair on the page shares the same
  // key via these two attributes, e.g. data-bonus-header="main" /
  // data-bonus-organism="main". Trigger visibility (e.g. hiding on desktop)
  // is controlled entirely outside this script (Strapi grid item settings);
  // this script never hides the header itself.
  const HEADER_SELECTOR = '[data-bonus-header]';
  const ORGANISM_ATTR = 'data-bonus-organism';

  // Optional, set on the organism element. When present, the collapse/expand
  // behavior (and its CSS) only applies below this viewport width (px) — above
  // it, the organism is just displayed statically, no dropdown mechanics.
  // When absent, the dropdown is active at every viewport width.
  const DISABLE_DROPDOWN_ATTR = 'data-disable-dropdown';

  // Structural selectors below describe the WrapperOrganism/BonusesDepositWidget
  // markup itself (owned by the Next.js components), not per-instance Strapi
  // config — do not change these when wiring up a new instance.
  const COLLAPSE_TARGET_SELECTOR = '[data-cp="wrapperContainerProps"]';
  const BONUS_WIDGET_SELECTOR = '[data-organism="ComponentPlayerAccountBonusesDepositWidget"]';
  const MAIN_BOX_SELECTOR = '[data-cp="mainBoxProps"][data-testid="ComponentPlayerAccountBonusesDepositWidget"]';
  const CHECKED_ICON_SELECTOR = '[data-cp="checkboxCheckedIconProps"]';
  const BONUS_ITEM_SELECTOR = '[data-cp="bonusListItemProps"]';
  const BONUS_TITLE_SELECTOR = '[data-cp="typographyProps"]';
  const CANCEL_BUTTON_SELECTOR = '[data-testid="ComponentPlayerAccountBonusesDepositWidget-cancelBonusButton"]';
  const BONUS_TERMS_SELECTOR = '[data-cp="bonusDescriptionTypographyProps"]';
  const DEPOSIT_INFO_SELECTOR = '[data-cp="depositInfoTypographyProps"]';

  // Wrapper that keeps the Cancel button in flow next to the confirmed bonus item
  const CANCEL_TERMS_WRAPPER_CLASS = 'wbd-cancel-terms-wrapper';

  const STATE_ATTR = `data-${SCRIPT_ID}-state`;

  // Marker attribute that temporarily kills the max-height transition. Used
  // only for the first state application on a freshly (re)rendered collapse
  // target, whose default CSS state is "expanded/visible" until JS sets
  // STATE_ATTR — without this, that initial snap-to-collapsed briefly
  // animates and reads as an unwanted flash (most visible right as a modal
  // opens).
  const NO_ANIM_ATTR = `data-${SCRIPT_ID}-no-anim`;

  // instanceKey -> instance state
  const instances = new Map();

  function logWarning(message, error) {
    console.warn(`[${SCRIPT_ID}] ${message}`, error || '');
  }

  function injectBaseStyles() {
    if (document.querySelector(`#${SCRIPT_ID}-styles-base`)) return;

    // Header cosmetics (colors, layout, button/chevron swap) are already
    // styled in the RichText block itself — these rules only patch the
    // no-bonuses variant, which needs the chevron visible where the base
    // header CSS hides it on [data-state="collapsed"].
    document.head.insertAdjacentHTML('beforeend', `
      <style id="${SCRIPT_ID}-styles-base">
        ${HEADER_SELECTOR}[data-bonus-state="noBonuses"] .action-button {
          display: none;
        }

        ${HEADER_SELECTOR}[data-bonus-state="noBonuses"] .action-chevron {
          display: inline-block !important;
          transform: rotate(90deg);
        }

        ${HEADER_SELECTOR}[data-bonus-state="noBonuses"][data-state="expanded"] .action-chevron {
          transform: none;
        }
      </style>
    `);
  }

  // Per-instance collapse CSS, wrapped in a max-width media query when disableBreakpoint is set
  function injectInstanceStyles(instanceKey, disableBreakpoint) {
    const styleId = `${SCRIPT_ID}-styles-${instanceKey}`;
    if (document.querySelector(`#${styleId}`)) return;

    const organismSelector = `[${ORGANISM_ATTR}="${instanceKey}"]`;
    const collapseRules = `
      ${organismSelector} ${COLLAPSE_TARGET_SELECTOR} {
        overflow: auto;
        max-height: ${CONFIG.animation.maxHeightVh}vh;
        transition: max-height ${CONFIG.animation.durationMs}ms ease;
      }

      ${organismSelector} ${COLLAPSE_TARGET_SELECTOR}[${STATE_ATTR}="collapsed"] {
        overflow: hidden;
        max-height: 0;
      }

      ${organismSelector} ${COLLAPSE_TARGET_SELECTOR}[${NO_ANIM_ATTR}] {
        transition: none;
      }
    `;

    const css = disableBreakpoint
      ? `@media (max-width: ${disableBreakpoint - 1}px) { ${collapseRules} }`
      : collapseRules;

    document.head.insertAdjacentHTML('beforeend', `<style id="${styleId}">${css}</style>`);
  }

  function getConfirmedBonusItem(mainBox) {
    const checkedIcon = mainBox.querySelector(CHECKED_ICON_SELECTOR);
    if (!checkedIcon) return null;

    // A checked icon alone only reflects the local radio pick. The bonus is
    // confirmed/reserved server-side only once the Cancel button becomes
    // clickable (Activate itself stays disabled here — it only fires once
    // a real deposit is made outside this widget).
    const cancelButton = mainBox.querySelector(CANCEL_BUTTON_SELECTOR);
    if (!cancelButton || cancelButton.disabled) return null;

    return checkedIcon.closest(BONUS_ITEM_SELECTOR);
  }

  function getConfirmedBonusTitle(mainBox) {
    const item = getConfirmedBonusItem(mainBox);
    const titleElement = item ? item.querySelector(BONUS_TITLE_SELECTOR) : null;

    return titleElement ? titleElement.textContent.trim() : null;
  }

  function getOrCreateTermsWrapper(termsElement) {
    const parent = termsElement.parentElement;
    if (parent && parent.classList.contains(CANCEL_TERMS_WRAPPER_CLASS)) {
      return parent;
    }

    const wrapper = document.createElement('div');
    wrapper.className = CANCEL_TERMS_WRAPPER_CLASS;
    parent.insertBefore(wrapper, termsElement);
    wrapper.appendChild(termsElement);
    return wrapper;
  }

  function unwrapTermsElement(termsElement) {
    const wrapper = termsElement.parentElement;
    if (!wrapper || !wrapper.classList.contains(CANCEL_TERMS_WRAPPER_CLASS)) return;

    const grandParent = wrapper.parentElement;
    if (!grandParent) return;

    grandParent.insertBefore(termsElement, wrapper);
    wrapper.remove();
  }

  // Used when the confirmed item has no terms paragraph
  function getOrCreateItemWrapper(item) {
    const existingWrapper = item.querySelector(`:scope > .${CANCEL_TERMS_WRAPPER_CLASS}`);
    if (existingWrapper) return existingWrapper;

    const wrapper = document.createElement('div');
    wrapper.className = CANCEL_TERMS_WRAPPER_CLASS;
    item.appendChild(wrapper);
    return wrapper;
  }

  function clearWrappedItemWrapper(instance) {
    if (instance.wrappedItemWrapper && instance.wrappedItemWrapper.isConnected) {
      instance.wrappedItemWrapper.remove();
    }
    instance.wrappedItemWrapper = null;
  }

  function clearWrappedTermsElement(instance) {
    if (instance.wrappedTermsElement && instance.wrappedTermsElement.isConnected) {
      unwrapTermsElement(instance.wrappedTermsElement);
    }
    instance.wrappedTermsElement = null;
  }

  function restoreCancelButtonPosition(mainBox, cancelButton) {
    const depositInfo = mainBox.querySelector(DEPOSIT_INFO_SELECTOR);

    if (depositInfo) {
      if (cancelButton.nextElementSibling !== depositInfo) {
        depositInfo.parentElement.insertBefore(cancelButton, depositInfo);
      }
    } else if (cancelButton.parentElement !== mainBox) {
      mainBox.appendChild(cancelButton);
    }
  }

  function positionCancelButton(instance, wrapperOrganism) {
    const bonusWidget = wrapperOrganism.querySelector(BONUS_WIDGET_SELECTOR);
    const mainBox = bonusWidget ? bonusWidget.querySelector(MAIN_BOX_SELECTOR) : null;
    if (!mainBox) return;

    const cancelButton = mainBox.querySelector(CANCEL_BUTTON_SELECTOR);
    if (!cancelButton) return;

    const item = getConfirmedBonusItem(mainBox);

    if (!item) {
      clearWrappedTermsElement(instance);
      clearWrappedItemWrapper(instance);
      restoreCancelButtonPosition(mainBox, cancelButton);
      return;
    }

    const termsElement = item.querySelector(BONUS_TERMS_SELECTOR);

    if (termsElement) {
      clearWrappedItemWrapper(instance);

      if (instance.wrappedTermsElement && instance.wrappedTermsElement !== termsElement) {
        clearWrappedTermsElement(instance);
      }

      const wrapper = getOrCreateTermsWrapper(termsElement);
      if (cancelButton.parentElement !== wrapper) {
        wrapper.appendChild(cancelButton);
      }
      instance.wrappedTermsElement = termsElement;
      return;
    }

    clearWrappedTermsElement(instance);

    if (instance.wrappedItemWrapper && instance.wrappedItemWrapper.parentElement !== item) {
      clearWrappedItemWrapper(instance);
    }

    const wrapper = getOrCreateItemWrapper(item);
    if (cancelButton.parentElement !== wrapper) {
      wrapper.appendChild(cancelButton);
    }
    instance.wrappedItemWrapper = wrapper;
  }

  function getBonusWidgetState(wrapperOrganism) {
    const bonusWidget = wrapperOrganism.querySelector(BONUS_WIDGET_SELECTOR);
    const mainBox = bonusWidget ? bonusWidget.querySelector(MAIN_BOX_SELECTOR) : null;

    if (!mainBox) {
      return { state: 'noBonuses', selectedTitle: null };
    }

    const selectedTitle = getConfirmedBonusTitle(mainBox);

    return {
      state: selectedTitle ? 'selected' : 'notSelected',
      selectedTitle,
    };
  }

  function updateHeaderContent(header, wrapperOrganism) {
    const { state, selectedTitle } = getBonusWidgetState(wrapperOrganism);
    const iconElement = header.querySelector('.icon');
    const titleElement = header.querySelector('.title');
    const subtitleElement = header.querySelector('.subtitle');
    const actionButtonElement = header.querySelector('.action-button');

    const textConfig = CONFIG.texts[state];
    const iconSrc = CONFIG.icon[state === 'notSelected' ? 'default' : state];

    iconElement.src = iconSrc;
    titleElement.textContent = textConfig.title;
    subtitleElement.textContent = state === 'selected' ? selectedTitle : textConfig.subtitle;
    actionButtonElement.textContent = textConfig.buttonText;
    header.setAttribute('data-bonus-state', state);

    return { state, selectedTitle };
  }

  function applyExpandedState(instance) {
    instance.header.setAttribute('data-state', instance.isExpanded ? 'expanded' : 'collapsed');
    instance.header.setAttribute('aria-expanded', String(instance.isExpanded));
    instance.collapseTarget.setAttribute(STATE_ATTR, instance.isExpanded ? 'expanded' : 'collapsed');
  }

  function toggleExpanded(instance) {
    instance.isExpanded = !instance.isExpanded;
    applyExpandedState(instance);
  }

  function bindHeader(instance) {
    const { header } = instance;
    if (header.dataset.bound === 'true') return;

    header.dataset.bound = 'true';

    function handleToggle() {
      if (!instance.collapseTarget) return;
      toggleExpanded(instance);
    }

    header.addEventListener('click', handleToggle);
    // Keyboard support: the header is not a native button
    header.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        handleToggle();
      }
    });
  }

  function refreshInstanceContent(instance) {
    // First application on this (possibly brand-new) collapse target: apply
    // it with the transition suppressed so a collapsed instance simply isn't
    // there on first paint instead of visibly collapsing, then force layout
    // before restoring the transition so subsequent toggles animate normally.
    instance.collapseTarget.setAttribute(NO_ANIM_ATTR, '');
    applyExpandedState(instance);
    void instance.collapseTarget.offsetHeight;
    instance.collapseTarget.removeAttribute(NO_ANIM_ATTR);

    instance.previousSelectedTitle = updateHeaderContent(instance.header, instance.wrapperOrganism).selectedTitle;
    positionCancelButton(instance, instance.wrapperOrganism);
  }

  function watchWrapperOrganism(instance) {
    if (instance.selectionObserver) {
      instance.selectionObserver.disconnect();
    }

    refreshInstanceContent(instance);

    instance.selectionObserver = new MutationObserver(() => {
      const result = updateHeaderContent(instance.header, instance.wrapperOrganism);
      positionCancelButton(instance, instance.wrapperOrganism);

      // Auto-collapse only once the pick is confirmed (Cancel becomes
      // clickable) — not on the raw checked-icon toggle, which fires before
      // that confirmation and could still be reverted
      if (
        CONFIG.autoCollapseOnConfirm &&
        instance.isExpanded &&
        result.state === 'selected' &&
        result.selectedTitle !== instance.previousSelectedTitle
      ) {
        instance.isExpanded = false;
        applyExpandedState(instance);
      }

      instance.previousSelectedTitle = result.selectedTitle;
    });

    // childList/subtree only: the checked/unchecked icon is swapped as a
    // whole element, not toggled via an attribute, and this also avoids the
    // observer re-triggering itself off of our own setAttribute() calls
    instance.selectionObserver.observe(instance.wrapperOrganism, {
      childList: true,
      subtree: true,
    });
  }

  function ensureInstance(instanceKey, header) {
    // No organism for this key (yet, or ever, on this page) is a normal
    // state, not an error — stay quiet and let the next tick() re-check
    const wrapperOrganism = document.querySelector(`[${ORGANISM_ATTR}="${instanceKey}"]`);
    if (!wrapperOrganism) return;

    const collapseTarget = wrapperOrganism.querySelector(COLLAPSE_TARGET_SELECTOR);
    if (!collapseTarget) {
      logWarning(`"${COLLAPSE_TARGET_SELECTOR}" not found inside the organism wrapper for instance "${instanceKey}"`);
      return;
    }

    let instance = instances.get(instanceKey);
    if (!instance) {
      const disableBreakpointRaw = wrapperOrganism.getAttribute(DISABLE_DROPDOWN_ATTR);
      const disableBreakpoint = disableBreakpointRaw ? Number(disableBreakpointRaw) : null;

      instance = {
        key: instanceKey,
        header,
        wrapperOrganism: null,
        collapseTarget: null,
        selectionObserver: null,
        isExpanded: false,
        previousSelectedTitle: null,
        wrappedTermsElement: null,
        wrappedItemWrapper: null,
        disableBreakpoint: Number.isFinite(disableBreakpoint) ? disableBreakpoint : null,
      };
      instances.set(instanceKey, instance);
    }

    // Re-point to the new header node if a React re-render replaced it (e.g.
    // navigating away and back, or closing/reopening a modal copy) — the old
    // node is detached and its click listener is gone with it, so bindHeader
    // below must operate on the current one, not a stale reference.
    const headerChanged = header !== instance.header;
    if (headerChanged) {
      instance.header = header;
    }

    injectInstanceStyles(instanceKey, instance.disableBreakpoint);
    bindHeader(instance);

    // Re-attach if the organism (or the collapse target inside it) was
    // replaced by a React re-render
    if (wrapperOrganism !== instance.wrapperOrganism || collapseTarget !== instance.collapseTarget) {
      instance.wrapperOrganism = wrapperOrganism;
      instance.collapseTarget = collapseTarget;
      watchWrapperOrganism(instance);
    } else if (headerChanged) {
      // Organism itself is unchanged (same MutationObserver still valid),
      // but the header is a fresh node — just resync its content/state.
      refreshInstanceContent(instance);
    }
  }

  function init() {
    if (window.__WELCOME_BONUS_DROPDOWN_INITIALIZED__) return;
    window.__WELCOME_BONUS_DROPDOWN_INITIALIZED__ = true;

    injectBaseStyles();

    // No timeout-bound wait here: on a slow mobile connection / cold direct
    // load, headers and organisms can take much longer than any fixed
    // timeout to appear. A perpetual observer just keeps checking instead
    // of giving up and leaving instances unbound.
    function tick() {
      const headers = document.querySelectorAll(HEADER_SELECTOR);

      headers.forEach((header) => {
        const instanceKey = header.getAttribute('data-bonus-header');
        if (!instanceKey) {
          logWarning('Header is missing a data-bonus-header instance key', header);
          return;
        }

        ensureInstance(instanceKey, header);
      });
    }

    tick();

    // Kept alive for the whole session: selecting/activating/canceling a
    // bonus re-renders these widgets' DOM repeatedly after the first paint,
    // and new instances (e.g. a modal opened later) can appear at any time
    const bodyObserver = new MutationObserver(tick);
    bodyObserver.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }

  init();
})();

// End of Welcome Bonus Dropdown


// Cashier iframe bridge: syncs cashier iframe height and forwards cashier GA events to dataLayer

(function () {
  'use strict';

  const SCRIPT_ID = 'cashier-iframe-bridge';
  const CASHIER_CONTAINER_SELECTOR = '[data-organism="ComponentPlayerAccountCashier"]';

  const PUSHED_EVENTS_STORAGE_KEY = `${SCRIPT_ID}-pushed-events`;
  const MAX_PUSHED_EVENTS = 100;

  // Service event of the cashier, never sent to GA
  const IGNORED_EVENT = 'deposit_number';

  if (window.__CASHIER_IFRAME_BRIDGE_INIT__) return;
  window.__CASHIER_IFRAME_BRIDGE_INIT__ = true;

  function warn(message, details) {
    console.warn(`[${SCRIPT_ID}] ${message}`, details ?? '');
  }

  // --- Message routing ---

  function handleMessage(event) {
    // Messages posted by the page itself (browser extensions, widgets) are skipped cheaply
    if (!event.source || event.source === window) return;

    const cashierIframe = findCashierIframe(event.source);
    if (!cashierIframe) return;

    const data = parseMessageData(event.data);
    if (!data || typeof data !== 'object') return;

    try {
      if (data.type === 'fixHeight') {
        setIframeHeight(cashierIframe, data.height);
        return;
      }

      // Remember deposit number from standalone cashier messages
      if (data.event === 'deposit_number' && data.depositNumber !== undefined) {
        rememberDepositNumber(data.depositNumber);
      }

      const gaEvent = normalizeGaEvent(data);
      if (gaEvent) {
        handleGaEvent(gaEvent);
      }
    } catch (error) {
      warn('Failed to handle cashier message', error);
    }
  }

  // Multiple cashier containers can exist at once (e.g. deposit page + modal),
  // so the iframe that sent the message is matched by its contentWindow
  function findCashierIframe(sourceWindow) {
    const containers = document.querySelectorAll(CASHIER_CONTAINER_SELECTOR);

    for (const container of containers) {
      const iframe = container.querySelector('iframe');
      if (iframe?.contentWindow === sourceWindow) return iframe;
    }

    return null;
  }

  function parseMessageData(rawData) {
    if (typeof rawData !== 'string') return rawData;

    try {
      return JSON.parse(rawData);
    } catch (error) {
      return null;
    }
  }

  // --- "fixHeight" message: resize the cashier iframe wrapper ---

  function setIframeHeight(iframe, height) {
    const wrapper = iframe.parentElement?.parentElement;

    if (!wrapper) {
      warn('Cashier iframe wrapper not found');
      return;
    }

    wrapper.style.height = height;
  }

  // --- GA events ---

  // Converts both supported formats to { params, id }:
  //   new:    { namespace: "cashier", type: "gaEvent", timestamp, payload: { event, ... } }
  //   legacy: { gaevent: { event, ... }, gatime }
  function normalizeGaEvent(data) {
    if (data.namespace === 'cashier' && data.type === 'gaEvent' && data.payload) {
      return { params: data.payload, id: data.timestamp };
    }

    if (data.gaevent) {
      return { params: data.gaevent, id: data.gatime };
    }

    return null;
  }

  function handleGaEvent({ params, id }) {
    // Remember deposit number from GA event payload
    if (params.depositNumber !== undefined) {
      rememberDepositNumber(params.depositNumber);
    }

    if (!params.event || !id) {
      warn('GA event is missing event name or id', params.event);
      return;
    }

    if (params.event === IGNORED_EVENT) return;

    // The cashier can post the same event more than once, so each event is pushed only once per session
    const eventKey = `${params.event}:${id}`;
    if (!markEventAsPushed(eventKey)) return;

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: params.event, ...params });
  }

  // --- Deposit number storage ---

  function rememberDepositNumber(depositNumber) {
    sessionStorage.setItem('lastDepositNumber', depositNumber);
  }

  // --- Deduplication via sessionStorage (storage can be unavailable in some browser modes) ---

  // Returns false if the event was already pushed
  function markEventAsPushed(eventKey) {
    let pushedEvents = [];

    try {
      pushedEvents = JSON.parse(sessionStorage.getItem(PUSHED_EVENTS_STORAGE_KEY)) || [];
    } catch (error) {
      pushedEvents = [];
    }

    if (pushedEvents.includes(eventKey)) return false;

    pushedEvents.push(eventKey);

    try {
      sessionStorage.setItem(
        PUSHED_EVENTS_STORAGE_KEY,
        JSON.stringify(pushedEvents.slice(-MAX_PUSHED_EVENTS))
      );
    } catch (error) {
      // Without storage the event is still pushed, only deduplication is lost
    }

    return true;
  }

  window.addEventListener('message', handleMessage);
})();

// End of Cashier Iframe Bridge


(function () {
    if (window.location.hostname === 'my.elroyalecasino.com') {
        return;
    }

        var script = document.createElement('script');
        script.src = '/well-known/getInstallScriptSW.js';
        document.head.appendChild(script);
})();

// Welcome offer tracking: pushes welcome_offer_viewed / welcome_offer_change_click
// to dataLayer based on the welcome-bonus dropdown headers (view + expand)

(function () {
  'use strict';

  const SCRIPT_ID = 'welcome-offer-tracking';

  if (window.__WELCOME_OFFER_TRACKING_INITIALIZED__) return;
  window.__WELCOME_OFFER_TRACKING_INITIALIZED__ = true;

  const EVENTS = {
    viewed: 'welcome_offer_viewed',
    changeClick: 'welcome_offer_change_click',
  };

  const HEADER_SELECTOR = '[data-bonus-header]';
  const OFFER_NAME_SELECTOR = '.subtitle';

  const lastViewedOffer = new WeakMap();

  function logWarning(message, error) {
    console.warn(`[${SCRIPT_ID}] ${message}`, error || '');
  }

  function pushEvent(payload) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(payload);
  }

  function trackViewed(header) {
    if (header.getAttribute('data-bonus-state') !== 'selected') return;

    const nameElement = header.querySelector(OFFER_NAME_SELECTOR);
    const offerName = nameElement ? nameElement.textContent.trim() : '';
    if (!offerName || lastViewedOffer.get(header) === offerName) return;

    lastViewedOffer.set(header, offerName);
    pushEvent({
      event: EVENTS.viewed,
      offer_name: offerName,
    });
  }

  function scan() {
    document.querySelectorAll(HEADER_SELECTOR).forEach((header) => {
      try {
        trackViewed(header);
      } catch (error) {
        logWarning('Failed to process header', error);
      }
    });
  }

  let isScanScheduled = false;
  function scheduleScan() {
    if (isScanScheduled) return;
    isScanScheduled = true;
    requestAnimationFrame(() => {
      isScanScheduled = false;
      scan();
    });
  }

  function trackExpand(event) {
    const target = event.target;
    if (!(target instanceof Element)) return;

    const header = target.closest(HEADER_SELECTOR);
    if (!header || header.getAttribute('data-state') !== 'expanded') return;

    pushEvent({ event: EVENTS.changeClick });
  }

  function handleDocumentKeydown(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      trackExpand(event);
    }
  }

  function init() {
    document.addEventListener('click', trackExpand);
    document.addEventListener('keydown', handleDocumentKeydown);

    scan();

    const observer = new MutationObserver(scheduleScan);
    observer.observe(document.body, {
      childList: true,
      subtree: true,
      characterData: true,
      attributes: true,
      attributeFilter: ['data-bonus-state'],
    });
  }

  init();
})();

// End of Welcome Offer Tracking


deposit

<div data-bonus-header="modal" data-id="welcome-bonus-dropdown-header" data-state="collapsed" aria-expanded="false"><div class="icon-box"><img class="icon" src="/assets/gift_7f58f876fd.svg" alt=""></div><div class="text"><div class="title">&nbsp;</div><div class="subtitle">&nbsp;</div></div><div class="action" role="button" tabindex="0"><div class="action-button">Change</div><svg class="action-chevron" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 15l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div>

#ffffff

#B2B3B3

Please choose the bonus

Game page

DragonGaming

Nucleus

Internal

IQSoft

BetSoft

Saucify

FreshDeck

UltraPlay

LatinStudio

BetGamesTwainSport

BetGames

SpadeGaming

UrgentGames

BGaming

Genesis

Qora

Rival

GenesisNew

Live Dealer games are restricted with a bonus balance. Please deposit to proceed or play available non-live games

Insufficient cash balance to play this Live Dealer game. Please top up your balance or finish playing with your active bonus first.

Insufficient cash balance to play this Live Dealer game. Please top up your balance to proceed.