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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m (fix do subskill css)
 
(72 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;
        aspect-ratio: 1 / 1;
    }
 
    .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: #e0e0e0;
         /* Melhor contraste: #bbb -> #e0e0e0 (WCAG AA) */
    }
 
    /* ===========================TABS SYSTEM=========================== */
    .character-tabs {
        margin: 4px 0 4px 8px;
        display: flex;
        gap: 12px;
    }
 
    .tab-btn {
        padding: 6px 20px;
        min-width: 44px;
        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;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
 
    .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: visible;
        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;
    }
 
    body.transitioning-tabs .tabs-height-wrapper {
        overflow: hidden;
    }
 
    .character-box {
        overflow: visible;
    }


        // ===========================
    /* ===========================SKILLS SYSTEM=========================== */
        // DOM Setup & Initialization
    .skills-container {
        // ===========================
         display: flex;
         const skillsTab = $('#skills');
         gap: 20px;
         const skinsTab = $('#skins');
         align-items: flex-start;
         const weaponTab = $('#weapon');
    }


         // Clean up existing elements
    .skills-details {
         ensureRemoved('.top-rail');
         flex: 1;
         ensureRemoved('.content-card');
         display: flex;
         ensureRemoved('.video-placeholder');
        flex-direction: column;
         Array.from(document.querySelectorAll('.card-skins-title, .card-skins .card-skins-title, .cardskins-title, .rail-title')).forEach(t => {
         gap: 10px;
            if ((t.textContent || '').trim().toLowerCase().includes('skins')) {
         width: auto;
                t.remove();
         justify-content: center;
            }
    }
        });


        // Setup skills tab structure
    /* ===========================SKILL ICONS & BAR=========================== */
        if (skillsTab) {
    /* Wrapper de scroll para permitir glow sem clipping */
            const iconBar = skillsTab.querySelector('.icon-bar');
    .icon-scroll-x {
            if (iconBar) {
        display: block;
                const rail = document.createElement('div');
        overflow-x: auto;
                rail.className = 'top-rail skills';
        overflow-y: hidden;
                rail.appendChild(iconBar);
        padding-top: 10px;
                skillsTab.prepend(rail);
        padding-bottom: 10px;
            }
        margin-top: -10px;
        margin-bottom: -10px;
        scroll-behavior: smooth;
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: #ababab transparent;
        position: relative;
        z-index: 4;
    }


            const details = skillsTab.querySelector('.skills-details');
    .icon-scroll-x::-webkit-scrollbar {
            const videoContainer = skillsTab.querySelector('.video-container');
        height: 6px;
            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)
    .icon-scroll-x::-webkit-scrollbar-track {
        if (weaponTab) {
        background: transparent;
            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');
    .icon-scroll-x::-webkit-scrollbar-thumb {
            const videoContainerW = weaponTab.querySelector('.video-container');
        background: #151515;
            const cardW = document.createElement('div');
        border-radius: 3px;
            cardW.className = 'content-card skills-grid';
    }
            if (detailsW) cardW.appendChild(detailsW);
            if (videoContainerW) cardW.appendChild(videoContainerW);
            weaponTab.appendChild(cardW);
        }


         // Setup skins tab structure
    .icon-bar {
         if (skinsTab) {
         display: flex;
            const wrapper = skinsTab.querySelector('.skins-carousel-wrapper');
         flex-wrap: nowrap;
            const rail = document.createElement('div');
        gap: 10px;
            rail.className = 'top-rail skins';
        width: 100%;
            const title = document.createElement('div');
        overflow-x: auto;
            title.className = 'rail-title';
        overflow-y: visible;
            title.textContent = 'Skins & Spotlights';
        padding: 6px 6px;
            rail.appendChild(title);
        margin-bottom: 6px;
            if (wrapper) {
        scroll-behavior: smooth;
                const card = document.createElement('div');
        /* Firefox */
                card.className = 'content-card';
        scrollbar-width: thin;
                card.appendChild(wrapper);
        scrollbar-color: #ababab transparent;
                skinsTab.prepend(rail);
        justify-content: flex-start;
                skinsTab.appendChild(card);
        align-items: center;
            } else {
        position: relative;
                skinsTab.prepend(rail);
        z-index: 4;
            }
    }
        }


        // ===========================
    /* Quando dentro de .top-rail.skills, a .icon-bar não é mais scroll container */
        // Video Management
    .top-rail.skills .icon-bar {
        // ===========================
        overflow: visible !important;
        const iconsBar = $('#skills') ? $('.icon-bar', $('#skills')) : null;
        width: max-content;
         const iconItems = iconsBar ? Array.from(iconsBar.querySelectorAll('.skill-icon')) : [];
         max-width: none;
         const descBox = $('#skills') ? $('.desc-box', $('#skills')) : null;
         margin: 0;
         const videoBox = $('#skills') ? $('.video-container', $('#skills')) : null;
         padding: 6px 6px;
    }


         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: hidden !important;
         transform: none !important;
         box-shadow: none !important;
         padding: 0 !important;
        margin: 0 !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 {
        width: 22px;
        height: 22px;
        pointer-events: none;
    }
    .icon-bar .skill-icon.weapon-bar-toggle .weapon-toggle-icon {
        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;
        pointer-events: none;
        object-fit: cover;
    }
    .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 {
        // Skill Bar Wiring (root and nested)
        background: linear-gradient(135deg, rgba(65, 25, 25, 0.96), rgba(50, 18, 18, 0.96));
        // ===========================
        border-color: transparent;
        function wireTooltipsForNewIcons() {
        animation: weapon-bar-glow 3.5s ease-in-out infinite;
            const tip = document.querySelector('.skill-tooltip');
    }
            if (!tip) return;
            let lockUntil2 = 0;
            Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
                if (icon.dataset.tipwired) return;
                icon.dataset.tipwired = '1';
                const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
                if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
                if (icon.hasAttribute('title')) icon.removeAttribute('title');
                const img = icon.querySelector('img');
                if (img) { const imgAlt = img.getAttribute('alt') || ''; const imgTitle = img.getAttribute('title') || ''; if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle); img.setAttribute('alt', ''); if (img.hasAttribute('title')) img.removeAttribute('title'); }
                const measureAndPos = (el) => {
                    if (!el || tip.getAttribute('aria-hidden') === 'true') return;
                    tip.style.left = '0px'; tip.style.top = '0px';
                    const rect = el.getBoundingClientRect(); const tr = tip.getBoundingClientRect();
                    let left = Math.round(rect.left + (rect.width - tr.width) / 2);
                    left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
                    const coarse = (window.matchMedia && matchMedia('(pointer: coarse)').matches) || (window.innerWidth <= 600);
                    let top = coarse ? Math.round(rect.bottom + 10) : Math.round(rect.top - tr.height - 8);
                    if (top < 8) top = Math.round(rect.bottom + 10);
                    tip.style.left = left + 'px'; tip.style.top = top + 'px';
                };
                const show = (el, text) => { tip.textContent = text || ''; tip.setAttribute('aria-hidden', 'false'); measureAndPos(el); tip.style.opacity = '1'; };
                const hide = () => { tip.setAttribute('aria-hidden', 'true'); tip.style.opacity = '0'; tip.style.left = '-9999px'; tip.style.top = '-9999px'; };
                icon.addEventListener('mouseenter', () => show(icon, (icon.dataset.nome || icon.dataset.name || '')));
                icon.addEventListener('mousemove', () => { if (performance.now() >= lockUntil2) measureAndPos(icon); });
                icon.addEventListener('click', () => { lockUntil2 = performance.now() + 240; measureAndPos(icon); });
                icon.addEventListener('mouseleave', hide);
            });
        }


         function showVideoForIcon(el) {
    .top-rail.skills.weapon-mode-on::before {
            // Hide all existing videos
        content: "";
            if (videoBox) {
        position: absolute;
                 Array.from(videoBox.querySelectorAll('video.skill-video')).forEach(v => { try { v.pause(); } catch (e) { } v.style.display = 'none'; });
         inset: -2px;
            }
        border-radius: inherit;
            if (window.__subskills) window.__subskills.hideAll?.(videoBox);
        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;
    }


            const hasIdx = !!el.dataset.index;
    .top-rail.skills.weapon-mode-on::after {
             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: 0;
                return;
        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;
    }


            if (hasIdx && videosCache.has(el.dataset.index)) {
    @keyframes weapon-border-scan {
                const v = videosCache.get(el.dataset.index);
        0% {
                videoBox.style.display = 'block';
            background-position: 200% 0;
                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) { } }
                return;
            }


            // Nested or custom icon video
        100% {
             let v = nestedVideoElByIcon.get(el);
             background-position: -200% 0;
            if (!v) {
                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() {
    @keyframes weapon-bar-glow {
            const currIcons = Array.from(iconsBar.querySelectorAll('.skill-icon'));
            currIcons.forEach(el => {
                if (el.dataset.wired) return;
                el.dataset.wired = '1';
                const label = el.dataset.nome || el.dataset.name || '';
                el.setAttribute('aria-label', label);
                if (el.hasAttribute('title')) el.removeAttribute('title');
                const img = el.querySelector('img'); if (img) { img.setAttribute('alt', ''); if (img.hasAttribute('title')) img.removeAttribute('title'); }
                el.addEventListener('click', () => {
                    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)
        0%,
                    const lang = getLangKey();
        100% {
                    const descPack = {
            filter: brightness(1);
                        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) : '');
         50% {
                    if (descBox) {
            filter: brightness(1.1);
                        descBox.innerHTML = `
         <div class="skill-title"><h3>${name}</h3></div>
        ${level ? `<div class=\"skill-level-line\"><span class=\"attr-label\">${L.level} ${level}</span></div>` : ''}
        ${attrsHTML}
        <div class="desc">${descHtml}</div>`;
                    }
                    // Active state
                    currIcons.forEach(i => i.classList.remove('active')); el.classList.add('active'); if (!autoplay && loadedVideos > 0) autoplay = true;
                    // Track for language changes
                    window.__lastActiveSkillIcon = el;
                    // Video
                    showVideoForIcon(el);
                    // Nested skills UX: clicou na skill -> troca a barra se houver subs; se for 'back', volta
                    const subsRaw = el.dataset.subs || el.getAttribute('data-subs');
                    const isBack = el.dataset.back === 'true' || el.getAttribute('data-back') === 'true';
                    if (isBack && barStack.length) {
                        const prev = barStack.pop();
                        renderBarFromItems(prev.items);
                        const btn = document.querySelector('.skills-back-wrapper');
                        if (btn) btn.style.display = barStack.length ? 'block' : 'none';
                        return;
                    }
                    if (subsRaw && subsRaw.trim() !== '') {
                        try { const subs = JSON.parse(subsRaw); pushSubBarFrom(subs, el); } catch { /* no-op */ }
                    }
                });
            });
            // Removido: badges de +/− (abrir/voltar via clique direto no ícone)
            wireTooltipsForNewIcons();
         }
         }
    }
    @keyframes weapon-bar-pulse {


         function snapshotCurrentBarItemsFromDOM() {
         0%,
             return Array.from(iconsBar.querySelectorAll('.skill-icon')).map(el => {
        100% {
                const img = el.querySelector('img');
             opacity: 0.6;
                const iconURL = img ? img.src : '';
            box-shadow:
                const subsRaw = el.dataset.subs || el.getAttribute('data-subs') || '';
                 0 0 12px rgba(255, 80, 80, 0.3),
                 let subs = null; try { subs = subsRaw ? JSON.parse(subsRaw) : null; } catch { subs = null; }
                inset 0 0 15px rgba(255, 80, 80, 0.08);
                const subattrsRaw = el.dataset.subattrs || '';
                return {
                    name: el.dataset.nome || el.dataset.name || '',
                    level: el.dataset.level || '',
                    desc: el.dataset.desc || '',
                    descPt: el.dataset.descPt || '',
                    descEn: el.dataset.descEn || '',
                    descEs: el.dataset.descEs || '',
                    descPl: el.dataset.descPl || '',
                    attrs: el.dataset.atr || el.dataset.attrs || '',
                    video: el.dataset.video || '',
                    iconURL,
                    subs,
                    subattrsStr: subattrsRaw,
                    noback: el.dataset.noback || null
                };
            });
         }
         }


         function ensureBackButton() {
         50% {
             const rail = iconsBar.closest('.top-rail.skills'); if (!rail) return null;
             opacity: 1;
             // Wrap rail in a dedicated container if not already wrapped
             box-shadow:
            let wrap = rail.parentElement;
                 0 0 25px rgba(255, 80, 80, 0.5),
            if (!wrap || !wrap.classList || !wrap.classList.contains('skills-rail-wrap')) {
                 inset 0 0 25px rgba(255, 80, 80, 0.15);
                 const parentNode = rail.parentNode;
                const newWrap = document.createElement('div');
                newWrap.className = 'skills-rail-wrap';
                // keep layout
                parentNode.insertBefore(newWrap, rail);
                newWrap.appendChild(rail);
                wrap = newWrap;
            }
            // Ensure back-wrapper exists as sibling layered behind
            let backWrap = wrap.querySelector('.skills-back-wrapper');
            if (!backWrap) {
                backWrap = document.createElement('div');
                backWrap.className = 'skills-back-wrapper';
                const btnInner = document.createElement('button');
                btnInner.className = 'skills-back';
                btnInner.type = 'button';
                btnInner.setAttribute('aria-label', 'Voltar');
                 // Use SVG double chevron for a crisper, larger icon
                btnInner.innerHTML = '<svg class="back-chevron" width="100%" height="100%" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet"><path d="M10 2L4 16L10 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 2L14 16L20 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M30 2L24 16L30 30" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
                backWrap.appendChild(btnInner);
                wrap.insertBefore(backWrap, rail);
                btnInner.addEventListener('click', () => {
                    if (!barStack.length) return;
                    const prev = barStack.pop();
                    renderBarFromItems(prev.items);
                    backWrap.style.display = barStack.length ? 'block' : 'none';
                    if (!barStack.length) btnInner.classList.remove('peek');
                });
            }
            // Check if current level has noback flag
            const currentLevel = barStack[barStack.length - 1];
            const shouldHide = currentLevel && currentLevel.noback;
            backWrap.style.display = (barStack.length && !shouldHide) ? 'block' : 'none';
            const btnInner = backWrap.querySelector('.skills-back');
            return btnInner;
         }
         }
    }
    .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 {


         function renderBarFromItems(items) {
         0%,
             iconsBar.innerHTML = '';
        100% {
            items.forEach((it, idx) => {
             box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
                const node = document.createElement('div'); node.className = 'skill-icon';
                node.dataset.nome = it.name || '';
                if (it.level) node.dataset.level = it.level;
                if (it.desc) node.dataset.desc = it.desc;
                if (it.descPt) node.dataset.descPt = it.descPt;
                if (it.descEn) node.dataset.descEn = it.descEn;
                if (it.descEs) node.dataset.descEs = it.descEs;
                if (it.descPl) node.dataset.descPl = it.descPl;
                if (it.attrs) node.dataset.atr = it.attrs;
                if (it.video) node.dataset.video = it.video;
                if (it.subs) node.dataset.subs = JSON.stringify(it.subs);
                if (it.subattrsStr) node.dataset.subattrs = it.subattrsStr;
                if (it.noback) node.dataset.noback = it.noback;
                // mark nested icons (no dataset.index)
                if (!it.index) node.dataset.nested = '1';
                const img = document.createElement('img'); img.alt = ''; img.src = it.iconURL || (it.icon ? filePathURL(it.icon) : ''); node.appendChild(img);
                iconsBar.appendChild(node);
            });
            // Animação de entrada (igual quando entra em subskills)
            Array.from(iconsBar.children).forEach((c, i) => {
                c.style.opacity = '0'; c.style.transform = 'translateY(6px)';
                requestAnimationFrame(() => {
                    setTimeout(() => { c.style.transition = 'opacity .18s ease, transform .18s ease'; c.style.opacity = '1'; c.style.transform = 'translateY(0)'; }, i * 24);
                });
            });
            wireClicksForCurrentBar(); const b = ensureBackButton(); if (b) b.classList.add('peek');
         }
         }


         function pushSubBarFrom(subs, parentIconEl) {
         50% {
             // Check if parent has noback flag
             box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 8px rgba(255, 255, 255, 0.18);
            const hasNoBack = parentIconEl && (parentIconEl.dataset.noback === 'true' || parentIconEl.getAttribute('data-noback') === 'true');
            // Save current
            barStack.push({ items: snapshotCurrentBarItemsFromDOM(), noback: hasNoBack }); ensureBackButton();
            // Build next items from JSON
            const skillsRoot = document.getElementById('skills');
            const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
            const L = i18nMap[getLangKey()] || i18nMap.pt || { cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia', power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível' };
            const items = (subs || []).map(s => {
                const name = (s.name || s.n || '').trim();
                const desc = chooseDescFrom(s).replace(/'''(.*?)'''/g, '<b>$1</b>');
                const attrsHTML = renderSubAttributesFromObj(s, L);
                // store sub-attrs object JSON to re-render attributes later
                return {
                    name,
                    level: (s.level || '').toString().trim(),
                    desc,
                    descPt: (s.descPt || (s.desc_i18n && s.desc_i18n.pt) || ''),
                    descEn: (s.descEn || (s.desc_i18n && s.desc_i18n.en) || ''),
                    descEs: (s.descEs || (s.desc_i18n && s.desc_i18n.es) || ''),
                    descPl: (s.descPl || (s.desc_i18n && s.desc_i18n.pl) || ''),
                    // keep raw obj for attrs
                    attrs: '',
                    icon: (s.icon || 'Nada.png'),
                    iconURL: filePathURL(s.icon || 'Nada.png'),
                    video: s.video ? filePathURL(s.video) : '',
                    subs: Array.isArray(s.subs) ? s.subs : null,
                    subattrs: s,
                    back: s.back === true ? 'true' : null
                };
            });
            // Render and attach subattrs object via data-subattrs
            iconsBar.innerHTML = '';
            items.forEach((it, iIdx) => {
                const node = document.createElement('div'); node.className = 'skill-icon'; node.dataset.nested = '1';
                node.dataset.nome = it.name || '';
                if (it.level) node.dataset.level = it.level;
                if (it.desc) node.dataset.desc = it.desc;
                if (it.descPt) node.dataset.descPt = it.descPt;
                if (it.descEn) node.dataset.descEn = it.descEn;
                if (it.descEs) node.dataset.descEs = it.descEs;
                if (it.descPl) node.dataset.descPl = it.descPl;
                if (it.video) node.dataset.video = it.video;
                if (it.subs) node.dataset.subs = JSON.stringify(it.subs);
                if (it.subattrs) node.dataset.subattrs = JSON.stringify(it.subattrs);
                if (it.back) node.dataset.back = it.back;
                const img = document.createElement('img'); img.alt = ''; img.src = it.iconURL; node.appendChild(img);
                iconsBar.appendChild(node);
            });
            // pequena animação de entrada
            Array.from(iconsBar.children).forEach((c, i) => {
                c.style.opacity = '0'; c.style.transform = 'translateY(6px)';
                requestAnimationFrame(() => {
                    setTimeout(() => { c.style.transition = 'opacity .18s ease, transform .18s ease'; c.style.opacity = '1'; c.style.transform = 'translateY(0)'; }, i * 24);
                });
            });
            wireClicksForCurrentBar(); const b2 = ensureBackButton(); if (b2) b2.classList.add('peek');
         }
         }
    }


        // Reage à troca de idioma (emitida pelo char translator)
    .skills-back-wrapper .skills-back.peek {
        window.addEventListener('gla:langChanged', () => {
        animation: backPeekPulse 1.4s ease-in-out infinite;
            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 .back-chevron {
         wireClicksForCurrentBar(); const b0 = ensureBackButton(); if (b0) { b0.classList.add('peek'); b0.style.alignSelf = 'stretch'; }
         display: block;
         width: 90%;
        height: 90%;
    }


        // ===========================
    .icon-bar::-webkit-scrollbar {
        // Tooltip System
        height: 6px;
        // ===========================
    }
        (function initSkillTooltip() {
            if (document.querySelector('.skill-tooltip')) return;
            const tip = document.createElement('div');
            tip.className = 'skill-tooltip';
            tip.setAttribute('role', 'tooltip');
            tip.setAttribute('aria-hidden', 'true');
            document.body.appendChild(tip);


            const lockUntilRef = { value: 0 };
    .icon-bar::-webkit-scrollbar-track {
        background: transparent;
    }


            function measureAndPos(el) {
    .icon-bar::-webkit-scrollbar-thumb {
                if (!el || tip.getAttribute('aria-hidden') === 'true') return;
        background: #151515;
                tip.style.left = '0px';
        border-radius: 3px;
                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 Variables - Consolidado na seção ICON ENHANCEMENTS */
                tip.textContent = text || '';
                tip.setAttribute('aria-hidden', 'false');
                measureAndPos(el);
                tip.style.opacity = '1';
            }


            function hide() {
    .icon-bar .skill-icon {
                tip.setAttribute('aria-hidden', 'true');
        width: var(--icon-size);
                tip.style.opacity = '0';
        height: var(--icon-size);
                tip.style.left = '-9999px';
        position: relative;
                tip.style.top = '-9999px';
        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);
    }


            // Export to global for subskills to use
    /* small + badge to indicate nested subs */
            window.__globalSkillTooltip = {
    .icon-bar .skill-icon .sub-badge {
                show,
        position: absolute;
                hide,
        right: 2px;
                measureAndPos,
        bottom: 2px;
                lockUntil: lockUntilRef
        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;
    }


            Array.from(document.querySelectorAll('.icon-bar .skill-icon')).forEach(icon => {
    /* back badge (−) to return to previous bar */
                if (icon.dataset.tipwired) return;
    .icon-bar .skill-icon .back-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: #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;
    }


                const img = icon.querySelector('img');
    .icon-bar .skill-icon img {
                if (img) {
        display: block;
                    const imgAlt = img.getAttribute('alt') || '';
        width: 100%;
                    const imgTitle = img.getAttribute('title') || '';
        height: 100%;
                    if (!label && (imgAlt || imgTitle)) icon.setAttribute('aria-label', imgAlt || imgTitle);
        aspect-ratio: 1 / 1;
                    img.setAttribute('alt', '');
        border-radius: inherit;
                    if (img.hasAttribute('title')) img.removeAttribute('title');
        -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;
        object-fit: cover;
    }


                icon.addEventListener('mouseenter', () => show(icon, label));
    /* Icon Ring Effects */
                icon.addEventListener('mousemove', () => { if (performance.now() >= lockUntilRef.value) measureAndPos(icon); });
    .icon-bar .skill-icon::after {
                icon.addEventListener('click', () => { lockUntilRef.value = performance.now() + 240; measureAndPos(icon); });
        content: "";
                icon.addEventListener('mouseleave', hide);
        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);
    }


            // Also wire subskill icons present at load (kept in sync when sub-rail opens)
    .icon-bar .skill-icon::before {
            Array.from(document.querySelectorAll('.subskills-rail .subicon')).forEach(sub => {
        content: "";
                if (sub.dataset.tipwired) return;
        position: absolute;
                sub.dataset.tipwired = '1';
        inset: 0;
                const label = sub.getAttribute('title') || sub.getAttribute('aria-label') || '';
        border-radius: inherit;
                if (label && !sub.hasAttribute('aria-label')) sub.setAttribute('aria-label', label);
        pointer-events: none;
                if (sub.hasAttribute('title')) sub.removeAttribute('title');
        z-index: 1;
                sub.addEventListener('mouseenter', () => show(sub, label));
        box-shadow: none;
                sub.addEventListener('mousemove', () => { if (performance.now() >= lockUntilRef.value) measureAndPos(sub); });
        opacity: 0;
                sub.addEventListener('click', () => { lockUntilRef.value = performance.now() + 240; measureAndPos(sub); });
        transition: opacity .14s ease, box-shadow .14s ease;
                sub.addEventListener('mouseleave', hide);
    }
            });


            window.addEventListener('scroll', () => {
    .icon-bar .skill-icon:hover::after {
                const visible = document.querySelector('.skill-tooltip[aria-hidden="false"]');
        box-shadow: inset 0 0 0 var(--icon-ring-w) #e0e0e0;
                if (!visible) return;
    }
                const target = document.querySelector('.subskills-rail .subicon:hover')
                    || document.querySelector('.subskills-rail .subicon.active')
                    || document.querySelector('.icon-bar .skill-icon:hover')
                    || document.querySelector('.icon-bar .skill-icon.active');
                measureAndPos(target);
            }, true);
            window.addEventListener('resize', () => {
                const target = document.querySelector('.subskills-rail .subicon:hover')
                    || document.querySelector('.subskills-rail .subicon.active')
                    || document.querySelector('.icon-bar .skill-icon:hover')
                    || document.querySelector('.icon-bar .skill-icon.active');
                measureAndPos(target);
            });
        })();


        // ===========================
    .icon-bar .skill-icon.active::after {
        // Tab System (com transição suave de altura)
        box-shadow: inset 0 0 0 var(--icon-ring-w) var(--icon-active);
        // ===========================
    }
        (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::before {
            let wrapper = characterBox.querySelector('.tabs-height-wrapper');
        box-shadow: 0 0 10px 2px var(--icon-active-glow), 0 0 0 4px var(--icon-active-ring);
            if (!wrapper) {
        opacity: 1;
                wrapper = document.createElement('div');
    }
                wrapper.className = 'tabs-height-wrapper';


                // Move os conteúdos das abas para dentro do wrapper
    .icon-bar .skill-icon.active img {
                contents.forEach(c => {
        transform: scale(1.10);
                    wrapper.appendChild(c);
    }
                });


                // Encontra onde inserir o wrapper (após as tabs)
    @media (prefers-reduced-motion: reduce) {
                const tabsElement = characterBox.querySelector('.character-tabs');
        .icon-bar .skill-icon {
                if (tabsElement && tabsElement.nextSibling) {
            transition: none;
                    characterBox.insertBefore(wrapper, tabsElement.nextSibling);
        }
                } else {
    }
                    characterBox.appendChild(wrapper);
                }
            }


            // Função para animar a altura suavemente (retorna Promise)
    /* ===========================SKILL DESCRIPTION & CONTENT=========================== */
            // NOVA ESTRATÉGIA: aba já está visível mas invisível (opacity:0, visibility:hidden)
    .skill-title {
            async function smoothHeightTransition(fromTab, toTab) {
        margin: 0 0 12px;
                if (!wrapper) return Promise.resolve();
        display: flex;
        justify-content: center;
        align-items: center;
    }


                // Salva o scroll atual
    .skill-title h3 {
                const scrollY = window.scrollY;
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 1.6em;
        color: #fff;
    }


                // Mede a altura ATUAL
    .desc-box {
                const currentHeight = wrapper.getBoundingClientRect().height;
        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%;
    }


                // A aba toTab JÁ está display:block mas invisível
    .desc-box h3 {
                // Aguarda ela renderizar COMPLETAMENTE na posição real
        font-size: 2.7em;
                await new Promise((resolve) => {
        margin: 0;
                    const videoContainers = toTab.querySelectorAll('.video-container');
        text-align: center;
                    const contentCard = toTab.querySelector('.content-card');
        padding-top: 0;
    }


                    if (videoContainers.length === 0) {
    .desc {
                        // Sem vídeos, aguarda 3 frames
        font-size: 17px !important;
                        requestAnimationFrame(() => {
        line-height: 1.75 !important;
                            requestAnimationFrame(() => {
        letter-spacing: .01em;
                                requestAnimationFrame(() => resolve());
        overflow-x: hidden;
                            });
        /* iOS smooth scroll */
                        });
        -webkit-overflow-scrolling: touch;
                        return;
        scrollbar-gutter: stable;
                    }
        margin-top: 5px;
        padding-right: 8px;
        color: #f5f5f5;
        /* Melhor contraste para legibilidade (WCAG AA) */
        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;
    }


                    // COM vídeos: aguarda até que TUDO esteja renderizado
    .desc b,
                    // Faz polling da altura até estabilizar
    .desc strong {
                    let lastHeight = 0;
        font-weight: 700;
                    let stableCount = 0;
        color: #fff;
                    const checksNeeded = 3; // Altura precisa ficar estável por 3 checks
    }
                    let totalChecks = 0;
                    const maxChecks = 15; // Máximo 15 checks (750ms)


                    function checkStability() {
    .desc::-webkit-scrollbar {
                        totalChecks++;
        width: 7px;
        height: 7px;
    }


                        // Mede altura atual da aba
    .desc::-webkit-scrollbar-thumb {
                        const currentTabHeight = toTab.scrollHeight;
        background: #156bc7;
        border-radius: 10px;
    }


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


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


                        // Se estável por N checks ou atingiu máximo, resolve
    .desc-box .attrs,
                        if (stableCount >= checksNeeded || totalChecks >= maxChecks) {
    .desc-box .attr-list,
                            resolve();
    .desc-box .attrs *,
                        } else {
    .desc-box .attr-list * {
                            // Continua checando a cada 50ms
        text-shadow: none;
                            setTimeout(checkStability, 50);
        font-family: 'Noto Sans', sans-serif;
                        }
    }
                    }


                    // Inicia checagem após um pequeno delay
    .attrs__row,
                    setTimeout(checkStability, 50);
    .attr-row {
                });
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 22px;
        line-height: 1.2;
    }


                // AGORA mede a altura REAL (após tudo renderizado)
    .attrs__row--empty,
                const nextHeight = toTab.getBoundingClientRect().height;
    .attr-row.is-empty {
                const finalHeight = Math.max(nextHeight, 100);
        display: none;
    }


                // Se alturas são similares (< 30px diferença), não anima
    .attrs__label,
                if (Math.abs(finalHeight - currentHeight) < 30) {
    .attr-label {
                    wrapper.style.height = '';
        font-weight: 700;
                    return Promise.resolve();
        color: #f0c87b;
                }
        font-size: .98rem;
        white-space: nowrap;
        margin: 0;
    }


                // Define altura inicial fixa
    .attrs__value,
                wrapper.style.overflow = 'hidden';
    .attr-value {
                wrapper.style.height = currentHeight + 'px';
        color: #fff;
        font-weight: 800;
        font-size: .98rem;
        letter-spacing: .01em;
        margin: 0;
    }


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


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


                // Anima para a altura FINAL (já medida corretamente)
    .video-placeholder {
                requestAnimationFrame(() => {
        position: absolute;
                    wrapper.style.height = finalHeight + 'px';
        inset: 0;
                    // Não altere a posição do scroll do usuário
        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));
    }


                // Limpa após transição
    .video-placeholder img {
                return new Promise(resolve => {
        max-width: 160px;
                    setTimeout(() => {
        width: auto;
                        wrapper.style.height = '';
        height: auto;
                        wrapper.style.transition = '';
        opacity: 0.98;
                        wrapper.style.overflow = '';
        display: block;
                        resolve();
    }
                    }, 320);
                });
            }


            tabs.forEach(btn => {
    .video-placeholder.fade-out {
                if (btn.dataset.wiredTab) return;
        opacity: 0;
                btn.dataset.wiredTab = '1';
    }
                btn.addEventListener('click', () => {
                    const target = btn.getAttribute('data-tab');
                    const currentActive = contents.find(c => c.classList.contains('active'));
                    const nextActive = contents.find(c => c.id === target);


                    if (currentActive === nextActive) return; // Já está na aba
    /* ===========================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);
    }


                    // Previne scroll durante a transição
    .top-rail .rail-title {
                    document.body.classList.add('transitioning-tabs');
        display: none;
    }


                    // Desativa a aba atual (fade out)
    .top-rail.skins .rail-title {
                    if (currentActive) {
        display: block;
                        currentActive.style.opacity = '0';
        font-weight: 800;
                        currentActive.style.transform = 'translateY(-8px)';
        font-size: clamp(20px, 2.2vw, 28px);
                    }
        color: #fff;
        margin-right: auto;
    }


                    // Delay para fade out completar
    .top-rail .icon-bar {
                    setTimeout(async () => {
        width: auto;
                        // Remove display de TODAS as abas inativas
        justify-content: center;
                        contents.forEach(c => {
        margin: 0;
                            if (c !== nextActive) {
        overflow-x: auto;
                                c.style.display = 'none';
    }
                                c.classList.remove('active');
                            }
                        });


                        // Ativa os botões
    .content-card {
                        tabs.forEach(b => b.classList.toggle('active', b === btn));
        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;
    }


                        // MOSTRA a nova aba INVISÍVEL na posição real
    .content-card.skills-grid {
                        if (nextActive) {
        display: grid;
                            nextActive.classList.add('active');
        grid-template-columns: minmax(320px, 60%) minmax(320px, 45%);
                            nextActive.style.display = 'block';
        gap: 16px;
                            nextActive.style.opacity = '0';
        align-items: start;
                            nextActive.style.visibility = 'hidden';
        grid-auto-rows: auto;
        margin: 10px auto 0;
    }


                            // Força renderização completa ANTES de medir
    /* ===========================TIER SYSTEM=========================== */
                            nextActive.offsetHeight;
    .tier-bronze .topbar-icon,
    .tier-bronze .tier {
        outline: 2px solid #7b4e2f;
    }


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


                        // AGORA anima altura (com a aba já renderizada na posição correta)
    .tier-gold .topbar-icon,
                        if (currentActive && nextActive) {
    .tier-gold .tier {
                            await smoothHeightTransition(currentActive, nextActive);
        outline: 2px solid #fcd300;
                        }
    }


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


                            // Anima entrada
    /* ===========================RESPONSIVE DESIGN & MOBILE=========================== */
                            requestAnimationFrame(() => {
    @media (max-width:1100px) {
                                nextActive.style.opacity = '1';
        .top-rail {
                                nextActive.style.transform = 'translateY(0)';
            flex-direction: column;
            align-items: stretch;
        }


                                // Limpa estilos inline e classe de transição
        .top-rail .icon-scroll-x {
                                setTimeout(() => {
            order: 2;
                                    nextActive.style.opacity = '';
            width: 100%;
                                    nextActive.style.transform = '';
        }
                                    document.body.classList.remove('transitioning-tabs');
                                    // Libera flag de autoplay suprimido (se aplicada acima)
                                    try { delete document.body.dataset.suppressSkillPlay; } catch { }
                                }, 300);
                            });
                        }
                    }, 120);


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


         // ===========================
         .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();
         })();


         // ===========================
         .video-container {
        // Utility Functions
             width: 100%;
        // ===========================
             max-width: 100%;
        function renderAttributes(str) {
             margin: 0 auto;
             const skillsRoot = document.getElementById('skills');
             display: flex;
             const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
            align-items: center;
             const langRaw = (document.documentElement.lang || skillsRoot?.dataset.i18nDefault || 'pt').toLowerCase();
             justify-content: center;
             const langKey = i18nMap[langRaw] ? langRaw : (i18nMap[langRaw.split('-')[0]] ? langRaw.split('-')[0] : 'pt');
        }
             const L = i18nMap[langKey] || i18nMap.pt || {
    }
                cooldown: 'Recarga', energy_gain: 'Ganho de energia', energy_cost: 'Custo de energia',
                power: 'Poder', power_pvp: 'Poder PvP', level: 'Nível'
            };


            const vals = (str || '').split(',').map(v => v.trim());
    @media (max-aspect-ratio: 3/4) {
            const pve = parseInt(vals[0], 10);
        .character-header .character-art {
            const pvp = parseInt(vals[1], 10);
             display: none;
             const ene = parseInt(vals[2], 10);
        }
            const cd = parseInt(vals[3], 10);


             const rows = [];
        .video-container {
             if (!isNaN(cd)) rows.push([L.cooldown, cd]);
             width: 100%;
             if (!isNaN(ene) && ene !== 0) {
             max-width: 100%;
                const label = ene > 0 ? L.energy_gain : L.energy_cost;
             margin: 2% auto 0;
                rows.push([label, Math.abs(ene)]);
            display: flex;
             }
            align-items: center;
             if (!isNaN(pve)) rows.push([L.power, pve]);
             justify-content: center;
            if (!isNaN(pvp)) rows.push([L.power_pvp, pvp]);
             border-radius: 3%;
        }
    }


            if (!rows.length) return '';
    @media (max-width:600px) {
             const html = rows.map(([label, value]) => `
        .content-card {
    <div class="attr-row">
            box-sizing: border-box;
      <span class="attr-label">${label}</span>
             max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);
      <span class="attr-value">${value}</span>
             width: 100%;
    </div>`).join('');
            margin: 10px auto;
             return `<div class="attr-list">${html}</div>`;
            padding: 12px;
            border-radius: 10px;
            overflow: hidden;
         }
         }


         function syncDescHeight() {
         .content-card.skills-grid {
             // no-op on purpose
             grid-template-columns: 1fr;
            gap: 12px;
         }
         }


         // ===========================
         .top-rail {
        // Event Listeners & Initialization
            width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
        // ===========================
            max-width: 100%;
        window.addEventListener('resize', syncDescHeight);
            margin: 0 auto 8px;
        if (videoBox) new ResizeObserver(syncDescHeight).observe(videoBox);
            padding: 6px 8px;
            border-radius: 0;
            box-sizing: border-box;
            overflow: hidden;
        }


         iconItems.forEach(el => {
         .top-rail.skills {
             const wired = !!el.dataset._sync_wired;
             overflow: visible !important;
            if (wired) return;
         }
            el.dataset._sync_wired = '1';
            el.addEventListener('click', () => {
                Promise.resolve().then(syncDescHeight);
            });
         });


         if (iconsBar) addOnce(iconsBar, 'wheel', (e) => {
         .top-rail .icon-scroll-x {
             if (e.deltaY) {
             width: 100%;
                e.preventDefault();
            padding-top: 10px;
                iconsBar.scrollLeft += e.deltaY;
            padding-bottom: 10px;
             }
            margin-top: -10px;
         });
            margin-bottom: -10px;
            overflow-x: auto;
             /* iOS smooth scroll */
            -webkit-overflow-scrolling: touch;
         }


         // Initialize first skill
         .top-rail .icon-bar {
        if (iconItems.length) {
             width: 100%;
             const first = iconItems[0];
            padding: 0 6px;
             if (first) {
            gap: 12px;
                if (!first.classList.contains('active')) first.classList.add('active');
             justify-content: flex-start;
                setTimeout(() => first.click(), 0);
            overflow: visible !important;
             }
            /* iOS smooth scroll */
             -webkit-overflow-scrolling: touch;
         }
         }


         // ===========================
        :root {
         // Weapon Tab Setup (if exists)
            --icon-size: 92px;
         // ===========================
        }
         (function initWeaponTab() {
 
            const weaponTab = document.getElementById('weapon');
        .icon-bar .skill-icon {
            if (!weaponTab) return;
            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 {
            width: 100%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        .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: #d0d0d0;
        /* Melhor contraste */
        --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);
        padding: 0 !important;
        margin: 0 !important;
    }
 
    /* Garantir que weapon toggle tenha exatamente as mesmas dimensões */
    .icon-bar .skill-icon.weapon-bar-toggle {
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
 
    .icon-bar .skill-icon img {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        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);
        object-fit: cover;
    }
 
    .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.10) translateZ(0) !important;
        z-index: 5;
    }


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


            if (!weaponIconBar || !weaponIconItems.length) return;
    .icon-bar .skill-icon.active::before {
        opacity: 1 !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;
    }


            const weaponVideosCache = new Map();
    /* OVERRIDE: Skills com weapon têm prioridade sobre estilos base */
            let weaponTotalVideos = 0, weaponLoadedVideos = 0, weaponAutoplay = false;
    .character-box .top-rail.skills .icon-bar .skill-icon.has-weapon-available.active::after,
    .character-box .top-rail.skills .icon-bar .skill-icon.has-weapon-available.active::before {
        /* Estilos de weapon sobrescrevem estilos base */
    }


            // Load weapon videos
    .icon-bar .skill-icon.active img {
            weaponIconItems.forEach(el => {
        transform: none !important;
                const src = (el.dataset.video || '').trim();
    }
                const idx = el.dataset.index || '';
                if (!src || weaponVideosCache.has(idx)) return;


                weaponTotalVideos++;
    .icon-bar .skill-icon:hover:not(.active)::after {
                const v = document.createElement('video');
        box-shadow: inset 0 0 0 var(--icon-ring-w) #e6e6e6 !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', () => {
    /* Permitir glow completo para ícones com weapon */
                    weaponLoadedVideos++;
    .top-rail.skills .icon-bar .skill-icon.has-weapon-available:not(.weapon-bar-toggle) {
                    if (weaponLoadedVideos === weaponTotalVideos) weaponAutoplay = true;
        overflow: visible !important;
                });
        contain: none !important;
    }


                v.addEventListener('error', () => {
    /* Garantir que transform funcione mesmo quando subskills estão visíveis */
                    weaponLoadedVideos++;
    .top-rail.skills .icon-bar .skill-icon.active {
                    if (weaponLoadedVideos === weaponTotalVideos) weaponAutoplay = true;
        transform: scale(1.10) translateZ(0) !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
    /* ===========================TOOLTIP SYSTEM=========================== */
            weaponIconItems.forEach(el => {
    .skill-tooltip {
                if (el.dataset.wired) return;
        position: fixed;
                el.dataset.wired = '1';
        z-index: 9999;
                const label = el.dataset.nome || el.dataset.name || '';
        pointer-events: none;
                el.setAttribute('aria-label', label);
        padding: 6px 8px;
                if (el.hasAttribute('title')) el.removeAttribute('title');
        border-radius: 6px;
                const img = el.querySelector('img');
        background: rgba(17, 17, 17, .9);
                if (img) {
        color: #fff;
                    img.setAttribute('alt', '');
        font-size: 14px;
                    if (img.hasAttribute('title')) img.removeAttribute('title');
        box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
                }
        opacity: 0;
        transition: opacity .12s ease, transform .08s ease;
        white-space: nowrap;
    }


                el.addEventListener('click', () => {
    /* ===========================BACKGROUND SYSTEM=========================== */
                    const skillsRoot = document.getElementById('skills');
    .mw-body-content .character-box {
                    const i18nMap = skillsRoot ? JSON.parse(skillsRoot.dataset.i18nAttrs || '{}') : {};
        background-position: center top;
                    const lang = getLangKey();
        background-repeat: no-repeat;
                    const L = i18nMap[lang] || i18nMap.pt || {
        background-size: cover;
                        cooldown: 'Recarga',
        background-attachment: fixed;
                        energy_gain: 'Ganho de energia',
        position: relative;
                        energy_cost: 'Custo de energia',
        z-index: 1;
                        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 = {
    .mw-body-content .character-box::before {
                        pt: el.dataset.descPt || '',
        content: "";
                        en: el.dataset.descEn || '',
        position: absolute;
                        es: el.dataset.descEs || '',
        inset: 0;
                        pl: el.dataset.descPl || ''
        pointer-events: none;
                    };
        background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, .60));
                    const chosenDesc = descPack[lang] || descPack.pt || descPack.en || descPack.es || descPack.pl || el.dataset.desc || '';
        z-index: 0;
                    const descHtml = chosenDesc.replace(/'''(.*?)'''/g, '<b>$1</b>');
    }


                    const attrsHTML = el.dataset.atr ? renderAttributes(el.dataset.atr) : '';
    /* ===========================FINAL ICON OVERRIDES & FIXES=========================== */
                    if (weaponDescBox) {
    /* Consolidado com seção anterior - removidas duplicações */
                        weaponDescBox.innerHTML = `
        <div class="skill-title"><h3>${name}</h3></div>
        ${level ? `<div class="skill-level-line"><span class="attr-label">${L.level} ${level}</span></div>` : ''}
        ${attrsHTML}
        <div class="desc">${descHtml}</div>`;
                    }


                    weaponIconItems.forEach(i => i.classList.remove('active'));
    /* ===========================FINAL TOOLTIP STYLES=========================== */
                    el.classList.add('active');
    .skill-tooltip {
                    if (!weaponAutoplay && weaponLoadedVideos > 0) weaponAutoplay = true;
        position: fixed;
                    window.__lastActiveSkillIcon = el;
        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;
    }


                    // Show video
    /* ===========================SKILL LEVEL STYLING=========================== */
                    if (weaponVideoBox) {
    #skills .desc-box .skill-title {
                        Array.from(weaponVideoBox.querySelectorAll('video.skill-video')).forEach(v => {
        margin: 0 0 4px;
                            try { v.pause(); } catch (e) { }
    }
                            v.style.display = 'none';
                        });
                    }


                    const hasIdx = !!el.dataset.index;
    #skills .desc-box .skill-level-line {
                    const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');
        margin: 0 0 10px;
                    if (!weaponVideoBox || !hasVideo) {
        text-align: center;
                        if (weaponVideoBox) weaponVideoBox.style.display = 'none';
        line-height: 1.15;
                        return;
    }
                    }


                    if (hasIdx && weaponVideosCache.has(el.dataset.index)) {
    #skills .desc-box .skill-level-line .attr-label {
                        const v = weaponVideosCache.get(el.dataset.index);
        color: #f0c87b;
                        weaponVideoBox.style.display = 'block';
        font-weight: 800;
                        v.style.display = 'block';
        letter-spacing: .2px;
                        try { v.currentTime = 0; } catch (e) { }
        font-size: .98rem;
                        const suppress = document.body.dataset.suppressSkillPlay === '1';
    }
                        if (!suppress && weaponAutoplay) v.play().catch(() => { });
                    }
                });
            });


            // Wire tooltips for weapon icons
    /* ===========================SKILL FLAGS (CARACTERÍSTICAS)=========================== */
            const tip = document.querySelector('.skill-tooltip');
    .video-container {
            if (tip) {
        position: relative;
                weaponIconItems.forEach(icon => {
    }
                    if (icon.dataset.tipwired) return;
                    icon.dataset.tipwired = '1';
                    const label = icon.dataset.nome || icon.dataset.name || icon.title || '';
                    if (label && !icon.hasAttribute('aria-label')) icon.setAttribute('aria-label', label);
                    if (icon.hasAttribute('title')) icon.removeAttribute('title');


                    const measureAndPos = (el) => {
    .skill-flags {
                        if (!el || tip.getAttribute('aria-hidden') === 'true') return;
        position: absolute;
                        tip.style.left = '0px';
        top: 8px;
                        tip.style.top = '0px';
        left: 8px;
                        const rect = el.getBoundingClientRect();
        display: flex;
                        const tr = tip.getBoundingClientRect();
        flex-direction: row;
                        let left = Math.round(rect.left + (rect.width - tr.width) / 2);
        gap: 6px;
                        left = Math.max(8, Math.min(left, window.innerWidth - tr.width - 8));
        z-index: 10;
                        const coarse = (window.matchMedia && matchMedia('(pointer: coarse)').matches) || (window.innerWidth <= 600);
        pointer-events: auto;
                        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
    .skill-flag {
         })();
        display: inline-block;
        pointer-events: all;
         cursor: pointer;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        width: 32px;
        height: 32px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }


        // Debug logging
    /* Tooltip específico para flags (cor cinza para contraste) */
        setTimeout(() => {
    .skill-tooltip.flag-tooltip {
            Array.from(document.querySelectorAll('.skill-icon')).forEach(el => {
        background: rgba(80, 80, 85, .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, 255, 255, .12) !important;
            });
     }
            videosCache.forEach((v, idx) => {
</style>
                const src = v.querySelector('source') ? v.querySelector('source').src : v.src;
                console.log('video element', idx, 'src=', src, 'readyState=', v.readyState);
                v.addEventListener('error', (ev) => {
                    console.error('VIDEO ERROR idx=', idx, 'src=', src, 'error=', v.error);
                });
                v.addEventListener('loadedmetadata', () => {
                    console.log('loadedmetadata idx=', idx, 'dimensions=', v.videoWidth, 'x', v.videoHeight);
                });
            });
        }, 600);
     })();
</script>

Edição atual tal como às 16h58min de 28 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;
       aspect-ratio: 1 / 1;
   }

   .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: #e0e0e0;
       /* Melhor contraste: #bbb -> #e0e0e0 (WCAG AA) */
   }

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

   .tab-btn {
       padding: 6px 20px;
       min-width: 44px;
       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;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }

   .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: visible;
       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;
   }

   body.transitioning-tabs .tabs-height-wrapper {
       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=========================== */
   /* Wrapper de scroll para permitir glow sem clipping */
   .icon-scroll-x {
       display: block;
       overflow-x: auto;
       overflow-y: hidden;
       padding-top: 10px;
       padding-bottom: 10px;
       margin-top: -10px;
       margin-bottom: -10px;
       scroll-behavior: smooth;
       /* Firefox */
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
       position: relative;
       z-index: 4;
   }

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

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

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

   .icon-bar {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
       width: 100%;
       overflow-x: auto;
       overflow-y: visible;
       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;
   }

   /* Quando dentro de .top-rail.skills, a .icon-bar não é mais scroll container */
   .top-rail.skills .icon-bar {
       overflow: visible !important;
       width: max-content;
       max-width: none;
       margin: 0;
       padding: 6px 6px;
   }

   /* 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: hidden !important;
       transform: none !important;
       box-shadow: none !important;
       padding: 0 !important;
       margin: 0 !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 .weapon-toggle-icon {
       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;
       pointer-events: none;
       object-fit: cover;
   }

   .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 - Consolidado na seção ICON ENHANCEMENTS */

   .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%;
       aspect-ratio: 1 / 1;
       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;
       object-fit: cover;
   }

   /* 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: #f5f5f5;
       /* Melhor contraste para legibilidade (WCAG AA) */
       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-scroll-x {
           order: 2;
           width: 100%;
       }

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

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

       .video-container {
           width: 100%;
           max-width: 100%;
           margin: 0 auto;
           display: flex;
           align-items: center;
           justify-content: center;
       }
   }

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

       .video-container {
           width: 100%;
           max-width: 100%;
           margin: 2% auto 0;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 3%;
       }
   }

   @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.skills {
           overflow: visible !important;
       }

       .top-rail .icon-scroll-x {
           width: 100%;
           padding-top: 10px;
           padding-bottom: 10px;
           margin-top: -10px;
           margin-bottom: -10px;
           overflow-x: auto;
           /* iOS smooth scroll */
           -webkit-overflow-scrolling: touch;
       }

       .top-rail .icon-bar {
           width: 100%;
           padding: 0 6px;
           gap: 12px;
           justify-content: flex-start;
           overflow: visible !important;
           /* 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 {
           width: 100%;
           margin: 0 auto;
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .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: #d0d0d0;
       /* Melhor contraste */
       --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);
       padding: 0 !important;
       margin: 0 !important;
   }

   /* Garantir que weapon toggle tenha exatamente as mesmas dimensões */
   .icon-bar .skill-icon.weapon-bar-toggle {
       width: var(--icon-size) !important;
       height: var(--icon-size) !important;
       padding: 0 !important;
       margin: 0 !important;
       box-sizing: border-box !important;
   }

   .icon-bar .skill-icon img {
       display: block;
       width: 100%;
       height: 100%;
       aspect-ratio: 1 / 1;
       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);
       object-fit: cover;
   }

   .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.10) translateZ(0) !important;
       z-index: 5;
   }

   .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 !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;
   }

   /* OVERRIDE: Skills com weapon têm prioridade sobre estilos base */
   .character-box .top-rail.skills .icon-bar .skill-icon.has-weapon-available.active::after,
   .character-box .top-rail.skills .icon-bar .skill-icon.has-weapon-available.active::before {
       /* Estilos de weapon sobrescrevem estilos base */
   }

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

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

   /* Permitir glow completo para ícones com weapon */
   .top-rail.skills .icon-bar .skill-icon.has-weapon-available:not(.weapon-bar-toggle) {
       overflow: visible !important;
       contain: none !important;
   }

   /* Garantir que transform funcione mesmo quando subskills estão visíveis */
   .top-rail.skills .icon-bar .skill-icon.active {
       transform: scale(1.10) translateZ(0) !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);
   }

   /* ===========================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=========================== */
   /* Consolidado com seção anterior - removidas duplicações */

   /* ===========================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));
       width: 32px;
       height: 32px;
       aspect-ratio: 1 / 1;
       object-fit: contain;
   }

   /* 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;
   }

</style>

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