Mudanças entre as edições de "Widget:Droflax"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="carousel-container">
<div class="personaje-box">
     <div class="carousel-track">
     <div class="personaje-header">
         <div class="carousel-slide global-event-widget">
         <div class="personaje-info">
             <img class="global-event-image" src="/images/0/0a/Anyevent.png" alt="Global Event">
             <div class="nome"></div>
             <div id="global-event-timer"></div>
            <div class="tier"></div>
             <div class="classe"></div>
         </div>
         </div>
         <div class="carousel-slide worldboss-widget">
        <img class="art-personaje" alt="Arte del personaje" />
             <img class="worldboss-imagen" src="/images/9/93/Anywb_event.png">
         <div class="personaje-tabs">
             <div id="worldboss-timer"></div>
             <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
             <button class="tab-btn" data-tab="skins">Skins</button>
         </div>
         </div>
         <div class="carousel-slide rankedd-widget">
    </div>
             <img class="rankedd-image" src="/images/b/b0/Ranked_semranked_event.png" alt="Ranked Event">
 
             <div id="rankedd-timer"></div>
    <div class="tab-content active" id="habilidades">
         <div class="cuadros-container"></div>
        <div class="habilidades-container">
             <div class="habilidades-details">
                <div class="descripcion-container"></div>
                <div class="atributos-container"></div>
            </div>
             <div class="video-container"></div>
         </div>
         </div>
     </div>
     </div>
</div>
 
<div class="carousel-controls-images">
    <div class="tab-content" id="skins"></div>
    <i class="fa-solid fa-star carousel-thumb active" data-index="0" title="Evento Global"></i>
    <i class="fa-solid fa-skull carousel-thumb" data-index="1" title="World Boss"></i>
    <i class="fa-solid fa-shield-halved carousel-thumb" data-index="2" title="Ranked"></i>
</div>
</div>


 
<script type="text/javascript">
<script>
     (function () {
     (function loadFontAwesome() {
         const dataEl = document.getElementById('persona-data');
         if (!document.querySelector('link[href*="font-awesome"]')) {
        if (!dataEl) {
             const faLink = document.createElement('link');
             console.error('Persona widget: no se encontró #persona-data');
            faLink.rel = 'stylesheet';
             return;
            faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
             document.head.appendChild(faLink);
         }
         }
    })();


    const track = document.querySelector('.carousel-track');
        // Extração de dados
    const thumbs = document.querySelectorAll('.carousel-thumb');
        const nome = dataEl.dataset.nome || '';
        const tier = dataEl.dataset.tier || '';
        const classe = dataEl.dataset.classe || '';
        const image = dataEl.dataset.image || '';
        let habilidades = [];
        let skins = [];


    let currentSlide = 0;
        const tempRawHabs = (dataEl.dataset.habilidadesRaw || '').trim();
    let totalSlides = thumbs.length - 1;
        let tempRawSkins = (dataEl.dataset.skinsRaw || '').trim();
    let intervalId;
        rawSkins = tempRawSkins.replace(/<!--[\s\S]*?-->/g, '').trim();
            rawHabs = tempRawHabs.replace(/<!--[\s\S]*?-->/g, '').trim();
        rawHabs.split('||').forEach(line => {
            if (!line.trim()) return;


    function goToSlide(index) {
            const parts = line.split('|').map(x => x.trim()).filter(Boolean);
        currentSlide = (index + totalSlides + 1) % (totalSlides + 1);
            const habData = {};
        track.style.transform = `translateX(-${currentSlide * 100}%)`;
            parts.forEach(part => {
        thumbs.forEach(thumb => thumb.classList.remove('active'));
                const [key, ...valParts] = part.split('=');
        thumbs[currentSlide].classList.add('active');
                if (!key || valParts.length === 0) return;
    }
                habData[key.trim()] = valParts.join('=').trim(); // por si hay "=" en el valor
            });


    function resetInterval() {
            const { nome, icon, level, desc = '', atr, video = '' } = habData;
        clearInterval(intervalId);
        intervalId = setInterval(() => goToSlide(currentSlide + 1), 12000);
    }


    thumbs.forEach(thumb => {
            if (nome && icon && level && atr) {
        thumb.addEventListener('click', () => {
                habilidades.push({
            const idx = parseInt(thumb.getAttribute('data-index'));
                    nome,
             goToSlide(idx);
                    icon,
             resetInterval();
                    level: parseInt(level),
                    descripcion: desc, // estará vacío si no fue definido
                    atributos: atr,
                    video
                });
             } else {
                console.warn("Habilidad omitida por falta de campos obligatorios:", line);
             }
         });
         });
    });


    resetInterval();
        rawSkins.split('||').forEach(line => {
    (function () {
            if (!line.trim()) return;
        let globalEventsTimer, globalEventsImage, worldBossTimer, worldBossImage, rankedTimer, rankedImage;
        let globalEventsInterval, worldBossInterval, rankedInterval, globalEventsInfo = {};


        // Função para cargar os eventos a partir do JSON
            // Extraer pares clave=valor (por ejemplo: image=..., tooltip=...)
        async function cargarEventos() {
            const obj = {};
             try {
             line.split('|').forEach(part => {
                 const response = await fetch('https://wiki.gla.com.br/index.php?title=Globalevents.json&action=raw');
                 const [key, ...rest] = part.split('=');
                 const data = await response.json();
                 if (key && rest.length) {
                 globalEventsInfo = data;
                    obj[key.trim()] = rest.join('=').trim();
                setGlobalEvent();
                 }
            });


             } catch (error) {
             if (obj.image && obj.tooltip) {
                 console.error('Error al cargar los eventos:', error);
                 skins.push({ image: obj.image, tooltip: obj.tooltip });
                 alert('No se pudieron cargar los eventos. Por favor, inténtalo más tarde.');
            } else {
                 console.error("Error en la skin (falta image o tooltip):", line);
             }
             }
         }
         });


         const rankedEvents = {
         const tierLower = tier.toLowerCase();
            0: [ // domingo
         let tierClass = '';
                { hour: 15, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
                { hour: 16, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
                { hour: 17, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
            ],
            2: [ // terça
                { hour: 20, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
                { hour: 21, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
                { hour: 22, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
            ],
            4: [ // quinta
                { hour: 20, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
                { hour: 21, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
                { hour: 22, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
            ],
            6: [ // sabado
                { hour: 15, image: "/images/7/7e/Ranked_duo_2v2_event.png", label: "Ranked Duo 2v2" },
                { hour: 16, image: "/images/b/b1/Ranked_solo_2v2_event.png", label: "Ranked Solo 2v2" },
                { hour: 17, image: "/images/e/ed/Ranked_1v1_event.png", label: "Ranked 1v1" },
            ]
         };


        document.querySelector('.personaje-info .nome').textContent = nome;
        document.querySelector('.personaje-info .tier').textContent = 'Tier: ' + tier;
        document.querySelector('.personaje-info .classe').textContent = 'Classe: ' + classe;
        document.querySelector('img.art-personaje').src = image;


         const alternatedEvents = [
         const buttons = document.querySelectorAll('.tab-btn');
             {
        const contents = document.querySelectorAll('.tab-content');
                 name: 'Marineford',
        buttons.forEach(btn => {
                 image: '/images/e/e6/Marineford_event.png'
             btn.addEventListener('click', () => {
            },
                 buttons.forEach(b => b.classList.remove('active'));
            {
                 contents.forEach(c => c.classList.remove('active'));
                 name: 'World Boss',
                 btn.classList.add('active');
                 image: '/images/9/93/Anywb_event.png'
                 document.getElementById(btn.dataset.tab).classList.add('active');
             }
             });
        });


         ];
         switch (tierLower) {
            case 'bronze':
            case 'bronce':
                tierClass = 'tier-bronze';
                break;
            case 'silver':
            case 'prata':
                tierClass = 'tier-silver';
                break;
            case 'gold':
            case 'ouro':
                tierClass = 'tier-gold';
                break;
            case 'diamond':
            case 'diamante':
                tierClass = 'tier-diamond';
                break;
        }


         function getWeekNumber(date) {
         if (tierClass) {
             const start = new Date(date.getFullYear(), 0, 1);
             document.querySelector('.personaje-box').classList.add(tierClass);
            const diff = (date - start + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60000));
            const oneWeek = 604800000; // ms week
            return Math.floor(diff / oneWeek);
         }
         }


         async function obtenerImagenWorldBoss(modo = 'actual') {
         // Render skins
            try {
        document.getElementById('skins').innerHTML = generarHTMLSkins(skins);
                const response = await fetch('https://wiki.gla.com.br/index.php?title=Wbevents.json&action=raw');
                const data = await response.json();
                const events = data.world_boss_events;


                const now = getBrazilTime();
        // Render habilidades
                const currentTime = now.getTime();
        const cuadrosContainer = document.querySelector('.cuadros-container');
        const descripcionContainer = document.querySelector('.descripcion-container');
        const atributosContainer = document.querySelector('.atributos-container');
        const videoContainer = document.querySelector('.video-container');
        const cuadros = [];


                const sortedDates = Object.keys(events).sort(); // Asegura orden
        habilidades.forEach(hab => {
            const div = document.createElement('div');
            div.className = 'cuadro';
            div.innerHTML = `<img src="${hab.icon}" alt="${hab.nome}" style="width:100%;height:100%;object-fit:cover">`;
            div.title = hab.nome;
            div.addEventListener('click', () => {
                descripcionContainer.innerHTML = `
          <h3 style="margin-bottom:4px;color:white">${hab.nome}</h3>
          <p class="descLevel">Level: ${hab.level}</p>
          <div class="desc">${hab.descripcion}</div>`;
                atributosContainer.innerHTML = generarHTMLAtributos(hab.atributos);


                 for (const fechaStr of sortedDates) {
                 if (hab.video && hab.video !== '') {
                    const [year, month, day] = fechaStr.split('-').map(Number);
                     videoContainer.innerHTML = `
                     const inicio = new Date(Date.UTC(year, month - 1, day, 14, 0)); // Viernes 11:00 BR
          <video width="100%" controls playsinline>
                    const fin = new Date(Date.UTC(year, month - 1, day + 1, 12, 0)); // Sábado 09:00 BR
            <source src="${hab.video}" type="video/webm">
 
          </video>`;
                    if (modo === 'actual' && currentTime >= inicio.getTime() && currentTime < fin.getTime()) {
                } else {
                        return events[fechaStr];
                     videoContainer.innerHTML = '';
                    }
 
                     if (modo === 'proximo' && currentTime < inicio.getTime()) {
                        return events[fechaStr];
                    }
                 }
                 }


                 return null;
                 cuadros.forEach(c => c.classList.remove('activo'));
            } catch (error) {
                 div.classList.add('activo');
                console.error('Error al obtener imagen del World Boss:', error);
                 return null;
            }
        }
 
        function pad(value) {
            return value < 10 ? '0' + value : value;
        }
 
        function getBrazilTime() {
            const formatter = new Intl.DateTimeFormat('en-US', {
                timeZone: 'America/Sao_Paulo',
                hour12: false,
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
             });
             });
            cuadros.push(div);
            cuadrosContainer.appendChild(div);
        });


            const parts = formatter.formatToParts(new Date());
        if (cuadros.length) cuadros[0].click();
            const values = Object.fromEntries(parts.map(({ type, value }) => [type, value]));


             return new Date(
        function generarHTMLAtributos(str) {
                parseInt(values.year),
             const vals = str.split(',').map(v => v.trim());
                 parseInt(values.month) - 1,
            const labels = ['Recarga', 'Energía', 'Poder PVE', 'Poder PVP'];
                 parseInt(values.day),
            const icons = [
                 parseInt(values.hour),
                 '/images/b/b1/Icon-cooldown.png',
                 parseInt(values.minute),
                '/images/3/38/Icon-energy.png',
                 parseInt(values.second)
                 '/images/7/7a/Icon-pve.png',
             );
                 '/images/5/5f/Icon-pvp.png'
            ];
            return `
        <h4 class="attribute-title">Atributos</h4>
        <div class="attribute--cardsContainer">
          ${vals.map((v, i) => {
                 let f = v === '-' ? '-' : parseInt(v);
                 if (i === 1 && !isNaN(f)) f = (f > 0 ? '+' : '') + f;
                return `
              <span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="<p><b>${labels[i]}</b></p>">
                <div class="cardAttribute">
                  <img src="${icons[i]}" class="cardAttribute--icon">
                  <h2 class="cardAttribute--value">${f}${i === 0 && f !== '-' ? ' seg' : ''}</h2>
                </div>
              </span>`;
             }).join('')}
        </div>`;
         }
         }


         function createBrazilDate(hour, minute, second = 0) {
         function generarHTMLSkins(lista) {
             const today = getBrazilTime();
             return `
             return new Date(
        <div class="card-skins">
                 today.getFullYear(), today.getMonth(),
          <span class="card-skins-title">Skins</span>
                today.getDate(), hour,
          <div class="skins--container">
                minute, second
             ${lista.map(skin => `
            );
              <span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="<center><b>${skin.tooltip}</b></center>">
                 <img class="skins--imageSkin" src="${skin.image}" alt="">
              </span>`).join('')}
          </div>
        </div>`;
         }
         }


         function ajustarHoraBrasilALocal(dateBrasil) {
         cuadrosContainer.addEventListener('wheel', (e) => {
             const offsetUsuarioMin = dateBrasil.getTimezoneOffset();
             if (e.deltaY !== 0) {
             const offsetBrasilMin = 180;
                e.preventDefault();
                cuadrosContainer.scrollLeft += e.deltaY;
             }
        });
        dataEl.remove();


            const diferenciaMin = offsetUsuarioMin - offsetBrasilMin;
    })();
</script>
<style>
    img {
        pointer-events: none;
        user-select: none;
    }


            return new Date(dateBrasil.getTime() - diferenciaMin * 60 * 1000);
    .personaje-box {
         }
        background: #1e1e1e;
         border-radius: 12px;
        padding: 16px;
        color: #fff;
        font-family: 'Segoe UI', sans-serif;
        width: 90%;
        margin: auto;
        border: 2px solid #444;
    }


         function startGlobalEventCountdown(eventStartTime, eventEndTime) {
    .personaje-header {
            if (globalEventsInterval) clearInterval(globalEventsInterval);
        display: flex;
        gap: 20px;
         border-bottom: 2px solid #555;
        padding-bottom: 10px;
        flex-direction: column;
    }


            globalEventsInterval = setInterval(() => {
    .personaje-header img {
                const now = getBrazilTime().getTime();
        width: 230px;
        position: absolute;
        right: 5%;
    }


                if (now < eventStartTime) {
    .personaje-info {
                    // Ainda não começou, mostrar contagem regressiva
        user-select: none;
                    const timeToStart = Math.floor((eventStartTime - now) / 1000);
    }
                    const minutes = Math.floor(timeToStart / 60);
                    const seconds = timeToStart % 60;
                    globalEventsTimer.innerHTML = pad(minutes) + ":" + pad(seconds);
                } else if (now >= eventStartTime && now < eventEndTime) {
                    // Já começou, mostrar "Iniciando: mm:ss"
                    const timeRemaining = Math.ceil((eventEndTime - now) / 1000);
                    const minutes = Math.floor(timeRemaining / 60);
                    const seconds = timeRemaining % 60;
                    globalEventsTimer.innerHTML = 'Iniciando: ' + pad(minutes) + ":" + pad(seconds);
                } else {
                    // Terminou
                    clearInterval(globalEventsInterval);
                    setGlobalEvent();
                }
            }, 1000);
        }


         function rankedCountdown(eventStart, eventEnd) {
    .personaje-info .nome {
            if (rankedInterval) clearInterval(rankedInterval);
         font-size: 35px;
        font-weight: bold;
    }


            rankedInterval = setInterval(() => {
    .personaje-info .tier,
                const now = getBrazilTime().getTime();
    .personaje-info .classe {
        font-size: 18px;
        color: #bbb;
    }


                if (now < eventStart) {
    .personaje-tabs {
                    const timeLeft = Math.floor((eventStart - now) / 1000);
        margin-block: 4px;
                    const min = Math.floor(timeLeft / 60);
        display: flex;
                    const sec = timeLeft % 60;
        gap: 12px;
                    rankedTimer.innerHTML = 'Começa em: ' + pad(min) + ':' + pad(sec);
        justify-content: flex-start;
                } else if (now >= eventStart && now < eventEnd) {
    }
                    const timeLeft = Math.floor((eventEnd - now) / 1000);
                    const min = Math.floor(timeLeft / 60);
                    const sec = timeLeft % 60;
                    rankedTimer.innerHTML = 'Em andamento: ' + pad(min) + ':' + pad(sec);
                } else {
                    clearInterval(rankedInterval);
                    rankedTimer.innerHTML = 'Evento finalizado';
                }
            }, 1000);
        }


         function worldBossCountdown(eventStartTime, eventEndTime) {
    .tab-btn {
            if (worldBossInterval) clearInterval(worldBossInterval);
        padding: 8px 20px;
         background: #333;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 20px;
        cursor: pointer;
    }


            worldBossInterval = setInterval(() => {
    .tab-btn.active {
                const now = getBrazilTime().getTime();
        background: #156bc7;
        font-weight: bold;
    }


                if (now < eventStartTime) {
    .tab-content {
                    const diff = eventStartTime - now;
        display: none;
                    const totalSeconds = Math.floor(diff / 1000);
        margin-top: 20px;
                    const hours = Math.floor(totalSeconds / 3600);
        animation: fadeIn 0.4s ease;
                    const minutes = Math.floor((totalSeconds % 3600) / 60);
    }
                    const seconds = totalSeconds % 60;


                    worldBossTimer.innerHTML =
    .tab-content.active {
                        'Começa em: ' +
        display: block;
                        pad(hours) + ':' +
    }
                        pad(minutes) + ':' +
                        pad(seconds);
                } else if (now >= eventStartTime && now < eventEndTime) {
                    const diff = eventEndTime - now;
                    const totalSeconds = Math.floor(diff / 1000);
                    const hours = Math.floor(totalSeconds / 3600);
                    const minutes = Math.floor((totalSeconds % 3600) / 60);
                    const seconds = totalSeconds % 60;


                    worldBossTimer.innerHTML =
    .habilidades-container {
                        'Em andamento: ' +
        display: flex;
                        pad(hours) + ':' +
        gap: 20px;
                        pad(minutes) + ':' +
    }
                        pad(seconds);
                } else {
                    clearInterval(worldBossInterval);
                    worldBossTimer.innerHTML = 'Evento finalizado';
                }
            }, 1000);
        }


         function setGlobalEvent() {
    .habilidades-details {
            const userNow = new Date();
        flex: 1;
            const now = getBrazilTime();
        display: flex;
            const dayEvents = globalEventsInfo[now.getDay()] || [];
         flex-direction: column;
        gap: 10px;
        width: 50%;
        justify-content: center;
    }


            if (dayEvents.length === 0 && userNow.getDate() == now.getDate()) {
    .cuadros-container {
                globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
        display: flex;
                globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
        flex-wrap: nowrap;
                return;
        gap: 10px;
            }
        width: 95%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: #555 transparent;
        margin-bottom: 1%;
        justify-content: space-between;
        justify-self: center;
    }


            for (let event of dayEvents) {
    .cuadros-container::-webkit-scrollbar {
                const [h, m, s] = event.time.split(':').map(Number);
        height: 6px;
                const eventStartTime = createBrazilDate(h, m, s);
    }
                const eventEndTime = new Date(eventStartTime.getTime() + 5 * 60 * 1000);
                const eventStartMs = eventStartTime.getTime();
                const eventEndMs = eventEndTime.getTime();
                const nowMs = now.getTime();


                const horaLocal = ajustarHoraBrasilALocal(eventStartTime);
    .cuadros-container::-webkit-scrollbar-track {
        background: transparent;
    }


                const localTime = horaLocal.toLocaleTimeString(undefined, {
    .cuadros-container::-webkit-scrollbar-thumb {
                    hour: '2-digit',
        background-color: #555;
                    minute: '2-digit',
        border-radius: 3px;
                    hour12: false
    }
                });
                //Converte a hora dependendo do fuso horário do usuário


    .cuadros-container .cuadro {
        flex: 0 0 auto;
        width: 60px;
        height: 60px;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }


    .cuadros-container .cuadro.activo {
        box-shadow: 0 0 10px 3px rgba(255, 255, 0, 0.5);
        border: 1px solid #FFD700;
        animation: glow 2s ease-in-out infinite;
    }


                if (nowMs >= eventStartMs && nowMs < eventEndMs) {
    .descripcion-container h3,
                    // Evento em andamento
    .atributos-container h4 {
                    globalEventsImage.setAttribute('src', event.src);
        font-size: 1.7em;
                    startGlobalEventCountdown(eventStartMs, eventEndMs);
        margin-top: unset;
                    return;
        padding-top: unset
                }
    }


                if (nowMs < eventStartMs) {
    .descripcion-container p {
                    // Evento ainda não começou
        font-size: 1.2em;
                    globalEventsImage.setAttribute('src', event.src);
        margin-bottom: unset;
    }


                    if (eventStartMs - nowMs <= 60 * 60 * 1000) {
    .descripcion-container {
                        // Falta menos de 1 hora => mostrar contador
        min-height: 13rem;
                        startGlobalEventCountdown(eventStartMs, eventEndMs);
        max-height: 50%;
                    } else {
        padding: 4px 16px !important;
                        // Falta mais de 1 hora => apenas mostrar o horário
    }
                        globalEventsTimer.innerHTML = localTime;
                    }


                    return;
    .descripcion-container .desc {
                }
        overflow-y: auto !important;
            }
        max-height: inherit;
        margin-bottom: unset;
        font-size: 1.2em;
        margin-bottom: unset;
    }


            globalEventsImage.setAttribute('src', '/images/0/0a/Anyevent.png');
    .desc *, .desc b, .desc strong, .desc i, .desc em {
            globalEventsTimer.innerHTML = 'Acabaram os eventos por hoje';
  font-size: inherit !important;
        }
  font-style: inherit;
  font-weight: inherit;
}




        function setWorldBossEvent() {
    .descripcion-container .descLevel {
            const now = getBrazilTime();
        margin-top: 5px;
            const [h, m, s] = [11, 00, 0];
        font-weight: bold;
    }


            const currentWeekday = now.getDay();
    .descripcion-container .desc::-webkit-scrollbar,
    .tabSkill--container::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }


            const lastFriday = new Date(createBrazilDate(h, m, s));
    .descripcion-container .desc::-webkit-scrollbar-thumb,
            const daysSinceFriday = (currentWeekday >= 5) ? currentWeekday - 5 : currentWeekday + 2;
    .tabSkill--container::-webkit-scrollbar-thumb {
            lastFriday.setDate(now.getDate() - daysSinceFriday);
        background-color: rgb(71 153 255);
            lastFriday.setHours(h, m, s, 0);
        border-radius: 10px;
    }


            const eventStartTime = lastFriday.getTime();
    .descripcion-container .desc::-webkit-scrollbar-track,
            const eventEndTime = eventStartTime + 22 * 60 * 60 * 1000;
    .tabSkill--container::-webkit-scrollbar-track {
        background-color: #f8f8f8a8;
        border-radius: 10px;
    }


            const weekNumber = getWeekNumber(lastFriday);
    .descripcion-container,
             const eventIndex = weekNumber % 2;
    .atributos-container {
             const nextEventIndex = (eventIndex + 1) % 2;
        padding: 12px 16px;
        border-radius: 8px;
        color: #fff;
        backdrop-filter: blur(2px);
        transition: all 0.3s ease;
        padding-bottom: 20px;
        align-content: center;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
             -1px 1px 0 #000,
             1px 1px 0 #000;
    }


             const currentEvent = alternatedEvents[eventIndex];
    .tier-bronze .descripcion-container,
             const nextEvent = alternatedEvents[nextEventIndex];
    .tier-bronze .atributos-container {
        background: linear-gradient(145deg, rgba(139, 69, 19, 0.15), rgba(160, 82, 45, 0.15));
        background-color: #3a2e25;
        border: 2px solid #cd7f32;
        border-radius: 10px;
        color: #ffffff;
        box-shadow:
             inset 0 0 5px rgba(255, 255, 255, 0.05),
             0 0 10px rgba(205, 127, 50, 0.15);
    }


            const nowTime = now.getTime();
    .tier-silver .descripcion-container,
             const nowDateOnly = new Date(now);
    .tier-silver .atributos-container {
             nowDateOnly.setHours(0, 0, 0, 0);
        background: linear-gradient(145deg, rgba(220, 220, 220, 0.1), rgba(180, 180, 180, 0.1));
        background-color: #2f2f33;
        border: 2px solid #c0c0c0;
        border-radius: 10px;
        color: #ffffff;
        box-shadow:
             inset 0 0 5px rgba(255, 255, 255, 0.07),
             0 0 12px rgba(192, 192, 192, 0.15);
    }


            if (nowTime >= eventStartTime && nowTime < eventEndTime) {
    .tier-gold .descripcion-container,
                // Evento em andamento
    .tier-gold .atributos-container {
                if (currentEvent.name === 'World Boss') {
        background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
                    obtenerImagenWorldBoss('actual').then(img => {
        background-color: #352a12;
                        worldBossImage.setAttribute('src', img || currentEvent.image);
        border: 2px solid #ffd700;
                    });
        border-radius: 10px;
                } else {
        color: #ffffff;
                    worldBossImage.setAttribute('src', currentEvent.image);
        box-shadow:
                }
            inset 0 0 6px rgba(255, 255, 255, 0.05),
                worldBossCountdown(eventStartTime, eventEndTime);
            0 0 14px rgba(255, 215, 0, 0.2);
            } else if (nowTime < eventStartTime) {
    }
                // Evento ainda não começou
                if (currentEvent.name === 'World Boss') {
                    obtenerImagenWorldBoss('proximo').then(img => {
                        worldBossImage.setAttribute('src', img || currentEvent.image);
                    });
                } else {
                    worldBossImage.setAttribute('src', currentEvent.image);
                }
                worldBossCountdown(eventStartTime, eventEndTime);
            } else {
                // Evento já terminou, mostrar o próximo
                const nextFriday = new Date(lastFriday);
                nextFriday.setDate(lastFriday.getDate() + 7);
                nextFriday.setHours(0, 0, 0, 0);


                const daysLeft = Math.round((nextFriday - nowDateOnly) / (24 * 60 * 60 * 1000));
    .tier-diamond .descripcion-container,
                if (nextEvent.name === 'World Boss') {
    .tier-diamond .atributos-container {
                    obtenerImagenWorldBoss('proximo').then(img => {
        background: linear-gradient(145deg, rgba(160, 250, 255, 0.2), rgba(80, 180, 200, 0.5)),
                        worldBossImage.setAttribute('src', img || nextEvent.image);
            url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='15,2 18,11 28,11 20,17 23,27 15,21 7,27 10,17 2,11 12,11' fill='%23ffffff' fill-opacity='0.25'/%3E%3C/svg%3E");
                    });
        background-color: #2c4a53;
                } else {
        background-blend-mode: soft-light;
                    worldBossImage.setAttribute('src', nextEvent.image);
        background-size: 45px 45px;
                }
        border: 2px solid #9be8f5;
                worldBossTimer.innerHTML = `Em ${daysLeft} dia${daysLeft > 1 ? 's' : ''}`;
        border-radius: 10px;
            }
        box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1), 0 0 15px rgba(100, 255, 255, 0.25);
         }
        color: #ffffff;
        animation: glowDiamond 5s ease-in-out infinite, moveStars 5s linear infinite;
        position: relative;
         overflow: hidden;
    }


        function setRankedEvent() {
    .atributos-container {
            const now = getBrazilTime();
        user-select: none;
            const day = now.getDay();
    }
            const todayEvents = rankedEvents[day];


            if (!todayEvents || todayEvents.length === 0) {
    .video-container {
                rankedImage.setAttribute('src', '/images/b/b0/Ranked_semranked_event.png');
        width: 42.4%;
                rankedTimer.innerHTML = 'Sem eventos hoje';
        height: fit-content;
                return;
        display: flex;
            }
        align-items: center;
        justify-content: center;
        background-color: #000;
        padding: 0;
        overflow: hidden;
        align-self: center;
        border-radius: 2%;
    }


            let found = false;
    .attribute--cardsContainer {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 10px;
        background: unset;
        border: unset;
    }


            for (let event of todayEvents) {
    .cardAttribute {
                const start = createBrazilDate(event.hour, 0, 0);
        width: 80px;
                const end = new Date(start.getTime() + 60 * 60 * 1000);
        height: 90px;
                const nowMs = now.getTime();
        background-color: #473838;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 5px;
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
        transition: transform 0.2s;
        border: 1px solid #00000047;
    }


                if (nowMs < start.getTime()) {
    .cardAttribute--icon {
                    rankedImage.setAttribute('src', event.image);
        height: 28px;
                    if (start.getTime() - nowMs <= 60 * 60 * 1000) {
        margin-bottom: 14px;
                        rankedCountdown(start.getTime(), end.getTime());
    }
                    } else {
                        const local = ajustarHoraBrasilALocal(start).toLocaleTimeString(undefined, {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false
                        });
                        rankedTimer.innerHTML = local;
                    }
                    found = true;
                    break;
                } else if (nowMs >= start.getTime() && nowMs < end.getTime()) {
                    rankedImage.setAttribute('src', event.image);
                    rankedCountdown(start.getTime(), end.getTime());
                    found = true;
                    break;
                }
            }


            if (!found) {
    .cardAttribute--value {
                // Mostrar próximo dia com eventos
        font-size: 14px !important;
                let daysToNext = 1;
        font-weight: bold;
                while (daysToNext < 7) {
        margin: 0 !important;
                    const nextDay = (day + daysToNext) % 7;
        color: white;
                    if (rankedEvents[nextDay]) break;
        border-bottom: unset;
                    daysToNext++;
    }
                }
                rankedImage.setAttribute('src', '/images/b/b0/Ranked_semranked_event.png');
                rankedTimer.innerHTML = `Em ${daysToNext} dia${daysToNext > 1 ? 's' : ''}`;
            }
        }


    .attribute-title,
    .card-skins-title {
        font-size: 1.4em;
        text-align: center;
        justify-self: center;
        letter-spacing: 1px;
        font-family: sans-serif !important;
        border-bottom: 2px solid #9d9c9c;
        color: white !important;
        padding-bottom: 8px;
        margin-bottom: 16px;
        width: 75%;
    }


        document.addEventListener('DOMContentLoaded', function () {
    .card-skins {
            globalEventsTimer = document.getElementById('global-event-timer');
        padding: 16px;
            globalEventsImage = document.querySelector('.global-event-image');
        border-radius: 12px;
            worldBossTimer = document.getElementById('worldboss-timer');
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            worldBossImage = document.querySelector('.worldboss-imagen');
        margin-top: 20px;
            rankedTimer = document.getElementById('rankedd-timer');
     }
            rankedImage = document.querySelector('.rankedd-image');
            setWorldBossEvent();
            setRankedEvent();
            cargarEventos();
        });
     })();


    .card-skins-title {
        display: block;
        border-bottom: unset;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 12px;
    }


     // CSS
     .skins--container {
    document.head.insertAdjacentHTML('beforeend', `
  <style>
 
    .carousel-controls-images {
         display: flex;
         display: flex;
        gap: 16px;
        flex-wrap: wrap;
         justify-content: center;
         justify-content: center;
        gap: 16px;
        margin-top: 8px;
     }
     }


     .carousel-thumb {
     .skins--imageSkin {
         font-size: 22px;
         width: 200px;
         color: #999;
        height: auto;
         cursor: pointer;
         background-color: #fefefe;
         transition: color 0.3s, transform 0.3s;
         border-radius: 6px;
         will-change: transform;
         border: 1px solid #ccc;
         transition: transform 0.2s;
     }
     }


     .carousel-thumb.active {
     .skins--imageSkin:hover {
        color: #459cca;
         transform: scale(1.05);
         transform: scale(1.2);
     }
     }


     .carousel-thumb.hidden {
     .mw-body-content {
         display: none;
         line-height: 1.5 !important;
     }
     }


    @keyframes fadeIn {
        from {
            opacity: 0;
        }


    .carousel-container {
        to {
        width: 320px;
            opacity: 1;
        height: 90px;
         }
        overflow: hidden;
        margin: 0 auto;
         position: relative;
     }
     }


     .carousel-track {
     @keyframes glowDiamond {
         display: flex;
 
         width: 100%;
         0%,
         transition: transform 0.5s ease-in-out;
         100% {
            box-shadow:
                inset 0 0 8px rgba(255, 255, 255, 0.4),
                0 0 16px rgba(80, 255, 255, 0.6);
         }
 
        50% {
            box-shadow:
                inset 0 0 16px rgba(255, 255, 255, 0.6),
                0 0 24px rgba(160, 255, 255, 0.8);
        }
     }
     }


     .carousel-slide {
     @keyframes moveStars {
         width: 100%;
         0% {
        flex: 0 0 100%;
            background-position: 0 0;
        height: 90px;
        }
         position: relative;
 
        100% {
            background-position: 90px -90px;
         }
     }
     }


     .global-event-image,
     @keyframes glow {
    .worldboss-imagen,
        0% {
    .rankedd-image {
            box-shadow: 0 0 2px 1px rgba(255, 255, 0, 0.35);
         width: 100%;
        }
         height: 100%;
 
        object-fit: cover;
        50% {
            box-shadow: 0 0 4px 2px rgba(255, 255, 0, 0.7);
         }
 
         100% {
            box-shadow: 0 0 2px 1px rgba(255, 255, 0, 0.35);
        }
     }
     }


     #global-event-timer,
     @media (max-aspect-ratio: 3/4) {
    #worldboss-timer,
        .habilidades-container {
    #rankedd-timer {
            display: flex;
         user-select: none;
            gap: 20px;
        pointer-events: none;
            flex-direction: column-reverse;
        position: absolute;
        }
        bottom: 3%;
 
         left: 3px;
        .habilidades-details {
        padding: 2px 5px;
            flex: 1;
         font-size: 1.2em;
            display: flex;
         font-weight: bold;
            flex-direction: column;
         color: #fff;
            width: 96%;
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            align-self: center;
         background: linear-gradient(to right, rgba(25, 25, 25, 0.85), rgba(0, 0, 0, 0));
         }
         border-top-right-radius: 4px;
 
         border-bottom-right-radius: 4px;
        .video-container {
         max-width: fit-content;
            width: 80%;
    }
            height: fit-content;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            align-self: center;
            border-radius: 3%;
            margin-top: 2%;
         }
 
        .personaje-header img {
            right: 11%;
            width: 290px;
            top: 2.5%;
         }
 
        .tap-btn {
            font-size: 30px;
         }
 
        .personaje-info .nome {
            font-size: 44px;
         }
 
         .personaje-info .tier,
        .personaje-info .classe {
            font-size: 30px;
         }
 
        .cuadros-container .cuadro {
            flex: 0 0 auto;
            width: 85px;
            height: 85px;
         }
 
        .personaje-box {
            padding: 32px;
         }
 
        .descripcion-container h3,
        .atributos-container h4 {
            font-size: 2.5em;
            margin-top: -12px;
         }
 
        .descripcion-container p {
            font-size: 1.7em;
        }


    .rankedd-image {
        .atributos-container h2 {
        object-fit: fill !important;
            font-size: 1.3em !important;
        }
     }
     }
  </style>
</style>
  `);
</script>

Edição das 15h27min de 16 de maio de 2025

       <img class="art-personaje" alt="Arte del personaje" />

           <button class="tab-btn active" data-tab="habilidades">Habilidades</button>
           <button class="tab-btn" data-tab="skins">Skins</button>

<script type="text/javascript"> 

   (function () {
       const dataEl = document.getElementById('persona-data');
       if (!dataEl) {
           console.error('Persona widget: no se encontró #persona-data');
           return;
       }

       // Extração de dados
       const nome = dataEl.dataset.nome || ;
       const tier = dataEl.dataset.tier || ;
       const classe = dataEl.dataset.classe || ;
       const image = dataEl.dataset.image || ;
       let habilidades = [];
       let skins = [];

       const tempRawHabs = (dataEl.dataset.habilidadesRaw || ).trim();
       let tempRawSkins = (dataEl.dataset.skinsRaw || ).trim();
       rawSkins = tempRawSkins.replace(//g, ).trim();
           rawHabs = tempRawHabs.replace(//g, ).trim();
       rawHabs.split('||').forEach(line => {
           if (!line.trim()) return;

           const parts = line.split('|').map(x => x.trim()).filter(Boolean);
           const habData = {};
           parts.forEach(part => {
               const [key, ...valParts] = part.split('=');
               if (!key || valParts.length === 0) return;
               habData[key.trim()] = valParts.join('=').trim(); // por si hay "=" en el valor
           });

           const { nome, icon, level, desc = , atr, video =  } = habData;

           if (nome && icon && level && atr) {
               habilidades.push({
                   nome,
                   icon,
                   level: parseInt(level),
                   descripcion: desc, // estará vacío si no fue definido
                   atributos: atr,
                   video
               });
           } else {
               console.warn("Habilidad omitida por falta de campos obligatorios:", line);
           }
       });

       rawSkins.split('||').forEach(line => {
           if (!line.trim()) return;

           // Extraer pares clave=valor (por ejemplo: image=..., tooltip=...)
           const obj = {};
           line.split('|').forEach(part => {
               const [key, ...rest] = part.split('=');
               if (key && rest.length) {
                   obj[key.trim()] = rest.join('=').trim();
               }
           });

           if (obj.image && obj.tooltip) {
               skins.push({ image: obj.image, tooltip: obj.tooltip });
           } else {
               console.error("Error en la skin (falta image o tooltip):", line);
           }
       });

       const tierLower = tier.toLowerCase();
       let tierClass = ;

       document.querySelector('.personaje-info .nome').textContent = nome;
       document.querySelector('.personaje-info .tier').textContent = 'Tier: ' + tier;
       document.querySelector('.personaje-info .classe').textContent = 'Classe: ' + classe;
       document.querySelector('img.art-personaje').src = image;

       const buttons = document.querySelectorAll('.tab-btn');
       const contents = document.querySelectorAll('.tab-content');
       buttons.forEach(btn => {
           btn.addEventListener('click', () => {
               buttons.forEach(b => b.classList.remove('active'));
               contents.forEach(c => c.classList.remove('active'));
               btn.classList.add('active');
               document.getElementById(btn.dataset.tab).classList.add('active');
           });
       });

       switch (tierLower) {
           case 'bronze':
           case 'bronce':
               tierClass = 'tier-bronze';
               break;
           case 'silver':
           case 'prata':
               tierClass = 'tier-silver';
               break;
           case 'gold':
           case 'ouro':
               tierClass = 'tier-gold';
               break;
           case 'diamond':
           case 'diamante':
               tierClass = 'tier-diamond';
               break;
       }

       if (tierClass) {
           document.querySelector('.personaje-box').classList.add(tierClass);
       }

       // Render skins
       document.getElementById('skins').innerHTML = generarHTMLSkins(skins);

       // Render habilidades
       const cuadrosContainer = document.querySelector('.cuadros-container');
       const descripcionContainer = document.querySelector('.descripcion-container');
       const atributosContainer = document.querySelector('.atributos-container');
       const videoContainer = document.querySelector('.video-container');
       const cuadros = [];

       habilidades.forEach(hab => {
           const div = document.createElement('div');
           div.className = 'cuadro';
           div.innerHTML = `<img src="${hab.icon}" alt="${hab.nome}" style="width:100%;height:100%;object-fit:cover">`;
           div.title = hab.nome;
           div.addEventListener('click', () => {
               descripcionContainer.innerHTML = `

${hab.nome}

Level: ${hab.level}

${hab.descripcion}

`; 

               atributosContainer.innerHTML = generarHTMLAtributos(hab.atributos);

               if (hab.video && hab.video !== ) {
                   videoContainer.innerHTML = `
         <video width="100%" controls playsinline>
           <source src="${hab.video}" type="video/webm">
         </video>`;
               } else {
                   videoContainer.innerHTML = ;
               }

               cuadros.forEach(c => c.classList.remove('activo'));
               div.classList.add('activo');
           });
           cuadros.push(div);
           cuadrosContainer.appendChild(div);
       });

       if (cuadros.length) cuadros[0].click();

       function generarHTMLAtributos(str) {
           const vals = str.split(',').map(v => v.trim());
           const labels = ['Recarga', 'Energía', 'Poder PVE', 'Poder PVP'];
           const icons = [
               '/images/b/b1/Icon-cooldown.png',
               '/images/3/38/Icon-energy.png',
               '/images/7/7a/Icon-pve.png',
               '/images/5/5f/Icon-pvp.png'
           ];
           return `

Atributos

         ${vals.map((v, i) => {
               let f = v === '-' ? '-' : parseInt(v);
               if (i === 1 && !isNaN(f)) f = (f > 0 ? '+' : ) + f;
               return `
<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="

${labels[i]}

"> 
                 <img src="${icons[i]}" class="cardAttribute--icon">

${f}${i === 0 && f !== '-' ? ' seg' : }

             `;
           }).join()}

`; 

       }

       function generarHTMLSkins(lista) {
           return `

         Skins

           ${lista.map(skin => `
<span class="simple-tooltip simple-tooltip-inline tooltipstered" data-simple-tooltip="
${skin.tooltip}
"> 
               <img class="skins--imageSkin" src="${skin.image}" alt="">
             `).join()}

`; 

       }

       cuadrosContainer.addEventListener('wheel', (e) => {
           if (e.deltaY !== 0) {
               e.preventDefault();
               cuadrosContainer.scrollLeft += e.deltaY;
           }
       });
       dataEl.remove();

   })();

</script> <style> 

   img {
       pointer-events: none;
       user-select: none;
   }

   .personaje-box {
       background: #1e1e1e;
       border-radius: 12px;
       padding: 16px;
       color: #fff;
       font-family: 'Segoe UI', sans-serif;
       width: 90%;
       margin: auto;
       border: 2px solid #444;
   }

   .personaje-header {
       display: flex;
       gap: 20px;
       border-bottom: 2px solid #555;
       padding-bottom: 10px;
       flex-direction: column;
   }

   .personaje-header img {
       width: 230px;
       position: absolute;
       right: 5%;
   }

   .personaje-info {
       user-select: none;
   }

   .personaje-info .nome {
       font-size: 35px;
       font-weight: bold;
   }

   .personaje-info .tier,
   .personaje-info .classe {
       font-size: 18px;
       color: #bbb;
   }

   .personaje-tabs {
       margin-block: 4px;
       display: flex;
       gap: 12px;
       justify-content: flex-start;
   }

   .tab-btn {
       padding: 8px 20px;
       background: #333;
       color: white;
       border: none;
       border-radius: 8px;
       font-size: 20px;
       cursor: pointer;
   }

   .tab-btn.active {
       background: #156bc7;
       font-weight: bold;
   }

   .tab-content {
       display: none;
       margin-top: 20px;
       animation: fadeIn 0.4s ease;
   }

   .tab-content.active {
       display: block;
   }

   .habilidades-container {
       display: flex;
       gap: 20px;
   }

   .habilidades-details {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: 50%;
       justify-content: center;
   }

   .cuadros-container {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
       width: 95%;
       overflow-x: auto;
       overflow-y: hidden;
       padding-bottom: 8px;
       scrollbar-width: thin;
       scrollbar-color: #555 transparent;
       margin-bottom: 1%;
       justify-content: space-between;
       justify-self: center;
   }

   .cuadros-container::-webkit-scrollbar {
       height: 6px;
   }

   .cuadros-container::-webkit-scrollbar-track {
       background: transparent;
   }

   .cuadros-container::-webkit-scrollbar-thumb {
       background-color: #555;
       border-radius: 3px;
   }

   .cuadros-container .cuadro {
       flex: 0 0 auto;
       width: 60px;
       height: 60px;
       border-radius: 5px;
       cursor: pointer;
       transition: transform 0.2s, box-shadow 0.2s;
   }

   .cuadros-container .cuadro.activo {
       box-shadow: 0 0 10px 3px rgba(255, 255, 0, 0.5);
       border: 1px solid #FFD700;
       animation: glow 2s ease-in-out infinite;
   }

   .descripcion-container h3,
   .atributos-container h4 {
       font-size: 1.7em;
       margin-top: unset;
       padding-top: unset
   }

   .descripcion-container p {
       font-size: 1.2em;
       margin-bottom: unset;
   }

   .descripcion-container {
       min-height: 13rem;
       max-height: 50%;
       padding: 4px 16px !important;
   }

   .descripcion-container .desc {
       overflow-y: auto !important;
       max-height: inherit;
       margin-bottom: unset;
       font-size: 1.2em;
       margin-bottom: unset;
   }

   .desc *, .desc b, .desc strong, .desc i, .desc em {
 font-size: inherit !important;
 font-style: inherit;
 font-weight: inherit;

} 


   .descripcion-container .descLevel {
       margin-top: 5px;
       font-weight: bold;
   }

   .descripcion-container .desc::-webkit-scrollbar,
   .tabSkill--container::-webkit-scrollbar {
       width: 7px;
       height: 7px;
   }

   .descripcion-container .desc::-webkit-scrollbar-thumb,
   .tabSkill--container::-webkit-scrollbar-thumb {
       background-color: rgb(71 153 255);
       border-radius: 10px;
   }

   .descripcion-container .desc::-webkit-scrollbar-track,
   .tabSkill--container::-webkit-scrollbar-track {
       background-color: #f8f8f8a8;
       border-radius: 10px;
   }

   .descripcion-container,
   .atributos-container {
       padding: 12px 16px;
       border-radius: 8px;
       color: #fff;
       backdrop-filter: blur(2px);
       transition: all 0.3s ease;
       padding-bottom: 20px;
       align-content: center;
       text-shadow:
           -1px -1px 0 #000,
           1px -1px 0 #000,
           -1px 1px 0 #000,
           1px 1px 0 #000;
   }

   .tier-bronze .descripcion-container,
   .tier-bronze .atributos-container {
       background: linear-gradient(145deg, rgba(139, 69, 19, 0.15), rgba(160, 82, 45, 0.15));
       background-color: #3a2e25;
       border: 2px solid #cd7f32;
       border-radius: 10px;
       color: #ffffff;
       box-shadow:
           inset 0 0 5px rgba(255, 255, 255, 0.05),
           0 0 10px rgba(205, 127, 50, 0.15);
   }

   .tier-silver .descripcion-container,
   .tier-silver .atributos-container {
       background: linear-gradient(145deg, rgba(220, 220, 220, 0.1), rgba(180, 180, 180, 0.1));
       background-color: #2f2f33;
       border: 2px solid #c0c0c0;
       border-radius: 10px;
       color: #ffffff;
       box-shadow:
           inset 0 0 5px rgba(255, 255, 255, 0.07),
           0 0 12px rgba(192, 192, 192, 0.15);
   }

   .tier-gold .descripcion-container,
   .tier-gold .atributos-container {
       background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
       background-color: #352a12;
       border: 2px solid #ffd700;
       border-radius: 10px;
       color: #ffffff;
       box-shadow:
           inset 0 0 6px rgba(255, 255, 255, 0.05),
           0 0 14px rgba(255, 215, 0, 0.2);
   }

   .tier-diamond .descripcion-container,
   .tier-diamond .atributos-container {
       background: linear-gradient(145deg, rgba(160, 250, 255, 0.2), rgba(80, 180, 200, 0.5)),
           url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='15,2 18,11 28,11 20,17 23,27 15,21 7,27 10,17 2,11 12,11' fill='%23ffffff' fill-opacity='0.25'/%3E%3C/svg%3E");
       background-color: #2c4a53;
       background-blend-mode: soft-light;
       background-size: 45px 45px;
       border: 2px solid #9be8f5;
       border-radius: 10px;
       box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1), 0 0 15px rgba(100, 255, 255, 0.25);
       color: #ffffff;
       animation: glowDiamond 5s ease-in-out infinite, moveStars 5s linear infinite;
       position: relative;
       overflow: hidden;
   }

   .atributos-container {
       user-select: none;
   }

   .video-container {
       width: 42.4%;
       height: fit-content;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: #000;
       padding: 0;
       overflow: hidden;
       align-self: center;
       border-radius: 2%;
   }

   .attribute--cardsContainer {
       display: flex;
       justify-content: center;
       gap: 20px;
       flex-wrap: wrap;
       margin-top: 10px;
       background: unset;
       border: unset;
   }

   .cardAttribute {
       width: 80px;
       height: 90px;
       background-color: #473838;
       border-radius: 8px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 5px;
       box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
       transition: transform 0.2s;
       border: 1px solid #00000047;
   }

   .cardAttribute--icon {
       height: 28px;
       margin-bottom: 14px;
   }

   .cardAttribute--value {
       font-size: 14px !important;
       font-weight: bold;
       margin: 0 !important;
       color: white;
       border-bottom: unset;
   }

   .attribute-title,
   .card-skins-title {
       font-size: 1.4em;
       text-align: center;
       justify-self: center;
       letter-spacing: 1px;
       font-family: sans-serif !important;
       border-bottom: 2px solid #9d9c9c;
       color: white !important;
       padding-bottom: 8px;
       margin-bottom: 16px;
       width: 75%;
   }

   .card-skins {
       padding: 16px;
       border-radius: 12px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       margin-top: 20px;
   }

   .card-skins-title {
       display: block;
       border-bottom: unset;
       font-size: 18px;
       font-weight: bold;
       margin-bottom: 12px;
   }

   .skins--container {
       display: flex;
       gap: 16px;
       flex-wrap: wrap;
       justify-content: center;
   }

   .skins--imageSkin {
       width: 200px;
       height: auto;
       background-color: #fefefe;
       border-radius: 6px;
       border: 1px solid #ccc;
       transition: transform 0.2s;
   }

   .skins--imageSkin:hover {
       transform: scale(1.05);
   }

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

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   @keyframes glowDiamond {

       0%,
       100% {
           box-shadow:
               inset 0 0 8px rgba(255, 255, 255, 0.4),
               0 0 16px rgba(80, 255, 255, 0.6);
       }

       50% {
           box-shadow:
               inset 0 0 16px rgba(255, 255, 255, 0.6),
               0 0 24px rgba(160, 255, 255, 0.8);
       }
   }

   @keyframes moveStars {
       0% {
           background-position: 0 0;
       }

       100% {
           background-position: 90px -90px;
       }
   }

   @keyframes glow {
       0% {
           box-shadow: 0 0 2px 1px rgba(255, 255, 0, 0.35);
       }

       50% {
           box-shadow: 0 0 4px 2px rgba(255, 255, 0, 0.7);
       }

       100% {
           box-shadow: 0 0 2px 1px rgba(255, 255, 0, 0.35);
       }
   }

   @media (max-aspect-ratio: 3/4) {
       .habilidades-container {
           display: flex;
           gap: 20px;
           flex-direction: column-reverse;
       }

       .habilidades-details {
           flex: 1;
           display: flex;
           flex-direction: column;
           width: 96%;
           align-self: center;
       }

       .video-container {
           width: 80%;
           height: fit-content;
           display: flex;
           align-items: center;
           justify-content: center;
           overflow: hidden;
           align-self: center;
           border-radius: 3%;
           margin-top: 2%;
       }

       .personaje-header img {
           right: 11%;
           width: 290px;
           top: 2.5%;
       }

       .tap-btn {
           font-size: 30px;
       }

       .personaje-info .nome {
           font-size: 44px;
       }

       .personaje-info .tier,
       .personaje-info .classe {
           font-size: 30px;
       }

       .cuadros-container .cuadro {
           flex: 0 0 auto;
           width: 85px;
           height: 85px;
       }

       .personaje-box {
           padding: 32px;
       }

       .descripcion-container h3,
       .atributos-container h4 {
           font-size: 2.5em;
           margin-top: -12px;
       }

       .descripcion-container p {
           font-size: 1.7em;
       }

       .atributos-container h2 {
           font-size: 1.3em !important;
       }
   }

</style>

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