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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 1: Linha 1:
<!-- ===========================
<style>
    MAIN SKILLS SYSTEM
     /* ===========================
    =========================== -->
      BASE STYLES & RESET
<script>
  =========================== */
     (function () {
    img {
        // ===========================
         pointer-events: none;
        // Utility Functions
         user-select: none;
        // ===========================
    }
        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');
        };


         // Extra helpers
    video {
         function filePathURL(fileName) {
         max-height: none;
            const f = encodeURIComponent((fileName || 'Nada.png').replace(/^Arquivo:|^File:/, ''));
    }
            const base = (window.mw && mw.util && typeof mw.util.wikiScript === 'function')
 
                ? mw.util.wikiScript()
    .mw-body {
                : (window.mw && window.mw.config ? (mw.config.get('wgScript') || '/index.php') : '/index.php');
         padding: unset !important;
            return `${base}?title=Especial:FilePath/${f}`;
    }
         }
 
         function getLangKey() {
    .mw-body-content {
            const skillsRoot = document.getElementById('skills');
        line-height: 1.5;
            const raw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
    }
            return raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
 
         }
    .mw-body-content p {
        function chooseDescFrom(obj) {
        display: none;
            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 || '');
    /* ===========================
         }
      CHARACTER CONTAINER & BACKGROUND
        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>` : '');
    .banner {
            const pve = (s.powerpve || '').toString().trim();
        display: none !important;
            const pvp = (s.powerpvp || '').toString().trim();
    }
            const en = (s.energy || '').toString().trim();
 
            const cd = (s.cooldown || '').toString().trim();
    .character-box {
            const rows = [
        color: #000;
                cd ? chip(L.cooldown, cd) : '',
        font-family: 'Noto Sans', sans-serif;
                en ? chip((en.startsWith('-') ? L.energy_cost : L.energy_gain), en.replace(/^\+?/, '')) : '',
        width: 100%;
                pve ? chip(L.power, pve) : '',
         margin: auto;
                pvp ? chip(L.power_pvp, pvp) : '',
         position: relative;
            ].filter(Boolean);
        user-select: none;
            return rows.length ? `<div class="attr-list">${rows.join('')}</div>` : '';
        /* background-image será definido inline pelo Módulo (via |background=Arquivo.ext|) */
        }
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
         z-index: 1;
    }
 
    .character-box p {
        display: unset;
    }
 
    .character-box::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
         z-index: 0;
    }
 
    /* ===========================
      CHARACTER HEADER & INFO
  =========================== */
    .character-header {
        position: relative;
        overflow: hidden;
        display: flex;
        gap: 10px;
        flex-direction: column;
        z-index: 1;
    }
 
    .character-art {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }


        // ===========================
    .character-topbar {
         // DOM Setup & Initialization
         display: flex;
         // ===========================
         flex-direction: column;
         const skillsTab = $('#skills');
         align-items: flex-start;
         const skinsTab = $('#skins');
         padding: 8px 20px 0;
         const weaponTab = $('#weapon');
         z-index: 1;
    }


        // Clean up existing elements
    .character-name-box {
        ensureRemoved('.top-rail');
         display: flex;
         ensureRemoved('.content-card');
         align-items: center;
         ensureRemoved('.video-placeholder');
         gap: 14px;
         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();
            }
        });


        // Setup skills tab structure
    .topbar-icon {
        if (skillsTab) {
        margin-top: 8px;
            const iconBar = skillsTab.querySelector('.icon-bar');
        width: 100px;
            if (iconBar) {
        height: 100px;
                const rail = document.createElement('div');
        object-fit: none;
                rail.className = 'top-rail skills';
    }
                rail.appendChild(iconBar);
                skillsTab.prepend(rail);
            }


            const details = skillsTab.querySelector('.skills-details');
    .character-name {
            const videoContainer = skillsTab.querySelector('.video-container');
        color: #fff;
            const card = document.createElement('div');
        font-size: 56px;
            card.className = 'content-card skills-grid';
        font-family: 'Orbitron', sans-serif;
            if (details) card.appendChild(details);
        font-weight: 900;
            if (videoContainer) card.appendChild(videoContainer);
        text-shadow: 0 0 6px #000, 0 0 9px #000;
            skillsTab.appendChild(card);
    }
        }


        // Setup weapon tab structure (mirror skills)
    .topbar-description {
        if (weaponTab) {
        display: none;
            const iconBarW = weaponTab.querySelector('.icon-bar');
    }
            if (iconBarW) {
                const railW = document.createElement('div');
                railW.className = 'top-rail weapon';
                railW.appendChild(iconBarW);
                weaponTab.prepend(railW);
            }


            const detailsW = weaponTab.querySelector('.skills-details');
    .class-tags {
            const videoContainerW = weaponTab.querySelector('.video-container');
        display: flex;
            const cardW = document.createElement('div');
        gap: 9px;
            cardW.className = 'content-card skills-grid';
        flex-wrap: wrap;
            if (detailsW) cardW.appendChild(detailsW);
        margin-left: .28rem;
            if (videoContainerW) cardW.appendChild(videoContainerW);
    }
            weaponTab.appendChild(cardW);
        }


        // Setup skins tab structure
    .class-tag {
         if (skinsTab) {
         background: #353420;
            const wrapper = skinsTab.querySelector('.skins-carousel-wrapper');
        color: #fff;
            const rail = document.createElement('div');
        outline: 2px solid #000;
            rail.className = 'top-rail skins';
        padding: 1px 6px;
            const title = document.createElement('div');
        border-radius: 4px;
            title.className = 'rail-title';
        font-size: .9em;
            title.textContent = 'Skins & Spotlights';
        font-weight: 700;
            rail.appendChild(title);
        box-shadow: 0 0 2px rgb(0 0 0 / 70%);
            if (wrapper) {
    }
                const card = document.createElement('div');
                card.className = 'content-card';
                card.appendChild(wrapper);
                skinsTab.prepend(rail);
                skinsTab.appendChild(card);
            } else {
                skinsTab.prepend(rail);
            }
        }


        // ===========================
    .character-info .tier,
        // Video Management
    .character-info .class-tag {
        // ===========================
         font-size: 18px;
        const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;
         color: #bbb;
        const iconItems = iconsBar ? Array.from(iconsBar.querySelectorAll('.skill-icon')) : [];
    }
         const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;
         const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;


        const videosCache = new Map();
    /* ===========================
        const nestedVideoElByIcon = new WeakMap();
      TABS SYSTEM
         const barStack = [];
  =========================== */
         let initialBarSnapshot = null;
    .character-tabs {
         let totalVideos = 0, loadedVideos = 0, autoplay = false;
         margin: 4px 0 4px 8px;
         display: flex;
         gap: 12px;
    }


         // Track last clicked skill/subskill for language changes
    .tab-btn {
         window.__lastActiveSkillIcon = null;
        padding: 5px 20px;
         background: #333;
         color: #fff;
        border: 2px solid transparent;
        border-radius: 8px;
        font-size: 20px;
        cursor: pointer;
        font-weight: 600;
        line-height: 1;
        transition: background .15s, border-color .15s;
    }


        // Placeholder management
    .tab-btn.active {
        let placeholder = videoBox ? videoBox.querySelector('.video-placeholder') : null;
         background: #156bc7;
         let placeholderCreatedOnLoad = false;
         border-color: #156bc7;
         let placeholderConsumed = false;
    }
        if (!placeholder && videoBox) {
            placeholder = document.createElement('div');
            placeholder.className = 'video-placeholder';
            placeholder.innerHTML = '<img src="/images/d/d5/Icon_gla.png" alt="Carregando...">';
            videoBox.appendChild(placeholder);
            placeholderCreatedOnLoad = true;
        } else if (placeholder) {
            placeholderCreatedOnLoad = true;
        }
        if (!placeholder) placeholderConsumed = true;


         const removePlaceholderSmooth = () => {
    .tab-content {
            if (!placeholder) return;
         display: none;
            if (placeholder.classList.contains('fade-out')) return;
        padding: 0 8px 8px;
            placeholder.classList.add('fade-out');
        position: relative;
            const onEnd = () => {
        z-index: 2;
                try { placeholder.style.display = 'none'; } catch (e) { }
        opacity: 0;
                placeholder.removeEventListener('transitionend', onEnd);
        transform: translateY(12px);
            };
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            placeholder.addEventListener('transitionend', onEnd, { once: true });
             transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             setTimeout(() => { try { placeholder.style.display = 'none'; } catch (e) { } }, 600);
         will-change: opacity, transform;
         };
    }


        const showPlaceholder = () => {
    .tab-content.active {
            if (!videoBox) return;
        display: block;
            if (!placeholder || !placeholderCreatedOnLoad) return;
        opacity: 1;
            if (placeholderConsumed) return;
        transform: translateY(0);
            placeholder.classList.remove('fade-out');
    }
            placeholder.style.display = 'flex';
            void placeholder.offsetWidth;
        };


        // ===========================
    /* Wrapper para transição de altura das abas */
         // Video Loading & Caching
    .tabs-height-wrapper {
         // ===========================
        position: relative;
         if (iconItems.length && videoBox) {
         overflow: hidden;
            iconItems.forEach(el => {
         will-change: height;
                const src = (el.dataset.video || '').trim();
         -webkit-backface-visibility: hidden;
                const idx = el.dataset.index || '';
        backface-visibility: hidden;
                if (!src || videosCache.has(idx)) return;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }


                totalVideos++;
    /* Previne scroll e mudanças bruscas durante transição */
                const v = document.createElement('video');
    body.transitioning-tabs {
                v.className = 'skill-video';
        overflow-x: hidden !important;
                v.setAttribute('controls', '');
    }
                v.setAttribute('preload', 'auto');
                v.setAttribute('playsinline', '');
                v.style.display = 'none';
                v.dataset.index = idx;
                v.style.width = '100%';
                v.style.maxWidth = '100%';
                v.style.height = 'auto';
                v.style.aspectRatio = '16/9';
                v.style.objectFit = 'cover';
                const source = document.createElement('source');
                source.src = src;
                source.type = 'video/webm';
                v.appendChild(source);


                v.addEventListener('canplay', () => {
    body.transitioning-tabs .character-box {
                    loadedVideos++;
        overflow: hidden;
                    if (loadedVideos === 1) { try { v.pause(); v.currentTime = 0; } catch (e) { } }
    }
                    const active = $('.skill-icon.active', iconsBar);
                    if (active && active.dataset.index === idx) {
                        if (!placeholderConsumed) {
                            setTimeout(() => { removePlaceholderSmooth(); placeholderConsumed = true; }, 180);
                        }
                    }
                    if (loadedVideos === totalVideos) autoplay = true;
                });


                v.addEventListener('error', () => {
    .character-box {
                    loadedVideos++;
        overflow: visible;
                    removePlaceholderSmooth();
    }
                    if (loadedVideos === totalVideos) autoplay = true;
                });


                videoBox.appendChild(v);
    /* ===========================
                videosCache.set(idx, v);
      SKILLS SYSTEM
            });
  =========================== */
        }
    .skills-container {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }


         if (totalVideos === 0 && placeholder) {
    .skills-details {
            placeholder.style.display = 'none';
         flex: 1;
            placeholder.classList.add('fade-out');
        display: flex;
         }
        flex-direction: column;
        gap: 10px;
        width: auto;
         justify-content: center;
    }


        // ===========================
    /* ===========================
        // Skill Bar Wiring (root and nested)
      SKILL ICONS & BAR
        // ===========================
      =========================== */
        function wireTooltipsForNewIcons() {
    .icon-bar {
            const tip = document.querySelector('.skill-tooltip');
        display: flex;
            if (!tip) return;
        flex-wrap: nowrap;
            let lockUntil2 = 0;
        gap: 10px;
            Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
        width: 100%;
                if (icon.dataset.tipwired) return;
        overflow-x: auto;
                icon.dataset.tipwired = '1';
        overflow-y: hidden;
                const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
        padding: 6px 6px;
                if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
        margin-bottom: 6px;
                if (icon.hasAttribute('title')) icon.removeAttribute('title');
        scrollbar-width: thin;
                const img = icon.querySelector('img');
        scrollbar-color: #ababab transparent;
                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'); }
        scroll-behavior: smooth;
                const measureAndPos = (el) => {
        justify-content: flex-start;
                    if (!el || tip.getAttribute('aria-hidden') === 'true') return;
        align-items: center;
                    tip.style.left = '0px'; tip.style.top = '0px';
        position: relative;
                    const rect = el.getBoundingClientRect(); const tr = tip.getBoundingClientRect();
        z-index: 4;
                    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) {
    /* Back handle for nested skill bars */
            // Hide all existing videos
    .top-rail.skills {
            if (videoBox) {
        position: relative;
                Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
        overflow: visible;
            }
        z-index: 10;
            if (window.__subskills) window.__subskills.hideAll?.(videoBox);
        transition: width .24s ease, max-width .24s ease;
    }


            const hasIdx = !!el.dataset.index;
    .skills-back-wrapper {
            const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');
        display: none;
            if (!videoBox || !hasVideo) {
        position: absolute;
                if (videoBox) { videoBox.style.display = 'none'; if (placeholder) { placeholder.style.display = 'none'; placeholder.classList.add('fade-out'); } }
        left: 50px;
                return;
        /* move wrapper far to the right to hide button */
            }
        top: 50%;
        transform: translateY(-50%);
        width: 70px;
        height: 95%;
        z-index: -1;
        pointer-events: none;
    }


            if (hasIdx && videosCache.has(el.dataset.index)) {
    /* Máscara interna para não “vazar” a linguinha atrás do rail.
                const v = videosCache.get(el.dataset.index);
      Fica entre o botão (z:-1) e o rail (z:10), cobrindo a área interna à esquerda. */
                videoBox.style.display = 'block';
    .skills-rail-wrap {
                v.style.display = 'block';
        position: relative;
                try { v.currentTime = 0; } catch (e) { }
        z-index: 0;
                const suppress = document.body.dataset.suppressSkillPlay === '1';
        /* cria contexto para o ::before */
                if (!suppress) { if (autoplay) v.play().catch(() => { }); } else { try { v.pause(); } catch (e) { } }
    }
                return;
            }


            // Nested or custom icon video
    .skills-rail-wrap::before {
            let v = nestedVideoElByIcon.get(el);
        content: "";
            if (!v) {
        position: absolute;
                v = document.createElement('video');
        left: 0;
                v.className = 'skill-video';
        top: 0;
                v.setAttribute('controls', ''); v.setAttribute('preload', 'auto'); v.setAttribute('playsinline', '');
        width: 70px;
                v.style.display = 'none'; v.style.width = '100%'; v.style.height = 'auto'; v.style.aspectRatio = '16/9'; v.style.objectFit = 'cover';
        /* mesmo tamanho do handle */
                const src = document.createElement('source');
        height: 100%;
                src.src = el.dataset.video; src.type = 'video/webm';
        background: rgba(28, 28, 34, .95);
                v.appendChild(src);
        /* igual ao .top-rail bg */
                videoBox.appendChild(v);
        border-radius: 12px 0 0 12px;
                nestedVideoElByIcon.set(el, v);
        border: 2px solid rgba(255, 255, 255, .08);
            }
        border-right: none;
            videoBox.style.display = 'block';
        box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
            v.style.display = 'block';
        pointer-events: none;
            try { v.currentTime = 0; } catch (e) { }
        z-index: 0;
            const suppress = document.body.dataset.suppressSkillPlay === '1';
    }
            if (!suppress) { if (autoplay) v.play().catch(() => { }); } else { try { v.pause(); } catch (e) { } }
        }


         function wireClicksForCurrentBar() {
    .skills-back-wrapper .skills-back {
            const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
        display: flex;
            currIcons.forEach(el => {
        position: absolute;
                if (el.dataset.wired) return;
         left: 0;
                el.dataset.wired = '1';
        top: 0;
                const label = el.dataset.nome || el.dataset.name || '';
        transform: translateX(-97%);
                el.setAttribute('aria-label', label);
        /* hidden - only tiny peek visible */
                if (el.hasAttribute('title')) el.removeAttribute('title');
        width: 70px;
                const img = el.querySelector('img'); if (img) { img.setAttribute('alt', ''); if (img.hasAttribute('title')) img.removeAttribute('title'); }
        height: 100%;
                el.addEventListener('click', () => {
        padding: 0;
                    const skillsRoot = document.getElementById('skills');
        border-radius: 12px 0 0 12px;
                    const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
        border: 2px solid rgba(255, 255, 255, .08);
                    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' };
        border-right: none;
                    const name = el.dataset.nome || el.dataset.name || '';
        background: rgba(28, 28, 34, .95);
                    const level = (el.dataset.level || '').trim();
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        pointer-events: all;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        transition: transform .22s ease, background .22s ease, color .22s ease;
        overflow: visible;
    }


                    // Pick description from current language (respects language changes)
    .skills-back-wrapper .skills-back:hover {
                    const lang = getLangKey();
        transform: translateX(-150%);
                    const descPack = {
        /* slide out further to the left on hover */
                        pt: el.dataset.descPt || '',
        background: rgba(40, 40, 48, .95);
                        en: el.dataset.descEn || '',
        color: rgba(255, 255, 255, 1.0);
                        es: el.dataset.descEs || '',
        box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.12);
                        pl: el.dataset.descPl || ''
        border-color: rgba(255, 255, 255, 0.12);
                    };
    }
                    const chosenDesc = descPack[lang] || descPack.pt || descPack.en || descPack.es || descPack.pl || el.dataset.desc || '';
                    const descHtml = chosenDesc.replace(/'''(.*?)'''/g, '<b>$1</b>');


                    const attrsHTML = el.dataset.atr ? renderAttributes(el.dataset.atr) : (el.dataset.subattrs ? renderSubAttributesFromObj(JSON.parse(el.dataset.subattrs), L) : '');
    @keyframes backPeekPulse {
                    if (descBox) {
                        descBox.innerHTML = `
        <div class="skill-title"><h3>${name}</h3></div>
        ${level ? `<div class=\"skill-level-line\"><span class=\"attr-label\">${L.level} ${level}</span></div>` : ''}
        ${attrsHTML}
        <div class="desc">${descHtml}</div>`;
                    }
                    // Active state
                    currIcons.forEach(i => i.classList.remove('active')); el.classList.add('active'); if (!autoplay && loadedVideos > 0) autoplay = true;
                    // Track for language changes
                    window.__lastActiveSkillIcon = el;
                    // Video
                    showVideoForIcon(el);
                    // Nested skills UX: clicou na skill -> troca a barra se houver subs; se for 'back', volta
                    const subsRaw = el.dataset.subs || el.getAttribute('data-subs');
                    const isBack = el.dataset.back === 'true' || el.getAttribute('data-back') === 'true';
                    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 (subsRaw && subsRaw.trim() !== '') {
                        try { const subs = JSON.parse(subsRaw); pushSubBarFrom(subs, el); } catch { /* no-op */ }
                    }
                });
            });
            // Removido: badges de +/− (abrir/voltar via clique direto no ícone)
            wireTooltipsForNewIcons();
        }


         function snapshotCurrentBarItemsFromDOM() {
         0%,
             return Array.from(iconsBar.querySelectorAll('.skill-icon')).map(el => {
        100% {
                const img = el.querySelector('img');
             box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
                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 || '';
                return {
                    name: el.dataset.nome || el.dataset.name || '',
                    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,
                    noback: el.dataset.noback || null
                };
            });
         }
         }


         function ensureBackButton() {
         50% {
             const rail = iconsBar.closest('.top-rail.skills'); if (!rail) return null;
             box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.18);
            // Wrap rail in a dedicated container if not already wrapped
            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';
                // keep layout
                parentNode.insertBefore(newWrap, rail);
                newWrap.appendChild(rail);
                wrap = newWrap;
            }
            // Ensure back-wrapper exists as sibling layered behind
            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');
                // 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>';
                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';
                    if (!barStack.length) btnInner.classList.remove('peek');
                });
            }
            // Check if current level has noback flag
            const currentLevel = barStack[barStack.length - 1];
            const shouldHide = currentLevel && currentLevel.noback;
            backWrap.style.display = (barStack.length && !shouldHide) ? 'block' : 'none';
            const btnInner = backWrap.querySelector('.skills-back');
            return btnInner;
         }
         }
    }


        function renderBarFromItems(items) {
    .skills-back-wrapper .skills-back.peek {
            iconsBar.innerHTML = '';
        animation: backPeekPulse 1.4s ease-in-out infinite;
            items.forEach((it, idx) => {
    }
                const node = document.createElement('div'); node.className = 'skill-icon';
                node.dataset.nome = it.name || '';
                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.noback) node.dataset.noback = it.noback;
                // mark nested icons (no dataset.index)
                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);
            });
            // Animação de entrada (igual quando entra em subskills)
            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);
                });
            });
            wireClicksForCurrentBar(); const b = ensureBackButton(); if (b) b.classList.add('peek');
        }


        function pushSubBarFrom(subs, parentIconEl) {
    .skills-back-wrapper .skills-back .back-chevron {
            // Check if parent has noback flag
        display: block;
            const hasNoBack = parentIconEl && (parentIconEl.dataset.noback === 'true' || parentIconEl.getAttribute('data-noback') === 'true');
        width: 90%;
            // Save current
        height: 90%;
            barStack.push({ items: snapshotCurrentBarItemsFromDOM(), noback: hasNoBack }); ensureBackButton();
    }
            // Build next items from JSON
            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, '<b>$1</b>');
                const attrsHTML = renderSubAttributesFromObj(s, L);
                // store sub-attrs object JSON to re-render attributes later
                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) || ''),
                    // 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,
                    back: s.back === true ? 'true' : null
                };
            });
            // Render and attach subattrs object via data-subattrs
            iconsBar.innerHTML = '';
            items.forEach((it, iIdx) => {
                const node = document.createElement('div'); node.className = 'skill-icon'; node.dataset.nested = '1';
                node.dataset.nome = it.name || '';
                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.back) node.dataset.back = it.back;
                const img = document.createElement('img'); img.alt = ''; img.src = it.iconURL; node.appendChild(img);
                iconsBar.appendChild(node);
            });
            // pequena animação de entrada
            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);
                });
            });
            wireClicksForCurrentBar(); const b2 = ensureBackButton(); if (b2) b2.classList.add('peek');
        }


        // Reage à troca de idioma (emitida pelo char translator)
    .icon-bar::-webkit-scrollbar {
        window.addEventListener('gla:langChanged', () => {
        height: 6px;
            const skillsRoot = document.getElementById('skills');
    }
            const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
            const lang = getLangKey();
            // Atualiza dataset.desc dos ícones da barra atual (skills)
            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;
            });
            // Atualiza descrições salvas no stack (para futuras barras ao voltar)
            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;
                });
            });
            // Atualiza dataset.desc dos ícones da weapon tab (se existir)
            const weaponTab = document.getElementById('weapon');
            if (weaponTab) {
                const weaponIconBar = weaponTab.querySelector('.icon-bar');
                if (weaponIconBar) {
                    Array.from(weaponIconBar.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;
                    });
                }
            }
        });


        // Wire initial (root) bar and add + badges
    .icon-bar::-webkit-scrollbar-track {
         wireClicksForCurrentBar(); const b0 = ensureBackButton(); if (b0) { b0.classList.add('peek'); b0.style.alignSelf = 'stretch'; }
         background: transparent;
    }


        // ===========================
    .icon-bar::-webkit-scrollbar-thumb {
        // Tooltip System
        background: #151515;
        // ===========================
        border-radius: 3px;
        (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 };
    /* Icon Variables */
    :root {
        --icon-size: 39px;
        --icon-radius: 8px;
        --icon-ring-w: 2px;
        --icon-idle: #bbb;
        --icon-active: #FFD257;
        --icon-active-ring: rgba(255, 210, 87, .45);
        --icon-active-glow: rgba(255, 210, 87, .35);
        --skill-pane-height: unset;
    }


            function measureAndPos(el) {
    .icon-bar .skill-icon {
                if (!el || tip.getAttribute('aria-hidden') === 'true') return;
        width: var(--icon-size);
                tip.style.left = '0px';
        height: var(--icon-size);
                tip.style.top = '0px';
        position: relative;
                const rect = el.getBoundingClientRect();
        flex: 0 0 auto;
                const tr = tip.getBoundingClientRect();
        border-radius: var(--icon-radius);
                let left = Math.round(rect.left + (rect.width - tr.width) / 2);
        overflow: hidden;
                left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
        contain: paint;
                const coarse = (window.matchMedia && matchMedia('(pointer: coarse)').matches) || (window.innerWidth <= 600);
        margin-top: 0;
                let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
        display: flex;
                if (top < 8) top = Math.round(rect.bottom + 10);
        align-items: center;
                tip.style.left = left + 'px';
        justify-content: center;
                tip.style.top = top + 'px';
        -webkit-tap-highlight-color: transparent;
            }
        background-clip: padding-box;
    }


            function show(el, text) {
    /* small + badge to indicate nested subs */
                tip.textContent = text || '';
    .icon-bar .skill-icon .sub-badge {
                tip.setAttribute('aria-hidden', 'false');
        position: absolute;
                measureAndPos(el);
        right: 2px;
                tip.style.opacity = '1';
        bottom: 2px;
            }
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #156bc7;
        color: #fff;
        font-weight: 900;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
        cursor: pointer;
        z-index: 3;
        user-select: none;
    }


            function hide() {
    /* back badge (−) to return to previous bar */
                tip.setAttribute('aria-hidden', 'true');
    .icon-bar .skill-icon .back-badge {
                tip.style.opacity = '0';
        position: absolute;
                tip.style.left = '-9999px';
        right: 2px;
                tip.style.top = '-9999px';
        bottom: 2px;
            }
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #c74615;
        color: #fff;
        font-weight: 900;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
        cursor: pointer;
        z-index: 3;
        user-select: none;
    }


            // Export to global for subskills to use
    .icon-bar .skill-icon img {
            window.__globalSkillTooltip = {
        display: block;
                show,
        width: 100%;
                hide,
        height: 100%;
                measureAndPos,
        object-fit: cover;
                lockUntil: lockUntilRef
        border-radius: inherit;
            };
        clip-path: inset(0 round var(--icon-radius));
        -webkit-clip-path: inset(0 round var(--icon-radius));
        will-change: transform;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: transform .12s ease;
    }


            Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
    /* Icon Ring Effects */
                if (icon.dataset.tipwired) return;
    .icon-bar .skill-icon::after {
                icon.dataset.tipwired = '1';
        content: "";
                const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
        position: absolute;
                if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
        inset: 0;
                if (icon.hasAttribute('title')) icon.removeAttribute('title');
        border-radius: inherit;
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle);
        pointer-events: none;
        z-index: 2;
        transition: box-shadow .14s ease;
    }


                const img = icon.querySelector('img');
    .icon-bar .skill-icon::before {
                if (img) {
        content: "";
                    const imgAlt = img.getAttribute('alt') || '';
        position: absolute;
                    const imgTitle = img.getAttribute('title') || '';
        inset: 0;
                    if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle);
        border-radius: inherit;
                    img.setAttribute('alt', '');
        pointer-events: none;
                    if (img.hasAttribute('title')) img.removeAttribute('title');
        z-index: 1;
                }
        box-shadow: none;
        opacity: 0;
        transition: opacity .14s ease, box-shadow .14s ease;
    }


                icon.addEventListener('mouseenter', () => show(icon, label));
    .icon-bar .skill-icon:hover::after {
                icon.addEventListener('mousemove', () => { if (performance.now() >= lockUntilRef.value) measureAndPos(icon); });
        box-shadow: inset 0 0 0 var(--icon-ring-w) #e0e0e0;
                icon.addEventListener('click', () => { lockUntilRef.value = performance.now() + 240; measureAndPos(icon); });
    }
                icon.addEventListener('mouseleave', hide);
            });


            // Also wire subskill icons present at load (kept in sync when sub-rail opens)
    .icon-bar .skill-icon.active::after {
            Array.from(document.querySelectorAll('.subskills-rail .subicon')).forEach(sub => {
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active);
                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', () => {
    .icon-bar .skill-icon.active::before {
                const visible = document.querySelector('.skill-tooltip[aria-hidden="false"]');
        box-shadow: 0 0 10px 2px var(--icon-active-glow), 0 0 0 4px var(--icon-active-ring);
                if (!visible) return;
        opacity: 1;
                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);
            });
        })();


        // ===========================
    .icon-bar .skill-icon.active img {
        // Tab System (com transição suave de altura)
        transform: scale(1.10);
        // ===========================
    }
        (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');


            // Cria o wrapper UMA VEZ no início
    @media (prefers-reduced-motion: reduce) {
            let wrapper = characterBox.querySelector('.tabs-height-wrapper');
        .icon-bar .skill-icon {
            if (!wrapper) {
            transition: none;
                wrapper = document.createElement('div');
        }
                wrapper.className = 'tabs-height-wrapper';
    }


                // Move os conteúdos das abas para dentro do wrapper
    /* ===========================
                contents.forEach(c => {
      SKILL DESCRIPTION & CONTENT
                    wrapper.appendChild(c);
      =========================== */
                });
    .skill-title {
        margin: 0 0 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }


                // Encontra onde inserir o wrapper (após as tabs)
    .skill-title h3 {
                const tabsElement = characterBox.querySelector('.character-tabs');
        margin: 0;
                if (tabsElement && tabsElement.nextSibling) {
        width: 100%;
                    characterBox.insertBefore(wrapper, tabsElement.nextSibling);
        text-align: center;
                } else {
        font-size: 1.6em;
                    characterBox.appendChild(wrapper);
        color: #fff;
                }
    }
            }


            // Função para animar a altura suavemente (retorna Promise)
    .desc-box {
            // NOVA ESTRATÉGIA: aba já está visível mas invisível (opacity:0, visibility:hidden)
        padding: 12px 18px;
            async function smoothHeightTransition(fromTab, toTab) {
        background: transparent;
                if (!wrapper) return Promise.resolve();
        border-radius: 6px;
        position: relative;
        box-shadow: none;
        color: #fff;
        transition: all .3s ease;
        z-index: 2;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        text-shadow: none;
        height: auto;
        min-height: 0;
    }


                // Salva o scroll atual
    .desc-box h3 {
                const scrollY = window.scrollY;
        font-size: 2.7em;
        margin: 0;
        text-align: center;
        padding-top: 0;
    }


                // Mede a altura ATUAL
    .desc {
                const currentHeight = wrapper.getBoundingClientRect().height;
        font-size: 1.2em !important;
        line-height: 1.7 !important;
        letter-spacing: .01em;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        margin-top: 5px;
        padding-right: 8px;
        color: #f1efe9;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        flex: 0 0 auto !important;
    }


                // A aba toTab JÁ está display:block mas invisível
    .desc b,
                // Aguarda ela renderizar COMPLETAMENTE na posição real
    .desc strong {
                await new Promise((resolve) => {
        font-weight: 700;
                    const videoContainers = toTab.querySelectorAll('.video-container');
        color: #fff;
                    const contentCard = toTab.querySelector('.content-card');
    }


                    if (videoContainers.length === 0) {
    .desc::-webkit-scrollbar {
                        // Sem vídeos, aguarda 3 frames
        width: 7px;
                        requestAnimationFrame(() => {
        height: 7px;
                            requestAnimationFrame(() => {
    }
                                requestAnimationFrame(() => resolve());
                            });
                        });
                        return;
                    }


                    // COM vídeos: aguarda até que TUDO esteja renderizado
    .desc::-webkit-scrollbar-thumb {
                    // Faz polling da altura até estabilizar
        background: #156bc7;
                    let lastHeight = 0;
        border-radius: 10px;
                    let stableCount = 0;
    }
                    const checksNeeded = 3; // Altura precisa ficar estável por 3 checks
                    let totalChecks = 0;
                    const maxChecks = 15; // Máximo 15 checks (750ms)


                    function checkStability() {
    .desc::-webkit-scrollbar-track {
                        totalChecks++;
        background: #151515a8;
        border-radius: 10px;
    }


                        // Mede altura atual da aba
    /* ===========================
                        const currentTabHeight = toTab.scrollHeight;
      ATTRIBUTES & STATS
      =========================== */
    .attrs,
    .attr-list {
        display: block;
    }


                        // Verifica se estabilizou
    .desc-box .attrs,
                        if (Math.abs(currentTabHeight - lastHeight) < 5) {
    .desc-box .attr-list,
                            stableCount++;
    .desc-box .attrs *,
                        } else {
    .desc-box .attr-list * {
                            stableCount = 0; // Resetar se mudou
        text-shadow: none;
                        }
        font-family: 'Noto Sans', sans-serif;
    }


                        lastHeight = currentTabHeight;
    .attrs__row,
    .attr-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 22px;
        line-height: 1.2;
    }


                        // Se estável por N checks ou atingiu máximo, resolve
    .attrs__row--empty,
                        if (stableCount >= checksNeeded || totalChecks >= maxChecks) {
    .attr-row.is-empty {
                            resolve();
        display: none;
                        } else {
    }
                            // Continua checando a cada 50ms
                            setTimeout(checkStability, 50);
                        }
                    }


                    // Inicia checagem após um pequeno delay
    .attrs__label,
                    setTimeout(checkStability, 50);
    .attr-label {
                });
        font-weight: 700;
        color: #f0c87b;
        font-size: .98rem;
        white-space: nowrap;
        margin: 0;
    }


                // AGORA mede a altura REAL (após tudo renderizado)
    .attrs__value,
                const nextHeight = toTab.getBoundingClientRect().height;
    .attr-value {
                const finalHeight = Math.max(nextHeight, 100);
        color: #fff;
        font-weight: 800;
        font-size: .98rem;
        letter-spacing: .01em;
        margin: 0;
    }


                // Se alturas são similares (< 30px diferença), não anima
    /* ===========================
                if (Math.abs(finalHeight - currentHeight) < 30) {
      VIDEO CONTAINER
                    wrapper.style.height = '';
      =========================== */
                    return Promise.resolve();
    .video-container {
                }
        position: relative;
        width: 100%;
        max-width: 100%;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        box-shadow: none;
        overflow: hidden;
        padding: 0;
        z-index: 2;
    }


                // Define altura inicial fixa
    .video-container>video {
                wrapper.style.overflow = 'hidden';
        width: 100%;
                wrapper.style.height = currentHeight + 'px';
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: contain;
        object-position: center;
        z-index: 2;
        display: block;
        border-radius: 6px;
        background: #000;
    }


                // Força reflow
    .video-placeholder {
                wrapper.offsetHeight;
        position: absolute;
        inset: 0;
        z-index: 6;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 1;
        transition: opacity .28s ease;
        background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
    }


                // Define transição
    .video-placeholder img {
                wrapper.style.transition = 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
        max-width: 160px;
        width: auto;
        height: auto;
        opacity: 0.98;
        display: block;
    }


                // Anima para a altura FINAL (já medida corretamente)
    .video-placeholder.fade-out {
                requestAnimationFrame(() => {
        opacity: 0;
                    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 => {
      LAYOUT COMPONENTS
                    setTimeout(() => {
      =========================== */
                        wrapper.style.height = '';
    .top-rail {
                        wrapper.style.transition = '';
        display: flex;
                        wrapper.style.overflow = '';
        align-items: center;
                        resolve();
        justify-content: center;
                    }, 320);
        width: max-content;
                });
        max-width: 96vw;
            }
        margin: 0px auto;
        padding: 5px 5px;
        background: rgba(28, 28, 34, .95);
        border: 2px solid rgba(255, 255, 255, .08);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }


            tabs.forEach(btn => {
    .top-rail .rail-title {
                if (btn.dataset.wiredTab) return;
        display: none;
                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; // Já está na aba
    .top-rail.skins .rail-title {
        display: block;
        font-weight: 800;
        font-size: clamp(20px, 2.2vw, 28px);
        color: #fff;
        margin-right: auto;
    }


                    // Previne scroll durante a transição
    .top-rail .icon-bar {
                    document.body.classList.add('transitioning-tabs');
        width: auto;
        justify-content: center;
        margin: 0;
        overflow-x: auto;
    }


                    // Desativa a aba atual (fade out)
    .content-card {
                    if (currentActive) {
        width: min(1600px, 96vw);
                        currentActive.style.opacity = '0';
        max-width: 96vw;
                        currentActive.style.transform = 'translateY(-8px)';
        margin: 10px auto;
                    }
        background: rgba(28, 28, 34, .95);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .30);
        padding: 18px;
        z-index: 2;
    }


                    // Delay para fade out completar
    .content-card.skills-grid {
                    setTimeout(async () => {
        display: grid;
                        // Remove display de TODAS as abas inativas
        grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);
                        contents.forEach(c => {
        gap: 16px;
                            if (c !== nextActive) {
        align-items: start;
                                c.style.display = 'none';
        grid-auto-rows: auto;
                                c.classList.remove('active');
        margin: 10px auto 0;
                            }
    }
                        });


                        // Ativa os botões
    /* ===========================
                        tabs.forEach(b => b.classList.toggle('active', b === btn));
      TIER SYSTEM
      =========================== */
    .tier-bronze .topbar-icon,
    .tier-bronze .tier {
        outline: 2px solid #7b4e2f;
    }


                        // MOSTRA a nova aba INVISÍVEL na posição real
    .tier-silver .topbar-icon,
                        if (nextActive) {
    .tier-silver .tier {
                            nextActive.classList.add('active');
        outline: 2px solid #d6d2d2;
                            nextActive.style.display = 'block';
    }
                            nextActive.style.opacity = '0';
                            nextActive.style.visibility = 'hidden';


                            // Força renderização completa ANTES de medir
    .tier-gold .topbar-icon,
                            nextActive.offsetHeight;
    .tier-gold .tier {
        outline: 2px solid #fcd300;
    }


                            // Pré-carrega/ativa conteúdo padrão da aba (ex.: vídeo) ANTES da medição
    .tier-diamond .topbar-icon,
                            // Assim a altura final já considera o player visível
    .tier-diamond .tier {
                            try {
        outline: 2px solid #60dae2;
                                if (target === 'weapon' || 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) {
                                            // Evita autoplay durante preparação
                                            const had = document.body.dataset.suppressSkillPlay;
                                            document.body.dataset.suppressSkillPlay = '1';
                                            toClick.click();
                                            // Mantém a flag até o fim da transição (limpamos mais abaixo)
                                            if (had) document.body.dataset.suppressSkillPlay = had;
                                        }
                                    }
                                }
                            } catch (e) { /* no-op */ }
                        }


                        // AGORA anima altura (com a aba já renderizada na posição correta)
    /* ===========================
                        if (currentActive && nextActive) {
      RESPONSIVE DESIGN & MOBILE
                            await smoothHeightTransition(currentActive, nextActive);
      =========================== */
                        }
    @media (max-width:1100px) {
        .top-rail {
            flex-direction: column;
            align-items: stretch;
        }


                        // Após altura estar correta, MOSTRA a nova aba
        .top-rail .icon-bar {
                        if (nextActive) {
            order: 2;
                            nextActive.style.visibility = '';
            width: 100%;
                            nextActive.style.transform = 'translateY(12px)';
            flex-wrap: wrap;
        }


                            // Anima entrada
        .content-card.skills-grid {
                            requestAnimationFrame(() => {
            grid-template-columns: 1fr;
                                nextActive.style.opacity = '1';
            gap: 12px;
                                nextActive.style.transform = 'translateY(0)';
        }


                                // Limpa estilos inline e classe de transição
        .video-container {
                                setTimeout(() => {
            width: 80%;
                                    nextActive.style.opacity = '';
            max-width: 820px;
                                    nextActive.style.transform = '';
            align-self: center;
                                    document.body.classList.remove('transitioning-tabs');
        }
                                    // Libera flag de autoplay suprimido (se aplicada acima)
    }
                                    try { delete document.body.dataset.suppressSkillPlay; } catch { }
                                }, 300);
                            });
                        }
                    }, 120);


                    // Executa ações após a transição completa
    @media (max-aspect-ratio: 3/4) {
                    setTimeout(() => {
        .character-header .character-art {
                        syncDescHeight();
            display: none;
                        if (target === 'skins') {
         }
                            // Pause all cached main skill videos
                            videosCache.forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
                            // Pause all nested/subskill videos
                            if (videoBox) {
                                videoBox.querySelectorAll('video.skill-video').forEach(v => {
                                    try { v.pause(); } catch (e) { }
                                    v.style.display = 'none';
                                });
                            }
                            // Hide subskill videos via API
                            if (window.__subskills) window.__subskills.hideAll?.(videoBox);
                            if (videoBox && placeholder) { placeholder.style.display = 'none'; placeholder.classList.add('fade-out'); }
                            // Pause weapon videos when entering skins
                            const weaponTabEl = document.getElementById('weapon');
                            if (weaponTabEl) {
                                const wvb = weaponTabEl.querySelector('.video-container');
                                if (wvb) wvb.querySelectorAll('video.skill-video').forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
                            }
                        } else if (target === 'weapon') {
                            // Initialize or refresh weapon tab
                            const weaponTab = document.getElementById('weapon');
                            if (weaponTab) {
                                const activeWeaponIcon = weaponTab.querySelector('.icon-bar .skill-icon.active');
                                const toClick = activeWeaponIcon || weaponTab.querySelector('.icon-bar .skill-icon');
                                if (toClick) toClick.click();
                                // Pause skills videos when entering weapon
                                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'; });
                            }
                        } else {
                            const activeIcon = document.querySelector('.icon-bar .skill-icon.active');
                            if (activeIcon) activeIcon.click();
                            // Pause weapon videos when returning to skills
                            const weaponTabEl = document.getElementById('weapon');
                            if (weaponTabEl) {
                                const wvb = weaponTabEl.querySelector('.video-container');
                                if (wvb) wvb.querySelectorAll('video.skill-video').forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
                            }
                        }
                    }, 450); // Após transição completar (120ms + 300ms + buffer)
                });
            });
         })();


         // ===========================
         .video-container {
        // Skins Navigation
             width: 80%;
        // ===========================
             border-radius: 3%;
        (function initSkinsArrows() {
             margin-top: 2%;
            const carousel = $('.skins-carousel');
             align-self: center;
             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();
        })();


        // ===========================
    @media (max-width:600px) {
        // Utility Functions
        .content-card {
        // ===========================
             box-sizing: border-box;
        function renderAttributes(str) {
             max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
            const skillsRoot = document.getElementById('skills');
             width: 100%;
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
            margin: 10px auto;
             const langRaw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
            padding: 12px;
            const langKey = i18nMap[langRaw] ? langRaw : (i18nMap[langRaw.split('-')[0]] ? langRaw.split('-')[0] : 'pt');
            border-radius: 10px;
             const L = i18nMap[langKey] || i18nMap.pt || {
            overflow: hidden;
                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());
        .content-card.skills-grid {
            const pve = parseInt(vals[0], 10);
             grid-template-columns: 1fr;
             const pvp = parseInt(vals[1], 10);
             gap: 12px;
             const ene = parseInt(vals[2], 10);
        }
            const cd = parseInt(vals[3], 10);


            const rows = [];
        .top-rail {
             if (!isNaN(cd)) rows.push([L.cooldown, cd]);
             width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
             if (!isNaN(ene) && ene !== 0) {
             max-width: 100%;
                const label = ene > 0 ? L.energy_gain : L.energy_cost;
            margin: 0 auto 8px;
                rows.push([label, Math.abs(ene)]);
            padding: 6px 8px;
             }
             border-radius: 0;
             if (!isNaN(pve)) rows.push([L.power, pve]);
             box-sizing: border-box;
             if (!isNaN(pvp)) rows.push([L.power_pvp, pvp]);
             overflow: hidden;
        }


             if (!rows.length) return '';
        .top-rail .icon-bar {
             const html = rows.map(([label, value]) => `
            width: 100%;
    <div class="attr-row">
             padding: 0 6px;
      <span class="attr-label">${label}</span>
             gap: 12px;
      <span class="attr-value">${value}</span>
            justify-content: flex-start;
    </div>`).join('');
            overflow-x: auto;
             return `<div class="attr-list">${html}</div>`;
             -webkit-overflow-scrolling: touch;
         }
         }


         function syncDescHeight() {
         :root {
             // no-op on purpose
             --icon-size: 92px;
         }
         }


         // ===========================
         .icon-bar .skill-icon {
        // Event Listeners & Initialization
            width: var(--icon-size);
        // ===========================
            height: var(--icon-size);
        window.addEventListener('resize', syncDescHeight);
            flex: 0 0 auto;
        if (videoBox) new ResizeObserver(syncDescHeight).observe(videoBox);
        }


         iconItems.forEach(el => {
         .video-container,
            const wired = !!el.dataset._sync_wired;
        .skins-carousel-wrapper,
            if (wired) return;
        .skins-carousel {
            el.dataset._sync_wired = '1';
             max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
             el.addEventListener('click', () => {
             box-sizing: border-box;
                Promise.resolve().then(syncDescHeight);
         }
             });
         });


         if (iconsBar) addOnce(iconsBar, 'wheel', (e) => {
         .video-container>video,
            if (e.deltaY) {
        .video-container img,
                e.preventDefault();
        .skins-carousel img {
                iconsBar.scrollLeft += e.deltaY;
            max-width: 100%;
             }
            width: 100%;
         });
             height: auto;
         }


         // Initialize first skill
         html,
         if (iconItems.length) {
         body,
            const first = iconItems[0];
        .mw-body,
            if (first) {
        .mw-body-content {
                if (!first.classList.contains('active')) first.classList.add('active');
             overflow-x: hidden;
                setTimeout(() => first.click(), 0);
             }
         }
         }
    }
    /* ===========================
      OVERFLOW PROTECTION
  =========================== */
    html,
    body,
    .mw-body,
    .mw-body-content {
        box-sizing: border-box;
        max-width: 100vw;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .content-card,
    .top-rail,
    .video-container,
    .skins-carousel-wrapper,
    .skins-carousel {
        box-sizing: border-box;
        max-width: 100%;
    }
    .content-card *,
    .top-rail *,
    .video-container * {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* ===========================
      ICON ENHANCEMENTS & OVERRIDES
      =========================== */
    :root {
        --icon-size: 50px;
        --icon-radius: 10px;
        --icon-idle: #cfcfcf;
        --icon-active: #FFD95A;
        --icon-active-ring: rgba(255, 217, 90, 0.45);
        --icon-active-glow: rgba(255, 217, 90, 0.30);
        --icon-ring-w: 2px;
    }
    .icon-bar .skill-icon {
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
        position: relative;
        border: none !important;
        outline: none !important;
        overflow: hidden;
        border-radius: var(--icon-radius);
        contain: paint;
        isolation: isolate;
        will-change: transform;
        transform: translateZ(0);
    }
    .icon-bar .skill-icon img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        -webkit-clip-path: inset(0 round var(--icon-radius));
        clip-path: inset(0 round var(--icon-radius));
        transition: transform .12s ease;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
    .icon-bar .skill-icon::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 2;
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle) !important;
        transition: box-shadow .12s ease;
    }
    .icon-bar .skill-icon::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: calc(var(--icon-radius) + 2px);
        pointer-events: none;
        z-index: 1;
        box-shadow: none;
        opacity: 0;
        transition: opacity .12s ease, box-shadow .12s ease;
    }


        // ===========================
    .icon-bar .skill-icon.active {
         // Weapon Tab Setup (if exists)
         transform: scale(1.08);
        // ===========================
    }
        (function initWeaponTab() {
            const weaponTab = document.getElementById('weapon');
            if (!weaponTab) return;


            const weaponIconBar = weaponTab.querySelector('.icon-bar');
    .icon-bar .skill-icon.active::after {
            const weaponIconItems = weaponIconBar ? Array.from(weaponIconBar.querySelectorAll('.skill-icon')) : [];
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active) !important;
            const weaponDescBox = weaponTab.querySelector('.desc-box');
    }
            const weaponVideoBox = weaponTab.querySelector('.video-container');


             if (!weaponIconBar || !weaponIconItems.length) return;
    .icon-bar .skill-icon.active::before {
        opacity: 1;
        box-shadow:
             0 0 12px 3px var(--icon-active-glow),
            0 0 0 4px var(--icon-active-ring) !important;
    }


            const weaponVideosCache = new Map();
    .icon-bar .skill-icon.active img {
            let weaponTotalVideos = 0, weaponLoadedVideos = 0, weaponAutoplay = false;
        transform: scale(1.08);
    }


            // Load weapon videos
    .icon-bar .skill-icon:hover:not(.active)::after {
            weaponIconItems.forEach(el => {
        box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !important;
                const src = (el.dataset.video || '').trim();
    }
                const idx = el.dataset.index || '';
                if (!src || weaponVideosCache.has(idx)) return;


                weaponTotalVideos++;
    /* ===========================
                const v = document.createElement('video');
      TOOLTIP SYSTEM
                v.className = 'skill-video';
  =========================== */
                v.setAttribute('controls', '');
    .skill-tooltip {
                v.setAttribute('preload', 'auto');
        position: fixed;
                v.setAttribute('playsinline', '');
        z-index: 9999;
                v.style.display = 'none';
        pointer-events: none;
                v.dataset.index = idx;
        padding: 6px 8px;
                v.style.width = '100%';
        border-radius: 6px;
                v.style.maxWidth = '100%';
        background: rgba(17, 17, 17, .9);
                v.style.height = 'auto';
        color: #fff;
                v.style.aspectRatio = '16/9';
        font-size: 14px;
                v.style.objectFit = 'cover';
        box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
                const source = document.createElement('source');
        opacity: 0;
                source.src = src;
        transition: opacity .12s ease, transform .08s ease;
                source.type = 'video/webm';
        white-space: nowrap;
                v.appendChild(source);
    }


                v.addEventListener('canplay', () => {
    /* ===========================
                    weaponLoadedVideos++;
      BACKGROUND SYSTEM
                    if (weaponLoadedVideos === weaponTotalVideos) weaponAutoplay = true;
      =========================== */
                });
    .mw-body-content .character-box {
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        z-index: 1;
    }


                v.addEventListener('error', () => {
    .mw-body-content .character-box::before {
                    weaponLoadedVideos++;
        content: "";
                    if (weaponLoadedVideos === weaponTotalVideos) weaponAutoplay = true;
        position: absolute;
                });
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
        z-index: 0;
    }


                weaponVideoBox.appendChild(v);
    /* ===========================
                weaponVideosCache.set(idx, v);
      FINAL ICON OVERRIDES & FIXES
            });
      =========================== */
    :root {
        --icon-idle: #d0d0d0;
        --icon-active: #FFD95A;
        --icon-active-ring: rgba(255, 217, 90, 0.50);
        --icon-active-glow: rgba(255, 217, 90, 0.30);
        --icon-ring-w: 2px;
    }


            // Wire clicks for weapon icons
    .icon-bar .skill-icon::after {
            weaponIconItems.forEach(el => {
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle) !important;
                if (el.dataset.wired) return;
        transition: box-shadow .12s ease !important;
                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', () => {
    .icon-bar .skill-icon.active::after {
                    const skillsRoot = document.getElementById('skills');
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active) !important;
                    const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
    }
                    const lang = getLangKey();
                    const L = 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'
                    };
                    const name = el.dataset.nome || el.dataset.name || '';
                    const level = (el.dataset.level || '').trim();


                    const descPack = {
    .icon-bar .skill-icon::before {
                        pt: el.dataset.descPt || '',
        inset: -4px;
                        en: el.dataset.descEn || '',
        border-radius: calc(var(--icon-radius) + 4px);
                        es: el.dataset.descEs || '',
        opacity: 0;
                        pl: el.dataset.descPl || ''
        transition: opacity .12s ease, box-shadow .12s ease;
                    };
    }
                    const chosenDesc = descPack[lang] || descPack.pt || descPack.en || descPack.es || descPack.pl || el.dataset.desc || '';
                    const descHtml = chosenDesc.replace(/'''(.*?)'''/g, '<b>$1</b>');


                    const attrsHTML = el.dataset.atr ? renderAttributes(el.dataset.atr) : '';
    .icon-bar .skill-icon.active::before {
                    if (weaponDescBox) {
        opacity: 1 !important;
                        weaponDescBox.innerHTML = `
         box-shadow:
         <div class="skill-title"><h3>${name}</h3></div>
            0 0 14px 4px var(--icon-active-glow),
        ${level ? `<div class="skill-level-line"><span class="attr-label">${L.level} ${level}</span></div>` : ''}
            0 0 0 calc(var(--icon-ring-w) * 2) var(--icon-active-ring) !important;
        ${attrsHTML}
    }
        <div class="desc">${descHtml}</div>`;
                    }


                    weaponIconItems.forEach(i => i.classList.remove('active'));
    .icon-bar .skill-icon,
                    el.classList.add('active');
    .icon-bar .skill-icon img,
                    if (!weaponAutoplay && weaponLoadedVideos > 0) weaponAutoplay = true;
    .icon-bar .skill-icon::after,
                    window.__lastActiveSkillIcon = el;
    .icon-bar .skill-icon::before {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
    }


                    // Show video
    .icon-bar .skill-icon:hover:not(.active)::after {
                    if (weaponVideoBox) {
        box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !important;
                        Array.from(weaponVideoBox.querySelectorAll('video.skill-video')).forEach(v => {
    }
                            try { v.pause(); } catch (e) { }
                            v.style.display = 'none';
                        });
                    }


                    const hasIdx = !!el.dataset.index;
    .icon-bar .skill-icon.active {
                    const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');
        transform: scale(1.10) !important;
                    if (!weaponVideoBox || !hasVideo) {
        z-index: 5;
                        if (weaponVideoBox) weaponVideoBox.style.display = 'none';
    }
                        return;
                    }


                    if (hasIdx && weaponVideosCache.has(el.dataset.index)) {
    .icon-bar .skill-icon.active img {
                        const v = weaponVideosCache.get(el.dataset.index);
        transform: none !important;
                        weaponVideoBox.style.display = 'block';
    }
                        v.style.display = 'block';
                        try { v.currentTime = 0; } catch (e) { }
                        const suppress = document.body.dataset.suppressSkillPlay === '1';
                        if (!suppress && weaponAutoplay) v.play().catch(() => { });
                    }
                });
            });


            // Wire tooltips for weapon icons
    /* ===========================
            const tip = document.querySelector('.skill-tooltip');
      FINAL TOOLTIP STYLES
            if (tip) {
      =========================== */
                weaponIconItems.forEach(icon => {
    .skill-tooltip {
                    if (icon.dataset.tipwired) return;
        position: fixed;
                    icon.dataset.tipwired = '1';
        z-index: 10000;
                    const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
        pointer-events: none;
                    if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
        padding: 8px 10px;
                    if (icon.hasAttribute('title')) icon.removeAttribute('title');
        border-radius: 8px;
        background: rgba(28, 28, 34, .95);
        color: #eaeaea;
        font-size: 13px;
        line-height: 1.25;
        text-align: center;
        max-width: 360px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
        left: -9999px;
        top: -9999px;
        transform: none;
        opacity: 0;
        transition: opacity .12s ease;
        white-space: normal;
    }


                    const measureAndPos = (el) => {
    /* ===========================
                        if (!el || tip.getAttribute('aria-hidden') === 'true') return;
      SKILL LEVEL STYLING
                        tip.style.left = '0px';
      =========================== */
                        tip.style.top = '0px';
    #skills .desc-box .skill-title,
                        const rect = el.getBoundingClientRect();
    #weapon .desc-box .skill-title {
                        const tr = tip.getBoundingClientRect();
        margin: 0 0 4px;
                        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, label));
                    icon.addEventListener('mousemove', () => measureAndPos(icon));
                    icon.addEventListener('click', () => { window.__globalSkillTooltip.lockUntil.value = performance.now() + 240; measureAndPos(icon); });
                    icon.addEventListener('mouseleave', hide);
                });
            }


            // Do not pre-mark active here; activation handled on tab enter
    #skills .desc-box .skill-level-line,
         })();
    #weapon .desc-box .skill-level-line {
        margin: 0 0 10px;
        text-align: center;
         line-height: 1.15;
    }


        // Debug logging
    #skills .desc-box .skill-level-line .attr-label,
        setTimeout(() => {
    #weapon .desc-box .skill-level-line .attr-label {
            Array.from(document.querySelectorAll('.skill-icon')).forEach(el => {
        color: #f0c87b;
                console.log('icon', el.dataset.index, 'data-video=', el.dataset.video);
        font-weight: 800;
            });
        letter-spacing: .2px;
            videosCache.forEach((v, idx) => {
        font-size: .98rem;
                const src = v.querySelector('source') ? v.querySelector('source').src : v.src;
     }
                console.log('video element', idx, 'src=', src, 'readyState=', v.readyState);
</style>
                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>

Edição das 19h48min de 17 de novembro de 2025

<style> 

   /* ===========================
      BASE STYLES & RESET
  =========================== */
   img {
       pointer-events: none;
       user-select: none;
   }

   video {
       max-height: none;
   }

   .mw-body {
       padding: unset !important;
   }

   .mw-body-content {
       line-height: 1.5;
   }

   .mw-body-content p {
       display: none;
   }

   /* ===========================
      CHARACTER CONTAINER & BACKGROUND
  =========================== */
   .banner {
       display: none !important;
   }

   .character-box {
       color: #000;
       font-family: 'Noto Sans', sans-serif;
       width: 100%;
       margin: auto;
       position: relative;
       user-select: none;
       /* background-image será definido inline pelo Módulo (via |background=Arquivo.ext|) */
       background-position: center top;
       background-repeat: no-repeat;
       background-size: cover;
       z-index: 1;
   }

   .character-box p {
       display: unset;
   }

   .character-box::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
       z-index: 0;
   }

   /* ===========================
      CHARACTER HEADER & INFO
  =========================== */
   .character-header {
       position: relative;
       overflow: hidden;
       display: flex;
       gap: 10px;
       flex-direction: column;
       z-index: 1;
   }

   .character-art {
       display: none !important;
       width: 0 !important;
       height: 0 !important;
       overflow: hidden !important;
   }

   .character-topbar {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       padding: 8px 20px 0;
       z-index: 1;
   }

   .character-name-box {
       display: flex;
       align-items: center;
       gap: 14px;
   }

   .topbar-icon {
       margin-top: 8px;
       width: 100px;
       height: 100px;
       object-fit: none;
   }

   .character-name {
       color: #fff;
       font-size: 56px;
       font-family: 'Orbitron', sans-serif;
       font-weight: 900;
       text-shadow: 0 0 6px #000, 0 0 9px #000;
   }

   .topbar-description {
       display: none;
   }

   .class-tags {
       display: flex;
       gap: 9px;
       flex-wrap: wrap;
       margin-left: .28rem;
   }

   .class-tag {
       background: #353420;
       color: #fff;
       outline: 2px solid #000;
       padding: 1px 6px;
       border-radius: 4px;
       font-size: .9em;
       font-weight: 700;
       box-shadow: 0 0 2px rgb(0 0 0 / 70%);
   }

   .character-info .tier,
   .character-info .class-tag {
       font-size: 18px;
       color: #bbb;
   }

   /* ===========================
      TABS SYSTEM
  =========================== */
   .character-tabs {
       margin: 4px 0 4px 8px;
       display: flex;
       gap: 12px;
   }

   .tab-btn {
       padding: 5px 20px;
       background: #333;
       color: #fff;
       border: 2px solid transparent;
       border-radius: 8px;
       font-size: 20px;
       cursor: pointer;
       font-weight: 600;
       line-height: 1;
       transition: background .15s, border-color .15s;
   }

   .tab-btn.active {
       background: #156bc7;
       border-color: #156bc7;
   }

   .tab-content {
       display: none;
       padding: 0 8px 8px;
       position: relative;
       z-index: 2;
       opacity: 0;
       transform: translateY(12px);
       transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
           transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       will-change: opacity, transform;
   }

   .tab-content.active {
       display: block;
       opacity: 1;
       transform: translateY(0);
   }

   /* Wrapper para transição de altura das abas */
   .tabs-height-wrapper {
       position: relative;
       overflow: hidden;
       will-change: height;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       -webkit-transform: translateZ(0);
       transform: translateZ(0);
   }

   /* Previne scroll e mudanças bruscas durante transição */
   body.transitioning-tabs {
       overflow-x: hidden !important;
   }

   body.transitioning-tabs .character-box {
       overflow: hidden;
   }

   .character-box {
       overflow: visible;
   }

   /* ===========================
      SKILLS SYSTEM
  =========================== */
   .skills-container {
       display: flex;
       gap: 20px;
       align-items: flex-start;
   }

   .skills-details {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: auto;
       justify-content: center;
   }

   /* ===========================
      SKILL ICONS & BAR
      =========================== */
   .icon-bar {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
       width: 100%;
       overflow-x: auto;
       overflow-y: hidden;
       padding: 6px 6px;
       margin-bottom: 6px;
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
       scroll-behavior: smooth;
       justify-content: flex-start;
       align-items: center;
       position: relative;
       z-index: 4;
   }

   /* Back handle for nested skill bars */
   .top-rail.skills {
       position: relative;
       overflow: visible;
       z-index: 10;
       transition: width .24s ease, max-width .24s ease;
   }

   .skills-back-wrapper {
       display: none;
       position: absolute;
       left: 50px;
       /* move wrapper far to the right to hide button */
       top: 50%;
       transform: translateY(-50%);
       width: 70px;
       height: 95%;
       z-index: -1;
       pointer-events: none;
   }

   /* Máscara interna para não “vazar” a linguinha atrás do rail.
      Fica entre o botão (z:-1) e o rail (z:10), cobrindo a área interna à esquerda. */
   .skills-rail-wrap {
       position: relative;
       z-index: 0;
       /* cria contexto para o ::before */
   }

   .skills-rail-wrap::before {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       width: 70px;
       /* mesmo tamanho do handle */
       height: 100%;
       background: rgba(28, 28, 34, .95);
       /* igual ao .top-rail bg */
       border-radius: 12px 0 0 12px;
       border: 2px solid rgba(255, 255, 255, .08);
       border-right: none;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
       pointer-events: none;
       z-index: 0;
   }

   .skills-back-wrapper .skills-back {
       display: flex;
       position: absolute;
       left: 0;
       top: 0;
       transform: translateX(-97%);
       /* hidden - only tiny peek visible */
       width: 70px;
       height: 100%;
       padding: 0;
       border-radius: 12px 0 0 12px;
       border: 2px solid rgba(255, 255, 255, .08);
       border-right: none;
       background: rgba(28, 28, 34, .95);
       color: rgba(255, 255, 255, 0.8);
       cursor: pointer;
       pointer-events: all;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
       -webkit-backdrop-filter: blur(2px);
       backdrop-filter: blur(2px);
       transition: transform .22s ease, background .22s ease, color .22s ease;
       overflow: visible;
   }

   .skills-back-wrapper .skills-back:hover {
       transform: translateX(-150%);
       /* slide out further to the left on hover */
       background: rgba(40, 40, 48, .95);
       color: rgba(255, 255, 255, 1.0);
       box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.12);
       border-color: rgba(255, 255, 255, 0.12);
   }

   @keyframes backPeekPulse {

       0%,
       100% {
           box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
       }

       50% {
           box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.18);
       }
   }

   .skills-back-wrapper .skills-back.peek {
       animation: backPeekPulse 1.4s ease-in-out infinite;
   }

   .skills-back-wrapper .skills-back .back-chevron {
       display: block;
       width: 90%;
       height: 90%;
   }

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

   .icon-bar::-webkit-scrollbar-track {
       background: transparent;
   }

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

   /* Icon Variables */
   :root {
       --icon-size: 39px;
       --icon-radius: 8px;
       --icon-ring-w: 2px;
       --icon-idle: #bbb;
       --icon-active: #FFD257;
       --icon-active-ring: rgba(255, 210, 87, .45);
       --icon-active-glow: rgba(255, 210, 87, .35);
       --skill-pane-height: unset;
   }

   .icon-bar .skill-icon {
       width: var(--icon-size);
       height: var(--icon-size);
       position: relative;
       flex: 0 0 auto;
       border-radius: var(--icon-radius);
       overflow: hidden;
       contain: paint;
       margin-top: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       -webkit-tap-highlight-color: transparent;
       background-clip: padding-box;
   }

   /* small + badge to indicate nested subs */
   .icon-bar .skill-icon .sub-badge {
       position: absolute;
       right: 2px;
       bottom: 2px;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: #156bc7;
       color: #fff;
       font-weight: 900;
       font-size: 12px;
       line-height: 16px;
       text-align: center;
       box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
       cursor: pointer;
       z-index: 3;
       user-select: none;
   }

   /* back badge (−) to return to previous bar */
   .icon-bar .skill-icon .back-badge {
       position: absolute;
       right: 2px;
       bottom: 2px;
       width: 16px;
       height: 16px;
       border-radius: 50%;
       background: #c74615;
       color: #fff;
       font-weight: 900;
       font-size: 14px;
       line-height: 16px;
       text-align: center;
       box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
       cursor: pointer;
       z-index: 3;
       user-select: none;
   }

   .icon-bar .skill-icon img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: inherit;
       clip-path: inset(0 round var(--icon-radius));
       -webkit-clip-path: inset(0 round var(--icon-radius));
       will-change: transform;
       backface-visibility: hidden;
       transform: translateZ(0);
       transition: transform .12s ease;
   }

   /* Icon Ring Effects */
   .icon-bar .skill-icon::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle);
       pointer-events: none;
       z-index: 2;
       transition: box-shadow .14s ease;
   }

   .icon-bar .skill-icon::before {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       pointer-events: none;
       z-index: 1;
       box-shadow: none;
       opacity: 0;
       transition: opacity .14s ease, box-shadow .14s ease;
   }

   .icon-bar .skill-icon:hover::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) #e0e0e0;
   }

   .icon-bar .skill-icon.active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active);
   }

   .icon-bar .skill-icon.active::before {
       box-shadow: 0 0 10px 2px var(--icon-active-glow), 0 0 0 4px var(--icon-active-ring);
       opacity: 1;
   }

   .icon-bar .skill-icon.active img {
       transform: scale(1.10);
   }

   @media (prefers-reduced-motion: reduce) {
       .icon-bar .skill-icon {
           transition: none;
       }
   }

   /* ===========================
      SKILL DESCRIPTION & CONTENT
      =========================== */
   .skill-title {
       margin: 0 0 12px;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .skill-title h3 {
       margin: 0;
       width: 100%;
       text-align: center;
       font-size: 1.6em;
       color: #fff;
   }

   .desc-box {
       padding: 12px 18px;
       background: transparent;
       border-radius: 6px;
       position: relative;
       box-shadow: none;
       color: #fff;
       transition: all .3s ease;
       z-index: 2;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       text-shadow: none;
       height: auto;
       min-height: 0;
   }

   .desc-box h3 {
       font-size: 2.7em;
       margin: 0;
       text-align: center;
       padding-top: 0;
   }

   .desc {
       font-size: 1.2em !important;
       line-height: 1.7 !important;
       letter-spacing: .01em;
       overflow-x: hidden;
       -webkit-overflow-scrolling: touch;
       scrollbar-gutter: stable;
       margin-top: 5px;
       padding-right: 8px;
       color: #f1efe9;
       overflow-wrap: anywhere;
       word-break: break-word;
       white-space: normal;
       flex: 0 0 auto !important;
   }

   .desc b,
   .desc strong {
       font-weight: 700;
       color: #fff;
   }

   .desc::-webkit-scrollbar {
       width: 7px;
       height: 7px;
   }

   .desc::-webkit-scrollbar-thumb {
       background: #156bc7;
       border-radius: 10px;
   }

   .desc::-webkit-scrollbar-track {
       background: #151515a8;
       border-radius: 10px;
   }

   /* ===========================
      ATTRIBUTES & STATS
      =========================== */
   .attrs,
   .attr-list {
       display: block;
   }

   .desc-box .attrs,
   .desc-box .attr-list,
   .desc-box .attrs *,
   .desc-box .attr-list * {
       text-shadow: none;
       font-family: 'Noto Sans', sans-serif;
   }

   .attrs__row,
   .attr-row {
       display: flex;
       align-items: center;
       gap: 8px;
       min-height: 22px;
       line-height: 1.2;
   }

   .attrs__row--empty,
   .attr-row.is-empty {
       display: none;
   }

   .attrs__label,
   .attr-label {
       font-weight: 700;
       color: #f0c87b;
       font-size: .98rem;
       white-space: nowrap;
       margin: 0;
   }

   .attrs__value,
   .attr-value {
       color: #fff;
       font-weight: 800;
       font-size: .98rem;
       letter-spacing: .01em;
       margin: 0;
   }

   /* ===========================
      VIDEO CONTAINER
      =========================== */
   .video-container {
       position: relative;
       width: 100%;
       max-width: 100%;
       background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 10px;
       box-shadow: none;
       overflow: hidden;
       padding: 0;
       z-index: 2;
   }

   .video-container>video {
       width: 100%;
       max-width: 100%;
       height: auto;
       aspect-ratio: 16 / 9;
       object-fit: contain;
       object-position: center;
       z-index: 2;
       display: block;
       border-radius: 6px;
       background: #000;
   }

   .video-placeholder {
       position: absolute;
       inset: 0;
       z-index: 6;
       display: flex;
       align-items: center;
       justify-content: center;
       pointer-events: none;
       opacity: 1;
       transition: opacity .28s ease;
       background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
   }

   .video-placeholder img {
       max-width: 160px;
       width: auto;
       height: auto;
       opacity: 0.98;
       display: block;
   }

   .video-placeholder.fade-out {
       opacity: 0;
   }

   /* ===========================
      LAYOUT COMPONENTS
      =========================== */
   .top-rail {
       display: flex;
       align-items: center;
       justify-content: center;
       width: max-content;
       max-width: 96vw;
       margin: 0px auto;
       padding: 5px 5px;
       background: rgba(28, 28, 34, .95);
       border: 2px solid rgba(255, 255, 255, .08);
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
       -webkit-backdrop-filter: blur(2px);
       backdrop-filter: blur(2px);
   }

   .top-rail .rail-title {
       display: none;
   }

   .top-rail.skins .rail-title {
       display: block;
       font-weight: 800;
       font-size: clamp(20px, 2.2vw, 28px);
       color: #fff;
       margin-right: auto;
   }

   .top-rail .icon-bar {
       width: auto;
       justify-content: center;
       margin: 0;
       overflow-x: auto;
   }

   .content-card {
       width: min(1600px, 96vw);
       max-width: 96vw;
       margin: 10px auto;
       background: rgba(28, 28, 34, .95);
       border-radius: 12px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .30);
       padding: 18px;
       z-index: 2;
   }

   .content-card.skills-grid {
       display: grid;
       grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);
       gap: 16px;
       align-items: start;
       grid-auto-rows: auto;
       margin: 10px auto 0;
   }

   /* ===========================
      TIER SYSTEM
      =========================== */
   .tier-bronze .topbar-icon,
   .tier-bronze .tier {
       outline: 2px solid #7b4e2f;
   }

   .tier-silver .topbar-icon,
   .tier-silver .tier {
       outline: 2px solid #d6d2d2;
   }

   .tier-gold .topbar-icon,
   .tier-gold .tier {
       outline: 2px solid #fcd300;
   }

   .tier-diamond .topbar-icon,
   .tier-diamond .tier {
       outline: 2px solid #60dae2;
   }

   /* ===========================
      RESPONSIVE DESIGN & MOBILE
      =========================== */
   @media (max-width:1100px) {
       .top-rail {
           flex-direction: column;
           align-items: stretch;
       }

       .top-rail .icon-bar {
           order: 2;
           width: 100%;
           flex-wrap: wrap;
       }

       .content-card.skills-grid {
           grid-template-columns: 1fr;
           gap: 12px;
       }

       .video-container {
           width: 80%;
           max-width: 820px;
           align-self: center;
       }
   }

   @media (max-aspect-ratio: 3/4) {
       .character-header .character-art {
           display: none;
       }

       .video-container {
           width: 80%;
           border-radius: 3%;
           margin-top: 2%;
           align-self: center;
       }
   }

   @media (max-width:600px) {
       .content-card {
           box-sizing: border-box;
           max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
           width: 100%;
           margin: 10px auto;
           padding: 12px;
           border-radius: 10px;
           overflow: hidden;
       }

       .content-card.skills-grid {
           grid-template-columns: 1fr;
           gap: 12px;
       }

       .top-rail {
           width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
           max-width: 100%;
           margin: 0 auto 8px;
           padding: 6px 8px;
           border-radius: 0;
           box-sizing: border-box;
           overflow: hidden;
       }

       .top-rail .icon-bar {
           width: 100%;
           padding: 0 6px;
           gap: 12px;
           justify-content: flex-start;
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
       }

       :root {
           --icon-size: 92px;
       }

       .icon-bar .skill-icon {
           width: var(--icon-size);
           height: var(--icon-size);
           flex: 0 0 auto;
       }

       .video-container,
       .skins-carousel-wrapper,
       .skins-carousel {
           max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
           box-sizing: border-box;
       }

       .video-container>video,
       .video-container img,
       .skins-carousel img {
           max-width: 100%;
           width: 100%;
           height: auto;
       }

       html,
       body,
       .mw-body,
       .mw-body-content {
           overflow-x: hidden;
       }
   }

   /* ===========================
      OVERFLOW PROTECTION
  =========================== */
   html,
   body,
   .mw-body,
   .mw-body-content {
       box-sizing: border-box;
       max-width: 100vw;
       overflow-x: hidden;
       -webkit-overflow-scrolling: touch;
   }

   .content-card,
   .top-rail,
   .video-container,
   .skins-carousel-wrapper,
   .skins-carousel {
       box-sizing: border-box;
       max-width: 100%;
   }

   .content-card *,
   .top-rail *,
   .video-container * {
       max-width: 100%;
       box-sizing: border-box;
   }

   /* ===========================
      ICON ENHANCEMENTS & OVERRIDES
      =========================== */
   :root {
       --icon-size: 50px;
       --icon-radius: 10px;
       --icon-idle: #cfcfcf;
       --icon-active: #FFD95A;
       --icon-active-ring: rgba(255, 217, 90, 0.45);
       --icon-active-glow: rgba(255, 217, 90, 0.30);
       --icon-ring-w: 2px;
   }

   .icon-bar .skill-icon {
       width: var(--icon-size) !important;
       height: var(--icon-size) !important;
       position: relative;
       border: none !important;
       outline: none !important;
       overflow: hidden;
       border-radius: var(--icon-radius);
       contain: paint;
       isolation: isolate;
       will-change: transform;
       transform: translateZ(0);
   }

   .icon-bar .skill-icon img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: inherit;
       -webkit-clip-path: inset(0 round var(--icon-radius));
       clip-path: inset(0 round var(--icon-radius));
       transition: transform .12s ease;
       backface-visibility: hidden;
       transform: translateZ(0);
   }

   .icon-bar .skill-icon::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       pointer-events: none;
       z-index: 2;
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle) !important;
       transition: box-shadow .12s ease;
   }

   .icon-bar .skill-icon::before {
       content: "";
       position: absolute;
       inset: -2px;
       border-radius: calc(var(--icon-radius) + 2px);
       pointer-events: none;
       z-index: 1;
       box-shadow: none;
       opacity: 0;
       transition: opacity .12s ease, box-shadow .12s ease;
   }

   .icon-bar .skill-icon.active {
       transform: scale(1.08);
   }

   .icon-bar .skill-icon.active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active) !important;
   }

   .icon-bar .skill-icon.active::before {
       opacity: 1;
       box-shadow:
           0 0 12px 3px var(--icon-active-glow),
           0 0 0 4px var(--icon-active-ring) !important;
   }

   .icon-bar .skill-icon.active img {
       transform: scale(1.08);
   }

   .icon-bar .skill-icon:hover:not(.active)::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !important;
   }

   /* ===========================
      TOOLTIP SYSTEM
  =========================== */
   .skill-tooltip {
       position: fixed;
       z-index: 9999;
       pointer-events: none;
       padding: 6px 8px;
       border-radius: 6px;
       background: rgba(17, 17, 17, .9);
       color: #fff;
       font-size: 14px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
       opacity: 0;
       transition: opacity .12s ease, transform .08s ease;
       white-space: nowrap;
   }

   /* ===========================
      BACKGROUND SYSTEM
      =========================== */
   .mw-body-content .character-box {
       background-position: center top;
       background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;
       position: relative;
       z-index: 1;
   }

   .mw-body-content .character-box::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
       z-index: 0;
   }

   /* ===========================
      FINAL ICON OVERRIDES & FIXES
      =========================== */
   :root {
       --icon-idle: #d0d0d0;
       --icon-active: #FFD95A;
       --icon-active-ring: rgba(255, 217, 90, 0.50);
       --icon-active-glow: rgba(255, 217, 90, 0.30);
       --icon-ring-w: 2px;
   }

   .icon-bar .skill-icon::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle) !important;
       transition: box-shadow .12s ease !important;
   }

   .icon-bar .skill-icon.active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active) !important;
   }

   .icon-bar .skill-icon::before {
       inset: -4px;
       border-radius: calc(var(--icon-radius) + 4px);
       opacity: 0;
       transition: opacity .12s ease, box-shadow .12s ease;
   }

   .icon-bar .skill-icon.active::before {
       opacity: 1 !important;
       box-shadow:
           0 0 14px 4px var(--icon-active-glow),
           0 0 0 calc(var(--icon-ring-w) * 2) var(--icon-active-ring) !important;
   }

   .icon-bar .skill-icon,
   .icon-bar .skill-icon img,
   .icon-bar .skill-icon::after,
   .icon-bar .skill-icon::before {
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       transform: translateZ(0);
   }

   .icon-bar .skill-icon:hover:not(.active)::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !important;
   }

   .icon-bar .skill-icon.active {
       transform: scale(1.10) !important;
       z-index: 5;
   }

   .icon-bar .skill-icon.active img {
       transform: none !important;
   }

   /* ===========================
      FINAL TOOLTIP STYLES
      =========================== */
   .skill-tooltip {
       position: fixed;
       z-index: 10000;
       pointer-events: none;
       padding: 8px 10px;
       border-radius: 8px;
       background: rgba(28, 28, 34, .95);
       color: #eaeaea;
       font-size: 13px;
       line-height: 1.25;
       text-align: center;
       max-width: 360px;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
       left: -9999px;
       top: -9999px;
       transform: none;
       opacity: 0;
       transition: opacity .12s ease;
       white-space: normal;
   }

   /* ===========================
      SKILL LEVEL STYLING
      =========================== */
   #skills .desc-box .skill-title,
   #weapon .desc-box .skill-title {
       margin: 0 0 4px;
   }

   #skills .desc-box .skill-level-line,
   #weapon .desc-box .skill-level-line {
       margin: 0 0 10px;
       text-align: center;
       line-height: 1.15;
   }

   #skills .desc-box .skill-level-line .attr-label,
   #weapon .desc-box .skill-level-line .attr-label {
       color: #f0c87b;
       font-weight: 800;
       letter-spacing: .2px;
       font-size: .98rem;
   }

</style>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Character.Base&oldid=40656”