Widget:GuildAssets

<style>

   /* TabberNeue: mata o vazamento entre abas */
   .tabber__panel:not(.tabber__panel--active) {
       display: none !important;
   }

   .tabber__panel.tabber__panel--active {
       animation: utabTabIn 0.15s ease-out;
   }

   @keyframes utabTabIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   .utab {
       font-family: "Segoe UI", Arial, sans-serif;
       color: #e2ecff;
       padding: 12px 0 0;
       width: 100%;
       min-width: 0;
       overflow: hidden;
       box-sizing: border-box;
       position: relative;
   }

   .utab__section {
       display: none;
   }

   .utab__levels {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 16px;
   }

   .utab__levelBtn {
       border: 1px solid #274a74;
       background: #13243a;
       padding: 6px 12px;
       border-radius: 10px;
       font-weight: 600;
       color: #cfe1ff;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .utab__levelBtn:hover {
       border-color: #4a86d8;
       color: #ffffff;
   }

   .utab__levelBtn.is-active {
       background: #2e7dd7;
       border-color: #2e7dd7;
       color: #ffffff;
   }

   .utab--skin .utab__levelBtn {
       padding: 0;
       width: 22px;
       height: 22px;
       border-radius: 999px;
       font-size: 0;
       line-height: 1;
   }

   .utab__levelBtn:focus-visible {
       outline: 2px solid rgba(46, 125, 215, 0.4);
       outline-offset: 2px;
   }

   .utab__display {
       display: flex;
       gap: 18px;
       align-items: start;
       transition: opacity 0.35s ease, transform 0.35s ease;
       will-change: opacity, transform;
   }

   .utab__display.is-image-empty .utab__image {
       display: none;
   }

   .utab__display.is-fading {
       animation: utabFade 0.8s ease-in-out;
   }

   .utab__image {
       border-radius: 12px;
       border: 1px solid #203c5f;
       background: #0b1422;
       padding: 10px;
       flex-shrink: 0;
       max-width: 100%;
       display: flex;
       justify-content: center;
       box-sizing: border-box;
   }

   .utab__image img {
       display: block;
       height: auto;
       width: auto;
       max-width: 100%;
       border-radius: 8px;
   }

   .utab__image .utab-responsive-frame {
       width: 100%;
       max-width: 100%;
       margin: 0 auto;
       padding: 0;
       background: transparent;
       box-shadow: none;
       box-sizing: border-box;
   }

   .utab__image .utab-responsive-frame .thumbinner,
   .utab__image .utab-responsive-frame .thumb,
   .utab__image .utab-responsive-frame figure,
   .utab__image .utab-responsive-frame .mw-file-description {
       max-width: 100% !important;
       width: 100% !important;
       padding: 0 !important;
       margin: 0 auto !important;
       border: 0 !important;
       background: transparent !important;
       box-shadow: none !important;
       box-sizing: border-box;
   }

   .utab__image .utab-responsive-frame img {
       display: block !important;
       max-width: 100% !important;
       width: 100% !important;
       height: auto !important;
       margin: 0 auto !important;
       border: 0 !important;
       border-radius: 8px;
   }

   .utab__image.is-empty {
       display: none;
   }

   .utab__stats {
       display: flex;
       flex-direction: column;
       gap: 10px;
       color: #dbe7ff;
       font-size: 14px;
       flex: 1;
       min-width: 0;
   }

   .utab__stat {
       background: #13243a;
       border: 1px solid #274a74;
       border-radius: 10px;
       padding: 10px 12px;
   }

   .utab--skin .utab__stats {
       display: none;
   }

   .utab__statTitle {
       font-weight: 700;
       color: #8bb8ff;
   }

   .utab__statList {
       margin: 6px 0 0;
       padding-left: 18px;
       display: grid;
       gap: 2px;
       list-style: disc;
       list-style-position: outside;
   }

   .utab__statList li {
       display: list-item;
       text-align: left;
   }

   .utab__descContent {
       margin-top: 6px;
       line-height: 1.5;
   }

   .utab__descContent ul,
   .utab__descContent ol {
       margin: 4px 0;
       padding-left: 18px;
   }

   .utab__descContent li {
       display: list-item;
   }

   .utab__descContent p {
       margin: 4px 0;
   }

   .utab__descContent h1,
   .utab__descContent h2,
   .utab__descContent h3,
   .utab__descContent h4,
   .utab__descContent h5,
   .utab__descContent h6 {
       color: #a0c4ff;
       border-bottom: none;
       margin: 8px 0 4px;
   }

   .utab__costRow {
       position: relative;
   }

   .utab__costBerry,
   .utab__costGems,
   .utab__costPoints {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-weight: 700;
       line-height: 1.1;
       font-size: 15px;
   }

   .utab__costBerry {
       color: #ffd166;
   }

   .utab__costGems {
       color: #57d889;
   }

   .utab__costPoints {
       color: #a6b0bf;
   }

   @keyframes utabFade {
       from {
           opacity: 0;
           transform: translateY(8px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @media (max-width: 600px) {
       .utab--skin .utab__levels {
           justify-content: center;
       }

       .utab--skin .utab__levelBtn {
           width: 28px;
           height: 28px;
       }

       .utab__display {
           flex-direction: column-reverse;
       }

       .utab__image {
           max-width: 100%;
           order: -1;
       }
   }

   @media (max-width: 900px) {
       .utab__display {
           gap: 24px;
       }

       .utab__image {
           max-width: 45%;
       }

       .utab__stats {
           gap: 14px;
       }

       .utab__stat {
           padding: 12px 14px;
       }
   }

</style>

<script>

   (function () {
       /* Garante que o script só roda UMA VEZ mesmo carregado N vezes */
       if (window.__utabLoaded) return;
       window.__utabLoaded = true;

       function handleArrowNavigation(event, buttons, activate) {
           var keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
           if (keys.indexOf(event.key) === -1) return;
           event.preventDefault();
           var currentIndex = buttons.indexOf(document.activeElement);
           if (currentIndex === -1) return;
           var nextIndex = currentIndex;
           if (event.key === "Home") nextIndex = 0;
           else if (event.key === "End") nextIndex = buttons.length - 1;
           else if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
           else if (event.key === "ArrowRight" || event.key === "ArrowDown") nextIndex = (currentIndex + 1) % buttons.length;
           activate(nextIndex, true);
       }

       function triggerFade(element) {
           element.classList.remove("is-fading");
           element.offsetWidth;
           element.classList.add("is-fading");
       }

       var upgradeCosts = [
           { level: 1, berries: "50.000", gems: null, points: "400" },
           { level: 2, berries: "250.000", gems: "10", points: "1.500" },
           { level: 3, berries: "400.000", gems: "20", points: "3.000" },
           { level: 4, berries: "1.000.000", gems: "50", points: "12.500" },
           { level: 5, berries: "1.800.000", gems: "90", points: "28.000" }
       ];

       function shouldRebuild(utab) {
           var levelCount = utab.querySelectorAll(".utab__level").length;
           var buttonCount = utab.querySelectorAll(".utab__levelBtn").length;
           return levelCount > 0 && levelCount !== buttonCount;
       }

       function cleanupUI(utab) {
           var nav = utab.querySelector(".utab__levels");
           if (nav) nav.remove();
           var display = utab.querySelector(".utab__display");
           if (display) display.remove();
       }

       function buildLevelUI(utab, force) {
           if (utab.getAttribute("data-utab-init") && !force) return;
           if (force) cleanupUI(utab);
           utab.setAttribute("data-utab-init", "1");
           var section = utab.querySelector(".utab__section");
           if (!section) return;
           var levelElements = [].slice.call(section.querySelectorAll(".utab__level"));
           if (!levelElements.length) return;
           var label = section.getAttribute("data-tab") || "Níveis";
           var isSkin = utab.getAttribute("data-utab-skin") === "1";

           var levels = levelElements.map(function (el, i) {
               var num = el.getAttribute("data-level") || String(i + 1);
               var skinName = el.getAttribute("data-skin-name") || "";
               var img = el.querySelector(".utab__mediaImage");
               var desc = el.querySelector(".utab__desc");
               return {
                   level: num,
                   name: skinName,
                   imageHtml: img ? img.innerHTML.trim() : "",
                   descHtml: desc ? desc.innerHTML.trim() : ""
               };
           });

           var nav = document.createElement("div");
           nav.className = "utab__levels";
           nav.setAttribute("role", "tablist");
           nav.setAttribute("aria-label", "Níveis de " + label);

           var display = document.createElement("div");
           display.className = "utab__display";
           var imageWrap = document.createElement("div");
           imageWrap.className = "utab__image";
           var stats = document.createElement("div");
           stats.className = "utab__stats";
           display.appendChild(imageWrap);
           display.appendChild(stats);

           utab.appendChild(nav);
           utab.appendChild(display);

           var buttons = levels.map(function (level, i) {
               var btn = document.createElement("button");
               btn.type = "button";
               btn.className = "utab__levelBtn";
               if (isSkin) {
                   var name = level.name || ("Skin " + (i + 1));
                   btn.setAttribute("aria-label", name);
                   btn.setAttribute("title", name);
               } else {
                   btn.textContent = "Nv " + level.level;
               }
               btn.setAttribute("role", "tab");
               btn.setAttribute("aria-selected", "false");
               btn.setAttribute("tabindex", "-1");
               nav.appendChild(btn);
               return btn;
           });

           var activeIndex = -1;

           buttons.forEach(function (btn, index) {
               btn.addEventListener("click", function () { activateLevel(index, true); });
               btn.addEventListener("keydown", function (e) { handleArrowNavigation(e, buttons, activateLevel); });
           });

           function activateLevel(index, shouldFocus) {
               if (!levels.length) return;
               var safe = Math.max(0, Math.min(index, levels.length - 1));
               if (safe === activeIndex) {
                   if (shouldFocus) buttons[safe].focus();
                   return;
               }
               var current = levels[safe];

               buttons.forEach(function (btn, i) {
                   var active = i === safe;
                   btn.classList.toggle("is-active", active);
                   btn.setAttribute("aria-selected", active ? "true" : "false");
                   btn.setAttribute("tabindex", active ? "0" : "-1");
               });

               if (current.imageHtml) {

imageWrap.innerHTML = '

' + current.imageHtml + "

";

                   imageWrap.classList.remove("is-empty");
                   display.classList.remove("is-image-empty");
               } else {
                   imageWrap.innerHTML = "";
                   imageWrap.classList.add("is-empty");
                   display.classList.add("is-image-empty");
               }

               var levelNum = parseInt(current.level, 10);
               var cost = isSkin
                   ? null
                   : upgradeCosts.filter(function (c) { return c.level === levelNum; })[0];
               var costTitle = "Custos de Melhoria";
               var costHtml = cost

 ? '

' + costTitle + '

' + '
• ' + cost.berries + ' Berries
' + (cost.gems ? '
• ' + cost.gems + ' Gemas
' : ) + '
• ' + cost.points + ' Pontos de Aliança
' + '

'

                   : "";

               var infoHtml = (!isSkin && current.descHtml)

 ? '

Informações

' + current.descHtml + '

'

                   : "";

               stats.innerHTML = infoHtml + costHtml;
               triggerFade(display);
               activeIndex = safe;

               if (shouldFocus) buttons[safe].focus();
           }

           activateLevel(0, false);
       }

       function initWidgets() {
           [].slice.call(document.querySelectorAll(".utab")).forEach(function (utab) {
               if (utab.getAttribute("data-utab-init")) {
                   if (shouldRebuild(utab)) {
                       buildLevelUI(utab, true);
                   }
                   return;
               }
               buildLevelUI(utab, false);
           });
       }

       /* Roda quando DOM estiver pronto */
       if (document.readyState === "loading") {
           document.addEventListener("DOMContentLoaded", initWidgets);
       } else {
           initWidgets();
       }

       window.addEventListener("load", initWidgets);

       document.addEventListener("click", function (event) {
           if (!event.target.closest(".tabber__tab")) return;
           window.setTimeout(initWidgets, 0);
       });

       /* Observa novos .utab que apareçam depois (ex: tabber lazy-load) */
       if (window.MutationObserver) {
           new MutationObserver(function () { initWidgets(); })
               .observe(document.documentElement, { childList: true, subtree: true });
       }
   })();

</script>