Mudanças entre as edições de "Widget:Character.Skills"

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 1: Linha 1:
<!-- ===========================
<!-- MAIN SKILLS SYSTEM -->
    MAIN SKILLS SYSTEM
    =========================== -->
<script>
<script>
     (function () {
     (function () {
        // ===========================
        // Utility Functions
        // ===========================
         const $ = (s, root = document) => root.querySelector(s);
         const $ = (s, root = document) => root.querySelector(s);
         const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
         const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
         const ensureRemoved = sel => { Array.from(document.querySelectorAll(sel)).forEach(n => n.remove()); };
         const ensureRemoved = sel => {
         const onceFlag = (el, key) => { if (!el) return false; if (el.dataset[key]) return false; el.dataset[key] = '1'; return true; };
            Array.from(document.querySelectorAll(sel)).forEach(n => n.remove());
        };
         const onceFlag = (el, key) => {
            if (!el) return false;
            if (el.dataset[key]) return false;
            el.dataset[key] = '1';
            return true;
        };
         const addOnce = (el, ev, fn) => {
         const addOnce = (el, ev, fn) => {
             if (!el) return;
             if (!el) return;
Linha 18: Linha 20:
             el.setAttribute(attr, '1');
             el.setAttribute(attr, '1');
         };
         };
        // Extra helpers
         const FLAG_ICON_FILES = {
         const FLAG_ICON_FILES = {
             aggro: 'Enemyaggro-icon.png',
             aggro: 'Enemyaggro-icon.png', bridge: 'Bridgemaker-icon.png', wall: 'Destroywall-icon.png', quickcast: 'Quickcast-icon.png'
            bridge: 'Bridgemaker-icon.png',
            wall: 'Destroywall-icon.png',
            quickcast: 'Quickcast-icon.png'
         };
         };
         const subBarTemplateCache = window.__skillSubBarTemplateCache || (window.__skillSubBarTemplateCache = new Map());
         const subBarTemplateCache = window.__skillSubBarTemplateCache || (window.__skillSubBarTemplateCache = new Map());
Linha 31: Linha 28:
         const flagRowCache = window.__skillFlagRowCache || (window.__skillFlagRowCache = new Map());
         const flagRowCache = window.__skillFlagRowCache || (window.__skillFlagRowCache = new Map());
         const flagIconURLCache = window.__skillFlagIconURLCache || (window.__skillFlagIconURLCache = new Map());
         const flagIconURLCache = window.__skillFlagIconURLCache || (window.__skillFlagIconURLCache = new Map());
         function filePathURL(fileName) {
         function filePathURL(fileName) {
             const f = encodeURIComponent((fileName || 'Nada.png').replace(/^Arquivo:|^File:/, ''));
             const f = encodeURIComponent((fileName || 'Nada.png').replace(/^Arquivo:|^File:/, ''));
             const base = (window.mw && mw.util && typeof mw.util.wikiScript === 'function')
             const base = (window.mw && mw.util && typeof mw.util.wikiScript === 'function') ? mw.util.wikiScript() : (window.mw && window.mw.config ? (mw.config.get('wgScript') || '/index.php') : '/index.php');
                ? mw.util.wikiScript()
                : (window.mw && window.mw.config ? (mw.config.get('wgScript') || '/index.php') : '/index.php');
             return `${base}?title=Especial:FilePath/${f}`;
             return `${base}?title=Especial:FilePath/${f}`;
         }
         } function slugify(s) {
        // Slugify: converte nome para slug (minúsculas, sem acentos, espaços/:/'/' viram -, remove múltiplos -)
        function slugify(s) {
             if (!s) return '';
             if (!s) return '';
             return String(s)
             return String(s).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^\w\s-]/g, '').replace(/[\s:/\-]+/g, '-').replace(/^-+|-+$/g, '').replace(/-+/g, '-');
                .toLowerCase()
         } window.__skillSlugify = slugify;
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '') // Remove acentos
                .replace(/[^\w\s-]/g, '') // Remove caracteres especiais exceto hífen
                .replace(/[\s:/\-]+/g, '-') // Espaços, dois-pontos, barras viram hífen
                .replace(/^-+|-+$/g, '') // Remove hífens do início/fim
                .replace(/-+/g, '-'); // Remove múltiplos hífens consecutivos
         }
 
        // Expor slugify globalmente para Subskills usar
        window.__skillSlugify = slugify;
         function getLangKey() {
         function getLangKey() {
             const skillsRoot = document.getElementById('skills');
             const skillsRoot = document.getElementById('skills');
             const raw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
             const raw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
             return raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
             return raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
         }
         } function chooseDescFrom(obj) {
        function chooseDescFrom(obj) {
             const lang = getLangKey();
             const lang = getLangKey();
             const pack = obj.desc_i18n || { pt: obj.descPt, en: obj.descEn, es: obj.descEs, pl: obj.descPl };
             const pack = obj.desc_i18n || {
                pt: obj.descPt, en: obj.descEn, es: obj.descEs, pl: obj.descPl
            };
             return (pack && (pack[lang] || pack.pt || pack.en || pack.es || pack.pl)) || (obj.desc || '');
             return (pack && (pack[lang] || pack.pt || pack.en || pack.es || pack.pl)) || (obj.desc || '');
         }
         } function renderSubAttributesFromObj(s, L) {
        function renderSubAttributesFromObj(s, L) {
             const chip = (label, val) => (val ? `<div class="attr-row"><span class="attr-label">${label}</span><span class="attr-value">${val}</span></div>` : '');
             const chip = (label, val) => (val ? `<div class="attr-row"><span class="attr-label">${label}</span><span class="attr-value">${val}</span></div>` : '');
             const pve = (s.powerpve || '').toString().trim();
             const pve = (s.powerpve || '').toString().trim();
Linha 70: Linha 52:
             const en = (s.energy || '').toString().trim();
             const en = (s.energy || '').toString().trim();
             const cd = (s.cooldown || '').toString().trim();
             const cd = (s.cooldown || '').toString().trim();
             const rows = [
             const rows = [cd ? chip(L.cooldown, cd) : '', en ? chip((en.startsWith('-') ? L.energy_cost : L.energy_gain), en.startsWith('-') ? en.replace(/^-/, '') : en.replace(/^\+?/, '')) : '', pve ? chip(L.power, pve) : '', pvp ? chip(L.power_pvp, pvp) : '',].filter(Boolean);
                cd ? chip(L.cooldown, cd) : '',
                en ? chip((en.startsWith('-') ? L.energy_cost : L.energy_gain), en.startsWith('-') ? en.replace(/^-/, '') : en.replace(/^\+?/, '')) : '',
                pve ? chip(L.power, pve) : '',
                pvp ? chip(L.power_pvp, pvp) : '',
            ].filter(Boolean);
             return rows.length ? `<div class="attr-list">${rows.join('')}</div>` : '';
             return rows.length ? `<div class="attr-list">${rows.join('')}</div>` : '';
         }
         } function getFlagIconURL(key) {
        function getFlagIconURL(key) {
             if (!FLAG_ICON_FILES[key]) return '';
             if (!FLAG_ICON_FILES[key]) return '';
             if (!flagIconURLCache.has(key)) {
             if (!flagIconURLCache.has(key)) {
                 flagIconURLCache.set(key, filePathURL(FLAG_ICON_FILES[key]));
                 flagIconURLCache.set(key, filePathURL(FLAG_ICON_FILES[key]));
             }
             } return flagIconURLCache.get(key);
            return flagIconURLCache.get(key);
         } function renderFlagsRow(flags) {
         }
 
        function renderFlagsRow(flags) {
             const arr = (flags || []).filter(Boolean);
             const arr = (flags || []).filter(Boolean);
             if (!arr.length) return '';
             if (!arr.length) return '';
Linha 92: Linha 65:
             if (flagRowCache.has(cacheKey)) {
             if (flagRowCache.has(cacheKey)) {
                 return flagRowCache.get(cacheKey);
                 return flagRowCache.get(cacheKey);
             }
             } const items = arr.map(k => {
            const items = arr.map(k => {
                 const url = getFlagIconURL(k);
                 const url = getFlagIconURL(k);
                 return url ? `<img class="skill-flag" data-flag="${k}" alt="" src="${url}">` : '';
                 return url ? `<img class="skill-flag" data-flag="${k}" alt="" src="${url}">` : '';
Linha 100: Linha 72:
             if (html) flagRowCache.set(cacheKey, html);
             if (html) flagRowCache.set(cacheKey, html);
             return html;
             return html;
         }
         } function applyFlagTooltips(container) {
        function applyFlagTooltips(container) {
             const skillsRoot = document.getElementById('skills');
             const skillsRoot = document.getElementById('skills');
             if (!skillsRoot) return;
             if (!skillsRoot) return;
             let pack = {};
             let pack = {
            };
             try {
             try {
                 pack = JSON.parse(skillsRoot.dataset.i18nFlags || '{}');
                 pack = JSON.parse(skillsRoot.dataset.i18nFlags || '{}');
             } catch (e) { }
             } catch (e) {
             const lang = getLangKey();
             } const lang = getLangKey();
             const dict = pack[lang] || pack.pt || {};
             const dict = pack[lang] || pack.pt || {
            };
             const flags = container.querySelectorAll('.skill-flags .skill-flag[data-flag]');
             const flags = container.querySelectorAll('.skill-flags .skill-flag[data-flag]');
             const tooltip = window.__globalSkillTooltip;
             const tooltip = window.__globalSkillTooltip;
             if (!tooltip) return; // Tooltip system not ready yet
             if (!tooltip) return;
 
             flags.forEach(el => {
             flags.forEach(el => {
                 const key = el.getAttribute('data-flag');
                 const key = el.getAttribute('data-flag');
                 const tip = (dict && dict[key]) || '';
                 const tip = (dict && dict[key]) || '';
                 if (!tip) return;
                 if (!tip) return;
                // Remove old listeners if any
                 if (el.dataset.flagTipWired) return;
                 if (el.dataset.flagTipWired) return;
                 el.dataset.flagTipWired = '1';
                 el.dataset.flagTipWired = '1';
                // Set aria-label for accessibility
                 el.setAttribute('aria-label', tip);
                 el.setAttribute('aria-label', tip);
                 if (el.hasAttribute('title')) el.removeAttribute('title');
                 if (el.hasAttribute('title')) el.removeAttribute('title');
                // Wire tooltip events using the same system as skill icons
                 el.addEventListener('mouseenter', () => {
                 el.addEventListener('mouseenter', () => {
                     const tipEl = document.querySelector('.skill-tooltip');
                     const tipEl = document.querySelector('.skill-tooltip');
Linha 148: Linha 114:
                 });
                 });
             });
             });
         }
         } function normalizeFileURL(raw, fallback = '') {
 
        // ===========================
        // Asset Manifest & Preloading
        // ===========================
        function normalizeFileURL(raw, fallback = '') {
             if (!raw) return fallback;
             if (!raw) return fallback;
             const val = String(raw).trim();
             const val = String(raw).trim();
Linha 159: Linha 120:
             if (/^(https?:)?\/\//i.test(val) || val.startsWith('data:') || val.includes('Especial:FilePath/')) {
             if (/^(https?:)?\/\//i.test(val) || val.startsWith('data:') || val.includes('Especial:FilePath/')) {
                 return val;
                 return val;
             }
             } return filePathURL(val);
            return filePathURL(val);
         } function collectAssetsFromSubs(subs, iconsSet, videosSet, flagsSet) {
         }
 
        function collectAssetsFromSubs(subs, iconsSet, videosSet, flagsSet) {
             if (!Array.isArray(subs)) return;
             if (!Array.isArray(subs)) return;
             subs.forEach(sub => {
             subs.forEach(sub => {
Linha 171: Linha 129:
                     const videoURL = normalizeFileURL(sub.video);
                     const videoURL = normalizeFileURL(sub.video);
                     if (videoURL) videosSet.add(videoURL);
                     if (videoURL) videosSet.add(videoURL);
                 }
                 } if (Array.isArray(sub.flags)) {
                if (Array.isArray(sub.flags)) {
                     sub.flags.forEach(flagKey => {
                     sub.flags.forEach(flagKey => {
                         const url = getFlagIconURL(flagKey);
                         const url = getFlagIconURL(flagKey);
                         if (url) flagsSet.add(url);
                         if (url) flagsSet.add(url);
                     });
                     });
                 }
                 } if (Array.isArray(sub.subs)) {
                if (Array.isArray(sub.subs)) {
                     collectAssetsFromSubs(sub.subs, iconsSet, videosSet, flagsSet);
                     collectAssetsFromSubs(sub.subs, iconsSet, videosSet, flagsSet);
                 }
                 }
             });
             });
         }
         } function buildAssetManifest() {
 
        function buildAssetManifest() {
             if (window.__skillAssetManifest && window.__skillAssetManifest.ready) {
             if (window.__skillAssetManifest && window.__skillAssetManifest.ready) {
                 return window.__skillAssetManifest;
                 return window.__skillAssetManifest;
             }
             } const iconsSet = new Set();
            const iconsSet = new Set();
             const videosSet = new Set();
             const videosSet = new Set();
             const flagsSet = new Set();
             const flagsSet = new Set();
             iconItems.forEach(el => {
             iconItems.forEach(el => {
                 const img = el.querySelector('img');
                 const img = el.querySelector('img');
Linha 198: Linha 150:
                 } else if (el.dataset.icon) {
                 } else if (el.dataset.icon) {
                     iconsSet.add(normalizeFileURL(el.dataset.icon));
                     iconsSet.add(normalizeFileURL(el.dataset.icon));
                 }
                 } const videoRaw = (el.dataset.video || '').trim();
                const videoRaw = (el.dataset.video || '').trim();
                 if (videoRaw) {
                 if (videoRaw) {
                     videosSet.add(normalizeFileURL(videoRaw));
                     videosSet.add(normalizeFileURL(videoRaw));
                 }
                 } if (el.dataset.flags) {
                if (el.dataset.flags) {
                     try {
                     try {
                         const parsedFlags = JSON.parse(el.dataset.flags);
                         const parsedFlags = JSON.parse(el.dataset.flags);
Linha 210: Linha 160:
                             if (url) flagsSet.add(url);
                             if (url) flagsSet.add(url);
                         });
                         });
                     } catch (e) { }
                     } catch (e) {
                 }
                    }
                if (el.dataset.subs) {
                 } if (el.dataset.subs) {
                     try {
                     try {
                         const subs = JSON.parse(el.dataset.subs);
                         const subs = JSON.parse(el.dataset.subs);
                         collectAssetsFromSubs(subs, iconsSet, videosSet, flagsSet);
                         collectAssetsFromSubs(subs, iconsSet, videosSet, flagsSet);
                     } catch (e) { }
                     } catch (e) {
                    }
                 }
                 }
             });
             });
             Object.keys(FLAG_ICON_FILES).forEach(flagKey => {
             Object.keys(FLAG_ICON_FILES).forEach(flagKey => {
                 const url = getFlagIconURL(flagKey);
                 const url = getFlagIconURL(flagKey);
                 if (url) flagsSet.add(url);
                 if (url) flagsSet.add(url);
             });
             });
             const manifest = {
             const manifest = {
                 icons: iconsSet,
                 icons: iconsSet, videos: videosSet, flags: flagsSet, ready: true
                videos: videosSet,
                flags: flagsSet,
                ready: true
             };
             };
             window.__skillAssetManifest = manifest;
             window.__skillAssetManifest = manifest;
             return manifest;
             return manifest;
         }
         } function preloadImagesFromSet(set) {
 
        function preloadImagesFromSet(set) {
             if (!set || !set.size) return;
             if (!set || !set.size) return;
             set.forEach(url => {
             set.forEach(url => {
Linha 246: Linha 190:
                 imagePreloadCache.set(url, img);
                 imagePreloadCache.set(url, img);
             });
             });
         }
         } function preloadVideosFromSet(set) {
 
        function preloadVideosFromSet(set) {
             if (!set || !set.size) return;
             if (!set || !set.size) return;
             const head = document.head || document.getElementsByTagName('head')[0];
             const head = document.head || document.getElementsByTagName('head')[0];
Linha 261: Linha 203:
                 videoPreloadCache.add(url);
                 videoPreloadCache.add(url);
             });
             });
         }
         } const subskillVideosCache = new Map();
 
        // Cache global de vídeos de subskills pré-criados
        const subskillVideosCache = new Map();
        // Expor globalmente para Widget_Character.Subskills usar
         window.__subskillVideosCache = subskillVideosCache;
         window.__subskillVideosCache = subskillVideosCache;
        // Build manifest now that DOM is ready and kick off preloading
         let assetManifest = null;
         let assetManifest = null;
        // ===========================
        // DOM Setup & Initialization
        // ===========================
         const skillsTab = $('#skills');
         const skillsTab = $('#skills');
         const skinsTab = $('#skins');
         const skinsTab = $('#skins');
        // Clean up existing elements
         ensureRemoved('.top-rail');
         ensureRemoved('.top-rail');
         ensureRemoved('.content-card');
         ensureRemoved('.content-card');
Linha 286: Linha 216:
             }
             }
         });
         });
        // Setup skills tab structure
         if (skillsTab) {
         if (skillsTab) {
             const iconBar = skillsTab.querySelector('.icon-bar');
             const iconBar = skillsTab.querySelector('.icon-bar');
Linha 295: Linha 223:
                 rail.appendChild(iconBar);
                 rail.appendChild(iconBar);
                 skillsTab.prepend(rail);
                 skillsTab.prepend(rail);
             }
             } const details = skillsTab.querySelector('.skills-details');
 
            const details = skillsTab.querySelector('.skills-details');
             const videoContainer = skillsTab.querySelector('.video-container');
             const videoContainer = skillsTab.querySelector('.video-container');
             const card = document.createElement('div');
             const card = document.createElement('div');
Linha 304: Linha 230:
             if (videoContainer) card.appendChild(videoContainer);
             if (videoContainer) card.appendChild(videoContainer);
             skillsTab.appendChild(card);
             skillsTab.appendChild(card);
         }
         } if (skinsTab) {
 
        // Setup skins tab structure
        if (skinsTab) {
             const wrapper = skinsTab.querySelector('.skins-carousel-wrapper');
             const wrapper = skinsTab.querySelector('.skins-carousel-wrapper');
             const rail = document.createElement('div');
             const rail = document.createElement('div');
Linha 324: Linha 247:
                 skinsTab.prepend(rail);
                 skinsTab.prepend(rail);
             }
             }
         }
         } const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;
 
        // ===========================
        // Video Management
        // ===========================
        const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;
         const iconItems = iconsBar ? Array.from(iconsBar.querySelectorAll('.skill-icon')) : [];
         const iconItems = iconsBar ? Array.from(iconsBar.querySelectorAll('.skill-icon')) : [];
         if (!assetManifest) {
         if (!assetManifest) {
Linha 336: Linha 254:
             preloadImagesFromSet(assetManifest.flags);
             preloadImagesFromSet(assetManifest.flags);
             preloadVideosFromSet(assetManifest.videos);
             preloadVideosFromSet(assetManifest.videos);
         }
         } const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;
        const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;
         const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;
         const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;
         const videosCache = new Map();
         const videosCache = new Map();
         const nestedVideoElByIcon = new WeakMap();
         const nestedVideoElByIcon = new WeakMap();
         const barStack = [];
         const barStack = [];
        // Expose barStack globally for subskill hash updates
         window.__barStack = barStack;
         window.__barStack = barStack;
         let initialBarSnapshot = null;
         let initialBarSnapshot = null;
         let totalVideos = 0, loadedVideos = 0, autoplay = false;
         let totalVideos = 0, loadedVideos = 0, autoplay = false;
        // Track last clicked skill/subskill for language changes
         window.__lastActiveSkillIcon = null;
         window.__lastActiveSkillIcon = null;
        // Flag para indicar que o usuário já interagiu (não resetar vídeos após isso)
         let userHasInteracted = false;
         let userHasInteracted = false;
        // ===========================
        // Weapon Toggle System
        // ===========================
        // Global weapon state (off by default)
         let globalWeaponEnabled = false;
         let globalWeaponEnabled = false;
        // Expose setter for WeaponToggle widget
         window.__setGlobalWeaponEnabled = (enabled) => {
         window.__setGlobalWeaponEnabled = (enabled) => {
             globalWeaponEnabled = enabled;
             globalWeaponEnabled = enabled;
         };
         };
        // Inject weapon styles
         (function injectWeaponStyles() {
         (function injectWeaponStyles() {
             if (document.getElementById('weapon-toggle-styles')) return;
             if (document.getElementById('weapon-toggle-styles')) return;
Linha 371: Linha 273:
             style.id = 'weapon-toggle-styles';
             style.id = 'weapon-toggle-styles';
             style.textContent = `
             style.textContent = `
                 /* Badge on skill icon when weapon equipped */
                 /* Badge de arma no canto inferior direito */
                 .skill-icon.weapon-equipped::after {
                 .skill-icon.weapon-equipped::after {
                     content: '';
                     content: '';
Linha 380: Linha 282:
                     height: 14px;
                     height: 14px;
                     background: var(--weapon-badge-url) center/contain no-repeat;
                     background: var(--weapon-badge-url) center/contain no-repeat;
                     filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
                     filter: drop-shadow(0 0 4px rgba(74, 158, 255, 0.7));
                     pointer-events: none;
                     pointer-events: none;
                     z-index: 5;
                     z-index: 5;
                     border-radius: 2px;
                     border-radius: 2px;
                 }
                 }
                /* Desativar círculo amarelo de ativo quando tem arma */
                .skill-icon.weapon-equipped::before {
                    display: none !important;
                }
                /* Estilo limpo com outline azul ao invés de shadow amarelo serrilhado */
                 .skill-icon.weapon-equipped {
                 .skill-icon.weapon-equipped {
                     position: relative;
                     position: relative;
                     filter: brightness(1.08) saturate(1.12);
                     outline: 2px solid rgba(74, 158, 255, 0.6);
                    box-shadow: 0 0 0 2px rgba(255, 200, 0, 0.4), 0 0 12px rgba(255, 200, 0, 0.3);
                    outline-offset: -2px;
                 }
                 }
             `;
                /* Quando ativo E com arma, usar efeito azul */
                .skill-icon.weapon-equipped.active {
                    outline-color: rgba(74, 158, 255, 0.9);
                    box-shadow: 0 0 10px rgba(74, 158, 255, 0.4);
                }
             `.replace(/\s+/g, ' ').trim();
             document.head.appendChild(style);
             document.head.appendChild(style);
         })();
         })();
         function applyWeaponBadge(el, weaponData, equipped) {
         function applyWeaponBadge(el, weaponData, equipped) {
             if (equipped && weaponData) {
             if (equipped && weaponData) {
Linha 402: Linha 313:
                 el.style.removeProperty('--weapon-badge-url');
                 el.style.removeProperty('--weapon-badge-url');
             }
             }
         }
         } function getWeaponKey(el) {
 
            return (el.dataset.index || '') + ':' + (el.dataset.nome || el.dataset.name || '');
         // ===========================
         } function createVideoElement(videoURL, extraAttrs = {
        // Funções auxiliares para vídeos
        }) {
        // ===========================
        function createVideoElement(videoURL, extraAttrs = {}) {
             const v = document.createElement('video');
             const v = document.createElement('video');
             v.className = 'skill-video';
             v.className = 'skill-video';
Linha 418: Linha 327:
             v.style.aspectRatio = '16/9';
             v.style.aspectRatio = '16/9';
             v.style.objectFit = 'cover';
             v.style.objectFit = 'cover';
             Object.keys(extraAttrs).forEach(k => {
             Object.keys(extraAttrs).forEach(k => {
                 v.dataset[k] = extraAttrs[k];
                 v.dataset[k] = extraAttrs[k];
             });
             });
             const src = document.createElement('source');
             const src = document.createElement('source');
             src.src = videoURL;
             src.src = videoURL;
             src.type = 'video/webm';
             src.type = 'video/webm';
             v.appendChild(src);
             v.appendChild(src);
             return v;
             return v;
         }
         } function precreateSubskillVideos() {
 
        // Pré-criar vídeos de subskills (lazy - só cria os elementos, não força download)
        function precreateSubskillVideos() {
             if (!videoBox) return;
             if (!videoBox) return;
             iconItems.forEach(parentIcon => {
             iconItems.forEach(parentIcon => {
Linha 446: Linha 349:
                         const key = `sub:${parentIdx}:${subName}`;
                         const key = `sub:${parentIdx}:${subName}`;
                         if (subskillVideosCache.has(key)) return;
                         if (subskillVideosCache.has(key)) return;
                         const videoURL = normalizeFileURL(s.video);
                         const videoURL = normalizeFileURL(s.video);
                         if (!videoURL) return;
                         if (!videoURL) return;
                         const v = createVideoElement(videoURL, {
                         const v = createVideoElement(videoURL, {
                             sub: '1',
                             sub: '1', parentIndex: parentIdx, subName: subName
                            parentIndex: parentIdx,
                            subName: subName
                         });
                         });
                         videoBox.appendChild(v);
                         videoBox.appendChild(v);
                         subskillVideosCache.set(key, v);
                         subskillVideosCache.set(key, v);
                     });
                     });
                 } catch (e) {
                 } catch (e) {
                    // Ignore parse errors
                 }
                 }
             });
             });
         }
         } setTimeout(precreateSubskillVideos, 500);
 
        // Executar pré-criação de vídeos após um delay para não bloquear carregamento inicial
        setTimeout(precreateSubskillVideos, 500);
 
        // ===========================
        // Video Loading & Caching
        // ===========================
         if (iconItems.length && videoBox) {
         if (iconItems.length && videoBox) {
             iconItems.forEach(el => {
             iconItems.forEach(el => {
Linha 476: Linha 366:
                 const idx = el.dataset.index || '';
                 const idx = el.dataset.index || '';
                 if (!src || videosCache.has(idx)) return;
                 if (!src || videosCache.has(idx)) return;
                 totalVideos++;
                 totalVideos++;
                 const v = createVideoElement(src, { index: idx });
                 const v = createVideoElement(src, {
                    index: idx
                });
                 v.style.maxWidth = '100%';
                 v.style.maxWidth = '100%';
                 v.addEventListener('canplaythrough', () => {
                 v.addEventListener('canplaythrough', () => {
                     loadedVideos++;
                     loadedVideos++;
                    // Só resetar vídeo se usuário ainda não interagiu
                     if (!userHasInteracted && loadedVideos === 1) {
                     if (!userHasInteracted && loadedVideos === 1) {
                         try { v.pause(); v.currentTime = 0; } catch (e) { }
                         try {
                     }
                            v.pause();
                    if (loadedVideos === totalVideos) autoplay = true;
                            v.currentTime = 0;
                 }, { once: true });
                        } catch (e) {
 
                        }
                     } if (loadedVideos === totalVideos) autoplay = true;
                 }, {
                    once: true
                });
                 v.addEventListener('error', () => {
                 v.addEventListener('error', () => {
                     loadedVideos++;
                     loadedVideos++;
                     if (loadedVideos === totalVideos) autoplay = true;
                     if (loadedVideos === totalVideos) autoplay = true;
                 }, { once: true });
                 }, {
 
                    once: true
                });
                 videoBox.appendChild(v);
                 videoBox.appendChild(v);
                 videosCache.set(idx, v);
                 videosCache.set(idx, v);
             });
             });
         }
         } function wireTooltipsForNewIcons() {
 
 
        // ===========================
        // Skill Bar Wiring (root and nested)
        // ===========================
        function wireTooltipsForNewIcons() {
             const tip = document.querySelector('.skill-tooltip');
             const tip = document.querySelector('.skill-tooltip');
             if (!tip) return;
             if (!tip) return;
Linha 515: Linha 403:
                 if (icon.hasAttribute('title')) icon.removeAttribute('title');
                 if (icon.hasAttribute('title')) icon.removeAttribute('title');
                 const img = icon.querySelector('img');
                 const img = icon.querySelector('img');
                 if (img) { const imgAlt = img.getAttribute('alt') || ''; const imgTitle = img.getAttribute('title') || ''; if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle); img.setAttribute('alt', ''); if (img.hasAttribute('title')) img.removeAttribute('title'); }
                 if (img) {
                 const measureAndPos = (el) => {
                    const imgAlt = img.getAttribute('alt') || '';
                    const imgTitle = img.getAttribute('title') || '';
                    if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle);
                    img.setAttribute('alt', '');
                    if (img.hasAttribute('title')) img.removeAttribute('title');
                 } const measureAndPos = (el) => {
                     if (!el || tip.getAttribute('aria-hidden') === 'true') return;
                     if (!el || tip.getAttribute('aria-hidden') === 'true') return;
                     tip.style.left = '0px'; tip.style.top = '0px';
                     tip.style.left = '0px';
                     const rect = el.getBoundingClientRect(); const tr = tip.getBoundingClientRect();
                    tip.style.top = '0px';
                     const rect = el.getBoundingClientRect();
                    const tr = tip.getBoundingClientRect();
                     let left = Math.round(rect.left + (rect.width - tr.width) / 2);
                     let left = Math.round(rect.left + (rect.width - tr.width) / 2);
                     left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
                     left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
Linha 525: Linha 420:
                     let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
                     let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
                     if (top < 8) top = Math.round(rect.bottom + 10);
                     if (top < 8) top = Math.round(rect.bottom + 10);
                     tip.style.left = left + 'px'; tip.style.top = top + 'px';
                     tip.style.left = left + 'px';
                    tip.style.top = top + 'px';
                };
                const show = (el, text) => {
                    tip.textContent = text || '';
                    tip.setAttribute('aria-hidden', 'false');
                    measureAndPos(el);
                    tip.style.opacity = '1';
                };
                const hide = () => {
                    tip.setAttribute('aria-hidden', 'true');
                    tip.style.opacity = '0';
                    tip.style.left = '-9999px';
                    tip.style.top = '-9999px';
                 };
                 };
                const show = (el, text) => { tip.textContent = text || ''; tip.setAttribute('aria-hidden', 'false'); measureAndPos(el); tip.style.opacity = '1'; };
                const hide = () => { tip.setAttribute('aria-hidden', 'true'); tip.style.opacity = '0'; tip.style.left = '-9999px'; tip.style.top = '-9999px'; };
                 icon.addEventListener('mouseenter', () => show(icon, (icon.dataset.nome || icon.dataset.name || '')));
                 icon.addEventListener('mouseenter', () => show(icon, (icon.dataset.nome || icon.dataset.name || '')));
                 icon.addEventListener('mousemove', () => { if (performance.now() >= lockUntil2) measureAndPos(icon); });
                 icon.addEventListener('mousemove', () => {
                 icon.addEventListener('click', () => { lockUntil2 = performance.now() + 240; measureAndPos(icon); });
                    if (performance.now() >= lockUntil2) measureAndPos(icon);
                });
                 icon.addEventListener('click', () => {
                    lockUntil2 = performance.now() + 240;
                    measureAndPos(icon);
                });
                 icon.addEventListener('mouseleave', hide);
                 icon.addEventListener('mouseleave', hide);
             });
             });
         }
         } function showVideoForIcon(el) {
 
        function showVideoForIcon(el) {
            // Marcar que usuário interagiu
             userHasInteracted = true;
             userHasInteracted = true;
            // Hide all existing videos
             if (videoBox) {
             if (videoBox) {
                 Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
                 Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => {
             }
                    try {
            if (window.__subskills) window.__subskills.hideAll?.(videoBox);
                        v.pause();
 
                    } catch (e) {
                    } v.style.display = 'none';
                });
             } if (window.__subskills) window.__subskills.hideAll?.(videoBox);
             const hasIdx = !!el.dataset.index;
             const hasIdx = !!el.dataset.index;
             const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');
             const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');
             if (!videoBox || !hasVideo) {
             if (!videoBox || !hasVideo) {
                 if (videoBox) { videoBox.style.display = 'none'; }
                 if (videoBox) {
                 return;
                    videoBox.style.display = 'none';
             }
                 } return;
 
             } if (hasIdx && videosCache.has(el.dataset.index)) {
            // Verificar cache de skills principais
            if (hasIdx && videosCache.has(el.dataset.index)) {
                 const v = videosCache.get(el.dataset.index);
                 const v = videosCache.get(el.dataset.index);
                 videoBox.style.display = 'block';
                 videoBox.style.display = 'block';
                 v.style.display = 'block';
                 v.style.display = 'block';
                 try { v.currentTime = 0; } catch (e) { }
                 try {
                 const suppress = document.body.dataset.suppressSkillPlay === '1';
                    v.currentTime = 0;
                 if (!suppress) { v.play().catch(() => { }); } else { try { v.pause(); } catch (e) { } }
                } catch (e) {
                 return;
                 } const suppress = document.body.dataset.suppressSkillPlay === '1';
             }
                 if (!suppress) {
 
                    v.play().catch(() => {
            // Verificar cache de subskills (para ícones nested na barra principal após pushSubBarFrom)
                    });
            const subName = el.dataset.subName || el.dataset.nome || el.dataset.name || '';
                } else {
                    try {
                        v.pause();
                    } catch (e) {
                    }
                 } return;
             } const subName = el.dataset.subName || el.dataset.nome || el.dataset.name || '';
             const parentIdx = el.dataset.parentIndex || '';
             const parentIdx = el.dataset.parentIndex || '';
             if (subName && parentIdx) {
             if (subName && parentIdx) {
Linha 573: Linha 486:
                     videoBox.style.display = 'block';
                     videoBox.style.display = 'block';
                     v.style.display = 'block';
                     v.style.display = 'block';
                     try { v.currentTime = 0; } catch (e) { }
                     try {
                     const suppress = document.body.dataset.suppressSkillPlay === '1';
                        v.currentTime = 0;
                     if (!suppress) { v.play().catch(() => { }); } else { try { v.pause(); } catch (e) { } }
                    } catch (e) {
                     return;
                     } const suppress = document.body.dataset.suppressSkillPlay === '1';
                     if (!suppress) {
                        v.play().catch(() => {
                        });
                    } else {
                        try {
                            v.pause();
                        } catch (e) {
                        }
                     } return;
                 }
                 }
             }
             } let v = nestedVideoElByIcon.get(el);
 
            // Nested or custom icon video - usar cache existente ou criar novo
            let v = nestedVideoElByIcon.get(el);
             if (!v) {
             if (!v) {
                 v = createVideoElement(el.dataset.video, {});
                 v = createVideoElement(el.dataset.video, {
                });
                 videoBox.appendChild(v);
                 videoBox.appendChild(v);
                 nestedVideoElByIcon.set(el, v);
                 nestedVideoElByIcon.set(el, v);
            } videoBox.style.display = 'block';
            v.style.display = 'block';
            try {
                v.currentTime = 0;
            } catch (e) {
            } const suppress = document.body.dataset.suppressSkillPlay === '1';
            if (!suppress) {
                v.play().catch(() => {
                });
            } else {
                try {
                    v.pause();
                } catch (e) {
                }
             }
             }
            videoBox.style.display = 'block';
         } function activateSkill(el, options = {
            v.style.display = 'block';
        }) {
            try { v.currentTime = 0; } catch (e) { }
             const {
            const suppress = document.body.dataset.suppressSkillPlay === '1';
                openSubs = true
            if (!suppress) { v.play().catch(() => { }); } else { try { v.pause(); } catch (e) { } }
            } = options;
        }
 
         /**
        * Activate a skill icon: show description, video, update UI state
        * @param {HTMLElement} el - The skill icon element
        * @param {Object} options - Options object
        * @param {boolean} options.openSubs - Whether to open sub-bar if skill has subskills (default: true)
        */
        function activateSkill(el, options = {}) {
             const { openSubs = true } = options;
 
            // Hide tooltip immediately when activating (prevents it from jumping to corner when bar changes)
             const tip = document.querySelector('.skill-tooltip');
             const tip = document.querySelector('.skill-tooltip');
             if (tip) {
             if (tip) {
Linha 610: Linha 532:
                 tip.style.left = '-9999px';
                 tip.style.left = '-9999px';
                 tip.style.top = '-9999px';
                 tip.style.top = '-9999px';
             }
             } const skillsRoot = document.getElementById('skills');
 
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
            const skillsRoot = document.getElementById('skills');
            };
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
             const L = i18nMap[getLangKey()] || i18nMap.pt || {
             const L = i18nMap[getLangKey()] || i18nMap.pt || { cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível' };
                cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
            };
             const name = el.dataset.nome || el.dataset.name || '';
             const name = el.dataset.nome || el.dataset.name || '';
             const level = (el.dataset.level || '').trim();
             const level = (el.dataset.level || '').trim();
            // Check for weapon data
             let weaponData = null;
             let weaponData = null;
             if (el.dataset.weapon) {
             if (el.dataset.weapon) {
                 try {
                 try {
                     weaponData = JSON.parse(el.dataset.weapon);
                     weaponData = JSON.parse(el.dataset.weapon);
                 } catch (e) { weaponData = null; }
                 } catch (e) {
             }
                    weaponData = null;
            const hasWeapon = !!weaponData;
                }
             } const hasWeapon = !!weaponData;
             const weaponEquipped = hasWeapon && globalWeaponEnabled;
             const weaponEquipped = hasWeapon && globalWeaponEnabled;
            // Pick description from current language (respects language changes)
             const lang = getLangKey();
             const lang = getLangKey();
            // Base skill description
             const baseDescPack = {
             const baseDescPack = {
                 pt: el.dataset.descPt || '',
                 pt: el.dataset.descPt || '', en: el.dataset.descEn || '', es: el.dataset.descEs || '', pl: el.dataset.descPl || ''
                en: el.dataset.descEn || '',
                es: el.dataset.descEs || '',
                pl: el.dataset.descPl || ''
             };
             };
             const baseDesc = baseDescPack[lang] || baseDescPack.pt || baseDescPack.en || baseDescPack.es || baseDescPack.pl || el.dataset.desc || '';
             const baseDesc = baseDescPack[lang] || baseDescPack.pt || baseDescPack.en || baseDescPack.es || baseDescPack.pl || el.dataset.desc || '';
 
             let weaponDescPack = {
            // Weapon description (if equipped)
            };
             let weaponDescPack = {};
             if (weaponData && weaponData.desc_i18n) {
             if (weaponData && weaponData.desc_i18n) {
                 weaponDescPack = weaponData.desc_i18n;
                 weaponDescPack = weaponData.desc_i18n;
             } else if (weaponData) {
             } else if (weaponData) {
                 weaponDescPack = {
                 weaponDescPack = {
                     pt: weaponData.descPt || '',
                     pt: weaponData.descPt || '', en: weaponData.descEn || '', es: weaponData.descEs || '', pl: weaponData.descPl || ''
                    en: weaponData.descEn || '',
                    es: weaponData.descEs || '',
                    pl: weaponData.descPl || ''
                 };
                 };
             }
             } const weaponDesc = weaponDescPack[lang] || weaponDescPack.pt || weaponDescPack.en || weaponDescPack.es || weaponDescPack.pl || '';
            const weaponDesc = weaponDescPack[lang] || weaponDescPack.pt || weaponDescPack.en || weaponDescPack.es || weaponDescPack.pl || '';
 
            // Choose description based on weapon state
             const chosenDesc = (weaponEquipped && weaponDesc) ? weaponDesc : baseDesc;
             const chosenDesc = (weaponEquipped && weaponDesc) ? weaponDesc : baseDesc;
             const descHtml = chosenDesc.replace(/'''(.*?)'''/g, '<b>$1</b>');
             const descHtml = chosenDesc.replace(/'''(.*?)'''/g, '<b>$1</b>');
            // Choose attributes based on weapon state
             let attrsHTML = '';
             let attrsHTML = '';
             if (weaponEquipped && weaponData) {
             if (weaponEquipped && weaponData) {
                // Build weapon attrs string: pve, pvp, energy, cooldown
                 const wPve = (weaponData.powerpve || '').toString().trim();
                 const wPve = (weaponData.powerpve || '').toString().trim();
                 const wPvp = (weaponData.powerpvp || '').toString().trim();
                 const wPvp = (weaponData.powerpvp || '').toString().trim();
Linha 670: Linha 575:
             } else {
             } else {
                 attrsHTML = el.dataset.atr ? renderAttributes(el.dataset.atr) : (el.dataset.subattrs ? renderSubAttributesFromObj(JSON.parse(el.dataset.subattrs), L) : '');
                 attrsHTML = el.dataset.atr ? renderAttributes(el.dataset.atr) : (el.dataset.subattrs ? renderSubAttributesFromObj(JSON.parse(el.dataset.subattrs), L) : '');
             }
             } let flagsHTML = '';
 
            let flagsHTML = '';
             if (el.dataset.flags) {
             if (el.dataset.flags) {
                 try {
                 try {
                     const flags = JSON.parse(el.dataset.flags);
                     const flags = JSON.parse(el.dataset.flags);
                     flagsHTML = renderFlagsRow(flags);
                     flagsHTML = renderFlagsRow(flags);
                 } catch (e) { }
                 } catch (e) {
             }
                }
            if (descBox) {
             } if (descBox) {
                 descBox.innerHTML = `
                 descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${level ? `<div class="skill-level-line"><span class="attr-label">$ {
        <div class="skill-title"><h3>${name}</h3></div>
                L.level
        ${level ? `<div class=\"skill-level-line\"><span class=\"attr-label\">${L.level} ${level}</span></div>` : ''}
            } $ {
        ${attrsHTML}
                level
        <div class="desc">${descHtml}</div>`;
            }</span></div>` : ''}${attrsHTML}<div class="desc">${descHtml}</div>`;
             }
             } if (hasWeapon) {
 
            // Update weapon badge on skill icon
            if (hasWeapon) {
                 applyWeaponBadge(el, weaponData, weaponEquipped);
                 applyWeaponBadge(el, weaponData, weaponEquipped);
             }
             } if (videoBox) {
            // Renderizar flags dentro do videoBox (canto superior esquerdo do vídeo)
            if (videoBox) {
                // Remover flags antigas
                 const oldFlags = videoBox.querySelector('.skill-flags');
                 const oldFlags = videoBox.querySelector('.skill-flags');
                 if (oldFlags) oldFlags.remove();
                 if (oldFlags) oldFlags.remove();
                 if (flagsHTML) {
                 if (flagsHTML) {
                     videoBox.insertAdjacentHTML('beforeend', flagsHTML);
                     videoBox.insertAdjacentHTML('beforeend', flagsHTML);
                     applyFlagTooltips(videoBox);
                     applyFlagTooltips(videoBox);
                 }
                 }
             }
             } const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
            // Active state
            const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
             currIcons.forEach(i => i.classList.remove('active'));
             currIcons.forEach(i => i.classList.remove('active'));
             el.classList.add('active');
             el.classList.add('active');
             if (!autoplay && loadedVideos > 0) autoplay = true;
             if (!autoplay && loadedVideos > 0) autoplay = true;
            // Track for language changes
             window.__lastActiveSkillIcon = el;
             window.__lastActiveSkillIcon = el;
            // Video - show weapon video if equipped and available
             if (weaponEquipped && weaponData && weaponData.video) {
             if (weaponEquipped && weaponData && weaponData.video) {
                // Create/show weapon video
                 const weaponVideoURL = normalizeFileURL(weaponData.video);
                 const weaponVideoURL = normalizeFileURL(weaponData.video);
                 if (weaponVideoURL && videoBox) {
                 if (weaponVideoURL && videoBox) {
                    // Hide all existing videos
                     Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => {
                     Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => {
                         try { v.pause(); } catch (e) { }
                         try {
                         v.style.display = 'none';
                            v.pause();
                        } catch (e) {
                         } v.style.display = 'none';
                     });
                     });
                    // Check if we already have this weapon video cached
                     const weaponKey = `weapon:${getWeaponKey(el)}`;
                     const weaponKey = `weapon:${getWeaponKey(el)}`;
                     let weaponVideo = videoBox.querySelector(`video[data-weapon-key="${weaponKey}"]`);
                     let weaponVideo = videoBox.querySelector(`video[data-weapon-key="${weaponKey}"]`);
                     if (!weaponVideo) {
                     if (!weaponVideo) {
                         weaponVideo = createVideoElement(weaponVideoURL, { weaponKey });
                         weaponVideo = createVideoElement(weaponVideoURL, {
                            weaponKey
                        });
                         videoBox.appendChild(weaponVideo);
                         videoBox.appendChild(weaponVideo);
                    } videoBox.style.display = 'block';
                    weaponVideo.style.display = 'block';
                    try {
                        weaponVideo.currentTime = 0;
                    } catch (e) {
                    } const suppress = document.body.dataset.suppressSkillPlay === '1';
                    if (!suppress) {
                        weaponVideo.play().catch(() => {
                        });
                     }
                     }
                    videoBox.style.display = 'block';
                    weaponVideo.style.display = 'block';
                    try { weaponVideo.currentTime = 0; } catch (e) { }
                    const suppress = document.body.dataset.suppressSkillPlay === '1';
                    if (!suppress) { weaponVideo.play().catch(() => { }); }
                 }
                 }
             } else {
             } else {
                 showVideoForIcon(el);
                 showVideoForIcon(el);
             }
             } const subsRaw = el.dataset.subs || el.getAttribute('data-subs');
 
            // Handle subskills and back navigation
            const subsRaw = el.dataset.subs || el.getAttribute('data-subs');
             const isBack = el.dataset.back === 'true' || el.getAttribute('data-back') === 'true' || el.dataset.back === 'yes' || el.getAttribute('data-back') === 'yes' || el.dataset.back === '1' || el.getAttribute('data-back') === '1';
             const isBack = el.dataset.back === 'true' || el.getAttribute('data-back') === 'true' || el.dataset.back === 'yes' || el.getAttribute('data-back') === 'yes' || el.dataset.back === '1' || el.getAttribute('data-back') === '1';
             if (isBack && barStack.length) {
             if (isBack && barStack.length) {
                 const prev = barStack.pop();
                 const prev = barStack.pop();
Linha 748: Linha 639:
                 if (btn) btn.style.display = barStack.length ? 'block' : 'none';
                 if (btn) btn.style.display = barStack.length ? 'block' : 'none';
                 return;
                 return;
             }
             } if (openSubs && subsRaw && subsRaw.trim() !== '') {
 
            // Hash/deeplink behavior removed per latest request
 
            // Open sub-bar if skill has subskills and openSubs is true
            if (openSubs && subsRaw && subsRaw.trim() !== '') {
                // Avoid re-opening same sub-bar if already opened by this icon (prevents flicker on language change)
                 if (barStack.length && barStack[barStack.length - 1].parentIcon === el) return;
                 if (barStack.length && barStack[barStack.length - 1].parentIcon === el) return;
                 try {
                 try {
                     const subs = JSON.parse(subsRaw);
                     const subs = JSON.parse(subsRaw);
                     pushSubBarFrom(subs, el);
                     pushSubBarFrom(subs, el);
                 } catch { /* no-op */ }
                 } catch {
                }
             }
             }
         }
         } function wireClicksForCurrentBar() {
 
        function wireClicksForCurrentBar() {
             const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
             const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
             currIcons.forEach(el => {
             currIcons.forEach(el => {
Linha 771: Linha 655:
                 el.setAttribute('aria-label', label);
                 el.setAttribute('aria-label', label);
                 if (el.hasAttribute('title')) el.removeAttribute('title');
                 if (el.hasAttribute('title')) el.removeAttribute('title');
                 const img = el.querySelector('img'); if (img) { img.setAttribute('alt', ''); if (img.hasAttribute('title')) img.removeAttribute('title'); }
                 const img = el.querySelector('img');
                 el.addEventListener('click', () => {
                if (img) {
                     activateSkill(el, { openSubs: true });
                    img.setAttribute('alt', '');
                    if (img.hasAttribute('title')) img.removeAttribute('title');
                 } el.addEventListener('click', () => {
                     activateSkill(el, {
                        openSubs: true
                    });
                 });
                 });
             });
             });
            // Removido: badges de +/− (abrir/voltar via clique direto no ícone)
             wireTooltipsForNewIcons();
             wireTooltipsForNewIcons();
         }
         } function animateIconsBarEntrance() {
 
        function animateIconsBarEntrance() {
             Array.from(iconsBar.children).forEach((c, i) => {
             Array.from(iconsBar.children).forEach((c, i) => {
                 c.style.opacity = '0';
                 c.style.opacity = '0';
Linha 792: Linha 678:
                 });
                 });
             });
             });
         }
         } function snapshotCurrentBarItemsFromDOM() {
 
        function snapshotCurrentBarItemsFromDOM() {
             return Array.from(iconsBar.querySelectorAll('.skill-icon')).map(el => {
             return Array.from(iconsBar.querySelectorAll('.skill-icon')).map(el => {
                 const img = el.querySelector('img');
                 const img = el.querySelector('img');
                 const iconURL = img ? img.src : '';
                 const iconURL = img ? img.src : '';
                 const subsRaw = el.dataset.subs || el.getAttribute('data-subs') || '';
                 const subsRaw = el.dataset.subs || el.getAttribute('data-subs') || '';
                 let subs = null; try { subs = subsRaw ? JSON.parse(subsRaw) : null; } catch { subs = null; }
                 let subs = null;
                 const subattrsRaw = el.dataset.subattrs || '';
                try {
                    subs = subsRaw ? JSON.parse(subsRaw) : null;
                } catch {
                    subs = null;
                 } const subattrsRaw = el.dataset.subattrs || '';
                 let flags = null;
                 let flags = null;
                 if (el.dataset.flags) {
                 if (el.dataset.flags) {
                     try {
                     try {
                         flags = JSON.parse(el.dataset.flags);
                         flags = JSON.parse(el.dataset.flags);
                     } catch (e) { }
                     } catch (e) {
                 }
                    }
                let weapon = null;
                 } let weapon = null;
                 if (el.dataset.weapon) {
                 if (el.dataset.weapon) {
                     try {
                     try {
                         weapon = JSON.parse(el.dataset.weapon);
                         weapon = JSON.parse(el.dataset.weapon);
                     } catch (e) { }
                     } catch (e) {
                 }
                    }
                return {
                 } return {
                     name: el.dataset.nome || el.dataset.name || '',
                     name: el.dataset.nome || el.dataset.name || '', index: el.dataset.index || '', level: el.dataset.level || '', desc: el.dataset.desc || '', descPt: el.dataset.descPt || '', descEn: el.dataset.descEn || '', descEs: el.dataset.descEs || '', descPl: el.dataset.descPl || '', attrs: el.dataset.atr || el.dataset.attrs || '', video: el.dataset.video || '', iconURL, subs, subattrsStr: subattrsRaw, flags: flags, weapon: weapon
                    index: el.dataset.index || '', // Guardar index para skills principais
                    level: el.dataset.level || '',
                    desc: el.dataset.desc || '',
                    descPt: el.dataset.descPt || '',
                    descEn: el.dataset.descEn || '',
                    descEs: el.dataset.descEs || '',
                    descPl: el.dataset.descPl || '',
                    attrs: el.dataset.atr || el.dataset.attrs || '',
                    video: el.dataset.video || '',
                    iconURL,
                    subs,
                    subattrsStr: subattrsRaw,
                    flags: flags,
                    weapon: weapon
                 };
                 };
             });
             });
         }
         } function ensureBackButton() {
 
             const rail = iconsBar.closest('.top-rail.skills');
        function ensureBackButton() {
            if (!rail) return null;
             const rail = iconsBar.closest('.top-rail.skills'); if (!rail) return null;
            // Wrap rail in a dedicated container if not already wrapped
             let wrap = rail.parentElement;
             let wrap = rail.parentElement;
             if (!wrap || !wrap.classList || !wrap.classList.contains('skills-rail-wrap')) {
             if (!wrap || !wrap.classList || !wrap.classList.contains('skills-rail-wrap')) {
Linha 841: Linha 713:
                 const newWrap = document.createElement('div');
                 const newWrap = document.createElement('div');
                 newWrap.className = 'skills-rail-wrap';
                 newWrap.className = 'skills-rail-wrap';
                // keep layout
                 parentNode.insertBefore(newWrap, rail);
                 parentNode.insertBefore(newWrap, rail);
                 newWrap.appendChild(rail);
                 newWrap.appendChild(rail);
                 wrap = newWrap;
                 wrap = newWrap;
             }
             } let backWrap = wrap.querySelector('.skills-back-wrapper');
            // Ensure back-wrapper exists as sibling layered behind
            let backWrap = wrap.querySelector('.skills-back-wrapper');
             if (!backWrap) {
             if (!backWrap) {
                 backWrap = document.createElement('div');
                 backWrap = document.createElement('div');
Linha 855: Linha 724:
                 btnInner.type = 'button';
                 btnInner.type = 'button';
                 btnInner.setAttribute('aria-label', 'Voltar');
                 btnInner.setAttribute('aria-label', 'Voltar');
                // Use SVG double chevron for a crisper, larger icon
                 btnInner.innerHTML = '<svg class="back-chevron" width="100%" height="100%" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet"><path d="M10 2L4 16L10 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 2L14 16L20 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 2L24 16L30 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
                 btnInner.innerHTML = '<svg class="back-chevron" width="100%" height="100%" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet"><path d="M10 2L4 16L10 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 2L14 16L20 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 2L24 16L30 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
                 backWrap.appendChild(btnInner);
                 backWrap.appendChild(btnInner);
Linha 867: Linha 735:
                     if (!barStack.length) btnInner.classList.remove('peek');
                     if (!barStack.length) btnInner.classList.remove('peek');
                 });
                 });
             }
             } backWrap.style.display = barStack.length ? 'block' : 'none';
            // Always show back button when there's a sub-bar (user can always go back)
            backWrap.style.display = barStack.length ? 'block' : 'none';
            // Toggle class to show/hide mask
             wrap.classList.toggle('has-sub-bar', barStack.length > 0);
             wrap.classList.toggle('has-sub-bar', barStack.length > 0);
             const btnInner = backWrap.querySelector('.skills-back');
             const btnInner = backWrap.querySelector('.skills-back');
             return btnInner;
             return btnInner;
         }
         } function renderBarFromItems(items) {
 
        function renderBarFromItems(items) {
            // Hide tooltip when bar changes (prevents it from jumping to corner)
             const tip = document.querySelector('.skill-tooltip');
             const tip = document.querySelector('.skill-tooltip');
             if (tip) {
             if (tip) {
Linha 884: Linha 746:
                 tip.style.left = '-9999px';
                 tip.style.left = '-9999px';
                 tip.style.top = '-9999px';
                 tip.style.top = '-9999px';
             }
             } iconsBar.innerHTML = '';
            iconsBar.innerHTML = '';
             items.forEach((it, idx) => {
             items.forEach((it, idx) => {
                 const node = document.createElement('div'); node.className = 'skill-icon';
                 const node = document.createElement('div');
                node.className = 'skill-icon';
                 node.dataset.nome = it.name || '';
                 node.dataset.nome = it.name || '';
                // Restaurar index se disponível (para skills principais)
                 if (it.index) node.dataset.index = it.index;
                 if (it.index) node.dataset.index = it.index;
                 if (it.level) node.dataset.level = it.level;
                 if (it.level) node.dataset.level = it.level;
Linha 903: Linha 764:
                 if (it.flags) node.dataset.flags = JSON.stringify(it.flags);
                 if (it.flags) node.dataset.flags = JSON.stringify(it.flags);
                 if (it.weapon) node.dataset.weapon = JSON.stringify(it.weapon);
                 if (it.weapon) node.dataset.weapon = JSON.stringify(it.weapon);
                // mark nested icons (no dataset.index)
                 if (!it.index) node.dataset.nested = '1';
                 if (!it.index) node.dataset.nested = '1';
                 const img = document.createElement('img'); img.alt = ''; img.src = it.iconURL || (it.icon ? filePathURL(it.icon) : ''); node.appendChild(img);
                 const img = document.createElement('img');
                img.alt = '';
                img.src = it.iconURL || (it.icon ? filePathURL(it.icon) : '');
                node.appendChild(img);
                 iconsBar.appendChild(node);
                 iconsBar.appendChild(node);
             });
             });
             animateIconsBarEntrance();
             animateIconsBarEntrance();
             wireClicksForCurrentBar(); const b = ensureBackButton(); if (b) b.classList.add('peek');
             wireClicksForCurrentBar();
         }
            const b = ensureBackButton();
 
            if (b) b.classList.add('peek');
        function pushSubBarFrom(subs, parentIconEl) {
         } function pushSubBarFrom(subs, parentIconEl) {
            // Hide tooltip when opening sub-bar (prevents it from jumping to corner)
             const tip = document.querySelector('.skill-tooltip');
             const tip = document.querySelector('.skill-tooltip');
             if (tip) {
             if (tip) {
Linha 920: Linha 782:
                 tip.style.left = '-9999px';
                 tip.style.left = '-9999px';
                 tip.style.top = '-9999px';
                 tip.style.top = '-9999px';
             }
             } const parentNameSnapshot = parentIconEl ? (parentIconEl.dataset.nome || parentIconEl.dataset.name || '') : '';
            // Save current (store parentIcon to avoid re-opening same sub-bar on language change)
            const parentNameSnapshot = parentIconEl ? (parentIconEl.dataset.nome || parentIconEl.dataset.name || '') : '';
             const parentIndexSnapshot = parentIconEl ? (parentIconEl.dataset.index || '') : '';
             const parentIndexSnapshot = parentIconEl ? (parentIconEl.dataset.index || '') : '';
             barStack.push({
             barStack.push({
                 items: snapshotCurrentBarItemsFromDOM(),
                 items: snapshotCurrentBarItemsFromDOM(), parentIcon: parentIconEl, parentName: parentNameSnapshot, parentIndex: parentIndexSnapshot
                parentIcon: parentIconEl,
                parentName: parentNameSnapshot,
                parentIndex: parentIndexSnapshot
             });
             });
             ensureBackButton();
             ensureBackButton();
Linha 941: Linha 798:
                         const slug = slugify(parentIconEl.dataset.nome || parentIconEl.dataset.name || '');
                         const slug = slugify(parentIconEl.dataset.nome || parentIconEl.dataset.name || '');
                         if (slug) cacheKey = `slug:${slug}`;
                         if (slug) cacheKey = `slug:${slug}`;
                     }
                     } if (cacheKey) parentIconEl.dataset.subCacheKey = cacheKey;
                    if (cacheKey) parentIconEl.dataset.subCacheKey = cacheKey;
                 }
                 }
             }
             } if (cacheKey) {
            if (cacheKey) {
                 const cached = subBarTemplateCache.get(cacheKey);
                 const cached = subBarTemplateCache.get(cacheKey);
                 if (cached && cached.lang === langKey) {
                 if (cached && cached.lang === langKey) {
Linha 952: Linha 807:
                     iconsBar.appendChild(clone);
                     iconsBar.appendChild(clone);
                     animateIconsBarEntrance();
                     animateIconsBarEntrance();
                     wireClicksForCurrentBar(); const cachedBtn = ensureBackButton(); if (cachedBtn) cachedBtn.classList.add('peek');
                     wireClicksForCurrentBar();
                    const cachedBtn = ensureBackButton();
                    if (cachedBtn) cachedBtn.classList.add('peek');
                     return;
                     return;
                 }
                 }
             }
             } const skillsRoot = document.getElementById('skills');
            // Build next items from JSON
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
            const skillsRoot = document.getElementById('skills');
            };
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
             const L = i18nMap[getLangKey()] || i18nMap.pt || {
             const L = i18nMap[getLangKey()] || i18nMap.pt || { cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível' };
                cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
            };
             const items = (subs || []).map(s => {
             const items = (subs || []).map(s => {
                 const name = (s.name || s.n || '').trim();
                 const name = (s.name || s.n || '').trim();
                 const desc = chooseDescFrom(s).replace(/'''(.*?)'''/g, '<b>$1</b>');
                 const desc = chooseDescFrom(s).replace(/'''(.*?)'''/g, '<b>$1</b>');
                 const attrsHTML = renderSubAttributesFromObj(s, L);
                 const attrsHTML = renderSubAttributesFromObj(s, L);
                // store sub-attrs object JSON to re-render attributes later
                 return {
                 return {
                     name,
                     name, level: (s.level || '').toString().trim(), desc, descPt: (s.descPt || (s.desc_i18n && s.desc_i18n.pt) || ''), descEn: (s.descEn || (s.desc_i18n && s.desc_i18n.en) || ''), descEs: (s.descEs || (s.desc_i18n && s.desc_i18n.es) || ''), descPl: (s.descPl || (s.desc_i18n && s.desc_i18n.pl) || ''), attrs: '', icon: (s.icon || 'Nada.png'), iconURL: filePathURL(s.icon || 'Nada.png'), video: s.video ? filePathURL(s.video) : '', subs: Array.isArray(s.subs) ? s.subs : null, subattrs: s, flags: Array.isArray(s.flags) ? s.flags : null, back: (s.back === true || s.back === 'true' || s.back === 'yes' || s.back === '1') ? 'true' : null
                    level: (s.level || '').toString().trim(),
                    desc,
                    descPt: (s.descPt || (s.desc_i18n && s.desc_i18n.pt) || ''),
                    descEn: (s.descEn || (s.desc_i18n && s.desc_i18n.en) || ''),
                    descEs: (s.descEs || (s.desc_i18n && s.desc_i18n.es) || ''),
                    descPl: (s.descPl || (s.desc_i18n && s.desc_i18n.pl) || ''),
                    // keep raw obj for attrs
                    attrs: '',
                    icon: (s.icon || 'Nada.png'),
                    iconURL: filePathURL(s.icon || 'Nada.png'),
                    video: s.video ? filePathURL(s.video) : '',
                    subs: Array.isArray(s.subs) ? s.subs : null,
                    subattrs: s,
                    flags: Array.isArray(s.flags) ? s.flags : null,
                    back: (s.back === true || s.back === 'true' || s.back === 'yes' || s.back === '1') ? 'true' : null
                 };
                 };
             });
             });
            // Render and attach subattrs object via data-subattrs
             const fragment = document.createDocumentFragment();
             const fragment = document.createDocumentFragment();
             items.forEach((it, iIdx) => {
             items.forEach((it, iIdx) => {
                 const node = document.createElement('div'); node.className = 'skill-icon'; node.dataset.nested = '1';
                 const node = document.createElement('div');
                node.className = 'skill-icon';
                node.dataset.nested = '1';
                 node.dataset.nome = it.name || '';
                 node.dataset.nome = it.name || '';
                // Guardar parentIndex e subName para lookup no cache de vídeos
                 node.dataset.parentIndex = parentIndexSnapshot;
                 node.dataset.parentIndex = parentIndexSnapshot;
                 node.dataset.subName = it.name || '';
                 node.dataset.subName = it.name || '';
                // Store slug for hash matching
                 const subSlug = slugify(it.name || '');
                 const subSlug = slugify(it.name || '');
                 if (subSlug) node.dataset.slug = subSlug;
                 if (subSlug) node.dataset.slug = subSlug;
Linha 1 006: Linha 847:
                 if (it.flags) node.dataset.flags = JSON.stringify(it.flags);
                 if (it.flags) node.dataset.flags = JSON.stringify(it.flags);
                 if (it.back) node.dataset.back = it.back;
                 if (it.back) node.dataset.back = it.back;
                 const img = document.createElement('img'); img.alt = ''; img.src = it.iconURL; node.appendChild(img);
                 const img = document.createElement('img');
                img.alt = '';
                img.src = it.iconURL;
                node.appendChild(img);
                 fragment.appendChild(node);
                 fragment.appendChild(node);
             });
             });
Linha 1 013: Linha 857:
             iconsBar.appendChild(fragment);
             iconsBar.appendChild(fragment);
             animateIconsBarEntrance();
             animateIconsBarEntrance();
             wireClicksForCurrentBar(); const b2 = ensureBackButton(); if (b2) b2.classList.add('peek');
             wireClicksForCurrentBar();
            const b2 = ensureBackButton();
            if (b2) b2.classList.add('peek');
             if (cacheKey) {
             if (cacheKey) {
                 subBarTemplateCache.set(cacheKey, {
                 subBarTemplateCache.set(cacheKey, {
                     template: templateClone,
                     template: templateClone, lang: langKey
                    lang: langKey
                 });
                 });
             }
             }
         }
         } window.addEventListener('gla:langChanged', () => {
 
        // Reage à troca de idioma (emitida pelo char translator)
        window.addEventListener('gla:langChanged', () => {
             subBarTemplateCache.clear();
             subBarTemplateCache.clear();
             const skillsRoot = document.getElementById('skills');
             const skillsRoot = document.getElementById('skills');
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
            };
             const lang = getLangKey();
             const lang = getLangKey();
            // Atualiza dataset.desc dos ícones da barra atual (skills)
             Array.from(iconsBar.querySelectorAll('.skill-icon')).forEach(icon => {
             Array.from(iconsBar.querySelectorAll('.skill-icon')).forEach(icon => {
                 const pack = {
                 const pack = {
                     pt: icon.dataset.descPt || '',
                     pt: icon.dataset.descPt || '', en: icon.dataset.descEn || '', es: icon.dataset.descEs || '', pl: icon.dataset.descPl || ''
                    en: icon.dataset.descEn || '',
                    es: icon.dataset.descEs || '',
                    pl: icon.dataset.descPl || ''
                 };
                 };
                 const chosen = (pack[lang] || pack.pt || pack.en || pack.es || pack.pl || icon.dataset.desc || '').trim();
                 const chosen = (pack[lang] || pack.pt || pack.en || pack.es || pack.pl || icon.dataset.desc || '').trim();
                 if (chosen) icon.dataset.desc = chosen;
                 if (chosen) icon.dataset.desc = chosen;
             });
             });
            // Atualiza descrições salvas no stack (para futuras barras ao voltar)
             barStack.forEach(frame => {
             barStack.forEach(frame => {
                 (frame.items || []).forEach(it => {
                 (frame.items || []).forEach(it => {
                     const pack = { pt: it.descPt, en: it.descEn, es: it.descEs, pl: it.descPl };
                     const pack = {
                        pt: it.descPt, en: it.descEn, es: it.descEs, pl: it.descPl
                    };
                     const chosen = (pack[lang] || pack.pt || pack.en || pack.es || pack.pl || it.desc || '');
                     const chosen = (pack[lang] || pack.pt || pack.en || pack.es || pack.pl || it.desc || '');
                     it.desc = chosen;
                     it.desc = chosen;
                 });
                 });
             });
             });
            // Atualiza tooltips dos flags na descrição atual
             if (descBox) {
             if (descBox) {
                 applyFlagTooltips(descBox);
                 applyFlagTooltips(descBox);
             }
             } const activeIcon = window.__lastActiveSkillIcon;
            // Re-render active skill to update weapon description in new language
            const activeIcon = window.__lastActiveSkillIcon;
             if (activeIcon && activeIcon.dataset.weapon) {
             if (activeIcon && activeIcon.dataset.weapon) {
                 activateSkill(activeIcon, { openSubs: false });
                 activateSkill(activeIcon, {
                    openSubs: false
                });
             }
             }
         });
         });
 
         wireClicksForCurrentBar();
         // Wire initial (root) bar and add + badges
         const b0 = ensureBackButton();
         wireClicksForCurrentBar(); const b0 = ensureBackButton(); if (b0) { b0.classList.add('peek'); b0.style.alignSelf = 'stretch'; }
        if (b0) {
 
            b0.classList.add('peek');
        // ===========================
            b0.style.alignSelf = 'stretch';
        // Tooltip System
         } (function initSkillTooltip() {
        // ===========================
         (function initSkillTooltip() {
             if (document.querySelector('.skill-tooltip')) return;
             if (document.querySelector('.skill-tooltip')) return;
             const tip = document.createElement('div');
             const tip = document.createElement('div');
Linha 1 071: Linha 908:
             tip.setAttribute('aria-hidden', 'true');
             tip.setAttribute('aria-hidden', 'true');
             document.body.appendChild(tip);
             document.body.appendChild(tip);
 
             const lockUntilRef = {
             const lockUntilRef = { value: 0 };
                value: 0
 
            };
             function measureAndPos(el) {
             function measureAndPos(el) {
                 if (!el || tip.getAttribute('aria-hidden') === 'true') return;
                 if (!el || tip.getAttribute('aria-hidden') === 'true') return;
Linha 1 087: Linha 924:
                 tip.style.left = left + 'px';
                 tip.style.left = left + 'px';
                 tip.style.top = top + 'px';
                 tip.style.top = top + 'px';
             }
             } function show(el, text) {
 
            function show(el, text) {
                 tip.textContent = text || '';
                 tip.textContent = text || '';
                 tip.setAttribute('aria-hidden', 'false');
                 tip.setAttribute('aria-hidden', 'false');
                 measureAndPos(el);
                 measureAndPos(el);
                 tip.style.opacity = '1';
                 tip.style.opacity = '1';
             }
             } function hide() {
 
            function hide() {
                 tip.setAttribute('aria-hidden', 'true');
                 tip.setAttribute('aria-hidden', 'true');
                 tip.style.opacity = '0';
                 tip.style.opacity = '0';
                 tip.style.left = '-9999px';
                 tip.style.left = '-9999px';
                 tip.style.top = '-9999px';
                 tip.style.top = '-9999px';
             }
             } window.__globalSkillTooltip = {
 
                 show, hide, measureAndPos, lockUntil: lockUntilRef
            // Export to global for subskills to use
            window.__globalSkillTooltip = {
                 show,
                hide,
                measureAndPos,
                lockUntil: lockUntilRef
             };
             };
             Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
             Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
                 if (icon.dataset.tipwired) return;
                 if (icon.dataset.tipwired) return;
Linha 1 117: Linha 943:
                 if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
                 if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
                 if (icon.hasAttribute('title')) icon.removeAttribute('title');
                 if (icon.hasAttribute('title')) icon.removeAttribute('title');
                 const img = icon.querySelector('img');
                 const img = icon.querySelector('img');
                 if (img) {
                 if (img) {
Linha 1 125: Linha 950:
                     img.setAttribute('alt', '');
                     img.setAttribute('alt', '');
                     if (img.hasAttribute('title')) img.removeAttribute('title');
                     if (img.hasAttribute('title')) img.removeAttribute('title');
                 }
                 } icon.addEventListener('mouseenter', () => show(icon, label));
 
                 icon.addEventListener('mousemove', () => {
                icon.addEventListener('mouseenter', () => show(icon, label));
                    if (performance.now() >= lockUntilRef.value) measureAndPos(icon);
                 icon.addEventListener('mousemove', () => { if (performance.now() >= lockUntilRef.value) measureAndPos(icon); });
                });
                 icon.addEventListener('click', () => { lockUntilRef.value = performance.now() + 240; measureAndPos(icon); });
                 icon.addEventListener('click', () => {
                    lockUntilRef.value = performance.now() + 240;
                    measureAndPos(icon);
                });
                 icon.addEventListener('mouseleave', hide);
                 icon.addEventListener('mouseleave', hide);
             });
             });
            // Also wire subskill icons present at load (kept in sync when sub-rail opens)
             Array.from(document.querySelectorAll('.subskills-rail .subicon')).forEach(sub => {
             Array.from(document.querySelectorAll('.subskills-rail .subicon')).forEach(sub => {
                 if (sub.dataset.tipwired) return;
                 if (sub.dataset.tipwired) return;
Linha 1 141: Linha 967:
                 if (sub.hasAttribute('title')) sub.removeAttribute('title');
                 if (sub.hasAttribute('title')) sub.removeAttribute('title');
                 sub.addEventListener('mouseenter', () => show(sub, label));
                 sub.addEventListener('mouseenter', () => show(sub, label));
                 sub.addEventListener('mousemove', () => { if (performance.now() >= lockUntilRef.value) measureAndPos(sub); });
                 sub.addEventListener('mousemove', () => {
                 sub.addEventListener('click', () => { lockUntilRef.value = performance.now() + 240; measureAndPos(sub); });
                    if (performance.now() >= lockUntilRef.value) measureAndPos(sub);
                });
                 sub.addEventListener('click', () => {
                    lockUntilRef.value = performance.now() + 240;
                    measureAndPos(sub);
                });
                 sub.addEventListener('mouseleave', hide);
                 sub.addEventListener('mouseleave', hide);
             });
             });
             window.addEventListener('scroll', () => {
             window.addEventListener('scroll', () => {
                 const visible = document.querySelector('.skill-tooltip[aria-hidden="false"]');
                 const visible = document.querySelector('.skill-tooltip[aria-hidden="false"]');
                 if (!visible) return;
                 if (!visible) return;
                 const target = document.querySelector('.subskills-rail .subicon:hover')
                 const target = document.querySelector('.subskills-rail .subicon:hover') || document.querySelector('.subskills-rail .subicon.active') || document.querySelector('.icon-bar .skill-icon:hover') || document.querySelector('.icon-bar .skill-icon.active');
                    || document.querySelector('.subskills-rail .subicon.active')
                    || document.querySelector('.icon-bar .skill-icon:hover')
                    || document.querySelector('.icon-bar .skill-icon.active');
                 measureAndPos(target);
                 measureAndPos(target);
             }, true);
             }, true);
             window.addEventListener('resize', () => {
             window.addEventListener('resize', () => {
                 const target = document.querySelector('.subskills-rail .subicon:hover')
                 const target = document.querySelector('.subskills-rail .subicon:hover') || document.querySelector('.subskills-rail .subicon.active') || document.querySelector('.icon-bar .skill-icon:hover') || document.querySelector('.icon-bar .skill-icon.active');
                    || document.querySelector('.subskills-rail .subicon.active')
                    || document.querySelector('.icon-bar .skill-icon:hover')
                    || document.querySelector('.icon-bar .skill-icon.active');
                 measureAndPos(target);
                 measureAndPos(target);
             });
             });
         })();
         })();
        // ===========================
        // Tab System (com transição suave de altura)
        // ===========================
         (function initTabs() {
         (function initTabs() {
             const tabs = Array.from(document.querySelectorAll('.tab-btn'));
             const tabs = Array.from(document.querySelectorAll('.tab-btn'));
Linha 1 172: Linha 992:
             const contents = Array.from(document.querySelectorAll('.tab-content'));
             const contents = Array.from(document.querySelectorAll('.tab-content'));
             const characterBox = document.querySelector('.character-box');
             const characterBox = document.querySelector('.character-box');
            // Cria o wrapper UMA VEZ no início
             let wrapper = characterBox.querySelector('.tabs-height-wrapper');
             let wrapper = characterBox.querySelector('.tabs-height-wrapper');
             if (!wrapper) {
             if (!wrapper) {
                 wrapper = document.createElement('div');
                 wrapper = document.createElement('div');
                 wrapper.className = 'tabs-height-wrapper';
                 wrapper.className = 'tabs-height-wrapper';
                // Move os conteúdos das abas para dentro do wrapper
                 contents.forEach(c => {
                 contents.forEach(c => {
                     wrapper.appendChild(c);
                     wrapper.appendChild(c);
                 });
                 });
                // Encontra onde inserir o wrapper (após as tabs)
                 const tabsElement = characterBox.querySelector('.character-tabs');
                 const tabsElement = characterBox.querySelector('.character-tabs');
                 if (tabsElement && tabsElement.nextSibling) {
                 if (tabsElement && tabsElement.nextSibling) {
Linha 1 191: Linha 1 005:
                     characterBox.appendChild(wrapper);
                     characterBox.appendChild(wrapper);
                 }
                 }
             }
             } async function smoothHeightTransition(fromTab, toTab) {
 
            // Função para animar a altura suavemente (retorna Promise)
            // NOVA ESTRATÉGIA: aba já está visível mas invisível (opacity:0, visibility:hidden)
            async function smoothHeightTransition(fromTab, toTab) {
                 if (!wrapper) return Promise.resolve();
                 if (!wrapper) return Promise.resolve();
                // Salva o scroll atual
                 const scrollY = window.scrollY;
                 const scrollY = window.scrollY;
                // Mede a altura ATUAL
                 const currentHeight = wrapper.getBoundingClientRect().height;
                 const currentHeight = wrapper.getBoundingClientRect().height;
                // A aba toTab JÁ está display:block mas invisível
                // Aguarda ela renderizar COMPLETAMENTE na posição real
                 await new Promise((resolve) => {
                 await new Promise((resolve) => {
                     const videoContainers = toTab.querySelectorAll('.video-container');
                     const videoContainers = toTab.querySelectorAll('.video-container');
                     const contentCard = toTab.querySelector('.content-card');
                     const contentCard = toTab.querySelector('.content-card');
                     if (videoContainers.length === 0) {
                     if (videoContainers.length === 0) {
                        // Sem vídeos, aguarda 3 frames
                         requestAnimationFrame(() => {
                         requestAnimationFrame(() => {
                             requestAnimationFrame(() => {
                             requestAnimationFrame(() => {
Linha 1 218: Linha 1 019:
                         });
                         });
                         return;
                         return;
                     }
                     } let lastHeight = 0;
 
                    // COM vídeos: aguarda até que TUDO esteja renderizado
                    // Faz polling da altura até estabilizar
                    let lastHeight = 0;
                     let stableCount = 0;
                     let stableCount = 0;
                     const checksNeeded = 3; // Altura precisa ficar estável por 3 checks
                     const checksNeeded = 3;
                     let totalChecks = 0;
                     let totalChecks = 0;
                     const maxChecks = 15; // Máximo 15 checks (750ms)
                     const maxChecks = 15;
 
                     function checkStability() {
                     function checkStability() {
                         totalChecks++;
                         totalChecks++;
                        // Mede altura atual da aba
                         const currentTabHeight = toTab.scrollHeight;
                         const currentTabHeight = toTab.scrollHeight;
                        // Verifica se estabilizou
                         if (Math.abs(currentTabHeight - lastHeight) < 5) {
                         if (Math.abs(currentTabHeight - lastHeight) < 5) {
                             stableCount++;
                             stableCount++;
                         } else {
                         } else {
                             stableCount = 0; // Resetar se mudou
                             stableCount = 0;
                         }
                         } lastHeight = currentTabHeight;
 
                        lastHeight = currentTabHeight;
 
                        // Se estável por N checks ou atingiu máximo, resolve
                         if (stableCount >= checksNeeded || totalChecks >= maxChecks) {
                         if (stableCount >= checksNeeded || totalChecks >= maxChecks) {
                             resolve();
                             resolve();
                         } else {
                         } else {
                            // Continua checando a cada 50ms
                             setTimeout(checkStability, 50);
                             setTimeout(checkStability, 50);
                         }
                         }
                     }
                     } setTimeout(checkStability, 50);
 
                    // Inicia checagem após um pequeno delay
                    setTimeout(checkStability, 50);
                 });
                 });
                // AGORA mede a altura REAL (após tudo renderizado)
                 const nextHeight = toTab.getBoundingClientRect().height;
                 const nextHeight = toTab.getBoundingClientRect().height;
                 const finalHeight = Math.max(nextHeight, 100);
                 const finalHeight = Math.max(nextHeight, 100);
                // Se alturas são similares (< 30px diferença), não anima
                 if (Math.abs(finalHeight - currentHeight) < 30) {
                 if (Math.abs(finalHeight - currentHeight) < 30) {
                     wrapper.style.height = '';
                     wrapper.style.height = '';
                     return Promise.resolve();
                     return Promise.resolve();
                 }
                 } wrapper.style.overflow = 'hidden';
 
                // Define altura inicial fixa
                wrapper.style.overflow = 'hidden';
                 wrapper.style.height = currentHeight + 'px';
                 wrapper.style.height = currentHeight + 'px';
                // Força reflow
                 wrapper.offsetHeight;
                 wrapper.offsetHeight;
                // Define transição
                 wrapper.style.transition = 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                 wrapper.style.transition = 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
                // Anima para a altura FINAL (já medida corretamente)
                 requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     wrapper.style.height = finalHeight + 'px';
                     wrapper.style.height = finalHeight + 'px';
                    // Não altere a posição do scroll do usuário
                 });
                 });
                // Limpa após transição
                 return new Promise(resolve => {
                 return new Promise(resolve => {
                     setTimeout(() => {
                     setTimeout(() => {
Linha 1 291: Linha 1 059:
                     }, 320);
                     }, 320);
                 });
                 });
             }
             } tabs.forEach(btn => {
 
            tabs.forEach(btn => {
                 if (btn.dataset.wiredTab) return;
                 if (btn.dataset.wiredTab) return;
                 btn.dataset.wiredTab = '1';
                 btn.dataset.wiredTab = '1';
Linha 1 300: Linha 1 066:
                     const currentActive = contents.find(c => c.classList.contains('active'));
                     const currentActive = contents.find(c => c.classList.contains('active'));
                     const nextActive = contents.find(c => c.id === target);
                     const nextActive = contents.find(c => c.id === target);
 
                     if (currentActive === nextActive) return;
                     if (currentActive === nextActive) return; // Já está na aba
 
                    // Previne scroll durante a transição
                     document.body.classList.add('transitioning-tabs');
                     document.body.classList.add('transitioning-tabs');
                    // Desativa a aba atual (fade out)
                     if (currentActive) {
                     if (currentActive) {
                         currentActive.style.opacity = '0';
                         currentActive.style.opacity = '0';
                         currentActive.style.transform = 'translateY(-8px)';
                         currentActive.style.transform = 'translateY(-8px)';
                     }
                     } setTimeout(async () => {
 
                    // Delay para fade out completar
                    setTimeout(async () => {
                        // Remove display de TODAS as abas inativas
                         contents.forEach(c => {
                         contents.forEach(c => {
                             if (c !== nextActive) {
                             if (c !== nextActive) {
Linha 1 321: Linha 1 078:
                             }
                             }
                         });
                         });
                        // Ativa os botões
                         tabs.forEach(b => b.classList.toggle('active', b === btn));
                         tabs.forEach(b => b.classList.toggle('active', b === btn));
                        // MOSTRA a nova aba INVISÍVEL na posição real
                         if (nextActive) {
                         if (nextActive) {
                             nextActive.classList.add('active');
                             nextActive.classList.add('active');
Linha 1 331: Linha 1 084:
                             nextActive.style.opacity = '0';
                             nextActive.style.opacity = '0';
                             nextActive.style.visibility = 'hidden';
                             nextActive.style.visibility = 'hidden';
                            // Força renderização completa ANTES de medir
                             nextActive.offsetHeight;
                             nextActive.offsetHeight;
                            // Pré-carrega/ativa conteúdo padrão da aba (ex.: vídeo) ANTES da medição
                            // Assim a altura final já considera o player visível
                             try {
                             try {
                                 if (target === 'skills') {
                                 if (target === 'skills') {
Linha 1 345: Linha 1 093:
                                         const toClick = activeIcon || firstIcon;
                                         const toClick = activeIcon || firstIcon;
                                         if (toClick) {
                                         if (toClick) {
                                            // Evita autoplay durante preparação
                                             const had = document.body.dataset.suppressSkillPlay;
                                             const had = document.body.dataset.suppressSkillPlay;
                                             document.body.dataset.suppressSkillPlay = '1';
                                             document.body.dataset.suppressSkillPlay = '1';
                                             toClick.click();
                                             toClick.click();
                                            // Mantém a flag até o fim da transição (limpamos mais abaixo)
                                             if (had) document.body.dataset.suppressSkillPlay = had;
                                             if (had) document.body.dataset.suppressSkillPlay = had;
                                         }
                                         }
                                     }
                                     }
                                 }
                                 }
                             } catch (e) { /* no-op */ }
                             } catch (e) {
                         }
                            }
 
                         } if (currentActive && nextActive) {
                        // AGORA anima altura (com a aba já renderizada na posição correta)
                        if (currentActive && nextActive) {
                             await smoothHeightTransition(currentActive, nextActive);
                             await smoothHeightTransition(currentActive, nextActive);
                         }
                         } if (nextActive) {
 
                        // Após altura estar correta, MOSTRA a nova aba
                        if (nextActive) {
                             nextActive.style.visibility = '';
                             nextActive.style.visibility = '';
                             nextActive.style.transform = 'translateY(12px)';
                             nextActive.style.transform = 'translateY(12px)';
                            // Anima entrada
                             requestAnimationFrame(() => {
                             requestAnimationFrame(() => {
                                 nextActive.style.opacity = '1';
                                 nextActive.style.opacity = '1';
                                 nextActive.style.transform = 'translateY(0)';
                                 nextActive.style.transform = 'translateY(0)';
                                // Limpa estilos inline e classe de transição
                                 setTimeout(() => {
                                 setTimeout(() => {
                                     nextActive.style.opacity = '';
                                     nextActive.style.opacity = '';
                                     nextActive.style.transform = '';
                                     nextActive.style.transform = '';
                                     document.body.classList.remove('transitioning-tabs');
                                     document.body.classList.remove('transitioning-tabs');
                                    // Libera flag de autoplay suprimido (se aplicada acima)
                                     try {
                                     try { delete document.body.dataset.suppressSkillPlay; } catch { }
                                        delete document.body.dataset.suppressSkillPlay;
                                    } catch {
                                    }
                                 }, 300);
                                 }, 300);
                             });
                             });
                         }
                         }
                     }, 120);
                     }, 120);
                    // Executa ações após a transição completa
                     setTimeout(() => {
                     setTimeout(() => {
                         syncDescHeight();
                         syncDescHeight();
                         if (target === 'skins') {
                         if (target === 'skins') {
                            // Pause all cached main skill videos
                             videosCache.forEach(v => {
                             videosCache.forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
                                try {
                            // Pause all nested/subskill videos
                                    v.pause();
                                } catch (e) {
                                } v.style.display = 'none';
                            });
                             if (videoBox) {
                             if (videoBox) {
                                 videoBox.querySelectorAll('video.skill-video').forEach(v => {
                                 videoBox.querySelectorAll('video.skill-video').forEach(v => {
                                     try { v.pause(); } catch (e) { }
                                     try {
                                     v.style.display = 'none';
                                        v.pause();
                                    } catch (e) {
                                     } v.style.display = 'none';
                                 });
                                 });
                            } if (window.__subskills) window.__subskills.hideAll?.(videoBox);
                            if (videoBox && placeholder) {
                                placeholder.style.display = 'none';
                                placeholder.classList.add('fade-out');
                             }
                             }
                            // Hide subskill videos via API
                            if (window.__subskills) window.__subskills.hideAll?.(videoBox);
                            if (videoBox && placeholder) { placeholder.style.display = 'none'; placeholder.classList.add('fade-out'); }
                         } else {
                         } else {
                             const activeIcon = document.querySelector('.icon-bar .skill-icon.active');
                             const activeIcon = document.querySelector('.icon-bar .skill-icon.active');
                             if (activeIcon) activeIcon.click();
                             if (activeIcon) activeIcon.click();
                         }
                         }
                     }, 450); // Após transição completar (120ms + 300ms + buffer)
                     }, 450);
                 });
                 });
             });
             });
         })();
         })();
        // ===========================
        // Skins Navigation
        // ===========================
         (function initSkinsArrows() {
         (function initSkinsArrows() {
             const carousel = $('.skins-carousel');
             const carousel = $('.skins-carousel');
Linha 1 430: Linha 1 169:
                 wrapper.classList.toggle('has-right', hasRight);
                 wrapper.classList.toggle('has-right', hasRight);
                 carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : '';
                 carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : '';
             }
             } function go(dir) {
            function go(dir) {
                 const max = carousel.scrollWidth - carousel.clientWidth;
                 const max = carousel.scrollWidth - carousel.clientWidth;
                 const next = dir < 0
                 const next = dir < 0 ? Math.max(0, carousel.scrollLeft - scrollAmt()) : Math.min(max, carousel.scrollLeft + scrollAmt());
                    ? Math.max(0, carousel.scrollLeft - scrollAmt())
                 carousel.scrollTo({
                    : Math.min(max, carousel.scrollLeft + scrollAmt());
                    left: next, behavior: 'smooth'
                 carousel.scrollTo({ left: next, behavior: 'smooth' });
                });
             }
             } left.addEventListener('click', () => go(-1));
            left.addEventListener('click', () => go(-1));
             right.addEventListener('click', () => go(1));
             right.addEventListener('click', () => go(1));
             carousel.addEventListener('scroll', setState);
             carousel.addEventListener('scroll', setState);
Linha 1 444: Linha 1 181:
             setState();
             setState();
         })();
         })();
        // ===========================
        // Utility Functions
        // ===========================
         function renderAttributes(str) {
         function renderAttributes(str) {
             const skillsRoot = document.getElementById('skills');
             const skillsRoot = document.getElementById('skills');
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
            };
             const langRaw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
             const langRaw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
             const langKey = i18nMap[langRaw] ? langRaw : (i18nMap[langRaw.split('-')[0]] ? langRaw.split('-')[0] : 'pt');
             const langKey = i18nMap[langRaw] ? langRaw : (i18nMap[langRaw.split('-')[0]] ? langRaw.split('-')[0] : 'pt');
             const L = i18nMap[langKey] || i18nMap.pt || {
             const L = i18nMap[langKey] || i18nMap.pt || {
                 cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia',
                 cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
                power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
             };
             };
             const vals = (str || '').split(',').map(v => v.trim());
             const vals = (str || '').split(',').map(v => v.trim());
             const pve = parseInt(vals[0], 10);
             const pve = parseInt(vals[0], 10);
Linha 1 463: Linha 1 195:
             const ene = parseInt(vals[2], 10);
             const ene = parseInt(vals[2], 10);
             const cd = parseInt(vals[3], 10);
             const cd = parseInt(vals[3], 10);
             const rows = [];
             const rows = [];
             if (!isNaN(cd)) rows.push([L.cooldown, cd]);
             if (!isNaN(cd)) rows.push([L.cooldown, cd]);
Linha 1 469: Linha 1 200:
                 const label = ene > 0 ? L.energy_gain : L.energy_cost;
                 const label = ene > 0 ? L.energy_gain : L.energy_cost;
                 rows.push([label, Math.abs(ene)]);
                 rows.push([label, Math.abs(ene)]);
             }
             } if (!isNaN(pve)) rows.push([L.power, pve]);
            if (!isNaN(pve)) rows.push([L.power, pve]);
             if (!isNaN(pvp)) rows.push([L.power_pvp, pvp]);
             if (!isNaN(pvp)) rows.push([L.power_pvp, pvp]);
             if (!rows.length) return '';
             if (!rows.length) return '';
             const html = rows.map(([label, value]) => `
             const html = rows.map(([label, value]) => `<div class="attr-row"><span class="attr-label">${label}</span><span class="attr-value">${value}</span></div>`).join('');
    <div class="attr-row">
      <span class="attr-label">${label}</span>
      <span class="attr-value">${value}</span>
    </div>`).join('');
             return `<div class="attr-list">${html}</div>`;
             return `<div class="attr-list">${html}</div>`;
         }
         } function syncDescHeight() {
 
         } window.addEventListener('resize', syncDescHeight);
        function syncDescHeight() {
            // no-op on purpose
         }
 
        // ===========================
        // Event Listeners & Initialization
        // ===========================
        window.addEventListener('resize', syncDescHeight);
         if (videoBox) new ResizeObserver(syncDescHeight).observe(videoBox);
         if (videoBox) new ResizeObserver(syncDescHeight).observe(videoBox);
         iconItems.forEach(el => {
         iconItems.forEach(el => {
             const wired = !!el.dataset._sync_wired;
             const wired = !!el.dataset._sync_wired;
Linha 1 500: Linha 1 216:
             });
             });
         });
         });
         if (iconsBar) addOnce(iconsBar, 'wheel', (e) => {
         if (iconsBar) addOnce(iconsBar, 'wheel', (e) => {
             if (e.deltaY) {
             if (e.deltaY) {
Linha 1 507: Linha 1 222:
             }
             }
         });
         });
        // Initialize first skill (only if no hash in URL)
        // Wire clicks first so activateSkill is available
         wireClicksForCurrentBar();
         wireClicksForCurrentBar();
         if (iconItems.length) {
         if (iconItems.length) {
             const first = iconItems[0];
             const first = iconItems[0];
             if (first) {
             if (first) {
                 activateSkill(first, { openSubs: false });
                 activateSkill(first, {
                    openSubs: false
                });
             }
             }
         }
         } setTimeout(() => {
 
        // Debug logging
        setTimeout(() => {
             Array.from(document.querySelectorAll('.skill-icon')).forEach(el => {
             Array.from(document.querySelectorAll('.skill-icon')).forEach(el => {
                 console.log('icon', el.dataset.index, 'data-video=', el.dataset.video);
                 console.log('icon', el.dataset.index, 'data-video=', el.dataset.video);

Edição das 10h51min de 28 de novembro de 2025

<script>

   (function () {
       const $ = (s, root = document) => root.querySelector(s);
       const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
       const ensureRemoved = sel => {
           Array.from(document.querySelectorAll(sel)).forEach(n => n.remove());
       };
       const onceFlag = (el, key) => {
           if (!el) return false;
           if (el.dataset[key]) return false;
           el.dataset[key] = '1';
           return true;
       };
       const addOnce = (el, ev, fn) => {
           if (!el) return;
           const attr = `data-wired-${ev}`;
           if (el.hasAttribute(attr)) return;
           el.addEventListener(ev, fn);
           el.setAttribute(attr, '1');
       };
       const FLAG_ICON_FILES = {
           aggro: 'Enemyaggro-icon.png', bridge: 'Bridgemaker-icon.png', wall: 'Destroywall-icon.png', quickcast: 'Quickcast-icon.png'
       };
       const subBarTemplateCache = window.__skillSubBarTemplateCache || (window.__skillSubBarTemplateCache = new Map());
       const imagePreloadCache = window.__skillImagePreloadCache || (window.__skillImagePreloadCache = new Map());
       const videoPreloadCache = window.__skillVideoPreloadCache || (window.__skillVideoPreloadCache = new Set());
       const flagRowCache = window.__skillFlagRowCache || (window.__skillFlagRowCache = new Map());
       const flagIconURLCache = window.__skillFlagIconURLCache || (window.__skillFlagIconURLCache = new Map());
       function filePathURL(fileName) {
           const f = encodeURIComponent((fileName || 'Nada.png').replace(/^Arquivo:|^File:/, ));
           const base = (window.mw && mw.util && typeof mw.util.wikiScript === 'function') ? mw.util.wikiScript() : (window.mw && window.mw.config ? (mw.config.get('wgScript') || '/index.php') : '/index.php');
           return `${base}?title=Especial:FilePath/${f}`;
       } function slugify(s) {
           if (!s) return ;
           return String(s).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, ).replace(/[^\w\s-]/g, ).replace(/[\s:/\-]+/g, '-').replace(/^-+|-+$/g, ).replace(/-+/g, '-');
       } window.__skillSlugify = slugify;
       function getLangKey() {
           const skillsRoot = document.getElementById('skills');
           const raw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
           return raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
       } function chooseDescFrom(obj) {
           const lang = getLangKey();
           const pack = obj.desc_i18n || {
               pt: obj.descPt, en: obj.descEn, es: obj.descEs, pl: obj.descPl
           };
           return (pack && (pack[lang] || pack.pt || pack.en || pack.es || pack.pl)) || (obj.desc || );
       } function renderSubAttributesFromObj(s, L) {

const chip = (label, val) => (val ? `

${label}${val}

` : );

           const pve = (s.powerpve || ).toString().trim();
           const pvp = (s.powerpvp || ).toString().trim();
           const en = (s.energy || ).toString().trim();
           const cd = (s.cooldown || ).toString().trim();
           const rows = [cd ? chip(L.cooldown, cd) : , en ? chip((en.startsWith('-') ? L.energy_cost : L.energy_gain), en.startsWith('-') ? en.replace(/^-/, ) : en.replace(/^\+?/, )) : , pve ? chip(L.power, pve) : , pvp ? chip(L.power_pvp, pvp) : ,].filter(Boolean);

return rows.length ? `

${rows.join()}

` : ;

       } function getFlagIconURL(key) {
           if (!FLAG_ICON_FILES[key]) return ;
           if (!flagIconURLCache.has(key)) {
               flagIconURLCache.set(key, filePathURL(FLAG_ICON_FILES[key]));
           } return flagIconURLCache.get(key);
       } function renderFlagsRow(flags) {
           const arr = (flags || []).filter(Boolean);
           if (!arr.length) return ;
           const cacheKey = arr.join('|');
           if (flagRowCache.has(cacheKey)) {
               return flagRowCache.get(cacheKey);
           } const items = arr.map(k => {
               const url = getFlagIconURL(k);
               return url ? `<img class="skill-flag" data-flag="${k}" alt="" src="${url}">` : ;
           }).join();

const html = items ? `

${items}

` : ;

           if (html) flagRowCache.set(cacheKey, html);
           return html;
       } function applyFlagTooltips(container) {
           const skillsRoot = document.getElementById('skills');
           if (!skillsRoot) return;
           let pack = {
           };
           try {
               pack = JSON.parse(skillsRoot.dataset.i18nFlags || '{}');
           } catch (e) {
           } const lang = getLangKey();
           const dict = pack[lang] || pack.pt || {
           };
           const flags = container.querySelectorAll('.skill-flags .skill-flag[data-flag]');
           const tooltip = window.__globalSkillTooltip;
           if (!tooltip) return;
           flags.forEach(el => {
               const key = el.getAttribute('data-flag');
               const tip = (dict && dict[key]) || ;
               if (!tip) return;
               if (el.dataset.flagTipWired) return;
               el.dataset.flagTipWired = '1';
               el.setAttribute('aria-label', tip);
               if (el.hasAttribute('title')) el.removeAttribute('title');
               el.addEventListener('mouseenter', () => {
                   const tipEl = document.querySelector('.skill-tooltip');
                   if (tipEl) tipEl.classList.add('flag-tooltip');
                   tooltip.show(el, tip);
               });
               el.addEventListener('mousemove', () => {
                   if (performance.now() >= tooltip.lockUntil.value) {
                       tooltip.measureAndPos(el);
                   }
               });
               el.addEventListener('click', () => {
                   tooltip.lockUntil.value = performance.now() + 240;
                   tooltip.measureAndPos(el);
               });
               el.addEventListener('mouseleave', () => {
                   const tipEl = document.querySelector('.skill-tooltip');
                   if (tipEl) tipEl.classList.remove('flag-tooltip');
                   tooltip.hide();
               });
           });
       } function normalizeFileURL(raw, fallback = ) {
           if (!raw) return fallback;
           const val = String(raw).trim();
           if (!val) return fallback;
           if (/^(https?:)?\/\//i.test(val) || val.startsWith('data:') || val.includes('Especial:FilePath/')) {
               return val;
           } return filePathURL(val);
       } function collectAssetsFromSubs(subs, iconsSet, videosSet, flagsSet) {
           if (!Array.isArray(subs)) return;
           subs.forEach(sub => {
               const iconURL = normalizeFileURL(sub.icon || 'Nada.png', filePathURL('Nada.png'));
               if (iconURL) iconsSet.add(iconURL);
               if (sub.video) {
                   const videoURL = normalizeFileURL(sub.video);
                   if (videoURL) videosSet.add(videoURL);
               } if (Array.isArray(sub.flags)) {
                   sub.flags.forEach(flagKey => {
                       const url = getFlagIconURL(flagKey);
                       if (url) flagsSet.add(url);
                   });
               } if (Array.isArray(sub.subs)) {
                   collectAssetsFromSubs(sub.subs, iconsSet, videosSet, flagsSet);
               }
           });
       } function buildAssetManifest() {
           if (window.__skillAssetManifest && window.__skillAssetManifest.ready) {
               return window.__skillAssetManifest;
           } const iconsSet = new Set();
           const videosSet = new Set();
           const flagsSet = new Set();
           iconItems.forEach(el => {
               const img = el.querySelector('img');
               if (img && img.src) {
                   iconsSet.add(img.src);
               } else if (el.dataset.icon) {
                   iconsSet.add(normalizeFileURL(el.dataset.icon));
               } const videoRaw = (el.dataset.video || ).trim();
               if (videoRaw) {
                   videosSet.add(normalizeFileURL(videoRaw));
               } if (el.dataset.flags) {
                   try {
                       const parsedFlags = JSON.parse(el.dataset.flags);
                       (parsedFlags || []).forEach(flagKey => {
                           const url = getFlagIconURL(flagKey);
                           if (url) flagsSet.add(url);
                       });
                   } catch (e) {
                   }
               } if (el.dataset.subs) {
                   try {
                       const subs = JSON.parse(el.dataset.subs);
                       collectAssetsFromSubs(subs, iconsSet, videosSet, flagsSet);
                   } catch (e) {
                   }
               }
           });
           Object.keys(FLAG_ICON_FILES).forEach(flagKey => {
               const url = getFlagIconURL(flagKey);
               if (url) flagsSet.add(url);
           });
           const manifest = {
               icons: iconsSet, videos: videosSet, flags: flagsSet, ready: true
           };
           window.__skillAssetManifest = manifest;
           return manifest;
       } function preloadImagesFromSet(set) {
           if (!set || !set.size) return;
           set.forEach(url => {
               if (!url || imagePreloadCache.has(url)) return;
               const img = new Image();
               img.decoding = 'async';
               img.loading = 'eager';
               img.referrerPolicy = 'same-origin';
               img.src = url;
               imagePreloadCache.set(url, img);
           });
       } function preloadVideosFromSet(set) {
           if (!set || !set.size) return;
           const head = document.head || document.getElementsByTagName('head')[0];
           set.forEach(url => {
               if (!url || videoPreloadCache.has(url)) return;
               const link = document.createElement('link');
               link.rel = 'preload';
               link.as = 'video';
               link.href = url;
               link.crossOrigin = 'anonymous';
               head.appendChild(link);
               videoPreloadCache.add(url);
           });
       } const subskillVideosCache = new Map();
       window.__subskillVideosCache = subskillVideosCache;
       let assetManifest = null;
       const skillsTab = $('#skills');
       const skinsTab = $('#skins');
       ensureRemoved('.top-rail');
       ensureRemoved('.content-card');
       ensureRemoved('.video-placeholder');
       Array.from(document.querySelectorAll('.card-skins-title, .card-skins .card-skins-title, .cardskins-title, .rail-title')).forEach(t => {
           if ((t.textContent || ).trim().toLowerCase().includes('skins')) {
               t.remove();
           }
       });
       if (skillsTab) {
           const iconBar = skillsTab.querySelector('.icon-bar');
           if (iconBar) {
               const rail = document.createElement('div');
               rail.className = 'top-rail skills';
               rail.appendChild(iconBar);
               skillsTab.prepend(rail);
           } const details = skillsTab.querySelector('.skills-details');
           const videoContainer = skillsTab.querySelector('.video-container');
           const card = document.createElement('div');
           card.className = 'content-card skills-grid';
           if (details) card.appendChild(details);
           if (videoContainer) card.appendChild(videoContainer);
           skillsTab.appendChild(card);
       } if (skinsTab) {
           const wrapper = skinsTab.querySelector('.skins-carousel-wrapper');
           const rail = document.createElement('div');
           rail.className = 'top-rail skins';
           const title = document.createElement('div');
           title.className = 'rail-title';
           title.textContent = 'Skins & Spotlights';
           rail.appendChild(title);
           if (wrapper) {
               const card = document.createElement('div');
               card.className = 'content-card';
               card.appendChild(wrapper);
               skinsTab.prepend(rail);
               skinsTab.appendChild(card);
           } else {
               skinsTab.prepend(rail);
           }
       } const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;
       const iconItems = iconsBar ? Array.from(iconsBar.querySelectorAll('.skill-icon')) : [];
       if (!assetManifest) {
           assetManifest = buildAssetManifest();
           preloadImagesFromSet(assetManifest.icons);
           preloadImagesFromSet(assetManifest.flags);
           preloadVideosFromSet(assetManifest.videos);
       } const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;
       const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;
       const videosCache = new Map();
       const nestedVideoElByIcon = new WeakMap();
       const barStack = [];
       window.__barStack = barStack;
       let initialBarSnapshot = null;
       let totalVideos = 0, loadedVideos = 0, autoplay = false;
       window.__lastActiveSkillIcon = null;
       let userHasInteracted = false;
       let globalWeaponEnabled = false;
       window.__setGlobalWeaponEnabled = (enabled) => {
           globalWeaponEnabled = enabled;
       };
       (function injectWeaponStyles() {
           if (document.getElementById('weapon-toggle-styles')) return;
           const style = document.createElement('style');
           style.id = 'weapon-toggle-styles';
           style.textContent = `
               /* Badge de arma no canto inferior direito */
               .skill-icon.weapon-equipped::after {
                   content: ;
                   position: absolute;
                   bottom: 4px;
                   right: 4px;
                   width: 14px;
                   height: 14px;
                   background: var(--weapon-badge-url) center/contain no-repeat;
                   filter: drop-shadow(0 0 4px rgba(74, 158, 255, 0.7));
                   pointer-events: none;
                   z-index: 5;
                   border-radius: 2px;
               }
               /* Desativar círculo amarelo de ativo quando tem arma */
               .skill-icon.weapon-equipped::before {
                   display: none !important;
               }
               /* Estilo limpo com outline azul ao invés de shadow amarelo serrilhado */
               .skill-icon.weapon-equipped {
                   position: relative;
                   outline: 2px solid rgba(74, 158, 255, 0.6);
                   outline-offset: -2px;
               }
               /* Quando ativo E com arma, usar efeito azul */
               .skill-icon.weapon-equipped.active {
                   outline-color: rgba(74, 158, 255, 0.9);
                   box-shadow: 0 0 10px rgba(74, 158, 255, 0.4);
               }
           `.replace(/\s+/g, ' ').trim();
           document.head.appendChild(style);
       })();
       function applyWeaponBadge(el, weaponData, equipped) {
           if (equipped && weaponData) {
               el.classList.add('weapon-equipped');
               el.style.setProperty('--weapon-badge-url', `url('${filePathURL(weaponData.icon || 'Nada.png')}')`);
           } else {
               el.classList.remove('weapon-equipped');
               el.style.removeProperty('--weapon-badge-url');
           }
       } function getWeaponKey(el) {
           return (el.dataset.index || ) + ':' + (el.dataset.nome || el.dataset.name || );
       } function createVideoElement(videoURL, extraAttrs = {
       }) {
           const v = document.createElement('video');
           v.className = 'skill-video';
           v.setAttribute('controls', );
           v.setAttribute('preload', 'metadata');
           v.setAttribute('playsinline', );
           v.style.display = 'none';
           v.style.width = '100%';
           v.style.height = 'auto';
           v.style.aspectRatio = '16/9';
           v.style.objectFit = 'cover';
           Object.keys(extraAttrs).forEach(k => {
               v.dataset[k] = extraAttrs[k];
           });
           const src = document.createElement('source');
           src.src = videoURL;
           src.type = 'video/webm';
           v.appendChild(src);
           return v;
       } function precreateSubskillVideos() {
           if (!videoBox) return;
           iconItems.forEach(parentIcon => {
               const subsRaw = parentIcon.dataset.subs || parentIcon.getAttribute('data-subs');
               if (!subsRaw) return;
               try {
                   const subs = JSON.parse(subsRaw);
                   if (!Array.isArray(subs)) return;
                   const parentIdx = parentIcon.dataset.index || ;
                   subs.forEach(s => {
                       if (!s.video) return;
                       const subName = (s.name || s.n || ).trim();
                       const key = `sub:${parentIdx}:${subName}`;
                       if (subskillVideosCache.has(key)) return;
                       const videoURL = normalizeFileURL(s.video);
                       if (!videoURL) return;
                       const v = createVideoElement(videoURL, {
                           sub: '1', parentIndex: parentIdx, subName: subName
                       });
                       videoBox.appendChild(v);
                       subskillVideosCache.set(key, v);
                   });
               } catch (e) {
               }
           });
       } setTimeout(precreateSubskillVideos, 500);
       if (iconItems.length && videoBox) {
           iconItems.forEach(el => {
               const src = (el.dataset.video || ).trim();
               const idx = el.dataset.index || ;
               if (!src || videosCache.has(idx)) return;
               totalVideos++;
               const v = createVideoElement(src, {
                   index: idx
               });
               v.style.maxWidth = '100%';
               v.addEventListener('canplaythrough', () => {
                   loadedVideos++;
                   if (!userHasInteracted && loadedVideos === 1) {
                       try {
                           v.pause();
                           v.currentTime = 0;
                       } catch (e) {
                       }
                   } if (loadedVideos === totalVideos) autoplay = true;
               }, {
                   once: true
               });
               v.addEventListener('error', () => {
                   loadedVideos++;
                   if (loadedVideos === totalVideos) autoplay = true;
               }, {
                   once: true
               });
               videoBox.appendChild(v);
               videosCache.set(idx, v);
           });
       } function wireTooltipsForNewIcons() {
           const tip = document.querySelector('.skill-tooltip');
           if (!tip) return;
           let lockUntil2 = 0;
           Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
               if (icon.dataset.tipwired) return;
               icon.dataset.tipwired = '1';
               const label = icon.dataset.nome || icon.dataset.name || icon.title || ;
               if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
               if (icon.hasAttribute('title')) icon.removeAttribute('title');
               const img = icon.querySelector('img');
               if (img) {
                   const imgAlt = img.getAttribute('alt') || ;
                   const imgTitle = img.getAttribute('title') || ;
                   if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle);
                   img.setAttribute('alt', );
                   if (img.hasAttribute('title')) img.removeAttribute('title');
               } const measureAndPos = (el) => {
                   if (!el || tip.getAttribute('aria-hidden') === 'true') return;
                   tip.style.left = '0px';
                   tip.style.top = '0px';
                   const rect = el.getBoundingClientRect();
                   const tr = tip.getBoundingClientRect();
                   let left = Math.round(rect.left + (rect.width - tr.width) / 2);
                   left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
                   const coarse = (window.matchMedia && matchMedia('(pointer: coarse)').matches) || (window.innerWidth <= 600);
                   let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
                   if (top < 8) top = Math.round(rect.bottom + 10);
                   tip.style.left = left + 'px';
                   tip.style.top = top + 'px';
               };
               const show = (el, text) => {
                   tip.textContent = text || ;
                   tip.setAttribute('aria-hidden', 'false');
                   measureAndPos(el);
                   tip.style.opacity = '1';
               };
               const hide = () => {
                   tip.setAttribute('aria-hidden', 'true');
                   tip.style.opacity = '0';
                   tip.style.left = '-9999px';
                   tip.style.top = '-9999px';
               };
               icon.addEventListener('mouseenter', () => show(icon, (icon.dataset.nome || icon.dataset.name || )));
               icon.addEventListener('mousemove', () => {
                   if (performance.now() >= lockUntil2) measureAndPos(icon);
               });
               icon.addEventListener('click', () => {
                   lockUntil2 = performance.now() + 240;
                   measureAndPos(icon);
               });
               icon.addEventListener('mouseleave', hide);
           });
       } function showVideoForIcon(el) {
           userHasInteracted = true;
           if (videoBox) {
               Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => {
                   try {
                       v.pause();
                   } catch (e) {
                   } v.style.display = 'none';
               });
           } if (window.__subskills) window.__subskills.hideAll?.(videoBox);
           const hasIdx = !!el.dataset.index;
           const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== );
           if (!videoBox || !hasVideo) {
               if (videoBox) {
                   videoBox.style.display = 'none';
               } return;
           } if (hasIdx && videosCache.has(el.dataset.index)) {
               const v = videosCache.get(el.dataset.index);
               videoBox.style.display = 'block';
               v.style.display = 'block';
               try {
                   v.currentTime = 0;
               } catch (e) {
               } const suppress = document.body.dataset.suppressSkillPlay === '1';
               if (!suppress) {
                   v.play().catch(() => {
                   });
               } else {
                   try {
                       v.pause();
                   } catch (e) {
                   }
               } return;
           } const subName = el.dataset.subName || el.dataset.nome || el.dataset.name || ;
           const parentIdx = el.dataset.parentIndex || ;
           if (subName && parentIdx) {
               const subKey = `sub:${parentIdx}:${subName}`;
               if (subskillVideosCache.has(subKey)) {
                   const v = subskillVideosCache.get(subKey);
                   videoBox.style.display = 'block';
                   v.style.display = 'block';
                   try {
                       v.currentTime = 0;
                   } catch (e) {
                   } const suppress = document.body.dataset.suppressSkillPlay === '1';
                   if (!suppress) {
                       v.play().catch(() => {
                       });
                   } else {
                       try {
                           v.pause();
                       } catch (e) {
                       }
                   } return;
               }
           } let v = nestedVideoElByIcon.get(el);
           if (!v) {
               v = createVideoElement(el.dataset.video, {
               });
               videoBox.appendChild(v);
               nestedVideoElByIcon.set(el, v);
           } videoBox.style.display = 'block';
           v.style.display = 'block';
           try {
               v.currentTime = 0;
           } catch (e) {
           } const suppress = document.body.dataset.suppressSkillPlay === '1';
           if (!suppress) {
               v.play().catch(() => {
               });
           } else {
               try {
                   v.pause();
               } catch (e) {
               }
           }
       } function activateSkill(el, options = {
       }) {
           const {
               openSubs = true
           } = options;
           const tip = document.querySelector('.skill-tooltip');
           if (tip) {
               tip.setAttribute('aria-hidden', 'true');
               tip.style.opacity = '0';
               tip.style.left = '-9999px';
               tip.style.top = '-9999px';
           } const skillsRoot = document.getElementById('skills');
           const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
           };
           const L = i18nMap[getLangKey()] || i18nMap.pt || {
               cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
           };
           const name = el.dataset.nome || el.dataset.name || ;
           const level = (el.dataset.level || ).trim();
           let weaponData = null;
           if (el.dataset.weapon) {
               try {
                   weaponData = JSON.parse(el.dataset.weapon);
               } catch (e) {
                   weaponData = null;
               }
           } const hasWeapon = !!weaponData;
           const weaponEquipped = hasWeapon && globalWeaponEnabled;
           const lang = getLangKey();
           const baseDescPack = {
               pt: el.dataset.descPt || , en: el.dataset.descEn || , es: el.dataset.descEs || , pl: el.dataset.descPl || 
           };
           const baseDesc = baseDescPack[lang] || baseDescPack.pt || baseDescPack.en || baseDescPack.es || baseDescPack.pl || el.dataset.desc || ;
           let weaponDescPack = {
           };
           if (weaponData && weaponData.desc_i18n) {
               weaponDescPack = weaponData.desc_i18n;
           } else if (weaponData) {
               weaponDescPack = {
                   pt: weaponData.descPt || , en: weaponData.descEn || , es: weaponData.descEs || , pl: weaponData.descPl || 
               };
           } const weaponDesc = weaponDescPack[lang] || weaponDescPack.pt || weaponDescPack.en || weaponDescPack.es || weaponDescPack.pl || ;
           const chosenDesc = (weaponEquipped && weaponDesc) ? weaponDesc : baseDesc;
           const descHtml = chosenDesc.replace(/(.*?)/g, '$1');
           let attrsHTML = ;
           if (weaponEquipped && weaponData) {
               const wPve = (weaponData.powerpve || ).toString().trim();
               const wPvp = (weaponData.powerpvp || ).toString().trim();
               const wEnergy = (weaponData.energy || ).toString().trim();
               const wCd = (weaponData.cooldown || ).toString().trim();
               const weaponAttrs = [wPve, wPvp, wEnergy, wCd].join(',');
               attrsHTML = renderAttributes(weaponAttrs);
           } else {
               attrsHTML = el.dataset.atr ? renderAttributes(el.dataset.atr) : (el.dataset.subattrs ? renderSubAttributesFromObj(JSON.parse(el.dataset.subattrs), L) : );
           } let flagsHTML = ;
           if (el.dataset.flags) {
               try {
                   const flags = JSON.parse(el.dataset.flags);
                   flagsHTML = renderFlagsRow(flags);
               } catch (e) {
               }
           } if (descBox) {

descBox.innerHTML = `

${name}

${level ? `

$ {
               L.level
           } $ {
               level
}

` : }${attrsHTML}

${descHtml}

`;

           } if (hasWeapon) {
               applyWeaponBadge(el, weaponData, weaponEquipped);
           } if (videoBox) {
               const oldFlags = videoBox.querySelector('.skill-flags');
               if (oldFlags) oldFlags.remove();
               if (flagsHTML) {
                   videoBox.insertAdjacentHTML('beforeend', flagsHTML);
                   applyFlagTooltips(videoBox);
               }
           } const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
           currIcons.forEach(i => i.classList.remove('active'));
           el.classList.add('active');
           if (!autoplay && loadedVideos > 0) autoplay = true;
           window.__lastActiveSkillIcon = el;
           if (weaponEquipped && weaponData && weaponData.video) {
               const weaponVideoURL = normalizeFileURL(weaponData.video);
               if (weaponVideoURL && videoBox) {
                   Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => {
                       try {
                           v.pause();
                       } catch (e) {
                       } v.style.display = 'none';
                   });
                   const weaponKey = `weapon:${getWeaponKey(el)}`;
                   let weaponVideo = videoBox.querySelector(`video[data-weapon-key="${weaponKey}"]`);
                   if (!weaponVideo) {
                       weaponVideo = createVideoElement(weaponVideoURL, {
                           weaponKey
                       });
                       videoBox.appendChild(weaponVideo);
                   } videoBox.style.display = 'block';
                   weaponVideo.style.display = 'block';
                   try {
                       weaponVideo.currentTime = 0;
                   } catch (e) {
                   } const suppress = document.body.dataset.suppressSkillPlay === '1';
                   if (!suppress) {
                       weaponVideo.play().catch(() => {
                       });
                   }
               }
           } else {
               showVideoForIcon(el);
           } const subsRaw = el.dataset.subs || el.getAttribute('data-subs');
           const isBack = el.dataset.back === 'true' || el.getAttribute('data-back') === 'true' || el.dataset.back === 'yes' || el.getAttribute('data-back') === 'yes' || el.dataset.back === '1' || el.getAttribute('data-back') === '1';
           if (isBack && barStack.length) {
               const prev = barStack.pop();
               renderBarFromItems(prev.items);
               const btn = document.querySelector('.skills-back-wrapper');
               if (btn) btn.style.display = barStack.length ? 'block' : 'none';
               return;
           } if (openSubs && subsRaw && subsRaw.trim() !== ) {
               if (barStack.length && barStack[barStack.length - 1].parentIcon === el) return;
               try {
                   const subs = JSON.parse(subsRaw);
                   pushSubBarFrom(subs, el);
               } catch {
               }
           }
       } function wireClicksForCurrentBar() {
           const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
           currIcons.forEach(el => {
               if (el.dataset.wired) return;
               el.dataset.wired = '1';
               const label = el.dataset.nome || el.dataset.name || ;
               el.setAttribute('aria-label', label);
               if (el.hasAttribute('title')) el.removeAttribute('title');
               const img = el.querySelector('img');
               if (img) {
                   img.setAttribute('alt', );
                   if (img.hasAttribute('title')) img.removeAttribute('title');
               } el.addEventListener('click', () => {
                   activateSkill(el, {
                       openSubs: true
                   });
               });
           });
           wireTooltipsForNewIcons();
       } function animateIconsBarEntrance() {
           Array.from(iconsBar.children).forEach((c, i) => {
               c.style.opacity = '0';
               c.style.transform = 'translateY(6px)';
               requestAnimationFrame(() => {
                   setTimeout(() => {
                       c.style.transition = 'opacity .18s ease, transform .18s ease';
                       c.style.opacity = '1';
                       c.style.transform = 'translateY(0)';
                   }, i * 24);
               });
           });
       } function snapshotCurrentBarItemsFromDOM() {
           return Array.from(iconsBar.querySelectorAll('.skill-icon')).map(el => {
               const img = el.querySelector('img');
               const iconURL = img ? img.src : ;
               const subsRaw = el.dataset.subs || el.getAttribute('data-subs') || ;
               let subs = null;
               try {
                   subs = subsRaw ? JSON.parse(subsRaw) : null;
               } catch {
                   subs = null;
               } const subattrsRaw = el.dataset.subattrs || ;
               let flags = null;
               if (el.dataset.flags) {
                   try {
                       flags = JSON.parse(el.dataset.flags);
                   } catch (e) {
                   }
               } let weapon = null;
               if (el.dataset.weapon) {
                   try {
                       weapon = JSON.parse(el.dataset.weapon);
                   } catch (e) {
                   }
               } return {
                   name: el.dataset.nome || el.dataset.name || , index: el.dataset.index || , level: el.dataset.level || , desc: el.dataset.desc || , descPt: el.dataset.descPt || , descEn: el.dataset.descEn || , descEs: el.dataset.descEs || , descPl: el.dataset.descPl || , attrs: el.dataset.atr || el.dataset.attrs || , video: el.dataset.video || , iconURL, subs, subattrsStr: subattrsRaw, flags: flags, weapon: weapon
               };
           });
       } function ensureBackButton() {
           const rail = iconsBar.closest('.top-rail.skills');
           if (!rail) return null;
           let wrap = rail.parentElement;
           if (!wrap || !wrap.classList || !wrap.classList.contains('skills-rail-wrap')) {
               const parentNode = rail.parentNode;
               const newWrap = document.createElement('div');
               newWrap.className = 'skills-rail-wrap';
               parentNode.insertBefore(newWrap, rail);
               newWrap.appendChild(rail);
               wrap = newWrap;
           } let backWrap = wrap.querySelector('.skills-back-wrapper');
           if (!backWrap) {
               backWrap = document.createElement('div');
               backWrap.className = 'skills-back-wrapper';
               const btnInner = document.createElement('button');
               btnInner.className = 'skills-back';
               btnInner.type = 'button';
               btnInner.setAttribute('aria-label', 'Voltar');
               btnInner.innerHTML = '<svg class="back-chevron" width="100%" height="100%" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet"><path d="M10 2L4 16L10 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 2L14 16L20 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 2L24 16L30 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
               backWrap.appendChild(btnInner);
               wrap.insertBefore(backWrap, rail);
               btnInner.addEventListener('click', () => {
                   if (!barStack.length) return;
                   const prev = barStack.pop();
                   renderBarFromItems(prev.items);
                   backWrap.style.display = barStack.length ? 'block' : 'none';
                   wrap.classList.toggle('has-sub-bar', barStack.length > 0);
                   if (!barStack.length) btnInner.classList.remove('peek');
               });
           } backWrap.style.display = barStack.length ? 'block' : 'none';
           wrap.classList.toggle('has-sub-bar', barStack.length > 0);
           const btnInner = backWrap.querySelector('.skills-back');
           return btnInner;
       } function renderBarFromItems(items) {
           const tip = document.querySelector('.skill-tooltip');
           if (tip) {
               tip.setAttribute('aria-hidden', 'true');
               tip.style.opacity = '0';
               tip.style.left = '-9999px';
               tip.style.top = '-9999px';
           } iconsBar.innerHTML = ;
           items.forEach((it, idx) => {
               const node = document.createElement('div');
               node.className = 'skill-icon';
               node.dataset.nome = it.name || ;
               if (it.index) node.dataset.index = it.index;
               if (it.level) node.dataset.level = it.level;
               if (it.desc) node.dataset.desc = it.desc;
               if (it.descPt) node.dataset.descPt = it.descPt;
               if (it.descEn) node.dataset.descEn = it.descEn;
               if (it.descEs) node.dataset.descEs = it.descEs;
               if (it.descPl) node.dataset.descPl = it.descPl;
               if (it.attrs) node.dataset.atr = it.attrs;
               if (it.video) node.dataset.video = it.video;
               if (it.subs) node.dataset.subs = JSON.stringify(it.subs);
               if (it.subattrsStr) node.dataset.subattrs = it.subattrsStr;
               if (it.flags) node.dataset.flags = JSON.stringify(it.flags);
               if (it.weapon) node.dataset.weapon = JSON.stringify(it.weapon);
               if (!it.index) node.dataset.nested = '1';
               const img = document.createElement('img');
               img.alt = ;
               img.src = it.iconURL || (it.icon ? filePathURL(it.icon) : );
               node.appendChild(img);
               iconsBar.appendChild(node);
           });
           animateIconsBarEntrance();
           wireClicksForCurrentBar();
           const b = ensureBackButton();
           if (b) b.classList.add('peek');
       } function pushSubBarFrom(subs, parentIconEl) {
           const tip = document.querySelector('.skill-tooltip');
           if (tip) {
               tip.setAttribute('aria-hidden', 'true');
               tip.style.opacity = '0';
               tip.style.left = '-9999px';
               tip.style.top = '-9999px';
           } const parentNameSnapshot = parentIconEl ? (parentIconEl.dataset.nome || parentIconEl.dataset.name || ) : ;
           const parentIndexSnapshot = parentIconEl ? (parentIconEl.dataset.index || ) : ;
           barStack.push({
               items: snapshotCurrentBarItemsFromDOM(), parentIcon: parentIconEl, parentName: parentNameSnapshot, parentIndex: parentIndexSnapshot
           });
           ensureBackButton();
           const langKey = getLangKey();
           let cacheKey = null;
           if (parentIconEl) {
               cacheKey = parentIconEl.dataset.subCacheKey || null;
               if (!cacheKey) {
                   if (parentIconEl.dataset.index) {
                       cacheKey = `idx:${parentIconEl.dataset.index}`;
                   } else {
                       const slug = slugify(parentIconEl.dataset.nome || parentIconEl.dataset.name || );
                       if (slug) cacheKey = `slug:${slug}`;
                   } if (cacheKey) parentIconEl.dataset.subCacheKey = cacheKey;
               }
           } if (cacheKey) {
               const cached = subBarTemplateCache.get(cacheKey);
               if (cached && cached.lang === langKey) {
                   iconsBar.innerHTML = ;
                   const clone = cached.template.cloneNode(true);
                   iconsBar.appendChild(clone);
                   animateIconsBarEntrance();
                   wireClicksForCurrentBar();
                   const cachedBtn = ensureBackButton();
                   if (cachedBtn) cachedBtn.classList.add('peek');
                   return;
               }
           } const skillsRoot = document.getElementById('skills');
           const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
           };
           const L = i18nMap[getLangKey()] || i18nMap.pt || {
               cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
           };
           const items = (subs || []).map(s => {
               const name = (s.name || s.n || ).trim();
               const desc = chooseDescFrom(s).replace(/(.*?)/g, '$1');
               const attrsHTML = renderSubAttributesFromObj(s, L);
               return {
                   name, level: (s.level || ).toString().trim(), desc, descPt: (s.descPt || (s.desc_i18n && s.desc_i18n.pt) || ), descEn: (s.descEn || (s.desc_i18n && s.desc_i18n.en) || ), descEs: (s.descEs || (s.desc_i18n && s.desc_i18n.es) || ), descPl: (s.descPl || (s.desc_i18n && s.desc_i18n.pl) || ), attrs: , icon: (s.icon || 'Nada.png'), iconURL: filePathURL(s.icon || 'Nada.png'), video: s.video ? filePathURL(s.video) : , subs: Array.isArray(s.subs) ? s.subs : null, subattrs: s, flags: Array.isArray(s.flags) ? s.flags : null, back: (s.back === true || s.back === 'true' || s.back === 'yes' || s.back === '1') ? 'true' : null
               };
           });
           const fragment = document.createDocumentFragment();
           items.forEach((it, iIdx) => {
               const node = document.createElement('div');
               node.className = 'skill-icon';
               node.dataset.nested = '1';
               node.dataset.nome = it.name || ;
               node.dataset.parentIndex = parentIndexSnapshot;
               node.dataset.subName = it.name || ;
               const subSlug = slugify(it.name || );
               if (subSlug) node.dataset.slug = subSlug;
               if (it.level) node.dataset.level = it.level;
               if (it.desc) node.dataset.desc = it.desc;
               if (it.descPt) node.dataset.descPt = it.descPt;
               if (it.descEn) node.dataset.descEn = it.descEn;
               if (it.descEs) node.dataset.descEs = it.descEs;
               if (it.descPl) node.dataset.descPl = it.descPl;
               if (it.video) node.dataset.video = it.video;
               if (it.subs) node.dataset.subs = JSON.stringify(it.subs);
               if (it.subattrs) node.dataset.subattrs = JSON.stringify(it.subattrs);
               if (it.flags) node.dataset.flags = JSON.stringify(it.flags);
               if (it.back) node.dataset.back = it.back;
               const img = document.createElement('img');
               img.alt = ;
               img.src = it.iconURL;
               node.appendChild(img);
               fragment.appendChild(node);
           });
           const templateClone = fragment.cloneNode(true);
           iconsBar.innerHTML = ;
           iconsBar.appendChild(fragment);
           animateIconsBarEntrance();
           wireClicksForCurrentBar();
           const b2 = ensureBackButton();
           if (b2) b2.classList.add('peek');
           if (cacheKey) {
               subBarTemplateCache.set(cacheKey, {
                   template: templateClone, lang: langKey
               });
           }
       } window.addEventListener('gla:langChanged', () => {
           subBarTemplateCache.clear();
           const skillsRoot = document.getElementById('skills');
           const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
           };
           const lang = getLangKey();
           Array.from(iconsBar.querySelectorAll('.skill-icon')).forEach(icon => {
               const pack = {
                   pt: icon.dataset.descPt || , en: icon.dataset.descEn || , es: icon.dataset.descEs || , pl: icon.dataset.descPl || 
               };
               const chosen = (pack[lang] || pack.pt || pack.en || pack.es || pack.pl || icon.dataset.desc || ).trim();
               if (chosen) icon.dataset.desc = chosen;
           });
           barStack.forEach(frame => {
               (frame.items || []).forEach(it => {
                   const pack = {
                       pt: it.descPt, en: it.descEn, es: it.descEs, pl: it.descPl
                   };
                   const chosen = (pack[lang] || pack.pt || pack.en || pack.es || pack.pl || it.desc || );
                   it.desc = chosen;
               });
           });
           if (descBox) {
               applyFlagTooltips(descBox);
           } const activeIcon = window.__lastActiveSkillIcon;
           if (activeIcon && activeIcon.dataset.weapon) {
               activateSkill(activeIcon, {
                   openSubs: false
               });
           }
       });
       wireClicksForCurrentBar();
       const b0 = ensureBackButton();
       if (b0) {
           b0.classList.add('peek');
           b0.style.alignSelf = 'stretch';
       } (function initSkillTooltip() {
           if (document.querySelector('.skill-tooltip')) return;
           const tip = document.createElement('div');
           tip.className = 'skill-tooltip';
           tip.setAttribute('role', 'tooltip');
           tip.setAttribute('aria-hidden', 'true');
           document.body.appendChild(tip);
           const lockUntilRef = {
               value: 0
           };
           function measureAndPos(el) {
               if (!el || tip.getAttribute('aria-hidden') === 'true') return;
               tip.style.left = '0px';
               tip.style.top = '0px';
               const rect = el.getBoundingClientRect();
               const tr = tip.getBoundingClientRect();
               let left = Math.round(rect.left + (rect.width - tr.width) / 2);
               left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
               const coarse = (window.matchMedia && matchMedia('(pointer: coarse)').matches) || (window.innerWidth <= 600);
               let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
               if (top < 8) top = Math.round(rect.bottom + 10);
               tip.style.left = left + 'px';
               tip.style.top = top + 'px';
           } function show(el, text) {
               tip.textContent = text || ;
               tip.setAttribute('aria-hidden', 'false');
               measureAndPos(el);
               tip.style.opacity = '1';
           } function hide() {
               tip.setAttribute('aria-hidden', 'true');
               tip.style.opacity = '0';
               tip.style.left = '-9999px';
               tip.style.top = '-9999px';
           } window.__globalSkillTooltip = {
               show, hide, measureAndPos, lockUntil: lockUntilRef
           };
           Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
               if (icon.dataset.tipwired) return;
               icon.dataset.tipwired = '1';
               const label = icon.dataset.nome || icon.dataset.name || icon.title || ;
               if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
               if (icon.hasAttribute('title')) icon.removeAttribute('title');
               const img = icon.querySelector('img');
               if (img) {
                   const imgAlt = img.getAttribute('alt') || ;
                   const imgTitle = img.getAttribute('title') || ;
                   if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle);
                   img.setAttribute('alt', );
                   if (img.hasAttribute('title')) img.removeAttribute('title');
               } icon.addEventListener('mouseenter', () => show(icon, label));
               icon.addEventListener('mousemove', () => {
                   if (performance.now() >= lockUntilRef.value) measureAndPos(icon);
               });
               icon.addEventListener('click', () => {
                   lockUntilRef.value = performance.now() + 240;
                   measureAndPos(icon);
               });
               icon.addEventListener('mouseleave', hide);
           });
           Array.from(document.querySelectorAll('.subskills-rail .subicon')).forEach(sub => {
               if (sub.dataset.tipwired) return;
               sub.dataset.tipwired = '1';
               const label = sub.getAttribute('title') || sub.getAttribute('aria-label') || ;
               if (label && !sub.hasAttribute('aria-label')) sub.setAttribute('aria-label', label);
               if (sub.hasAttribute('title')) sub.removeAttribute('title');
               sub.addEventListener('mouseenter', () => show(sub, label));
               sub.addEventListener('mousemove', () => {
                   if (performance.now() >= lockUntilRef.value) measureAndPos(sub);
               });
               sub.addEventListener('click', () => {
                   lockUntilRef.value = performance.now() + 240;
                   measureAndPos(sub);
               });
               sub.addEventListener('mouseleave', hide);
           });
           window.addEventListener('scroll', () => {
               const visible = document.querySelector('.skill-tooltip[aria-hidden="false"]');
               if (!visible) return;
               const target = document.querySelector('.subskills-rail .subicon:hover') || document.querySelector('.subskills-rail .subicon.active') || document.querySelector('.icon-bar .skill-icon:hover') || document.querySelector('.icon-bar .skill-icon.active');
               measureAndPos(target);
           }, true);
           window.addEventListener('resize', () => {
               const target = document.querySelector('.subskills-rail .subicon:hover') || document.querySelector('.subskills-rail .subicon.active') || document.querySelector('.icon-bar .skill-icon:hover') || document.querySelector('.icon-bar .skill-icon.active');
               measureAndPos(target);
           });
       })();
       (function initTabs() {
           const tabs = Array.from(document.querySelectorAll('.tab-btn'));
           if (!tabs.length) return;
           const contents = Array.from(document.querySelectorAll('.tab-content'));
           const characterBox = document.querySelector('.character-box');
           let wrapper = characterBox.querySelector('.tabs-height-wrapper');
           if (!wrapper) {
               wrapper = document.createElement('div');
               wrapper.className = 'tabs-height-wrapper';
               contents.forEach(c => {
                   wrapper.appendChild(c);
               });
               const tabsElement = characterBox.querySelector('.character-tabs');
               if (tabsElement && tabsElement.nextSibling) {
                   characterBox.insertBefore(wrapper, tabsElement.nextSibling);
               } else {
                   characterBox.appendChild(wrapper);
               }
           } async function smoothHeightTransition(fromTab, toTab) {
               if (!wrapper) return Promise.resolve();
               const scrollY = window.scrollY;
               const currentHeight = wrapper.getBoundingClientRect().height;
               await new Promise((resolve) => {
                   const videoContainers = toTab.querySelectorAll('.video-container');
                   const contentCard = toTab.querySelector('.content-card');
                   if (videoContainers.length === 0) {
                       requestAnimationFrame(() => {
                           requestAnimationFrame(() => {
                               requestAnimationFrame(() => resolve());
                           });
                       });
                       return;
                   } let lastHeight = 0;
                   let stableCount = 0;
                   const checksNeeded = 3;
                   let totalChecks = 0;
                   const maxChecks = 15;
                   function checkStability() {
                       totalChecks++;
                       const currentTabHeight = toTab.scrollHeight;
                       if (Math.abs(currentTabHeight - lastHeight) < 5) {
                           stableCount++;
                       } else {
                           stableCount = 0;
                       } lastHeight = currentTabHeight;
                       if (stableCount >= checksNeeded || totalChecks >= maxChecks) {
                           resolve();
                       } else {
                           setTimeout(checkStability, 50);
                       }
                   } setTimeout(checkStability, 50);
               });
               const nextHeight = toTab.getBoundingClientRect().height;
               const finalHeight = Math.max(nextHeight, 100);
               if (Math.abs(finalHeight - currentHeight) < 30) {
                   wrapper.style.height = ;
                   return Promise.resolve();
               } wrapper.style.overflow = 'hidden';
               wrapper.style.height = currentHeight + 'px';
               wrapper.offsetHeight;
               wrapper.style.transition = 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
               requestAnimationFrame(() => {
                   wrapper.style.height = finalHeight + 'px';
               });
               return new Promise(resolve => {
                   setTimeout(() => {
                       wrapper.style.height = ;
                       wrapper.style.transition = ;
                       wrapper.style.overflow = ;
                       resolve();
                   }, 320);
               });
           } tabs.forEach(btn => {
               if (btn.dataset.wiredTab) return;
               btn.dataset.wiredTab = '1';
               btn.addEventListener('click', () => {
                   const target = btn.getAttribute('data-tab');
                   const currentActive = contents.find(c => c.classList.contains('active'));
                   const nextActive = contents.find(c => c.id === target);
                   if (currentActive === nextActive) return;
                   document.body.classList.add('transitioning-tabs');
                   if (currentActive) {
                       currentActive.style.opacity = '0';
                       currentActive.style.transform = 'translateY(-8px)';
                   } setTimeout(async () => {
                       contents.forEach(c => {
                           if (c !== nextActive) {
                               c.style.display = 'none';
                               c.classList.remove('active');
                           }
                       });
                       tabs.forEach(b => b.classList.toggle('active', b === btn));
                       if (nextActive) {
                           nextActive.classList.add('active');
                           nextActive.style.display = 'block';
                           nextActive.style.opacity = '0';
                           nextActive.style.visibility = 'hidden';
                           nextActive.offsetHeight;
                           try {
                               if (target === 'skills') {
                                   const tabEl = document.getElementById(target);
                                   if (tabEl) {
                                       const activeIcon = tabEl.querySelector('.icon-bar .skill-icon.active');
                                       const firstIcon = tabEl.querySelector('.icon-bar .skill-icon');
                                       const toClick = activeIcon || firstIcon;
                                       if (toClick) {
                                           const had = document.body.dataset.suppressSkillPlay;
                                           document.body.dataset.suppressSkillPlay = '1';
                                           toClick.click();
                                           if (had) document.body.dataset.suppressSkillPlay = had;
                                       }
                                   }
                               }
                           } catch (e) {
                           }
                       } if (currentActive && nextActive) {
                           await smoothHeightTransition(currentActive, nextActive);
                       } if (nextActive) {
                           nextActive.style.visibility = ;
                           nextActive.style.transform = 'translateY(12px)';
                           requestAnimationFrame(() => {
                               nextActive.style.opacity = '1';
                               nextActive.style.transform = 'translateY(0)';
                               setTimeout(() => {
                                   nextActive.style.opacity = ;
                                   nextActive.style.transform = ;
                                   document.body.classList.remove('transitioning-tabs');
                                   try {
                                       delete document.body.dataset.suppressSkillPlay;
                                   } catch {
                                   }
                               }, 300);
                           });
                       }
                   }, 120);
                   setTimeout(() => {
                       syncDescHeight();
                       if (target === 'skins') {
                           videosCache.forEach(v => {
                               try {
                                   v.pause();
                               } catch (e) {
                               } v.style.display = 'none';
                           });
                           if (videoBox) {
                               videoBox.querySelectorAll('video.skill-video').forEach(v => {
                                   try {
                                       v.pause();
                                   } catch (e) {
                                   } v.style.display = 'none';
                               });
                           } if (window.__subskills) window.__subskills.hideAll?.(videoBox);
                           if (videoBox && placeholder) {
                               placeholder.style.display = 'none';
                               placeholder.classList.add('fade-out');
                           }
                       } else {
                           const activeIcon = document.querySelector('.icon-bar .skill-icon.active');
                           if (activeIcon) activeIcon.click();
                       }
                   }, 450);
               });
           });
       })();
       (function initSkinsArrows() {
           const carousel = $('.skins-carousel');
           const wrapper = $('.skins-carousel-wrapper');
           const left = $('.skins-arrow.left');
           const right = $('.skins-arrow.right');
           if (!carousel || !left || !right || !wrapper) return;
           if (wrapper.dataset.wired) return;
           wrapper.dataset.wired = '1';
           const scrollAmt = () => Math.round(carousel.clientWidth * 0.6);
           function setState() {
               const max = carousel.scrollWidth - carousel.clientWidth;
               const x = carousel.scrollLeft;
               const hasLeft = x > 5, hasRight = x < max - 5;
               left.style.display = hasLeft ? 'inline-block' : 'none';
               right.style.display = hasRight ? 'inline-block' : 'none';
               wrapper.classList.toggle('has-left', hasLeft);
               wrapper.classList.toggle('has-right', hasRight);
               carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : ;
           } function go(dir) {
               const max = carousel.scrollWidth - carousel.clientWidth;
               const next = dir < 0 ? Math.max(0, carousel.scrollLeft - scrollAmt()) : Math.min(max, carousel.scrollLeft + scrollAmt());
               carousel.scrollTo({
                   left: next, behavior: 'smooth'
               });
           } left.addEventListener('click', () => go(-1));
           right.addEventListener('click', () => go(1));
           carousel.addEventListener('scroll', setState);
           new ResizeObserver(setState).observe(carousel);
           setState();
       })();
       function renderAttributes(str) {
           const skillsRoot = document.getElementById('skills');
           const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {
           };
           const langRaw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
           const langKey = i18nMap[langRaw] ? langRaw : (i18nMap[langRaw.split('-')[0]] ? langRaw.split('-')[0] : 'pt');
           const L = i18nMap[langKey] || i18nMap.pt || {
               cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
           };
           const vals = (str || ).split(',').map(v => v.trim());
           const pve = parseInt(vals[0], 10);
           const pvp = parseInt(vals[1], 10);
           const ene = parseInt(vals[2], 10);
           const cd = parseInt(vals[3], 10);
           const rows = [];
           if (!isNaN(cd)) rows.push([L.cooldown, cd]);
           if (!isNaN(ene) && ene !== 0) {
               const label = ene > 0 ? L.energy_gain : L.energy_cost;
               rows.push([label, Math.abs(ene)]);
           } if (!isNaN(pve)) rows.push([L.power, pve]);
           if (!isNaN(pvp)) rows.push([L.power_pvp, pvp]);
           if (!rows.length) return ;

const html = rows.map(([label, value]) => `

${label}${value}

`).join(); return `

${html}

`;

       } function syncDescHeight() {
       } window.addEventListener('resize', syncDescHeight);
       if (videoBox) new ResizeObserver(syncDescHeight).observe(videoBox);
       iconItems.forEach(el => {
           const wired = !!el.dataset._sync_wired;
           if (wired) return;
           el.dataset._sync_wired = '1';
           el.addEventListener('click', () => {
               Promise.resolve().then(syncDescHeight);
           });
       });
       if (iconsBar) addOnce(iconsBar, 'wheel', (e) => {
           if (e.deltaY) {
               e.preventDefault();
               iconsBar.scrollLeft += e.deltaY;
           }
       });
       wireClicksForCurrentBar();
       if (iconItems.length) {
           const first = iconItems[0];
           if (first) {
               activateSkill(first, {
                   openSubs: false
               });
           }
       } setTimeout(() => {
           Array.from(document.querySelectorAll('.skill-icon')).forEach(el => {
               console.log('icon', el.dataset.index, 'data-video=', el.dataset.video);
           });
           videosCache.forEach((v, idx) => {
               const src = v.querySelector('source') ? v.querySelector('source').src : v.src;
               console.log('video element', idx, 'src=', src, 'readyState=', v.readyState);
               v.addEventListener('error', (ev) => {
                   console.error('VIDEO ERROR idx=', idx, 'src=', src, 'error=', v.error);
               });
               v.addEventListener('loadedmetadata', () => {
                   console.log('loadedmetadata idx=', idx, 'dimensions=', v.videoWidth, 'x', v.videoHeight);
               });
           });
       }, 600);
   })();

</script>