Widget:Teste

<script>

   (function () {
       const $ = (s, root = document) => root.querySelector(s);
       const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));

       // ----- Tabs
       const tabBtns = $$('.tab-btn');
       const panels = $$('.tab-content');

       tabBtns.forEach(btn => {
           btn.addEventListener('click', () => {
               const id = btn.dataset.tab;
               tabBtns.forEach(b => b.classList.remove('active'));
               panels.forEach(p => p.classList.remove('active'));
               btn.classList.add('active');
               const panel = document.getElementById(id);
               if (panel) panel.classList.add('active');
           });
       });

       // ----- Skills (classes novas)
       const skillsTab = $('#skills');
       const iconsBar = skillsTab ? $('.icon-bar', skillsTab) : null;
       const iconItems = iconsBar ? $$('.skill-icon', iconsBar) : [];
       const descBox = skillsTab ? $('.desc-box', skillsTab) : null;
       const videoBox = skillsTab ? $('.video-container', skillsTab) : null;

       const videosCache = {};
       let totalVideos = 0, loadedVideos = 0, autoplay = false;

       // Placeholder do vídeo
       let placeholder = null;
       if (videoBox) {
           placeholder = document.createElement('div');
           placeholder.className = 'video-placeholder';
           placeholder.innerHTML = '<img src="/images/d/d5/Icon_gla.png" alt="Carregando...">';
           videoBox.appendChild(placeholder);
       }
       const removePlaceholder = () => {
           if (!placeholder) return;
           placeholder.classList.add('fade-out');
           placeholder.addEventListener('transitionend', () => {
               placeholder && placeholder.remove();
               placeholder = null;
           }, { once: true });
       };

       // Pré-carregar vídeos
       iconItems.forEach(el => {
           const src = (el.dataset.video || ).trim();
           const idx = el.dataset.index || ;
           if (!src || !videoBox || videosCache[idx]) return;

           totalVideos++;
           const v = document.createElement('video');
           v.controls = true;
           v.preload = 'auto';
           v.playsInline = true;
           v.style.display = 'none';
           v.dataset.index = idx;

           const source = document.createElement('source');
           source.src = src;
           source.type = 'video/webm';
           v.appendChild(source);

           v.addEventListener('canplay', () => {
               loadedVideos++;
               if (loadedVideos === 1) { v.pause(); v.currentTime = 0; }
               const active = $('.skill-icon.active', iconsBar);
               if (active && active.dataset.index === idx) setTimeout(removePlaceholder, 180);
               if (loadedVideos === totalVideos) autoplay = true;
           });

           v.addEventListener('error', () => {
               loadedVideos++;
               removePlaceholder();
               if (loadedVideos === totalVideos) autoplay = true;
           });

           videoBox.appendChild(v);
           videosCache[idx] = v;
       });

       if (totalVideos === 0) removePlaceholder();

       // Clique nas skills
       iconItems.forEach(el => {
           const name = el.dataset.nome || el.dataset.name || ;
           const desc = (el.dataset.desc || ).replace(/(.*?)/g, '$1');
           const attrs = el.dataset.atr || el.dataset.attrs || ;
           const idx = el.dataset.index || ;
           const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== );

           el.title = name;

           el.addEventListener('click', () => {
               if (!autoplay && loadedVideos > 0) autoplay = true;

               if (descBox) {
                   descBox.innerHTML = `

${name}

 ${renderAttributes(attrs)}

${desc}

`;

               }

               // alterna vídeos
               Object.values(videosCache).forEach(v => { v.pause(); v.style.display = 'none'; });
               if (videoBox) {
                   if (hasVideo && videosCache[idx]) {
                       const v = videosCache[idx];
                       videoBox.style.display = 'block';
                       v.style.display = 'block';
                       v.currentTime = 0;
                       if (autoplay) v.play().catch(() => { });
                   } else {
                       videoBox.style.display = 'none';
                   }
               }

               // estado ativo
               iconItems.forEach(i => i.classList.remove('active'));
               el.classList.add('active');
           });
       });

       // Seleciona a primeira skill por padrão
       if (iconItems.length) iconItems[0].click();

       // Scroll horizontal com a roda do mouse
       if (iconsBar) {
           iconsBar.addEventListener('wheel', (e) => {
               if (e.deltaY) {
                   e.preventDefault();
                   iconsBar.scrollLeft += e.deltaY;
               }
           });
       }

       // ----- Skins: setas (classes já estavam ok)
       initSkinsArrows();
       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;

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

       // ----- Atributos (ordem fixa, espaços "fantasmas" no fim)
       function renderAttributes(str) {
           const vals = (str || ).split(',').map(v => v.trim());
           const pve = parseInt(vals[0], 10);
           const pvp = parseInt(vals[1], 10);
           const ene = parseInt(vals[2], 10);
           const cd = parseInt(vals[3], 10);

           const recargaVal = isNaN(cd) ? '-' : cd;
           const energiaLabel = isNaN(ene) ? 'Energia' : (ene >= 0 ? 'Ganho de energia' : 'Custo de energia');
           const energiaVal = isNaN(ene) ? '-' : Math.abs(ene);
           const poderVal = isNaN(pve) ? '-' : pve;
           const poderPvpVal = isNaN(pvp) ? '-' : pvp;

           const rows = [
               ['Recarga', recargaVal],
               [energiaLabel, energiaVal],
               ['Poder', poderVal],
               ['Poder PvP', poderPvpVal],
           ];

           // compacta os visíveis e empurra os vazios pro final
           const visible = rows.filter(([, v]) => v !== '-');
           const empties = rows.length - visible.length;

           const visibleHtml = visible.map(([label, value]) => `

       ${label}:
       ${value}

   `).join();

           const emptyHtml = Array.from({ length: empties }).map(() => `

   `).join();

return `

${visibleHtml}${emptyHtml}

`;

       }
   })();

</script>

<style> /* ===========================

  Resets / Base
  =========================== */

img { pointer-events: none; user-select: none; } video { max-height: 33.25em; object-fit: fill; }

.mw-body { padding: unset !important; } /* precisa de !important p/ MediaWiki */ .mw-body-content { line-height: 1.5; } .mw-body-content p { display: none; }

/* ===========================

  Banner (header background)
  =========================== */

.banner {

 position: absolute; inset: 0; z-index: -9;
 background: url(https://i.imgur.com/OVGhLvl.png) center/cover no-repeat;

} .banner-image { width: 100%; height: auto; } .banner::before {

 content: ""; position: absolute; inset: 0;
 background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.2));

}

/* ===========================

  Character container / Topbar
  =========================== */

.character-box {

 color: #000;
 font-family: 'Noto Sans', sans-serif;
 width: 100%; margin: auto; position: relative; user-select: none;

} .character-box p { display: unset; }

.character-topbar {

 display: flex; flex-direction: column; align-items: flex-start;
 padding: 8px 20px 0;

} .character-name-box { display: flex; align-items: center; gap: 14px; } .topbar-icon { margin-top: 8px; width: 100px; height: 100px; object-fit: none; } .character-name {

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

} .topbar-description { display: none; }

/* ===========================

  Header / Artwork
  =========================== */

.character-header { position: relative; overflow: hidden; display: flex; gap: 10px; flex-direction: column; } .character-art { width: 34.3vw; height: auto; position: absolute; right: 3.5rem; top: -3.1rem; z-index: 1; pointer-events: none; }

/* Class / tier chips */ .class-tags { display: flex; gap: 9px; flex-wrap: wrap; margin-left: .28rem; } .class-tag {

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

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

/* ===========================

  Tabs
  =========================== */

.character-tabs { margin: 4px 0 4px 8px; display: flex; gap: 12px; } .tab-btn {

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

} .tab-btn.active { background: #156bc7; border-color: #156bc7; } .tab-content { display: none; padding: 0 8px 8px; position: relative; z-index: 3; } .tab-content.active { display: block; }

/* ===========================

  Skills layout
  =========================== */

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

/* Icon bar */ .icon-bar {

 display: flex; flex-wrap: nowrap; gap: 10px; width: 100%;
 overflow-x: auto; overflow-y: hidden; padding: 10px 0 3px 3px;
 margin-bottom: 6px; scrollbar-width: thin; scrollbar-color: #ababab transparent;
 scroll-behavior: smooth; justify-content: flex-start; position: relative; z-index: 4;

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

/* Icon look & states */

root{

 --icon-size: 39px;
 --icon-radius: 8px;
 --icon-idle: #bbb;
 --icon-active: #156bc7;
 --icon-active-ring: rgba(21,107,199,.35);

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

} .icon-bar .skill-icon img{

 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--icon-radius);
 -webkit-clip-path: inset(0 round var(--icon-radius)); clip-path: inset(0 round var(--icon-radius));

} .icon-bar .skill-icon::after{

 content:""; position:absolute; inset:0; border-radius:var(--icon-radius);
 border:2px solid var(--icon-idle); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
 pointer-events:none; z-index:2;

} .icon-bar .skill-icon:hover::after{ border-color:#e0e0e0; box-shadow: inset 0 0 0 1px #e0e0e0; } .icon-bar .skill-icon.active::after{

 border-color:var(--icon-active);
 box-shadow: 0 0 0 2px var(--icon-active), 0 0 0 4px var(--icon-active-ring);

} .icon-bar .skill-icon:active:not(.active){ transform: translateY(1px); } @media (prefers-reduced-motion: reduce){ .icon-bar .skill-icon{ transition:none; } }

/* Title above description */ .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; }

/* Description box */ .desc-box{

 min-height: 28.89rem; height: 100%;
 padding: 4px 16px; background:#26211C; border-radius:8px; position:relative;
 box-shadow: 0 6px 18px rgba(0,0,0,.18); color:#fff; transition: all .3s ease;
 z-index:99; overflow: visible; text-shadow: none;

} .desc-box h3{ font-size:2.7em; margin:0; text-align:center; padding-top:0; } .desc{ font-size:1.22em; line-height:1.6; letter-spacing:.01em; max-height:18.8em; overflow-y:auto; margin-top:10px; padding-right:8px; color:#f1efe9; } .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 list */ .attrs, .attr-list{ display:block; margin:6px 0 12px; } .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:baseline; gap:8px; min-height:22px; line-height:1.2; } .attrs__row--empty, .attr-row.is-empty{ visibility:hidden; } .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:1.08rem; letter-spacing:.01em; margin:0; }

/* Video box */ .video-container{

 position:relative; width:43%; background:#000;
 display:flex; align-items:center; justify-content:center;
 border-radius:2%; box-shadow:0 8px 24px rgba(0,0,0,.35); overflow:hidden; z-index:999;

} .video-placeholder{

 position:absolute; inset:0; background:#000; display:flex; align-items:center; justify-content:center;
 z-index:2; opacity:1; transition:opacity .9s ease;

} .video-placeholder img{ width:120px; height:auto; filter:drop-shadow(0 0 6px rgba(255,255,255,.3)); animation:breathe 2.5s ease-in-out infinite; } .video-placeholder.fade-out{ opacity:0; } @keyframes breathe{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.07); opacity:.85; } }

/* Tiers (kept outlines) */ .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; }

/* ===========================

  Skins
  =========================== */

.card-skins{ border-radius:12px; user-select:none; }

/* Title (no underline) */ .card-skins-title{

 display:block; width:100%; margin:6px 0 8px; padding:4px 0;
 font-family:'Noto Sans',sans-serif; font-weight:700;
 font-size:clamp(18px,2vw,28px); line-height:1.15; letter-spacing:.3px;
 color:#222; text-align:left; text-shadow:none;

}

.skins-carousel-wrapper{

 min-height: 28.89rem; max-height:60%;
 padding: 0 16px 0; background:#26211C; border-radius:8px; position:relative;
 box-shadow:0 6px 16px rgba(0,0,0,.25); color:#fff; transition:all .3s ease;
 display:flex; gap:10px; justify-content:center; align-items:center; overflow:visible; z-index:99;

} .skins-carousel-wrapper::before, .skins-carousel-wrapper::after{

 content:""; position:absolute; top:0; width:60px; height:100%; pointer-events:none; opacity:0; transition:opacity .4s ease; z-index:3;

} .skins-carousel-wrapper::before{ left:0; background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); } .skins-carousel-wrapper::after { right:0; background:linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); } .skins-carousel-wrapper.has-left::before, .skins-carousel-wrapper.has-right::after{ opacity:1; }

.skins-carousel{

 display:flex; gap:1vw; overflow-x:auto; scroll-behavior:smooth; padding:10px 0; flex-grow:1;

} .skins-carousel::-webkit-scrollbar{ display:none; }

.has-left{ padding-left:60px; } .has-left .skins-carousel{ mask-image:linear-gradient(to right, transparent 0px, black 40px, black 100%); } .has-right{ padding-right:60px; } .has-right .skins-carousel{ mask-image:linear-gradient(to right, black 0px, black calc(100% - 40px), transparent 100%); }

.skins-arrow{

 background:none; border:none; color:#fff; font-size:36px; cursor:pointer; padding:8px; z-index:5; transition:opacity .3s, transform .3s;

} .skins-arrow.left{ margin-right:8px; } .skins-arrow.right{ margin-left:8px; } .skins-arrow.hidden{ opacity:0; transform:scale(.8); pointer-events:none; visibility:hidden; }

.skin-card{

 position:relative; width:12vw; height:39vh; flex:0 0 auto;
 border:2px solid #697EC9; border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.25); background:#111;

} .skin-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; box-shadow: inset 0 0 8px rgba(180,180,180,.18); } .skin-banner{ width:100%; height:109%; } .skin-banner img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5); transform:scale(1.1); } .skin-sprite img{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); height:140px; width:auto; z-index:2; transition:transform .2s; }

/* ===========================

  Responsive
  =========================== */

@media (max-aspect-ratio: 3/4){

 .character-header .character-art{ display:none; }
 .skills-container{ flex-direction:column-reverse; gap:20px; }
 .skills-details{ width:96%; align-self:center; }
 .video-container{ width:80%; border-radius:3%; margin-top:2%; align-self:center; }
 .icon-bar{ width:98%; place-self:center; padding:10px 0 16px 1px; }
 .skill-icon{ width:80px; height:80px; }
 .desc-box{ padding:22px; }
 .desc-box h3{ font-size:3.6em; margin-top:-14px; }
 .desc-box p{ font-size:2.3em; margin-bottom:5px; }
 .tab-btn{ padding:10px 20px; font-size:26px; }
 .tab-content{ padding:0 8px 20px; z-index:1; }
 .class-tag{ padding:0 5px; font-size:1.4em; }
 .skins-carousel{ gap:20px; }
 .skin-card{ width:236px; height:400px; }
 .skin-sprite img{ height:170px; }
 .card-skins-title{ width:100%; }
 .skins-arrow{ display:none; }
 .skins-carousel-wrapper::before, .skins-carousel-wrapper::after{ background: unset; }
 video::-webkit-media-controls{ opacity:unset; transition:unset; }
 video:hover::-webkit-media-controls{ opacity:unset; }

}

@media (max-width:1100px){

 .character-header .character-art{ display:none !important; }
 .skills-container{ flex-direction:column-reverse; gap:20px; }
 .skills-details{ width:100%; max-width:820px; align-self:center; }
 .video-container{ width:80%; max-width:820px; border-radius:3%; margin-top:2%; align-self:center; }
 .icon-bar{ width:100%; place-self:center; padding:10px 0 16px 1px; }
 .skill-icon{ width:80px; height:80px; }
 .tab-btn{ padding:10px 20px; font-size:26px; }
 .tab-content{ padding:0 8px 20px; z-index:1; }

} </style>