feat: add Creative Mode for multi-character duplicate lineup and fix squashed picker cards

css/styles.css

@@ -712,7 +712,7 @@ body {
    ========================================================================== */
 .lineup-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 1.25rem;
 }
 
@@ -766,6 +766,64 @@ body {
   border: 1px solid rgba(56, 189, 248, 0.3);
 }
 
+.btn-lineup-remove-slot {
+  position: absolute;
+  top: 0.65rem;
+  right: 0.65rem;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid rgba(239, 68, 68, 0.45);
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+  font-size: 0.8rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 2;
+}
+
+.btn-lineup-remove-slot:hover {
+  background: rgba(239, 68, 68, 0.5);
+  border-color: var(--accent-red);
+  color: #fff;
+  transform: scale(1.12);
+}
+
+.lineup-add-slot-card {
+  border-style: dashed;
+  border-color: rgba(34, 197, 94, 0.45);
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.lineup-add-slot-card:hover {
+  border-color: var(--accent-green);
+  background: rgba(34, 197, 94, 0.12);
+  box-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
+}
+
+.badge-creative {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.6rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(239, 68, 68, 0.2) 100%);
+  border: 1px solid rgba(245, 158, 11, 0.5);
+  color: #fbbf24;
+  letter-spacing: 0.03em;
+  animation: pulseCreativeGlow 2.5s infinite;
+}
+
+@keyframes pulseCreativeGlow {
+  0%, 100% { box-shadow: 0 0 6px rgba(245, 158, 11, 0.3); }
+  50% { box-shadow: 0 0 14px rgba(245, 158, 11, 0.6); }
+}
+
 /* Ex Rank Toggle Switch */
 .ex-switch-card {
   display: flex;
@@ -1127,7 +1185,7 @@ input:checked + .slider:before {
 /* Responsive */
 @media (max-width: 900px) {
   .lineup-grid {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
   }
 }
 
@@ -1144,3 +1202,143 @@ input:checked + .slider:before {
     grid-template-columns: 1fr;
   }
 }
+
+/* ==========================================================================
+   Lineup Character Picker Modal Grid & Cards
+   ========================================================================== */
+.picker-grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 0.75rem;
+  align-content: start;
+  grid-auto-rows: min-content;
+  min-height: 0;
+  width: 100%;
+}
+
+.picker-card-item {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 0.75rem !important;
+  padding: 0.65rem 0.85rem !important;
+  min-height: 60px !important;
+  height: auto !important;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.picker-card-item:hover {
+  transform: translateY(-2px);
+  background: var(--bg-card-hover);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
+}
+
+.picker-card-item.card-rarity-5 {
+  border-color: rgba(251, 191, 36, 0.4);
+  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%);
+}
+
+.picker-card-item.card-rarity-5:hover {
+  border-color: rgba(251, 191, 36, 0.9);
+  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.25);
+}
+
+.picker-card-item.card-rarity-4 {
+  border-color: rgba(192, 132, 252, 0.4);
+  background: linear-gradient(135deg, rgba(192, 132, 252, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%);
+}
+
+.picker-card-item.card-rarity-4:hover {
+  border-color: rgba(192, 132, 252, 0.9);
+  box-shadow: 0 6px 20px rgba(192, 132, 252, 0.25);
+}
+
+.picker-card-item .picker-avatar-img-wrap {
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--bg-secondary);
+  border: 2px solid var(--border-color);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.picker-card-item.card-rarity-5 .picker-avatar-img-wrap {
+  border-color: var(--accent-gold);
+}
+
+.picker-card-item.card-rarity-4 .picker-avatar-img-wrap {
+  border-color: var(--accent-purple);
+}
+
+.picker-card-item .picker-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.picker-card-item .picker-avatar-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex: 1;
+}
+
+.picker-card-item .picker-avatar-name {
+  font-weight: 700;
+  font-size: 0.925rem;
+  color: var(--text-highlight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.25;
+}
+
+.picker-card-item .picker-avatar-subinfo {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.picker-remove-card {
+  grid-column: 1 / -1;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 0.6rem !important;
+  padding: 0.75rem 1rem !important;
+  min-height: 48px !important;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px dashed rgba(239, 68, 68, 0.4);
+  border-radius: var(--radius-md);
+  color: var(--accent-red);
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 0.25rem;
+  box-sizing: border-box;
+}
+
+.picker-remove-card:hover {
+  background: rgba(239, 68, 68, 0.18);
+  border-color: var(--accent-red);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
+  transform: translateY(-1px);
+}

index.html

@@ -79,8 +79,20 @@
 
       <!-- Party Lineup Visualizer -->
       <div class="card" style="margin-bottom: 1.5rem;">
-        <div class="card-title">
-          <span data-i18n="currentLineupTitle">🎮 ทีมปัจจุบัน</span>
+        <div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
+          <div style="display: flex; align-items: center; gap: 0.6rem;">
+            <span data-i18n="currentLineupTitle">🎮 ทีมปัจจุบัน</span>
+            <span class="badge-creative" id="badge-creative-mode" style="display: none;" data-i18n="badgeCreative">โหมดสร้างสรรค์</span>
+          </div>
+          <div style="display: flex; align-items: center; gap: 0.6rem;">
+            <label class="form-label" style="margin: 0; cursor: pointer; text-transform: none; display: flex; align-items: center; gap: 0.45rem;" for="toggle-creative-mode">
+              <span data-i18n="lblCreativeMode">🎨 โหมดสร้างสรรค์</span>
+            </label>
+            <label class="switch">
+              <input type="checkbox" id="toggle-creative-mode">
+              <span class="slider"></span>
+            </label>
+          </div>
         </div>
         <div class="lineup-grid" id="lineup-container">
           <!-- Rendered by JS -->
@@ -644,7 +656,7 @@
         <button class="btn btn-sm btn-secondary" id="btn-close-picker-modal">✕</button>
       </div>
       <input type="text" id="picker-search" class="form-input" data-i18n-placeholder="pickerSearchPlaceholder" placeholder="🔍 ค้นหาตัวละครเพื่อลงทีม..." style="margin-bottom: 1rem;">
-      <div id="picker-avatars-grid" class="grid-4" style="overflow-y: auto; flex: 1; padding-right: 0.5rem;">
+      <div id="picker-avatars-grid" class="picker-grid-container" style="overflow-y: auto; flex: 1; min-height: 0; padding-right: 0.5rem;">
         <!-- Injected by JS -->
       </div>
     </div>

js/app.js

@@ -15,7 +15,8 @@ const state = {
   currentJsonMode: 'freesr',
   activeTab: 'tab-dashboard',
   selectedLineupSlot: null,
-  selectedAvatarDetail: null
+  selectedAvatarDetail: null,
+  creativeMode: localStorage.getItem('gac_srtool_creative_mode') === 'true'
 };
 
 // UI Elements Map
@@ -43,6 +44,8 @@ const el = {
   lblFloorId: document.getElementById('lbl-floor-id'),
   lblCoordinates: document.getElementById('lbl-coordinates'),
   lineupContainer: document.getElementById('lineup-container'),
+  toggleCreativeMode: document.getElementById('toggle-creative-mode'),
+  badgeCreativeMode: document.getElementById('badge-creative-mode'),
   btnQuickMaxAll: document.getElementById('btn-quick-max-all'),
   btnQuickSyncPersistent: document.getElementById('btn-quick-sync-persistent'),
 
@@ -566,6 +569,13 @@ async function refreshStatus() {
 
 // Render party lineup cards
 function renderLineup(lineups) {
+  if (el.toggleCreativeMode) {
+    el.toggleCreativeMode.checked = state.creativeMode;
+  }
+  if (el.badgeCreativeMode) {
+    el.badgeCreativeMode.style.display = state.creativeMode ? 'inline-flex' : 'none';
+  }
+
   el.lineupContainer.innerHTML = '';
   let currentLineup = lineups || state.statusData?.lineups || DEFAULT_LINEUP;
 
@@ -576,15 +586,29 @@ function renderLineup(lineups) {
     currentLineup = mapped;
   }
 
-  for (let slot = 0; slot < 4; slot++) {
+  // Determine slots to render
+  let slotKeys = [];
+  if (state.creativeMode) {
+    slotKeys = Object.keys(currentLineup).map(k => parseInt(k, 10)).sort((a, b) => a - b);
+    if (slotKeys.length === 0) slotKeys = [0];
+  } else {
+    slotKeys = [0, 1, 2, 3];
+  }
+
+  slotKeys.forEach(slot => {
     const avatarId = currentLineup[slot] || currentLineup[String(slot)] || 0;
     const slotCard = document.createElement('div');
     slotCard.className = `lineup-slot-card ${avatarId ? 'filled' : ''}`;
     slotCard.title = t('slotTooltip');
 
+    const removeSlotBtnHtml = state.creativeMode ? `
+      <button type="button" class="btn-lineup-remove-slot" title="${t('deleteItem') || 'ลบ'}" data-slot="${slot}">✕</button>
+    ` : '';
+
     if (avatarId === 0) {
       slotCard.innerHTML = `
         <div class="lineup-slot-num">Slot ${slot + 1}</div>
+        ${removeSlotBtnHtml}
         <div style="font-size: 2.2rem; color: var(--text-muted); opacity: 0.5;">➕</div>
         <div style="font-weight: 700; color: var(--text-muted); margin-top: 0.5rem;">${t('slotEmpty')}</div>
       `;
@@ -592,11 +616,12 @@ function renderLineup(lineups) {
       const info = getAvatarInfo(avatarId);
       slotCard.innerHTML = `
         <div class="lineup-slot-num">Slot ${slot + 1}</div>
+        ${removeSlotBtnHtml}
         <img class="lineup-slot-img"
              src="./assets/avatars/${avatarId}.png"
              onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${avatarId}.png';}else{this.style.display='none';}"
              alt="${info.name}">
-        <div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight); margin-top: 0.35rem;">${info.name}</div>
+        <div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight); margin-top: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">${info.name}</div>
         <div style="display: flex; gap: 0.4rem; margin-top: 0.4rem; justify-content: center; align-items: center;">
           ${getElementIconHtml(info.element, 20)}
           ${getPathIconHtml(info.path, 20)}
@@ -604,14 +629,113 @@ function renderLineup(lineups) {
       `;
     }
 
-    slotCard.addEventListener('click', () => {
+    slotCard.addEventListener('click', (e) => {
+      if (e.target.closest('.btn-lineup-remove-slot')) {
+        e.stopPropagation();
+        removeLineupSlot(slot);
+        return;
+      }
       openLineupPicker(slot);
     });
 
     el.lineupContainer.appendChild(slotCard);
+  });
+
+  // In Creative Mode: render "+ เพิ่ม Slot" button card
+  if (state.creativeMode) {
+    const addSlotCard = document.createElement('div');
+    addSlotCard.className = 'lineup-slot-card lineup-add-slot-card';
+    addSlotCard.title = t('btnAddSlot') || '+ เพิ่ม Slot';
+    addSlotCard.innerHTML = `
+      <div style="font-size: 2.2rem; color: var(--accent-green); line-height: 1;">➕</div>
+      <div style="font-weight: 700; color: var(--accent-green); margin-top: 0.5rem;">${t('btnAddSlot') || '+ เพิ่ม Slot'}</div>
+    `;
+    addSlotCard.addEventListener('click', () => {
+      addLineupSlot();
+    });
+    el.lineupContainer.appendChild(addSlotCard);
   }
 }
 
+// Add extra slot in Creative Mode
+async function addLineupSlot() {
+  state.statusData = state.statusData || {};
+  let currentLineup = { ...(state.statusData.lineups || DEFAULT_LINEUP) };
+  if (Array.isArray(currentLineup)) {
+    const mapped = {};
+    currentLineup.forEach((id, idx) => { mapped[idx] = id; });
+    currentLineup = mapped;
+  }
+  const keys = Object.keys(currentLineup).map(k => parseInt(k, 10)).sort((a, b) => a - b);
+  const nextSlot = keys.length > 0 ? Math.max(...keys) + 1 : 0;
+  currentLineup[nextSlot] = 0;
+  state.statusData.lineups = currentLineup;
+
+  if (state.fullFreesrData) {
+    state.fullFreesrData.lineups = currentLineup;
+    if (state.fullFreesrData.battle_config) {
+      state.fullFreesrData.battle_config.custom_battle_lineup = currentLineup;
+    }
+  }
+
+  if (state.isConnected) {
+    if (state.serverMode === 'gac') {
+      await apiCall('/api/persistent', 'POST', { lineups: currentLineup }).catch(() => {});
+    } else {
+      await saveFreesrChangesToServer().catch(() => {});
+    }
+  }
+
+  renderLineup(currentLineup);
+  openLineupPicker(nextSlot);
+}
+
+// Remove slot in Creative Mode
+async function removeLineupSlot(slotIndex) {
+  state.statusData = state.statusData || {};
+  let currentLineup = { ...(state.statusData.lineups || DEFAULT_LINEUP) };
+  if (Array.isArray(currentLineup)) {
+    const mapped = {};
+    currentLineup.forEach((id, idx) => { mapped[idx] = id; });
+    currentLineup = mapped;
+  }
+
+  const keys = Object.keys(currentLineup).map(k => parseInt(k, 10)).sort((a, b) => a - b);
+  const newLineup = {};
+  let newIdx = 0;
+  for (const k of keys) {
+    if (k !== slotIndex) {
+      newLineup[newIdx] = currentLineup[k];
+      newIdx++;
+    }
+  }
+
+  if (Object.keys(newLineup).length === 0) {
+    newLineup[0] = 0;
+  }
+
+  state.statusData.lineups = newLineup;
+
+  if (state.fullFreesrData) {
+    state.fullFreesrData.lineups = newLineup;
+    if (state.fullFreesrData.battle_config) {
+      state.fullFreesrData.battle_config.custom_battle_lineup = newLineup;
+    }
+  }
+
+  if (state.isConnected) {
+    if (state.serverMode === 'gac') {
+      await apiCall('/api/persistent', 'POST', { lineups: newLineup }).catch(() => {});
+    } else {
+      await saveFreesrChangesToServer().catch(() => {});
+    }
+  }
+
+  renderLineup(newLineup);
+  const toastMsg = t('toastSlotRemoved', { slot: slotIndex + 1 }) || `ลบ Slot ${slotIndex + 1} เรียบร้อยแล้ว`;
+  showToast(toastMsg, 'info');
+}
+
 // Lineup Picker Modal
 function openLineupPicker(slotIndex) {
   state.selectedLineupSlot = slotIndex;
@@ -627,13 +751,10 @@ function renderPickerGrid() {
 
   // Option to remove character from slot
   const removeCard = document.createElement('div');
-  removeCard.className = 'card';
-  removeCard.style.padding = '0.75rem';
-  removeCard.style.textAlign = 'center';
-  removeCard.style.cursor = 'pointer';
+  removeCard.className = 'picker-remove-card';
   removeCard.innerHTML = `
-    <div style="font-size: 1.5rem; color: var(--accent-red);">❌</div>
-    <div style="font-size: 0.85rem; font-weight: bold; margin-top: 0.35rem; color: var(--accent-red);">${t('removeFromTeam')}</div>
+    <span style="font-size: 1.15rem; line-height: 1;">❌</span>
+    <span>${t('removeFromTeam')}</span>
   `;
   removeCard.addEventListener('click', async () => {
     await assignAvatarToLineup(state.selectedLineupSlot, 0);
@@ -650,26 +771,21 @@ function renderPickerGrid() {
     }
 
     const card = document.createElement('div');
-    card.className = `card avatar-card card-rarity-${meta.rarity}`;
-    card.style.minHeight = 'auto';
-    card.style.padding = '0.85rem';
-    card.style.cursor = 'pointer';
+    card.className = `picker-card-item card-rarity-${meta.rarity}`;
 
     card.innerHTML = `
-      <div style="display: flex; align-items: center; gap: 0.65rem;">
-        <div class="avatar-image-container" style="width: 44px; height: 44px;">
-          <img class="avatar-img"
-               src="./assets/avatars/${item.avatar_id}.png"
-               onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${item.avatar_id}.png';}else{this.style.display='none';}"
-               alt="${meta.name}">
-        </div>
-        <div>
-          <div style="font-weight: 700; font-size: 0.9rem;">${meta.name}</div>
-          <div style="font-size: 0.725rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.35rem;">
-            ${getElementIconHtml(meta.element, 16)}
-            ${getPathIconHtml(meta.path, 16)}
-            <span style="margin-left: 0.25rem;">Lv. ${item.level} • E${item.rank}</span>
-          </div>
+      <div class="picker-avatar-img-wrap">
+        <img class="picker-avatar-img"
+             src="./assets/avatars/${item.avatar_id}.png"
+             onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${item.avatar_id}.png';}else{this.style.display='none';}"
+             alt="${meta.name}">
+      </div>
+      <div class="picker-avatar-info">
+        <div class="picker-avatar-name" title="${meta.name}">${meta.name}</div>
+        <div class="picker-avatar-subinfo">
+          ${getElementIconHtml(meta.element, 18)}
+          ${getPathIconHtml(meta.path, 18)}
+          <span style="font-weight: 600; margin-left: 0.2rem;">Lv. ${item.level} • E${item.rank}</span>
         </div>
       </div>
     `;
@@ -688,9 +804,26 @@ async function assignAvatarToLineup(slot, avatarId) {
   try {
     state.statusData = state.statusData || {};
     const lineups = { ...(state.statusData.lineups || DEFAULT_LINEUP) };
+
+    // In Normal Mode: Prevent duplicates by clearing other slots that had this avatar
+    if (!state.creativeMode && avatarId !== 0) {
+      for (const s in lineups) {
+        if (parseInt(s, 10) !== slot && lineups[s] === avatarId) {
+          lineups[s] = 0;
+        }
+      }
+    }
+
     lineups[slot] = avatarId;
     state.statusData.lineups = lineups;
 
+    if (state.fullFreesrData) {
+      state.fullFreesrData.lineups = lineups;
+      if (state.fullFreesrData.battle_config) {
+        state.fullFreesrData.battle_config.custom_battle_lineup = lineups;
+      }
+    }
+
     if (state.isConnected) {
       if (state.serverMode === 'gac') {
         await apiCall('/api/persistent', 'POST', { lineups });
@@ -1952,6 +2085,21 @@ function setupEvents() {
   el.btnClosePickerModal.addEventListener('click', () => el.modalLineupPicker.classList.remove('active'));
   el.pickerSearch.addEventListener('input', renderPickerGrid);
 
+  // Creative Mode Toggle
+  if (el.toggleCreativeMode) {
+    el.toggleCreativeMode.checked = state.creativeMode;
+    el.toggleCreativeMode.addEventListener('change', (e) => {
+      state.creativeMode = e.target.checked;
+      localStorage.setItem('gac_srtool_creative_mode', state.creativeMode);
+      if (el.badgeCreativeMode) {
+        el.badgeCreativeMode.style.display = state.creativeMode ? 'inline-flex' : 'none';
+      }
+      renderLineup(state.statusData?.lineups);
+      const title = t('lblCreativeMode') || 'โหมดสร้างสรรค์';
+      showToast(`${title}: ${state.creativeMode ? 'ON' : 'OFF'}`, 'info');
+    });
+  }
+
   // Quick Action Buttons on Dashboard
   el.btnQuickMaxAll.addEventListener('click', maxAllAvatars);
   el.btnMaxAllAvatars.addEventListener('click', maxAllAvatars);

js/i18n.js

@@ -22,6 +22,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "เปิดใช้งานฟังก์ชันพิเศษ Aeon ★ Aha ทั่วทั้งเซิร์ฟเวอร์",
     "btnAddLc": "+ เพิ่ม LC",
     "btnAddRelic": "+ เพิ่มรีลิกส์",
+    "btnAddSlot": "+ เพิ่ม Slot",
+    "lblCreativeMode": "โหมดสร้างสรรค์",
+    "badgeCreative": "โหมดสร้างสรรค์",
+    "toastSlotRemoved": "ลบ Slot {slot} เรียบร้อยแล้ว",
     "modalAddLcTitle": "🗡️ เพิ่มกรวยแสงลง FreeSR",
     "modalAddRelicTitle": "🛡️ เพิ่มรีลิกส์ลง FreeSR",
     "lblSelectLc": "เลือกกรวยแสง",
@@ -216,6 +220,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Enable server-wide Aeon ★ Aha special trait",
     "btnAddLc": "+ Add LC",
     "btnAddRelic": "+ Add Relic",
+    "btnAddSlot": "+ Add Slot",
+    "lblCreativeMode": "Creative Mode",
+    "badgeCreative": "Creative",
+    "toastSlotRemoved": "Removed Slot {slot}",
     "modalAddLcTitle": "🗡️ Add Light Cone to FreeSR",
     "modalAddRelicTitle": "🛡️ Add Relic to FreeSR",
     "lblSelectLc": "Select Light Cone",
@@ -410,6 +418,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "全服启用星神·阿哈特殊被动",
     "btnAddLc": "+ 添加光锥",
     "btnAddRelic": "+ 添加遗器",
+    "btnAddSlot": "+ 添加槽位",
+    "lblCreativeMode": "创造模式",
+    "badgeCreative": "创造模式",
+    "toastSlotRemoved": "已移除槽位 {slot}",
     "modalAddLcTitle": "🗡️ 添加光锥至 FreeSR",
     "modalAddRelicTitle": "🛡️ 添加遗器至 FreeSR",
     "lblSelectLc": "选择光锥",
@@ -604,6 +616,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "全服啟用星神·阿哈特殊被動",
     "btnAddLc": "+ 新增光錐",
     "btnAddRelic": "+ 新增遺器",
+    "btnAddSlot": "+ 新增槽位",
+    "lblCreativeMode": "創造模式",
+    "badgeCreative": "創造模式",
+    "toastSlotRemoved": "已移除槽位 {slot}",
     "modalAddLcTitle": "🗡️ 新增光錐至 FreeSR",
     "modalAddRelicTitle": "🛡️ 新增遺器至 FreeSR",
     "lblSelectLc": "選擇光錐",
@@ -798,6 +814,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "全サーバーで星神・アッハの特殊パッシブを有効化",
     "btnAddLc": "+ 光円錐を追加",
     "btnAddRelic": "+ 遺物を追加",
+    "btnAddSlot": "+ スロット追加",
+    "lblCreativeMode": "クリエイティブモード",
+    "badgeCreative": "クリエイティブ",
+    "toastSlotRemoved": "スロット {slot} を削除しました",
     "modalAddLcTitle": "🗡️ FreeSRに光円錐を追加",
     "modalAddRelicTitle": "🛡️ FreeSRに遺物を追加",
     "lblSelectLc": "光円錐を選択",
@@ -992,6 +1012,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "서버 전체 에이언즈★아하 특수 패시브 활성화",
     "btnAddLc": "+ 광추 추가",
     "btnAddRelic": "+ 유물 추가",
+    "btnAddSlot": "+ 슬롯 추가",
+    "lblCreativeMode": "크리에이티브 모드",
+    "badgeCreative": "크리에이티브",
+    "toastSlotRemoved": "슬롯 {slot}이(가) 삭제되었습니다",
     "modalAddLcTitle": "🗡️ FreeSR에 광추 추가",
     "modalAddRelicTitle": "🛡️ FreeSR에 유물 추가",
     "lblSelectLc": "광추 선택",
@@ -1186,6 +1210,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Bật cơ chế đặc biệt Aeon ★ Aha toàn máy chủ",
     "btnAddLc": "+ Thêm Nón Ánh Sáng",
     "btnAddRelic": "+ Thêm Di Vật",
+    "btnAddSlot": "+ Thêm Vị Trí",
+    "lblCreativeMode": "Chế độ sáng tạo",
+    "badgeCreative": "Sáng tạo",
+    "toastSlotRemoved": "Đã xóa vị trí {slot}",
     "modalAddLcTitle": "🗡️ Thêm Nón Ánh Sáng vào FreeSR",
     "modalAddRelicTitle": "🛡️ Thêm Di Vật vào FreeSR",
     "lblSelectLc": "Chọn Nón Ánh Sáng",
@@ -1380,6 +1408,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Aktifkan kemampuan khusus Aeon ★ Aha di seluruh server",
     "btnAddLc": "+ Tambah Light Cone",
     "btnAddRelic": "+ Tambah Relic",
+    "btnAddSlot": "+ Tambah Slot",
+    "lblCreativeMode": "Mode Kreatif",
+    "badgeCreative": "Kreatif",
+    "toastSlotRemoved": "Slot {slot} berhasil dihapus",
     "modalAddLcTitle": "🗡️ Tambah Light Cone ke FreeSR",
     "modalAddRelicTitle": "🛡️ Tambah Relic ke FreeSR",
     "lblSelectLc": "Pilih Light Cone",
@@ -1574,6 +1606,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Activar rasgo especial de Eón ★ Aha en todo el servidor",
     "btnAddLc": "+ Añadir cono de luz",
     "btnAddRelic": "+ Añadir reliquia",
+    "btnAddSlot": "+ Añadir posición",
+    "lblCreativeMode": "Modo creativo",
+    "badgeCreative": "Creativo",
+    "toastSlotRemoved": "Posición {slot} eliminada",
     "modalAddLcTitle": "🗡️ Añadir cono de luz a FreeSR",
     "modalAddRelicTitle": "🛡️ Añadir reliquia a FreeSR",
     "lblSelectLc": "Seleccionar cono de luz",
@@ -1768,6 +1804,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Activer le trait spécial d'Éon ★ Aha sur tout le serveur",
     "btnAddLc": "+ Ajouter cône de lumière",
     "btnAddRelic": "+ Ajouter relique",
+    "btnAddSlot": "+ Ajouter un emplacement",
+    "lblCreativeMode": "Mode créatif",
+    "badgeCreative": "Créatif",
+    "toastSlotRemoved": "Emplacement {slot} supprimé",
     "modalAddLcTitle": "🗡️ Ajouter cône de lumière à FreeSR",
     "modalAddRelicTitle": "🛡️ Ajouter relique à FreeSR",
     "lblSelectLc": "Sélectionner cône de lumière",
@@ -1962,6 +2002,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Serverweite Äon ★ Aha-Spezialmechanik aktivieren",
     "btnAddLc": "+ Lichtkegel hinzufügen",
     "btnAddRelic": "+ Relikt hinzufügen",
+    "btnAddSlot": "+ Platz hinzufügen",
+    "lblCreativeMode": "Kreativmodus",
+    "badgeCreative": "Kreativ",
+    "toastSlotRemoved": "Platz {slot} entfernt",
     "modalAddLcTitle": "🗡️ Lichtkegel zu FreeSR hinzufügen",
     "modalAddRelicTitle": "🛡️ Relikt zu FreeSR hinzufügen",
     "lblSelectLc": "Lichtkegel auswählen",
@@ -2156,6 +2200,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Включить особый пассивный навык Эона ★ Аха по всему серверу",
     "btnAddLc": "+ Добавить световой конус",
     "btnAddRelic": "+ Добавить реликвию",
+    "btnAddSlot": "+ Добавить слот",
+    "lblCreativeMode": "Творческий режим",
+    "badgeCreative": "Творческий",
+    "toastSlotRemoved": "Слот {slot} удален",
     "modalAddLcTitle": "🗡️ Добавить световой конус в FreeSR",
     "modalAddRelicTitle": "🛡️ Добавить реликвию в FreeSR",
     "lblSelectLc": "Выберите световой конус",
@@ -2350,6 +2398,10 @@ export const TRANSLATIONS = {
     "ahaGlobalDesc": "Ativar habilidade passiva especial de Aeon ★ Aha em todo o servidor",
     "btnAddLc": "+ Adicionar Cone de Luz",
     "btnAddRelic": "+ Adicionar Relíquia",
+    "btnAddSlot": "+ Adicionar espaço",
+    "lblCreativeMode": "Modo Criativo",
+    "badgeCreative": "Criativo",
+    "toastSlotRemoved": "Espaço {slot} removido",
     "modalAddLcTitle": "🗡️ Adicionar Cone de Luz ao FreeSR",
     "modalAddRelicTitle": "🛡️ Adicionar Relíquia ao FreeSR",
     "lblSelectLc": "Selecionar Cone de Luz",