Widget:Character.Subskills

<script>

   (function () {
       const SUBVIDEO_DEBUG = false; // Desabilitado para melhor performance
       function logSubVideo(...args) {
           if (!SUBVIDEO_DEBUG) return;
           // console.log('[SubVideo]', ...args);
       }

       const api = (window.__subskills ||= {});
       // Cache global de elementos de vídeo para subskills - baseado em URL
       const subskillVideoElementCache = new Map(); // key: videoURL (string), value: HTMLVideoElement
       const imagePreloadCache = new Map();
       let subRail, subBar, spacer;

       // Cache das skills principais (capturado na carga da página)
       let cachedMainSkills = null;

       // ===== HERANÇA DE ATRIBUTOS: busca dados das skills principais =====
       function getMainSkillsMap() {
           // Retorna cache se já foi construído E tem dados
           if (cachedMainSkills && cachedMainSkills.byIndex.size > 0) {
               return cachedMainSkills;
           }

           const maps = {
               byName: new Map(),
               byIndex: new Map()
           };

           // Busca skills com data-index (skills principais, não subskills)
           const icons = document.querySelectorAll('.icon-bar .skill-icon[data-index][data-nome]');

           icons.forEach(icon => {
               const name = (icon.dataset.nome || ).trim();
               if (!name) return;

               // Extrai atributos do data-atr (formato: "pve, pvp, energy, cd")
               const atrRaw = icon.dataset.atr || ;
               const parts = atrRaw.split(',').map(x => (x || ).trim());
               const powerpve = parts[0] && parts[0] !== '-' ? parts[0] : ;
               const powerpvp = parts[1] && parts[1] !== '-' ? parts[1] : ;
               const energy = parts[2] && parts[2] !== '-' ? parts[2] : ;
               const cooldown = parts[3] && parts[3] !== '-' ? parts[3] : ;

               // Nome original do arquivo de ícone (armazenado no dataset pelo widget de skills)
               let iconFile = (icon.dataset.iconFile || ).trim();
               if (!iconFile) {
                   const imgSrc = icon.querySelector('img')?.src || ;
                   const iconMatch = imgSrc.match(/(?:FilePath|images)\/([^\/?]+)$/);
                   iconFile = iconMatch ? decodeURIComponent(iconMatch[1]) : ;
               }

               // Nome original do arquivo de vídeo (caso exista)
               let videoFile = (icon.dataset.videoFile || ).trim();
               if (!videoFile) {
                   const videoUrl = icon.dataset.video || ;
                   const videoMatch = videoUrl.match(/FilePath\/([^&?]+)/);
                   videoFile = videoMatch ? decodeURIComponent(videoMatch[1]) : ;
               }

               const index = (icon.dataset.index || ).trim();

               const data = {
                   name: name,  // Inclui o nome para herança completa
                   icon: iconFile,
                   level: icon.dataset.level || ,
                   video: videoFile,
                   powerpve: powerpve,
                   powerpvp: powerpvp,
                   cooldown: cooldown,
                   energy: energy
               };

               // Mantém descrições caso precise como fallback extra
               if (icon.dataset.descPt) data.descPt = icon.dataset.descPt;
               if (icon.dataset.descEn) data.descEn = icon.dataset.descEn;
               if (icon.dataset.descEs) data.descEs = icon.dataset.descEs;
               if (icon.dataset.descPl) data.descPl = icon.dataset.descPl;

               maps.byName.set(name, data);
               if (index) {
                   // Guarda tanto como string quanto como número para compatibilidade
                   maps.byIndex.set(index, data);
                   maps.byIndex.set(parseInt(index, 10), data);
               }

           });

           // Cacheia para uso futuro (importante: as skills principais não mudam)
           cachedMainSkills = maps;
           return maps;
       }

       // Processa subskills recursivamente
       function processNestedSubskills(subs, mainSkills, level = 1) {
           if (!Array.isArray(subs) || level > 3) return subs;
           
           return subs.map(sub => {
               // Aplica herança primeiro
               const inherited = applyInheritance(sub, mainSkills);
               
               // Se tem sub-subskills, processa recursivamente
               if (inherited.subs && Array.isArray(inherited.subs)) {
                   inherited.subs = processNestedSubskills(inherited.subs, mainSkills, level + 1);
               }
               
               // Se tem suborder, mantém
               if (sub.suborder) {
                   inherited.suborder = sub.suborder;
               }
               
               return inherited;
           });
       }

       // Aplica herança COMPLETA: se subskill só tem refM, busca TUDO da skill principal
       function applyInheritance(sub, mainSkills) {
           let name = (sub.name || sub.n || ).trim();
           const refIndex = ((sub.refM || sub.m || sub.M || ) + ).trim();

           let main = null;
           // Tenta como string
           if (refIndex && mainSkills.byIndex.has(refIndex)) {
               main = mainSkills.byIndex.get(refIndex);
           }
           // Tenta como número
           if (!main && refIndex) {
               const numIndex = parseInt(refIndex, 10);
               if (!isNaN(numIndex) && mainSkills.byIndex.has(numIndex)) {
                   main = mainSkills.byIndex.get(numIndex);
               }
           }
           if (!main && name && mainSkills.byName.has(name)) {
               main = mainSkills.byName.get(name);
           }

           // Se não tem main skill para herdar, retorna como está
           if (!main) {
               return sub;
           }

           // Se não tem nome mas tem refM, herda o nome da skill principal
           if (!name && refIndex && main.name) {
               name = main.name;
           }

           // Helper para verificar se um valor existe e não é string vazia
           // Para números, permite 0 como valor válido
           const hasValue = (val) => {
               if (val === undefined || val === null) return false;
               if (typeof val === 'number') return !isNaN(val); // Permite 0, mas não NaN
               const str = String(val).trim();
               return str !==  && str !== 'NaN';
           };

           // Vídeo NUNCA é herdado da skill principal
           // Se a chave 'video' existe no objeto = foi especificado pelo editor (mesmo que vazio)
           // Se a chave não existe = não foi especificado = não herda, fica vazio
           const hasOwnVideo = Object.prototype.hasOwnProperty.call(sub, 'video');
           const finalVideo = hasOwnVideo ? (sub.video || ) : ;

           return {
               ...sub,
               name: name || main.name || sub.name,
               icon: (sub.icon && sub.icon !== 'Nada.png' && sub.icon !== ) ? sub.icon : (main.icon || 'Nada.png'),
               level: hasValue(sub.level) ? sub.level : main.level,
               video: finalVideo,  // SIMPLIFICADO
               powerpve: (sub.powerpve !== undefined && sub.powerpve !== null) ? sub.powerpve : main.powerpve,
               powerpvp: (sub.powerpvp !== undefined && sub.powerpvp !== null) ? sub.powerpvp : main.powerpvp,
               cooldown: (sub.cooldown !== undefined && sub.cooldown !== null) ? sub.cooldown : main.cooldown,
               energy: (sub.energy !== undefined && sub.energy !== null) ? sub.energy : main.energy,
               descPt: sub.descPt || (sub.desc_i18n?.pt) || main.descPt,
               descEn: sub.descEn || (sub.desc_i18n?.en) || main.descEn,
               descEs: sub.descEs || (sub.desc_i18n?.es) || main.descEs,
               descPl: sub.descPl || (sub.desc_i18n?.pl) || main.descPl
           };
       }

       // Função para renderizar sub-subskills
       function renderNestedSubskills(nestedSubs, parentElement, parentName, parentIdx) {
           // Remove níveis anteriores
           const existing = parentElement.querySelector('.subskills-nested');
           if (existing) existing.remove();
           
           if (!nestedSubs || !Array.isArray(nestedSubs) || nestedSubs.length === 0) {
               return;
           }
           
           // Cria container para sub-subskills
           const nestedContainer = document.createElement('div');
           nestedContainer.className = 'subskills-nested';
           nestedContainer.dataset.parent = parentName;
           nestedContainer.dataset.level = '2';
           nestedContainer.dataset.parentIdx = parentIdx;
           
           // Posiciona abaixo do elemento pai
           nestedContainer.style.position = 'absolute';
           nestedContainer.style.top = '100%';
           nestedContainer.style.left = '50%';
           nestedContainer.style.transform = 'translateX(-50%)';
           nestedContainer.style.zIndex = '1000';
           nestedContainer.style.background = 'rgba(0, 0, 0, 0.95)';
           nestedContainer.style.borderRadius = '8px';
           nestedContainer.style.padding = '8px';
           nestedContainer.style.display = 'flex';
           nestedContainer.style.gap = '6px';
           nestedContainer.style.flexWrap = 'wrap';
           nestedContainer.style.minWidth = '200px';
           nestedContainer.style.boxShadow = '0 4px 20px rgba(0,0,0,0.7)';
           nestedContainer.style.border = '1px solid rgba(255, 217, 90, 0.4)';
           nestedContainer.style.marginTop = '5px';
           
           // Processa cada sub-subskill
           nestedSubs.forEach((sub, index) => {
               const nestedItem = document.createElement('div');
               nestedItem.className = 'subicon nested-subicon';
               nestedItem.title = sub.name || sub.n || ;
               nestedItem.dataset.parent = parentName;
               nestedItem.dataset.name = sub.name || sub.n || ;
               nestedItem.dataset.index = index;
               
               // Armazena dados completos
               nestedItem.dataset.subskillData = JSON.stringify(sub);
               
               const img = document.createElement('img');
               img.src = filePathURL(sub.icon || 'Nada.png');
               img.alt = ;
               img.width = 36;
               img.height = 36;
               img.decoding = 'async';
               img.loading = 'lazy';
               nestedItem.appendChild(img);
               
               // Adiciona indicador se tiver mais níveis (até 3 níveis)
               if (sub.subs && Array.isArray(sub.subs) && sub.subs.length > 0) {
                   const indicator = document.createElement('div');
                   indicator.className = 'subskill-indicator';
                   indicator.innerHTML = '▶';
                   indicator.style.position = 'absolute';
                   indicator.style.bottom = '-3px';
                   indicator.style.right = '-3px';
                   indicator.style.background = '#FFD95A';
                   indicator.style.color = '#000';
                   indicator.style.fontSize = '9px';
                   indicator.style.width = '14px';
                   indicator.style.height = '14px';
                   indicator.style.borderRadius = '50%';
                   indicator.style.display = 'flex';
                   indicator.style.alignItems = 'center';
                   indicator.style.justifyContent = 'center';
                   indicator.style.fontWeight = 'bold';
                   indicator.style.border = '1px solid #000';
                   indicator.style.zIndex = '10';
                   nestedItem.appendChild(indicator);
                   nestedItem.classList.add('has-nested-children');
               }
               
               // Evento de clique para sub-subskill
               nestedItem.addEventListener('click', function(e) {
                   e.stopPropagation();
                   e.preventDefault();
                   
                   const clickedData = JSON.parse(this.dataset.subskillData || '{}');
                   const L = getLabels();
                   const subName = clickedData.name || clickedData.n || ;
                   
                   // Atualiza descrição
                   if (descBox) {
                       const level = (clickedData.level || ).toString().trim();
                       const attrs = getEffectiveAttrs(clickedData);
                       const desc = getEffectiveDesc(clickedData);
                       
                       descBox.innerHTML = `

${subName}

${level ? `

${L.level} ${level}

` : }

                           ${renderSubAttrs(attrs, L)}

${desc.replace(/(.*?)/g, '$1')}

                       `;
                   }
                   
                   // Atualiza vídeo
                   if (videoBox) {
                       const videoURL = getEffectiveVideo(clickedData);
                       if (!videoURL || videoURL.trim() === ) {
                           videoBox.style.display = 'none';
                       } else {
                           showSubVideo(videoURL, videoBox);
                       }
                   }
                   
                   // Marca como ativa
                   nestedContainer.querySelectorAll('.nested-subicon').forEach(el => {
                       el.classList.remove('active');
                   });
                   this.classList.add('active');
                   
                   // Se tiver sub-sub-subskills, renderiza terceiro nível
                   if (clickedData.subs && Array.isArray(clickedData.subs) && clickedData.subs.length > 0) {
                       renderThirdLevelSubskills(clickedData.subs, this, subName);
                   } else {
                       // Remove terceiro nível se existir
                       const thirdLevel = this.querySelector('.subskills-third-level');
                       if (thirdLevel) thirdLevel.remove();
                   }
               });
               
               nestedContainer.appendChild(nestedItem);
           });
           
           // Adiciona ao DOM
           parentElement.style.position = 'relative';
           parentElement.appendChild(nestedContainer);
           
           // Fecha ao clicar fora
           setTimeout(() => {
               const closeHandler = (e) => {
                   if (!parentElement.contains(e.target) && !nestedContainer.contains(e.target)) {
                       nestedContainer.remove();
                       document.removeEventListener('click', closeHandler);
                   }
               };
               document.addEventListener('click', closeHandler);
           }, 10);
       }

       // Função para renderizar terceiro nível (sub-sub-subskills)
       function renderThirdLevelSubskills(thirdLevelSubs, parentElement, parentName) {
           // Remove terceiro nível anterior
           const existing = parentElement.querySelector('.subskills-third-level');
           if (existing) existing.remove();
           
           if (!thirdLevelSubs || !Array.isArray(thirdLevelSubs) || thirdLevelSubs.length === 0) {
               return;
           }
           
           // Cria container para terceiro nível
           const thirdContainer = document.createElement('div');
           thirdContainer.className = 'subskills-third-level';
           thirdContainer.dataset.parent = parentName;
           thirdContainer.dataset.level = '3';
           
           // Posiciona ao lado do elemento pai
           thirdContainer.style.position = 'absolute';
           thirdContainer.style.top = '0';
           thirdContainer.style.left = '100%';
           thirdContainer.style.marginLeft = '5px';
           thirdContainer.style.zIndex = '1001';
           thirdContainer.style.background = 'rgba(0, 0, 0, 0.98)';
           thirdContainer.style.borderRadius = '8px';
           thirdContainer.style.padding = '6px';
           thirdContainer.style.display = 'flex';
           thirdContainer.style.flexDirection = 'column';
           thirdContainer.style.gap = '4px';
           thirdContainer.style.minWidth = '180px';
           thirdContainer.style.boxShadow = '0 4px 20px rgba(0,0,0,0.8)';
           thirdContainer.style.border = '1px solid rgba(255, 217, 90, 0.3)';
           
           // Processa cada sub-sub-subskill
           thirdLevelSubs.forEach((sub, index) => {
               const thirdItem = document.createElement('div');
               thirdItem.className = 'subicon third-level-subicon';
               thirdItem.title = sub.name || sub.n || ;
               thirdItem.dataset.parent = parentName;
               thirdItem.dataset.name = sub.name || sub.n || ;
               thirdItem.style.display = 'flex';
               thirdItem.style.alignItems = 'center';
               thirdItem.style.gap = '8px';
               thirdItem.style.padding = '4px 8px';
               thirdItem.style.borderRadius = '4px';
               thirdItem.style.cursor = 'pointer';
               thirdItem.style.transition = 'background 0.2s';
               
               thirdItem.addEventListener('mouseenter', () => {
                   thirdItem.style.background = 'rgba(255, 217, 90, 0.1)';
               });
               thirdItem.addEventListener('mouseleave', () => {
                   thirdItem.style.background = 'transparent';
               });
               
               // Ícone pequeno
               const img = document.createElement('img');
               img.src = filePathURL(sub.icon || 'Nada.png');
               img.alt = ;
               img.width = 24;
               img.height = 24;
               img.style.borderRadius = '4px';
               thirdItem.appendChild(img);
               
               // Nome
               const nameSpan = document.createElement('span');
               nameSpan.textContent = sub.name || sub.n || ;
               nameSpan.style.color = '#fff';
               nameSpan.style.fontSize = '12px';
               thirdItem.appendChild(nameSpan);
               
               // Evento de clique
               thirdItem.addEventListener('click', function(e) {
                   e.stopPropagation();
                   e.preventDefault();
                   
                   const L = getLabels();
                   const subName = sub.name || sub.n || ;
                   
                   // Atualiza descrição
                   if (descBox) {
                       const level = (sub.level || ).toString().trim();
                       const attrs = getEffectiveAttrs(sub);
                       const desc = getEffectiveDesc(sub);
                       
                       descBox.innerHTML = `

${subName}

${level ? `

${L.level} ${level}

` : }

                           ${renderSubAttrs(attrs, L)}

${desc.replace(/(.*?)/g, '$1')}

                       `;
                   }
                   
                   // Atualiza vídeo
                   if (videoBox) {
                       const videoURL = getEffectiveVideo(sub);
                       if (!videoURL || videoURL.trim() === ) {
                           videoBox.style.display = 'none';
                       } else {
                           showSubVideo(videoURL, videoBox);
                       }
                   }
                   
                   // Marca como ativa
                   thirdContainer.querySelectorAll('.third-level-subicon').forEach(el => {
                       el.style.background = 'transparent';
                   });
                   this.style.background = 'rgba(255, 217, 90, 0.2)';
               });
               
               thirdContainer.appendChild(thirdItem);
           });
           
           // Adiciona ao DOM
           parentElement.appendChild(thirdContainer);
       }

       function filePathURL(fileName) {
           // Evita requisições para Nada.png que não existe
           if (!fileName || fileName.trim() ===  || fileName === 'Nada.png' || fileName.toLowerCase() === 'nada.png') {
               return ;
           }
           const f = encodeURIComponent(fileName.replace(/^Arquivo:|^File:/, ));
           const base = (window.mw && mw.util && typeof mw.util.wikiScript === 'function')
               ? mw.util.wikiScript()
               : (window.mw && mw.config ? (mw.config.get('wgScript') || '/index.php') : '/index.php');
           // Garante HTTPS para evitar Mixed Content
           let url = `${base}?title=Especial:FilePath/${f}`;
           if (window.location.protocol === 'https:' && url.startsWith('http://')) {
               url = url.replace('http://', 'https://');
           }
           return url;
       }

       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 preloadImage(iconFile) {
           const url = filePathURL(iconFile || 'Nada.png');
           if (imagePreloadCache.has(url)) {
               return imagePreloadCache.get(url);
           }
           const promise = new Promise((resolve, reject) => {
               const img = new Image();
               img.decoding = 'async';
               img.loading = 'eager';
               img.referrerPolicy = 'same-origin';
               img.onload = () => resolve(url);
               img.onerror = () => resolve(url);
               img.src = url;
           });
           imagePreloadCache.set(url, promise);
           return promise;
       }

       function getLabels() {
           const skillsRoot = document.getElementById('skills');
           const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
           const raw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
           const lang = raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
           return i18nMap[lang] || i18nMap.pt || {
               cooldown: 'Recarga',
               energy_gain: 'Ganho de energia',
               energy_cost: 'Custo de energia',
               power: 'Poder',
               power_pvp: 'Poder PvP',
               level: 'Nível'
           };
       }

       // Verifica se o modo weapon está ativo
       function isWeaponModeOn() {
           try {
               return localStorage.getItem('glaWeaponEnabled') === '1';
           } catch (e) {
               return false;
           }
       }

       // Retorna os atributos corretos (weapon ou normal)
       function getEffectiveAttrs(s) {
           const weaponOn = isWeaponModeOn();
           if (weaponOn && s.weapon) {
               return {
                   powerpve: s.weapon.powerpve || s.powerpve,
                   powerpvp: s.weapon.powerpvp || s.powerpvp,
                   energy: s.weapon.energy || s.energy,
                   cooldown: s.weapon.cooldown || s.cooldown
               };
           }
           return {
               powerpve: s.powerpve,
               powerpvp: s.powerpvp,
               energy: s.energy,
               cooldown: s.cooldown
           };
       }

       // Retorna a descrição correta (weapon ou normal)
       // Aceita tanto desc_i18n quanto desc para compatibilidade
       function getEffectiveDesc(s) {
           const weaponOn = isWeaponModeOn();
           const raw = (document.documentElement.lang || 'pt').toLowerCase();
           const lang = raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');

           // Para weapon: aceita tanto desc_i18n quanto desc
           if (weaponOn && s.weapon) {
               const wDesc = s.weapon.desc_i18n || s.weapon.desc;
               if (wDesc) {
                   return wDesc[lang] || wDesc.pt || wDesc.en || ;
               }
           }

           // Para descrição base: aceita tanto desc_i18n quanto desc
           const base = s.desc_i18n || s.desc;
           if (base) {
               return base[lang] || base.pt || base.en || ;
           }

           // Fallback para campos individuais (compatibilidade)
           const descI18n = {
               pt: s.descPt || ,
               en: s.descEn || ,
               es: s.descEs || ,
               pl: s.descPl || 
           };
           return descI18n[lang] || descI18n.pt || ;
       }

       // Retorna o vídeo correto (weapon ou normal)
       function getEffectiveVideo(s) {
           const weaponOn = isWeaponModeOn();
           if (weaponOn && s.weapon && s.weapon.video && s.weapon.video.trim() !== ) {
               return s.weapon.video;
           }
           return s.video || ;
       }

       // Função única para obtenção de vídeo de subskill - baseada em URL
       function getOrCreateSubskillVideo(videoURL) {
           if (!videoURL || videoURL.trim() === ) return null;

           const normalizedURL = normalizeFileURL(videoURL);
           if (!normalizedURL || normalizedURL.trim() === ) return null;

           // Verifica se já existe no cache
           if (subskillVideoElementCache.has(normalizedURL)) {
               logSubVideo('getOrCreateSubskillVideo: cache hit', { videoURL: normalizedURL });
               return subskillVideoElementCache.get(normalizedURL);
           }

           // Cria novo elemento de vídeo
           logSubVideo('getOrCreateSubskillVideo: creating new video', { videoURL: normalizedURL });

           const v = document.createElement('video');
           v.className = 'skill-video';
           v.dataset.sub = '1';
           v.setAttribute('controls', );
           v.setAttribute('preload', 'metadata');
           v.setAttribute('playsinline', );
           v.muted = true; // Permite autoload em mais navegadores
           v.style.display = 'none';
           v.style.width = '100%';
           v.style.height = 'auto';
           v.style.aspectRatio = '16/9';
           v.style.objectFit = 'cover';

           // Detectar formato do vídeo pela extensão
           const ext = (normalizedURL.split('.').pop() || ).toLowerCase().split('?')[0];
           const mimeTypes = {
               'mp4': 'video/mp4',
               'm4v': 'video/mp4',
               'webm': 'video/webm',
               'ogv': 'video/ogg',
               'ogg': 'video/ogg',
               'mov': 'video/quicktime'
           };
           const mimeType = mimeTypes[ext] || 'video/mp4';

           const src = document.createElement('source');
           src.src = normalizedURL;
           src.type = mimeType;
           v.appendChild(src);

           // Fallback para Safari/iOS mais antigos
           v.setAttribute('webkit-playsinline', );
           v.setAttribute('x-webkit-airplay', 'allow');

           // Adiciona ao cache
           subskillVideoElementCache.set(normalizedURL, v);

           // Adiciona ao DOM imediatamente e força carregamento
           const videoBox = document.querySelector('.video-container');
           if (videoBox && !v.isConnected) {
               videoBox.appendChild(v);
               // Força carregamento imediato
               v.load();
           }

           return v;
       }

       function renderSubAttrs(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 renderFlagsRow(flags) {
           const map = {
               aggro: 'Enemyaggro-icon.png',
               bridge: 'Bridgemaker-icon.png',
               wall: 'Destroywall-icon.png',
               quickcast: 'Quickcast-icon.png',
               wallpass: 'Passthroughwall-icon.png'
           };
           const arr = (flags || []).filter(Boolean);
           if (!arr.length) return ;
           const items = arr.map(k => `<img class="skill-flag" data-flag="${k}" alt="" src="${filePathURL(map[k])}">`).join();

return `

${items}

`;

       }

       function applyFlagTooltips(container) {
           const skillsRoot = document.getElementById('skills');
           if (!skillsRoot) return;
           let pack = {};
           try { pack = JSON.parse(skillsRoot.dataset.i18nFlags || '{}'); } catch (e) { }
           const raw = (document.documentElement.lang || 'pt').toLowerCase();
           const lang = raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
           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 ensureRail(iconsBar) {
           const rail = iconsBar.closest('.top-rail');
           if (!rail) {
               return null;
           }

           if (!subRail) {
               subRail = document.createElement('div');
               subRail.className = 'subskills-rail collapsed hidden';
               rail.appendChild(subRail);
           }

           if (!subBar) {
               subBar = document.createElement('div');
               subBar.className = 'subicon-bar';
               subRail.appendChild(subBar);
           }

           if (!spacer) {
               spacer = document.createElement('div');
               spacer.className = 'subskills-spacer';
               rail.parentNode.insertBefore(spacer, rail.nextSibling);
           }

           return rail;
       }

       // Função para mostrar vídeo de subskill usando cache baseado em URL
       function showSubVideo(videoURL, videoBox) {
           logSubVideo('showSubVideo called', { videoURL, videoBoxExists: !!videoBox });

           if (!videoBox) return;

           // Ocultar todos os vídeos existentes no container
           videoBox.querySelectorAll('video.skill-video[data-sub="1"]').forEach(v => {
               v.style.display = 'none';
           });

           // Obter vídeo via getOrCreateSubskillVideo (única forma de obter vídeos)
           const video = getOrCreateSubskillVideo(videoURL);

           if (!video) {
               logSubVideo('no video found for URL, hiding box', { videoURL });
               videoBox.style.display = 'none';
               return;
           }

           // Se o vídeo não estiver conectado ao DOM, anexá-lo ao container
           if (!video.isConnected || video.parentNode !== videoBox) {
               logSubVideo('video not in DOM, appending', {
                   videoURL,
                   isConnected: video.isConnected,
                   parentNode: video.parentNode
               });
               if (video.parentNode) {
                   video.parentNode.removeChild(video);
               }
               videoBox.appendChild(video);
           }

           logSubVideo('showing video', {
               videoURL,
               readyState: video.readyState,
               paused: video.paused,
               currentTime: video.currentTime
           });

           // Exibir o vídeo
           videoBox.style.display = 'block';
           video.style.display = 'block';

           // Reinicia o vídeo para feedback visual imediato
           try {
               video.currentTime = 0;
           } catch (e) { }

           // Tenta dar play se o vídeo já está pronto
           if (video.readyState >= 2) {
               video.play().then(() => {
                   logSubVideo('play() resolved', { videoURL, currentTime: video.currentTime, readyState: video.readyState });
               }).catch(err => {
                   logSubVideo('play() rejected', { videoURL, error: err });
               });
           } else {
               // Se não está pronto ainda, espera o evento canplay
               logSubVideo('video not ready, waiting for canplay', { videoURL, readyState: video.readyState });
               const onCanPlay = () => {
                   video.removeEventListener('canplay', onCanPlay);
                   video.play().catch(() => { });
               };
               video.addEventListener('canplay', onCanPlay, { once: true });
           }
       }

       api.refreshCurrentSubSafe = function () {
           const btn = document.querySelector('.subskills-rail .subicon.active');
           if (!btn) return false;
           const had = document.body.dataset.suppressSkillPlay;
           document.body.dataset.suppressSkillPlay = '1';
           try {
               btn.dispatchEvent(new Event('click', { bubbles: true }));
           } finally {
               if (had) document.body.dataset.suppressSkillPlay = had;
               else delete document.body.dataset.suppressSkillPlay;
           }
           return true;
       };

       // Função auxiliar para aplicar classes de weapon nas subskills renderizadas
       const applyWeaponClassesToSubskills = () => {
           const weaponOn = isWeaponModeOn();
           // Busca TODAS as subskills com weapon
           let weaponSubs = document.querySelectorAll('.subicon[data-weapon]');

           weaponSubs.forEach(el => {
               if (weaponOn) {
                   el.classList.add('has-weapon-available');
                   if (el.classList.contains('active')) {
                       el.classList.add('weapon-equipped');
                   }
               } else {
                   el.classList.remove('has-weapon-available');
                   el.classList.remove('weapon-equipped');
               }
           });
       };

       api.renderBarFrom = function (el, { iconsBar, descBox, videoBox }) {
           logSubVideo('api.renderBarFrom called', {
               hasEl: !!el,
               hasIconsBar: !!iconsBar,
               hasDescBox: !!descBox,
               hasVideoBox: !!videoBox,
               parentIndex: el?.dataset?.index || 'unknown'
           });

           const rail = ensureRail(iconsBar);
           if (!rail) {
               logSubVideo('api.renderBarFrom: no rail found, returning');
               return;
           }

           const rawSubs = el.getAttribute('data-subs') || ;
           const rawOrder = el.getAttribute('data-suborder') || ;
           const parentIdx = el.dataset.index || ;

           logSubVideo('api.renderBarFrom: parsing subs', {
               parentIdx,
               hasRawSubs: !!rawSubs.trim(),
               rawSubsLength: rawSubs.length
           });

           if (!rawSubs.trim()) {
               if (subRail) subRail.classList.add('collapsed');
               if (subRail) subRail.classList.add('hidden');
               if (subBar) subBar.innerHTML = ;
               if (spacer) spacer.style.height = '0px';
               return;
           }

           let subs;
           try { subs = JSON.parse(rawSubs); } catch { subs = []; }

           // NORMALIZADOR: Converte weaponPacked para weapon se necessário
           subs = subs.map(sub => {
               // Se tem weaponPacked mas não tem weapon, tenta parsear
               if (sub.weaponPacked && !sub.weapon && typeof sub.weaponPacked === 'string' && sub.weaponPacked.trim() !== ) {
                   const parts = sub.weaponPacked.split('~');
                   if (parts.length >= 2) {
                       sub.weapon = {
                           icon: parts[0] || 'Nada.png',
                           powerpve: parts[1] || null,
                           powerpvp: parts[2] || null,
                           cooldown: parts[3] || null,
                           video: parts[4] || ,
                           energy: parts[5] || null
                       };
                       // Remove valores vazios
                       Object.keys(sub.weapon).forEach(k => {
                           if (sub.weapon[k] ===  || sub.weapon[k] === null) {
                               delete sub.weapon[k];
                           }
                       });
                   }
               }
               // Garante que weapon seja objeto válido
               if (sub.weapon && typeof sub.weapon === 'string') {
                   // Tenta parsear como JSON primeiro
                   try {
                       sub.weapon = JSON.parse(sub.weapon);
                   } catch {
                       // Se falhar, tenta formato ~
                       const parts = sub.weapon.split('~');
                       if (parts.length >= 2) {
                           sub.weapon = {
                               icon: parts[0] || 'Nada.png',
                               powerpve: parts[1] || null,
                               powerpvp: parts[2] || null,
                               cooldown: parts[3] || null,
                               video: parts[4] || ,
                               energy: parts[5] || null
                           };
                           Object.keys(sub.weapon).forEach(k => {
                               if (sub.weapon[k] ===  || sub.weapon[k] === null) {
                                   delete sub.weapon[k];
                               }
                           });
                       } else {
                           sub.weapon = null;
                       }
                   }
               }
               return sub;
           });

           if (!Array.isArray(subs) || subs.length === 0) {
               subRail.classList.add('collapsed');
               subRail.classList.add('hidden');
               subBar.innerHTML = ;
               if (spacer) spacer.style.height = '0px';
               return;
           }

           // Busca mapa das skills principais para herança
           const mainSkills = getMainSkillsMap();

           // Debug: log dos dados antes da herança
           if (SUBVIDEO_DEBUG && subs.length > 0) {
               logSubVideo('subs before inheritance', {
                   subsCount: subs.length,
                   firstSub: JSON.stringify(subs[0]),
                   allSubs: subs.map(s => ({ refM: s.refM || s.M || s.m, video: s.video, hasVideo: s.hasOwnProperty('video') }))
               });
           }

           // MODIFICAÇÃO AQUI: Aplica herança E processa sub-subskills recursivamente
           subs = processNestedSubskills(subs, mainSkills, 1);

           // Remove subskills que ficaram sem nome após herança
           subs = subs.filter(s => (s.name || s.n || ).trim() !== );

           subRail.classList.add('hidden');
           subBar.innerHTML = ;

           // Usa a ordem natural das subskills após herança
           let order = subs.map(s => s.name || s.n || );
           if (rawOrder.trim()) {
               try {
                   const preferred = JSON.parse(rawOrder);
                   if (Array.isArray(preferred) && preferred.length) {
                       const byName = new Map(subs.map(s => [(s.name || s.n || ), s]));
                       order = preferred.filter(n => byName.has(n));
                   }
               } catch { }
           }

           // Pré-carrega TODOS os ícones ANTES de renderizar
           const iconPreloadPromises = [];
           order.forEach(nm => {
               const s = subs.find(x => (x.name || x.n || ) === nm);
               if (s && s.icon && s.icon.trim() !==  && s.icon !== 'Nada.png') {
                   iconPreloadPromises.push(preloadImage(s.icon));
               }
           });

           // Vídeos serão criados e carregados sob demanda quando necessário

           // Função para renderizar a barra de subskills
           const renderSubskillsBar = () => {
               order.forEach(nm => {
                   const s = subs.find(x => (x.name || x.n || ) === nm);
                   if (!s) {
                       return;
                   }

                   const item = document.createElement('div');
                   item.className = 'subicon';
                   item.title = s.name || nm;

                   const slugify = window.__skillSlugify || ((str) => (str || ).toLowerCase().replace(/[^\w]+/g, '-').replace(/^-+|-+$/g, ));
                   item.dataset.slug = slugify(s.name || nm);
                   
                   // Armazena os dados completos da subskill
                   item.dataset.subskillData = JSON.stringify(s);

                   logSubVideo('creating subicon element', {
                       subName: (s.name || s.n || ).trim(),
                       parentIdx,
                       className: item.className,
                       hasNestedSubs: !!(s.subs && Array.isArray(s.subs) && s.subs.length > 0)
                   });

                   const img = document.createElement('img');
                   img.alt = ;
                   const iconUrl = filePathURL(s.icon || 'Nada.png');
                   if (iconUrl) {
                       img.src = iconUrl;
                   }
                   img.decoding = 'async';
                   img.loading = 'lazy';
                   img.width = 42;
                   img.height = 42;
                   item.appendChild(img);
                   
                   // Adiciona indicador se tiver sub-subskills
                   const hasNestedSubs = s.subs && Array.isArray(s.subs) && s.subs.length > 0;
                   if (hasNestedSubs) {
                       const indicator = document.createElement('div');
                       indicator.className = 'subskill-indicator';
                       indicator.innerHTML = '▼';
                       indicator.style.position = 'absolute';
                       indicator.style.bottom = '-3px';
                       indicator.style.right = '-3px';
                       indicator.style.background = 'var(--icon-active, #FFD95A)';
                       indicator.style.color = '#000';
                       indicator.style.fontSize = '9px';
                       indicator.style.width = '14px';
                       indicator.style.height = '14px';
                       indicator.style.borderRadius = '50%';
                       indicator.style.display = 'flex';
                       indicator.style.alignItems = 'center';
                       indicator.style.justifyContent = 'center';
                       indicator.style.fontWeight = 'bold';
                       indicator.style.border = '1px solid #000';
                       indicator.style.zIndex = '10';
                       item.appendChild(indicator);
                       item.classList.add('has-children');
                   }

                   // Verifica weapon de forma mais robusta
                   const hasWeapon = s.weapon && (
                       (typeof s.weapon === 'object' && Object.keys(s.weapon).length > 0) ||
                       (typeof s.weapon === 'string' && s.weapon.trim() !== )
                   );

                   const subName = (s.name || s.n || ).trim();

                   if (hasWeapon) {
                       // Normaliza weapon se for string
                       let weaponObj = s.weapon;
                       if (typeof weaponObj === 'string') {
                           try {
                               weaponObj = JSON.parse(weaponObj);
                           } catch {
                               // Se falhar, tenta formato ~
                               const parts = weaponObj.split('~');
                               if (parts.length >= 2) {
                                   weaponObj = {
                                       icon: parts[0] || 'Nada.png',
                                       powerpve: parts[1] || null,
                                       powerpvp: parts[2] || null,
                                       cooldown: parts[3] || null,
                                       video: parts[4] || ,
                                       energy: parts[5] || null
                                   };
                                   Object.keys(weaponObj).forEach(k => {
                                       if (weaponObj[k] ===  || weaponObj[k] === null) {
                                           delete weaponObj[k];
                                       }
                                   });
                               } else {
                                   weaponObj = null;
                               }
                           }
                       }

                       if (weaponObj && typeof weaponObj === 'object' && Object.keys(weaponObj).length > 0) {
                           try {
                               item.dataset.weapon = JSON.stringify(weaponObj);
                           } catch (e) {
                               console.error('[Subskills] Erro ao serializar weapon de subskill', subName, e);
                           }

                           // Aplica classe inicial se o toggle já está ativo
                           if (isWeaponModeOn()) {
                               item.classList.add('has-weapon-available');
                           }
                       }
                   }

                   // EVENTO DE CLIQUE MODIFICADO PARA SUPORTAR SUB-SUBSKILLS
                   logSubVideo('attaching click handler to subicon', {
                       subName: (s.name || s.n || ).trim(),
                       parentIdx,
                       itemClassName: item.className,
                       hasNestedSubs: hasNestedSubs
                   });
                   
                   item.addEventListener('click', (e) => {
                       // Previne propagação se for um clique em sub-subskill
                       if (e.target.closest('.subskills-nested') || e.target.closest('.subskills-third-level')) {
                           return;
                       }
                       
                       const L = getLabels();
                       const subName = (s.name || s.n || ).trim();
                       
                       logSubVideo('subicon click HANDLER EXECUTED', {
                           subName,
                           parentIdx,
                           weaponMode: isWeaponModeOn(),
                           hasWeaponDataAttr: !!item.dataset.weapon,
                           rawWeaponDataset: item.dataset.weapon || null,
                           hasNestedSubs: hasNestedSubs
                       });

                       // Lê weapon diretamente do atributo data-weapon
                       let subWeaponData = null;
                       if (item.dataset.weapon) {
                           try {
                               subWeaponData = JSON.parse(item.dataset.weapon);
                           } catch (e) {
                               subWeaponData = null;
                           }
                       }
                       const hasSubWeapon = !!subWeaponData;

                       const weaponOn = isWeaponModeOn();
                       const weaponEquipped = weaponOn && hasSubWeapon && subWeaponData;

                       logSubVideo('weapon status for subclick', {
                           subName,
                           weaponEquipped,
                           hasSubWeaponData: !!subWeaponData,
                           hasNestedSubs: hasNestedSubs
                       });

                       // Determina descrição (weapon ou normal)
                       const raw = (document.documentElement.lang || 'pt').toLowerCase();
                       const lang = raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');

                       let chosen = ;
                       if (weaponEquipped && subWeaponData) {
                           // Descrição do weapon
                           const weaponDescPack = subWeaponData.desc_i18n || subWeaponData.desc || {};
                           chosen = weaponDescPack[lang] || weaponDescPack.pt || weaponDescPack.en || ;
                       } else {
                           // Descrição normal
                           const base = s.desc_i18n || s.desc || {};
                           chosen = base[lang] || base.pt || base.en || (s.descPt || );
                       }

                       // Determina atributos (weapon ou normal)
                       let attrsObj = {
                           powerpve: s.powerpve,
                           powerpvp: s.powerpvp,
                           energy: s.energy,
                           cooldown: s.cooldown
                       };
                       if (weaponEquipped && subWeaponData) {
                           attrsObj = {
                               powerpve: subWeaponData.powerpve || s.powerpve,
                               powerpvp: subWeaponData.powerpvp || s.powerpvp,
                               energy: subWeaponData.energy || s.energy,
                               cooldown: subWeaponData.cooldown || s.cooldown
                           };
                       }

                       // Level (weapon ou normal)
                       const level = (weaponEquipped && subWeaponData && subWeaponData.level)
                           ? subWeaponData.level.toString().trim()
                           : (s.level || ).toString().trim();

                       let flagsHTML = ;
                       if (Array.isArray(s.flags) && s.flags.length > 0) {
                           flagsHTML = renderFlagsRow(s.flags);
                       }

                       // ATUALIZA DESCRIÇÃO E VÍDEO
                       if (descBox) {

descBox.innerHTML = `

${s.name || nm}

${level ? `

${L.level} ${level}

` : }${renderSubAttrs(attrsObj, L)}

${chosen.replace(/(.*?)/g, '$1')}

`;

                       }

                       if (videoBox) {
                           const oldFlags = videoBox.querySelector('.skill-flags');
                           if (oldFlags) oldFlags.remove();
                           if (flagsHTML) {
                               videoBox.insertAdjacentHTML('beforeend', flagsHTML);
                               applyFlagTooltips(videoBox);
                           }
                       }

                       // Vídeo (weapon ou normal) - usa cache já criado
                       const effectiveVideo = getEffectiveVideo(s);

                       logSubVideo('effectiveVideo for sub', {
                           subName,
                           parentIdx,
                           effectiveVideo,
                           weaponEquipped,
                           rawBaseVideo: s.video,
                           rawWeaponVideo: subWeaponData?.video
                       });

                       if (!effectiveVideo || effectiveVideo.trim() ===  || effectiveVideo === 'Nada.png' || effectiveVideo.toLowerCase().includes('nada.png')) {
                           if (videoBox) videoBox.style.display = 'none';
                       } else {
                           logSubVideo('calling showSubVideo from click handler', { effectiveVideo });
                           showSubVideo(effectiveVideo, videoBox);
                       }

                       // MARCA COMO ATIVA E LIMPA OUTRAS
                       Array.from(subBar.children).forEach(c => {
                           c.classList.remove('active');
                           c.classList.remove('weapon-equipped');
                           // Remove qualquer menu de sub-subskills aberto
                           const nested = c.querySelector('.subskills-nested');
                           if (nested) nested.remove();
                           const thirdLevel = c.querySelector('.subskills-third-level');
                           if (thirdLevel) thirdLevel.remove();
                       });
                       item.classList.add('active');

                       // Aplica weapon-equipped se tem weapon e está ativo
                       if (weaponEquipped) {
                           item.classList.add('weapon-equipped');
                       }
                       
                       window.__lastActiveSkillIcon = item;
                       
                       // LÓGICA PARA SUB-SUBSKILLS
                       if (hasNestedSubs) {
                           // Renderiza sub-subskills
                           renderNestedSubskills(s.subs, item, subName, parentIdx);
                       } else {
                           // Remove qualquer menu de sub-subskills
                           const nested = item.querySelector('.subskills-nested');
                           if (nested) nested.remove();
                           const thirdLevel = item.querySelector('.subskills-third-level');
                           if (thirdLevel) thirdLevel.remove();
                       }
                   });

                   if (window.__globalSkillTooltip) {
                       const { show, hide, measureAndPos, lockUntil } = window.__globalSkillTooltip;
                       const label = item.title || ;
                       item.setAttribute('aria-label', label);
                       if (item.hasAttribute('title')) item.removeAttribute('title');
                       item.addEventListener('mouseenter', () => show(item, label));
                       item.addEventListener('mousemove', () => { if (performance.now() >= lockUntil.value) measureAndPos(item); });
                       item.addEventListener('click', () => { lockUntil.value = performance.now() + 240; measureAndPos(item); });
                       item.addEventListener('mouseleave', hide);
                   }

                   subBar.appendChild(item);
                   logSubVideo('subicon appended to subBar', {
                       subName: (s.name || s.n || ).trim(),
                       parentIdx,
                       subBarChildrenCount: subBar.children.length
                   });
               });

               // Aplica classes de weapon nas subskills recém-renderizadas
               applyWeaponClassesToSubskills();

               // Dispara evento para notificar que subskills estão prontas
               window.dispatchEvent(new CustomEvent('gla:subskills:ready', { detail: { count: order.length } }));

               // Remove listener anterior se existir (evita duplicação)
               if (subBar._weaponToggleListener) {
                   window.removeEventListener('gla:weaponToggled', subBar._weaponToggleListener);
               }

               // Cria novo listener que opera no subBar atual
               subBar._weaponToggleListener = (e) => {
                   const enabled = e.detail?.enabled ?? false;

                   // Aplica classes usando a função auxiliar
                   applyWeaponClassesToSubskills();

                   // Atualiza a subskill ativa se houver
                   setTimeout(() => {
                       const activeSub = subBar.querySelector('.subicon[data-weapon].active')
                           || subBar.querySelector('.subicon.active');
                       if (activeSub) {
                           activeSub.dispatchEvent(new Event('click', { bubbles: true }));
                       } else {
                           api.refreshCurrentSubSafe();
                       }
                   }, 50);
               };

               window.addEventListener('gla:weaponToggled', subBar._weaponToggleListener);

               requestAnimationFrame(() => {
                   subRail.classList.remove('collapsed');
                   subRail.classList.remove('hidden');
                   const h = subRail.offsetHeight || 48;
                   if (spacer) spacer.style.height = h + 'px';
               });
           };

           // Chama a função de renderização após pré-carregar ícones
           Promise.all(iconPreloadPromises).then(() => {
               setTimeout(() => {
                   renderSubskillsBar();
               }, 10);
           }).catch(() => {
               setTimeout(() => {
                   renderSubskillsBar();
               }, 10);
           });
       };

       api.hideAll = function (videoBox) {
           const videos = videoBox?.querySelectorAll('.skill-video[data-sub="1"]') || [];
           logSubVideo('api.hideAll called', { videoBoxExists: !!videoBox, videoCount: videos.length });
           videos.forEach(v => {
               try { v.pause(); } catch { }
               v.style.display = 'none';
           });
       };

       window.renderSubskillsBarFrom = function (el, ctx) { api.renderBarFrom(el, ctx); };

       api.preloadAllSubskillImages = function () {
           const allSkillIcons = document.querySelectorAll('.icon-bar .skill-icon[data-subs]');
           const preloadPromises = [];
           let totalImages = 0;

           allSkillIcons.forEach(icon => {
               try {
                   const subsRaw = icon.getAttribute('data-subs');
                   if (!subsRaw) return;
                   const subs = JSON.parse(subsRaw);
                   if (!Array.isArray(subs)) return;

                   subs.forEach(s => {
                       if (s && s.icon && s.icon.trim() !==  && s.icon !== 'Nada.png') {
                           preloadPromises.push(preloadImage(s.icon));
                           totalImages++;
                       }
                       // Pré-carrega sub-subskills também
                       if (s && s.subs && Array.isArray(s.subs)) {
                           s.subs.forEach(nested => {
                               if (nested && nested.icon && nested.icon.trim() !==  && nested.icon !== 'Nada.png') {
                                   preloadPromises.push(preloadImage(nested.icon));
                                   totalImages++;
                               }
                               // Pré-carrega sub-sub-subskills
                               if (nested && nested.subs && Array.isArray(nested.subs)) {
                                   nested.subs.forEach(deep => {
                                       if (deep && deep.icon && deep.icon.trim() !==  && deep.icon !== 'Nada.png') {
                                           preloadPromises.push(preloadImage(deep.icon));
                                           totalImages++;
                                       }
                                   });
                               }
                           });
                       }
                   });
               } catch (e) {
                   console.error('[Subskills] preloadAllSubskillImages error:', e);
               }
           });

           if (totalImages > 0) {
               return Promise.all(preloadPromises).then(() => {
                   // console.log('[Subskills] preloadAllSubskillImages: todos os ícones carregados');
               });
           }
           return Promise.resolve();
       };

       // Inicialização
       function init() {
           logSubVideo('init: starting initialization');

           // Constrói cache das skills principais
           getMainSkillsMap();

           // Pré-carrega imagens das subskills IMEDIATAMENTE
           api.preloadAllSubskillImages();

           // Escuta mudanças no localStorage
           window.addEventListener('storage', (e) => {
               if (e.key === 'glaWeaponEnabled') {
                   setTimeout(() => api.refreshCurrentSubSafe(), 50);
               }
           });

           // LISTENER GLOBAL: Escuta evento de toggle
           window.addEventListener('gla:weaponToggled', (e) => {
               const enabled = e.detail?.enabled ?? false;

               // Tenta aplicar classes imediatamente
               applyWeaponClassesToSubskills();

               // Atualiza a subskill ativa se houver
               setTimeout(() => {
                   const activeSub = document.querySelector('.subicon[data-weapon].active')
                       || document.querySelector('.subicon.active');
                   if (activeSub) {
                       activeSub.dispatchEvent(new Event('click', { bubbles: true }));
                   } else {
                       api.refreshCurrentSubSafe();
                   }
               }, 50);
           });

           // LISTENER: Escuta quando subskills estão prontas
           window.addEventListener('gla:subskills:ready', (e) => {
               // Aplica classes de weapon se o toggle estiver ativo
               applyWeaponClassesToSubskills();
           });
       }

       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', () => {
               setTimeout(init, 100);
           });
       } else {
           setTimeout(init, 100);
       }
   })();

</script> <style>

   .subicon-bar {
       display: flex;
       gap: 10px;
       padding: 6px 6px;
       overflow-x: auto;
       /* Firefox */
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
   }

   .subicon-bar::-webkit-scrollbar {
       height: 6px;
   }

   .subicon-bar::-webkit-scrollbar-thumb {
       background: #151515;
       border-radius: 3px;
   }

   .subicon {
       width: var(--icon-size, 42px);
       height: var(--icon-size, 42px);
       border-radius: var(--icon-radius, 10px);
       overflow: hidden;
       position: relative;
       flex: 0 0 auto;
       cursor: pointer;
       isolation: isolate;
       transition: transform 0.2s ease;
   }

   .subicon img {
       width: 100%;
       height: 100%;
       aspect-ratio: 1 / 1;
       object-fit: cover;
       display: block;
       border-radius: inherit;
   }

   .subicon::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       box-shadow: inset 0 0 0 var(--icon-ring-w, 2px) var(--icon-idle, #cfcfcf);
       pointer-events: none;
       z-index: 2;
       transition: box-shadow .12s ease;
   }

   .subicon:hover::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w, 2px) #e6e6e6;
   }

   .subicon.active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w, 2px) var(--icon-active, #FFD95A);
   }

   .subicon.active {
       transform: scale(1.10);
       z-index: 5;
   }

   .subicon.active::before {
       content: "";
       position: absolute;
       inset: -4px;
       border-radius: calc(var(--icon-radius, 10px) + 4px);
       pointer-events: none;
       z-index: 1;
       opacity: 1;
       box-shadow: 0 0 12px 3px var(--icon-active-glow, rgba(255, 217, 90, .30)),
           0 0 0 calc(var(--icon-ring-w, 2px) * 2) var(--icon-active-ring, rgba(255, 217, 90, .50));
   }

   .subicon.active img {
       transform: none !important;
   }

   .top-rail.skills {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       overflow: visible;
   }

   .top-rail.skills .icon-bar {
       margin-bottom: 0;
       position: relative;
       z-index: 2;
   }

   .subskills-rail {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       top: calc(100% - 1px);
       z-index: 3;
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: auto;
       max-width: 100%;
       padding: 3px 5px;
       background: rgba(0, 0, 0, .38);
       border: 1px solid rgba(255, 255, 255, .10);
       border-top: 1px solid rgba(255, 255, 255, .08);
       border-radius: 0 0 10px 10px;
       box-shadow: 0 3px 9px rgba(0, 0, 0, .22);
       -webkit-backdrop-filter: blur(2px);
       backdrop-filter: blur(2px);
       overflow: hidden;
       transition: opacity .14s ease, transform .14s ease;
       opacity: 1;
   }

   .subskills-rail::before {
       content: "";
       position: absolute;
       top: -6px;
       left: 0;
       right: 0;
       height: 6px;
       background: linear-gradient(to bottom, rgba(0, 0, 0, .20), rgba(0, 0, 0, 0));
       pointer-events: none;
   }

   .subskills-rail.collapsed {
       opacity: 0;
       pointer-events: none;
       transform: translate(-50%, -6px);
   }

   .subskills-rail.hidden {
       visibility: hidden;
   }

   .subskills-spacer {
       height: 0;
       transition: height .2s ease;
   }

   .subskills-rail .subicon-bar {
       display: inline-flex;
       align-items: center;
       gap: 0;
       overflow-x: auto;
       /* Firefox */
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
   }

   .subskills-rail .subicon-bar::-webkit-scrollbar {
       height: 6px;
   }

   .subskills-rail .subicon-bar::-webkit-scrollbar-thumb {
       background: #151515;
       border-radius: 3px;
   }

   .subskills-rail .subicon {
       width: 42px;
       height: 42px;
       border-radius: 6px;
       position: relative;
       overflow: hidden;
       flex: 0 0 auto;
       cursor: pointer;
       isolation: isolate;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       transform: translateZ(0);
   }

   .subskills-rail .subicon+.subicon {
       margin-left: 4px;
   }

   .subskills-rail .subicon img {
       width: 100%;
       height: 100%;
       aspect-ratio: 1 / 1;
       object-fit: cover;
       display: block;
       border-radius: inherit;
   }

   .subskills-rail .subicon::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       box-shadow: inset 0 0 0 2px var(--icon-idle, #cfcfcf);
       pointer-events: none;
       z-index: 2;
       transition: box-shadow .12s ease;
   }

   .subskills-rail .subicon:hover::after {
       box-shadow: inset 0 0 0 2px #e6e6e6;
   }

   .subskills-rail .subicon.active::after {
       box-shadow: inset 0 0 0 2px var(--icon-active, #FFD95A);
   }

   .video-container .skill-video {
       width: 100%;
       height: auto;
       aspect-ratio: 16 / 9;
       object-fit: cover;
       background: #000;
       border-radius: 10px;
   }

   @media (max-width: 900px) {
       .subskills-rail {
           position: static;
           transform: none;
           margin-top: -2px;
           border-top: 0;
           border-radius: 0 0 10px 10px;
       }

       .subskills-spacer {
           height: 0 !important;
       }
       
       .subskills-nested {
           position: fixed !important;
           top: 50% !important;
           left: 50% !important;
           transform: translate(-50%, -50%) !important;
           max-width: 90vw !important;
           z-index: 9999 !important;
       }
       
       .subskills-third-level {
           position: fixed !important;
           top: 50% !important;
           left: 50% !important;
           transform: translate(-50%, -50%) !important;
           max-width: 90vw !important;
           z-index: 10000 !important;
       }
   }

   .skills-rail-wrap {
       position: relative;
       display: block;
       width: max-content;
       margin: 0 auto;
   }

   /* Subskills com arma disponível - borda vermelha quando inativa */
   .character-box .top-rail.skills .subicon.has-weapon-available:not(.active)::after {
       box-shadow: inset 0 0 0 2px rgba(220, 70, 70, 0.85) !important;
   }

   /* Subskill com arma ATIVA - laranja/coral vibrante + brilho forte */
   .character-box .top-rail.skills .subicon.has-weapon-available.active {
       position: relative;
   }

   .character-box .top-rail.skills .subicon.has-weapon-available.active::after {
       box-shadow: none !important;
       background: linear-gradient(135deg,
               #FF5722 0%,
               #FF7043 20%,
               #FF8A65 40%,
               #FF7043 60%,
               #FF5722 80%,
               #FF3D00 100%) !important;
       background-size: 300% 300% !important;
       animation: weapon-icon-border-scan 3s linear infinite !important;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
       -webkit-mask-composite: xor !important;
       mask-composite: exclude !important;
       padding: 2px !important;
       filter: drop-shadow(0 0 4px rgba(255, 87, 34, 0.8)) drop-shadow(0 0 8px rgba(255, 87, 34, 0.6)) !important;
   }

   .character-box .top-rail.skills .subicon.has-weapon-available.active::before {
       box-shadow:
           0 0 20px 8px rgba(255, 87, 34, 0.95),
           0 0 40px 16px rgba(255, 87, 34, 0.75),
           0 0 60px 24px rgba(255, 120, 50, 0.5),
           0 0 0 4px rgba(255, 87, 34, 0.6) !important;
       opacity: 1 !important;
   }

   /* Modo arma ON - efeito animado nos subicons */
   .character-box .top-rail.skills.weapon-mode-on .subicon.has-weapon-available {
       position: relative;
   }

   .character-box .top-rail.skills.weapon-mode-on .subicon.has-weapon-available::after {
       box-shadow: none !important;
       background: linear-gradient(90deg,
               rgba(255, 80, 80, 0.9) 0%,
               rgba(255, 120, 60, 1) 25%,
               rgba(255, 80, 80, 0.9) 50%,
               rgba(255, 120, 60, 1) 75%,
               rgba(255, 80, 80, 0.9) 100%) !important;
       background-size: 400% 100% !important;
       animation: weapon-subicon-border-scan 4s linear infinite !important;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
       -webkit-mask-composite: xor !important;
       mask-composite: exclude !important;
       padding: 2px !important;
   }

   .character-box .top-rail.skills.weapon-mode-on .subicon.has-weapon-available::before {
       content: "";
       position: absolute;
       inset: -4px;
       border-radius: calc(6px + 4px);
       pointer-events: none;
       z-index: 1;
       box-shadow:
           0 0 16px 6px rgba(255, 80, 80, 0.85),
           0 0 32px 12px rgba(255, 80, 80, 0.6),
           0 0 48px 18px rgba(255, 100, 60, 0.4) !important;
       opacity: 1 !important;
       animation: weapon-subicon-pulse 3s ease-in-out infinite !important;
   }

   /* Subskill ativa com arma - mais intenso */
   .character-box .top-rail.skills.weapon-mode-on .subicon.has-weapon-available.active::after {
       background: linear-gradient(135deg,
               #FF3D00 0%,
               #FF5722 15%,
               #FF7043 30%,
               #FF8A65 45%,
               #FF7043 60%,
               #FF5722 75%,
               #FF3D00 90%,
               #FF5722 100%) !important;
       background-size: 400% 400% !important;
       animation: weapon-icon-border-scan 2.5s linear infinite !important;
       filter: drop-shadow(0 0 6px rgba(255, 87, 34, 1)) drop-shadow(0 0 12px rgba(255, 87, 34, 0.8)) drop-shadow(0 0 18px rgba(255, 120, 50, 0.6)) !important;
   }

   .character-box .top-rail.skills.weapon-mode-on .subicon.has-weapon-available.active::before {
       box-shadow:
           0 0 28px 12px rgba(255, 87, 34, 1),
           0 0 56px 24px rgba(255, 87, 34, 0.85),
           0 0 80px 32px rgba(255, 140, 60, 0.6),
           0 0 0 5px rgba(255, 87, 34, 0.75) !important;
       animation: weapon-subicon-pulse-active 2.5s ease-in-out infinite !important;
   }

   @keyframes weapon-icon-border-scan {
       0% {
           background-position: 0% 0%;
       }

       100% {
           background-position: 400% 0%;
       }
   }

   @keyframes weapon-subicon-border-scan {
       0% {
           background-position: 0% 0%;
       }

       100% {
           background-position: 400% 0%;
       }
   }

   @keyframes weapon-subicon-pulse {

       0%,
       100% {
           opacity: 0.95;
           box-shadow: 0 0 16px 6px rgba(255, 80, 80, 0.85), 0 0 32px 12px rgba(255, 80, 80, 0.6), 0 0 48px 18px rgba(255, 100, 60, 0.4);
       }

       50% {
           opacity: 1;
           box-shadow: 0 0 24px 8px rgba(255, 80, 80, 1), 0 0 48px 16px rgba(255, 80, 80, 0.75), 0 0 64px 24px rgba(255, 120, 60, 0.5);
       }
   }

   @keyframes weapon-subicon-pulse-active {

       0%,
       100% {
           opacity: 0.95;
           box-shadow: 0 0 20px 8px rgba(255, 87, 34, 0.9), 0 0 40px 16px rgba(255, 87, 34, 0.7), 0 0 60px 24px rgba(255, 120, 50, 0.5), 0 0 0 4px rgba(255, 87, 34, 0.6);
       }

       50% {
           opacity: 1;
           box-shadow: 0 0 28px 12px rgba(255, 87, 34, 1), 0 0 56px 24px rgba(255, 87, 34, 0.85), 0 0 80px 32px rgba(255, 140, 60, 0.6), 0 0 0 5px rgba(255, 87, 34, 0.75);
       }
   }
   
   /* NOVOS ESTILOS PARA SUB-SUBSKILLS */
   
   /* Indicador visual de que tem sub-subskills */
   .subicon.has-children {
       position: relative;
   }
   
   /* Container de sub-subskills */
   .subskills-nested {
       animation: fadeIn 0.2s ease;
   }
   
   /* Container de terceiro nível */
   .subskills-third-level {
       animation: fadeIn 0.2s ease;
   }
   
   /* Subícones aninhados (menores) */
   .nested-subicon {
       width: 36px !important;
       height: 36px !important;
       border-radius: 6px !important;
       position: relative;
   }
   
   .nested-subicon.active::after {
       box-shadow: inset 0 0 0 2px var(--icon-active, #FFD95A) !important;
   }
   
   /* Subícones de terceiro nível (com texto) */
   .third-level-subicon:hover {
       background: rgba(255, 217, 90, 0.15) !important;
   }
   
   @keyframes fadeIn {
       from { 
           opacity: 0; 
           transform: translateY(-5px); 
       }
       to { 
           opacity: 1; 
           transform: translateY(0); 
       }
   }
   
   /* Para garantir que os popups fiquem acima de tudo */
   .subskills-nested,
   .subskills-third-level {
       z-index: 10000 !important;
   }

</style>