@rpg-engine/long-bow 0.8.182 → 0.8.184

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useMemo, me
 import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, formatDCAmount, MarketplaceAcceptedCurrency, goldToDC, MarketplaceTransactionType, CharacterClass as CharacterClass$1, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, DC_TO_GOLD_SWAP_RATE, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, formatDCAmount, MarketplaceAcceptedCurrency, goldToDC, MarketplaceTransactionType, CharacterClass as CharacterClass$1, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
 export { MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
@@ -39126,6 +39126,36 @@ var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-ldufv0-3"
 })(["width:100%;"]);
 
+/** 100 DC = $1 USD */
+var DC_TO_USD = 100;
+var DCRateStrip = function DCRateStrip() {
+  return React.createElement(RateStrip, null, React.createElement(RateItem, null, React.createElement(RateNum, null, "1 DC"), React.createElement(RateSep, null, "="), React.createElement(RateVal, null, DC_TO_GOLD_SWAP_RATE.toLocaleString(), " Gold")), React.createElement(RateDivider, null), React.createElement(RateItem, null, React.createElement(RateNum, null, DC_TO_USD, " DC"), React.createElement(RateSep, null, "="), React.createElement(RateVal, null, "1 USD")), React.createElement(RateDivider, null), React.createElement(RateItem, null, React.createElement(RateNum, null, "1 USD"), React.createElement(RateSep, null, "="), React.createElement(RateVal, null, (DC_TO_USD * DC_TO_GOLD_SWAP_RATE / 1000).toFixed(0), "K Gold")));
+};
+var RateStrip = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCRateStrip__RateStrip",
+  componentId: "sc-1ltnva-0"
+})(["display:flex;align-items:center;border-top:1px solid rgba(245,158,11,0.1);padding-top:8px;"]);
+var RateItem = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCRateStrip__RateItem",
+  componentId: "sc-1ltnva-1"
+})(["display:flex;align-items:center;gap:5px;flex:1;justify-content:center;"]);
+var RateDivider = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCRateStrip__RateDivider",
+  componentId: "sc-1ltnva-2"
+})(["width:1px;height:12px;background:rgba(245,158,11,0.2);"]);
+var RateNum = /*#__PURE__*/styled.span.withConfig({
+  displayName: "DCRateStrip__RateNum",
+  componentId: "sc-1ltnva-3"
+})(["font-family:'Press Start 2P',cursive !important;font-size:6px !important;color:rgba(255,255,255,0.5) !important;"]);
+var RateSep = /*#__PURE__*/styled.span.withConfig({
+  displayName: "DCRateStrip__RateSep",
+  componentId: "sc-1ltnva-4"
+})(["font-family:'Press Start 2P',cursive !important;font-size:6px !important;color:rgba(255,255,255,0.2) !important;"]);
+var RateVal = /*#__PURE__*/styled.span.withConfig({
+  displayName: "DCRateStrip__RateVal",
+  componentId: "sc-1ltnva-5"
+})(["font-family:'Press Start 2P',cursive !important;font-size:6px !important;color:rgba(254,240,138,0.6) !important;"]);
+
 var Pagination = function Pagination(_ref) {
   var currentPage = _ref.currentPage,
     totalPages = _ref.totalPages,
@@ -39700,8 +39730,7 @@ var DropdownItem = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-k1vvb1-9"
 })(["padding:6px 8px;font-size:11px;font-family:'Press Start 2P',cursive;color:", ";cursor:pointer;&:hover{background:rgba(245,158,11,0.3);}"], uiColors.white);
 
-var DC_TO_GOLD = 5500;
-var DC_TO_USD = 100;
+var DC_TO_USD$1 = 100;
 var DCWalletContent = function DCWalletContent(_ref) {
   var _historyData$transact, _historyData$totalPag, _historyData$currentP;
   var dcBalance = _ref.dcBalance,
@@ -39718,8 +39747,8 @@ var DCWalletContent = function DCWalletContent(_ref) {
     onBuyDC = _ref.onBuyDC,
     onSearchCharacter = _ref.onSearchCharacter,
     searchResults = _ref.searchResults;
-  var usdValue = (dcBalance / DC_TO_USD).toFixed(2);
-  var goldValue = (dcBalance * DC_TO_GOLD).toLocaleString();
+  var usdValue = (dcBalance / DC_TO_USD$1).toFixed(2);
+  var goldValue = (dcBalance * DC_TO_GOLD_SWAP_RATE).toLocaleString();
   var tabs = [{
     id: 'transfer',
     title: 'Transfer',
@@ -39751,7 +39780,7 @@ var DCWalletContent = function DCWalletContent(_ref) {
     role: "button",
     tabIndex: 0,
     title: "Buy Definya Coins"
-  }, React.createElement(FaShoppingCart, null), React.createElement(BuyButtonLabel, null, "Buy DC"))), React.createElement(RateStrip, null, React.createElement(RateItem, null, React.createElement(RateNum, null, "1 DC"), React.createElement(RateSep, null, "="), React.createElement(RateVal, null, "5,500 Gold")), React.createElement(RateDivider, null), React.createElement(RateItem, null, React.createElement(RateNum, null, "100 DC"), React.createElement(RateSep, null, "="), React.createElement(RateVal, null, "1 USD")), React.createElement(RateDivider, null), React.createElement(RateItem, null, React.createElement(RateNum, null, "1 USD"), React.createElement(RateSep, null, "="), React.createElement(RateVal, null, "550K Gold")))), React.createElement(TabsWrapper, null, React.createElement(InternalTabs, {
+  }, React.createElement(FaShoppingCart, null), React.createElement(BuyButtonLabel, null, "Buy DC"))), React.createElement(DCRateStrip, null)), React.createElement(TabsWrapper, null, React.createElement(InternalTabs, {
     tabs: tabs,
     onTabChange: function onTabChange(tabId) {
       if (tabId === 'history') onRequestHistory(1);
@@ -39803,33 +39832,9 @@ var BuyButtonLabel = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCWalletContent__BuyButtonLabel",
   componentId: "sc-1hrivmk-9"
 })(["font-family:'Press Start 2P',cursive !important;font-size:8px !important;color:#000 !important;white-space:nowrap !important;text-shadow:none !important;"]);
-var RateStrip = /*#__PURE__*/styled.div.withConfig({
-  displayName: "DCWalletContent__RateStrip",
-  componentId: "sc-1hrivmk-10"
-})(["display:flex;align-items:center;border-top:1px solid rgba(245,158,11,0.1);padding-top:8px;"]);
-var RateItem = /*#__PURE__*/styled.div.withConfig({
-  displayName: "DCWalletContent__RateItem",
-  componentId: "sc-1hrivmk-11"
-})(["display:flex;align-items:center;gap:5px;flex:1;justify-content:center;"]);
-var RateDivider = /*#__PURE__*/styled.div.withConfig({
-  displayName: "DCWalletContent__RateDivider",
-  componentId: "sc-1hrivmk-12"
-})(["width:1px;height:12px;background:rgba(245,158,11,0.2);"]);
-var RateNum = /*#__PURE__*/styled.span.withConfig({
-  displayName: "DCWalletContent__RateNum",
-  componentId: "sc-1hrivmk-13"
-})(["font-family:'Press Start 2P',cursive !important;font-size:6px !important;color:rgba(255,255,255,0.5) !important;"]);
-var RateSep = /*#__PURE__*/styled.span.withConfig({
-  displayName: "DCWalletContent__RateSep",
-  componentId: "sc-1hrivmk-14"
-})(["font-family:'Press Start 2P',cursive !important;font-size:6px !important;color:rgba(255,255,255,0.2) !important;"]);
-var RateVal = /*#__PURE__*/styled.span.withConfig({
-  displayName: "DCWalletContent__RateVal",
-  componentId: "sc-1hrivmk-15"
-})(["font-family:'Press Start 2P',cursive !important;font-size:6px !important;color:rgba(254,240,138,0.6) !important;"]);
 var TabsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "DCWalletContent__TabsWrapper",
-  componentId: "sc-1hrivmk-16"
+  componentId: "sc-1hrivmk-10"
 })(["padding:0 2.5%;"]);
 
 var _excluded$3 = ["onClose"];
@@ -47174,6 +47179,8 @@ var CharacterMarketplacePanel = function CharacterMarketplacePanel(_ref) {
     onCharacterBuy = _ref.onCharacterBuy,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
+    characterAtlasJSON = _ref.characterAtlasJSON,
+    characterAtlasIMG = _ref.characterAtlasIMG,
     enableHotkeys = _ref.enableHotkeys,
     disableHotkeys = _ref.disableHotkeys,
     _ref$nameFilter = _ref.nameFilter,
@@ -47219,13 +47226,10 @@ var CharacterMarketplacePanel = function CharacterMarketplacePanel(_ref) {
       enableHotkeys == null ? void 0 : enableHotkeys();
     }
   };
-  var getListingPrice = function getListingPrice(listing) {
-    return listing.price.toLocaleString();
-  };
   var renderCharacterSprite = function renderCharacterSprite(snapshot) {
     return React.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
+      atlasIMG: characterAtlasIMG,
+      atlasJSON: characterAtlasJSON,
       spriteKey: snapshot.textureKey + "/down/standing/0.png",
       imgScale: 3,
       height: 64,
@@ -47255,32 +47259,31 @@ var CharacterMarketplacePanel = function CharacterMarketplacePanel(_ref) {
     width: 32,
     height: 32
   }), React.createElement(EmptyText, null, "No character listings found.")) : React.createElement(ListingsGrid, null, filteredListings.map(function (listing) {
+    var _listing$characterSna2, _listing$characterSna3;
     return React.createElement(CharacterListingCard, {
       key: listing._id,
       onClick: function onClick() {
         return handleBuyClick(listing._id);
       },
       "$isBeingBought": listing.isBeingBought
-    }, React.createElement(CharacterSprite, null, renderCharacterSprite(listing.characterSnapshot)), React.createElement(CharacterInfo, null, React.createElement(CharacterName$1, null, listing.characterSnapshot.name || 'Unknown'), React.createElement(CharacterMeta, null, "Level ", listing.characterSnapshot.level, " \xB7 ", listing.characterSnapshot["class"]), React.createElement(SellerInfo, null, "by ", listing.listedByCharacterName), React.createElement(ListingPrice, null, React.createElement(GoldIcon$4, null, React.createElement(SpriteFromAtlas, {
+    }, React.createElement(CharacterSprite, null, renderCharacterSprite(listing.characterSnapshot)), React.createElement(CharacterInfo, null, React.createElement(CharacterName$1, null, listing.characterSnapshot.name || 'Unknown'), React.createElement(CharacterMeta, null, "Lv.", listing.characterSnapshot.level, " \xB7 ", listing.characterSnapshot["class"]), React.createElement(CharacterDetails, null, listing.characterSnapshot.race, " \xB7 ", listing.characterSnapshot.faction), React.createElement(ModeBadge, {
+      "$hardcore": ((_listing$characterSna2 = listing.characterSnapshot.mode) == null ? void 0 : _listing$characterSna2.toLowerCase()) === 'hardcore'
+    }, listing.characterSnapshot.mode || 'Standard'), ((_listing$characterSna3 = listing.characterSnapshot.equipment) == null ? void 0 : _listing$characterSna3.length) > 0 && React.createElement(EquipmentRow, null, listing.characterSnapshot.equipment.slice(0, 3).map(function (eq, i) {
+      return React.createElement(EquipBadge, {
+        key: i,
+        "$rarity": eq.rarity
+      }, eq.rarity || 'Common');
+    })), React.createElement(SellerInfo, null, "by ", listing.listedByCharacterName), React.createElement(ListingPrice, null, React.createElement(DCCoinWrapper$2, null, React.createElement(SpriteFromAtlas, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
-      spriteKey: "others/gold-coin-qty-5.png",
+      spriteKey: "others/definya-coin.png",
       imgScale: 1
-    })), getListingPrice(listing), " Gold")), listing.isBeingBought && React.createElement(BeingBoughtBadge, null, "Pending"));
-  }))), totalCount > itemsPerPage && React.createElement(PagerFooter$1, null, React.createElement(Pagination$1, null, Array.from({
-    length: Math.ceil(totalCount / itemsPerPage)
-  }, function (_, i) {
-    return i + 1;
-  }).map(function (page) {
-    return React.createElement(PageButton, {
-      key: page,
-      "$active": currentPage === page,
-      type: "button",
-      onClick: function onClick() {
-        return onPageChange(page);
-      }
-    }, page);
-  }))));
+    })), formatDCAmount(listing.price), " DC")), listing.isBeingBought && React.createElement(BeingBoughtBadge, null, "Pending"));
+  }))), totalCount > itemsPerPage && React.createElement(PagerFooter$1, null, React.createElement(Pagination, {
+    currentPage: currentPage,
+    totalPages: Math.ceil(totalCount / itemsPerPage),
+    onPageChange: onPageChange
+  })));
 };
 var ToolbarRow$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__ToolbarRow",
@@ -47320,83 +47323,97 @@ var CharacterListingCard = /*#__PURE__*/styled.button.withConfig({
 var CharacterSprite = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__CharacterSprite",
   componentId: "sc-1aiauep-5"
-})(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;"]);
+})(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;width:64px;height:64px;flex-shrink:0;"]);
 var CharacterInfo = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__CharacterInfo",
   componentId: "sc-1aiauep-6"
-})(["display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;"]);
+})(["display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:100%;"]);
 var CharacterName$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterMarketplacePanel__CharacterName",
   componentId: "sc-1aiauep-7"
-})(["font-family:'Press Start 2P',cursive;font-size:0.55rem;color:#f3f4f6;text-transform:uppercase;letter-spacing:0.5px;"]);
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#f3f4f6 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var CharacterMeta = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterMarketplacePanel__CharacterMeta",
   componentId: "sc-1aiauep-8"
-})(["font-size:0.45rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;"]);
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.45rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var CharacterDetails = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterMarketplacePanel__CharacterDetails",
+  componentId: "sc-1aiauep-9"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#9ca3af !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var RARITY_COLORS$1 = {
+  legendary: '#f59e0b',
+  epic: '#a855f7',
+  rare: '#3b82f6',
+  uncommon: '#22c55e',
+  common: '#6b7280'
+};
+var ModeBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterMarketplacePanel__ModeBadge",
+  componentId: "sc-1aiauep-10"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.32rem !important;color:", " !important;border:1px solid ", ";border-radius:3px;padding:1px 4px;text-transform:uppercase;letter-spacing:0.5px;"], function (_ref7) {
+  var $hardcore = _ref7.$hardcore;
+  return $hardcore ? '#ef4444' : '#6b7280';
+}, function (_ref8) {
+  var $hardcore = _ref8.$hardcore;
+  return $hardcore ? 'rgba(239,68,68,0.4)' : 'rgba(107,114,128,0.3)';
+});
+var EquipmentRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterMarketplacePanel__EquipmentRow",
+  componentId: "sc-1aiauep-11"
+})(["display:flex;flex-wrap:wrap;gap:3px;justify-content:center;"]);
+var EquipBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterMarketplacePanel__EquipBadge",
+  componentId: "sc-1aiauep-12"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.3rem !important;color:", " !important;border:1px solid ", "44;border-radius:2px;padding:1px 3px;text-transform:uppercase;letter-spacing:0.3px;"], function (_ref9) {
+  var _RARITY_COLORS$toLowe;
+  var $rarity = _ref9.$rarity;
+  return (_RARITY_COLORS$toLowe = RARITY_COLORS$1[($rarity != null ? $rarity : '').toLowerCase()]) != null ? _RARITY_COLORS$toLowe : RARITY_COLORS$1.common;
+}, function (_ref10) {
+  var _RARITY_COLORS$toLowe2;
+  var $rarity = _ref10.$rarity;
+  return (_RARITY_COLORS$toLowe2 = RARITY_COLORS$1[($rarity != null ? $rarity : '').toLowerCase()]) != null ? _RARITY_COLORS$toLowe2 : RARITY_COLORS$1.common;
+});
 var SellerInfo = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterMarketplacePanel__SellerInfo",
-  componentId: "sc-1aiauep-9"
-})(["font-size:0.4rem;color:#666;text-transform:uppercase;letter-spacing:0.5px;"]);
+  componentId: "sc-1aiauep-13"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.4rem !important;color:#666 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var ListingPrice = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__ListingPrice",
-  componentId: "sc-1aiauep-10"
-})(["display:flex;align-items:center;gap:6px;font-family:'Press Start 2P',cursive;font-size:0.5rem;color:#fef08a;"]);
-var GoldIcon$4 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterMarketplacePanel__GoldIcon",
-  componentId: "sc-1aiauep-11"
-})(["display:flex;align-items:center;justify-content:center;position:relative;top:-0.4rem;left:-0.3rem;"]);
+  componentId: "sc-1aiauep-14"
+})(["display:flex;align-items:center;justify-content:center;gap:4px;font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#fef08a !important;line-height:1;"]);
+var DCCoinWrapper$2 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterMarketplacePanel__DCCoinWrapper",
+  componentId: "sc-1aiauep-15"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;"]);
 var BeingBoughtBadge = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterMarketplacePanel__BeingBoughtBadge",
-  componentId: "sc-1aiauep-12"
-})(["position:absolute;top:6px;right:6px;background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.4);border-radius:4px;padding:2px 6px;font-size:0.35rem;color:#ef4444;text-transform:uppercase;letter-spacing:0.5px;"]);
+  componentId: "sc-1aiauep-16"
+})(["position:absolute;top:6px;right:6px;background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.4);border-radius:4px;padding:2px 6px;font-family:'Press Start 2P',cursive !important;font-size:0.35rem !important;color:#ef4444 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
 var PagerFooter$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__PagerFooter",
-  componentId: "sc-1aiauep-13"
+  componentId: "sc-1aiauep-17"
 })(["display:flex;justify-content:center;align-items:center;padding:8px 0 4px;min-height:36px;width:95%;margin:0 auto;"]);
-var Pagination$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterMarketplacePanel__Pagination",
-  componentId: "sc-1aiauep-14"
-})(["display:flex;gap:6px;"]);
-var PageButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "CharacterMarketplacePanel__PageButton",
-  componentId: "sc-1aiauep-15"
-})(["padding:6px 10px;font-family:'Press Start 2P',cursive;font-size:0.5rem;border-radius:4px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;&:hover{border-color:", ";color:", ";}"], function (_ref7) {
-  var $active = _ref7.$active;
-  return $active ? '#f59e0b' : 'rgba(255,255,255,0.12)';
-}, function (_ref8) {
-  var $active = _ref8.$active;
-  return $active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)';
-}, function (_ref9) {
-  var $active = _ref9.$active;
-  return $active ? '#f59e0b' : '#777';
-}, function (_ref10) {
-  var $active = _ref10.$active;
-  return $active ? '#f59e0b' : 'rgba(255,255,255,0.3)';
-}, function (_ref11) {
-  var $active = _ref11.$active;
-  return $active ? '#f59e0b' : '#bbb';
-});
 var LoadingState$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__LoadingState",
-  componentId: "sc-1aiauep-16"
+  componentId: "sc-1aiauep-18"
 })(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;min-height:160px;"]);
 var spin$1 = /*#__PURE__*/keyframes(["to{transform:rotate(360deg);}"]);
 var Spinner$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__Spinner",
-  componentId: "sc-1aiauep-17"
+  componentId: "sc-1aiauep-19"
 })(["width:28px;height:28px;border:3px solid rgba(245,158,11,0.2);border-top-color:#f59e0b;border-radius:50%;animation:", " 0.7s linear infinite;"], spin$1);
 var LoadingText$2 = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterMarketplacePanel__LoadingText",
-  componentId: "sc-1aiauep-18"
-})(["font-size:0.48rem;color:#8a8a8a;text-transform:uppercase;letter-spacing:1px;"]);
+  componentId: "sc-1aiauep-20"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.48rem !important;color:#8a8a8a !important;text-transform:uppercase;letter-spacing:1px;"]);
 var EmptyState$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplacePanel__EmptyState",
-  componentId: "sc-1aiauep-19"
+  componentId: "sc-1aiauep-21"
 })(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;min-height:200px;"]);
 var EmptyText = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterMarketplacePanel__EmptyText",
-  componentId: "sc-1aiauep-20"
-})(["font-size:0.48rem;color:#71717a;text-transform:uppercase;letter-spacing:1px;"]);
+  componentId: "sc-1aiauep-22"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.48rem !important;color:#71717a !important;text-transform:uppercase;letter-spacing:1px;"]);
 
 var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
   var myCharacterListings = _ref.myCharacterListings,
@@ -47407,6 +47424,8 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
     onCharacterDelist = _ref.onCharacterDelist,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
+    characterAtlasJSON = _ref.characterAtlasJSON,
+    characterAtlasIMG = _ref.characterAtlasIMG,
     enableHotkeys = _ref.enableHotkeys;
   var _useState = useState(null),
     delistingListingId = _useState[0],
@@ -47426,9 +47445,6 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
       enableHotkeys == null ? void 0 : enableHotkeys();
     }
   };
-  var getListingPrice = function getListingPrice(listing) {
-    return listing.price.toLocaleString();
-  };
   var getFormattedDate = function getFormattedDate(date) {
     return new Date(date).toLocaleDateString();
   };
@@ -47449,18 +47465,18 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
     return React.createElement(CharacterListingCard$1, {
       key: listing._id
     }, React.createElement(CharacterSprite$1, null, React.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
+      atlasIMG: characterAtlasIMG,
+      atlasJSON: characterAtlasJSON,
       spriteKey: listing.characterSnapshot.textureKey + "/down/standing/0.png",
       imgScale: 3,
       height: 64,
       width: 64
-    })), React.createElement(CharacterInfo$1, null, React.createElement(CharacterName$2, null, listing.characterSnapshot.name || 'Unknown'), React.createElement(CharacterMeta$1, null, "Level ", listing.characterSnapshot.level), React.createElement(ListingPrice$1, null, React.createElement(GoldIcon$5, null, React.createElement(SpriteFromAtlas, {
+    })), React.createElement(CharacterInfo$1, null, React.createElement(CharacterName$2, null, listing.characterSnapshot.name || 'Unknown'), React.createElement(CharacterMeta$1, null, "Level ", listing.characterSnapshot.level), React.createElement(ListingPrice$1, null, React.createElement(DCCoinWrapper$3, null, React.createElement(SpriteFromAtlas, {
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
-      spriteKey: "others/gold-coin-qty-5.png",
+      spriteKey: "others/definya-coin.png",
       imgScale: 1
-    })), getListingPrice(listing), " Gold"), React.createElement(ListingMeta, null, "Listed ", getFormattedDate(listing.createdAt)), listing.isBeingBought && React.createElement(ListingStatus, {
+    })), formatDCAmount(listing.price), " DC"), React.createElement(ListingMeta, null, "Listed ", getFormattedDate(listing.createdAt)), listing.isBeingBought && React.createElement(ListingStatus, {
       "$status": "pending"
     }, "Sale Pending")), React.createElement(ActionButton, {
       icon: React.createElement(Delete, {
@@ -47474,12 +47490,12 @@ var MyCharacterListingsPanel = function MyCharacterListingsPanel(_ref) {
       iconColor: "#ef4444",
       disabled: listing.isBeingBought
     }));
-  }))), totalCount > itemsPerPage && React.createElement(PagerFooter$2, null, React.createElement(Pagination$2, null, Array.from({
+  }))), totalCount > itemsPerPage && React.createElement(PagerFooter$2, null, React.createElement(Pagination$1, null, Array.from({
     length: Math.ceil(totalCount / itemsPerPage)
   }, function (_, i) {
     return i + 1;
   }).map(function (page) {
-    return React.createElement(PageButton$1, {
+    return React.createElement(PageButton, {
       key: page,
       "$active": currentPage === page,
       type: "button",
@@ -47521,10 +47537,10 @@ var ListingPrice$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MyCharacterListingsPanel__ListingPrice",
   componentId: "sc-su21a6-7"
 })(["display:flex;align-items:center;gap:6px;font-family:'Press Start 2P',cursive;font-size:0.5rem;color:#fef08a;"]);
-var GoldIcon$5 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "MyCharacterListingsPanel__GoldIcon",
+var DCCoinWrapper$3 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "MyCharacterListingsPanel__DCCoinWrapper",
   componentId: "sc-su21a6-8"
-})(["display:flex;align-items:center;justify-content:center;position:relative;top:-0.4rem;left:-0.3rem;"]);
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
 var ListingMeta = /*#__PURE__*/styled.span.withConfig({
   displayName: "MyCharacterListingsPanel__ListingMeta",
   componentId: "sc-su21a6-9"
@@ -47550,11 +47566,11 @@ var PagerFooter$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MyCharacterListingsPanel__PagerFooter",
   componentId: "sc-su21a6-12"
 })(["display:flex;justify-content:center;align-items:center;padding:8px 0 4px;min-height:36px;width:95%;margin:0 auto;"]);
-var Pagination$2 = /*#__PURE__*/styled.div.withConfig({
+var Pagination$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MyCharacterListingsPanel__Pagination",
   componentId: "sc-su21a6-13"
 })(["display:flex;gap:6px;"]);
-var PageButton$1 = /*#__PURE__*/styled.button.withConfig({
+var PageButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "MyCharacterListingsPanel__PageButton",
   componentId: "sc-su21a6-14"
 })(["padding:6px 10px;font-family:'Press Start 2P',cursive;font-size:0.5rem;border-radius:4px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;&:hover{border-color:", ";color:", ";}"], function (_ref5) {
@@ -47586,207 +47602,286 @@ var EmptySubtext = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-su21a6-17"
 })(["font-size:0.45rem;color:#52525b;text-transform:none;letter-spacing:0.5px;text-align:center;max-width:280px;"]);
 
-var CharacterListingForm = function CharacterListingForm(_ref) {
-  var accountCharacters = _ref.accountCharacters,
-    selectedCharacterToList = _ref.selectedCharacterToList,
-    onCharacterSelectToList = _ref.onCharacterSelectToList,
-    onCharacterList = _ref.onCharacterList,
+var CharacterListingModal = function CharacterListingModal(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    accountCharacters = _ref.accountCharacters,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
+    characterAtlasJSON = _ref.characterAtlasJSON,
+    characterAtlasIMG = _ref.characterAtlasIMG,
+    onCharacterList = _ref.onCharacterList,
     enableHotkeys = _ref.enableHotkeys,
     disableHotkeys = _ref.disableHotkeys;
-  var _useState = useState(''),
-    price = _useState[0],
-    setPrice = _useState[1];
-  var _useState2 = useState(false),
-    isCreatingOffer = _useState2[0],
-    setIsCreatingOffer = _useState2[1];
-  var eligibleCharacters = accountCharacters.filter(function (_char) {
-    return !_char.isListedForSale && !_char.tradedAt;
+  var _useState = useState(null),
+    selectedId = _useState[0],
+    setSelectedId = _useState[1];
+  var _useState2 = useState(''),
+    price = _useState2[0],
+    setPrice = _useState2[1];
+  var _useState3 = useState(false),
+    isConfirming = _useState3[0],
+    setIsConfirming = _useState3[1];
+  if (!isOpen) return null;
+  var eligibleCharacters = accountCharacters.filter(function (c) {
+    return !c.isListedForSale && !c.tradedAt;
   });
+  var canList = !!selectedId && Number(price) > 0;
+  var handleClose = function handleClose() {
+    setSelectedId(null);
+    setPrice('');
+    enableHotkeys == null ? void 0 : enableHotkeys();
+    onClose();
+  };
   var handleListClick = function handleListClick() {
-    if (selectedCharacterToList && price && Number(price) > 0) {
-      setIsCreatingOffer(true);
-    }
+    if (canList) setIsConfirming(true);
   };
-  var handleListConfirm = function handleListConfirm() {
-    if (selectedCharacterToList && price && Number(price) > 0) {
-      onCharacterList(selectedCharacterToList._id, Number(price));
-      setPrice('');
-      onCharacterSelectToList({}); // Clear selection
-      setIsCreatingOffer(false);
-      enableHotkeys == null ? void 0 : enableHotkeys();
-    }
+  var handleConfirm = function handleConfirm() {
+    if (!selectedId || !canList) return;
+    onCharacterList(selectedId, Number(price));
+    setSelectedId(null);
+    setPrice('');
+    setIsConfirming(false);
+    enableHotkeys == null ? void 0 : enableHotkeys();
+    onClose();
   };
-  var getCharacterLevel = function getCharacterLevel(character) {
-    var _character$skills;
-    return ((_character$skills = character.skills) == null ? void 0 : _character$skills.level) || 1;
+  var stopPropagation = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var getLevel = function getLevel(c) {
+    var _c$skills;
+    return ((_c$skills = c.skills) == null ? void 0 : _c$skills.level) || 1;
   };
-  return React.createElement(React.Fragment, null, isCreatingOffer && React.createElement(ConfirmModal, {
+  return React.createElement(ModalPortal, null, isConfirming && React.createElement(ConfirmModal, {
+    onConfirm: handleConfirm,
     onClose: function onClose() {
-      setIsCreatingOffer(false);
+      setIsConfirming(false);
       enableHotkeys == null ? void 0 : enableHotkeys();
     },
-    onConfirm: handleListConfirm,
     message: "Are you sure you want to list this character for sale?"
-  }), React.createElement(FormContainer, null, React.createElement(SectionHeader$1, null, React.createElement(SectionLabel$3, null, "List Character for Sale"), React.createElement(SectionDescription, null, "Select an offline character to list on the marketplace.")), React.createElement(CharacterSelectionRow, null, React.createElement(CharacterSlotWrapper, null, selectedCharacterToList ? React.createElement(CharacterSpriteLarge, null, React.createElement(SpriteFromAtlas, {
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    spriteKey: selectedCharacterToList.textureKey + "/down/standing/0.png",
-    imgScale: 3,
-    height: 64,
-    width: 64
-  })) : React.createElement(EmptyCharacterSlot, null, React.createElement(EmptySlotIcon, null, "?"))), React.createElement(CharacterDetails, null, selectedCharacterToList ? React.createElement(React.Fragment, null, React.createElement(CharacterName$3, null, selectedCharacterToList.name || 'Unknown'), React.createElement(CharacterMeta$2, null, "Level ", getCharacterLevel(selectedCharacterToList))) : React.createElement(EmptySelection, null, "Select a character"))), React.createElement(PriceInputWrapper$1, null, React.createElement(PriceLabel, null, "Set Price (Gold)"), React.createElement(PriceInputRow, null, React.createElement(Input, {
+  }), React.createElement(Overlay$7, {
+    onPointerDown: handleClose
+  }), React.createElement(ModalContainer$5, null, React.createElement(ModalContent$5, {
+    onClick: stopPropagation,
+    onTouchStart: stopPropagation,
+    onPointerDown: stopPropagation
+  }, React.createElement(Header$b, null, React.createElement(Title$c, null, "List Character for Sale"), React.createElement(CloseButton$d, {
+    onPointerDown: handleClose,
+    "aria-label": "Close",
+    type: "button"
+  }, React.createElement(FaTimes, null))), React.createElement(CharacterList$1, null, eligibleCharacters.length === 0 ? React.createElement(EmptyState$7, null, "No eligible characters to list.") : eligibleCharacters.map(function (character) {
+    var isSelected = selectedId === character._id;
+    return React.createElement(CharacterRow, {
+      key: character._id,
+      "$selected": isSelected,
+      onPointerDown: function onPointerDown() {
+        return setSelectedId(character._id);
+      },
+      role: "radio",
+      "aria-checked": isSelected,
+      tabIndex: 0,
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          setSelectedId(character._id);
+        }
+      }
+    }, React.createElement(RadioCircle$1, {
+      "$selected": isSelected
+    }), React.createElement(SpriteWrapper$3, null, React.createElement(SpriteFromAtlas, {
+      atlasIMG: characterAtlasIMG,
+      atlasJSON: characterAtlasJSON,
+      spriteKey: character.textureKey + "/down/standing/0.png",
+      imgScale: 2,
+      height: 40,
+      width: 40
+    })), React.createElement(CharacterInfo$2, null, React.createElement(CharacterName$3, null, character.name || 'Unknown'), React.createElement(CharacterMeta$2, null, "Level ", getLevel(character))));
+  })), React.createElement(PriceSection$1, null, React.createElement(PriceLabel, null, "Set Price (DC)"), React.createElement(PriceRow$1, null, React.createElement(Input, {
     onChange: function onChange(e) {
       return setPrice(e.target.value);
     },
     value: price,
     placeholder: "Amount...",
     type: "number",
-    disabled: !selectedCharacterToList,
-    onBlur: enableHotkeys,
+    disabled: eligibleCharacters.length === 0,
     onFocus: disableHotkeys,
+    onBlur: enableHotkeys,
     className: "price-input"
-  }), React.createElement(ListButton, {
+  }), React.createElement(ListBtn, {
     icon: React.createElement(ShoppingBag, {
       width: 18,
       height: 18
     }),
     label: "List",
-    disabled: !selectedCharacterToList || !price || Number(price) <= 0,
+    disabled: !canList,
     onClick: handleListClick
-  }))), eligibleCharacters.length > 0 && React.createElement(AvailableCharactersSection, null, React.createElement(AvailableCharactersLabel, null, "Available Characters"), React.createElement(AvailableCharactersList, null, eligibleCharacters.map(function (character) {
-    return React.createElement(AvailableCharacterItem, {
-      key: character._id,
-      "$selected": (selectedCharacterToList == null ? void 0 : selectedCharacterToList._id) === character._id,
-      onClick: function onClick() {
-        return onCharacterSelectToList(character);
-      },
-      type: "button"
-    }, React.createElement(MiniSprite, null, React.createElement(SpriteFromAtlas, {
-      atlasIMG: atlasIMG,
-      atlasJSON: atlasJSON,
-      spriteKey: character.textureKey + "/down/standing/0.png",
-      imgScale: 2,
-      height: 32,
-      width: 32
-    })), React.createElement(MiniCharacterInfo, null, React.createElement(MiniCharacterName, null, character.name), React.createElement(MiniCharacterMeta, null, "Lvl ", getCharacterLevel(character))));
-  }))), eligibleCharacters.length === 0 && React.createElement(EmptyState$7, null, React.createElement(EmptyText$2, null, "No eligible characters to list."))));
+  })), price && Number(price) > 0 && React.createElement(PricePreview, null, React.createElement(DCCoinWrapper$4, null, React.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: "others/definya-coin.png",
+    imgScale: 1
+  })), React.createElement(PricePreviewAmount, null, Number(price).toLocaleString(), " DC")), React.createElement(DCRateStrip, null)))));
 };
-var FormContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__FormContainer",
-  componentId: "sc-fxv1tt-0"
-})(["width:95%;margin:0 auto;background:rgba(0,0,0,0.15);border-radius:4px;border:1px solid rgba(255,255,255,0.05);padding:16px;display:flex;flex-direction:column;gap:16px;"]);
-var SectionHeader$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__SectionHeader",
-  componentId: "sc-fxv1tt-1"
-})(["display:flex;flex-direction:column;gap:4px;"]);
-var SectionLabel$3 = /*#__PURE__*/styled.p.withConfig({
-  displayName: "CharacterListingForm__SectionLabel",
-  componentId: "sc-fxv1tt-2"
-})(["margin:0;font-size:0.65rem;color:#aaa;text-transform:uppercase;letter-spacing:1px;"]);
-var SectionDescription = /*#__PURE__*/styled.p.withConfig({
-  displayName: "CharacterListingForm__SectionDescription",
-  componentId: "sc-fxv1tt-3"
-})(["margin:0;font-size:0.5rem;color:#666;line-height:1.4;"]);
-var CharacterSelectionRow = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__CharacterSelectionRow",
-  componentId: "sc-fxv1tt-4"
-})(["display:flex;gap:12px;align-items:center;padding:12px;background:rgba(0,0,0,0.2);border-radius:4px;border:1px solid rgba(255,255,255,0.05);"]);
-var CharacterSlotWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__CharacterSlotWrapper",
-  componentId: "sc-fxv1tt-5"
-})(["flex-shrink:0;"]);
-var CharacterSpriteLarge = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__CharacterSpriteLarge",
-  componentId: "sc-fxv1tt-6"
-})(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;width:64px;height:64px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:8px;"]);
-var EmptyCharacterSlot = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__EmptyCharacterSlot",
-  componentId: "sc-fxv1tt-7"
-})(["width:64px;height:64px;background:rgba(0,0,0,0.3);border:2px dashed rgba(255,255,255,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;"]);
-var EmptySlotIcon = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterListingForm__EmptySlotIcon",
-  componentId: "sc-fxv1tt-8"
-})(["font-size:1.5rem;color:#666;font-family:'Press Start 2P',cursive;"]);
-var CharacterDetails = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__CharacterDetails",
-  componentId: "sc-fxv1tt-9"
+var scaleIn$2 = /*#__PURE__*/keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
+var Overlay$7 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__Overlay",
+  componentId: "sc-1uxkx35-0"
+})(["position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;"]);
+var ModalContainer$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__ModalContainer",
+  componentId: "sc-1uxkx35-1"
+})(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
+var ModalContent$5 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__ModalContent",
+  componentId: "sc-1uxkx35-2"
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:440px;max-width:92%;max-height:80dvh;display:flex;flex-direction:column;gap:16px;overflow:hidden;pointer-events:auto;animation:", " 0.15s ease-out;"], scaleIn$2);
+var Header$b = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__Header",
+  componentId: "sc-1uxkx35-3"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+var Title$c = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "CharacterListingModal__Title",
+  componentId: "sc-1uxkx35-4"
+})(["margin:0;font-family:'Press Start 2P',cursive !important;font-size:0.65rem !important;color:#fef08a !important;"]);
+var CloseButton$d = /*#__PURE__*/styled.button.withConfig({
+  displayName: "CharacterListingModal__CloseButton",
+  componentId: "sc-1uxkx35-5"
+})(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
+var CharacterList$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__CharacterList",
+  componentId: "sc-1uxkx35-6"
+})(["display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:260px;padding:2px;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.3);border-radius:4px;}"]);
+var CharacterRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__CharacterRow",
+  componentId: "sc-1uxkx35-7"
+})(["display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid ", ";border-radius:6px;background:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";background:", ";}&:focus-visible{outline:2px solid rgba(245,158,11,0.6);outline-offset:2px;}"], function (_ref2) {
+  var $selected = _ref2.$selected;
+  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.08)';
+}, function (_ref3) {
+  var $selected = _ref3.$selected;
+  return $selected ? 'rgba(245,158,11,0.1)' : 'rgba(255,255,255,0.02)';
+}, function (_ref4) {
+  var $selected = _ref4.$selected;
+  return $selected ? '#f59e0b' : 'rgba(245,158,11,0.4)';
+}, function (_ref5) {
+  var $selected = _ref5.$selected;
+  return $selected ? 'rgba(245,158,11,0.1)' : 'rgba(245,158,11,0.05)';
+});
+var RadioCircle$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__RadioCircle",
+  componentId: "sc-1uxkx35-8"
+})(["width:14px;height:14px;border-radius:50%;border:2px solid ", ";flex-shrink:0;display:flex;align-items:center;justify-content:center;&::after{content:'';width:6px;height:6px;border-radius:50%;background:#f59e0b;opacity:", ";transition:opacity 0.15s;}"], function (_ref6) {
+  var $selected = _ref6.$selected;
+  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.4)';
+}, function (_ref7) {
+  var $selected = _ref7.$selected;
+  return $selected ? 1 : 0;
+});
+var SpriteWrapper$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__SpriteWrapper",
+  componentId: "sc-1uxkx35-9"
+})(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;flex-shrink:0;width:40px;height:40px;"]);
+var CharacterInfo$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__CharacterInfo",
+  componentId: "sc-1uxkx35-10"
 })(["display:flex;flex-direction:column;gap:4px;flex:1;"]);
 var CharacterName$3 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterListingForm__CharacterName",
-  componentId: "sc-fxv1tt-10"
-})(["font-family:'Press Start 2P',cursive;font-size:0.6rem;color:#f3f4f6;"]);
+  displayName: "CharacterListingModal__CharacterName",
+  componentId: "sc-1uxkx35-11"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#f3f4f6 !important;"]);
 var CharacterMeta$2 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterListingForm__CharacterMeta",
-  componentId: "sc-fxv1tt-11"
-})(["font-size:0.5rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;"]);
-var EmptySelection = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterListingForm__EmptySelection",
-  componentId: "sc-fxv1tt-12"
-})(["font-size:0.5rem;color:#666;font-style:italic;"]);
-var PriceInputWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__PriceInputWrapper",
-  componentId: "sc-fxv1tt-13"
-})(["display:flex;flex-direction:column;gap:8px;"]);
+  displayName: "CharacterListingModal__CharacterMeta",
+  componentId: "sc-1uxkx35-12"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.4rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var PricePreview = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__PricePreview",
+  componentId: "sc-1uxkx35-13"
+})(["display:flex;align-items:center;gap:6px;"]);
+var DCCoinWrapper$4 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterListingModal__DCCoinWrapper",
+  componentId: "sc-1uxkx35-14"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;"]);
+var PricePreviewAmount = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterListingModal__PricePreviewAmount",
+  componentId: "sc-1uxkx35-15"
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#fef08a !important;"]);
+var PriceSection$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__PriceSection",
+  componentId: "sc-1uxkx35-16"
+})(["display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,0.06);padding-top:12px;"]);
 var PriceLabel = /*#__PURE__*/styled.p.withConfig({
-  displayName: "CharacterListingForm__PriceLabel",
-  componentId: "sc-fxv1tt-14"
-})(["margin:0;font-size:0.55rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;"]);
-var PriceInputRow = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__PriceInputRow",
-  componentId: "sc-fxv1tt-15"
+  displayName: "CharacterListingModal__PriceLabel",
+  componentId: "sc-1uxkx35-17"
+})(["margin:0;font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:#888 !important;text-transform:uppercase;letter-spacing:0.5px;"]);
+var PriceRow$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingModal__PriceRow",
+  componentId: "sc-1uxkx35-18"
 })(["display:flex;gap:8px;align-items:center;.price-input{flex:1;height:12px;}"]);
-var ListButton = /*#__PURE__*/styled(CTAButton).withConfig({
-  displayName: "CharacterListingForm__ListButton",
-  componentId: "sc-fxv1tt-16"
-})(["padding:10px 16px;height:32px;flex-shrink:0;span{font-size:0.6rem;}svg{font-size:1.1rem;}"]);
-var AvailableCharactersSection = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__AvailableCharactersSection",
-  componentId: "sc-fxv1tt-17"
-})(["display:flex;flex-direction:column;gap:8px;"]);
-var AvailableCharactersLabel = /*#__PURE__*/styled.p.withConfig({
-  displayName: "CharacterListingForm__AvailableCharactersLabel",
-  componentId: "sc-fxv1tt-18"
-})(["margin:0;font-size:0.55rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;"]);
-var AvailableCharactersList = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__AvailableCharactersList",
-  componentId: "sc-fxv1tt-19"
-})(["display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto;padding:4px;"]);
-var AvailableCharacterItem = /*#__PURE__*/styled.button.withConfig({
-  displayName: "CharacterListingForm__AvailableCharacterItem",
-  componentId: "sc-fxv1tt-20"
-})(["display:flex;align-items:center;gap:10px;padding:8px;background:", ";border:1px solid ", ";border-radius:6px;cursor:pointer;transition:border-color 0.15s,background 0.15s;&:hover{border-color:rgba(245,158,11,0.3);background:rgba(245,158,11,0.05);}"], function (_ref2) {
-  var $selected = _ref2.$selected;
-  return $selected ? 'rgba(245, 158, 11, 0.1)' : 'rgba(255, 255, 255, 0.02)';
-}, function (_ref3) {
-  var $selected = _ref3.$selected;
-  return $selected ? 'rgba(245, 158, 11, 0.4)' : 'rgba(255, 255, 255, 0.08)';
-});
-var MiniSprite = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__MiniSprite",
-  componentId: "sc-fxv1tt-21"
-})(["display:flex;align-items:center;justify-content:center;image-rendering:pixelated;flex-shrink:0;"]);
-var MiniCharacterInfo = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__MiniCharacterInfo",
-  componentId: "sc-fxv1tt-22"
-})(["display:flex;flex-direction:column;gap:2px;align-items:flex-start;"]);
-var MiniCharacterName = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterListingForm__MiniCharacterName",
-  componentId: "sc-fxv1tt-23"
-})(["font-family:'Press Start 2P',cursive;font-size:0.45rem;color:#f3f4f6;"]);
-var MiniCharacterMeta = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterListingForm__MiniCharacterMeta",
-  componentId: "sc-fxv1tt-24"
-})(["font-size:0.4rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;"]);
+var ListBtn = /*#__PURE__*/styled(CTAButton).withConfig({
+  displayName: "CharacterListingModal__ListBtn",
+  componentId: "sc-1uxkx35-19"
+})(["flex-shrink:0;padding:10px 16px;height:32px;span{font-size:0.6rem;}svg{font-size:1.1rem;}"]);
 var EmptyState$7 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CharacterListingForm__EmptyState",
-  componentId: "sc-fxv1tt-25"
-})(["display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(255,255,255,0.02);border-radius:6px;"]);
-var EmptyText$2 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterListingForm__EmptyText",
-  componentId: "sc-fxv1tt-26"
-})(["font-size:0.45rem;color:#666;text-transform:uppercase;letter-spacing:0.5px;"]);
+  displayName: "CharacterListingModal__EmptyState",
+  componentId: "sc-1uxkx35-20"
+})(["display:flex;align-items:center;justify-content:center;padding:32px 16px;font-family:'Press Start 2P',cursive !important;font-size:0.5rem !important;color:#666 !important;text-transform:uppercase;letter-spacing:1px;"]);
+
+var CharacterListingForm = function CharacterListingForm(_ref) {
+  var accountCharacters = _ref.accountCharacters,
+    onCharacterList = _ref.onCharacterList,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    characterAtlasJSON = _ref.characterAtlasJSON,
+    characterAtlasIMG = _ref.characterAtlasIMG,
+    enableHotkeys = _ref.enableHotkeys,
+    disableHotkeys = _ref.disableHotkeys;
+  var _useState = useState(false),
+    isModalOpen = _useState[0],
+    setIsModalOpen = _useState[1];
+  var eligibleCount = accountCharacters.filter(function (c) {
+    return !c.isListedForSale && !c.tradedAt;
+  }).length;
+  return React.createElement(Wrapper$2, null, React.createElement(CharacterListingModal, {
+    isOpen: isModalOpen,
+    onClose: function onClose() {
+      return setIsModalOpen(false);
+    },
+    accountCharacters: accountCharacters,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    characterAtlasJSON: characterAtlasJSON,
+    characterAtlasIMG: characterAtlasIMG,
+    onCharacterList: onCharacterList,
+    enableHotkeys: enableHotkeys,
+    disableHotkeys: disableHotkeys
+  }), React.createElement(Description$4, null, "List one of your offline characters on the marketplace. Prices are set in DC."), React.createElement(OpenButton, {
+    icon: React.createElement(ShoppingBag, {
+      width: 20,
+      height: 20
+    }),
+    label: "List a Character" + (eligibleCount > 0 ? " (" + eligibleCount + " eligible)" : ''),
+    disabled: eligibleCount === 0,
+    onClick: function onClick() {
+      return setIsModalOpen(true);
+    }
+  }), eligibleCount === 0 && React.createElement(NoEligible, null, "No eligible characters to list."));
+};
+var Wrapper$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CharacterListingForm__Wrapper",
+  componentId: "sc-fxv1tt-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 24px;width:95%;margin:0 auto;"]);
+var Description$4 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "CharacterListingForm__Description",
+  componentId: "sc-fxv1tt-1"
+})(["margin:0;font-size:0.5rem;color:#666;text-align:center;line-height:1.6;max-width:320px;"]);
+var OpenButton = /*#__PURE__*/styled(CTAButton).withConfig({
+  displayName: "CharacterListingForm__OpenButton",
+  componentId: "sc-fxv1tt-2"
+})(["padding:14px 24px;span{font-size:0.65rem;}svg{font-size:1.2rem;}"]);
+var NoEligible = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterListingForm__NoEligible",
+  componentId: "sc-fxv1tt-3"
+})(["font-size:0.45rem;color:#52525b;text-transform:uppercase;letter-spacing:1px;"]);
 
 var Marketplace = function Marketplace(props) {
   var onClose = props.onClose,
@@ -47861,13 +47956,13 @@ var Marketplace = function Marketplace(props) {
     onCharacterList = props.onCharacterList,
     _props$accountCharact = props.accountCharacters,
     accountCharacters = _props$accountCharact === void 0 ? [] : _props$accountCharact,
-    onCharacterSelectToList = props.onCharacterSelectToList,
-    selectedCharacterToList = props.selectedCharacterToList,
     _props$characterListi5 = props.characterListingsLoading,
     characterListingsLoading = _props$characterListi5 === void 0 ? false : _props$characterListi5,
     _props$characterNameF = props.characterNameFilter,
     characterNameFilter = _props$characterNameF === void 0 ? '' : _props$characterNameF,
-    onCharacterNameFilterChange = props.onCharacterNameFilterChange;
+    onCharacterNameFilterChange = props.onCharacterNameFilterChange,
+    characterAtlasIMG = props.characterAtlasIMG,
+    characterAtlasJSON = props.characterAtlasJSON;
   var _useState = useState('marketplace'),
     activeTab = _useState[0],
     setActiveTab = _useState[1];
@@ -47984,6 +48079,8 @@ var Marketplace = function Marketplace(props) {
     onCharacterBuy: onCharacterBuy != null ? onCharacterBuy : function () {},
     atlasJSON: props.atlasJSON,
     atlasIMG: props.atlasIMG,
+    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : props.atlasJSON,
+    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : props.atlasIMG,
     enableHotkeys: props.enableHotkeys,
     disableHotkeys: props.disableHotkeys,
     nameFilter: characterNameFilter,
@@ -47998,15 +48095,17 @@ var Marketplace = function Marketplace(props) {
     onCharacterDelist: onCharacterDelist != null ? onCharacterDelist : function () {},
     atlasJSON: props.atlasJSON,
     atlasIMG: props.atlasIMG,
+    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : props.atlasJSON,
+    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : props.atlasIMG,
     enableHotkeys: props.enableHotkeys,
     disableHotkeys: props.disableHotkeys
   }), characterSubTab === 'list' && React.createElement(CharacterListingForm, {
     accountCharacters: accountCharacters != null ? accountCharacters : [],
-    selectedCharacterToList: selectedCharacterToList != null ? selectedCharacterToList : null,
-    onCharacterSelectToList: onCharacterSelectToList != null ? onCharacterSelectToList : function () {},
     onCharacterList: onCharacterList != null ? onCharacterList : function () {},
     atlasJSON: props.atlasJSON,
     atlasIMG: props.atlasIMG,
+    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : props.atlasJSON,
+    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : props.atlasIMG,
     enableHotkeys: props.enableHotkeys,
     disableHotkeys: props.disableHotkeys
   })), activeTab === 'sell' && React.createElement(ManagmentPanel, Object.assign({}, props, {
@@ -48097,6 +48196,8 @@ var CharacterMarketplaceRows = function CharacterMarketplaceRows(_ref) {
   var listing = _ref.listing,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
+    characterAtlasJSON = _ref.characterAtlasJSON,
+    characterAtlasIMG = _ref.characterAtlasIMG,
     onCharacterBuy = _ref.onCharacterBuy,
     onCharacterDelist = _ref.onCharacterDelist,
     disabled = _ref.disabled;
@@ -48106,8 +48207,8 @@ var CharacterMarketplaceRows = function CharacterMarketplaceRows(_ref) {
   return React.createElement(ItemRowWrapper, {
     "$isHighlighted": disabled || isBeingBought
   }, React.createElement(ItemSection$3, null, React.createElement(SpriteContainer$5, null, React.createElement(CharacterSprite$2, null, React.createElement(SpriteFromAtlas, {
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
+    atlasIMG: characterAtlasIMG,
+    atlasJSON: characterAtlasJSON,
     spriteKey: characterSnapshot.textureKey + "/down/standing/0.png",
     imgScale: 2.5,
     height: 56,
@@ -48116,12 +48217,12 @@ var CharacterMarketplaceRows = function CharacterMarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "180px",
     fontSize: "10px"
-  }, characterSnapshot.name || 'Unknown Character')), React.createElement(CharacterMeta$3, null, "Level ", characterSnapshot.level), characterSnapshot["class"] && React.createElement(CharacterClass, null, characterSnapshot["class"]), React.createElement(PriceRow$1, null, React.createElement(GoldIcon$6, null, React.createElement(SpriteFromAtlas, {
+  }, characterSnapshot.name || 'Unknown Character')), React.createElement(CharacterMeta$3, null, "Level ", characterSnapshot.level), characterSnapshot["class"] && React.createElement(CharacterClass, null, characterSnapshot["class"]), React.createElement(PriceRow$2, null, React.createElement(DCCoinWrapper$5, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    spriteKey: "others/gold-coin-qty-5.png",
+    spriteKey: "others/definya-coin.png",
     imgScale: 1
-  })), React.createElement(GoldPrice$2, null, price.toLocaleString())), isBeingBought && React.createElement(PendingBadge, null, "Sale Pending"))), React.createElement(ActionSection$2, null, React.createElement(CTAButton, {
+  })), React.createElement(DCPrice$2, null, formatDCAmount(price))), isBeingBought && React.createElement(PendingBadge, null, "Sale Pending"))), React.createElement(ActionSection$2, null, React.createElement(CTAButton, {
     icon: onCharacterBuy ? React.createElement(Coins, {
       width: 18,
       height: 18
@@ -48164,16 +48265,16 @@ var CharacterClass = /*#__PURE__*/styled.span.withConfig({
   displayName: "CharacterMarketplaceRows__CharacterClass",
   componentId: "sc-1pxkdig-6"
 })(["font-size:0.4rem;color:#666;text-transform:uppercase;letter-spacing:0.5px;"]);
-var PriceRow$1 = /*#__PURE__*/styled.div.withConfig({
+var PriceRow$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CharacterMarketplaceRows__PriceRow",
   componentId: "sc-1pxkdig-7"
 })(["display:flex;align-items:center;gap:0.4rem;margin-top:0.2rem;"]);
-var GoldIcon$6 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterMarketplaceRows__GoldIcon",
+var DCCoinWrapper$5 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterMarketplaceRows__DCCoinWrapper",
   componentId: "sc-1pxkdig-8"
 })(["display:flex;align-items:center;justify-content:center;position:relative;top:-0.5rem;left:-0.4rem;"]);
-var GoldPrice$2 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CharacterMarketplaceRows__GoldPrice",
+var DCPrice$2 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CharacterMarketplaceRows__DCPrice",
   componentId: "sc-1pxkdig-9"
 })(["font-family:'Press Start 2P',cursive;font-size:0.55rem !important;color:#fef08a;line-height:1;"]);
 var ActionSection$2 = /*#__PURE__*/styled.div.withConfig({
@@ -48189,6 +48290,8 @@ var GroupedCharacterMarketplaceRow = function GroupedCharacterMarketplaceRow(_re
     otherListings = _ref2.otherListings,
     atlasJSON = _ref2.atlasJSON,
     atlasIMG = _ref2.atlasIMG,
+    characterAtlasJSON = _ref2.characterAtlasJSON,
+    characterAtlasIMG = _ref2.characterAtlasIMG,
     onBuy = _ref2.onBuy,
     currentCharacterId = _ref2.currentCharacterId;
   var makeRow = function makeRow(listing) {
@@ -48198,6 +48301,8 @@ var GroupedCharacterMarketplaceRow = function GroupedCharacterMarketplaceRow(_re
       listing: listing,
       atlasJSON: atlasJSON,
       atlasIMG: atlasIMG,
+      characterAtlasJSON: characterAtlasJSON,
+      characterAtlasIMG: characterAtlasIMG,
       onCharacterBuy: isOwnListing ? undefined : function () {
         return onBuy(listing._id);
       },
@@ -48383,11 +48488,11 @@ var PartyCreate = function PartyCreate(_ref) {
     width: "500px",
     height: "300px",
     cancelDrag: ".partyRows"
-  }, React.createElement(Wrapper$2, null, React.createElement("div", {
+  }, React.createElement(Wrapper$3, null, React.createElement("div", {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$c, null, "Create Party"), React.createElement("hr", {
+  }, React.createElement(Title$d, null, "Create Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement("h1", null, "Type your party name"), React.createElement(Input, {
     placeholder: "Type party name",
@@ -48406,11 +48511,11 @@ var PartyCreate = function PartyCreate(_ref) {
     }
   }, "Cancel"))));
 };
-var Wrapper$2 = /*#__PURE__*/styled.div.withConfig({
+var Wrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$c = /*#__PURE__*/styled.h1.withConfig({
+var Title$d = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -48455,11 +48560,11 @@ var PartyDashboard = function PartyDashboard(_ref) {
     width: "800px",
     height: "400px",
     cancelDrag: ".partyRows"
-  }, React.createElement(Wrapper$3, null, React.createElement("div", {
+  }, React.createElement(Wrapper$4, null, React.createElement("div", {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$d, null, "Party Dashboard"), React.createElement(Button, {
+  }, React.createElement(Title$e, null, "Party Dashboard"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Create"), React.createElement("hr", {
     className: "golden"
@@ -48478,7 +48583,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     });
   })));
 };
-var Wrapper$3 = /*#__PURE__*/styled.div.withConfig({
+var Wrapper$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyDashboard__Wrapper",
   componentId: "sc-16cm41r-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
@@ -48486,7 +48591,7 @@ var RowsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyDashboard__RowsWrapper",
   componentId: "sc-16cm41r-1"
 })(["overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100%;height:200px;"]);
-var Title$d = /*#__PURE__*/styled.h1.withConfig({
+var Title$e = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -48519,11 +48624,11 @@ var PartyInvite = function PartyInvite(_ref) {
     width: "600px",
     height: "400px",
     cancelDrag: ".playersRows"
-  }, React.createElement(Wrapper$4, null, React.createElement("div", {
+  }, React.createElement(Wrapper$5, null, React.createElement("div", {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$e, null, "Invite for Party"), React.createElement("hr", {
+  }, React.createElement(Title$f, null, "Invite for Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -48538,11 +48643,11 @@ var PartyInvite = function PartyInvite(_ref) {
     });
   })));
 };
-var Wrapper$4 = /*#__PURE__*/styled.div.withConfig({
+var Wrapper$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$e = /*#__PURE__*/styled.h1.withConfig({
+var Title$f = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -48984,7 +49089,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$f, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$g, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -49003,7 +49108,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$f, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$g, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -49050,7 +49155,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-1wccpiy-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$f = /*#__PURE__*/styled.h1.withConfig({
+var Title$g = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-1wccpiy-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -49555,7 +49660,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React.createElement(CloseButton$d, {
+  }, onCloseButton && React.createElement(CloseButton$e, {
     onPointerDown: onCloseButton
   }, "X"), React.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -49590,7 +49695,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$d = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -49726,7 +49831,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$G, null, React.createElement(Header$b, null, React.createElement("div", null, React.createElement(Title$g, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$G, null, React.createElement(Header$c, null, React.createElement("div", null, React.createElement(Title$h, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -49750,13 +49855,13 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "label"
   }, "Required Item:"), React.createElement("div", {
     className: "value"
-  }, requiredItem))), React.createElement(Description$4, null, description));
+  }, requiredItem))), React.createElement(Description$5, null, description));
 };
 var Container$G = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
-var Title$g = /*#__PURE__*/styled.div.withConfig({
+var Title$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Title",
   componentId: "sc-4hbw3q-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -49764,11 +49869,11 @@ var Type$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Type",
   componentId: "sc-4hbw3q-2"
 })(["font-size:", ";margin-top:0.2rem;color:", ";"], uiFonts.size.small, uiColors.lightGray);
-var Description$4 = /*#__PURE__*/styled.div.withConfig({
+var Description$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$b = /*#__PURE__*/styled.div.withConfig({
+var Header$c = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -49984,7 +50089,7 @@ var Spell = function Spell(_ref) {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React.createElement(Overlay$7, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
+  }, disabled && React.createElement(Overlay$8, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -49993,9 +50098,9 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$h, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$i, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
-  }, "(", magicWords, ")")), React.createElement(Description$5, null, description)), React.createElement(Divider$1, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
+  }, "(", magicWords, ")")), React.createElement(Description$6, null, description)), React.createElement(Divider$1, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
   }, manaCost))));
 };
@@ -50014,11 +50119,11 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$h = /*#__PURE__*/styled.p.withConfig({
+var Title$i = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
-var Description$5 = /*#__PURE__*/styled.div.withConfig({
+var Description$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__Description",
   componentId: "sc-j96fa2-4"
 })(["font-size:", " !important;line-height:1.1 !important;"], uiFonts.size.small);
@@ -50030,7 +50135,7 @@ var Cost = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Cost",
   componentId: "sc-j96fa2-6"
 })(["display:flex;align-items:center;flex-direction:column;gap:0.5rem;div{z-index:1;}.mana{position:relative;font-size:", ";font-weight:bold;z-index:1;&::after{position:absolute;content:'';top:0;left:0;background-color:", ";width:100%;height:100%;border-radius:50%;transform:scale(1.8);filter:blur(10px);z-index:-1;}}"], uiFonts.size.medium, uiColors.blue);
-var Overlay$7 = /*#__PURE__*/styled.p.withConfig({
+var Overlay$8 = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Overlay",
   componentId: "sc-j96fa2-7"
 })(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);
@@ -50079,7 +50184,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$K, null, React.createElement(Title$i, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$K, null, React.createElement(Title$j, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -50112,7 +50217,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$i = /*#__PURE__*/styled.h1.withConfig({
+var Title$j = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -70532,7 +70637,7 @@ var PurchaseSuccess = function PurchaseSuccess(_ref) {
       key: i,
       "$i": i
     });
-  })), React.createElement(Header$c, null, React.createElement(TrophyArea, null, React.createElement(TrophyIcon, null, React.createElement(FaStar, null))), React.createElement(Title$j, null, "PURCHASE COMPLETE!"), React.createElement(Subtitle$2, null, "Your items are ready")), React.createElement(ItemsList, null, items.map(function (item, i) {
+  })), React.createElement(Header$d, null, React.createElement(TrophyArea, null, React.createElement(TrophyIcon, null, React.createElement(FaStar, null))), React.createElement(Title$k, null, "PURCHASE COMPLETE!"), React.createElement(Subtitle$2, null, "Your items are ready")), React.createElement(ItemsList, null, items.map(function (item, i) {
     var _item$metadata;
     var isCharSkin = item.metadataType === MetadataType.CharacterSkin;
     var spriteKey = isCharSkin && (_item$metadata = item.metadata) != null && _item$metadata.selectedSkinTextureKey ? item.metadata.selectedSkinTextureKey + "/down/standing/0.png" : item.texturePath;
@@ -70556,13 +70661,13 @@ var PurchaseSuccess = function PurchaseSuccess(_ref) {
     onPointerDown: onClose
   }, React.createElement(FaTimes, null), " Close Store")));
 };
-var scaleIn$2 = /*#__PURE__*/keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
+var scaleIn$3 = /*#__PURE__*/keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
 var _float = /*#__PURE__*/keyframes(["0%{transform:translateY(0) rotate(0deg);opacity:1;}100%{transform:translateY(-60px) rotate(360deg);opacity:0;}"]);
 var glowPulse = /*#__PURE__*/keyframes(["0%,100%{box-shadow:0 0 12px rgba(245,158,11,0.5),0 0 24px rgba(245,158,11,0.2);}50%{box-shadow:0 0 24px rgba(245,158,11,0.8),0 0 48px rgba(245,158,11,0.4);}"]);
 var Container$L = /*#__PURE__*/styled.div.withConfig({
   displayName: "PurchaseSuccess__Container",
   componentId: "sc-18z5q21-0"
-})(["position:relative;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem 1.5rem;overflow:hidden;animation:", " 0.25s ease-out;text-align:center;"], scaleIn$2);
+})(["position:relative;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem 1.5rem;overflow:hidden;animation:", " 0.25s ease-out;text-align:center;"], scaleIn$3);
 var Sparkles = /*#__PURE__*/styled.div.withConfig({
   displayName: "PurchaseSuccess__Sparkles",
   componentId: "sc-18z5q21-1"
@@ -70579,7 +70684,7 @@ var Spark = /*#__PURE__*/styled.div.withConfig({
 }, function (p) {
   return p.$i * 0.2;
 });
-var Header$c = /*#__PURE__*/styled.div.withConfig({
+var Header$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "PurchaseSuccess__Header",
   componentId: "sc-18z5q21-3"
 })(["display:flex;flex-direction:column;align-items:center;gap:0.5rem;"]);
@@ -70591,7 +70696,7 @@ var TrophyIcon = /*#__PURE__*/styled.div.withConfig({
   displayName: "PurchaseSuccess__TrophyIcon",
   componentId: "sc-18z5q21-5"
 })(["width:64px;height:64px;border-radius:50%;background:rgba(245,158,11,0.15);border:2px solid #f59e0b;display:flex;align-items:center;justify-content:center;animation:", " 2s ease-in-out infinite;svg{font-size:1.75rem;color:#f59e0b;}"], glowPulse);
-var Title$j = /*#__PURE__*/styled.h2.withConfig({
+var Title$k = /*#__PURE__*/styled.h2.withConfig({
   displayName: "PurchaseSuccess__Title",
   componentId: "sc-18z5q21-6"
 })(["font-family:'Press Start 2P',cursive;font-size:0.9rem;color:#fef08a;margin:0;text-shadow:0 0 8px rgba(245,158,11,0.6);"]);
@@ -70760,9 +70865,9 @@ var CartView = function CartView(_ref2) {
       onClose: onCloseStore != null ? onCloseStore : onClose
     });
   }
-  return React.createElement(Container$M, null, React.createElement(Header$d, null, React.createElement(Title$k, null, "Shopping Cart (", cartItems.reduce(function (s, ci) {
+  return React.createElement(Container$M, null, React.createElement(Header$e, null, React.createElement(Title$l, null, "Shopping Cart (", cartItems.reduce(function (s, ci) {
     return s + ci.quantity;
-  }, 0), ")"), React.createElement(CloseButton$e, {
+  }, 0), ")"), React.createElement(CloseButton$f, {
     onPointerDown: onClose
   }, React.createElement(FaTimes, null))), React.createElement(CartItems, null, cartItems.length === 0 ? React.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
     var _cartItem$metadata, _cartItem$metadata2, _cartItem$item$region2, _cartItem$item$region3;
@@ -70808,15 +70913,15 @@ var Container$M = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Container",
   componentId: "sc-ydtyl1-0"
 })(["display:flex;flex-direction:column;width:100%;gap:1rem;padding:1rem;"]);
-var Header$d = /*#__PURE__*/styled.div.withConfig({
+var Header$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Header",
   componentId: "sc-ydtyl1-1"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
-var Title$k = /*#__PURE__*/styled.h2.withConfig({
+var Title$l = /*#__PURE__*/styled.h2.withConfig({
   displayName: "CartView__Title",
   componentId: "sc-ydtyl1-2"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;margin:0;"]);
-var CloseButton$e = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__CloseButton",
   componentId: "sc-ydtyl1-3"
 })(["padding:0.5rem;min-width:unset;width:42px;height:42px;display:flex;font-size:1.5rem;align-items:center;color:white;justify-content:center;"]);
@@ -71044,7 +71149,7 @@ var FeaturedBanner = function FeaturedBanner(_ref) {
       background: badgeStyle.bg,
       borderColor: badgeStyle.border,
       color: badgeStyle.color
-    }, item.badge))), React.createElement(CardBody, null, React.createElement(CardName, null, item.name), item.description && React.createElement(CardDesc, null, item.description), React.createElement(PriceRow$2, null, item.originalPrice != null && React.createElement(OriginalPrice, null, "$", item.originalPrice.toFixed(2)), React.createElement(CurrentPrice, {
+    }, item.badge))), React.createElement(CardBody, null, React.createElement(CardName, null, item.name), item.description && React.createElement(CardDesc, null, item.description), React.createElement(PriceRow$3, null, item.originalPrice != null && React.createElement(OriginalPrice, null, "$", item.originalPrice.toFixed(2)), React.createElement(CurrentPrice, {
       "$onSale": item.originalPrice != null
     }, "$", item.price.toFixed(2))), item.endsAt && React.createElement(CountdownTimer, {
       endsAt: item.endsAt,
@@ -71102,7 +71207,7 @@ var CardDesc = /*#__PURE__*/styled.div.withConfig({
   displayName: "FeaturedBanner__CardDesc",
   componentId: "sc-egjgex-9"
 })(["font-family:'Press Start 2P',cursive;font-size:0.45rem;color:rgba(255,255,255,0.6);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;"]);
-var PriceRow$2 = /*#__PURE__*/styled.div.withConfig({
+var PriceRow$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "FeaturedBanner__PriceRow",
   componentId: "sc-egjgex-10"
 })(["display:flex;align-items:center;gap:0.4rem;"]);
@@ -71415,13 +71520,13 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     }
   }, [selected, dcDisabled, onPayWithDC, onPayWithCard, onPayWithPix]);
   var dcSubText = dcRequired !== undefined ? dcBalance.toLocaleString() + " DC available \xB7 " + dcRequired.toLocaleString() + " DC needed" : dcBalance.toLocaleString() + " DC available";
-  return React.createElement(ModalPortal, null, React.createElement(Overlay$8, {
+  return React.createElement(ModalPortal, null, React.createElement(Overlay$9, {
     onPointerDown: onClose
-  }), React.createElement(ModalContainer$5, null, React.createElement(ModalContent$5, {
+  }), React.createElement(ModalContainer$6, null, React.createElement(ModalContent$6, {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React.createElement(Header$e, null, React.createElement(Title$l, null, "How would you like to pay?"), React.createElement(CloseButton$f, {
+  }, React.createElement(Header$f, null, React.createElement(Title$m, null, "How would you like to pay?"), React.createElement(CloseButton$g, {
     onPointerDown: onClose,
     "aria-label": "Close"
   }, React.createElement(FaTimes, null))), React.createElement(Options$1, null, React.createElement(RadioOption$1, {
@@ -71429,14 +71534,14 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     onPointerDown: function onPointerDown() {
       return setSelected('card');
     }
-  }, React.createElement(RadioCircle$1, {
+  }, React.createElement(RadioCircle$2, {
     "$selected": selected === 'card'
   }), React.createElement(OptionText$1, null, React.createElement(OptionLabel$2, null, "Credit Card"), React.createElement(OptionSub$1, null, "Stripe secure checkout"))), showPix && React.createElement(RadioOption$1, {
     "$selected": selected === 'pix',
     onPointerDown: function onPointerDown() {
       return setSelected('pix');
     }
-  }, React.createElement(RadioCircle$1, {
+  }, React.createElement(RadioCircle$2, {
     "$selected": selected === 'pix'
   }), React.createElement(OptionText$1, null, React.createElement(OptionLabel$2, null, "Pix"), React.createElement(OptionSub$1, null, "Instant payment via Pix"))), React.createElement(RadioOption$1, {
     "$selected": selected === 'dc',
@@ -71444,34 +71549,34 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     onPointerDown: dcDisabled ? undefined : function () {
       return setSelected('dc');
     }
-  }, React.createElement(RadioCircle$1, {
+  }, React.createElement(RadioCircle$2, {
     "$selected": selected === 'dc'
   }), React.createElement(OptionText$1, null, React.createElement(OptionLabel$2, null, "Definya Coin"), React.createElement(OptionSub$1, null, dcSubText)))), React.createElement(ConfirmRow$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: handleConfirm
   }, "Confirm")))));
 };
-var Overlay$8 = /*#__PURE__*/styled.div.withConfig({
+var Overlay$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__Overlay",
   componentId: "sc-1dxy6lr-0"
 })(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
-var ModalContainer$5 = /*#__PURE__*/styled.div.withConfig({
+var ModalContainer$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__ModalContainer",
   componentId: "sc-1dxy6lr-1"
 })(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
-var ModalContent$5 = /*#__PURE__*/styled.div.withConfig({
+var ModalContent$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__ModalContent",
   componentId: "sc-1dxy6lr-2"
 })(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
-var Header$e = /*#__PURE__*/styled.div.withConfig({
+var Header$f = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__Header",
   componentId: "sc-1dxy6lr-3"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-var Title$l = /*#__PURE__*/styled.h3.withConfig({
+var Title$m = /*#__PURE__*/styled.h3.withConfig({
   displayName: "PaymentMethodModal__Title",
   componentId: "sc-1dxy6lr-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$f = /*#__PURE__*/styled.button.withConfig({
+var CloseButton$g = /*#__PURE__*/styled.button.withConfig({
   displayName: "PaymentMethodModal__CloseButton",
   componentId: "sc-1dxy6lr-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
@@ -71498,7 +71603,7 @@ var RadioOption$1 = /*#__PURE__*/styled.div.withConfig({
   var $disabled = _ref6.$disabled;
   return $disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b';
 });
-var RadioCircle$1 = /*#__PURE__*/styled.div.withConfig({
+var RadioCircle$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__RadioCircle",
   componentId: "sc-1dxy6lr-8"
 })(["width:16px;height:16px;border-radius:50%;border:2px solid ", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;&::after{content:'';width:8px;height:8px;border-radius:50%;background:#f59e0b;opacity:", ";transition:opacity 0.15s;}"], function (_ref7) {
@@ -71681,7 +71786,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React.createElement(DefaultIcon, null, "\uD83D\uDC64")), React.createElement(ItemDetails$5, null, React.createElement(Header$f, null, React.createElement(ItemName$7, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
+  }) : React.createElement(DefaultIcon, null, "\uD83D\uDC64")), React.createElement(ItemDetails$5, null, React.createElement(Header$g, null, React.createElement(ItemName$7, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -71689,12 +71794,12 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     direction: "right",
     onPointerDown: handleNextSkin,
     size: 24
-  })), React.createElement(PriceRow$3, null, originalPrice != null && React.createElement(OriginalPrice$1, {
+  })), React.createElement(PriceRow$4, null, originalPrice != null && React.createElement(OriginalPrice$1, {
     style: {
       display: 'flex',
       alignItems: 'center'
     }
-  }, item.currency === 'DC' ? React.createElement(React.Fragment, null, React.createElement(DCCoinWrapper$2, {
+  }, item.currency === 'DC' ? React.createElement(React.Fragment, null, React.createElement(DCCoinWrapper$6, {
     "$scale": 0.8
   }, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -71708,7 +71813,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
       alignItems: 'center',
       gap: '2px'
     }
-  }, React.createElement(DCCoinWrapper$2, null, React.createElement(SimpleTooltip, {
+  }, React.createElement(DCCoinWrapper$6, null, React.createElement(SimpleTooltip, {
     content: "Definya Coin",
     direction: "top"
   }, React.createElement(SpriteFromAtlas, {
@@ -71727,7 +71832,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     style: {
       margin: '0 4px'
     }
-  }, "\xB7"), React.createElement(DCCoinWrapper$2, {
+  }, "\xB7"), React.createElement(DCCoinWrapper$6, {
     "$scale": 0.9
   }, React.createElement(SimpleTooltip, {
     content: "Definya Coin",
@@ -71773,7 +71878,7 @@ var ItemName$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemName",
   componentId: "sc-81xqsx-3"
 })(["font-family:'Press Start 2P',cursive;font-size:0.8125rem;color:#ffffff;text-shadow:1px 1px 0 rgba(0,0,0,0.5);"]);
-var PriceRow$3 = /*#__PURE__*/styled.div.withConfig({
+var PriceRow$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__PriceRow",
   componentId: "sc-81xqsx-4"
 })(["display:flex;align-items:center;gap:0.5rem;margin:0.15rem 0;"]);
@@ -71795,7 +71900,7 @@ var Controls = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__Controls",
   componentId: "sc-81xqsx-8"
 })(["display:flex;align-items:center;gap:0.5rem;min-width:fit-content;"]);
-var DCCoinWrapper$2 = /*#__PURE__*/styled.span.withConfig({
+var DCCoinWrapper$6 = /*#__PURE__*/styled.span.withConfig({
   displayName: "StoreCharacterSkinRow__DCCoinWrapper",
   componentId: "sc-81xqsx-9"
 })(["display:flex;align-items:center;justify-content:center;position:relative;top:", ";left:", ";margin-right:0.3rem;"], function (p) {
@@ -71808,7 +71913,7 @@ var SkinNavArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
   componentId: "sc-81xqsx-10"
 })(["position:static;"]);
-var Header$f = /*#__PURE__*/styled.div.withConfig({
+var Header$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__Header",
   componentId: "sc-81xqsx-11"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
@@ -72013,12 +72118,12 @@ var StoreItemRow = function StoreItemRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React.createElement(ItemDetails$6, null, React.createElement(ItemName$8, null, item.name), React.createElement(PriceRow$4, null, originalPrice != null && React.createElement(OriginalPrice$2, {
+  })), React.createElement(ItemDetails$6, null, React.createElement(ItemName$8, null, item.name), React.createElement(PriceRow$5, null, originalPrice != null && React.createElement(OriginalPrice$2, {
     style: {
       display: 'flex',
       alignItems: 'center'
     }
-  }, item.currency === 'DC' ? React.createElement(React.Fragment, null, React.createElement(DCCoinWrapper$3, {
+  }, item.currency === 'DC' ? React.createElement(React.Fragment, null, React.createElement(DCCoinWrapper$7, {
     "$scale": 0.8
   }, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -72032,7 +72137,7 @@ var StoreItemRow = function StoreItemRow(_ref) {
       alignItems: 'center',
       gap: '2px'
     }
-  }, React.createElement(DCCoinWrapper$3, null, React.createElement(SimpleTooltip, {
+  }, React.createElement(DCCoinWrapper$7, null, React.createElement(SimpleTooltip, {
     content: "Definya Coin",
     direction: "top"
   }, React.createElement(SpriteFromAtlas, {
@@ -72051,7 +72156,7 @@ var StoreItemRow = function StoreItemRow(_ref) {
     style: {
       margin: '0 4px'
     }
-  }, "\xB7"), React.createElement(DCCoinWrapper$3, {
+  }, "\xB7"), React.createElement(DCCoinWrapper$7, {
     "$scale": 0.9
   }, React.createElement(SimpleTooltip, {
     content: "Definya Coin",
@@ -72122,7 +72227,7 @@ var ItemName$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemRow__ItemName",
   componentId: "sc-ptotuo-3"
 })(["font-family:'Press Start 2P',cursive;font-size:0.8125rem;color:#ffffff;text-shadow:1px 1px 0 rgba(0,0,0,0.5);"]);
-var PriceRow$4 = /*#__PURE__*/styled.div.withConfig({
+var PriceRow$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemRow__PriceRow",
   componentId: "sc-ptotuo-4"
 })(["display:flex;align-items:center;gap:0.5rem;margin:0.15rem 0;"]);
@@ -72140,7 +72245,7 @@ var ItemDescription = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemRow__ItemDescription",
   componentId: "sc-ptotuo-7"
 })(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:rgba(255,255,255,0.85);line-height:1.4;margin-top:2px;"]);
-var DCCoinWrapper$3 = /*#__PURE__*/styled.span.withConfig({
+var DCCoinWrapper$7 = /*#__PURE__*/styled.span.withConfig({
   displayName: "StoreItemRow__DCCoinWrapper",
   componentId: "sc-ptotuo-8"
 })(["display:flex;align-items:center;justify-content:center;position:relative;top:", ";left:", ";margin-right:0.3rem;"], function (p) {
@@ -72529,12 +72634,12 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React.createElement(Container$O, null, React.createElement(Header$g, null, React.createElement(BackButton, {
+  return React.createElement(Container$O, null, React.createElement(Header$h, null, React.createElement(BackButton, {
     onClick: onBack
   }, React.createElement(FaArrowLeft, null), React.createElement("span", null, "Back"))), React.createElement(Content$5, null, React.createElement(DetailsGrid, null, React.createElement(ItemIcon, null, React.createElement("img", {
     src: getImageSrc(),
     alt: item.name
-  })), React.createElement(ItemInfo$3, null, React.createElement(ItemName$9, null, item.name), React.createElement(ItemPrice$2, null, currencySymbol, 'priceUSD' in item ? item.priceUSD : (_item$regionalPrice = item.regionalPrice) != null ? _item$regionalPrice : item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React.createElement(Description$6, null, item.description))), React.createElement(Actions$1, null, React.createElement(CTAButton, {
+  })), React.createElement(ItemInfo$3, null, React.createElement(ItemName$9, null, item.name), React.createElement(ItemPrice$2, null, currencySymbol, 'priceUSD' in item ? item.priceUSD : (_item$regionalPrice = item.regionalPrice) != null ? _item$regionalPrice : item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React.createElement(Description$7, null, item.description))), React.createElement(Actions$1, null, React.createElement(CTAButton, {
     icon: React.createElement(FaCartPlus, null),
     label: "Add to Cart",
     onClick: function onClick() {
@@ -72547,7 +72652,7 @@ var Container$O = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Container",
   componentId: "sc-k3ho5z-0"
 })(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
-var Header$g = /*#__PURE__*/styled.div.withConfig({
+var Header$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Header",
   componentId: "sc-k3ho5z-1"
 })(["display:flex;align-items:center;gap:1rem;"]);
@@ -72579,7 +72684,7 @@ var ItemPrice$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__ItemPrice",
   componentId: "sc-k3ho5z-8"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#fef08a;"]);
-var Description$6 = /*#__PURE__*/styled.p.withConfig({
+var Description$7 = /*#__PURE__*/styled.p.withConfig({
   displayName: "StoreItemDetails__Description",
   componentId: "sc-k3ho5z-9"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.875rem;line-height:1.6;color:#ffffff;"]);
@@ -73147,7 +73252,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$g, {
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$h, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React.createElement(DayNightContainer, {
@@ -73164,7 +73269,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$g = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$h = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -73443,7 +73548,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$Q, null, React.createElement(Title$m, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$Q, null, React.createElement(Title$n, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -73475,7 +73580,7 @@ var Container$Q = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$m = /*#__PURE__*/styled.h1.withConfig({
+var Title$n = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);