Widget:Character.Skins

<script>

   (function initSkinCardsUI() {
       const wrapper = document.querySelector('.skins-carousel-wrapper');
       const carousel = wrapper?.querySelector('.skins-carousel');
       const left = wrapper?.querySelector('.skins-arrow.left');
       const right = wrapper?.querySelector('.skins-arrow.right');

       if (!wrapper || !carousel || wrapper.dataset.wired) return;
       wrapper.dataset.wired = '1';

       // ---------- Tooltip único ----------
       function ensureTip() {
           let tip = document.querySelector('.skin-tooltip');
           if (!tip) {
               tip = document.createElement('div');
               tip.className = 'skin-tooltip';
               tip.setAttribute('role', 'tooltip');
               tip.setAttribute('aria-hidden', 'true');
               tip.style.position = 'fixed';
               tip.style.transform = 'translate(-9999px,-9999px)';
               tip.style.opacity = '0';
               tip.style.transition = 'opacity .12s ease';
               document.body.appendChild(tip);
           }
           return tip;
       }

       const tip = ensureTip();
       let hovered = null;

       function place(card) {
           if (!card || tip.getAttribute('aria-hidden') === 'true') return;
           tip.style.transform = 'translate(-9999px,-9999px)';
           const r = card.getBoundingClientRect();
           const tr = tip.getBoundingClientRect();
           let leftPos = Math.round(r.left + (r.width - tr.width) / 2);
           leftPos = Math.max(8, Math.min(leftPos, window.innerWidth - tr.width - 8));
           let top = Math.round(r.top - tr.height - 10);
           if (top < 8) top = Math.round(r.bottom + 10);
           tip.style.transform = `translate(${leftPos}px, ${top}px)`;
       }

       function show(card) {
           tip.innerHTML = card.getAttribute('data-skin-tooltip') || ;
           tip.setAttribute('aria-hidden', 'false');
           place(card);
           tip.style.opacity = '1';
       }

       function hide() {
           tip.setAttribute('aria-hidden', 'true');
           tip.style.opacity = '0';
           tip.style.transform = 'translate(-9999px,-9999px)';
       }

       // ---------- Navegação (setas) ----------
       function scrollAmt() {
           return Math.round(carousel.clientWidth * 0.6);
       }

       function setState() {
           const max = carousel.scrollWidth - carousel.clientWidth;
           const x = carousel.scrollLeft;
           const hasLeft = x > 5;
           const hasRight = x < max - 5;
           if (left) left.style.display = hasLeft ? 'inline-block' : 'none';
           if (right) 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();

       // ---------- Abrir YouTube (sem duplicar) ----------
       carousel.addEventListener('click', (ev) => {
           const card = ev.target?.closest('.skin-card[data-youtube]');
           if (!card) return;
           const url = (card.dataset.youtube || ).trim();
           if (!url) return;
           if (card.dataset._opening === '1') return;
           card.dataset._opening = '1';
           ev.preventDefault();
           ev.stopPropagation();
           ev.stopImmediatePropagation();
           try { window.open(url, '_blank', 'noopener,noreferrer'); }
           catch (e) { location.href = url; }
           setTimeout(() => { delete card.dataset._opening; }, 500);
       }, { capture: true });

       carousel.addEventListener('keydown', (ev) => {
           if (ev.key !== 'Enter' && ev.key !== ' ') return;
           const card = ev.target?.closest('.skin-card[data-youtube]');
           if (!card) return;
           const url = (card.dataset.youtube || ).trim();
           if (!url) return;
           if (card.dataset._opening === '1') return;
           card.dataset._opening = '1';
           ev.preventDefault();
           ev.stopPropagation();
           ev.stopImmediatePropagation();
           try { window.open(url, '_blank', 'noopener,noreferrer'); }
           catch (e) { location.href = url; }
           setTimeout(() => { delete card.dataset._opening; }, 500);
       }, { capture: true });

       // ---------- Hitbox de hover por carta ----------
       function setHovered(card) {
           if (hovered === card) { place(card); return; }
           if (hovered) hovered.classList.remove('hovered');
           carousel.classList.remove('hovering');
           carousel.querySelectorAll('.skin-card.dim').forEach(n => n.classList.remove('dim'));
           if (!card) { hovered = null; hide(); return; }
           hovered = card;
           hovered.classList.add('hovered');
           carousel.classList.add('hovering');
           carousel.querySelectorAll('.skin-card').forEach(n => { if (n !== hovered) n.classList.add('dim'); });
           show(card);
       }

       carousel.addEventListener('mouseleave', () => { setHovered(null); });
       carousel.addEventListener('mousemove', (ev) => {
           const card = ev.target?.closest('.skin-card');
           if (card && card.hasAttribute('data-skin-tooltip')) {
               setHovered(card);
           } else {
               setHovered(null);
           }
       });

       window.addEventListener('scroll', () => { if (hovered) place(hovered); }, true);
       window.addEventListener('resize', () => { if (hovered) place(hovered); });
   })();

</script> <style>

   .skin-tooltip {
       position: fixed;
       z-index: 9999;
       left: 0;
       top: 0;
       pointer-events: none;
       padding: 8px 10px;
       border-radius: 8px;
       background: rgba(28, 28, 34, .95);
       color: #eaeaea;
       font-size: 13px;
       line-height: 1.25;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
       transform: translate(-9999px, -9999px);
       opacity: 0;
       transition: opacity .12s ease;
       white-space: nowrap;
   }

   .skin-tooltip b {
       color: #fff;
   }

   .skin-card .skin-sprite img {
       box-shadow: none !important;
   }

   .card-skins,
   .skins-carousel {
       overflow: visible !important;
   }

   .skin-card.is-clickable {
       cursor: pointer;
   }

   .skin-card.is-clickable:focus {
       outline: 2px solid #156bc7;
       outline-offset: 2px;
   }

   .skin-card {
       position: relative;
   }

   .skins-carousel {
       position: relative;
   }

   .skins-carousel.hovering .skin-card.dim {
       filter: brightness(.55) saturate(.85);
       transition: filter .14s ease, transform .14s ease;
   }

   .skins-carousel.hovering .skin-card.hovered {
       filter: none;
       transform: none;
       box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 10px 28px rgba(0, 0, 0, .45);
   }

   .skin-tooltip {
       pointer-events: none;
   }

   .skins-carousel .skin-card {
       transition: filter .14s ease, box-shadow .14s ease;
   }

   .skin-card .skin-banner {
       z-index: 0;
   }

   .skin-card .skin-sprite {
       z-index: 2;
   }

   .skin-badge {
       display: none !important;
   }

   .skin-tooltip,
   .skill-tooltip {
       text-align: center !important;
       white-space: normal !important;
       max-width: 380px !important;
   }

   .skins-carousel.hover-mode .skin-card.hovered {
       filter: none !important;
       transform: none !important;
       box-shadow: 0 0 0 2px rgba(255, 255, 255, .12), 0 10px 28px rgba(0, 0, 0, .45) !important;
   }

   .skins-carousel .skin-card {
       transition: filter .14s ease, box-shadow .14s ease !important;
   }

</style>

<script>

   (function initSkinCardsUI_v2() {
       const wrapper = document.querySelector('.skins-carousel-wrapper');
       const carousel = wrapper?.querySelector('.skins-carousel');
       const left = wrapper?.querySelector('.skins-arrow.left');
       const right = wrapper?.querySelector('.skins-arrow.right');

       if (!wrapper || !carousel) return;
       if (wrapper.dataset.skinsV2Wired === '1') return;
       wrapper.dataset.skinsV2Wired = '1';

       // ---------- Tooltip único ----------
       function ensureTip() {
           let tip = document.querySelector('.skin-tooltip');
           if (!tip) {
               tip = document.createElement('div');
               tip.className = 'skin-tooltip';
               tip.setAttribute('role', 'tooltip');
               tip.setAttribute('aria-hidden', 'true');
               Object.assign(tip.style, {
                   position: 'fixed',
                   transform: 'translate(-9999px,-9999px)',
                   opacity: '0',
                   transition: 'opacity .12s ease',
                   pointerEvents: 'none'
               });
               document.body.appendChild(tip);
           }
           return tip;
       }

       const tip = ensureTip();
       let hovered = null;

       function place(card) {
           if (!card || tip.getAttribute('aria-hidden') === 'true') return;
           tip.style.transform = 'translate(-9999px,-9999px)';
           const r = card.getBoundingClientRect();
           const tr = tip.getBoundingClientRect();
           let leftPos = Math.round(r.left + (r.width - tr.width) / 2);
           leftPos = Math.max(8, Math.min(leftPos, window.innerWidth - tr.width - 8));
           let top = Math.round(r.top - tr.height - 10);
           if (top < 8) top = Math.round(r.bottom + 10);
           tip.style.transform = `translate(${leftPos}px, ${top}px)`;
       }

       function show(card) {
           tip.innerHTML = card.getAttribute('data-skin-tooltip') || ;
           tip.setAttribute('aria-hidden', 'false');
           place(card);
           tip.style.opacity = '1';
       }

       function hide() {
           tip.setAttribute('aria-hidden', 'true');
           tip.style.opacity = '0';
           tip.style.transform = 'translate(-9999px,-9999px)';
       }

       // ---------- Navegação (setas) ----------
       function scrollAmt() {
           return Math.round(carousel.clientWidth * 0.6);
       }

       function setState() {
           const max = carousel.scrollWidth - carousel.clientWidth;
           const x = carousel.scrollLeft;
           const hasLeft = x > 5;
           const hasRight = x < max - 5;
           if (left) left.style.display = hasLeft ? 'inline-block' : 'none';
           if (right) 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();

       // ---------- Click por carta (YouTube 1x) ----------
       const cards = Array.from(carousel.querySelectorAll('.skin-card'));
       cards.forEach(card => {
           card.setAttribute('tabindex', '0');
           if (card.dataset.youtube) card.setAttribute('role', 'button');

           card.addEventListener('click', (ev) => {
               const url = (card.dataset.youtube || ).trim();
               if (!url) return;
               if (card.dataset._opening === '1') return;
               card.dataset._opening = '1';
               ev.preventDefault();
               ev.stopPropagation();
               try { window.open(url, '_blank', 'noopener,noreferrer'); }
               catch (e) { location.href = url; }
               setTimeout(() => { delete card.dataset._opening; }, 400);
           });

           card.addEventListener('keydown', (ev) => {
               if (ev.key !== 'Enter' && ev.key !== ' ') return;
               const url = (card.dataset.youtube || ).trim();
               if (!url) return;
               if (card.dataset._opening === '1') return;
               card.dataset._opening = '1';
               ev.preventDefault();
               ev.stopPropagation();
               try { window.open(url, '_blank', 'noopener,noreferrer'); }
               catch (e) { location.href = url; }
               setTimeout(() => { delete card.dataset._opening; }, 400);
           });
       });

       // ---------- Hitbox real de hover ----------
       function setHovered(card) {
           if (hovered === card) { place(card); return; }
           if (hovered) hovered.classList.remove('hovered');
           carousel.classList.remove('hovering');
           carousel.querySelectorAll('.skin-card.dim').forEach(n => n.classList.remove('dim'));
           if (!card) { hovered = null; hide(); return; }
           hovered = card;
           hovered.classList.add('hovered');
           carousel.classList.add('hovering');
           carousel.querySelectorAll('.skin-card').forEach(n => { if (n !== hovered) n.classList.add('dim'); });
           show(card);
       }

       cards.forEach(card => {
           card.addEventListener('pointerenter', () => {
               if (card.hasAttribute('data-skin-tooltip')) setHovered(card);
               else setHovered(null);
           }, { passive: true });

           card.addEventListener('pointerleave', (ev) => {
               const toCard = ev.relatedTarget && ev.relatedTarget.closest && ev.relatedTarget.closest('.skin-card');
               if (toCard && carousel.contains(toCard)) return;
               setHovered(null);
           }, { passive: true });
       });

       carousel.addEventListener('pointerleave', () => { setHovered(null); }, { passive: true });
       window.addEventListener('scroll', () => { if (hovered) place(hovered); }, true);
       window.addEventListener('resize', () => { if (hovered) place(hovered); });
   })();

</script>

<style>

   .card-skins,
   .skins-carousel {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
       gap: 12px;
       align-items: start;
       justify-items: center;
       width: 100%;
       padding: 8px 4px;
       box-sizing: border-box;
       overflow-x: hidden;
   }

   .skin-card {
       position: relative;
       width: 100%;
       max-width: 240px;
       min-width: 120px;
       aspect-ratio: 1 / 1;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 7px 5px 10px rgb(0 0 0 / 45%);
       background: #0f0f12;
       display: grid;
       place-items: center;
       box-sizing: border-box;
   }

   .skin-card .skin-banner {
       position: absolute;
       inset: 0;
       z-index: 0;
       overflow: hidden;
   }

   .skin-card .skin-banner img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
       display: block;
   }

   .skin-card .skin-sprite {
       position: relative;
       z-index: 2;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 90%;
       height: 90%;
       pointer-events: none;
   }

   .skin-card .skin-sprite img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       transform-origin: center;
       transform: scale(1.02);
       display: block;
       filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
       box-shadow: 0 0 0 2px rgba(200, 200, 200, 0.85);
       border-radius: 8px;
   }

   @media (max-width: 820px) {

       .card-skins,
       .skins-carousel {
           grid-template-columns: repeat(auto-fill, minmax(120px, 160px));
           justify-content: center;
       }

       .skin-card {
           max-width: 200px;
       }
   }

   @media (max-width: 1100px) {
       .video-container {
           margin: 0 auto;
           justify-self: center;
           align-self: center;
           display: flex;
           justify-content: center;
       }

       .video-container>video {
           margin: 0 auto;
           display: block;
       }
   }

   @media (max-width: 600px) {
       .desc-box {
           overflow: visible !important;
           height: auto !important;
           min-height: 0 !important;
           align-items: stretch !important;
       }

       .card-skins,
       .skins-carousel {
           overflow: visible !important;
       }
   }

</style>