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);
       }
       // Smoothly remove placeholder; use transitionend if available, with timeout fallback
       const removePlaceholderSmooth = () => {
           if (!placeholder) return;
           // If already fading, do nothing
           if (placeholder.classList.contains('fade-out')) return;
           placeholder.classList.add('fade-out');
           let removed = false;
           const clean = () => {
               if (removed) return;
               removed = true;
               try { placeholder.remove(); } catch (e) { /* ignore */ }
               placeholder = null;
           };
           // Remove on transitionend if possible
           placeholder.addEventListener('transitionend', clean, { once: true });
           // Fallback: ensure removal after 400ms
           setTimeout(clean, 450);
       };

       // 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) {
           // no videos -> remove placeholder immediately
           if (placeholder) { placeholder.remove(); placeholder = null; }
       }

       // 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 video is ready or becomes ready, ensure placeholder is removed
                           try {
                               // if video is already playable, remove placeholder immediately
                               if (v.readyState >= 3) removePlaceholderSmooth();
                           } catch (e) {}
                           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],
           ];

                           // Put empty rows above visible rows so visible attributes sit
                           // directly below the title/description (no gap between desc and attrs).
                           const visible = rows.filter(([, v]) => v !== '-');
                           const empties = rows.length - visible.length;

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

           `).join();

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

                   ${label}:
                   ${value}

           `).join();

                           // if there are no visible attributes, keep one empty row to preserve layout
                           if (visible.length === 0) {

return `

${emptyHtml || `\n

\n  \n  \n

\n `}

`;

                           }

return `

${emptyHtml}${visibleHtml}

`;

       }
           // ====== Dynamic structure: create top-rail and content-card without rewriting HTML ======
           const mk = (tag, cls, text) => {
               const el = document.createElement(tag);
               if (cls) el.className = cls;
               if (text) el.textContent = text;
               return el;
           };

           try {
               // Skills tab: rail variant with only icons (no title)
               if (skillsTab) {
                   const iconBarNode = iconsBar; // existing node
                   const skillsDetails = skillsTab.querySelector('.skills-details');
                   const videoContainer = skillsTab.querySelector('.video-container');

                   const skillsRail = mk('div','top-rail skills');
                   if (iconBarNode) {
                       // move iconBar into rail (preserve node)
                       skillsRail.append(iconBarNode);
                   }

                   // create larger content card and move nodes inside
                   const card = mk('div','content-card skills-grid');
                   if (skillsDetails) card.append(skillsDetails);
                   if (videoContainer) card.append(videoContainer);

                   // insert rail and card into skillsTab
                   skillsTab.prepend(skillsRail);
                   skillsTab.append(card);
                       // placeholder might have been created before we moved nodes; if so,
                       // ensure it's appended to the (now moved) videoContainer so positioning is correct
                       try {
                           const newVideoContainer = skillsTab.querySelector('.video-container');
                           if (newVideoContainer && placeholder && placeholder.parentNode !== newVideoContainer) {
                               newVideoContainer.appendChild(placeholder);
                           }
                       } catch (e) { /* ignore */ }
               }

               // Skins tab
               const skinsTab = $('#skins');
               if (skinsTab) {
                   const skinsWrapper = skinsTab.querySelector('.skins-carousel-wrapper');
                   const skinsRail = mk('div','top-rail skins');
                   skinsRail.append(mk('div','rail-title','Skins & Spotlights'));
                   const card2 = mk('div','content-card');
                   if (skinsWrapper) card2.append(skinsWrapper);
                   skinsTab.prepend(skinsRail);
                   skinsTab.append(card2);
               }
           } catch (e) {
               // fail silently — DOM structure assumed, don't break page
               console.error('widget layout script error', e);
           }
   })();

</script>

<style>

   /* ===========================
  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
  =========================== */
   /* Hide the original banner element (we'll use the image as the template background)
      and keep the selector so existing markup doesn't break. */
   .banner { display: none !important; }

   /* Use the banner image as the background for the template container and add
      a subtle dark overlay via ::before to improve text contrast. */
   .character-box {
       /* ...existing properties... */
       background-image: url(https://i.imgur.com/RktmgO8.png);
       background-position: center top;
       background-repeat: no-repeat;
       background-size: cover;
       position: relative; /* ensure positioning context for ::before */
       z-index: 1; /* base layer for the box content */
   }

   /* overlay sits above the background image but below the content; darker bottom-to-top gradient */
   .character-box::before {
       content: "";
       position: absolute;
       inset: 0;
       pointer-events: none;
       background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.60));
       z-index: 0; /* overlay: below content (content kept at z-index:1) */
   }

   /* ===========================
  Character 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;
   z-index: 1; /* topbar above overlay */
   }

   .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; /* artwork must not 'vazar' */
       display: flex;
       gap: 10px;
       flex-direction: column;
       z-index: 1; /* header/topbar layer */
   }

   /* Artwork anchored to bottom-right of the header, fixed offsets and max sizes */
   .character-art {
       width: auto;
       height: auto;
       max-width: min(42vw, 620px);
       max-height: min(62vh, 560px);
       position: absolute;
       right: clamp(12px, 2.5vw, 32px);
       bottom: 0;
       object-fit: contain;
       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: 2; /* content layer */
   }

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

   /* ===========================
  Skills 
  =========================== */
   .skills-container {
       display: flex;
       gap: 20px;
   }

   .skills-details {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: auto; /* let grid control widths */
       justify-content: center;
   }

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

   :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 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 */
   /* Description box: remove own card background/shadow so it doesn't stack
      on top of the outer .content-card. The .content-card remains the main
      visual container. Keep padding and readable colors. */
   .desc-box {
       min-height: 28.89rem;
       height: 100%;
       padding: 12px 18px; /* slightly larger padding for breathing room */
       background: transparent; /* flatten nested box */
       border-radius: 6px;
       position: relative;
       box-shadow: none; /* remove inner shadow */
       color: #fff;
       transition: all .3s ease;
       z-index: 2; /* keep above overlay but below placeholders if needed */
       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;
   }

   :root {
       --skill-pane-height: 36rem; /* base height (kept for legacy/consistency) */
   }

   .skills-container {
       align-items: stretch;
   }

   /* Video container: allow the video to display at its original size
      while keeping it responsive (max-width:100%). Remove extra inner
      shadows so the .content-card is the primary card. Center content. */
   .video-container {
       position: relative;
       flex: 0 0 auto;
       width: 100%;
       max-width: 100%;
       height: 100%; /* fill the grid row height */
       background: transparent; /* flattened */
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 10px;
       box-shadow: none;
       overflow: hidden; /* for rounded corners */
       padding: 0; /* remove internal padding so video can fill column */
       z-index: 2; /* content layer */
   }

   .desc-box {
       min-height: var(--skill-pane-height);
       z-index: 2; /* content layer */
   }

   /* Keep the video's original aspect and size. Constrain by max-width
      so it never overflows its container, but avoid object-fit that crops. */
   .video-container>video {
       position: relative;
       width: 100%;
       height: 100%;
       max-width: 100%;
       object-fit: contain; /* scale inside the column preserving aspect */
       object-position: center;
       z-index: 2; /* video is part of content */
       display: block;
       border-radius: 6px; /* round the video itself */
   }

   /* Center the placeholder/logo while videos load. Keep it as an overlay
      so it doesn't shift layout. */
   .video-placeholder {
       position: absolute;
       inset: 0;
       z-index: 6; /* placeholders/overlays above content */
       display: flex;
       align-items: center;
       justify-content: center;
       pointer-events: none;
       opacity: 1;
       transition: opacity .28s ease; /* ensure transition exists before class is added */
   }

   .video-placeholder img {
       max-width: 160px;
       width: auto;
       height: auto;
       opacity: 0.98;
       display: block;
   }

   /* fade-out helper used by JS removePlaceholder() */
   .video-placeholder.fade-out {
       opacity: 0;
   }

   @media (max-width:1100px),
   (max-aspect-ratio:3/4) {
       .video-container {
           width: 80%;
           max-width: 820px;
           height: auto;
           aspect-ratio: 16 / 9;
           margin: 2% auto 0;
           border-radius: 3%;
       }

       .desc-box {
           min-height: unset;
       }
   }

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

   /* Top rail: created dynamically by JS; styles for tabs header */
   .top-rail {
       display:flex;
       align-items:center;
       justify-content:center;
       width:max-content;
       max-width:96vw;
       margin:8px auto;
       padding:8px 12px;
       background:rgba(0,0,0,.55);
       border:2px solid rgba(255,255,255,.08);
       border-radius:12px;
       box-shadow:0 4px 12px rgba(0,0,0,.25);
       -webkit-backdrop-filter:blur(2px);
       backdrop-filter:blur(2px);
   }

   /* hide title by default (skills rail won't show it) */
   .top-rail .rail-title { display:none; }

   /* skins variant shows the title at left */
   .top-rail.skins .rail-title {
       display:block;
       font-weight:800;
       font-size:clamp(20px,2.2vw,28px);
       color:#fff;
       margin-right:auto;
   }

   /* center icons and keep scroll behavior if overflow */
   .top-rail .icon-bar {
       width:auto;
       justify-content:center;
       margin:0;
       overflow-x:auto; /* preserve horizontal scroll */
   }

   .content-card {
       width: min(1360px, 98%);
       margin: 10px auto;
       background: #26211C;
       border-radius: 12px;
       box-shadow: 0 8px 24px rgba(0,0,0,.30);
       padding: 18px;
       z-index: 2; /* above overlay */
   }

   /* layout specific for skills card: larger grid */
   /* Make the video column wider so the video has more space. */
   .content-card.skills-grid {
       display:grid;
       grid-template-columns: 44% 56%; /* description | video (wider) */
       gap:16px;
       align-items: stretch; /* make both columns equal height */
       grid-auto-rows: 1fr;
       margin: 10px auto 0; /* remove extra bottom spacing */
   }

   @media (max-width:1100px) {
       .top-rail {
           flex-direction: column;
           align-items: stretch;
       }
       .top-rail .icon-bar {
           order: 2;
           width: 100%;
           flex-wrap: wrap;
       }
       .content-card.skills-grid {
           grid-template-columns: 1fr;
       }
   }

   /* ===========================
  Skins
  =========================== */
   .card-skins {
       border-radius: 12px;
       user-select: none;
   }

   /* Title */
   .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: transparent; /* flattened to avoid nested cards */
   border-radius: 8px;
   position: relative;
   box-shadow: none;
   color: #fff;
   transition: all .3s ease;
   display: flex;
   gap: 10px;
   justify-content: center;
   align-items: center;
   overflow: visible;
   z-index: 2;
   }

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