(function () {
  "use strict";

  const tarotCardImages = window.TarotCardImages || {};
  const MONTH_LENGTHS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  const MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const MINOR_RANKS = new Set(["Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten"]);
  const COURT_RANKS = new Set(["Knight", "Queen", "Prince"]);
  const EXTRA_SUIT_ORDER = ["wands", "cups", "swords", "disks"];
  const ZODIAC_START_TOKEN_BY_SIGN_ID = {
    aries: "03-21",
    taurus: "04-20",
    gemini: "05-21",
    cancer: "06-21",
    leo: "07-23",
    virgo: "08-23",
    libra: "09-23",
    scorpio: "10-23",
    sagittarius: "11-22",
    capricorn: "12-22",
    aquarius: "01-20",
    pisces: "02-19"
  };
  const MASTER_GRID_SIZE = 18;
  const EXPORT_SLOT_SIZE = 120;
  const EXPORT_CARD_INSET = 0;
  const EXPORT_GRID_GAP = 10;
  const EXPORT_PADDING = 28;
  const EXPORT_BACKGROUND = "#0f0f17";
  const EXPORT_PANEL = "#18181b";
  const EXPORT_CARD_BORDER = "#475569";
  const EXPORT_BADGE_BACKGROUND = "rgba(2, 6, 23, 0.9)";
  const EXPORT_BADGE_TEXT = "#f8fafc";
  const EXPORT_FORMATS = {
    webp: {
      mimeType: "image/webp",
      extension: "webp",
      quality: 0.98
    }
  };
  const BOARD_LAYOUTS = [
    {
      id: "extra-cards",
      title: "Extra Row",
      description: "Top row for aces, princesses, and the non-zodiac majors.",
      positions: Array.from({ length: MASTER_GRID_SIZE }, (_, index) => ({ row: 1, column: index + 1 })),
      getOrderedCards(cards) {
        return cards
          .filter((card) => isExtraTopRowCard(card))
          .sort(compareExtraTopRowCards);
      }
    },
    {
      id: "small-cards",
      title: "Small Cards",
      description: "Outer perimeter in chronological decan order.",
      positions: buildPerimeterPath(10, 5, 5),
      getOrderedCards(cards) {
        return cards
          .filter((card) => isSmallCard(card))
          .sort((left, right) => compareDateTokens(getRelation(left, "decan")?.data?.dateStart, getRelation(right, "decan")?.data?.dateStart, "03-21"));
      }
    },
    {
      id: "court-dates",
      title: "Court Dates",
      description: "Inner left frame in chronological court-date order.",
      positions: buildPerimeterPath(4, 8, 6),
      getOrderedCards(cards) {
        return cards
          .filter((card) => isCourtDateCard(card))
          .sort((left, right) => compareDateTokens(getRelation(left, "courtDateWindow")?.data?.dateStart, getRelation(right, "courtDateWindow")?.data?.dateStart, "11-12"));
      }
    },
    {
      id: "zodiac-trumps",
      title: "Zodiac Trumps",
      description: "Inner right frame in chronological zodiac order.",
      positions: buildPerimeterPath(4, 8, 10),
      getOrderedCards(cards) {
        return cards
          .filter((card) => isZodiacTrump(card))
          .sort((left, right) => {
            const leftSignId = normalizeKey(getRelation(left, "zodiacCorrespondence")?.data?.signId);
            const rightSignId = normalizeKey(getRelation(right, "zodiacCorrespondence")?.data?.signId);
            return compareDateTokens(ZODIAC_START_TOKEN_BY_SIGN_ID[leftSignId], ZODIAC_START_TOKEN_BY_SIGN_ID[rightSignId], "03-21");
          });
      }
    }
  ];

  const state = {
    initialized: false,
    layoutReady: false,
    cardSignature: "",
    slotAssignments: new Map(),
    statusMessage: "Loading tarot cards...",
    drag: null,
    suppressClick: false,
    showInfo: true,
    settingsOpen: false,
    exportInProgress: false,
    exportFormat: "webp"
  };

  let config = {
    ensureTarotSection: null,
    getCards: () => []
  };

  function buildPerimeterPath(size, rowOffset = 1, columnOffset = 1) {
    const path = [];
    for (let column = 0; column < size; column += 1) {
      path.push({ row: rowOffset, column: columnOffset + column });
    }
    for (let row = 1; row < size - 1; row += 1) {
      path.push({ row: rowOffset + row, column: columnOffset + size - 1 });
    }
    for (let column = size - 1; column >= 0; column -= 1) {
      path.push({ row: rowOffset + size - 1, column: columnOffset + column });
    }
    for (let row = size - 2; row >= 1; row -= 1) {
      path.push({ row: rowOffset + row, column: columnOffset });
    }
    return path;
  }

  function getElements() {
    return {
      tarotFrameBoardEl: document.getElementById("tarot-frame-board"),
      tarotFrameStatusEl: document.getElementById("tarot-frame-status"),
      tarotFrameResetEl: document.getElementById("tarot-frame-reset"),
      tarotFrameSettingsToggleEl: document.getElementById("tarot-frame-settings-toggle"),
      tarotFrameSettingsPanelEl: document.getElementById("tarot-frame-settings-panel"),
      tarotFrameShowInfoEl: document.getElementById("tarot-frame-show-info"),
      tarotFrameExportWebpEl: document.getElementById("tarot-frame-export-webp")
    };
  }

  function normalizeLabelText(value) {
    return String(value || "").replace(/\s+/g, " ").trim();
  }

  function isSmallCard(card) {
    return card?.arcana === "Minor"
      && MINOR_RANKS.has(String(card?.rank || ""))
      && Boolean(getRelation(card, "decan"));
  }

  function isCourtDateCard(card) {
    return COURT_RANKS.has(String(card?.rank || ""))
      && Boolean(getRelation(card, "courtDateWindow"));
  }

  function isZodiacTrump(card) {
    return card?.arcana === "Major"
      && Boolean(getRelation(card, "zodiacCorrespondence"));
  }

  function getExtraTopRowCategory(card) {
    const rank = String(card?.rank || "").trim();
    if (rank === "Ace") {
      return 0;
    }
    if (card?.arcana === "Major") {
      return 1;
    }
    if (rank === "Princess") {
      return 2;
    }
    return 3;
  }

  function compareSuitOrder(leftSuit, rightSuit) {
    const leftIndex = EXTRA_SUIT_ORDER.indexOf(normalizeKey(leftSuit));
    const rightIndex = EXTRA_SUIT_ORDER.indexOf(normalizeKey(rightSuit));
    const safeLeft = leftIndex === -1 ? EXTRA_SUIT_ORDER.length : leftIndex;
    const safeRight = rightIndex === -1 ? EXTRA_SUIT_ORDER.length : rightIndex;
    return safeLeft - safeRight;
  }

  function compareExtraTopRowCards(left, right) {
    const categoryDiff = getExtraTopRowCategory(left) - getExtraTopRowCategory(right);
    if (categoryDiff !== 0) {
      return categoryDiff;
    }

    const category = getExtraTopRowCategory(left);
    if (category === 0 || category === 2) {
      return compareSuitOrder(left?.suit, right?.suit);
    }

    if (category === 1) {
      return Number(left?.number) - Number(right?.number);
    }

    return String(left?.name || "").localeCompare(String(right?.name || ""));
  }

  function isExtraTopRowCard(card) {
    return Boolean(card) && !isSmallCard(card) && !isCourtDateCard(card) && !isZodiacTrump(card);
  }

  function buildReadyStatus(cards) {
    return `${Array.isArray(cards) ? cards.length : 0} cards ready. Drag any card to any grid square and it will snap into that spot.`;
  }

  function normalizeKey(value) {
    return String(value || "").trim().toLowerCase();
  }

  function getCards() {
    const cards = config.getCards?.();
    return Array.isArray(cards) ? cards : [];
  }

  function getCardId(card) {
    return String(card?.id || "").trim();
  }

  function getCardMap(cards) {
    return new Map(cards.map((card) => [getCardId(card), card]));
  }

  function getRelation(card, type) {
    return Array.isArray(card?.relations)
      ? card.relations.find((relation) => relation?.type === type) || null
      : null;
  }

  function parseMonthDayToken(token) {
    const match = String(token || "").trim().match(/^(\d{2})-(\d{2})$/);
    if (!match) {
      return null;
    }

    const month = Number(match[1]);
    const day = Number(match[2]);
    if (!Number.isInteger(month) || !Number.isInteger(day) || month < 1 || month > 12) {
      return null;
    }

    return { month, day };
  }

  function formatMonthDay(token) {
    const parsed = parseMonthDayToken(token);
    if (!parsed) {
      return "";
    }
    return `${MONTH_ABBR[parsed.month - 1]} ${parsed.day}`;
  }

  function decrementToken(token) {
    const parsed = parseMonthDayToken(token);
    if (!parsed) {
      return null;
    }

    if (parsed.day > 1) {
      return `${String(parsed.month).padStart(2, "0")}-${String(parsed.day - 1).padStart(2, "0")}`;
    }

    const previousMonth = parsed.month === 1 ? 12 : parsed.month - 1;
    const previousDay = MONTH_LENGTHS[previousMonth - 1];
    return `${String(previousMonth).padStart(2, "0")}-${String(previousDay).padStart(2, "0")}`;
  }

  function formatDateRange(startToken, endToken) {
    const start = parseMonthDayToken(startToken);
    const end = parseMonthDayToken(endToken);
    if (!start || !end) {
      return "";
    }

    const startMonth = MONTH_ABBR[start.month - 1];
    const endMonth = MONTH_ABBR[end.month - 1];
    if (start.month === end.month) {
      return `${startMonth} ${start.day}-${end.day}`;
    }
    return `${startMonth} ${start.day}-${endMonth} ${end.day}`;
  }

  function toOrdinalDay(token) {
    const parsed = parseMonthDayToken(token);
    if (!parsed) {
      return Number.POSITIVE_INFINITY;
    }

    const daysBeforeMonth = MONTH_LENGTHS.slice(0, parsed.month - 1).reduce((total, length) => total + length, 0);
    return daysBeforeMonth + parsed.day;
  }

  function getCyclicDayValue(token, cycleStartToken) {
    const value = toOrdinalDay(token);
    const cycleStart = toOrdinalDay(cycleStartToken);
    if (!Number.isFinite(value) || !Number.isFinite(cycleStart)) {
      return Number.POSITIVE_INFINITY;
    }

    return (value - cycleStart + 365) % 365;
  }

  function compareDateTokens(leftToken, rightToken, cycleStartToken) {
    return getCyclicDayValue(leftToken, cycleStartToken) - getCyclicDayValue(rightToken, cycleStartToken);
  }

  function buildCardSignature(cards) {
    return cards.map((card) => getCardId(card)).filter(Boolean).sort().join("|");
  }

  function resolveDeckOptions(card) {
    const deckId = String(tarotCardImages.getActiveDeck?.() || "").trim();
    const trumpNumber = card?.arcana === "Major" && Number.isFinite(Number(card?.number))
      ? Number(card.number)
      : undefined;

    if (!deckId && !Number.isFinite(trumpNumber)) {
      return null;
    }

    return {
      ...(deckId ? { deckId } : {}),
      ...(Number.isFinite(trumpNumber) ? { trumpNumber } : {})
    };
  }

  function resolveCardThumbnail(card) {
    if (!card) {
      return "";
    }

    const deckOptions = resolveDeckOptions(card) || undefined;
    return String(
      tarotCardImages.resolveTarotCardThumbnail?.(card.name, deckOptions)
      || tarotCardImages.resolveTarotCardImage?.(card.name, deckOptions)
      || ""
    ).trim();
  }

  function getDisplayCardName(card) {
    const label = tarotCardImages.getTarotCardDisplayName?.(card?.name, resolveDeckOptions(card) || undefined);
    return String(label || card?.name || "Tarot").trim() || "Tarot";
  }

  function getCardOverlayDate(card) {
    const decan = getRelation(card, "decan")?.data || null;
    if (decan?.dateStart && decan?.dateEnd) {
      return formatDateRange(decan.dateStart, decan.dateEnd);
    }

    const court = getRelation(card, "courtDateWindow")?.data || null;
    if (court?.dateStart && court?.dateEnd) {
      return formatDateRange(court.dateStart, court.dateEnd);
    }

    const zodiac = getRelation(card, "zodiacCorrespondence")?.data || null;
    const signId = normalizeKey(zodiac?.signId);
    const signStart = ZODIAC_START_TOKEN_BY_SIGN_ID[signId];
    if (signStart) {
      const signIds = Object.keys(ZODIAC_START_TOKEN_BY_SIGN_ID);
      const index = signIds.indexOf(signId);
      const nextSignId = signIds[(index + 1) % signIds.length];
      const nextStart = ZODIAC_START_TOKEN_BY_SIGN_ID[nextSignId];
      const endToken = decrementToken(nextStart);
      return formatDateRange(signStart, endToken);
    }

    return "";
  }

  function getSlotId(row, column) {
    return `${row}:${column}`;
  }

  function setStatus(message) {
    state.statusMessage = String(message || "").trim();
    const { tarotFrameStatusEl } = getElements();
    if (tarotFrameStatusEl) {
      tarotFrameStatusEl.textContent = state.statusMessage;
    }
  }

  function resetLayout(cards = getCards(), nextStatusMessage = "") {
    state.slotAssignments.clear();

    BOARD_LAYOUTS.forEach((layout) => {
      const orderedCards = layout.getOrderedCards(cards);
      layout.positions.forEach((position, index) => {
        state.slotAssignments.set(getSlotId(position.row, position.column), getCardId(orderedCards[index] || null));
      });
    });

    state.layoutReady = true;
    setStatus(nextStatusMessage || buildReadyStatus(cards));
  }

  function getAssignedCard(slotId, cardMap) {
    const cardId = String(state.slotAssignments.get(slotId) || "").trim();
    return cardMap.get(cardId) || null;
  }

  function getCardOverlayLabel(card) {
    return getCardOverlayDate(card) || formatMonthDay(getRelation(card, "decan")?.data?.dateStart) || getDisplayCardName(card);
  }

  function createSlot(row, column, card) {
    const slotId = getSlotId(row, column);
    const slotEl = document.createElement("div");
    slotEl.className = "tarot-frame-slot";
    slotEl.dataset.slotId = slotId;
    slotEl.style.gridRow = String(row);
    slotEl.style.gridColumn = String(column);

    if (state.drag?.sourceSlotId === slotId) {
      slotEl.classList.add("is-drag-source");
    }

    if (state.drag?.hoverSlotId === slotId && state.drag?.started) {
      slotEl.classList.add("is-drop-target");
    }

    const button = document.createElement("button");
    button.type = "button";
    button.className = "tarot-frame-card";
    button.dataset.slotId = slotId;
    button.draggable = false;

    if (!card) {
      slotEl.classList.add("is-empty-slot");
      button.classList.add("is-empty");
      button.tabIndex = -1;
      const emptyEl = document.createElement("span");
      emptyEl.className = "tarot-frame-slot-empty";
      button.appendChild(emptyEl);
      slotEl.appendChild(button);
      return slotEl;
    }

    button.dataset.cardId = getCardId(card);
    button.setAttribute("aria-label", `${getDisplayCardName(card)} in row ${row}, column ${column}`);
    button.title = getDisplayCardName(card);

    const imageSrc = resolveCardThumbnail(card);
    if (imageSrc) {
      const image = document.createElement("img");
      image.className = "tarot-frame-card-image";
      image.src = imageSrc;
      image.alt = getDisplayCardName(card);
      image.loading = "lazy";
      image.decoding = "async";
      image.draggable = false;
      button.appendChild(image);
    } else {
      const fallback = document.createElement("span");
      fallback.className = "tarot-frame-card-fallback";
      fallback.textContent = getDisplayCardName(card);
      button.appendChild(fallback);
    }

    if (state.showInfo) {
      const overlay = document.createElement("span");
      overlay.className = "tarot-frame-card-badge";
      overlay.textContent = getCardOverlayLabel(card);
      button.appendChild(overlay);
    }

    slotEl.appendChild(button);
    return slotEl;
  }

  function createLegend() {
    const legendEl = document.createElement("div");
    legendEl.className = "tarot-frame-legend";
    BOARD_LAYOUTS.forEach((layout) => {
      const itemEl = document.createElement("div");
      itemEl.className = "tarot-frame-legend-item";

      const titleEl = document.createElement("strong");
      titleEl.textContent = layout.title;
      const textEl = document.createElement("span");
      textEl.textContent = layout.description;
      itemEl.append(titleEl, textEl);
      legendEl.appendChild(itemEl);
    });
    return legendEl;
  }

  function render() {
    const { tarotFrameBoardEl } = getElements();
    if (!tarotFrameBoardEl) {
      return;
    }

    const cards = getCards();
    const cardMap = getCardMap(cards);
    tarotFrameBoardEl.replaceChildren();

    const panelEl = document.createElement("section");
    panelEl.className = "tarot-frame-panel tarot-frame-panel--master";

    const headEl = document.createElement("div");
    headEl.className = "tarot-frame-panel-head";

    const titleWrapEl = document.createElement("div");
    const titleEl = document.createElement("h3");
    titleEl.className = "tarot-frame-panel-title";
    titleEl.textContent = "Master 18x18 Frame Grid";
    const subtitleEl = document.createElement("p");
    subtitleEl.className = "tarot-frame-panel-subtitle";
    subtitleEl.textContent = "Top row holds the remaining 18 cards, while the centered frame keeps the small cards, court dates, and zodiac trumps grouped together. Every square on the grid is a snap target for custom layouts.";
    titleWrapEl.append(titleEl, subtitleEl);

    const countEl = document.createElement("span");
    countEl.className = "tarot-frame-panel-count";
    countEl.textContent = `${cards.length} cards / ${MASTER_GRID_SIZE * MASTER_GRID_SIZE} cells`;
    headEl.append(titleWrapEl, countEl);

    panelEl.append(headEl, createLegend());

    const gridEl = document.createElement("div");
    gridEl.className = "tarot-frame-grid tarot-frame-grid--master";
    gridEl.classList.toggle("is-info-hidden", !state.showInfo);
    gridEl.style.setProperty("--frame-grid-size", String(MASTER_GRID_SIZE));

    for (let row = 1; row <= MASTER_GRID_SIZE; row += 1) {
      for (let column = 1; column <= MASTER_GRID_SIZE; column += 1) {
        gridEl.appendChild(createSlot(row, column, getAssignedCard(getSlotId(row, column), cardMap)));
      }
    }

    panelEl.appendChild(gridEl);
    tarotFrameBoardEl.appendChild(panelEl);
  }

  function syncControls() {
    const {
      tarotFrameSettingsToggleEl,
      tarotFrameSettingsPanelEl,
      tarotFrameShowInfoEl,
      tarotFrameExportWebpEl,
      tarotFrameResetEl
    } = getElements();

    if (tarotFrameSettingsToggleEl) {
      tarotFrameSettingsToggleEl.setAttribute("aria-expanded", state.settingsOpen ? "true" : "false");
      tarotFrameSettingsToggleEl.textContent = state.settingsOpen ? "Hide Settings" : "Settings";
      tarotFrameSettingsToggleEl.disabled = Boolean(state.exportInProgress);
    }

    if (tarotFrameSettingsPanelEl) {
      tarotFrameSettingsPanelEl.hidden = !state.settingsOpen;
    }

    if (tarotFrameShowInfoEl) {
      tarotFrameShowInfoEl.checked = Boolean(state.showInfo);
      tarotFrameShowInfoEl.disabled = Boolean(state.exportInProgress);
    }

    if (tarotFrameExportWebpEl) {
      const supportsWebp = isExportFormatSupported("webp");
      tarotFrameExportWebpEl.hidden = !supportsWebp;
      tarotFrameExportWebpEl.disabled = Boolean(state.exportInProgress) || !supportsWebp;
      tarotFrameExportWebpEl.textContent = state.exportInProgress ? "Exporting..." : "Export WebP";
      if (supportsWebp) {
        tarotFrameExportWebpEl.title = "Download the current frame grid arrangement as a WebP image.";
      }
    }

    if (tarotFrameResetEl) {
      tarotFrameResetEl.disabled = Boolean(state.exportInProgress);
    }
  }

  function getSlotElement(slotId) {
    return document.querySelector(`.tarot-frame-slot[data-slot-id="${slotId}"]`);
  }

  function setHoverSlot(slotId) {
    const previous = state.drag?.hoverSlotId;
    if (previous && previous !== slotId) {
      getSlotElement(previous)?.classList.remove("is-drop-target");
    }

    if (state.drag) {
      state.drag.hoverSlotId = slotId || "";
    }

    if (slotId) {
      getSlotElement(slotId)?.classList.add("is-drop-target");
    }
  }

  function createDragGhost(card) {
    const ghost = document.createElement("div");
    ghost.className = "tarot-frame-drag-ghost";

    const imageSrc = resolveCardThumbnail(card);
    if (imageSrc) {
      const image = document.createElement("img");
      image.src = imageSrc;
      image.alt = "";
      ghost.appendChild(image);
    }

    if (state.showInfo) {
      const label = document.createElement("span");
      label.className = "tarot-frame-drag-ghost-label";
      label.textContent = getCardOverlayLabel(card);
      ghost.appendChild(label);
    }

    document.body.appendChild(ghost);
    return ghost;
  }

  function moveGhost(ghostEl, clientX, clientY) {
    if (!(ghostEl instanceof HTMLElement)) {
      return;
    }

    ghostEl.style.left = `${clientX}px`;
    ghostEl.style.top = `${clientY}px`;
  }

  function updateHoverSlotFromPoint(clientX, clientY, sourceSlotId) {
    const target = document.elementFromPoint(clientX, clientY);
    const slot = target instanceof Element ? target.closest(".tarot-frame-slot[data-slot-id]") : null;
    const nextSlotId = slot instanceof HTMLElement ? String(slot.dataset.slotId || "") : "";
    setHoverSlot(nextSlotId && nextSlotId !== sourceSlotId ? nextSlotId : "");
  }

  function detachPointerListeners() {
    document.removeEventListener("pointermove", handlePointerMove);
    document.removeEventListener("pointerup", handlePointerUp);
    document.removeEventListener("pointercancel", handlePointerCancel);
  }

  function cleanupDrag() {
    if (!state.drag) {
      return;
    }

    setHoverSlot("");
    getSlotElement(state.drag.sourceSlotId)?.classList.remove("is-drag-source");
    if (state.drag.ghostEl instanceof HTMLElement) {
      state.drag.ghostEl.remove();
    }

    state.drag = null;
    document.body.classList.remove("is-tarot-frame-dragging");
    detachPointerListeners();
  }

  function swapOrMoveSlots(sourceSlotId, targetSlotId) {
    const sourceCardId = String(state.slotAssignments.get(sourceSlotId) || "");
    const targetCardId = String(state.slotAssignments.get(targetSlotId) || "");
    state.slotAssignments.set(targetSlotId, sourceCardId);
    if (targetCardId) {
      state.slotAssignments.set(sourceSlotId, targetCardId);
    } else {
      state.slotAssignments.delete(sourceSlotId);
    }
  }

  function describeSlot(slotId) {
    const [rowText, columnText] = String(slotId || "").split(":");
    return `row ${rowText || "?"}, column ${columnText || "?"}`;
  }

  function openCardLightbox(cardId) {
    const card = getCardMap(getCards()).get(String(cardId || "").trim()) || null;
    if (!card) {
      return;
    }

    const deckOptions = resolveDeckOptions(card);
    const src = String(
      tarotCardImages.resolveTarotCardImage?.(card.name, deckOptions)
      || tarotCardImages.resolveTarotCardThumbnail?.(card.name, deckOptions)
      || ""
    ).trim();

    if (!src) {
      return;
    }

    const label = getDisplayCardName(card);
    window.TarotUiLightbox?.open?.({
      src,
      altText: label,
      label,
      cardId: getCardId(card),
      deckId: String(tarotCardImages.getActiveDeck?.() || "").trim()
    });
  }

  function handlePointerDown(event) {
    const target = event.target;
    if (!(target instanceof Element) || event.button !== 0) {
      return;
    }

    const cardButton = target.closest(".tarot-frame-card[data-slot-id][data-card-id]");
    if (!(cardButton instanceof HTMLButtonElement)) {
      return;
    }

    state.drag = {
      pointerId: event.pointerId,
      sourceSlotId: String(cardButton.dataset.slotId || ""),
      cardId: String(cardButton.dataset.cardId || ""),
      startX: event.clientX,
      startY: event.clientY,
      started: false,
      hoverSlotId: "",
      ghostEl: null
    };

    detachPointerListeners();
    document.addEventListener("pointermove", handlePointerMove);
    document.addEventListener("pointerup", handlePointerUp);
    document.addEventListener("pointercancel", handlePointerCancel);
  }

  function handlePointerMove(event) {
    if (!state.drag || event.pointerId !== state.drag.pointerId) {
      return;
    }

    const movedEnough = Math.hypot(event.clientX - state.drag.startX, event.clientY - state.drag.startY) >= 6;
    if (!state.drag.started && movedEnough) {
      const card = getCardMap(getCards()).get(state.drag.cardId) || null;
      if (!card) {
        cleanupDrag();
        return;
      }

      state.drag.started = true;
      state.drag.ghostEl = createDragGhost(card);
      getSlotElement(state.drag.sourceSlotId)?.classList.add("is-drag-source");
      document.body.classList.add("is-tarot-frame-dragging");
      state.suppressClick = true;
    }

    if (!state.drag.started) {
      return;
    }

    moveGhost(state.drag.ghostEl, event.clientX, event.clientY);
    updateHoverSlotFromPoint(event.clientX, event.clientY, state.drag.sourceSlotId);
    event.preventDefault();
  }

  function finishDrop() {
    if (!state.drag) {
      return;
    }

    const sourceSlotId = state.drag.sourceSlotId;
    const targetSlotId = state.drag.hoverSlotId;
    const draggedCard = getCardMap(getCards()).get(state.drag.cardId) || null;
    const moved = Boolean(targetSlotId && targetSlotId !== sourceSlotId);

    if (moved) {
      swapOrMoveSlots(sourceSlotId, targetSlotId);
      render();
      setStatus(`${getDisplayCardName(draggedCard)} snapped to ${describeSlot(targetSlotId)}.`);
    }

    cleanupDrag();
    if (!moved) {
      state.suppressClick = false;
    }
  }

  function handlePointerUp(event) {
    if (!state.drag || event.pointerId !== state.drag.pointerId) {
      return;
    }

    if (!state.drag.started) {
      cleanupDrag();
      return;
    }

    finishDrop();
  }

  function handlePointerCancel(event) {
    if (!state.drag || event.pointerId !== state.drag.pointerId) {
      return;
    }

    cleanupDrag();
    state.suppressClick = false;
  }

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

    const cardButton = target.closest(".tarot-frame-card[data-card-id]");
    if (!(cardButton instanceof HTMLButtonElement)) {
      return;
    }

    if (state.suppressClick) {
      state.suppressClick = false;
      return;
    }

    openCardLightbox(cardButton.dataset.cardId);
  }

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

    if (target.closest(".tarot-frame-card")) {
      event.preventDefault();
    }
  }

  function handleDocumentClick(event) {
    if (!state.settingsOpen) {
      return;
    }

    const target = event.target;
    if (!(target instanceof Node)) {
      return;
    }

    const { tarotFrameSettingsPanelEl, tarotFrameSettingsToggleEl } = getElements();
    if (tarotFrameSettingsPanelEl?.contains(target) || tarotFrameSettingsToggleEl?.contains(target)) {
      return;
    }

    state.settingsOpen = false;
    syncControls();
  }

  function handleDocumentKeydown(event) {
    if (!state.settingsOpen || event.key !== "Escape") {
      return;
    }

    state.settingsOpen = false;
    syncControls();
  }

  function drawRoundedRectPath(context, x, y, width, height, radius) {
    const nextRadius = Math.max(0, Math.min(radius, width / 2, height / 2));
    context.beginPath();
    context.moveTo(x + nextRadius, y);
    context.lineTo(x + width - nextRadius, y);
    context.quadraticCurveTo(x + width, y, x + width, y + nextRadius);
    context.lineTo(x + width, y + height - nextRadius);
    context.quadraticCurveTo(x + width, y + height, x + width - nextRadius, y + height);
    context.lineTo(x + nextRadius, y + height);
    context.quadraticCurveTo(x, y + height, x, y + height - nextRadius);
    context.lineTo(x, y + nextRadius);
    context.quadraticCurveTo(x, y, x + nextRadius, y);
    context.closePath();
  }

  function fitCanvasLabelText(context, text, maxWidth) {
    const normalized = normalizeLabelText(text);
    if (!normalized || context.measureText(normalized).width <= maxWidth) {
      return normalized;
    }

    let result = normalized;
    while (result.length > 1 && context.measureText(`${result}...`).width > maxWidth) {
      result = result.slice(0, -1).trimEnd();
    }
    return `${result}...`;
  }

  function wrapCanvasText(context, text, maxWidth, maxLines = 2) {
    const normalized = normalizeLabelText(text);
    if (!normalized) {
      return [];
    }

    const words = normalized.split(/\s+/).filter(Boolean);
    const lines = [];
    let current = "";
    words.forEach((word) => {
      const next = current ? `${current} ${word}` : word;
      if (current && context.measureText(next).width > maxWidth) {
        lines.push(current);
        current = word;
      } else {
        current = next;
      }
    });
    if (current) {
      lines.push(current);
    }

    if (lines.length <= maxLines) {
      return lines;
    }

    const clipped = lines.slice(0, Math.max(1, maxLines));
    clipped[clipped.length - 1] = fitCanvasLabelText(context, clipped[clipped.length - 1], maxWidth);
    return clipped;
  }

  function drawImageContain(context, image, x, y, width, height) {
    if (!(image instanceof HTMLImageElement) && !(image instanceof ImageBitmap)) {
      return;
    }

    const sourceWidth = Number(image.width || image.naturalWidth || 0);
    const sourceHeight = Number(image.height || image.naturalHeight || 0);
    if (!(sourceWidth > 0 && sourceHeight > 0)) {
      return;
    }

    const scale = Math.min(width / sourceWidth, height / sourceHeight);
    const drawWidth = sourceWidth * scale;
    const drawHeight = sourceHeight * scale;
    const drawX = x + ((width - drawWidth) / 2);
    const drawY = y + ((height - drawHeight) / 2);
    context.drawImage(image, drawX, drawY, drawWidth, drawHeight);
  }

  function drawSlotToCanvas(context, x, y, size, card, image) {
    if (!card) {
      context.save();
      context.setLineDash([6, 6]);
      context.lineWidth = 1.5;
      context.strokeStyle = "rgba(148, 163, 184, 0.42)";
      drawRoundedRectPath(context, x + 1, y + 1, size - 2, size - 2, 10);
      context.stroke();
      context.restore();
      return;
    }

    const cardX = x + EXPORT_CARD_INSET;
    const cardY = y + EXPORT_CARD_INSET;
    const cardSize = size - (EXPORT_CARD_INSET * 2);

    context.save();
    drawRoundedRectPath(context, cardX, cardY, cardSize, cardSize, 0);
    context.clip();
    if (image) {
      drawImageContain(context, image, cardX, cardY, cardSize, cardSize);
    } else {
      context.fillStyle = EXPORT_PANEL;
      context.fillRect(cardX, cardY, cardSize, cardSize);
      context.fillStyle = "#f8fafc";
      context.textAlign = "center";
      context.textBaseline = "middle";
      context.font = "700 14px 'Segoe UI', sans-serif";
      const lines = wrapCanvasText(context, getDisplayCardName(card), cardSize - 18, 4);
      const lineHeight = 18;
      let currentY = cardY + (cardSize / 2) - (((Math.max(1, lines.length) - 1) * lineHeight) / 2);
      lines.forEach((line) => {
        context.fillText(line, cardX + (cardSize / 2), currentY, cardSize - 18);
        currentY += lineHeight;
      });
    }
    context.restore();

    if (state.showInfo) {
      const overlayText = getCardOverlayLabel(card);
      if (overlayText) {
        const overlayHeight = 30;
        const overlayX = cardX + 4;
        const overlayY = cardY + cardSize - overlayHeight - 4;
        const overlayWidth = cardSize - 8;
        drawRoundedRectPath(context, overlayX, overlayY, overlayWidth, overlayHeight, 8);
        context.fillStyle = EXPORT_BADGE_BACKGROUND;
        context.fill();
        context.fillStyle = EXPORT_BADGE_TEXT;
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.font = "700 11px 'Segoe UI', sans-serif";
        const lines = wrapCanvasText(context, overlayText, overlayWidth - 10, 2);
        const lineHeight = 12;
        let currentY = overlayY + (overlayHeight / 2) - (((Math.max(1, lines.length) - 1) * lineHeight) / 2);
        lines.forEach((line) => {
          context.fillText(line, overlayX + (overlayWidth / 2), currentY, overlayWidth - 10);
          currentY += lineHeight;
        });
      }
    }
  }

  function loadCardImage(src) {
    return new Promise((resolve) => {
      const image = new Image();
      image.crossOrigin = "anonymous";
      image.decoding = "async";
      image.onload = () => resolve(image);
      image.onerror = () => resolve(null);
      image.src = src;
    });
  }

  function isExportFormatSupported(format) {
    const exportFormat = EXPORT_FORMATS[format];
    if (!exportFormat) {
      return false;
    }

    const probeCanvas = document.createElement("canvas");
    const dataUrl = probeCanvas.toDataURL(exportFormat.mimeType);
    return dataUrl.startsWith(`data:${exportFormat.mimeType}`);
  }

  function canvasToBlobByFormat(canvas, format) {
    const exportFormat = EXPORT_FORMATS[format] || EXPORT_FORMATS.webp;
    return new Promise((resolve, reject) => {
      canvas.toBlob((blob) => {
        if (blob) {
          resolve(blob);
          return;
        }
        reject(new Error("Canvas export failed."));
      }, exportFormat.mimeType, exportFormat.quality);
    });
  }

  async function exportImage(format = "webp") {
    const cards = getCards();
    const cardMap = getCardMap(cards);
    const exportFormat = EXPORT_FORMATS[format] || EXPORT_FORMATS.webp;
    const contentSize = (MASTER_GRID_SIZE * EXPORT_SLOT_SIZE) + ((MASTER_GRID_SIZE - 1) * EXPORT_GRID_GAP);
    const canvasSize = contentSize + (EXPORT_PADDING * 2);
    const scale = Math.max(1.5, Math.min(2, Number(window.devicePixelRatio) || 1));
    const canvas = document.createElement("canvas");
    canvas.width = Math.ceil(canvasSize * scale);
    canvas.height = Math.ceil(canvasSize * scale);
    canvas.style.width = `${canvasSize}px`;
    canvas.style.height = `${canvasSize}px`;

    const context = canvas.getContext("2d");
    if (!context) {
      throw new Error("Canvas context is unavailable.");
    }

    context.scale(scale, scale);
    context.imageSmoothingEnabled = true;
    context.imageSmoothingQuality = "high";
    context.fillStyle = EXPORT_BACKGROUND;
    context.fillRect(0, 0, canvasSize, canvasSize);

    const imageCache = new Map();
    cards.forEach((card) => {
      const src = resolveCardThumbnail(card);
      if (src && !imageCache.has(src)) {
        imageCache.set(src, loadCardImage(src));
      }
    });

    const resolvedImages = new Map();
    await Promise.all(cards.map(async (card) => {
      const src = resolveCardThumbnail(card);
      const image = src ? await imageCache.get(src) : null;
      resolvedImages.set(getCardId(card), image || null);
    }));

    for (let row = 1; row <= MASTER_GRID_SIZE; row += 1) {
      for (let column = 1; column <= MASTER_GRID_SIZE; column += 1) {
        const slotId = getSlotId(row, column);
        const card = getAssignedCard(slotId, cardMap);
        const x = EXPORT_PADDING + ((column - 1) * (EXPORT_SLOT_SIZE + EXPORT_GRID_GAP));
        const y = EXPORT_PADDING + ((row - 1) * (EXPORT_SLOT_SIZE + EXPORT_GRID_GAP));
        drawSlotToCanvas(context, x, y, EXPORT_SLOT_SIZE, card, card ? resolvedImages.get(getCardId(card)) : null);
      }
    }

    const blob = await canvasToBlobByFormat(canvas, format);
    const blobUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement("a");
    const stamp = new Date().toISOString().slice(0, 10);
    downloadLink.href = blobUrl;
    downloadLink.download = `tarot-frame-grid-${stamp}.${exportFormat.extension}`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    downloadLink.remove();
    setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
  }

  async function exportFrame(format = "webp") {
    if (state.exportInProgress) {
      return;
    }

    state.exportInProgress = true;
    state.exportFormat = format;
    syncControls();

    try {
      await exportImage(format);
      setStatus(`Downloaded a ${String(format || "webp").toUpperCase()} export of the current frame grid.`);
    } catch (error) {
      window.alert(error instanceof Error ? error.message : "Unable to export the Tarot Frame image.");
    } finally {
      state.exportInProgress = false;
      state.exportFormat = "webp";
      syncControls();
    }
  }

  function bindEvents() {
    const {
      tarotFrameBoardEl,
      tarotFrameResetEl,
      tarotFrameSettingsToggleEl,
      tarotFrameSettingsPanelEl,
      tarotFrameShowInfoEl,
      tarotFrameExportWebpEl
    } = getElements();
    if (tarotFrameBoardEl) {
      tarotFrameBoardEl.addEventListener("pointerdown", handlePointerDown);
      tarotFrameBoardEl.addEventListener("click", handleBoardClick);
      tarotFrameBoardEl.addEventListener("dragstart", handleNativeDragStart);
    }

    if (tarotFrameResetEl) {
      tarotFrameResetEl.addEventListener("click", () => {
        const cards = getCards();
        if (!cards.length) {
          return;
        }
        resetLayout(cards, "Master grid reset to the default chronological frame arrangement.");
        render();
      });
    }

    if (tarotFrameSettingsToggleEl) {
      tarotFrameSettingsToggleEl.addEventListener("click", (event) => {
        event.stopPropagation();
        if (state.exportInProgress) {
          return;
        }
        state.settingsOpen = !state.settingsOpen;
        syncControls();
      });
    }

    if (tarotFrameSettingsPanelEl) {
      tarotFrameSettingsPanelEl.addEventListener("click", (event) => {
        event.stopPropagation();
      });
    }

    if (tarotFrameShowInfoEl) {
      tarotFrameShowInfoEl.addEventListener("change", () => {
        state.showInfo = Boolean(tarotFrameShowInfoEl.checked);
        render();
        syncControls();
      });
    }

    if (tarotFrameExportWebpEl) {
      tarotFrameExportWebpEl.addEventListener("click", () => {
        exportFrame("webp");
      });
    }

    document.addEventListener("click", handleDocumentClick);
    document.addEventListener("keydown", handleDocumentKeydown);
  }

  async function ensureTarotFrameSection(referenceData, magickDataset) {
    if (typeof config.ensureTarotSection === "function") {
      await config.ensureTarotSection(referenceData, magickDataset);
    }

    const cards = getCards();
    if (!cards.length) {
      setStatus("Tarot cards are still loading...");
      return;
    }

    const signature = buildCardSignature(cards);
    if (!state.layoutReady || state.cardSignature !== signature) {
      state.cardSignature = signature;
      resetLayout(cards);
    } else {
      setStatus(state.statusMessage || buildReadyStatus(cards));
    }

    render();
    syncControls();
  }

  function init(nextConfig = {}) {
    config = {
      ...config,
      ...nextConfig
    };

    if (state.initialized) {
      return;
    }

    bindEvents();
    syncControls();
    state.initialized = true;
  }

  window.TarotFrameUi = {
    ...(window.TarotFrameUi || {}),
    init,
    ensureTarotFrameSection,
    render,
    resetLayout,
    exportImage,
    isExportFormatSupported
  };
})();