fix(showcase): responsive card, full localization, in-game stat icons and clean PNG export

Layout: card now fills its container (3/2/1 columns) with no horizontal scrollbar.

i18n: every modal/showcase/console string follows the selected language, named fallbacks for th/en plus English fallback for other locales, localized character names and light-cone passive text.

Showcase stats use the official in-game property icons (same set as the overview tab) instead of emoji, including the element DMG icon.

Export: fixed 1200px clone with poster metrics, cover-cropped splash art (html2canvas ignores object-fit), transparent background so the rounded corners have no dark wedges, and a two-pass measurement inside the capture iframe so the PNG is never cropped.

index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GaCy-Srtool</title>
-  <link rel="stylesheet" href="css/styles.css?v=2.19">
+  <link rel="stylesheet" href="css/styles.css?v=2.21">
   <link rel="stylesheet" href="css/item-catalog.css?v=2">
   <link rel="icon" type="image/png" href="assets/logo.png">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
@@ -273,7 +273,7 @@
           </form>
           <div class="console-command-preview-box" aria-live="polite" aria-atomic="true">
             <div class="console-preview-label">COMMAND PREVIEW</div>
-            <code id="console-command-preview">พิมพ์ / เพื่อเลือกคำสั่ง</code>
+            <code id="console-command-preview" data-i18n="consolePreviewHint">พิมพ์ / เพื่อเลือกคำสั่ง</code>
             <div id="console-command-description"></div>
             <div id="console-command-argument"></div>
           </div>
@@ -285,7 +285,7 @@
             <div id="console-suggestion-options" role="listbox" aria-label="Command suggestions"></div>
           </div>
           <div style="font-size: 0.725rem; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center;">
-            <span>↑ ↓ เลื่อนรายการ · Tab เติมค่า · Shift+Tab ย้อนรายการ · Esc ปิด · Enter ส่งคำสั่ง</span>
+            <span data-i18n="consoleKeyboardHint">↑ ↓ เลื่อนรายการ · Tab เติมค่า · Shift+Tab ย้อนรายการ · Esc ปิด · Enter ส่งคำสั่ง</span>
             <span id="lbl-console-conn-status" style="color: var(--accent-green);">● Server Online</span>
           </div>
         </div>
@@ -680,12 +680,12 @@
             <div class="ex-switch-card">
               <div>
                 <div style="font-weight: 700;">Freecam / FaceCam</div>
-                <div style="font-size: 0.8rem; color: var(--text-muted);">เลือกโหมด แล้วกด Tab ในเกมเพื่อเปิดหรือปิดกล้อง</div>
-                <label for="camera-mode">โหมดกล้อง</label>
-                <select id="camera-mode"><option value="freecam">Freecam</option><option value="facecam">FaceCam (ทดลอง)</option></select>
-                <label for="camera-distance">ระยะ FaceCam</label>
+                <div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="cameraHint">เลือกโหมด แล้วกด Tab ในเกมเพื่อเปิดหรือปิดกล้อง</div>
+                <label for="camera-mode" data-i18n="cameraMode">โหมดกล้อง</label>
+                <select id="camera-mode"><option value="freecam">Freecam</option><option value="facecam" data-i18n="cameraFaceCamExperimental">FaceCam (ทดลอง)</option></select>
+                <label for="camera-distance" data-i18n="cameraFaceCamDistance">ระยะ FaceCam</label>
                 <input id="camera-distance" type="number" min="0.5" max="5" step="0.1" value="2">
-                <button type="button" class="btn btn-success" id="btn-save-camera">บันทึกกล้อง</button>
+                <button type="button" class="btn btn-success" id="btn-save-camera" data-i18n="cameraSave">บันทึกกล้อง</button>
               </div>
             </div>
             <div class="ex-switch-card">
@@ -1401,7 +1401,7 @@
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
           <div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight); display: flex; align-items: center; gap: 0.5rem;">
             <span data-i18n="modalTabShowcase">🖼️ การ์ดแสดงผล</span>
-            <span class="btn-sm btn-secondary" id="showcase-build-tag" data-i18n="overviewStatsTitle">Build Overview</span>
+            <span class="btn-sm btn-secondary" id="showcase-build-tag" data-i18n="showcaseBuildTag">Build Overview</span>
           </div>
           <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
             <button type="button" class="btn btn-sm btn-gold" id="btn-showcase-auto-relics" data-i18n="showcaseAutoRelics">
@@ -1416,8 +1416,8 @@
           </div>
         </div>
 
-        <!-- The Showcase Card UI Container with horizontal scroll wrapper -->
-        <div class="showcase-scroll-wrapper" style="overflow-x: auto; padding-bottom: 0.5rem; max-width: 100%;">
+        <!-- The Showcase Card UI Container -->
+        <div class="showcase-scroll-wrapper" style="padding-bottom: 0.5rem; max-width: 100%;">
           <div id="showcase-card-container" class="showcase-card-layout">
             <!-- Rendered dynamically by JS -->
           </div>
@@ -1823,6 +1823,6 @@
   <div class="toast-container" id="toast-container"></div>
 
   <!-- Script Modules -->
-  <script type="module" src="js/app.js?v=3.3"></script>
+  <script type="module" src="js/app.js?v=3.14"></script>
 </body>
 </html>