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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m (mbl fix2)
 
(35 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!-- ===========================
<style>
    MAIN SKILLS SYSTEM
     /* ===========================BASE STYLES & RESET=========================== */
    =========================== -->
    img {
<script>
         pointer-events: none;
     (function () {
         -webkit-user-select: none;
        // ===========================
        user-select: none;
        // Utility Functions
    }
        // ===========================
        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=========================== */
         }
    .banner {
        function renderSubAttributesFromObj(s, L) {
        display: none !important;
            const chip = (label, val) => (val ? `<div class="attr-row"><span class="attr-label">${label}</span><span class="attr-value">${val}</span></div>` : '');
    }
            const pve = (s.powerpve || '').toString().trim();
 
            const pvp = (s.powerpvp || '').toString().trim();
    .character-box {
            const en = (s.energy || '').toString().trim();
        color: #000;
            const cd = (s.cooldown || '').toString().trim();
        font-family: 'Noto Sans', sans-serif;
            const rows = [
        width: 100%;
                cd ? chip(L.cooldown, cd) : '',
        margin: auto;
                en ? chip((en.startsWith('-') ? L.energy_cost : L.energy_gain), en.replace(/^\+?/, '')) : '',
        position: relative;
                pve ? chip(L.power, pve) : '',
        -webkit-user-select: none;
                pvp ? chip(L.power_pvp, pvp) : '',
        user-select: none;
            ].filter(Boolean);
        /* background-image será definido inline pelo Módulo (via |background=Arquivo.ext|) */
            return rows.length ? `<div class="attr-list">${rows.join('')}</div>` : '';
        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 {
         // DOM Setup & Initialization
         display: block;
         // ===========================
         opacity: 1;
        const skillsTab = $('#skills');
         transform: translateY(0);
         const skinsTab = $('#skins');
    }
        const weaponTab = $('#weapon');


        // Clean up existing elements
    /* Wrapper para transição de altura das abas */
        ensureRemoved('.top-rail');
    .tabs-height-wrapper {
         ensureRemoved('.content-card');
        position: relative;
         ensureRemoved('.video-placeholder');
         overflow: hidden;
         Array.from(document.querySelectorAll('.card-skins-title, .card-skins .card-skins-title, .cardskins-title, .rail-title')).forEach(t => {
         will-change: height;
            if ((t.textContent || '').trim().toLowerCase().includes('skins')) {
         -webkit-backface-visibility: hidden;
                t.remove();
        backface-visibility: hidden;
            }
        -webkit-transform: translateZ(0);
        });
        transform: translateZ(0);
    }


        // Setup skills tab structure
    /* Previne scroll e mudanças bruscas durante transição */
        if (skillsTab) {
    body.transitioning-tabs {
            const iconBar = skillsTab.querySelector('.icon-bar');
        overflow-x: hidden !important;
            if (iconBar) {
    }
                const rail = document.createElement('div');
                rail.className = 'top-rail skills';
                rail.appendChild(iconBar);
                skillsTab.prepend(rail);
            }


            const details = skillsTab.querySelector('.skills-details');
    body.transitioning-tabs .character-box {
            const videoContainer = skillsTab.querySelector('.video-container');
        overflow: hidden;
            const card = document.createElement('div');
    }
            card.className = 'content-card skills-grid';
            if (details) card.appendChild(details);
            if (videoContainer) card.appendChild(videoContainer);
            skillsTab.appendChild(card);
        }


        // Setup weapon tab structure (mirror skills)
    .character-box {
        if (weaponTab) {
        overflow: visible;
            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');
    /* ===========================SKILLS SYSTEM=========================== */
            const videoContainerW = weaponTab.querySelector('.video-container');
    .skills-container {
            const cardW = document.createElement('div');
        display: flex;
            cardW.className = 'content-card skills-grid';
        gap: 20px;
            if (detailsW) cardW.appendChild(detailsW);
        align-items: flex-start;
            if (videoContainerW) cardW.appendChild(videoContainerW);
    }
            weaponTab.appendChild(cardW);
        }


        // Setup skins tab structure
    .skills-details {
        if (skinsTab) {
        flex: 1;
            const wrapper = skinsTab.querySelector('.skins-carousel-wrapper');
        display: flex;
            const rail = document.createElement('div');
        flex-direction: column;
            rail.className = 'top-rail skins';
        gap: 10px;
            const title = document.createElement('div');
        width: auto;
            title.className = 'rail-title';
        justify-content: center;
            title.textContent = 'Skins & Spotlights';
    }
            rail.appendChild(title);
            if (wrapper) {
                const card = document.createElement('div');
                card.className = 'content-card';
                card.appendChild(wrapper);
                skinsTab.prepend(rail);
                skinsTab.appendChild(card);
            } else {
                skinsTab.prepend(rail);
            }
        }


        // ===========================
    /* ===========================SKILL ICONS & BAR=========================== */
        // Video Management
    .icon-bar {
        // ===========================
        display: flex;
        const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;
        flex-wrap: nowrap;
         const iconItems = iconsBar ? Array.from(iconsBar.querySelectorAll('.skill-icon')) : [];
        gap: 10px;
         const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;
        width: 100%;
         const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 6px;
        margin-bottom: 6px;
        scroll-behavior: smooth;
         /* Firefox */
        scrollbar-width: thin;
         scrollbar-color: #ababab transparent;
        justify-content: flex-start;
        align-items: center;
        position: relative;
         z-index: 4;
    }


         const videosCache = new Map();
    /* Weapon Toggle Button - Estilos completamente isolados usando .weapon-active */
         const nestedVideoElByIcon = new WeakMap();
    .icon-bar .skill-icon.weapon-bar-toggle {
         const barStack = [];
        background: rgba(40, 40, 48, 0.85) !important;
         let initialBarSnapshot = null;
         color: rgba(255, 255, 255, 0.7) !important;
         let totalVideos = 0, loadedVideos = 0, autoplay = false;
         border: 1px solid rgba(255, 255, 255, 0.08) !important;
         overflow: visible !important;
         transform: none !important;
         box-shadow: none !important;
    }


         // Track last clicked skill/subskill for language changes
    .icon-bar .skill-icon.weapon-bar-toggle::before {
         window.__lastActiveSkillIcon = null;
        display: none !important;
         opacity: 0 !important;
         box-shadow: none !important;
    }


        // Placeholder management
    .icon-bar .skill-icon.weapon-bar-toggle::after {
        let placeholder = videoBox ? videoBox.querySelector('.video-placeholder') : null;
         box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(180, 180, 180, 0.5) !important;
         let placeholderCreatedOnLoad = false;
    }
        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 = () => {
    .icon-bar .skill-icon.weapon-bar-toggle:hover {
            if (!placeholder) return;
        background: rgba(55, 55, 65, 0.9) !important;
            if (placeholder.classList.contains('fade-out')) return;
        color: rgba(255, 255, 255, 0.95) !important;
            placeholder.classList.add('fade-out');
        transform: none !important;
            const onEnd = () => {
    }
                try { placeholder.style.display = 'none'; } catch (e) { }
                placeholder.removeEventListener('transitionend', onEnd);
            };
            placeholder.addEventListener('transitionend', onEnd, { once: true });
            setTimeout(() => { try { placeholder.style.display = 'none'; } catch (e) { } }, 600);
        };


        const showPlaceholder = () => {
    .icon-bar .skill-icon.weapon-bar-toggle:hover::after {
            if (!videoBox) return;
        box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(220, 220, 220, 0.6) !important;
            if (!placeholder || !placeholderCreatedOnLoad) return;
    }
            if (placeholderConsumed) return;
            placeholder.classList.remove('fade-out');
            placeholder.style.display = 'flex';
            void placeholder.offsetWidth;
        };


        // ===========================
    /* Estado ativo do toggle usa .weapon-active em vez de .active */
        // Video Loading & Caching
    .icon-bar .skill-icon.weapon-bar-toggle.weapon-active {
         // ===========================
         background: linear-gradient(145deg, rgba(200, 60, 40, 0.95), rgba(160, 45, 30, 0.95)) !important;
        if (iconItems.length && videoBox) {
        color: #fff !important;
            iconItems.forEach(el => {
        transform: scale(1.08) !important;
                const src = (el.dataset.video || '').trim();
    }
                const idx = el.dataset.index || '';
                if (!src || videosCache.has(idx)) return;


                totalVideos++;
    .icon-bar .skill-icon.weapon-bar-toggle.weapon-active::before {
                const v = document.createElement('video');
        display: none !important;
                v.className = 'skill-video';
    }
                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', () => {
    .icon-bar .skill-icon.weapon-bar-toggle.weapon-active::after {
                    loadedVideos++;
        box-shadow: inset 0 0 0 var(--icon-ring-w) #FF5722 !important;
                    if (loadedVideos === 1) { try { v.pause(); v.currentTime = 0; } catch (e) { } }
        animation: togglePulse 1.8s ease-in-out infinite;
                    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', () => {
    @keyframes togglePulse {
                    loadedVideos++;
                    removePlaceholderSmooth();
                    if (loadedVideos === totalVideos) autoplay = true;
                });


                videoBox.appendChild(v);
        0%,
                videosCache.set(idx, v);
        100% {
            });
            box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(255, 87, 34, 0.9);
         }
         }


         if (totalVideos === 0 && placeholder) {
         50% {
             placeholder.style.display = 'none';
             box-shadow: inset 0 0 0 var(--icon-ring-w) #FF7043, inset 0 0 10px 2px rgba(255, 112, 67, 0.35);
            placeholder.classList.add('fade-out');
         }
         }
    }


        // ===========================
    .icon-bar .skill-icon.weapon-bar-toggle svg {
         // Skill Bar Wiring (root and nested)
         width: 22px;
         // ===========================
         height: 22px;
         function wireTooltipsForNewIcons() {
         pointer-events: none;
            const tip = document.querySelector('.skill-tooltip');
    }
            if (!tip) return;
 
            let lockUntil2 = 0;
    .icon-bar .skill-icon.weapon-bar-toggle:focus-visible {
            Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
        outline: none;
                if (icon.dataset.tipwired) return;
    }
                icon.dataset.tipwired = '1';
 
                const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
    .icon-bar .skill-icon.weapon-bar-toggle:focus-visible::after {
                if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
        box-shadow: 0 0 0 3px rgba(220, 80, 80, 0.5) !important;
                if (icon.hasAttribute('title')) icon.removeAttribute('title');
    }
                const img = icon.querySelector('img');
 
                if (img) { const imgAlt = img.getAttribute('alt') || ''; const imgTitle = img.getAttribute('title') || ''; if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle); img.setAttribute('alt', ''); if (img.hasAttribute('title')) img.removeAttribute('title'); }
    /* Back handle for nested skill bars */
                const measureAndPos = (el) => {
    .top-rail.skills {
                    if (!el || tip.getAttribute('aria-hidden') === 'true') return;
        position: relative;
                    tip.style.left = '0px'; tip.style.top = '0px';
        overflow: visible;
                    const rect = el.getBoundingClientRect(); const tr = tip.getBoundingClientRect();
        z-index: 10;
                    let left = Math.round(rect.left + (rect.width - tr.width) / 2);
        transition: width .24s ease, max-width .24s ease;
                    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) {
    .top-rail.skills.weapon-mode-on {
            // Hide all existing videos
        background: linear-gradient(135deg, rgba(65, 25, 25, 0.96), rgba(50, 18, 18, 0.96));
            if (videoBox) {
        border-color: transparent;
                Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
        animation: weapon-bar-glow 3.5s ease-in-out infinite;
            }
    }
            if (window.__subskills) window.__subskills.hideAll?.(videoBox);


            const hasIdx = !!el.dataset.index;
    .top-rail.skills.weapon-mode-on::before {
            const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');
        content: "";
            if (!videoBox || !hasVideo) {
        position: absolute;
                 if (videoBox) { videoBox.style.display = 'none'; if (placeholder) { placeholder.style.display = 'none'; placeholder.classList.add('fade-out'); } }
        inset: -2px;
                return;
        border-radius: inherit;
            }
        padding: 2px;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 80, 80, 0.8) 25%,
                rgba(255, 120, 60, 1) 50%,
                rgba(255, 80, 80, 0.8) 75%,
                 transparent 100%);
        background-size: 200% 100%;
        animation: weapon-border-scan 4s linear infinite;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        z-index: -1;
    }


            if (hasIdx && videosCache.has(el.dataset.index)) {
    .top-rail.skills.weapon-mode-on::after {
                const v = videosCache.get(el.dataset.index);
        content: "";
                videoBox.style.display = 'block';
        position: absolute;
                v.style.display = 'block';
        inset: 0;
                try { v.currentTime = 0; } catch (e) { }
        border-radius: inherit;
                const suppress = document.body.dataset.suppressSkillPlay === '1';
        box-shadow:
                if (!suppress) { if (autoplay) v.play().catch(() => { }); } else { try { v.pause(); } catch (e) { } }
            0 0 15px rgba(255, 80, 80, 0.4),
                return;
            inset 0 0 20px rgba(255, 80, 80, 0.1);
            }
        animation: weapon-bar-pulse 3s ease-in-out infinite;
        pointer-events: none;
    }


            // Nested or custom icon video
    @keyframes weapon-border-scan {
            let v = nestedVideoElByIcon.get(el);
        0% {
             if (!v) {
             background-position: 200% 0;
                v = document.createElement('video');
                v.className = 'skill-video';
                v.setAttribute('controls', ''); v.setAttribute('preload', 'auto'); v.setAttribute('playsinline', '');
                v.style.display = 'none'; v.style.width = '100%'; v.style.height = 'auto'; v.style.aspectRatio = '16/9'; v.style.objectFit = 'cover';
                const src = document.createElement('source');
                src.src = el.dataset.video; src.type = 'video/webm';
                v.appendChild(src);
                videoBox.appendChild(v);
                nestedVideoElByIcon.set(el, v);
            }
            videoBox.style.display = 'block';
            v.style.display = 'block';
            try { v.currentTime = 0; } catch (e) { }
            const suppress = document.body.dataset.suppressSkillPlay === '1';
            if (!suppress) { if (autoplay) v.play().catch(() => { }); } else { try { v.pause(); } catch (e) { } }
         }
         }


         function wireClicksForCurrentBar() {
         100% {
             const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
             background-position: -200% 0;
            currIcons.forEach(el => {
        }
                if (el.dataset.wired) return;
    }
                el.dataset.wired = '1';
                const label = el.dataset.nome || el.dataset.name || '';
                el.setAttribute('aria-label', label);
                if (el.hasAttribute('title')) el.removeAttribute('title');
                const img = el.querySelector('img'); if (img) { img.setAttribute('alt', ''); if (img.hasAttribute('title')) img.removeAttribute('title'); }
                el.addEventListener('click', () => {
                    const skillsRoot = document.getElementById('skills');
                    const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
                    const L = i18nMap[getLangKey()] || i18nMap.pt || { cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível' };
                    const name = el.dataset.nome || el.dataset.name || '';
                    const level = (el.dataset.level || '').trim();


                    // Pick description from current language (respects language changes)
    @keyframes weapon-bar-glow {
                    const lang = getLangKey();
                    const descPack = {
                        pt: el.dataset.descPt || '',
                        en: el.dataset.descEn || '',
                        es: el.dataset.descEs || '',
                        pl: el.dataset.descPl || ''
                    };
                    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) : '');
         0%,
                    if (descBox) {
        100% {
                        descBox.innerHTML = `
             filter: brightness(1);
         <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() {
         50% {
             return Array.from(iconsBar.querySelectorAll('.skill-icon')).map(el => {
             filter: brightness(1.1);
                const img = el.querySelector('img');
                const iconURL = img ? img.src : '';
                const subsRaw = el.dataset.subs || el.getAttribute('data-subs') || '';
                let subs = null; try { subs = subsRaw ? JSON.parse(subsRaw) : null; } catch { subs = null; }
                const subattrsRaw = el.dataset.subattrs || '';
                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() {
    @keyframes weapon-bar-pulse {
            const rail = iconsBar.closest('.top-rail.skills'); if (!rail) return null;
 
            // Wrap rail in a dedicated container if not already wrapped
        0%,
            let wrap = rail.parentElement;
        100% {
            if (!wrap || !wrap.classList || !wrap.classList.contains('skills-rail-wrap')) {
             opacity: 0.6;
                const parentNode = rail.parentNode;
             box-shadow:
                const newWrap = document.createElement('div');
                 0 0 12px rgba(255, 80, 80, 0.3),
                newWrap.className = 'skills-rail-wrap';
                 inset 0 0 15px rgba(255, 80, 80, 0.08);
                // 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) {
         50% {
             iconsBar.innerHTML = '';
             opacity: 1;
             items.forEach((it, idx) => {
             box-shadow:
                const node = document.createElement('div'); node.className = 'skill-icon';
                 0 0 25px rgba(255, 80, 80, 0.5),
                node.dataset.nome = it.name || '';
                 inset 0 0 25px rgba(255, 80, 80, 0.15);
                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');
         }
         }
    }
    .skills-back-wrapper {
        display: none;
        position: absolute;
        left: 50px;
        top: 50%;
        transform: translateY(-50%);
        width: 70px;
        height: 95%;
        z-index: -1;
        pointer-events: none;
    }
    .skills-rail-wrap {
        position: relative;
        z-index: 0;
    }


        function pushSubBarFrom(subs, parentIconEl) {
    .skills-rail-wrap.has-sub-bar::before {
            // Check if parent has noback flag
        content: "";
            const hasNoBack = parentIconEl && (parentIconEl.dataset.noback === 'true' || parentIconEl.getAttribute('data-noback') === 'true');
        position: absolute;
            // Save current
        left: 2px;
            barStack.push({ items: snapshotCurrentBarItemsFromDOM(), noback: hasNoBack }); ensureBackButton();
        /* alinha por dentro da borda do rail (2px) */
            // Build next items from JSON
        top: 2px;
            const skillsRoot = document.getElementById('skills');
        bottom: 2px;
            const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
        /* evita vazar na parte de baixo */
            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' };
        width: 70px;
            const items = (subs || []).map(s => {
        background: rgba(28, 28, 34, .95);
                const name = (s.name || s.n || '').trim();
        border: 0;
                const desc = chooseDescFrom(s).replace(/'''(.*?)'''/g, '<b>$1</b>');
        /* sem borda própria para não “escapar” */
                const attrsHTML = renderSubAttributesFromObj(s, L);
        box-shadow: none;
                // store sub-attrs object JSON to re-render attributes later
        /* sem sombra aqui */
                return {
        border-radius: 10px 0 0 10px;
                    name,
        /* 12px - 2px da borda externa */
                    level: (s.level || '').toString().trim(),
        pointer-events: none;
                    desc,
        z-index: 0;
                    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) || ''),
    .skills-back-wrapper .skills-back {
                    descPl: (s.descPl || (s.desc_i18n && s.desc_i18n.pl) || ''),
        display: flex;
                    // keep raw obj for attrs
        position: absolute;
                    attrs: '',
        left: 0;
                    icon: (s.icon || 'Nada.png'),
        top: 0;
                    iconURL: filePathURL(s.icon || 'Nada.png'),
        transform: translateX(-97%);
                    video: s.video ? filePathURL(s.video) : '',
        width: 70px;
                    subs: Array.isArray(s.subs) ? s.subs : null,
        height: 100%;
                    subattrs: s,
        padding: 0;
                    back: s.back === true ? 'true' : null
        border-radius: 12px 0 0 12px;
                };
        border: 2px solid rgba(255, 255, 255, .08);
            });
        border-right: none;
            // Render and attach subattrs object via data-subattrs
        background: rgba(28, 28, 34, .95);
            iconsBar.innerHTML = '';
        color: rgba(255, 255, 255, 0.8);
            items.forEach((it, iIdx) => {
        cursor: pointer;
                const node = document.createElement('div'); node.className = 'skill-icon'; node.dataset.nested = '1';
        pointer-events: all;
                node.dataset.nome = it.name || '';
        align-items: center;
                if (it.level) node.dataset.level = it.level;
        justify-content: center;
                if (it.desc) node.dataset.desc = it.desc;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
                if (it.descPt) node.dataset.descPt = it.descPt;
        -webkit-backdrop-filter: blur(2px);
                if (it.descEn) node.dataset.descEn = it.descEn;
        backdrop-filter: blur(2px);
                if (it.descEs) node.dataset.descEs = it.descEs;
        transition: transform .22s ease, background .22s ease, color .22s ease;
                if (it.descPl) node.dataset.descPl = it.descPl;
        overflow: visible;
                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);
    .skills-back-wrapper .skills-back:hover {
                if (it.back) node.dataset.back = it.back;
        transform: translateX(-150%);
                const img = document.createElement('img'); img.alt = ''; img.src = it.iconURL; node.appendChild(img);
        background: rgba(40, 40, 48, .95);
                iconsBar.appendChild(node);
        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);
            // pequena animação de entrada
        border-color: rgba(255, 255, 255, 0.12);
            Array.from(iconsBar.children).forEach((c, i) => {
    }
                c.style.opacity = '0'; c.style.transform = 'translateY(6px)';
 
                requestAnimationFrame(() => {
    @keyframes backPeekPulse {
                    setTimeout(() => { c.style.transition = 'opacity .18s ease, transform .18s ease'; c.style.opacity = '1'; c.style.transform = 'translateY(0)'; }, i * 24);
 
                });
        0%,
            });
        100% {
            wireClicksForCurrentBar(); const b2 = ensureBackButton(); if (b2) b2.classList.add('peek');
            box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
         }
         }


         // Reage à troca de idioma (emitida pelo char translator)
         50% {
        window.addEventListener('gla:langChanged', () => {
             box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.18);
             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
    .skills-back-wrapper .skills-back.peek {
        wireClicksForCurrentBar(); const b0 = ensureBackButton(); if (b0) { b0.classList.add('peek'); b0.style.alignSelf = 'stretch'; }
        animation: backPeekPulse 1.4s ease-in-out infinite;
    }


        // ===========================
    .skills-back-wrapper .skills-back .back-chevron {
        // Tooltip System
        display: block;
        // ===========================
        width: 90%;
        (function initSkillTooltip() {
        height: 90%;
            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-bar::-webkit-scrollbar {
        height: 6px;
    }


            function measureAndPos(el) {
    .icon-bar::-webkit-scrollbar-track {
                if (!el || tip.getAttribute('aria-hidden') === 'true') return;
        background: transparent;
                tip.style.left = '0px';
    }
                tip.style.top = '0px';
                const rect = el.getBoundingClientRect();
                const tr = tip.getBoundingClientRect();
                let left = Math.round(rect.left + (rect.width - tr.width) / 2);
                left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
                const coarse = (window.matchMedia && matchMedia('(pointer: coarse)').matches) || (window.innerWidth <= 600);
                let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
                if (top < 8) top = Math.round(rect.bottom + 10);
                tip.style.left = left + 'px';
                tip.style.top = top + 'px';
            }


            function show(el, text) {
    .icon-bar::-webkit-scrollbar-thumb {
                tip.textContent = text || '';
        background: #151515;
                tip.setAttribute('aria-hidden', 'false');
        border-radius: 3px;
                measureAndPos(el);
    }
                tip.style.opacity = '1';
            }


            function hide() {
    /* Icon Variables */
                tip.setAttribute('aria-hidden', 'true');
    :root {
                tip.style.opacity = '0';
        --icon-size: 39px;
                tip.style.left = '-9999px';
        --icon-radius: 8px;
                tip.style.top = '-9999px';
        --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;
    }


            // Export to global for subskills to use
    .icon-bar .skill-icon {
            window.__globalSkillTooltip = {
        width: var(--icon-size);
                show,
        height: var(--icon-size);
                hide,
        position: relative;
                measureAndPos,
        flex: 0 0 auto;
                lockUntil: lockUntilRef
        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;
        /* Anti-aliasing para bordas suaves */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        border: 1px solid rgba(255, 255, 255, 0.05);
        background-color: rgba(15, 15, 23, 0.95);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    }


            Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
    /* small + badge to indicate nested subs */
                if (icon.dataset.tipwired) return;
    .icon-bar .skill-icon .sub-badge {
                icon.dataset.tipwired = '1';
        position: absolute;
                const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
        right: 2px;
                if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
        bottom: 2px;
                if (icon.hasAttribute('title')) icon.removeAttribute('title');
        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;
        -webkit-user-select: none;
        user-select: none;
    }


                const img = icon.querySelector('img');
    /* back badge (−) to return to previous bar */
                if (img) {
    .icon-bar .skill-icon .back-badge {
                    const imgAlt = img.getAttribute('alt') || '';
        position: absolute;
                    const imgTitle = img.getAttribute('title') || '';
        right: 2px;
                    if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle);
        bottom: 2px;
                    img.setAttribute('alt', '');
        width: 16px;
                    if (img.hasAttribute('title')) img.removeAttribute('title');
        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;
        -webkit-user-select: none;
        user-select: none;
    }


                icon.addEventListener('mouseenter', () => show(icon, label));
    .icon-bar .skill-icon img {
                icon.addEventListener('mousemove', () => { if (performance.now() >= lockUntilRef.value) measureAndPos(icon); });
        display: block;
                icon.addEventListener('click', () => { lockUntilRef.value = performance.now() + 240; measureAndPos(icon); });
        width: 100%;
                icon.addEventListener('mouseleave', hide);
        height: 100%;
            });
        border-radius: inherit;
        -webkit-clip-path: inset(0 round var(--icon-radius));
        clip-path: inset(0 round var(--icon-radius));
        will-change: transform;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: transform .12s ease;
    }


            // Also wire subskill icons present at load (kept in sync when sub-rail opens)
    /* Icon Ring Effects */
            Array.from(document.querySelectorAll('.subskills-rail .subicon')).forEach(sub => {
    .icon-bar .skill-icon::after {
                if (sub.dataset.tipwired) return;
        content: "";
                sub.dataset.tipwired = '1';
        position: absolute;
                const label = sub.getAttribute('title') || sub.getAttribute('aria-label') || '';
        inset: 0;
                if (label && !sub.hasAttribute('aria-label')) sub.setAttribute('aria-label', label);
        border-radius: inherit;
                if (sub.hasAttribute('title')) sub.removeAttribute('title');
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-idle);
                sub.addEventListener('mouseenter', () => show(sub, label));
        pointer-events: none;
                sub.addEventListener('mousemove', () => { if (performance.now() >= lockUntilRef.value) measureAndPos(sub); });
        z-index: 2;
                sub.addEventListener('click', () => { lockUntilRef.value = performance.now() + 240; measureAndPos(sub); });
        transition: box-shadow .14s ease;
                sub.addEventListener('mouseleave', hide);
        /* Anti-aliasing para bordas suaves */
            });
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
    }


            window.addEventListener('scroll', () => {
    .icon-bar .skill-icon::before {
                const visible = document.querySelector('.skill-tooltip[aria-hidden="false"]');
        content: "";
                if (!visible) return;
        position: absolute;
                const target = document.querySelector('.subskills-rail .subicon:hover')
        inset: 0;
                    || document.querySelector('.subskills-rail .subicon.active')
        border-radius: inherit;
                    || document.querySelector('.icon-bar .skill-icon:hover')
        pointer-events: none;
                    || document.querySelector('.icon-bar .skill-icon.active');
        z-index: 1;
                measureAndPos(target);
        box-shadow: none;
            }, true);
        opacity: 0;
            window.addEventListener('resize', () => {
        transition: opacity .14s ease, box-shadow .14s ease;
                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:hover::after {
        // Tab System (com transição suave de altura)
        box-shadow: inset 0 0 0 var(--icon-ring-w) #e0e0e0;
        // ===========================
    }
        (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
    .icon-bar .skill-icon.active::after {
            let wrapper = characterBox.querySelector('.tabs-height-wrapper');
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active);
            if (!wrapper) {
    }
                wrapper = document.createElement('div');
                wrapper.className = 'tabs-height-wrapper';


                // Move os conteúdos das abas para dentro do wrapper
    .icon-bar .skill-icon.active::before {
                contents.forEach(c => {
        box-shadow: 0 0 10px 2px var(--icon-active-glow), 0 0 0 4px var(--icon-active-ring);
                    wrapper.appendChild(c);
        opacity: 1;
                });
    }


                // Encontra onde inserir o wrapper (após as tabs)
    .icon-bar .skill-icon.active img {
                const tabsElement = characterBox.querySelector('.character-tabs');
        transform: scale(1.10);
                if (tabsElement && tabsElement.nextSibling) {
    }
                    characterBox.insertBefore(wrapper, tabsElement.nextSibling);
                } else {
                    characterBox.appendChild(wrapper);
                }
            }


            // Função para animar a altura suavemente (retorna Promise)
    @media (prefers-reduced-motion: reduce) {
             // NOVA ESTRATÉGIA: aba já está visível mas invisível (opacity:0, visibility:hidden)
        .icon-bar .skill-icon {
            async function smoothHeightTransition(fromTab, toTab) {
             transition: none;
                if (!wrapper) return Promise.resolve();
        }
    }


                // Salva o scroll atual
    /* ===========================SKILL DESCRIPTION & CONTENT=========================== */
                const scrollY = window.scrollY;
    .skill-title {
        margin: 0 0 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }


                // Mede a altura ATUAL
    .skill-title h3 {
                const currentHeight = wrapper.getBoundingClientRect().height;
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 1.6em;
        color: #fff;
    }


                // A aba toTab JÁ está display:block mas invisível
    .desc-box {
                // Aguarda ela renderizar COMPLETAMENTE na posição real
        padding: 12px 18px;
                await new Promise((resolve) => {
        background: transparent;
                    const videoContainers = toTab.querySelectorAll('.video-container');
        border-radius: 6px;
                    const contentCard = toTab.querySelector('.content-card');
        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;
        font-size: 16px;
        /* Desabilita Font Boosting em mobile */
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }


                    if (videoContainers.length === 0) {
    .desc-box h3 {
                        // Sem vídeos, aguarda 3 frames
        font-size: 2.7em;
                        requestAnimationFrame(() => {
        margin: 0;
                            requestAnimationFrame(() => {
        text-align: center;
                                requestAnimationFrame(() => resolve());
        padding-top: 0;
                            });
    }
                        });
                        return;
                    }


                    // COM vídeos: aguarda até que TUDO esteja renderizado
    .desc {
                    // Faz polling da altura até estabilizar
        font-size: 17px !important;
                    let lastHeight = 0;
        line-height: 1.75 !important;
                    let stableCount = 0;
        letter-spacing: .01em;
                    const checksNeeded = 3; // Altura precisa ficar estável por 3 checks
        overflow-x: hidden;
                    let totalChecks = 0;
        /* iOS smooth scroll */
                    const maxChecks = 15; // Máximo 15 checks (750ms)
        -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;
        /* IMPORTANTE: Desabilita o Font Boosting que aumenta texto longo automaticamente */
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        max-height: none;
    }


                    function checkStability() {
    .desc b,
                        totalChecks++;
    .desc strong {
        font-weight: 700;
        color: #fff;
    }


                        // Mede altura atual da aba
    .desc::-webkit-scrollbar {
                        const currentTabHeight = toTab.scrollHeight;
        width: 7px;
        height: 7px;
    }


                        // Verifica se estabilizou
    .desc::-webkit-scrollbar-thumb {
                        if (Math.abs(currentTabHeight - lastHeight) < 5) {
        background: #156bc7;
                            stableCount++;
        border-radius: 10px;
                        } else {
    }
                            stableCount = 0; // Resetar se mudou
                        }


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


                        // Se estável por N checks ou atingiu máximo, resolve
    /* ===========================ATTRIBUTES & STATS=========================== */
                        if (stableCount >= checksNeeded || totalChecks >= maxChecks) {
    .attrs,
                            resolve();
    .attr-list {
                        } else {
        display: block;
                            // Continua checando a cada 50ms
    }
                            setTimeout(checkStability, 50);
                        }
                    }


                    // Inicia checagem após um pequeno delay
    .desc-box .attrs,
                    setTimeout(checkStability, 50);
    .desc-box .attr-list,
                });
    .desc-box .attrs *,
    .desc-box .attr-list * {
        text-shadow: none;
        font-family: 'Noto Sans', sans-serif;
    }


                // AGORA mede a altura REAL (após tudo renderizado)
    .attrs__row,
                const nextHeight = toTab.getBoundingClientRect().height;
    .attr-row {
                const finalHeight = Math.max(nextHeight, 100);
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 22px;
        line-height: 1.2;
    }


                // Se alturas são similares (< 30px diferença), não anima
    .attrs__row--empty,
                if (Math.abs(finalHeight - currentHeight) < 30) {
    .attr-row.is-empty {
                    wrapper.style.height = '';
        display: none;
                    return Promise.resolve();
    }
                }


                // Define altura inicial fixa
    .attrs__label,
                wrapper.style.overflow = 'hidden';
    .attr-label {
                wrapper.style.height = currentHeight + 'px';
        font-weight: 700;
        color: #f0c87b;
        font-size: .98rem;
        white-space: nowrap;
        margin: 0;
    }


                // Força reflow
    .attrs__value,
                wrapper.offsetHeight;
    .attr-value {
        color: #fff;
        font-weight: 800;
        font-size: .98rem;
        letter-spacing: .01em;
        margin: 0;
    }


                // Define transição
    /* ===========================VIDEO CONTAINER=========================== */
                wrapper.style.transition = 'height 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
    .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;
    }


                // Anima para a altura FINAL (já medida corretamente)
    .video-container>video {
                requestAnimationFrame(() => {
        width: 100%;
                    wrapper.style.height = finalHeight + 'px';
        max-width: 100%;
                    // Não altere a posição do scroll do usuário
        height: auto;
                });
        aspect-ratio: 16 / 9;
        object-fit: contain;
        object-position: center;
        z-index: 2;
        display: block;
        border-radius: 6px;
        background: #000;
    }


                // Limpa após transição
    .video-placeholder {
                return new Promise(resolve => {
        position: absolute;
                    setTimeout(() => {
        inset: 0;
                        wrapper.style.height = '';
        z-index: 6;
                        wrapper.style.transition = '';
        display: flex;
                        wrapper.style.overflow = '';
        align-items: center;
                        resolve();
        justify-content: center;
                    }, 320);
        pointer-events: none;
                });
        opacity: 1;
            }
        transition: opacity .28s ease;
        background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
    }


            tabs.forEach(btn => {
    .video-placeholder img {
                if (btn.dataset.wiredTab) return;
        max-width: 160px;
                btn.dataset.wiredTab = '1';
        width: auto;
                btn.addEventListener('click', () => {
        height: auto;
                    const target = btn.getAttribute('data-tab');
        opacity: 0.98;
                    const currentActive = contents.find(c => c.classList.contains('active'));
        display: block;
                    const nextActive = contents.find(c => c.id === target);
    }


                    if (currentActive === nextActive) return; // Já está na aba
    .video-placeholder.fade-out {
        opacity: 0;
    }


                    // Previne scroll durante a transição
    /* ===========================LAYOUT COMPONENTS=========================== */
                    document.body.classList.add('transitioning-tabs');
    .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);
    }


                    // Desativa a aba atual (fade out)
    .top-rail .rail-title {
                    if (currentActive) {
        display: none;
                        currentActive.style.opacity = '0';
    }
                        currentActive.style.transform = 'translateY(-8px)';
                    }


                    // Delay para fade out completar
    .top-rail.skins .rail-title {
                    setTimeout(async () => {
        display: block;
                        // Remove display de TODAS as abas inativas
        font-weight: 800;
                        contents.forEach(c => {
        font-size: clamp(20px, 2.2vw, 28px);
                            if (c !== nextActive) {
        color: #fff;
                                c.style.display = 'none';
        margin-right: auto;
                                c.classList.remove('active');
    }
                            }
                        });


                        // Ativa os botões
    .top-rail .icon-bar {
                        tabs.forEach(b => b.classList.toggle('active', b === btn));
        width: auto;
        justify-content: center;
        margin: 0;
        overflow-x: auto;
    }


                        // MOSTRA a nova aba INVISÍVEL na posição real
    .content-card {
                        if (nextActive) {
        width: min(1600px, 96vw);
                            nextActive.classList.add('active');
        max-width: 96vw;
                            nextActive.style.display = 'block';
        margin: 10px auto;
                            nextActive.style.opacity = '0';
        background: rgba(28, 28, 34, .95);
                            nextActive.style.visibility = 'hidden';
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .30);
        padding: 18px;
        z-index: 2;
    }


                            // Força renderização completa ANTES de medir
    .content-card.skills-grid {
                            nextActive.offsetHeight;
        display: grid;
        grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);
        gap: 16px;
        align-items: start;
        grid-auto-rows: auto;
        margin: 10px auto 0;
    }


                            // Pré-carrega/ativa conteúdo padrão da aba (ex.: vídeo) ANTES da medição
    /* ===========================TIER SYSTEM=========================== */
                            // Assim a altura final já considera o player visível
    .tier-bronze .topbar-icon,
                            try {
    .tier-bronze .tier {
                                if (target === 'weapon' || target === 'skills') {
        outline: 2px solid #7b4e2f;
                                    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)
    .tier-silver .topbar-icon,
                        if (currentActive && nextActive) {
    .tier-silver .tier {
                            await smoothHeightTransition(currentActive, nextActive);
        outline: 2px solid #d6d2d2;
                        }
    }


                        // Após altura estar correta, MOSTRA a nova aba
    .tier-gold .topbar-icon,
                        if (nextActive) {
    .tier-gold .tier {
                            nextActive.style.visibility = '';
        outline: 2px solid #fcd300;
                            nextActive.style.transform = 'translateY(12px)';
    }


                            // Anima entrada
    .tier-diamond .topbar-icon,
                            requestAnimationFrame(() => {
    .tier-diamond .tier {
                                nextActive.style.opacity = '1';
        outline: 2px solid #60dae2;
                                nextActive.style.transform = 'translateY(0)';
    }


                                // Limpa estilos inline e classe de transição
    /* ===========================RESPONSIVE DESIGN & MOBILE=========================== */
                                setTimeout(() => {
    @media (max-width:1100px) {
                                    nextActive.style.opacity = '';
        .top-rail {
                                    nextActive.style.transform = '';
            flex-direction: column;
                                    document.body.classList.remove('transitioning-tabs');
            align-items: stretch;
                                    // 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
        .top-rail .icon-bar {
                    setTimeout(() => {
            order: 2;
                        syncDescHeight();
            width: 100%;
                        if (target === 'skins') {
            flex-wrap: wrap;
                            // Pause all cached main skill videos
        }
                            videosCache.forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
 
                            // Pause all nested/subskill videos
        .content-card.skills-grid {
                            if (videoBox) {
            grid-template-columns: 1fr;
                                videoBox.querySelectorAll('video.skill-video').forEach(v => {
            gap: 12px;
                                    try { v.pause(); } catch (e) { }
        }
                                    v.style.display = 'none';
 
                                });
        .video-container {
                            }
            width: 80%;
                            // Hide subskill videos via API
            max-width: 820px;
                            if (window.__subskills) window.__subskills.hideAll?.(videoBox);
            align-self: center;
                            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) {
    @media (max-aspect-ratio: 3/4) {
                                const wvb = weaponTabEl.querySelector('.video-container');
        .character-header .character-art {
                                if (wvb) wvb.querySelectorAll('video.skill-video').forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
            display: none;
                            }
        }
                        } else if (target === 'weapon') {
 
                            // Initialize or refresh weapon tab
        .video-container {
                            const weaponTab = document.getElementById('weapon');
            width: 80%;
                            if (weaponTab) {
            border-radius: 3%;
                                const activeWeaponIcon = weaponTab.querySelector('.icon-bar .skill-icon.active');
            margin-top: 2%;
                                const toClick = activeWeaponIcon || weaponTab.querySelector('.icon-bar .skill-icon');
            align-self: center;
                                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'; });
    @media (max-width:600px) {
                            }
        .content-card {
                        } else {
            box-sizing: border-box;
                            const activeIcon = document.querySelector('.icon-bar .skill-icon.active');
            max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
                            if (activeIcon) activeIcon.click();
            width: 100%;
                            // Pause weapon videos when returning to skills
            margin: 10px auto;
                            const weaponTabEl = document.getElementById('weapon');
            padding: 12px;
                            if (weaponTabEl) {
            border-radius: 10px;
                                const wvb = weaponTabEl.querySelector('.video-container');
             overflow: hidden;
                                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)
                });
             });
         })();


         // ===========================
         .content-card.skills-grid {
        // Skins Navigation
             grid-template-columns: 1fr;
        // ===========================
             gap: 12px;
        (function initSkinsArrows() {
         }
            const carousel = $('.skins-carousel');
            const wrapper = $('.skins-carousel-wrapper');
             const left = $('.skins-arrow.left');
            const right = $('.skins-arrow.right');
            if (!carousel || !left || !right || !wrapper) return;
            if (wrapper.dataset.wired) return;
            wrapper.dataset.wired = '1';
            const scrollAmt = () => Math.round(carousel.clientWidth * 0.6);
            function setState() {
                const max = carousel.scrollWidth - carousel.clientWidth;
                const x = carousel.scrollLeft;
                const hasLeft = x > 5, hasRight = x < max - 5;
                left.style.display = hasLeft ? 'inline-block' : 'none';
                right.style.display = hasRight ? 'inline-block' : 'none';
                wrapper.classList.toggle('has-left', hasLeft);
                wrapper.classList.toggle('has-right', hasRight);
                carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : '';
            }
             function go(dir) {
                const max = carousel.scrollWidth - carousel.clientWidth;
                const next = dir < 0
                    ? Math.max(0, carousel.scrollLeft - scrollAmt())
                    : Math.min(max, carousel.scrollLeft + scrollAmt());
                carousel.scrollTo({ left: next, behavior: 'smooth' });
            }
            left.addEventListener('click', () => go(-1));
            right.addEventListener('click', () => go(1));
            carousel.addEventListener('scroll', setState);
            new ResizeObserver(setState).observe(carousel);
            setState();
         })();


         // ===========================
         .top-rail {
        // Utility Functions
            width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
        // ===========================
             max-width: 100%;
        function renderAttributes(str) {
             margin: 0 auto 8px;
            const skillsRoot = document.getElementById('skills');
             padding: 6px 8px;
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
            border-radius: 0;
             const langRaw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
            box-sizing: border-box;
             const langKey = i18nMap[langRaw] ? langRaw : (i18nMap[langRaw.split('-')[0]] ? langRaw.split('-')[0] : 'pt');
             overflow: hidden;
             const L = i18nMap[langKey] || i18nMap.pt || {
        }
                cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia',
                power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
            };


            const vals = (str || '').split(',').map(v => v.trim());
        .top-rail .icon-bar {
             const pve = parseInt(vals[0], 10);
            width: 100%;
             const pvp = parseInt(vals[1], 10);
             padding: 0 6px;
             const ene = parseInt(vals[2], 10);
            gap: 12px;
             const cd = parseInt(vals[3], 10);
             justify-content: flex-start;
             overflow-x: auto;
             /* iOS smooth scroll */
            -webkit-overflow-scrolling: touch;
        }


            const rows = [];
        :root {
             if (!isNaN(cd)) rows.push([L.cooldown, cd]);
             --icon-size: 92px;
            if (!isNaN(ene) && ene !== 0) {
        }
                const label = ene > 0 ? L.energy_gain : L.energy_cost;
                rows.push([label, Math.abs(ene)]);
            }
            if (!isNaN(pve)) rows.push([L.power, pve]);
            if (!isNaN(pvp)) rows.push([L.power_pvp, pvp]);


             if (!rows.length) return '';
        .icon-bar .skill-icon {
             const html = rows.map(([label, value]) => `
             width: var(--icon-size);
    <div class="attr-row">
             height: var(--icon-size);
      <span class="attr-label">${label}</span>
             flex: 0 0 auto;
      <span class="attr-value">${value}</span>
    </div>`).join('');
             return `<div class="attr-list">${html}</div>`;
         }
         }


         function syncDescHeight() {
         .video-container,
             // no-op on purpose
        .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,
         // Event Listeners & Initialization
         .video-container img,
         // ===========================
         .skins-carousel img {
        window.addEventListener('resize', syncDescHeight);
            max-width: 100%;
         if (videoBox) new ResizeObserver(syncDescHeight).observe(videoBox);
            width: 100%;
            height: auto;
         }


         iconItems.forEach(el => {
         html,
            const wired = !!el.dataset._sync_wired;
        body,
            if (wired) return;
        .mw-body,
            el.dataset._sync_wired = '1';
        .mw-body-content {
            el.addEventListener('click', () => {
             overflow-x: hidden;
                Promise.resolve().then(syncDescHeight);
         }
             });
         });


         if (iconsBar) addOnce(iconsBar, 'wheel', (e) => {
         /* Base no mobile - desabilita Font Boosting */
             if (e.deltaY) {
        .desc-box {
                e.preventDefault();
             font-size: 16px !important;
                iconsBar.scrollLeft += e.deltaY;
            -webkit-text-size-adjust: 100% !important;
             }
            -moz-text-size-adjust: 100% !important;
         });
             text-size-adjust: 100% !important;
         }


         // Initialize first skill
         .desc-box * {
        if (iconItems.length) {
             -webkit-text-size-adjust: 100% !important;
             const first = iconItems[0];
             -moz-text-size-adjust: 100% !important;
             if (first) {
            text-size-adjust: 100% !important;
                if (!first.classList.contains('active')) first.classList.add('active');
                setTimeout(() => first.click(), 0);
            }
         }
         }


         // ===========================
         /* Atributos no mobile - tamanho bem legível */
         // Weapon Tab Setup (if exists)
        .attrs__label,
         // ===========================
        .attr-label {
         (function initWeaponTab() {
            font-size: 20px !important;
            const weaponTab = document.getElementById('weapon');
        }
            if (!weaponTab) return;
 
        .attrs__value,
        .attr-value {
            font-size: 20px !important;
        }
 
        .attr-row {
            margin-bottom: 12px;
        }
 
        #skills .desc-box .skill-level-line .attr-label {
            font-size: 22px !important;
        }
 
        /* Descrição - TAMANHO GRANDE para leitura confortável no mobile */
        .desc {
            font-size: 24px !important;
            line-height: 1.95 !important;
            -webkit-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
        }
 
        .desc-box h3 {
            font-size: 32px !important;
        }
    }
 
    /* ===========================OVERFLOW PROTECTION=========================== */
    html,
    body,
    .mw-body,
    .mw-body-content {
        box-sizing: border-box;
        max-width: 100vw;
        overflow-x: hidden;
         /* iOS smooth scroll */
         -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%;
        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;
    }


            const weaponIconBar = weaponTab.querySelector('.icon-bar');
    /* ===========================BACKGROUND SYSTEM=========================== */
            const weaponIconItems = weaponIconBar ? Array.from(weaponIconBar.querySelectorAll('.skill-icon')) : [];
    .mw-body-content .character-box {
            const weaponDescBox = weaponTab.querySelector('.desc-box');
        background-position: center top;
            const weaponVideoBox = weaponTab.querySelector('.video-container');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        z-index: 1;
    }


            if (!weaponIconBar || !weaponIconItems.length) return;
    .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;
    }


            const weaponVideosCache = new Map();
    /* ===========================FINAL ICON OVERRIDES & FIXES=========================== */
            let weaponTotalVideos = 0, weaponLoadedVideos = 0, weaponAutoplay = false;
    :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;
    }


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


                weaponTotalVideos++;
    .icon-bar .skill-icon.active::after {
                const v = document.createElement('video');
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active) !important;
                v.className = 'skill-video';
    }
                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', () => {
    .icon-bar .skill-icon::before {
                    weaponLoadedVideos++;
        inset: -4px;
                    if (weaponLoadedVideos === weaponTotalVideos) weaponAutoplay = true;
        border-radius: calc(var(--icon-radius) + 4px);
                });
        opacity: 0;
        transition: opacity .12s ease, box-shadow .12s ease;
    }


                v.addEventListener('error', () => {
    .icon-bar .skill-icon.active::before {
                    weaponLoadedVideos++;
        opacity: 1 !important;
                    if (weaponLoadedVideos === weaponTotalVideos) weaponAutoplay = true;
        box-shadow: 0 0 14px 4px var(--icon-active-glow), 0 0 0 calc(var(--icon-ring-w) * 2) var(--icon-active-ring) !important;
                });
    }


                weaponVideoBox.appendChild(v);
    .icon-bar .skill-icon,
                weaponVideosCache.set(idx, v);
    .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);
    }


            // Wire clicks for weapon icons
    .icon-bar .skill-icon:hover:not(.active)::after {
            weaponIconItems.forEach(el => {
        box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !important;
                if (el.dataset.wired) return;
    }
                el.dataset.wired = '1';
                const label = el.dataset.nome || el.dataset.name || '';
                el.setAttribute('aria-label', label);
                if (el.hasAttribute('title')) el.removeAttribute('title');
                const img = el.querySelector('img');
                if (img) {
                    img.setAttribute('alt', '');
                    if (img.hasAttribute('title')) img.removeAttribute('title');
                }


                el.addEventListener('click', () => {
    .icon-bar .skill-icon.active {
                    const skillsRoot = document.getElementById('skills');
        transform: scale(1.10) !important;
                    const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
        z-index: 5;
                    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.active img {
                        pt: el.dataset.descPt || '',
        transform: none !important;
                        en: el.dataset.descEn || '',
    }
                        es: el.dataset.descEs || '',
                        pl: el.dataset.descPl || ''
                    };
                    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) : '';
    /* ===========================FINAL TOOLTIP STYLES=========================== */
                    if (weaponDescBox) {
    .skill-tooltip {
                        weaponDescBox.innerHTML = `
        position: fixed;
         <div class="skill-title"><h3>${name}</h3></div>
        z-index: 10000;
         ${level ? `<div class="skill-level-line"><span class="attr-label">${L.level} ${level}</span></div>` : ''}
        pointer-events: none;
         ${attrsHTML}
        padding: 8px 10px;
         <div class="desc">${descHtml}</div>`;
        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;
    }


                    weaponIconItems.forEach(i => i.classList.remove('active'));
    /* ===========================SKILL LEVEL STYLING=========================== */
                    el.classList.add('active');
    #skills .desc-box .skill-title {
                    if (!weaponAutoplay && weaponLoadedVideos > 0) weaponAutoplay = true;
        margin: 0 0 4px;
                    window.__lastActiveSkillIcon = el;
    }


                    // Show video
    #skills .desc-box .skill-level-line {
                    if (weaponVideoBox) {
        margin: 0 0 10px;
                        Array.from(weaponVideoBox.querySelectorAll('video.skill-video')).forEach(v => {
        text-align: center;
                            try { v.pause(); } catch (e) { }
        line-height: 1.15;
                            v.style.display = 'none';
    }
                        });
                    }


                    const hasIdx = !!el.dataset.index;
    #skills .desc-box .skill-level-line .attr-label {
                    const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');
        color: #f0c87b;
                    if (!weaponVideoBox || !hasVideo) {
        font-weight: 800;
                        if (weaponVideoBox) weaponVideoBox.style.display = 'none';
        letter-spacing: .2px;
                        return;
        font-size: .98rem;
                    }
    }


                    if (hasIdx && weaponVideosCache.has(el.dataset.index)) {
    /* ===========================SKILL FLAGS (CARACTERÍSTICAS)=========================== */
                        const v = weaponVideosCache.get(el.dataset.index);
    .video-container {
                        weaponVideoBox.style.display = 'block';
        position: relative;
                        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
    .skill-flags {
            const tip = document.querySelector('.skill-tooltip');
        position: absolute;
            if (tip) {
        top: 8px;
                weaponIconItems.forEach(icon => {
        left: 8px;
                    if (icon.dataset.tipwired) return;
        display: flex;
                    icon.dataset.tipwired = '1';
        flex-direction: row;
                    const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
        gap: 6px;
                    if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
        z-index: 10;
                    if (icon.hasAttribute('title')) icon.removeAttribute('title');
        pointer-events: auto;
    }


                    const measureAndPos = (el) => {
    .skill-flag {
                        if (!el || tip.getAttribute('aria-hidden') === 'true') return;
        display: inline-block;
                        tip.style.left = '0px';
        pointer-events: all;
                        tip.style.top = '0px';
        cursor: pointer;
                        const rect = el.getBoundingClientRect();
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
                        const tr = tip.getBoundingClientRect();
    }
                        let left = Math.round(rect.left + (rect.width - tr.width) / 2);
                        left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
                        const coarse = (window.matchMedia && matchMedia('(pointer: coarse)').matches) || (window.innerWidth <= 600);
                        let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
                        if (top < 8) top = Math.round(rect.bottom + 10);
                        tip.style.left = left + 'px';
                        tip.style.top = top + 'px';
                    };
                    const show = (el, text) => {
                        tip.textContent = text || '';
                        tip.setAttribute('aria-hidden', 'false');
                        measureAndPos(el);
                        tip.style.opacity = '1';
                    };
                    const hide = () => {
                        tip.setAttribute('aria-hidden', 'true');
                        tip.style.opacity = '0';
                        tip.style.left = '-9999px';
                        tip.style.top = '-9999px';
                    };
                    icon.addEventListener('mouseenter', () => show(icon, 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
    /* Tooltip específico para flags (cor cinza para contraste) */
         })();
    .skill-tooltip.flag-tooltip {
        background: rgba(80, 80, 85, .98) !important;
         box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
    }


        // Debug logging
    /* Tooltip específico para weapon toggle (cor vermelha) */
        setTimeout(() => {
    .skill-tooltip.weapon-tooltip {
            Array.from(document.querySelectorAll('.skill-icon')).forEach(el => {
        background: linear-gradient(135deg, rgba(140, 40, 40, .98), rgba(100, 30, 30, .98)) !important;
                console.log('icon', el.dataset.index, 'data-video=', el.dataset.video);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 100, 100, .25) !important;
            });
         color: #fff !important;
            videosCache.forEach((v, idx) => {
     }
                const src = v.querySelector('source') ? v.querySelector('source').src : v.src;
</style>
                console.log('video element', idx, 'src=', src, 'readyState=', v.readyState);
                v.addEventListener('error', (ev) => {
                    console.error('VIDEO ERROR idx=', idx, 'src=', src, 'error=', v.error);
                });
                v.addEventListener('loadedmetadata', () => {
                    console.log('loadedmetadata idx=', idx, 'dimensions=', v.videoWidth, 'x', v.videoHeight);
                });
            });
         }, 600);
     })();
</script>

Edição atual tal como às 18h52min de 3 de dezembro de 2025

<style> 

   /* ===========================BASE STYLES & RESET=========================== */
   img {
       pointer-events: none;
       -webkit-user-select: 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;
       -webkit-user-select: none;
       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;
       scroll-behavior: smooth;
       /* Firefox */
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
       justify-content: flex-start;
       align-items: center;
       position: relative;
       z-index: 4;
   }

   /* Weapon Toggle Button - Estilos completamente isolados usando .weapon-active */
   .icon-bar .skill-icon.weapon-bar-toggle {
       background: rgba(40, 40, 48, 0.85) !important;
       color: rgba(255, 255, 255, 0.7) !important;
       border: 1px solid rgba(255, 255, 255, 0.08) !important;
       overflow: visible !important;
       transform: none !important;
       box-shadow: none !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle::before {
       display: none !important;
       opacity: 0 !important;
       box-shadow: none !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(180, 180, 180, 0.5) !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:hover {
       background: rgba(55, 55, 65, 0.9) !important;
       color: rgba(255, 255, 255, 0.95) !important;
       transform: none !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:hover::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(220, 220, 220, 0.6) !important;
   }

   /* Estado ativo do toggle usa .weapon-active em vez de .active */
   .icon-bar .skill-icon.weapon-bar-toggle.weapon-active {
       background: linear-gradient(145deg, rgba(200, 60, 40, 0.95), rgba(160, 45, 30, 0.95)) !important;
       color: #fff !important;
       transform: scale(1.08) !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle.weapon-active::before {
       display: none !important;
   }

   .icon-bar .skill-icon.weapon-bar-toggle.weapon-active::after {
       box-shadow: inset 0 0 0 var(--icon-ring-w) #FF5722 !important;
       animation: togglePulse 1.8s ease-in-out infinite;
   }

   @keyframes togglePulse {

       0%,
       100% {
           box-shadow: inset 0 0 0 var(--icon-ring-w) rgba(255, 87, 34, 0.9);
       }

       50% {
           box-shadow: inset 0 0 0 var(--icon-ring-w) #FF7043, inset 0 0 10px 2px rgba(255, 112, 67, 0.35);
       }
   }

   .icon-bar .skill-icon.weapon-bar-toggle svg {
       width: 22px;
       height: 22px;
       pointer-events: none;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:focus-visible {
       outline: none;
   }

   .icon-bar .skill-icon.weapon-bar-toggle:focus-visible::after {
       box-shadow: 0 0 0 3px rgba(220, 80, 80, 0.5) !important;
   }

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

   .top-rail.skills.weapon-mode-on {
       background: linear-gradient(135deg, rgba(65, 25, 25, 0.96), rgba(50, 18, 18, 0.96));
       border-color: transparent;
       animation: weapon-bar-glow 3.5s ease-in-out infinite;
   }

   .top-rail.skills.weapon-mode-on::before {
       content: "";
       position: absolute;
       inset: -2px;
       border-radius: inherit;
       padding: 2px;
       background: linear-gradient(90deg,
               transparent 0%,
               rgba(255, 80, 80, 0.8) 25%,
               rgba(255, 120, 60, 1) 50%,
               rgba(255, 80, 80, 0.8) 75%,
               transparent 100%);
       background-size: 200% 100%;
       animation: weapon-border-scan 4s linear infinite;
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       pointer-events: none;
       z-index: -1;
   }

   .top-rail.skills.weapon-mode-on::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: inherit;
       box-shadow:
           0 0 15px rgba(255, 80, 80, 0.4),
           inset 0 0 20px rgba(255, 80, 80, 0.1);
       animation: weapon-bar-pulse 3s ease-in-out infinite;
       pointer-events: none;
   }

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

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

   @keyframes weapon-bar-glow {

       0%,
       100% {
           filter: brightness(1);
       }

       50% {
           filter: brightness(1.1);
       }
   }

   @keyframes weapon-bar-pulse {

       0%,
       100% {
           opacity: 0.6;
           box-shadow:
               0 0 12px rgba(255, 80, 80, 0.3),
               inset 0 0 15px rgba(255, 80, 80, 0.08);
       }

       50% {
           opacity: 1;
           box-shadow:
               0 0 25px rgba(255, 80, 80, 0.5),
               inset 0 0 25px rgba(255, 80, 80, 0.15);
       }
   }

   .skills-back-wrapper {
       display: none;
       position: absolute;
       left: 50px;
       top: 50%;
       transform: translateY(-50%);
       width: 70px;
       height: 95%;
       z-index: -1;
       pointer-events: none;
   }

   .skills-rail-wrap {
       position: relative;
       z-index: 0;
   }

   .skills-rail-wrap.has-sub-bar::before {
       content: "";
       position: absolute;
       left: 2px;
       /* alinha por dentro da borda do rail (2px) */
       top: 2px;
       bottom: 2px;
       /* evita vazar na parte de baixo */
       width: 70px;
       background: rgba(28, 28, 34, .95);
       border: 0;
       /* sem borda própria para não “escapar” */
       box-shadow: none;
       /* sem sombra aqui */
       border-radius: 10px 0 0 10px;
       /* 12px - 2px da borda externa */
       pointer-events: none;
       z-index: 0;
   }

   .skills-back-wrapper .skills-back {
       display: flex;
       position: absolute;
       left: 0;
       top: 0;
       transform: translateX(-97%);
       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%);
       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;
       /* Anti-aliasing para bordas suaves */
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       transform: translateZ(0);
       border: 1px solid rgba(255, 255, 255, 0.05);
       background-color: rgba(15, 15, 23, 0.95);
       box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
   }

   /* 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;
       -webkit-user-select: none;
       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;
       -webkit-user-select: none;
       user-select: none;
   }

   .icon-bar .skill-icon img {
       display: block;
       width: 100%;
       height: 100%;
       border-radius: inherit;
       -webkit-clip-path: inset(0 round var(--icon-radius));
       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;
       /* Anti-aliasing para bordas suaves */
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       transform: translateZ(0);
   }

   .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;
       font-size: 16px;
       /* Desabilita Font Boosting em mobile */
       -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
   }

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

   .desc {
       font-size: 17px !important;
       line-height: 1.75 !important;
       letter-spacing: .01em;
       overflow-x: hidden;
       /* iOS smooth scroll */
       -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;
       /* IMPORTANTE: Desabilita o Font Boosting que aumenta texto longo automaticamente */
       -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
       max-height: none;
   }

   .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: 5px;
       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;
           /* iOS smooth scroll */
           -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;
       }

       /* Base no mobile - desabilita Font Boosting */
       .desc-box {
           font-size: 16px !important;
           -webkit-text-size-adjust: 100% !important;
           -moz-text-size-adjust: 100% !important;
           text-size-adjust: 100% !important;
       }

       .desc-box * {
           -webkit-text-size-adjust: 100% !important;
           -moz-text-size-adjust: 100% !important;
           text-size-adjust: 100% !important;
       }

       /* Atributos no mobile - tamanho bem legível */
       .attrs__label,
       .attr-label {
           font-size: 20px !important;
       }

       .attrs__value,
       .attr-value {
           font-size: 20px !important;
       }

       .attr-row {
           margin-bottom: 12px;
       }

       #skills .desc-box .skill-level-line .attr-label {
           font-size: 22px !important;
       }

       /* Descrição - TAMANHO GRANDE para leitura confortável no mobile */
       .desc {
           font-size: 24px !important;
           line-height: 1.95 !important;
           -webkit-text-size-adjust: 100% !important;
           text-size-adjust: 100% !important;
       }

       .desc-box h3 {
           font-size: 32px !important;
       }
   }

   /* ===========================OVERFLOW PROTECTION=========================== */
   html,
   body,
   .mw-body,
   .mw-body-content {
       box-sizing: border-box;
       max-width: 100vw;
       overflow-x: hidden;
       /* iOS smooth scroll */
       -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%;
       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 {
       margin: 0 0 4px;
   }

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

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

   /* ===========================SKILL FLAGS (CARACTERÍSTICAS)=========================== */
   .video-container {
       position: relative;
   }

   .skill-flags {
       position: absolute;
       top: 8px;
       left: 8px;
       display: flex;
       flex-direction: row;
       gap: 6px;
       z-index: 10;
       pointer-events: auto;
   }

   .skill-flag {
       display: inline-block;
       pointer-events: all;
       cursor: pointer;
       filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
   }

   /* Tooltip específico para flags (cor cinza para contraste) */
   .skill-tooltip.flag-tooltip {
       background: rgba(80, 80, 85, .98) !important;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
   }

   /* Tooltip específico para weapon toggle (cor vermelha) */
   .skill-tooltip.weapon-tooltip {
       background: linear-gradient(135deg, rgba(140, 40, 40, .98), rgba(100, 30, 30, .98)) !important;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 100, 100, .25) !important;
       color: #fff !important;
   }

</style>

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