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

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>