Files

1823 lines
123 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GaC-Srtool</title>
<link rel="stylesheet" href="css/styles.css?v=2.16">
<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>
</head>
<body>
<!-- App Header -->
<header class="app-header">
<div class="brand">
<img src="assets/logo.png" alt="GaC Logo" class="brand-logo-img">
<div>
<div class="brand-title" style="display: flex; align-items: center; gap: 0.5rem;">
<span>GaC-Srtool</span>
<span class="badge-branch" id="header-branch-badge" style="display: none;"></span>
</div>
<div class="brand-subtitle" data-i18n="appSubtitle">Star Rail FreeSR & Server Controller</div>
</div>
</div>
<div class="header-controls">
<!-- Server Mode Selector -->
<div class="server-mode-badge" title="โหมดการเชื่อมต่อเซิร์ฟเวอร์" data-i18n-title="lblServerModeActive">
<span>🌐</span>
<select id="server-mode-select" class="server-mode-select">
<option value="gac" selected>GaC-hkrpg-go</option>
<option value="firefly" disabled data-i18n="serverModeFireflyPaused">FireflyGo (กำลังพัฒนา)</option>
<option value="robin" disabled data-i18n="serverModeRobinPaused">RobinSR (กำลังพัฒนา)</option>
</select>
</div>
<!-- Language Selector (13 Languages) -->
<select id="lang-select" class="form-select btn-sm" style="width: auto; padding: 0.4rem 0.75rem; background: var(--bg-secondary); cursor: pointer;" title="Language / ภาษา" data-i18n-title="languageSelectorTitle">
</select>
<!-- Connection Pill -->
<div class="connection-pill" id="btn-open-settings" title="คลิกเพื่อตั้งค่าการเชื่อมต่อ API" data-i18n-title="apiSettingsTooltip">
<span class="status-dot" id="status-dot"></span>
<span id="connection-status-text">กำลังตรวจสอบ...</span>
</div>
<button class="btn btn-secondary btn-sm" id="btn-quick-ping" title="รีเฟรชการเชื่อมต่อ" data-i18n="refresh" data-i18n-title="refresh">
🔄 รีเฟรช
</button>
</div>
</header>
<!-- Navigation Bar -->
<nav class="nav-tabs">
<button class="tab-btn active" data-tab="tab-dashboard" data-i18n="tabDashboard">📊 แดชบอร์ด & จัดทีม</button>
<button class="tab-btn" data-tab="tab-avatars" data-i18n="tabAvatars">👥 ตัวละคร</button>
<button class="tab-btn" data-tab="tab-equipment" data-i18n="tabEquipment">🗡️ กรวยแสง & รีลิกส์</button>
<button class="tab-btn" data-tab="tab-inventory" data-i18n="tabInventory">🎒 ไอเทมในกระเป๋า</button>
<button class="tab-btn" data-tab="tab-monster-settings" id="tab-btn-monster-settings" data-i18n="tabMonsterSettings">👾 Monster Setting</button>
<button class="tab-btn" data-tab="tab-damage-analyst" id="tab-btn-damage-analyst" data-i18n="tabDamageAnalyst">💥 Damage Analyst</button>
<button class="tab-btn" data-tab="tab-persistent" id="tab-btn-persistent" data-i18n="tabPersistent">💾 จัดการเซฟ GaC</button>
<button class="tab-btn" data-tab="tab-exrank" id="tab-btn-exrank" data-i18n="tabExrank">⚡ สกิลพิเศษ Ex-Rank</button>
<button class="tab-btn" data-tab="tab-json" data-i18n="tabJson">📝 จัดการไฟล์ JSON</button>
<button class="tab-btn" data-tab="tab-settings" data-i18n="tabSettings">⚙️ ตั้งค่า</button>
<div class="nav-branch-pill" id="nav-branch-pill" title="Git Branch ที่ใช้งานอยู่" data-i18n-title="branchTooltip" style="display: none;">
<svg class="branch-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path>
</svg>
<span id="nav-branch-name"></span>
</div>
</nav>
<!-- Main Container -->
<main class="main-container">
<!-- 1. Dashboard Tab & Party Lineup -->
<section id="tab-dashboard" class="tab-content active">
<div class="grid-3" style="margin-bottom: 1.5rem;">
<div class="card stat-box">
<div class="stat-number" id="stat-avatars">0</div>
<div class="stat-label" data-i18n="statAvatars">ตัวละครที่ครอบครอง</div>
</div>
<div class="card stat-box">
<div class="stat-number" id="stat-lightcones">0</div>
<div class="stat-label" data-i18n="statLightcones">กรวยแสง</div>
</div>
<div class="card stat-box">
<div class="stat-number" id="stat-relics">0</div>
<div class="stat-label" data-i18n="statRelics">รีลิกส์</div>
</div>
</div>
<!-- Party Lineup Visualizer -->
<div class="card" style="margin-bottom: 1.5rem;">
<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 -->
</div>
</div>
<div class="grid-2" style="align-items: start;">
<!-- Column 1: Server Status & Team Combat Synergy -->
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
<!-- 1. Server & Map Card -->
<div class="card">
<div class="card-title">
<span data-i18n="serverStatusTitle">📍 สถานะเซิร์ฟเวอร์ & พิกัดปัจจุบัน</span>
<span class="btn-sm btn-secondary" id="badge-version" data-i18n="apiLive">API Live</span>
</div>
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<div>
<span class="form-label" data-i18n="lblServerModeActive">โหมดเซิร์ฟเวอร์ที่ใช้งาน</span>
<strong id="lbl-active-mode" style="color: var(--accent-cyan);">GaC-hkrpg-go</strong>
</div>
<div>
<span class="form-label" data-i18n="lblApiEndpoint">API Gateway Endpoint</span>
<code id="lbl-api-url" style="color: var(--accent-cyan); font-size: 0.9rem;">-</code>
</div>
<div style="display: flex; gap: 1rem;">
<div>
<span class="form-label" data-i18n="lblPlaneId">Plane ID</span>
<span id="lbl-plane-id" style="font-weight: bold;">-</span>
</div>
<div>
<span class="form-label" data-i18n="lblFloorId">Floor ID</span>
<span id="lbl-floor-id" style="font-weight: bold;">-</span>
</div>
</div>
<div>
<span class="form-label" data-i18n="coords">พิกัดตัวละคร XYZ</span>
<span id="lbl-coordinates" style="color: var(--text-muted); font-size: 0.85rem;">-</span>
</div>
</div>
</div>
<!-- 2. Mini Battle Summary & Team Stats -->
<div class="card" id="card-battle-summary">
<div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
<span style="display: flex; align-items: center; gap: 0.5rem;">
<span>💥</span>
<span data-i18n="miniBattleTitle">สรุปการต่อสู้ล่าสุด & ดาเมจทีม</span>
</span>
<div style="display: flex; align-items: center; gap: 0.4rem;">
<span class="badge-super-tag" id="badge-mini-battle-status" data-i18n="miniNoBattleTitle" style="background: rgba(156, 163, 175, 0.12); color: var(--text-muted); font-weight: 800; border: 1px solid rgba(156, 163, 175, 0.25);">
ยังไม่มีข้อมูลการต่อสู้
</span>
<button type="button" class="btn btn-sm btn-secondary" id="btn-mini-view-full-analyst" style="font-size: 0.725rem; padding: 0.2rem 0.55rem; color: var(--accent-cyan); border-color: rgba(56, 189, 248, 0.35); font-weight: 700;" title="เปิดหน้า Damage Analyst ตัวเต็ม" data-i18n="miniViewFullAnalyst">
Damage Analyst →
</button>
</div>
</div>
<p class="card-subtitle" style="margin-bottom: 0.75rem;" data-i18n="miniBattleSubtitle">
สถิติดาเมจ, DPS และสัดส่วนการทำดาเมจของตัวละครในทีมจากการต่อสู้จริงล่าสุด
</p>
<!-- A. Key Battle Metric Boxes (4 Boxes) -->
<div class="mini-battle-metrics-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.85rem;">
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
<div class="mini-battle-val" id="mini-total-dmg" style="font-size: 1.15rem; font-weight: 800; color: #f87171; font-family: monospace;">-</div>
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniTotalDmg">ดาเมจรวม</div>
</div>
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
<div class="mini-battle-val" id="mini-team-dps" style="font-size: 1.15rem; font-weight: 800; color: var(--accent-gold); font-family: monospace;">-</div>
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniTeamDps">DPS รวม</div>
</div>
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
<div class="mini-battle-val" id="mini-break-dmg" style="font-size: 1.15rem; font-weight: 800; color: var(--accent-cyan); font-family: monospace;">-</div>
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniBreakDmg">Break / Super Break</div>
</div>
<div class="mini-battle-box" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-sm); padding: 0.5rem 0.4rem; text-align: center;">
<div class="mini-battle-val" id="mini-battle-turns" style="font-size: 1.15rem; font-weight: 800; color: var(--accent-green); font-family: monospace;">-</div>
<div class="mini-battle-lbl" style="font-size: 0.675rem; color: var(--text-muted); margin-top: 0.15rem;" data-i18n="miniBattleTurns">เทิร์น / เวลา</div>
</div>
</div>
<!-- B. Mini Avatar Damage Breakdown (4 Avatars) -->
<div style="margin-bottom: 0.85rem;">
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;" data-i18n="miniBreakdownTitle">
📊 สัดส่วนดาเมจสมาชิกในทีม (Damage Share)
</div>
<div id="mini-battle-avatars-list" style="display: flex; flex-direction: column; gap: 0.45rem;">
<!-- Rendered dynamically by JS -->
</div>
</div>
<!-- C. Equipment Readiness & Stats Overview -->
<div>
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;" data-i18n="synergyEquipmentTitle">
🛡️ ความพร้อมของอุปกรณ์และเลเวลเฉลี่ย
</div>
<div class="synergy-metrics-grid">
<div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-avg-level">-</div>
<div class="synergy-metric-lbl" data-i18n="synergyAvgLevel">เลเวลเฉลี่ย</div>
</div>
<div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-avg-eidolon">-</div>
<div class="synergy-metric-lbl" data-i18n="synergyAvgEidolon">Eidolon เฉลี่ย</div>
</div>
<div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-lc-ready">-</div>
<div class="synergy-metric-lbl" data-i18n="synergyLcEquipped">สวมกรวยแสง</div>
</div>
<div class="synergy-metric-box">
<div class="synergy-metric-val" id="synergy-relic-ready">-</div>
<div class="synergy-metric-lbl" data-i18n="synergyRelicFull">รีลิกส์ครบชุด</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column 2: GM Command Dispatcher & Live Log Console -->
<div class="card" id="card-gm-console" style="display: flex; flex-direction: column; gap: 0.75rem;">
<div class="card-title" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
<span style="display: flex; align-items: center; gap: 0.5rem;">
<span>💻</span>
<span>GM Command Console & Live Log</span>
</span>
<div style="display: flex; gap: 0.35rem;">
<button type="button" class="btn btn-sm btn-secondary" id="btn-console-copy-log" title="Copy all logs" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;">
📋 Copy
</button>
<button type="button" class="btn btn-sm btn-secondary" id="btn-console-clear-log" title="Clear terminal log" style="padding: 0.2rem 0.6rem; font-size: 0.75rem;">
🗑️ Clear
</button>
</div>
</div>
<p class="card-subtitle" style="margin-bottom: 0.25rem;">Send GM and server commands, with live status and packet logs.</p>
<div style="display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap;">
<button type="button" class="btn btn-sm btn-secondary" id="btn-client-unstuck">Unstuck</button>
<span id="client-unstuck-description" style="font-size:0.75rem; color:var(--text-muted);">Clear a stuck loading spinner without restarting the game. Keeps saved CW progress.</span>
</div>
<div id="client-unstuck-status" role="status" aria-live="polite" style="font-size:0.75rem; color:var(--text-muted);"></div>
<!-- Interactive Terminal Screen -->
<div class="console-terminal-wrapper">
<div class="console-terminal-header">
<span class="terminal-dot dot-red"></span>
<span class="terminal-dot dot-yellow"></span>
<span class="terminal-dot dot-green"></span>
<span class="terminal-title">GaC-hkrpg-go Console Session (Interactive GM Dispatcher)</span>
</div>
<div class="console-terminal-log" id="console-terminal-log">
<!-- Logs rendered here -->
</div>
</div>
<!-- Command Input Bar -->
<form id="form-console-cmd" style="display: flex; gap: 0.5rem; align-items: center; margin-top: 0.25rem;">
<div class="console-input-wrap" style="flex: 1; display: flex; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid var(--border-color); border-radius: 6px; padding: 0 0.75rem;">
<span style="color: var(--accent-cyan); font-family: monospace; font-weight: 800; font-size: 1.1rem; margin-right: 0.5rem;">&gt;</span>
<input type="text" id="console-cmd-input" class="form-input" placeholder="Type a command, e.g. /heal, /teleport 20411, /give 102 1000" style="background: transparent; border: none; padding: 0.6rem 0; font-family: monospace; font-size: 0.85rem; box-shadow: none;" autocomplete="off" role="combobox" aria-autocomplete="list" aria-controls="console-suggestion-options" aria-expanded="false">
</div>
<button type="submit" class="btn btn-primary" id="btn-console-cmd-send" style="padding: 0.6rem 1.25rem; font-weight: 700; white-space: nowrap;">
Run
</button>
</form>
<div id="console-command-suggestions" class="console-suggestions" hidden>
<div class="console-suggestions-header">
<span>Command suggestions</span>
<span id="console-suggestion-count" class="console-suggestion-count">‹ 0/0 ›</span>
</div>
<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>Use ↑ / ↓ to browse suggestions or command history. Press Tab to complete.</span>
<span id="lbl-console-conn-status" style="color: var(--accent-green);">● Server Online</span>
</div>
</div>
</div>
</section>
<!-- 2. Avatars Tab (Build & Eidolon Editor) -->
<section id="tab-avatars" class="tab-content">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 1rem;">
<div style="display: flex; gap: 0.75rem; flex: 1; max-width: 680px; flex-wrap: wrap;">
<input type="text" id="avatar-search" class="form-input" data-i18n-placeholder="searchPlaceholder" placeholder="🔍 ค้นหาชื่อหรือ ID ตัวละคร..." style="min-width: 180px; flex: 1;">
<select id="avatar-filter-rarity" class="form-select" style="max-width: 130px;">
<option value="all" data-i18n="filterAllRarity">ทุกระดับดาว</option>
<option value="5" data-i18n="filter5Star">5 ดาว</option>
<option value="4" data-i18n="filter4Star">4 ดาว</option>
</select>
<select id="avatar-filter-element" class="form-select" style="max-width: 130px;">
<option value="all" data-i18n="filterAllElements">ทุกธาตุ</option>
<option value="Fire">ไฟ</option>
<option value="Ice">น้ำแข็ง</option>
<option value="Lightning">สายฟ้า</option>
<option value="Wind">ลม</option>
<option value="Physical">กายภาพ</option>
<option value="Quantum">ควอนตัม</option>
<option value="Imaginary">จินตภาพ</option>
</select>
<select id="avatar-filter-path" class="form-select" style="max-width: 130px;">
<option value="all" data-i18n="filterAllPaths">ทุกประเภท</option>
<option value="Destruction">ทำลายล้าง</option>
<option value="Hunt">ล่าสังหาร</option>
<option value="Erudition">ปัญญา</option>
<option value="Harmony">ประสาน</option>
<option value="Nihility">ลบล้าง</option>
<option value="Preservation">อนุรักษ์</option>
<option value="Abundance">เฟื่องฟู</option>
<option value="Remembrance">ความทรงจำ</option>
<option value="Elation">ปีติ</option>
</select>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<button class="btn btn-primary" id="btn-all-avatars-e0s1" data-i18n="btnAllE0S1" style="background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); border-color: #38bdf8;">⚡ ปรับ E0S1 ทุกตัว</button>
<button class="btn btn-gold" id="btn-max-all-avatars" data-i18n="btnMaxAll">⭐ ปรับ Max E6 ทุกตัว</button>
<button class="btn btn-secondary" id="btn-reload-avatars" data-i18n="btnReload">🔄 รีโหลด</button>
</div>
</div>
<div id="avatars-grid" class="grid-4">
<div style="color: var(--text-muted); grid-column: 1/-1; text-align: center; padding: 2rem;" data-i18n="avatarsLoading">
กำลังดึงข้อมูลตัวละคร...
</div>
</div>
</section>
<!-- 3. Equipment Tab (Lightcones & Relics) -->
<section id="tab-equipment" class="tab-content">
<!-- Toolbar & Subtabs Card -->
<div class="card" style="margin-bottom: 1rem; padding: 0.85rem 1rem;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
<!-- Subtab Buttons: Light Cones vs Relics -->
<div style="display: flex; gap: 0.4rem; background: var(--bg-card-hover); padding: 0.3rem; border-radius: var(--radius-md); border: 1px solid var(--border-color);">
<button type="button" class="btn btn-sm btn-primary eq-subtab-btn active" id="btn-eq-subtab-lc" data-subtab="lc" style="display: flex; align-items: center; gap: 0.45rem;">
<span data-i18n="eqLcTitle">🗡️ กรวยแสง (Light Cones)</span>
<span class="badge-super-tag" id="badge-total-lc" style="padding: 0.05rem 0.4rem; font-size: 0.75rem;">0</span>
</button>
<button type="button" class="btn btn-sm btn-secondary eq-subtab-btn" id="btn-eq-subtab-relic" data-subtab="relic" style="display: flex; align-items: center; gap: 0.45rem;">
<span data-i18n="eqRelicTitle">🛡️ รีลิกส์ (Relics)</span>
<span class="badge-super-tag" id="badge-total-relics" style="padding: 0.05rem 0.4rem; font-size: 0.75rem;">0</span>
</button>
</div>
<!-- Search & Filter Controls -->
<div style="display: flex; gap: 0.4rem; flex: 1; max-width: 620px; flex-wrap: wrap;">
<input type="text" id="eq-search" class="form-input" data-i18n-placeholder="equipmentSearchPlaceholder" placeholder="🔍 ค้นหาชื่อหรือ ID อุปกรณ์..." style="flex: 1; min-width: 160px;">
<select id="eq-filter-rarity" class="form-select" style="max-width: 110px;">
<option value="all" data-i18n="filterAllRarity">ทุกดาว</option>
<option value="5" data-i18n="filter5Star">5 ดาว</option>
<option value="4" data-i18n="filter4Star">4 ดาว</option>
<option value="3" data-i18n="filter3Star">3 ดาว</option>
</select>
<select id="eq-filter-equipped" class="form-select" style="max-width: 130px;">
<option value="all" data-i18n="filterAllStatus">สถานะทั้งหมด</option>
<option value="equipped" data-i18n="filterEquipped">สวมใส่อยู่</option>
<option value="unequipped" data-i18n="filterInInventory">ในกระเป๋า</option>
</select>
<select id="eq-filter-extra" class="form-select" style="max-width: 120px;">
<option value="all" data-i18n="filterAllTypes">ทุกประเภท</option>
</select>
</div>
<!-- Action Buttons -->
<div style="display: flex; gap: 0.4rem;">
<button type="button" class="btn btn-sm btn-success" id="btn-open-add-lc" data-i18n="btnAddLc">+ เพิ่ม LC</button>
<button type="button" class="btn btn-sm btn-success" id="btn-open-add-relic" data-i18n="btnAddRelic" style="display: none;">+ เพิ่มรีลิกส์</button>
</div>
</div>
</div>
<!-- Main Layout: Tiles Grid + Inspector Side Panel -->
<div style="display: flex; gap: 1rem; align-items: flex-start;">
<!-- Left: Inventory Tiles Grid -->
<div style="flex: 1; min-width: 0;">
<div id="lightcones-grid" class="eq-tiles-grid">
<div style="color: var(--text-muted); text-align: center; padding: 2rem; grid-column: 1/-1;" data-i18n="eqLcLoading">กำลังโหลดข้อมูลกรวยแสง...</div>
</div>
<div id="relics-grid" class="eq-tiles-grid" style="display: none;">
<div style="color: var(--text-muted); text-align: center; padding: 2rem; grid-column: 1/-1;" data-i18n="eqRelicLoading">กำลังโหลดข้อมูลรีลิกส์...</div>
</div>
</div>
<!-- Right: Inspector Side Card -->
<div id="eq-inspector-card" class="eq-inspector-wrapper" style="width: 320px; position: sticky; top: 80px; flex-shrink: 0; display: none;">
<!-- Populated by JS -->
</div>
</div>
</section>
<!-- Material inventory editor: edits only Client-catalog item quantities. -->
<section id="tab-inventory" class="tab-content">
<div class="inventory-mode-switch" role="tablist" aria-label="Inventory views">
<button type="button" id="btn-inventory-catalog" class="inventory-mode-btn active" role="tab" aria-selected="true" aria-controls="item-catalog-panel" data-i18n="itemCatalogTitle">📚 สมุดรวมไอเทม</button>
<button type="button" id="btn-inventory-manage" class="inventory-mode-btn" role="tab" aria-selected="false" aria-controls="inventory-manage-panel" data-i18n="inventoryTitle">🎒 จัดการจำนวนไอเทม</button>
</div>
<div id="item-catalog-panel" class="inventory-mode-panel active" role="tabpanel">
<div class="card" style="margin-bottom:1rem;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;">
<div>
<div class="card-title" data-i18n="itemCatalogTitle">📚 สมุดรวมไอเทม</div>
<p class="card-subtitle" data-i18n="itemCatalogDescription">ค้นชื่อหรือ ID เพื่อดูรูปและรหัสจากตารางเกม</p>
</div>
<span id="item-catalog-count" class="badge-super-tag">—</span>
</div>
<div class="item-catalog-toolbar">
<input type="search" id="item-catalog-search" class="form-input" data-i18n-placeholder="itemCatalogSearchPlaceholder" placeholder="ค้นหาชื่อหรือ Item ID...">
<select id="item-catalog-filter" class="form-select" aria-label="Filter item catalog">
<option value="all" data-i18n="itemCatalogFilterAll">ทั้งหมด</option>
<option value="supported" data-i18n="itemCatalogFilterSupported">GaC รองรับ</option>
<option value="item" data-i18n="itemCatalogFilterItems">ไอเทม</option>
<option value="lightcone" data-i18n="itemCatalogFilterLightCones">กรวยแสง</option>
<option value="relic" data-i18n="itemCatalogFilterRelics">รีลิกส์</option>
</select>
</div>
<div id="item-catalog-status" role="status" aria-live="polite" style="font-size:.8rem;color:var(--text-muted);margin-top:.7rem;" data-i18n="itemCatalogLoading">กำลังโหลดสมุดไอเทม...</div>
</div>
<div class="card" style="padding:1rem 1rem 0;overflow:hidden;">
<div id="item-catalog-grid" class="item-catalog-grid">
<div class="item-catalog-empty" data-i18n="itemCatalogLoading">กำลังโหลดสมุดไอเทม...</div>
</div>
<div class="item-catalog-pagination">
<button type="button" class="btn btn-sm btn-secondary" id="item-catalog-prev" disabled data-i18n="inventoryPrevious">ก่อนหน้า</button>
<span id="item-catalog-page-label" style="font-size:.8rem;color:var(--text-muted);"></span>
<button type="button" class="btn btn-sm btn-secondary" id="item-catalog-next" disabled data-i18n="inventoryNext">ถัดไป</button>
</div>
</div>
</div>
<div id="inventory-manage-panel" class="inventory-mode-panel" role="tabpanel" hidden>
<div class="card" style="margin-bottom: 1rem;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;">
<div>
<div class="card-title" data-i18n="inventoryTitle">🎒 จัดการจำนวนไอเทม</div>
<p class="card-subtitle" data-i18n="inventoryDescription">ค้นหาด้วย Item ID แล้วแก้จำนวนหลายรายการก่อนบันทึกครั้งเดียว รายการมาจาก catalog ของ Client ที่เซิร์ฟเวอร์ใช้ ช่องว่างหมายถึงใช้ค่าเริ่มต้นของเซิร์ฟเวอร์</p>
</div>
<div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
<span id="inventory-count" class="badge-super-tag">—</span>
<span id="inventory-dirty-count" class="badge-super-tag" style="display:none;">0</span>
</div>
</div>
<div style="display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;margin-top:1rem;">
<input type="search" id="inventory-search" class="form-input" style="flex:1;min-width:220px;" data-i18n-placeholder="inventorySearchPlaceholder" placeholder="ค้นหา Item ID...">
<button type="button" class="btn btn-secondary" id="btn-inventory-discard" disabled data-i18n="inventoryDiscard">ทิ้งการแก้ไข</button>
<button type="button" class="btn btn-success" id="btn-inventory-save" disabled data-i18n="inventorySave">บันทึกการเปลี่ยนแปลง</button>
</div>
<div id="inventory-status" role="status" aria-live="polite" style="font-size:.8rem;color:var(--text-muted);margin-top:.7rem;" data-i18n="inventoryLoadHint">กำลังโหลดรายการจากเซิร์ฟเวอร์...</div>
</div>
<div class="card" style="padding:0;overflow:hidden;">
<div style="overflow:auto;max-height:65vh;">
<table style="width:100%;border-collapse:collapse;min-width:420px;">
<thead style="position:sticky;top:0;background:var(--bg-card-hover);z-index:1;">
<tr>
<th style="text-align:left;padding:.8rem 1rem;" data-i18n="inventoryItemId">Item ID</th>
<th style="text-align:left;padding:.8rem 1rem;" data-i18n="inventoryDefaultCount">จำนวนในกระเป๋า</th>
</tr>
</thead>
<tbody id="inventory-materials-body">
<tr><td colspan="2" style="padding:1.5rem;text-align:center;color:var(--text-muted);" data-i18n="inventoryLoadHint">กำลังโหลดรายการจากเซิร์ฟเวอร์...</td></tr>
</tbody>
</table>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid var(--border-color);">
<button type="button" class="btn btn-sm btn-secondary" id="btn-inventory-prev" disabled data-i18n="inventoryPrevious">ก่อนหน้า</button>
<span id="inventory-page-label" style="font-size:.8rem;color:var(--text-muted);"></span>
<button type="button" class="btn btn-sm btn-secondary" id="btn-inventory-next" disabled data-i18n="inventoryNext">ถัดไป</button>
</div>
</div>
</div>
</section>
<!-- Monster settings: resource-backed stage inspection plus Calyx-only custom waves. -->
<section id="tab-monster-settings" class="tab-content">
<div class="card monster-settings-intro">
<div class="card-title"><span data-i18n="monsterSettingsTitle">👾 Monster Setting</span></div>
<p class="card-subtitle" data-i18n="monsterSettingsDescription">ตรวจสอบข้อมูลด่านและคลื่นมอนจาก resource ของ Client ตามเวอร์ชัน ปรับ custom monster ได้เฉพาะ Golden / Crimson Calyx เท่านั้น</p>
<div class="monster-settings-rule" role="note">
<span aria-hidden="true">🔒</span>
<span data-i18n="monsterSettingsRule">Weekly Boss, Stagnant Shadow, Cavern of Corrosion และ Endgame ใช้ข้อมูลด่านจาก Client และแก้คลื่นมอนผ่าน Srtool ไม่ได้</span>
</div>
</div>
<div class="monster-settings-tabs" role="tablist" aria-label="Monster settings modes">
<button type="button" class="monster-settings-tab active" role="tab" aria-selected="true" data-monster-mode="moc" data-i18n="monsterModeMoc">Memory of Chaos</button>
<button type="button" class="monster-settings-tab" role="tab" aria-selected="false" data-monster-mode="pf" data-i18n="monsterModePf">Pure Fiction</button>
<button type="button" class="monster-settings-tab" role="tab" aria-selected="false" data-monster-mode="as" data-i18n="monsterModeAs">Apocalyptic Shadow</button>
<button type="button" class="monster-settings-tab" role="tab" aria-selected="false" data-monster-mode="aa" data-i18n="monsterModeAa">Anomaly Arbitration</button>
<button type="button" class="monster-settings-tab monster-settings-tab-aha" id="monster-mode-aha" role="tab" aria-selected="false" aria-controls="monster-settings-aha-help" data-monster-mode="aha" data-i18n="ahaHelpTitle">Aha's Help</button>
<button type="button" class="monster-settings-tab" role="tab" aria-selected="false" data-monster-mode="custom" data-i18n="monsterModeCustom">Custom Enemy</button>
<button type="button" class="monster-settings-tab" role="tab" aria-selected="false" data-monster-mode="su" data-i18n="monsterModeSu">Simulated Universe</button>
</div>
<div id="monster-settings-status" class="monster-settings-status" role="status" aria-live="polite" data-i18n="monsterSettingsLoading">กำลังอ่าน stage จาก resource ของ Client...</div>
<div id="monster-settings-view" class="monster-settings-view" role="tabpanel" aria-live="polite"></div>
<div id="monster-settings-aha-help" class="monster-settings-aha-help" role="tabpanel" aria-labelledby="monster-mode-aha" hidden>
<div class="aha-help-card" id="aha-help-card">
<div class="aha-help-heading">
<div class="aha-help-emblem" aria-hidden="true">✦</div>
<div class="aha-help-heading-copy">
<h3 data-i18n="ahaHelpTitle">Aha's Help</h3>
<p data-i18n="ahaHelpDescription">Choose the support level for the next battle that includes Voracity Corruption. This setting is separate from Aha Global.</p>
</div>
</div>
<div class="aha-help-options" id="aha-help-options" role="group" aria-label="Aha's Help level" aria-describedby="aha-help-status"></div>
<select id="aha-help-level" class="aha-help-native-select" aria-hidden="true" tabindex="-1" disabled>
<option value="" data-i18n="ahaHelpLoading">Loading levels…</option>
</select>
<div class="aha-help-actions">
<div class="aha-help-save-state" id="aha-help-status" role="status" aria-live="polite" data-state="loading">
<span class="aha-help-state-dot" aria-hidden="true"></span>
<span id="aha-help-status-text" data-i18n="ahaHelpLoading">Loading levels…</span>
</div>
<button type="button" class="btn btn-success aha-help-save-button" id="btn-save-aha-help" disabled>
<span aria-hidden="true">💾</span>
<span data-i18n="ahaHelpSave">Save Aha's Help</span>
</button>
</div>
</div>
</div>
</section>
<!-- 3.5. Damage Analyst (In-Game Battle Telemetry & Damage Analysis) -->
<section id="tab-damage-analyst" class="tab-content">
<!-- Toolbar & Control Card -->
<div class="card" style="margin-bottom: 1.25rem;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<div class="card-title" style="margin-bottom: 0.25rem;">
<span data-i18n="analystTitle">💥 วิเคราะห์ความเสียหายจากการต่อสู้ (Damage Analyst)</span>
<span class="badge-super-tag" id="badge-analyst-status" style="background: rgba(34, 197, 94, 0.15); color: #4ade80;">พร้อมรับข้อมูลจากเกม</span>
</div>
<p class="card-subtitle" style="margin-bottom: 0;" data-i18n="analystSubtitle">
ดักจับและวิเคราะห์ดาเมจจากการต่อสู้จริงในเกม Star Rail (ระบบเดียวกับ FireflyGO / Veritas)
</p>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<label style="display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; user-select: none; margin-right: 0.5rem;">
<input type="checkbox" id="chk-analyst-autosync" checked style="accent-color: var(--accent-cyan); cursor: pointer;">
<span data-i18n="analystAutoSync">ซิงค์อัตโนมัติ</span>
</label>
<button type="button" class="btn btn-primary" id="btn-analyst-fetch" style="background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);">
<span data-i18n="analystFetchBtn">🔄 ดึงดาเมจล่าสุดจากในเกม</span>
</button>
<input type="file" id="input-analyst-file" accept=".json" style="display: none;">
<button type="button" class="btn btn-secondary" id="btn-analyst-import" data-i18n="analystImportBtn">
📂 นำเข้า JSON
</button>
<button type="button" class="btn btn-secondary" id="btn-analyst-export" data-i18n="analystExportBtn">
💾 ส่งออก JSON
</button>
<button type="button" class="btn btn-secondary" id="btn-analyst-clear" style="color: #f87171;" data-i18n="analystClearBtn">
🗑️ ล้างข้อมูล
</button>
</div>
</div>
</div>
<!-- Overview 4 Metrics Cards -->
<div class="grid-4" style="margin-bottom: 1.25rem;">
<div class="card" style="padding: 1.2rem; border-left: 4px solid #ef4444; background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(20,20,28,0.7) 100%);">
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystTotalDamage">ดาเมจรวมทั้งทีม</div>
<div style="font-size: 1.85rem; font-weight: 900; color: #f87171; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-team-damage">0</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-damage-av">เฉลี่ยต่อรอบ: -</div>
</div>
<div class="card" style="padding: 1.2rem; border-left: 4px solid #f59e0b; background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(20,20,28,0.7) 100%);">
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystCycles">จำนวนรอบ (Cycles)</div>
<div style="font-size: 1.85rem; font-weight: 900; color: #fbbf24; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-cycles">0 รอบ</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-cycles-note" data-i18n="analystCyclesNote">MoC / PF / AS Standard</div>
</div>
<div class="card" style="padding: 1.2rem; border-left: 4px solid #38bdf8; background: linear-gradient(135deg, rgba(56,189,248,0.06) 0%, rgba(20,20,28,0.7) 100%);">
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystTurns">เทิร์นทั้งหมด</div>
<div style="font-size: 1.85rem; font-weight: 900; color: #38bdf8; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-total-turns">0 เทิร์น</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-auto-turns">เทิร์นอัตโนมัติ: 0</div>
</div>
<div class="card" style="padding: 1.2rem; border-left: 4px solid #34d399; background: linear-gradient(135deg, rgba(52,211,153,0.06) 0%, rgba(20,20,28,0.7) 100%);">
<div style="font-size: 0.775rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;" data-i18n="analystDuration">ระยะเวลาการต่อสู้</div>
<div style="font-size: 1.85rem; font-weight: 900; color: #34d399; letter-spacing: -0.5px; margin: 0.25rem 0;" id="analyst-duration">00:00</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" id="analyst-battle-meta">Stage: - | Battle: -</div>
</div>
</div>
<!-- Team Damage Share Bar -->
<div class="card" style="margin-bottom: 1.25rem;">
<div class="card-title" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
<span data-i18n="analystDpsShare">สัดส่วนดาเมจของทีม (Team DPS Share)</span>
<span style="font-size: 0.8rem; color: var(--text-muted);" id="analyst-total-share-label">รวม 100%</span>
</div>
<!-- Progress Bar Container -->
<div id="analyst-share-bar-container" style="height: 18px; width: 100%; border-radius: 9px; background: rgba(255,255,255,0.05); overflow: hidden; display: flex; margin-bottom: 0.85rem; border: 1px solid rgba(255,255,255,0.1);">
<!-- Dynamic segments filled by JS -->
</div>
<!-- Legend Container -->
<div id="analyst-share-legend" style="display: flex; gap: 1.5rem; flex-wrap: wrap;">
<!-- Dynamic legend filled by JS -->
</div>
</div>
<!-- Character Breakdown Grid -->
<div id="analyst-characters-container" class="grid-2" style="gap: 1.25rem; margin-bottom: 1.5rem;">
<!-- Populated dynamically by JS for each avatar in battle -->
</div>
<!-- Target Enemies Encountered -->
<div class="card" id="analyst-enemies-card" style="margin-bottom: 1.5rem;">
<div class="card-title" style="margin-bottom: 0.75rem;">
<span data-i18n="analystEnemyTitle">👾 รายชื่อศัตรูที่ถูกโจมตี (Targets / Enemies)</span>
</div>
<div id="analyst-enemies-container" style="display: flex; flex-direction: column; gap: 0.6rem;">
<!-- Populated by JS -->
</div>
</div>
</section>
<!-- 4. Persistent Save Settings (Exclusive to GaC-hkrpg-go) -->
<section id="tab-persistent" class="tab-content">
<div class="card" style="margin-bottom: 1.5rem;">
<div class="card-title">
<span data-i18n="persistentTitle">💾 จัดการไฟล์เซฟ GaC</span>
<span class="btn-sm btn-success" data-i18n="persistentBadge">เซิร์ฟเวอร์ของเราเอง</span>
</div>
<p class="card-subtitle" data-i18n="persistentSubtitle">
ไฟล์ persistent เก็บการตั้งค่าสถานะผู้เล่นเฉพาะของเซิร์ฟเวอร์ GaC เช่น เพศ/ธาตุตัวเอก, สเตตัส March 7th, สวิตช์ฟังก์ชัน Global ต่างๆ
</p>
</div>
<div class="grid-2">
<!-- Main Character & March Path -->
<div class="card" id="card-persistent-chars">
<div class="card-title" data-i18n="persistentTbM7Title">👤 ผู้บุกเบิก & March 7th</div>
<form id="form-persistent-chars">
<div class="form-group">
<label class="form-label" data-i18n="lblTbGenderElement">เพศ & ธาตุของตัวเอก</label>
<select id="persistent-mc-select" class="form-select">
<option value="MalePhysical">ผู้บุกเบิกชาย - กายภาพ</option>
<option value="FemalePhysical">ผู้บุกเบิกหญิง - กายภาพ</option>
<option value="MalePreservation">ผู้บุกเบิกชาย - ไฟ</option>
<option value="FemalePreservation">ผู้บุกเบิกหญิง - ไฟ</option>
<option value="MaleHarmony">ผู้บุกเบิกชาย - ประสาน</option>
<option value="FemaleHarmony">ผู้บุกเบิกหญิง - ประสาน</option>
<option value="MaleRemembrance">ผู้บุกเบิกชาย - ความทรงจำ</option>
<option value="FemaleRemembrance">ผู้บุกเบิกหญิง - ความทรงจำ</option>
</select>
</div>
<div class="form-group">
<label class="form-label" data-i18n="lblM7Path">สายของ March 7th</label>
<select id="persistent-march-select" class="form-select">
<option value="MarchHunt">March 7th - ล่าสังหาร</option>
<option value="MarchPreservation">March 7th - อนุรักษ์</option>
</select>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;" data-i18n="btnSaveCharSettings">
💾 บันทึกการตั้งค่าตัวละคร
</button>
</form>
</div>
<!-- Global Features & Toggles -->
<div class="card" id="card-persistent-global">
<div class="card-title" data-i18n="persistentGlobalTitle">⚙️ สวิตช์ระบบพิเศษของ GaC</div>
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;">
<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>
<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>
</div>
</div>
<div class="ex-switch-card">
<div>
<div style="font-weight: 700;" data-i18n="globalFeatureSilverWolf">Silver Wolf Global Feature</div>
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="swGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ SW ทั่วทั้งเซิร์ฟเวอร์</div>
</div>
<label class="switch">
<input type="checkbox" id="toggle-sw-global">
<span class="slider"></span>
</label>
</div>
<div class="ex-switch-card">
<div>
<div style="font-weight: 700;" data-i18n="globalFeatureCastorice">Castorice Global Feature</div>
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="castoriceGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ Castorice ทั่วทั้งเซิร์ฟเวอร์</div>
</div>
<label class="switch">
<input type="checkbox" id="toggle-castorice-global">
<span class="slider"></span>
</label>
</div>
<div class="ex-switch-card">
<div>
<div style="font-weight: 700;" data-i18n="globalFeatureAha">Aeon ★ Aha Global Feature</div>
<div style="font-size: 0.8rem; color: var(--text-muted);" data-i18n="ahaGlobalDesc">เปิดใช้งานฟังก์ชันพิเศษ Aeon ★ Aha ทั่วทั้งเซิร์ฟเวอร์</div>
</div>
<label class="switch">
<input type="checkbox" id="toggle-aha-global">
<span class="slider"></span>
</label>
</div>
<button class="btn btn-success" id="btn-save-persistent-toggles" data-i18n="btnSaveGlobalSwitch">
💾 บันทึกสวิตช์ Global
</button>
</div>
</div>
</div>
</section>
<!-- 5. Ex-Rank Tab -->
<section id="tab-exrank" class="tab-content">
<div class="card" style="margin-bottom: 1.5rem;">
<div class="card-title">
<span data-i18n="exrankTitle">⚡ ระบบปลดล็อค Ex-Rank Skill</span>
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-success btn-sm" id="btn-exrank-enable-all" data-i18n="btnEnableAll">เปิด Ex-Rank ทั้งหมด</button>
<button class="btn btn-secondary btn-sm" id="btn-exrank-disable-all" data-i18n="btnDisableAll">ปิด Ex-Rank ทั้งหมด</button>
</div>
</div>
<p class="card-subtitle" data-i18n="exrankSubtitle">
เปิดใช้งานพรสวรรค์และกลไกพิเศษ Ex-Rank สำหรับตัวละครเฉพาะใน FreeSR (เช่น Jing Yuan โดน CC ไม่หยุดชะงัก, Dan Heng IL, Acheron)
</p>
</div>
<div id="exrank-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
<!-- Rendered by JS -->
</div>
</section>
<!-- 6. JSON Management Tab -->
<section id="tab-json" class="tab-content">
<div class="card">
<div class="card-title" style="flex-wrap: wrap; gap: 0.75rem;">
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-sm btn-primary active" id="btn-select-freesr" data-i18n="btnFreesr">📄 freesr-data.json</button>
<button class="btn btn-sm btn-secondary" id="btn-select-persistent" data-i18n="btnPersistent">💾 ไฟล์เซฟ persistent</button>
<button class="btn btn-sm btn-secondary" id="btn-select-datagame" data-i18n="btnDataGame" style="display: none;">🎮 data-in-game.json</button>
</div>
<div style="display: flex; gap: 0.5rem;">
<button class="btn btn-sm btn-secondary" id="btn-json-beautify" data-i18n="btnBeautify">✨ จัดรูปแบบ JSON</button>
<button class="btn btn-sm btn-secondary" id="btn-json-download" data-i18n="btnDownload">📥 ดาวน์โหลด Backup</button>
<label class="btn btn-sm btn-secondary" style="cursor: pointer; margin: 0;">
<span data-i18n="btnUpload">📤 อัปโหลดไฟล์</span> <input type="file" id="json-file-input" accept=".json,text/plain" style="display: none;">
</label>
<button class="btn btn-sm btn-success" id="btn-json-save" data-i18n="btnSaveServer">💾 บันทึกไปยังเซิร์ฟเวอร์</button>
</div>
</div>
<div class="json-editor-wrapper">
<textarea id="json-editor" class="json-textarea" spellcheck="false" placeholder="..."></textarea>
<div style="display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted);">
<span id="json-status-info" data-i18n="jsonStatusReady">พร้อมใช้งาน</span>
<span data-i18n="jsonTip">คำแนะนำ: สามารถแก้ไขค่าดิบแล้วกด 'บันทึกไปยังเซิร์ฟเวอร์' ได้ทันที</span>
</div>
</div>
</div>
</section>
<!-- 8. Settings -->
<section id="tab-settings" class="tab-content">
<div style="max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem;">
<div class="grid-2">
<!-- Card 1: Server & Gateway Connection -->
<div class="card">
<div class="card-title" data-i18n="settingsConnTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Gateway</div>
<p class="card-subtitle" data-i18n="settingsConnSubtitle">กำหนด Endpoint และโหมดของเซิร์ฟเวอร์ที่ต้องการสั่งการ</p>
<form id="form-settings">
<div class="form-group">
<label class="form-label" data-i18n="lblServerMode">โหมดเซิร์ฟเวอร์</label>
<select id="setting-server-mode" class="form-select">
<option value="gac">GaC-hkrpg-go</option>
<option value="firefly" disabled data-i18n="serverModeFireflyPaused">FireflyGo (กำลังพัฒนา)</option>
<option value="robin" disabled data-i18n="serverModeRobinPaused">RobinSR (กำลังพัฒนา)</option>
</select>
</div>
<div class="form-group">
<label class="form-label" data-i18n="lblApiGatewayUrl">REST API Gateway URL</label>
<input type="text" id="setting-api-url" class="form-input" placeholder="http://localhost:21000">
<div style="display: flex; gap: 0.35rem; margin-top: 0.5rem; flex-wrap: wrap;">
<button type="button" class="btn btn-sm btn-secondary btn-quick-url" data-url="http://localhost:21000">localhost:21000</button>
<button type="button" class="btn btn-sm btn-secondary btn-quick-url" data-url="http://127.0.0.1:21000">127.0.0.1:21000</button>
<button type="button" class="btn btn-sm btn-secondary btn-quick-url" data-url="http://localhost:8080">localhost:8080</button>
</div>
</div>
<div style="display: flex; gap: 0.5rem; margin-top: 1.25rem;">
<button type="button" class="btn btn-secondary" id="btn-test-connection" style="display: flex; align-items: center; gap: 0.4rem;">
<span data-i18n="btnTestPing">⚡ ทดสอบการเชื่อมต่อ</span>
<span id="ping-latency-badge" class="badge-super-tag" style="display: none; padding: 0.1rem 0.45rem; font-size: 0.75rem;">-</span>
</button>
<button type="submit" class="btn btn-success" style="flex: 1;" data-i18n="btnSaveSettings">💾 บันทึกการตั้งค่า</button>
</div>
</form>
</div>
<!-- Card 2: Battle & Gameplay Preferences -->
<div class="card">
<div class="card-title" data-i18n="settingsBattleTitle">🎮 ค่าเริ่มต้นการต่อสู้ & FreeSR</div>
<p class="card-subtitle" data-i18n="settingsBattleSubtitle">ปรับแต่งพฤติกรรมเริ่มต้นของระบบในเกมและการจัดทีม</p>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<!-- Server Persistence Mode Information -->
<div style="background: rgba(15, 23, 42, 0.45); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.85rem 1rem;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span style="font-weight: 700; font-size: 0.875rem;" data-i18n="lblPersistenceInfo">ระบบบันทึกทีมและข้อมูล (Lineup Storage)</span>
<span id="badge-persistence-mode" class="badge-super-tag" style="padding: 0.15rem 0.55rem; font-size: 0.75rem;">Persistent API (GaC)</span>
</div>
<div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;" id="desc-persistence-mode" data-i18n="persistentDescription">
GaC Server เก็บทีมใน persistent.json (รองรับโหมดสร้างสรรค์) • สำหรับ FireflyGo เก็บใน freesr-data.json
</div>
</div>
<!-- Auto-Sync Toggle -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);">
<div>
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblAutoSync">ซิงค์ไปยังเซิร์ฟเวอร์อัตโนมัติ (Auto-Sync)</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descAutoSync">ส่งการเปลี่ยนแปลงไปยังเซิร์ฟเวอร์ทันทีเมื่อแก้ไขตัวละครหรือไอเทม</div>
</div>
<label class="switch">
<input type="checkbox" id="setting-auto-sync" checked>
<span class="slider"></span>
</label>
</div>
<!-- Creative Mode Default -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);">
<div>
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblDefaultCreative">เปิดโหมดสร้างสรรค์เมื่อเริ่มต้น (Creative Mode)</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descDefaultCreative">อนุญาตให้ใส่ตัวละครซ้ำหรือจัดทีมได้มากกว่า 4 ช่องตลอดเวลา</div>
</div>
<label class="switch">
<input type="checkbox" id="setting-default-creative">
<span class="slider"></span>
</label>
</div>
</div>
</div>
</div>
<div class="grid-2">
<!-- Card 3: Showcase Card Display Settings -->
<div class="card">
<div class="card-title" data-i18n="settingsShowcaseTitle">🖼️ การแสดงผลการ์ด Showcase</div>
<p class="card-subtitle" data-i18n="settingsShowcaseSubtitle">ปรับแต่งความสวยงามและรายละเอียดในหน้าการ์ดแสดงผล Build</p>
<div style="display: flex; flex-direction: column; gap: 0.85rem;">
<!-- Show Roll Counts on Relics -->
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblShowRolls">แสดงจำนวน Roll ของซับสเตตัสรีลิกส์</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descShowRolls">แสดงแท็กจำนวนครั้งที่สุ่มลงสเตตัสย่อย (Sub-stat Roll Counts)</div>
</div>
<label class="switch">
<input type="checkbox" id="setting-showcase-rolls" checked>
<span class="slider"></span>
</label>
</div>
<!-- Dynamic Element Aura Glow -->
<div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color);">
<div>
<div style="font-weight: 700; font-size: 0.9rem;" data-i18n="lblElementAura">เอฟเฟกต์แสงเรืองตามธาตุ (Element Aura Glow)</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="descElementAura">เปลี่ยนสีพื้นหลังและการเรืองแสงของการ์ดตามธาตุของตัวละครนั้นๆ</div>
</div>
<label class="switch">
<input type="checkbox" id="setting-showcase-aura" checked>
<span class="slider"></span>
</label>
</div>
</div>
</div>
<!-- Card 4: Diagnostics & Cache Reset -->
<div class="card">
<div class="card-title" data-i18n="settingsCacheTitle">🧹 จัดการข้อมูลแคช & รีเซ็ตระบบ</div>
<p class="card-subtitle" data-i18n="settingsCacheSubtitle">ล้างข้อมูลชั่วคราวในเบราว์เซอร์หรือคืนค่าเครื่องมือเป็นค่าเริ่มต้น</p>
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem;">
<span style="color: var(--text-muted);" data-i18n="lblCacheSize">สถานะหน่วยความจำ LocalStorage:</span>
<strong id="lbl-cache-usage" style="color: var(--accent-cyan); font-family: monospace;">—</strong>
</div>
<div style="display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap;">
<button type="button" class="btn btn-secondary" id="btn-clear-browser-cache" style="flex: 1; min-width: 140px;" data-i18n="btnClearCache">
🧹 ล้างแคชเบราว์เซอร์
</button>
<button type="button" class="btn btn-danger" id="btn-reset-settings" style="flex: 1; min-width: 140px;" data-i18n="btnFactoryReset">
🔄 คืนค่าเริ่มต้นทั้งหมด
</button>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Character Detail / Build Modal -->
<div class="modal-overlay" id="modal-avatar-detail">
<div class="modal-content" style="max-width: 860px;">
<!-- Modal Header -->
<div class="modal-header">
<h3 id="modal-char-title" style="font-weight: 800; font-size: 1.15rem; color: var(--text-highlight);" data-i18n="modalTitleCharEdit">
ปรับแต่งตัวละคร
</h3>
<button class="btn btn-sm btn-secondary" id="btn-close-avatar-modal">✕</button>
</div>
<!-- Character Top Banner & Quick Max All -->
<div style="display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap;">
<div class="avatar-image-container" style="width: 76px; height: 76px;">
<img id="modal-char-img" class="avatar-img" src="" alt="">
</div>
<div style="flex: 1; min-width: 180px;">
<div id="modal-char-name" style="font-size: 1.25rem; font-weight: 800;"></div>
<div id="modal-char-meta" style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;"></div>
</div>
<div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
<button type="button" class="btn btn-primary" id="btn-modal-e0s1" style="padding: 0.5rem 0.95rem; font-weight: 800;" data-i18n="btnE0S1" title="Lv.80, E0, Max Skills, S1">
⚡ E0S1
</button>
<button type="button" class="btn btn-gold" id="btn-modal-e6s5" style="padding: 0.5rem 0.95rem; font-weight: 800;" data-i18n="btnE6S5" title="Lv.80, E6, Max Skills, S5">
⭐ E6S5
</button>
</div>
</div>
<!-- Sub Tabs Navigation (srtools & neonteam style) -->
<div class="modal-subtabs" style="display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; overflow-x: auto;">
<button type="button" class="modal-subtab-btn active" data-modaltab="modaltab-overview" data-i18n="modalTabOverview">
📋 ข้อมูลภาพรวม
</button>
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-relics" data-i18n="modalTabRelics">
🛡️ รีลิกส์ & อุปกรณ์
</button>
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-skills" data-i18n="modalTabSkills">
⚡ สกิลและร่องรอย
</button>
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-status" data-i18n="modalTabStatus">
⚙️ เลเวล & Eidolon
</button>
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-showcase" data-i18n="modalTabShowcase">
🖼️ การ์ดสรุปบิลด์
</button>
<button type="button" class="modal-subtab-btn" data-modaltab="modaltab-build-guide" data-i18n="modalTabBuildGuide">
📖 แนวทาง Build
</button>
</div>
<!-- Sub Tab 0: Overview & Combat Stats (Neonteam style https://srtools.neonteam.dev/1001/detail) -->
<div id="modaltab-overview" class="modal-subtab-content active">
<div class="overview-layout">
<!-- Left: Big portrait art & character identity -->
<div class="overview-portrait-box">
<img id="overview-portrait-img" class="overview-portrait-img" src="" alt="Character Art" data-i18n-alt="characterArtwork">
<div class="overview-portrait-info">
<div id="overview-char-name" style="font-size: 1.35rem; font-weight: 800; color: #fff;">-</div>
<div id="overview-char-meta" style="display: flex; gap: 0.4rem; align-items: center; margin-top: 0.35rem; flex-wrap: wrap;"></div>
<div style="display: flex; gap: 0.4rem; margin-top: 0.75rem;">
<span id="overview-badge-lvl" class="badge-super-tag">Lv. 80 / 80</span>
<span id="overview-badge-eidolon" class="badge-super-tag" style="background: rgba(251, 191, 36, 0.2); border-color: #fbbf24; color: #fbbf24;">E6</span>
</div>
</div>
</div>
<!-- Right: Combat Stats, Equipped LC & Relic Summaries -->
<div style="display: flex; flex-direction: column; gap: 1rem;">
<!-- Combat Stats Panel -->
<div class="card" style="background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 1rem;">
<div style="font-weight: 800; font-size: 0.95rem; color: var(--text-highlight); margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
<span data-i18n="overviewStatsTitle">⚔️ ค่าพลังการต่อสู้ (Combat Stats)</span>
<span style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="overviewStatsNote">รวมโบนัสกรวยแสงและรีลิกส์</span>
</div>
<div class="overview-stats-grid" id="overview-stats-grid">
<!-- Dynamically populated stats -->
</div>
</div>
<!-- Quick Equipped Equipment Glance -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;">
<!-- LC Glance -->
<div class="card" id="overview-lc-card" style="background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 0.85rem; cursor: pointer; transition: all 0.2s;" title="คลิกเพื่อจัดการ Light Cone" data-i18n-title="overviewEquippedLc">
<div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
<span data-i18n="overviewEquippedLc">🗡️ กรวยแสงที่สวมใส่</span>
<span style="color: var(--accent-cyan); font-size: 0.7rem;" data-i18n="btnManage">จัดการ ➔</span>
</div>
<div style="display: flex; gap: 0.65rem; align-items: center;">
<img id="overview-lc-thumb" src="" alt="" style="width: 44px; height: 60px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border-color);">
<div style="min-width: 0; flex: 1;">
<div id="overview-lc-name" style="font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</div>
<div id="overview-lc-rank" style="font-size: 0.75rem; color: var(--accent-gold); margin-top: 0.2rem;">S5 • Lv.80</div>
</div>
</div>
</div>
<!-- Relics Glance -->
<div class="card" id="overview-relics-card" style="background: rgba(18, 24, 38, 0.7); border: 1px solid var(--border-color); padding: 0.85rem; cursor: pointer; transition: all 0.2s;" title="คลิกเพื่อจัดการรีลิกส์" data-i18n-title="overviewEquippedRelics">
<div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between;">
<span data-i18n="overviewEquippedRelics">🛡️ รีลิกส์และเซ็ต</span>
<span style="color: var(--accent-cyan); font-size: 0.7rem;" data-i18n="btnManage">จัดการ ➔</span>
</div>
<div id="overview-relics-summary" style="display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem;">
<!-- Set bonuses active -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sub Tab: Relics Inspection & Selection (6 Slots) -->
<div id="modaltab-relics" class="modal-subtab-content" style="display: none;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<div>
<div style="font-weight: 800; font-size: 1rem; color: var(--text-highlight);" data-i18n="modalRelicsTitle">
🛡️ สวมใส่รีลิกส์ (Relics 6 ชิ้น)
</div>
<div style="font-size: 0.75rem; color: var(--text-muted);" data-i18n="modalRelicsSubtitle">
เลือกเปลี่ยน ปรับสเตตัส หรือสวมใส่รีลิกส์แนะนำสำหรับตัวละครนี้
</div>
</div>
<div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-relics-auto" data-i18n="btnAutoEquipRelics">
⚡ ติดตั้งเซ็ตแนะนำครบชุด
</button>
<button type="button" class="btn btn-sm btn-danger" id="btn-modal-relics-clear" data-i18n="btnClearAllRelics">
🧹 ถอดทั้งหมด
</button>
</div>
</div>
<!-- Equipped Lightcone Slot in Equipment Tab -->
<div class="card" id="relics-equipped-lc-box" style="background: rgba(18, 24, 38, 0.75); border: 1px solid var(--border-color); padding: 0.85rem 1rem; margin-bottom: 1rem; cursor: pointer; transition: all 0.2s;" title="คลิกเพื่อเลือกเปลี่ยน Light Cone" data-i18n-title="overviewEquippedLc">
<div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center;">
<span style="color: var(--accent-cyan); font-weight: 800;" data-i18n="overviewEquippedLc">🗡️ กรวยแสงที่สวมใส่ (คลิกเพื่อเลือกเปลี่ยน)</span>
<span style="color: var(--accent-gold); font-size: 0.75rem; font-weight: 700;" data-i18n="btnChangeLc">เปลี่ยนกรวยแสง ➔</span>
</div>
<div style="display: flex; gap: 0.85rem; align-items: center;">
<img id="relics-tab-lc-thumb" src="" alt="" style="width: 46px; height: 64px; border-radius: 6px; object-fit: cover; border: 1px solid var(--accent-gold);">
<div style="min-width: 0; flex: 1;">
<div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
<span id="relics-tab-lc-name" style="font-weight: 800; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</span>
<span id="relics-tab-lc-stars" style="color: var(--accent-gold); font-size: 0.8rem; letter-spacing: 1px;">★★★★★</span>
</div>
<div style="display: flex; gap: 0.6rem; align-items: center; margin-top: 0.25rem; font-size: 0.775rem; color: var(--text-muted); flex-wrap: wrap;">
<span id="relics-tab-lc-rank" style="color: var(--accent-gold); font-weight: 800;">S5</span>
<span>•</span>
<span id="relics-tab-lc-level" style="font-weight: 700; color: #fff;">Lv. 80 / 80</span>
<span>•</span>
<span id="relics-tab-lc-stats" style="color: var(--accent-cyan); font-family: monospace;">HP 952 / ATK 582 / DEF 529</span>
</div>
</div>
<button type="button" class="btn btn-sm btn-primary" style="pointer-events: none;" data-i18n="btnChangeLc">เลือกเปลี่ยน</button>
</div>
</div>
<!-- 6 Relic Slots Grid -->
<div class="relics-slots-grid" id="modal-relics-slots-grid">
<!-- Dynamically generated 6 slot boxes -->
</div>
<!-- Active Set Bonuses -->
<div class="card" style="background: rgba(11, 15, 25, 0.75); border: 1px solid var(--border-color); padding: 0.85rem 1rem; margin-top: 1rem;">
<div style="font-weight: 700; font-size: 0.85rem; color: var(--accent-gold); margin-bottom: 0.5rem;" data-i18n="activeSetEffects">
✨ เอฟเฟกต์เซ็ตที่เปิดใช้งาน
</div>
<div id="modal-relics-active-sets" style="display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; color: #cbd5e1;">
<!-- Injected by JS -->
</div>
</div>
</div>
<!-- Sub Tab 1: Skills & Traces (Like https://srtools.punklorde.org/skills-info) -->
<div id="modaltab-skills" class="modal-subtab-content" style="display: none;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<div style="font-weight: 700; font-size: 0.95rem; color: var(--text-highlight);" data-i18n="modalSkillCombatTitle">
ระดับสกิลต่อสู้
</div>
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-max-skills" data-i18n="modalBtnMaxSkills">
⭐ ปรับสกิลเต็ม 10/10
</button>
</div>
<!-- 4 Core Skills -->
<div class="skills-grid" style="display: flex; flex-direction: column; gap: 0.85rem;">
<!-- 1. Basic Attack -->
<div class="skill-row-card">
<div class="skill-row-header">
<div style="display: flex; align-items: center; gap: 0.65rem;">
<img id="skill-icon-basic" class="skill-row-icon" src="" alt="Basic ATK" data-i18n-alt="modalSkillBasic">
<div>
<div style="display: flex; align-items: center; gap: 0.4rem;">
<span class="skill-type-tag" data-i18n="modalSkillBasic">โจมตีปกติ</span>
<span id="skill-real-name-basic" class="skill-name">-</span>
</div>
</div>
</div>
<span class="skill-lvl-badge">Lv. <strong id="val-skill-basic">6</strong> / 6</span>
</div>
<div class="skill-stepper">
<button type="button" class="btn-step" id="btn-step-dec-basic">-</button>
<input type="range" min="1" max="6" value="6" id="range-skill-basic" class="skill-range">
<button type="button" class="btn-step" id="btn-step-inc-basic">+</button>
<button type="button" class="btn-max-pill" id="btn-skill-max-basic">MAX</button>
</div>
<div id="skill-desc-basic" class="skill-desc-box"></div>
</div>
<!-- 2. Skill -->
<div class="skill-row-card">
<div class="skill-row-header">
<div style="display: flex; align-items: center; gap: 0.65rem;">
<img id="skill-icon-skill" class="skill-row-icon" src="" alt="Skill" data-i18n-alt="modalSkillSkill">
<div>
<div style="display: flex; align-items: center; gap: 0.4rem;">
<span class="skill-type-tag" data-i18n="modalSkillSkill">สกิลต่อสู้</span>
<span id="skill-real-name-skill" class="skill-name">-</span>
</div>
</div>
</div>
<span class="skill-lvl-badge">Lv. <strong id="val-skill-skill">10</strong> / 10</span>
</div>
<div class="skill-stepper">
<button type="button" class="btn-step" id="btn-step-dec-skill">-</button>
<input type="range" min="1" max="10" value="10" id="range-skill-skill" class="skill-range">
<button type="button" class="btn-step" id="btn-step-inc-skill">+</button>
<button type="button" class="btn-max-pill" id="btn-skill-max-skill">MAX</button>
</div>
<div id="skill-desc-skill" class="skill-desc-box"></div>
</div>
<!-- 3. Ultimate -->
<div class="skill-row-card">
<div class="skill-row-header">
<div style="display: flex; align-items: center; gap: 0.65rem;">
<img id="skill-icon-ultra" class="skill-row-icon" src="" alt="Ultimate" data-i18n-alt="modalSkillUltra">
<div>
<div style="display: flex; align-items: center; gap: 0.4rem;">
<span class="skill-type-tag" data-i18n="modalSkillUltra">ท่าไม้ตาย</span>
<span id="skill-real-name-ultra" class="skill-name">-</span>
</div>
</div>
</div>
<span class="skill-lvl-badge">Lv. <strong id="val-skill-ultra">10</strong> / 10</span>
</div>
<div class="skill-stepper">
<button type="button" class="btn-step" id="btn-step-dec-ultra">-</button>
<input type="range" min="1" max="10" value="10" id="range-skill-ultra" class="skill-range">
<button type="button" class="btn-step" id="btn-step-inc-ultra">+</button>
<button type="button" class="btn-max-pill" id="btn-skill-max-ultra">MAX</button>
</div>
<div id="skill-desc-ultra" class="skill-desc-box"></div>
</div>
<!-- 4. Talent -->
<div class="skill-row-card">
<div class="skill-row-header">
<div style="display: flex; align-items: center; gap: 0.65rem;">
<img id="skill-icon-talent" class="skill-row-icon" src="" alt="Talent" data-i18n-alt="modalSkillTalent">
<div>
<div style="display: flex; align-items: center; gap: 0.4rem;">
<span class="skill-type-tag" data-i18n="modalSkillTalent">พรสวรรค์</span>
<span id="skill-real-name-talent" class="skill-name">-</span>
</div>
</div>
</div>
<span class="skill-lvl-badge">Lv. <strong id="val-skill-talent">10</strong> / 10</span>
</div>
<div class="skill-stepper">
<button type="button" class="btn-step" id="btn-step-dec-talent">-</button>
<input type="range" min="1" max="10" value="10" id="range-skill-talent" class="skill-range">
<button type="button" class="btn-step" id="btn-step-inc-talent">+</button>
<button type="button" class="btn-max-pill" id="btn-skill-max-talent">MAX</button>
</div>
<div id="skill-desc-talent" class="skill-desc-box"></div>
</div>
</div>
<!-- Traces & Technique Section -->
<div style="margin-top: 1.25rem;">
<div style="font-weight: 700; font-size: 0.95rem; color: var(--text-highlight); margin-bottom: 0.75rem;" data-i18n="modalTracesTitle">
ร่องรอยและเทคนิค
</div>
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<!-- Technique -->
<div class="skill-row-card" style="padding: 0.75rem 1rem;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 0.65rem;">
<img id="skill-icon-technique" class="skill-row-icon" src="" alt="Technique" data-i18n-alt="modalTraceTechnique">
<div>
<span class="skill-type-tag" data-i18n="modalTraceTechnique">เทคนิค</span>
<span id="skill-real-name-technique" class="skill-name">-</span>
</div>
</div>
<label class="switch">
<input type="checkbox" id="check-trace-technique" checked>
<span class="slider"></span>
</label>
</div>
<div id="skill-desc-technique" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
</div>
<!-- Major Traces A2, A4, A6 -->
<div style="display: flex; flex-direction: column; gap: 0.6rem;">
<div class="trace-card-item">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<img id="trace-icon-a2" class="trace-icon-small" src="" alt="A2" data-i18n-alt="traceA2">
<span id="trace-name-a2" style="font-weight: 700; font-size: 0.875rem;" data-i18n="traceA2">🌟 ร่องรอยพิเศษ A2</span>
</div>
<label class="switch">
<input type="checkbox" id="check-trace-a2" checked>
<span class="slider"></span>
</label>
</div>
<div id="trace-desc-a2" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
</div>
<div class="trace-card-item">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<img id="trace-icon-a4" class="trace-icon-small" src="" alt="A4" data-i18n-alt="traceA4">
<span id="trace-name-a4" style="font-weight: 700; font-size: 0.875rem;" data-i18n="traceA4">🌟 ร่องรอยพิเศษ A4</span>
</div>
<label class="switch">
<input type="checkbox" id="check-trace-a4" checked>
<span class="slider"></span>
</label>
</div>
<div id="trace-desc-a4" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
</div>
<div class="trace-card-item">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<img id="trace-icon-a6" class="trace-icon-small" src="" alt="A6" data-i18n-alt="traceA6">
<span id="trace-name-a6" style="font-weight: 700; font-size: 0.875rem;" data-i18n="traceA6">🌟 ร่องรอยพิเศษ A6</span>
</div>
<label class="switch">
<input type="checkbox" id="check-trace-a6" checked>
<span class="slider"></span>
</label>
</div>
<div id="trace-desc-a6" class="skill-desc-box" style="margin-top: 0.35rem;"></div>
</div>
</div>
<!-- 10 Stat Nodes -->
<label class="trace-toggle-label" style="margin-top: 0.25rem;">
<input type="checkbox" id="check-trace-stats" checked class="trace-checkbox">
<span data-i18n="traceStatNodes">💎 โหนดสเตตัสเสริมทั้งหมด (10 โหนด)</span>
</label>
</div>
</div>
</div>
<!-- Sub Tab 2: Status & Eidolon -->
<div id="modaltab-status" class="modal-subtab-content" style="display: none;">
<div class="grid-2" style="gap: 1rem; margin-bottom: 1rem;">
<div class="form-group">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
<label class="form-label" style="margin: 0;" data-i18n="lblLevelRange">ระดับเลเวล (1-80)</label>
<div style="display: flex; gap: 0.25rem;">
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="1">1</button>
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="20">20</button>
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="60">60</button>
<button type="button" class="btn btn-sm btn-secondary btn-lvl-preset" data-lvl="70">70</button>
<button type="button" class="btn btn-sm btn-primary btn-lvl-preset" data-lvl="80">80</button>
</div>
</div>
<input type="number" id="modal-char-level" class="form-input" min="1" max="80" value="80">
</div>
<div class="form-group">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
<label class="form-label" style="margin: 0;" data-i18n="lblPromotionRange">การเลื่อนขั้น (0-6)</label>
<div style="display: flex; gap: 0.25rem;">
<button type="button" class="btn btn-sm btn-secondary btn-prom-preset" data-prom="0">0</button>
<button type="button" class="btn btn-sm btn-secondary btn-prom-preset" data-prom="3">3</button>
<button type="button" class="btn btn-sm btn-primary btn-prom-preset" data-prom="6">6</button>
</div>
</div>
<input type="number" id="modal-char-promotion" class="form-input" min="0" max="6" value="6">
</div>
</div>
<!-- Eidolon Section -->
<div class="form-group">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
<label class="form-label" style="margin: 0;" data-i18n="lblEidolonLevel">ระดับ Eidolon</label>
<div style="display: flex; gap: 0.4rem;">
<button type="button" class="btn btn-sm btn-secondary" id="btn-modal-quick-e0" data-i18n="btnResetE0">รีเซ็ต E0</button>
<button type="button" class="btn btn-sm btn-gold" id="btn-modal-quick-e6" data-i18n="btnMaxE6">⭐ ปลดเต็ม E6</button>
</div>
</div>
<div class="eidolon-buttons" id="modal-char-eidolon-btns" style="margin-top: 0.5rem; gap: 0.5rem;">
<!-- Injected pips -->
</div>
</div>
</div>
<!-- Sub Tab 3: Lightcone Equipment (Full artwork matching srtools) -->
<div id="modaltab-lightcone" class="modal-subtab-content" style="display: none;">
<div class="lc-preview-container">
<!-- Left: Full vertical artwork card -->
<div class="lc-art-wrapper" id="modal-lc-art-wrapper">
<img id="modal-lc-full-img" class="lc-full-img" src="" alt="Light Cone Artwork" data-i18n-alt="lightConeArtwork">
<div id="modal-lc-no-art" class="lc-placeholder-text" style="display: none;">
<span data-i18n="lightConeArtworkMissing">🗡️ ไม่มีรูปตัวอย่าง</span>
</div>
</div>
<!-- Right: Details, Superimposition, Stats & Selector -->
<div class="lc-details-col">
<div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap;">
<div>
<h3 id="modal-lc-name-display" style="font-size: 1.3rem; font-weight: 800; color: #fff; margin: 0 0 0.35rem 0;">-</h3>
<div id="modal-lc-meta-display" style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;"></div>
</div>
<div id="modal-lc-rank-badge" class="badge-super-tag">S5 • Lv.80</div>
</div>
<!-- Level Row with Slider -->
<div class="form-group" style="margin-top: 0.75rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
<label class="form-label" style="margin: 0;" data-i18n="lblLcLevel">เลเวล (1-80)</label>
<span id="modal-lc-lvl-val" style="font-weight: 800; font-family: monospace; color: var(--accent-cyan);">80 / 80</span>
</div>
<div style="display: flex; gap: 0.75rem; align-items: center;">
<input type="range" id="range-lc-level" min="1" max="80" value="80" class="skill-range" style="flex: 1;">
<input type="number" id="modal-lc-level" class="form-input" min="1" max="80" value="80" style="width: 70px; text-align: center;">
</div>
</div>
<!-- Superimposition Row S1 - S5 -->
<div class="form-group">
<label class="form-label" style="margin-bottom: 0.4rem;" data-i18n="lblLcRank">ระดับการขัดเกลา</label>
<div class="eidolon-buttons" id="modal-lc-rank-btns" style="gap: 0.5rem;">
<button type="button" class="eidolon-pip lc-super-pip" data-rank="1">S1</button>
<button type="button" class="eidolon-pip lc-super-pip" data-rank="2">S2</button>
<button type="button" class="eidolon-pip lc-super-pip" data-rank="3">S3</button>
<button type="button" class="eidolon-pip lc-super-pip" data-rank="4">S4</button>
<button type="button" class="eidolon-pip lc-super-pip active" data-rank="5">S5</button>
</div>
</div>
<!-- Passive Ability Description Card -->
<div class="lc-passive-card">
<div class="lc-passive-title" data-i18n="lcPassiveTitle">เอฟเฟกต์สกิลพิเศษ</div>
<div id="modal-lc-passive-desc" class="lc-passive-body">...</div>
</div>
<!-- Change Lightcone Section -->
<div style="margin-top: 1rem; display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap;">
<div style="flex: 1; min-width: 220px;">
<label class="form-label" data-i18n="lblSelectLc">เลือกเปลี่ยน Light Cone</label>
<select id="select-modal-change-lc" class="form-select"></select>
</div>
<button type="button" class="btn btn-primary" id="btn-modal-apply-change-lc" style="padding: 0.65rem 1.25rem; font-weight: 700;" data-i18n="btnChangeLc">
เปลี่ยน Light Cone
</button>
</div>
<input type="hidden" id="modal-lc-id" value="">
</div>
</div>
</div>
<!-- Sub Tab 4: Showcase Card (Matching srtools.punklorde.org/showcase-card) -->
<div id="modaltab-showcase" class="modal-subtab-content" style="display: none;">
<!-- Action Toolbar -->
<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>
</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">
⚡ ติดตั้งรีลิกส์แนะนำ
</button>
<button type="button" class="btn btn-sm btn-secondary" id="btn-showcase-copy-text" data-i18n="showcaseCopy">
📋 คัดลอกข้อความ
</button>
<button type="button" class="btn btn-sm btn-primary" id="btn-showcase-export-img" data-i18n="showcaseExport">
🖼️ ส่งออกรูปภาพ
</button>
</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%;">
<div id="showcase-card-container" class="showcase-card-layout">
<!-- Rendered dynamically by JS -->
</div>
</div>
</div>
<!-- Sub Tab 5: Per-character build data and Prydwen guide -->
<div id="modaltab-build-guide" class="modal-subtab-content" style="display: none;">
<div id="build-guide-content" class="build-guide-content"></div>
</div>
<!-- Modal Footer -->
<div style="display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; flex-wrap: wrap;">
<button type="button" class="btn btn-secondary" id="btn-modal-cancel-avatar" data-i18n="modalBtnClose">
✕ ปิด
</button>
<button type="button" class="btn btn-success" id="btn-modal-save-avatar" data-i18n="modalBtnSave">
💾 บันทึกตัวละคร
</button>
</div>
</div>
</div>
<!-- Party Member Picker Modal -->
<div class="modal-overlay" id="modal-lineup-picker">
<div class="modal-content" style="max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;">
<div class="modal-header">
<h3 id="modal-picker-title" style="font-weight: 800;" data-i18n="pickerTitle">เลือกตัวละครเข้าทีม</h3>
<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="picker-grid-container" style="overflow-y: auto; flex: 1; min-height: 0; padding-right: 0.5rem;">
<!-- Injected by JS -->
</div>
</div>
</div>
<!-- Settings Modal -->
<div class="modal-overlay" id="modal-settings">
<div class="modal-content">
<div class="modal-header">
<h3 style="font-weight: 700;" data-i18n="apiModalTitle">⚙️ ตั้งค่าการเชื่อมต่อ API Server</h3>
<button class="btn btn-sm btn-secondary" id="btn-close-modal">✕</button>
</div>
<div>
<div class="form-group">
<label class="form-label" data-i18n="lblApiGatewayUrl">Server REST API URL</label>
<input type="text" id="modal-api-url" class="form-input">
</div>
<div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;">
<button class="btn btn-secondary" id="btn-modal-cancel" data-i18n="btnCancel">ยกเลิก</button>
<button class="btn btn-primary" id="btn-modal-save" data-i18n="btnSaveTest">บันทึก & ทดสอบ</button>
</div>
</div>
</div>
</div>
<!-- Add Light Cone Modal -->
<div class="modal-overlay" id="modal-add-lc">
<div class="modal-content" style="max-width: 760px; max-height: 88vh; display: flex; flex-direction: column;">
<div class="modal-header" style="padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); margin-bottom: 0.75rem;">
<h3 style="font-weight: 800; margin: 0; display: flex; align-items: center; gap: 0.5rem;" data-i18n="modalAddLcTitle">
🗡️ เพิ่มกรวยแสงลง FreeSR
</h3>
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-add-lc-modal">✕</button>
</div>
<form id="form-add-lc" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
<!-- 1. Selected Lightcone Preview Strip -->
<div id="add-lc-preview-banner" style="display: flex; gap: 0.85rem; align-items: center; background: rgba(251, 191, 36, 0.08); border: 1.5px solid var(--accent-gold); border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; margin-bottom: 0.75rem;">
<img id="add-lc-preview-thumb" src="" alt="" style="width: 44px; height: 60px; border-radius: 4px; object-fit: cover; border: 1px solid var(--accent-gold); background: #0b0d14; flex-shrink: 0;">
<div style="flex: 1; min-width: 0;">
<div style="font-size: 0.7rem; color: var(--accent-gold); font-weight: 800; text-transform: uppercase;">
<span data-i18n="selectedLightConeLabel">✓ กรวยแสงที่เลือก (Selected)</span>
</div>
<div id="add-lc-preview-name" style="font-weight: 800; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</div>
<div id="add-lc-preview-meta" style="display: flex; gap: 0.65rem; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; align-items: center; flex-wrap: wrap;">
<!-- Populated by JS -->
</div>
</div>
<input type="hidden" id="add-lc-selected-id" value="23001">
<input type="hidden" id="add-lc-select" value="23001">
</div>
<!-- 2. Search & Filter Bar -->
<div style="display: flex; gap: 0.5rem; margin-bottom: 0.6rem; flex-wrap: wrap;">
<input type="text" id="add-lc-search" class="form-input" data-i18n-placeholder="lightConeSearchPlaceholder" placeholder="🔍 ค้นหากรวยแสง (ชื่อหรือ ID)..." style="flex: 1; min-width: 160px;">
<select id="add-lc-filter-path" class="form-select" style="max-width: 140px;">
<option value="all">ทุกสาย (All)</option>
<option value="Destruction">ทำลายล้าง</option>
<option value="Hunt">ล่าสังหาร</option>
<option value="Erudition">ปัญญา</option>
<option value="Harmony">ประสาน</option>
<option value="Nihility">ลบล้าง</option>
<option value="Preservation">อนุรักษ์</option>
<option value="Abundance">เฟื่องฟู</option>
<option value="Remembrance">ความทรงจำ</option>
<option value="Elation">ปีติ</option>
</select>
<select id="add-lc-filter-rarity" class="form-select" style="max-width: 110px;">
<option value="all" data-i18n="filterAllRarity">ทุกระดับดาว</option>
<option value="5" selected data-i18n="filter5Star">★5 ดาว</option>
<option value="4" data-i18n="filter4Star">★4 ดาว</option>
<option value="3" data-i18n="filter3Star">★3 ดาว</option>
</select>
</div>
<!-- 3. Visual Grid Container -->
<div id="add-lc-visual-grid" class="add-lc-grid-container" style="flex: 1; min-height: 180px; max-height: 280px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.5rem; padding: 0.35rem; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 0.75rem;">
<!-- Dynamically populated by JS -->
</div>
<!-- 4. Level, Promotion, Superimpose, and Equip Avatar -->
<div class="grid-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; margin-bottom: 0.75rem; align-items: end;">
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" data-i18n="modalColLevel" style="font-size: 0.75rem;">เลเวล (1-80)</label>
<input type="number" id="add-lc-level" class="form-input" min="1" max="80" value="80" required>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" data-i18n="lblPromotion" style="font-size: 0.75rem;">เลื่อนขั้น (0-6)</label>
<input type="number" id="add-lc-promotion" class="form-input" min="0" max="6" value="6" required>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" data-i18n="superimpositionLabel" style="font-size: 0.75rem;">Superimpose (ขัดเกลา)</label>
<select id="add-lc-rank" class="form-select" required>
<option value="5" selected data-superimposition-rank>S5 (ขัดเกลา 5)</option>
<option value="4" data-superimposition-rank>S4 (ขัดเกลา 4)</option>
<option value="3" data-superimposition-rank>S3 (ขัดเกลา 3)</option>
<option value="2" data-superimposition-rank>S2 (ขัดเกลา 2)</option>
<option value="1" data-superimposition-rank>S1 (ขัดเกลา 1)</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" data-i18n="lblEquipAvatar" style="font-size: 0.75rem;">สวมใส่ให้ตัวละคร (ถ้าต้องการ)</label>
<select id="add-lc-avatar" class="form-select">
<option value="0" data-i18n="unassigned">-- ยังไม่สวมใส่ (เก็บในคลัง) --</option>
<!-- Injected by JS -->
</select>
</div>
</div>
<!-- 5. Footer Buttons -->
<div style="display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.08);">
<button type="button" class="btn btn-secondary" id="btn-cancel-add-lc" data-i18n="btnCancel">ยกเลิก</button>
<button type="submit" class="btn btn-success" data-i18n="btnAddLcSubmit">💾 เพิ่มลง FreeSR</button>
</div>
</form>
</div>
</div>
<!-- Add Relic Modal -->
<div class="modal-overlay" id="modal-add-relic">
<div class="modal-content" style="max-width: 580px;">
<div class="modal-header">
<h3 style="font-weight: 800;" data-i18n="modalAddRelicTitle">🛡️ เพิ่มรีลิกส์ลง FreeSR</h3>
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-add-relic-modal">✕</button>
</div>
<form id="form-add-relic">
<div class="form-group">
<label class="form-label" data-i18n="lblSelectRelicSet">เลือกเซ็ตรีลิกส์</label>
<select id="add-relic-set" class="form-select" required>
<!-- Injected by JS -->
</select>
</div>
<div class="grid-2" style="gap: 0.75rem; margin-bottom: 1rem;">
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" data-i18n="lblRelicSlot">ชิ้นส่วน (Slot)</label>
<select id="add-relic-slot" class="form-select" required>
<option value="1" data-relic-slot="head">1: ส่วนหัว (Head / HP)</option>
<option value="2" data-relic-slot="hands">2: ส่วนมือ (Hands / ATK)</option>
<option value="3" data-relic-slot="body">3: ลำตัว (Body)</option>
<option value="4" data-relic-slot="feet">4: รองเท้า (Feet)</option>
<option value="5" data-relic-slot="sphere">5: ลูกแก้ว (Planar Sphere)</option>
<option value="6" data-relic-slot="rope">6: สร้อยเชื่อมต่อ (Link Rope)</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" data-i18n="modalColLevel">เลเวล (0-15)</label>
<input type="number" id="add-relic-level" class="form-input" min="0" max="15" value="15" required>
</div>
</div>
<div class="form-group">
<label class="form-label" data-i18n="lblMainAffix">สเตตัสหลัก (Main Affix)</label>
<select id="add-relic-main-affix" class="form-select" required>
<!-- Dynamic according to selected slot -->
</select>
</div>
<div class="form-group">
<label class="form-label" data-i18n="lblEquipAvatar">สวมใส่ให้ตัวละคร (ถ้าต้องการ)</label>
<select id="add-relic-avatar" class="form-select">
<option value="0" data-i18n="unassigned">-- ยังไม่สวมใส่ (เก็บในคลัง) --</option>
<!-- Injected by JS -->
</select>
</div>
<div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem;">
<button type="button" class="btn btn-secondary" id="btn-cancel-add-relic" data-i18n="btnCancel">ยกเลิก</button>
<button type="submit" class="btn btn-success" data-i18n="btnAddRelicSubmit">💾 เพิ่มลง FreeSR</button>
</div>
</form>
</div>
</div>
<!-- Modal: Select Relic for Specific Slot (Large, Spacious & Easy to Use) -->
<div class="modal-overlay" id="modal-select-relic-slot">
<div class="modal-content relic-picker-modal-content">
<div class="modal-header" style="margin-bottom: 0.75rem;">
<div style="display: flex; align-items: center; gap: 0.65rem;">
<img id="modal-slot-picker-icon" src="" alt="Slot" data-i18n-alt="slot" style="width: 28px; height: 28px; object-fit: contain;">
<div>
<h3 id="modal-slot-picker-title" style="font-weight: 800; font-size: 1.15rem; margin: 0;" data-i18n="slotPickerTitle">
🛡️ เลือกสวมใส่รีลิกส์
</h3>
<div id="modal-slot-picker-subtitle" style="font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;" data-i18n="slotPickerSubtitle">
เลือกสวมใส่ชิ้นที่มีอยู่ หรือสร้างชิ้นใหม่ตรงตามบิลด์ที่แนะนำ
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-slot-picker">✕</button>
</div>
<!-- Current Equipped Relic Banner with Unequip Button -->
<div id="slot-picker-current-box" class="slot-picker-current-banner">
<!-- Injected currently equipped relic or empty status -->
</div>
<!-- Tabs Navigation -->
<div class="slot-picker-tabs">
<button type="button" class="slot-picker-tab-btn active" id="tab-btn-relic-quick" data-pickertab="slot-picker-quick-tab">
<span data-i18n="tabQuickGen">⚡ สวมใส่ / สร้างชิ้นแนะนำ</span>
</button>
<button type="button" class="slot-picker-tab-btn" id="tab-btn-relic-inventory" data-pickertab="slot-picker-inventory-tab">
<span data-i18n="tabFromInventory">📦 เลือกจากคลัง</span> (<span id="slot-picker-inv-count">0</span>)
</button>
</div>
<!-- Tab 1: Quick & Recommended Builder -->
<div id="slot-picker-quick-tab" class="slot-picker-tab-pane">
<!-- Recommended Fast Equip Card -->
<div class="slot-picker-rec-highlight" id="slot-picker-rec-highlight">
<!-- Injected recommended set card and instant equip button -->
</div>
<!-- Custom Relic Creator -->
<div>
<div style="font-weight: 700; font-size: 0.85rem; color: var(--text-highlight); margin-bottom: 0.5rem;" data-i18n="chooseSet">
เลือกเซ็ตที่ต้องการ:
</div>
<div class="slot-picker-set-grid" id="slot-picker-set-grid">
<!-- Injected set cards for this slot -->
</div>
<div style="font-weight: 700; font-size: 0.85rem; color: var(--text-highlight); margin-top: 0.85rem; margin-bottom: 0.5rem;" data-i18n="chooseMainStat">
เลือกสเตตัสหลัก (Main Stat):
</div>
<div class="slot-picker-mainstat-pills" id="slot-picker-mainstat-pills">
<!-- Injected main stat pill buttons -->
</div>
<!-- Substats Customizer -->
<div class="slot-picker-substats-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;">
<div style="font-weight: 700; font-size: 0.85rem; color: var(--text-highlight);" data-i18n="substatCustomizerTitle">
🔧 ปรับแต่งออฟรอง (Substats Customizer):
</div>
<div class="substat-presets-strip">
<button type="button" class="btn-substat-preset" data-preset="god" data-i18n="substatPresetRecommended" data-i18n-title="substatPresetRecommended" title="ออฟแนะนำตามตัวละคร">⭐ ออฟเทพแนะนำ</button>
<button type="button" class="btn-substat-preset" data-preset="crit" data-i18n="substatPresetCrit" data-i18n-title="substatPresetCrit" title="เน้นคริล้วน">🎯 คริ Rate/DMG</button>
<button type="button" class="btn-substat-preset" data-preset="spd" data-i18n="substatPresetSpeed" data-i18n-title="substatPresetSpeed" title="เน้นความเร็ว">⚡ สปีด SPD</button>
<button type="button" class="btn-substat-preset" data-preset="break" data-i18n="substatPresetBreak" data-i18n-title="substatPresetBreak" title="เน้นทำลายล้าง">🔨 Break Effect</button>
<button type="button" class="btn-substat-preset" data-preset="tank" data-i18n="substatPresetTank" data-i18n-title="substatPresetTank" title="เน้นถึก ป้องกัน เลือด">🛡️ ถึก HP/DEF</button>
</div>
</div>
<div class="slot-picker-substats-grid" id="slot-picker-substats-grid">
<!-- Injected by JS: 4 substat rows with selects, steppers & previews -->
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.65rem; padding: 0.4rem 0.75rem; background: rgba(10, 14, 23, 0.75); border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-size: 0.775rem;">
<span style="color: var(--text-muted);">
<span data-i18n="substatRollCountLabel">💡 รวมจำนวนโรล (Rolls):</span> <strong id="slot-picker-total-rolls" style="color: var(--accent-gold); font-family: monospace; font-size: 0.9rem;">9</strong> <span id="slot-picker-roll-limit" data-i18n="substatRollLimit">/ 9 โรล (ระดับ 5★ เลเวล 15)</span>
</span>
<button type="button" class="btn btn-sm btn-secondary" id="btn-reset-substats" data-i18n="substatResetButton" style="font-size: 0.725rem; padding: 0.2rem 0.6rem;">↺ คืนค่าเดิม</button>
</div>
</div>
<div style="margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;">
<div id="slot-picker-edit-mode-indicator" style="font-size: 0.8rem; color: var(--accent-cyan); font-weight: 700;"></div>
<button type="button" class="btn btn-primary" id="btn-slot-picker-confirm-custom" style="padding: 0.65rem 1.4rem; font-weight: 800; font-size: 0.9rem;" data-i18n="btnEquipInstant">
⚡ สวมใส่ชิ้นนี้ทันที (+15 5★ ออฟที่เลือก)
</button>
</div>
</div>
</div>
<!-- Tab 2: Inventory Grid -->
<div id="slot-picker-inventory-tab" class="slot-picker-tab-pane" style="display: none;">
<div id="slot-picker-inventory-list" class="slot-picker-inv-grid">
<!-- Injected cards of matching slot relics -->
</div>
</div>
</div>
</div>
<!-- Modal: Select Lightcone for Avatar -->
<div class="modal-overlay" id="modal-select-lightcone">
<div class="modal-content" style="max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;">
<div class="modal-header">
<h3 id="modal-lc-picker-title" style="font-weight: 800;" data-i18n="lcPickerTitle">
🗡️ เลือกสวมใส่กรวยแสง (Light Cone)
</h3>
<button type="button" class="btn btn-sm btn-secondary" id="btn-close-lc-picker">✕</button>
</div>
<!-- Search & Filters -->
<div style="display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;">
<input type="text" id="lc-picker-search" class="form-input" data-i18n-placeholder="lightConeSearchPlaceholder" placeholder="🔍 ค้นหาชื่อหรือ ID กรวยแสง..." style="flex: 1; min-width: 160px;">
<select id="lc-picker-filter-path" class="form-select" style="max-width: 140px;">
<option value="all">ทุกสาย</option>
<option value="same" selected>ตรงสายตัวละคร</option>
<option value="Destruction">ทำลายล้าง</option>
<option value="Hunt">ล่าสังหาร</option>
<option value="Erudition">ปัญญา</option>
<option value="Harmony">ประสาน</option>
<option value="Nihility">ลบล้าง</option>
<option value="Preservation">อนุรักษ์</option>
<option value="Abundance">เฟื่องฟู</option>
<option value="Remembrance">ความทรงจำ</option>
<option value="Elation">ปีติ</option>
</select>
<select id="lc-picker-rank" class="form-select" style="max-width: 110px;" data-i18n-title="superimpositionSelectTitle" title="ระดับการขัดเกลาเมื่อสวมใส่">
<option value="5" selected data-superimposition-rank>ขัดเกลา S5</option>
<option value="4" data-superimposition-rank>ขัดเกลา S4</option>
<option value="3" data-superimposition-rank>ขัดเกลา S3</option>
<option value="2" data-superimposition-rank>ขัดเกลา S2</option>
<option value="1" data-superimposition-rank>ขัดเกลา S1</option>
</select>
</div>
<!-- Signature Recommendation Box -->
<div id="lc-picker-signature-box" style="display: none; background: rgba(251, 191, 36, 0.1); border: 1px dashed rgba(251, 191, 36, 0.5); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; margin-bottom: 0.75rem; align-items: center; justify-content: space-between; gap: 0.75rem;">
<div style="display: flex; gap: 0.6rem; align-items: center; min-width: 0;">
<img id="lc-picker-sig-thumb" src="" alt="" style="width: 38px; height: 52px; border-radius: 4px; object-fit: cover; border: 1px solid var(--accent-gold);">
<div style="min-width: 0;">
<div style="font-size: 0.7rem; color: var(--accent-gold); font-weight: 800;" data-i18n="lcPickerSigTitle">⭐ กรวยแสงประจำตัวแนะนำ (Signature)</div>
<div id="lc-picker-sig-name" style="font-weight: 700; font-size: 0.875rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">-</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-gold" id="btn-lc-picker-quick-sig" data-i18n="lcPickerEquipSig">⚡ สวมใส่ชิ้นนี้</button>
</div>
<!-- Lightcones List Grid -->
<div id="lc-picker-list" style="flex: 1; min-height: 0; max-height: 380px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.5rem; padding-right: 0.35rem;">
<!-- Injected by JS -->
</div>
<!-- Footer Actions -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; border-top: 1px solid var(--border-color); padding-top: 0.75rem;">
<button type="button" class="btn btn-sm btn-secondary" id="btn-lc-picker-unequip" style="color: var(--accent-red);" data-i18n="lcPickerUnequip">✕ ถอดกรวยแสงออก</button>
<button type="button" class="btn btn-sm btn-secondary" id="btn-lc-picker-close" data-i18n="modalBtnClose">ปิด</button>
</div>
</div>
</div>
<dialog id="item-catalog-detail" class="item-catalog-dialog" aria-labelledby="item-catalog-detail-name">
<div class="item-catalog-detail-shell">
<header class="item-catalog-detail-header">
<span data-i18n="itemCatalogDetailTitle">Item Details</span>
<button type="button" class="item-catalog-dialog-close" id="item-catalog-detail-close" data-i18n-aria-label="itemCatalogClose" aria-label="Close">×</button>
</header>
<div class="item-catalog-detail-body">
<div class="item-catalog-detail-art" id="item-catalog-detail-art"></div>
<div class="item-catalog-detail-copy">
<h2 id="item-catalog-detail-name"></h2>
<div class="item-catalog-detail-id" id="item-catalog-detail-id"></div>
<div class="item-catalog-detail-source"><span data-i18n="itemCatalogSourceTable">Source tables</span>: <span id="item-catalog-detail-source"></span></div>
<div class="item-catalog-detail-meta" id="item-catalog-detail-meta"></div>
<section class="item-catalog-detail-section">
<h3 data-i18n="itemCatalogItemDescription">Description</h3>
<div class="item-catalog-detail-description" id="item-catalog-detail-description"></div>
</section>
<section class="item-catalog-detail-section item-catalog-detail-lore" id="item-catalog-detail-lore-section" hidden>
<h3 data-i18n="itemCatalogLore">Background</h3>
<div id="item-catalog-detail-lore"></div>
</section>
</div>
</div>
<div class="item-catalog-detail-quantity">
<label for="item-catalog-detail-amount" data-i18n="itemCatalogQuantity">Quantity</label>
<div class="item-catalog-amount-stepper">
<button type="button" id="item-catalog-amount-minus" data-i18n-aria-label="itemCatalogDecrease" aria-label="Decrease quantity">−</button>
<input type="number" id="item-catalog-detail-amount" inputmode="numeric" min="1" max="1" value="1">
<button type="button" id="item-catalog-amount-plus" data-i18n-aria-label="itemCatalogIncrease" aria-label="Increase quantity">+</button>
</div>
<span id="item-catalog-amount-limit" class="item-catalog-amount-limit"></span>
</div>
<footer class="item-catalog-detail-footer">
<button type="button" class="btn btn-secondary" id="item-catalog-detail-done" data-i18n="itemCatalogClose">Close</button>
</footer>
</div>
</dialog>
<!-- Toast Notification Container -->
<div class="toast-container" id="toast-container"></div>
<!-- Script Modules -->
<script type="module" src="js/app.js?v=3.3"></script>
</body>
</html>