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

Edição atual tal como às 17h28min de 7 de fevereiro de 2026

{literal} <style>

   .utab {
       font-family: "Segoe UI", Arial, sans-serif;
       color: #e2ecff;
       padding: 24px;
       width: 100%;
       max-width: 1200px;
       margin: 24px auto;
   }

   .utab__section {
       background: #0f1b2d;
       border-radius: 14px;
       padding: 20px;
       border: 1px solid #203c5f;
       box-shadow: 0 10px 24px rgba(7, 14, 26, 0.35);
       display: block;
   }

   .utab__level {
       display: block;
   }

   .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__levelBtn:focus-visible {
       outline: 2px solid rgba(46, 125, 215, 0.4);
       outline-offset: 2px;
   }

   .utab__display {
       display: grid;
       grid-template-columns: auto 1fr;
       gap: 18px;
       align-items: start;
   }

   .utab__display.is-image-empty {
       grid-template-columns: 1fr;
   }

   .utab__display.is-fading {
       animation: utabFade 0.25s ease;
   }

   .utab__image {
       border-radius: 12px;
       border: 1px solid #203c5f;
       background: #0b1422;
       padding: 10px;
   }

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

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

   .utab__stats {
       display: grid;
       grid-template-columns: 1fr;
       gap: 10px;
       color: #dbe7ff;
       font-size: 14px;
   }

   .utab__stats>.utab__stat {
       grid-column: 1 / -1;
   }

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

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

   .utab__costIcon {
       display: none;
   }

   .utab__costBerry .utab__costIcon,
   .utab__costGems .utab__costIcon,
   .utab__costPoints .utab__costIcon,
   .utab__costBerry .utab__costText,
   .utab__costGems .utab__costText,
   .utab__costPoints .utab__costText {
       transform: none;
   }

   .utab__level--source {
       display: none;
   }

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

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

   @media (max-width: 720px) {
       .utab {
           padding: 16px;
       }

       .utab__display {
           grid-template-columns: 1fr;
       }
   }

</style> {/literal}

{assign var=section value=$section|default:$1|lower}

   {if !$section || $section == "designer"}
   <section class="utab__section" data-tab="Designer">

Arquivo:Designer lvl1.png

1 pilar de artefato disponível
27 símbolos disponíveis
1 plano de fundo disponível
6 cores disponíveis
2% de EXP
4% de sorte
5% de pontos de aliança

Arquivo:Designer lvl2.png

2 pilares de artefato disponíveis
9 planos de fundo disponíveis
47 símbolos disponíveis
12 cores disponíveis
4% de EXP
9% de sorte
12% de pontos de aliança

Arquivo:Designer lvl3.png

2 pilares de artefato disponíveis
34 planos de fundo disponíveis
72 símbolos disponíveis
30 cores disponíveis
6% de EXP
15% de sorte
22% de pontos de aliança

Arquivo:Designer lvl4.png

3 pilares de artefato disponíveis
34 planos de fundo disponíveis
92 símbolos disponíveis
30 cores disponíveis
8% de EXP
22% de sorte
35% de pontos de aliança

Arquivo:Designer lvl5.png

4 pilares de artefato disponíveis
34 planos de fundo disponíveis
112 símbolos disponíveis
30 cores disponíveis
10% de EXP
30% de sorte
50% de pontos de aliança

   </section>
   {/if}
   {if !$section || $section == "cofre"}
   <section class="utab__section" data-tab="Cofre">

Arquivo:Cofre lvl1.png

10% de bônus pra aliança

Arquivo:Cofre lvl2.png

+ 100 espaços extra no cofre
25% de bônus pra aliança

Arquivo:Cofre lvl3.png

+ 200 espaços extra no cofre
45% de bônus pra aliança

Arquivo:Cofre lvl4.png

+ 300 espaços extra no cofre
75% de bônus pra aliança

Arquivo:Cofre lvl5.png

+ 400 espaços extra no cofre
100% de bônus pra aliança

   </section>
   {/if}
   {if !$section || $section == "salao principal"}
   <section class="utab__section" data-tab="Salão Principal">

Arquivo:SalaoPrincipal lvl1.png

Descrição do nível 1

Arquivo:SalaoPrincipal lvl2.png

Descrição do nível 2

Arquivo:SalaoPrincipal lvl3.png

Descrição do nível 3

Arquivo:SalaoPrincipal lvl4.png

Descrição do nível 4

Arquivo:SalaoPrincipal lvl5.png

Descrição do nível 5

   </section>
   {/if}
   {if !$section || $section == "quartos"}
   <section class="utab__section" data-tab="Quartos">

Arquivo:Quartos lvl1.png

Descrição do nível 1

Arquivo:Quartos lvl2.png

Descrição do nível 2

Arquivo:Quartos lvl3.png

Descrição do nível 3

Arquivo:Quartos lvl4.png

Descrição do nível 4

Arquivo:Quartos lvl5.png

Descrição do nível 5

   </section>
   {/if}
   {if !$section || $section == "sala de guerra"}
   <section class="utab__section" data-tab="Sala de Guerra">

Arquivo:SalaDeGuerra lvl1.png

Descrição do nível 1

Arquivo:SalaDeGuerra lvl2.png

Descrição do nível 2

Arquivo:SalaDeGuerra lvl3.png

Descrição do nível 3

Arquivo:SalaDeGuerra lvl4.png

Descrição do nível 4

Arquivo:SalaDeGuerra lvl5.png

Descrição do nível 5

   </section>
   {/if}
   {if !$section || $section == "treinamento"}
   <section class="utab__section" data-tab="Treinamento">

Arquivo:Treinamento lvl1.png

Descrição do nível 1

Arquivo:Treinamento lvl2.png

Descrição do nível 2

Arquivo:Treinamento lvl3.png

Descrição do nível 3

Arquivo:Treinamento lvl4.png

Descrição do nível 4

Arquivo:Treinamento lvl5.png

Descrição do nível 5

   </section>
   {/if}
   {if !$section || $section == "ferreiro"}
   <section class="utab__section" data-tab="Ferreiro">

Arquivo:Ferreiro lvl1.png

Descrição do nível 1

Arquivo:Ferreiro lvl2.png

Descrição do nível 2

Arquivo:Ferreiro lvl3.png

Descrição do nível 3

Arquivo:Ferreiro lvl4.png

Descrição do nível 4

Arquivo:Ferreiro lvl5.png

Descrição do nível 5

   </section>
   {/if}
   {if !$section || $section == "cozinha"}
   <section class="utab__section" data-tab="Cozinha">

Arquivo:Cozinha lvl1.png

Descrição do nível 1

Arquivo:Cozinha lvl2.png

Descrição do nível 2

Arquivo:Cozinha lvl3.png

Descrição do nível 3

Arquivo:Cozinha lvl4.png

Descrição do nível 4

Descrição do nível 5

   </section>
   {/if}

{literal} <script>

   function handleArrowNavigation(event, buttons, activate) {
       const keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
       if (!keys.includes(event.key)) {
           return;
       }

       event.preventDefault();
       const currentIndex = buttons.findIndex((button) => button === document.activeElement);
       if (currentIndex === -1) {
           return;
       }

       let 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");
       void element.offsetWidth;
       element.classList.add("is-fading");
   }

   function hasWikitext(value) {
       return typeof value === "string" && (value.includes("[[") || value.includes("{{"));
   }

   function hasStatWrapper(html) {
       if (typeof html !== "string") {
           return false;
       }
       return /class=["'][^"']*\butab__stat\b/.test(html);
   }

   function parseWikitextCached(raw, cacheKey, target) {
       if (!raw || !hasWikitext(raw)) {
           return Promise.resolve(raw);
       }
       if (target[cacheKey]) {
           return Promise.resolve(target[cacheKey]);
       }
       if (!window.mw || !mw.Api) {
           return Promise.resolve(raw);
       }

       const api = new mw.Api();
       return api
           .post({
               action: "parse",
               text: raw,
               contentmodel: "wikitext",
               prop: "text",
               formatversion: 2
           })
           .then((response) => {
               const html = response?.parse?.text || response?.parse?.text?.["*"] || raw;
               target[cacheKey] = html;
               return html;
           })
           .catch(() => raw);
   }

   const upgradeCosts = [
       { level: 1, berries: "50.000", gems: "10", 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 buildLevelUI(section) {
       const levelElements = Array.from(section.querySelectorAll(".utab__level"));
       if (!levelElements.length) {
           return;
       }

       const label = section.dataset.tab || "Níveis";
       const levels = levelElements.map((levelElement, index) => {
           const levelNumber = levelElement.dataset.level || String(index + 1);
           const contentElement = levelElement.querySelector(".utab__content") || levelElement;
           const rawHtml = contentElement.innerHTML.trim();
           const contentWrapper = document.createElement("div");
           contentWrapper.innerHTML = rawHtml;
           const mediaImage = contentWrapper.querySelector(".utab__mediaImage");
           const imageHtml = mediaImage ? mediaImage.innerHTML.trim() : "";
           if (mediaImage) {
               mediaImage.remove();
           }
           const statsHtml = contentWrapper.innerHTML.trim();

           return {
               level: levelNumber,
               imageHtml,
               statsHtml
           };
       });

       levelElements.forEach((levelElement) => {
           levelElement.classList.add("utab__level--source");
       });

       const nav = document.createElement("div");
       nav.className = "utab__levels";
       nav.setAttribute("role", "tablist");
       nav.setAttribute("aria-label", `Níveis de ${label}`);

       const display = document.createElement("div");
       display.className = "utab__display";

       const imageWrap = document.createElement("div");
       imageWrap.className = "utab__image";

       const stats = document.createElement("div");
       stats.className = "utab__stats";

       display.appendChild(imageWrap);
       display.appendChild(stats);

       const buttons = levels.map((level, index) => {
           const button = document.createElement("button");
           button.type = "button";
           button.className = "utab__levelBtn";
           button.textContent = `Nv ${level.level}`;
           button.setAttribute("role", "tab");
           button.setAttribute("aria-selected", "false");
           button.setAttribute("tabindex", "-1");
           button.addEventListener("click", () => activateLevel(index, true));
           button.addEventListener("keydown", (event) => handleArrowNavigation(event, buttons, activateLevel));
           nav.appendChild(button);
           return button;
       });

       section.prepend(display);
       section.prepend(nav);

       let renderToken = 0;

       function activateLevel(index, shouldFocus) {
           if (!levels.length) {
               return;
           }

           const safeIndex = Math.max(0, Math.min(index, levels.length - 1));
           const current = levels[safeIndex];
           const token = ++renderToken;

           buttons.forEach((button, buttonIndex) => {
               const isActive = buttonIndex === safeIndex;
               button.classList.toggle("is-active", isActive);
               button.setAttribute("aria-selected", isActive ? "true" : "false");
               button.setAttribute("tabindex", isActive ? "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");
           }

           const levelNumber = Number(current.level);
           const cost = upgradeCosts.find((item) => item.level === levelNumber);
           const costHtml = cost
               ? `

Custo do upgrade

${cost.berries} berries
${cost.gems} gemas
${cost.points} pontos

               `
               : "";
           const statsBodyHtml = current.statsHtml
               ? (hasStatWrapper(current.statsHtml)
                   ? current.statsHtml
                   : `

Informações

                           ${current.statsHtml}

                   `)
               : "";

           stats.innerHTML = `${statsBodyHtml}${costHtml}`;
           triggerFade(display);

           const shouldParse =
               (current.imageHtml && hasWikitext(current.imageHtml)) ||
               (current.statsHtml && hasWikitext(current.statsHtml));

           if (shouldParse) {
               Promise.all([
                   parseWikitextCached(current.imageHtml, "parsedImageHtml", current),
                   parseWikitextCached(current.statsHtml, "parsedStatsHtml", current)
               ]).then(([parsedImage, parsedStats]) => {
                   if (renderToken !== token) {
                       return;
                   }
                   if (parsedImage && parsedImage !== current.imageHtml) {
                       imageWrap.innerHTML = parsedImage;
                       imageWrap.classList.remove("is-empty");
                       display.classList.remove("is-image-empty");
                   }
                   if (parsedStats && parsedStats !== current.statsHtml) {
                       const parsedBodyHtml = hasStatWrapper(parsedStats)
                           ? parsedStats
                           : `

Informações

                                   ${parsedStats}

                           `;
                       stats.innerHTML = `${parsedBodyHtml}${costHtml}`;
                   }
               });
           }

           if (shouldFocus) {
               buttons[safeIndex].focus();
           }
       }

       activateLevel(0, false);
   }

   function initWidgets() {
       document.querySelectorAll(".utab").forEach((widget) => {
           widget.querySelectorAll(".utab__section").forEach(buildLevelUI);
       });
   }

   if (document.readyState === "loading") {
       document.addEventListener("DOMContentLoaded", initWidgets);
   } else {
       initWidgets();
   }

</script> {/literal}

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

Edição atual tal como às 17h28min de 7 de fevereiro de 2026

Menu de navegação

Pesquisa

@@ Linha 1: / Linha 1: @@
-/*******************************************************************************
+{literal}
- * TEMA ESCURO MODERNO - WIKI GLA
+<style>
- * Estilo wiki.gg com paleta personalizada
+    .utab {
- * Substitua seu Common.css por este arquivo
+        font-family: "Segoe UI", Arial, sans-serif;
- *******************************************************************************/
+        color: #e2ecff;
+        padding: 24px;
+        width: 100%;
+        max-width: 1200px;
+        margin: 24px auto;
+    }
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');
+    .utab__section {
+        background: #0f1b2d;
+        border-radius: 14px;
+        padding: 20px;
+        border: 1px solid #203c5f;
+        box-shadow: 0 10px 24px rgba(7, 14, 26, 0.35);
+        display: block;
+    }
-/*******************************************************************************
+     .utab__level {
- * SISTEMA DE VARIÁVEIS - PALETA ESCURA
+        display: block;
- *******************************************************************************/
+     }
-:root {
-    /* Backgrounds */
-    --page-bg: #14161b;
-     --content-bg: #1f2229;
-    --content-bg-alt: #242831;
-    --surface-bg: #2a2f38;
-    /* Borders & Shadows */
-    --border-color: #2d313a;
-    --border-light: #343a46;
-    --shadow-color: rgba(0, 0, 0, 0.45);
-    --content-shadow: 0 8px 22px var(--shadow-color);
-    /* Text */
-    --text-primary: #e7ebf2;
-    --text-secondary: #b7bfcc;
-    --text-muted: #8891a0;
-    /* Links */
-    --link-color: #7ec8ff;
-    --link-visited: #9aa9ff;
-    --link-hover: #a7e0ff;
-    --link-new: #ff6b6b;
-    /* Accent Colors */
-    --accent-primary: #459cca;
-    --accent-secondary: #5684c8;
-    --accent-gradient: linear-gradient(135deg, #459cca 0%, #5684c8 100%);
-    /* Tables */
-    --table-bg: #242831;
-    --table-header: #2d313a;
-    --table-border: #343a46;
-    --table-hover: #2a303b;
-    --table-stripe: #262b34;
-    /* Forms */
-    --input-bg: #242831;
-    --input-border: #3d4450;
-    --input-focus: #459cca;
-    /* Scrollbar */
-    --scrollbar-track: #1f2229;
-    --scrollbar-thumb: #3d4450;
-     --scrollbar-hover: #4a5263;
-    /* Legacy compatibility */
-    --content-text: var(--text-primary);
-    --simpleSearch-bg: var(--input-bg);
-    --searchInput-text: var(--text-secondary);
-    --lightGray: var(--surface-bg);
-    --gray: var(--border-light);
-    --transparent-blue: rgba(69, 156, 202, 0.3);
-    --blue: #459cca;
-}
-/*******************************************************************************
+    .utab__levels {
- * BASE & BODY
+        display: flex;
- *******************************************************************************/
+        flex-wrap: wrap;
-html {
+        gap: 8px;
-    scroll-behavior: smooth;
+        margin-bottom: 16px;
-}
+    }
-body {
+    .utab__levelBtn {
-    background-color: var(--page-bg);
+        border: 1px solid #274a74;
-    color: var(--text-primary);
+        background: #13243a;
-    font-family: 'Noto Sans', sans-serif;
+        padding: 6px 12px;
-}
+        border-radius: 10px;
+        font-weight: 600;
+        color: #cfe1ff;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
-/* Remove imagem de fundo clara */
+    .utab__levelBtn:hover {
-body::before {
+        border-color: #4a86d8;
-    display: none !important;
+        color: #ffffff;
-}
+    }
-/*******************************************************************************
+    .utab__levelBtn.is-active {
- * TIPOGRAFIA
+        background: #2e7dd7;
- *******************************************************************************/
+        border-color: #2e7dd7;
-body,
+        color: #ffffff;
-.mw-parser-output,
+    }
-.mw-headline,
-#firstHeading,
-h1, h2, h3, h4, h5, h6,
-p, ul, ol, li,
-table, td, th, caption {
-    font-family: 'Noto Sans', sans-serif !important;
-    color: var(--text-primary);
-}
-h1, h2, h3, h4, h5, h6 {
+    .utab__levelBtn:focus-visible {
-    color: var(--text-primary) !important;
+        outline: 2px solid rgba(46, 125, 215, 0.4);
-    border-bottom: none !important;
+        outline-offset: 2px;
-}
+    }
-.mw-headline {
+    .utab__display {
-    border-bottom: none !important;
+        display: grid;
-}
+        grid-template-columns: auto 1fr;
+        gap: 18px;
+        align-items: start;
+    }
-#firstHeading {
+    .utab__display.is-image-empty {
-    border-bottom: none !important;
+        grid-template-columns: 1fr;
-     color: var(--text-primary) !important;
+     }
-}
-/*******************************************************************************
+     .utab__display.is-fading {
- * LINKS
+        animation: utabFade 0.25s ease;
- *******************************************************************************/
+    }
-a {
-     color: var(--link-color) !important;
-    transition: color 0.2s ease;
-}
-a:visited {
+    .utab__image {
-    color: var(--link-visited) !important;
+        border-radius: 12px;
-}
+        border: 1px solid #203c5f;
+        background: #0b1422;
+        padding: 10px;
+    }
-a:hover {
+    .utab__image img {
-    color: var(--link-hover) !important;
+        display: block;
-    text-decoration: none;
+        height: auto;
-}
+        max-width: 100%;
+        border-radius: 8px;
+    }
-a.new {
+    .utab__image.is-empty {
-    color: var(--link-new) !important;
+        display: none;
-}
+    }
-/*******************************************************************************
+    .utab__stats {
- * CONTENT AREA
+        display: grid;
- *******************************************************************************/
+        grid-template-columns: 1fr;
-#content,
+        gap: 10px;
-.mw-body {
+        color: #dbe7ff;
-    background-color: var(--content-bg) !important;
+        font-size: 14px;
-    color: var(--text-primary) !important;
+    }
-    border: 1px solid var(--border-color) !important;
-    box-shadow: var(--content-shadow);
-}
-#mw-page-base,
+    .utab__stats>.utab__stat {
-#mw-head-base {
+        grid-column: 1 / -1;
-     background: transparent !important;
+     }
-}
-#mw-head-base {
+    .utab__stat {
-    background: linear-gradient(180deg, var(--page-bg) 0%, transparent 100%) !important;
+        background: #13243a;
-}
+        border: 1px solid #274a74;
+        border-radius: 10px;
+        padding: 10px 12px;
+    }
-/*******************************************************************************
+    .utab__statTitle {
- * SIDEBAR & NAVIGATION
+        font-weight: 700;
- *******************************************************************************/
+        color: #8bb8ff;
-#mw-panel {
+    }
-    background: transparent;
-}
-#mw-panel .mw-portlet {
+    .utab__statList {
-    background: transparent;
+        margin: 6px 0 0;
-}
+        padding-left: 18px;
+        display: grid;
+        gap: 2px;
+        list-style: disc;
+        list-style-position: outside;
+    }
-#mw-panel .mw-portlet h3 {
+    .utab__statList li {
-    color: var(--text-muted) !important;
+        display: list-item;
-    font-size: 0.75em;
+        text-align: left;
-    text-transform: uppercase;
+     }
-     letter-spacing: 0.5px;
-}
-#mw-panel .mw-portlet .vector-menu-content-list > li > a {
+    .utab__costRow {
-    color: var(--link-color) !important;
+        position: relative;
-    font-size: 0.80rem !important;
+     }
-    font-weight: 500 !important;
-    padding: 0.3em 0;
-     transition: color 0.2s ease, padding-left 0.2s ease;
-}
-#mw-panel .mw-portlet .vector-menu-content-list > li > a:hover {
+    .utab__costBerry,
-    color: var(--link-hover) !important;
+    .utab__costGems,
-    padding-left: 4px;
+    .utab__costPoints {
-}
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-weight: 700;
+        line-height: 1.1;
+        font-size: 15px;
+    }
-#p-logo {
+    .utab__costBerry {
-    background-color: transparent !important;
+        color: #ffd166;
-}
+    }
-#p-navigation {
+    .utab__costGems {
-    background-color: transparent;
+        color: #57d889;
-}
+    }
-#p-tb {
+    .utab__costPoints {
-    display: none;
+        color: #a6b0bf;
-}
+    }
-/*******************************************************************************
+    .utab__costIcon {
- * SEARCH BAR
+        display: none;
- *******************************************************************************/
+     }
-#simpleSearch {
-    background-color: var(--input-bg) !important;
-     border: 1px solid var(--input-border) !important;
-    border-radius: 6px;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-#simpleSearch:focus-within {
+    .utab__costBerry .utab__costIcon,
-     border-color: var(--input-focus) !important;
+     .utab__costGems .utab__costIcon,
-     box-shadow: 0 0 0 3px rgba(69, 156, 202, 0.2);
+     .utab__costPoints .utab__costIcon,
-}
+    .utab__costBerry .utab__costText,
+    .utab__costGems .utab__costText,
+    .utab__costPoints .utab__costText {
+        transform: none;
+    }
-#searchInput {
+     .utab__level--source {
-     background-color: transparent !important;
+        display: none;
-    color: var(--text-primary) !important;
+    }
-    border: none !important;
-}
-#searchInput::placeholder {
+    @keyframes utabFade {
-    color: var(--text-muted);
+        from {
-}
+            opacity: 0;
+            transform: translateY(4px);
+        }
-#searchButton {
+        to {
-    filter: invert(0.8);
+            opacity: 1;
-}
+            transform: translateY(0);
+        }
+    }
-#p-search {
+    @media (max-width: 720px) {
-    float: left;
+        .utab {
-    margin-left: -0.1em;
+            padding: 16px;
-    margin-right: 1em;
+        }
-    margin-top: -0.4em;
-}
-/*******************************************************************************
+        .utab__display {
- * TABS & ACTIONS
+            grid-template-columns: 1fr;
- *******************************************************************************/
+        }
-.vector-menu-tabs,
+     }
-.vector-menu-tabs a,
+</style>
-#mw-head .vector-menu-dropdown h3 {
+{/literal}
-     background: none;
-}
-.vector-menu-tabs li {
+{assign var=section value=$section|default:$1|lower}
-    background: transparent;
-}
-.vector-menu-tabs li a {
+<div class="utab">
-     color: var(--text-secondary) !important;
+    {if !$section || $section == "designer"}
-     background: transparent;
+    <section class="utab__section" data-tab="Designer">
-     transition: color 0.2s ease;
+        <div class="utab__level" data-level="1">
-}
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Designer_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>1 pilar de artefato disponível</li>
+                    <li>27 símbolos disponíveis</li>
+                    <li>1 plano de fundo disponível</li>
+                    <li>6 cores disponíveis</li>
+                    <li>2% de EXP</li>
+                    <li>4% de sorte</li>
+                    <li>5% de pontos de aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Designer_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>2 pilares de artefato disponíveis</li>
+                    <li>9 planos de fundo disponíveis</li>
+                    <li>47 símbolos disponíveis</li>
+                    <li>12 cores disponíveis</li>
+                    <li>4% de EXP</li>
+                    <li>9% de sorte</li>
+                    <li>12% de pontos de aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Designer_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>2 pilares de artefato disponíveis</li>
+                    <li>34 planos de fundo disponíveis</li>
+                    <li>72 símbolos disponíveis</li>
+                    <li>30 cores disponíveis</li>
+                    <li>6% de EXP</li>
+                    <li>15% de sorte</li>
+                    <li>22% de pontos de aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Designer_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>3 pilares de artefato disponíveis</li>
+                    <li>34 planos de fundo disponíveis</li>
+                    <li>92 símbolos disponíveis</li>
+                    <li>30 cores disponíveis</li>
+                    <li>8% de EXP</li>
+                    <li>22% de sorte</li>
+                    <li>35% de pontos de aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Designer_lvl5.png]]</div>
+                <ul class="utab__statList">
+                    <li>4 pilares de artefato disponíveis</li>
+                    <li>34 planos de fundo disponíveis</li>
+                    <li>112 símbolos disponíveis</li>
+                    <li>30 cores disponíveis</li>
+                    <li>10% de EXP</li>
+                    <li>30% de sorte</li>
+                    <li>50% de pontos de aliança</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    {/if}
+    {if !$section || $section == "cofre"}
+    <section class="utab__section" data-tab="Cofre">
+        <div class="utab__level" data-level="1">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cofre_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>10% de bônus pra aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cofre_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>+ 100 espaços extra no cofre</li>
+                    <li>25% de bônus pra aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cofre_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>+ 200 espaços extra no cofre</li>
+                    <li>45% de bônus pra aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cofre_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>+ 300 espaços extra no cofre</li>
+                    <li>75% de bônus pra aliança</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cofre_lvl5.png]]</div>
+                <ul class="utab__statList">
+                    <li>+ 400 espaços extra no cofre</li>
+                    <li>100% de bônus pra aliança</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    {/if}
+    {if !$section || $section == "salao principal"}
+    <section class="utab__section" data-tab="Salão Principal">
+        <div class="utab__level" data-level="1">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 1</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 2</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 3</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 4</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaoPrincipal_lvl5.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 5</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    {/if}
+    {if !$section || $section == "quartos"}
+    <section class="utab__section" data-tab="Quartos">
+        <div class="utab__level" data-level="1">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Quartos_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 1</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Quartos_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 2</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Quartos_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 3</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Quartos_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 4</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Quartos_lvl5.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 5</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    {/if}
+     {if !$section || $section == "sala de guerra"}
+    <section class="utab__section" data-tab="Sala de Guerra">
+        <div class="utab__level" data-level="1">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 1</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 2</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 3</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 4</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:SalaDeGuerra_lvl5.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 5</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    {/if}
+    {if !$section || $section == "treinamento"}
+     <section class="utab__section" data-tab="Treinamento">
+        <div class="utab__level" data-level="1">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Treinamento_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 1</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Treinamento_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 2</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Treinamento_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 3</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Treinamento_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 4</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Treinamento_lvl5.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 5</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    {/if}
+    {if !$section || $section == "ferreiro"}
+    <section class="utab__section" data-tab="Ferreiro">
+        <div class="utab__level" data-level="1">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Ferreiro_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 1</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Ferreiro_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 2</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Ferreiro_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 3</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Ferreiro_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 4</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Ferreiro_lvl5.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 5</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+     {/if}
+    {if !$section || $section == "cozinha"}
+    <section class="utab__section" data-tab="Cozinha">
+        <div class="utab__level" data-level="1">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cozinha_lvl1.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 1</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="2">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cozinha_lvl2.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 2</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="3">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cozinha_lvl3.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 3</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="4">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cozinha_lvl4.png]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 4</li>
+                </ul>
+            </div>
+        </div>
+        <div class="utab__level" data-level="5">
+            <div class="utab__content">
+                <div class="utab__mediaImage">[[File:Cozinhalvl5.gif]]</div>
+                <ul class="utab__statList">
+                    <li>Descrição do nível 5</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    {/if}
+</div>
-.vector-menu-tabs li a:hover {
+{literal}
-     color: var(--link-hover) !important;
+<script>
-}
+     function handleArrowNavigation(event, buttons, activate) {
+        const keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+        if (!keys.includes(event.key)) {
+            return;
+        }
-.vector-menu-tabs .selected {
+        event.preventDefault();
-    background: var(--content-bg) !important;
+        const currentIndex = buttons.findIndex((button) => button === document.activeElement);
-    border: 1px solid var(--border-color) !important;
+        if (currentIndex === -1) {
-    border-bottom-color: var(--content-bg) !important;
+            return;
-    border-radius: 4px 4px 0 0;
+        }
-}
-.vector-menu-tabs .selected a {
+        let nextIndex = currentIndex;
-    color: var(--text-primary) !important;
+        if (event.key === "Home") {
-    font-weight: 600;
+            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;
+        }
-#p-cactions {
+        activate(nextIndex, true);
-    background: none;
+     }
-     margin-top: -0.6em;
-}
-#p-cactions li {
+    function triggerFade(element) {
-    background: none;
+        element.classList.remove("is-fading");
-}
+        void element.offsetWidth;
+        element.classList.add("is-fading");
+    }
-#p-cactions li.selected {
+    function hasWikitext(value) {
-    background: var(--content-bg);
+        return typeof value === "string" && (value.includes("[[") || value.includes("{{"));
-    border: 1px solid var(--border-color);
+    }
-}
-#p-cactions li a {
+    function hasStatWrapper(html) {
-    background-color: var(--surface-bg) !important;
+        if (typeof html !== "string") {
-    color: var(--link-color) !important;
+            return false;
-}
+        }
+        return /class=["'][^"']*\butab__stat\b/.test(html);
+    }
-.vector-menu-dropdown .vector-menu-content {
+    function parseWikitextCached(raw, cacheKey, target) {
-    background-color: var(--content-bg) !important;
+        if (!raw || !hasWikitext(raw)) {
-    border: 1px solid var(--border-color) !important;
+            return Promise.resolve(raw);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
-}
+        if (target[cacheKey]) {
+            return Promise.resolve(target[cacheKey]);
+        }
+        if (!window.mw || !mw.Api) {
+            return Promise.resolve(raw);
+        }
-.vector-menu-dropdown .vector-menu-content li a {
+        const api = new mw.Api();
-    color: var(--text-primary) !important;
+        return api
-}
+            .post({
+                action: "parse",
+                text: raw,
+                contentmodel: "wikitext",
+                prop: "text",
+                formatversion: 2
+            })
+            .then((response) => {
+                const html = response?.parse?.text || response?.parse?.text?.["*"] || raw;
+                target[cacheKey] = html;
+                return html;
+            })
+            .catch(() => raw);
+    }
-.vector-menu-dropdown .vector-menu-content li a:hover {
+    const upgradeCosts = [
-    background-color: var(--surface-bg) !important;
+        { level: 1, berries: "50.000", gems: "10", 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" }
+    ];
-#ca-view,
+    function buildLevelUI(section) {
-#ca-history,
+        const levelElements = Array.from(section.querySelectorAll(".utab__level"));
-#ca-viewsource {
+        if (!levelElements.length) {
-    display: none !important;
+            return;
-}
+        }
-/*******************************************************************************
+        const label = section.dataset.tab || "Níveis";
- * DISCORD BUTTON
+        const levels = levelElements.map((levelElement, index) => {
- *******************************************************************************/
+            const levelNumber = levelElement.dataset.level || String(index + 1);
-#n-Discord {
+            const contentElement = levelElement.querySelector(".utab__content") || levelElement;
-    font-size: 10px;
+            const rawHtml = contentElement.innerHTML.trim();
-    line-height: 1.5em;
+            const contentWrapper = document.createElement("div");
-}
+            contentWrapper.innerHTML = rawHtml;
+            const mediaImage = contentWrapper.querySelector(".utab__mediaImage");
+            const imageHtml = mediaImage ? mediaImage.innerHTML.trim() : "";
+            if (mediaImage) {
+                mediaImage.remove();
+            }
+            const statsHtml = contentWrapper.innerHTML.trim();
-#p-Discord-label {
+            return {
-    display: none;
+                level: levelNumber,
-}
+                imageHtml,
+                statsHtml
+            };
+        });
-#n-Discord a {
+        levelElements.forEach((levelElement) => {
-    color: #fff !important;
+            levelElement.classList.add("utab__level--source");
-    font-weight: bold;
+        });
-    border-radius: 6px;
-    border: 1px solid #4c57d0;
-    background-color: #5865f2;
-    display: block;
-    position: relative;
-    padding: 6px 8px 5px calc(14px + 6.5px * 2);
-    box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
-    transition: all 0.2s ease;
-}
-#n-Discord a::after {
+        const nav = document.createElement("div");
-    content: '';
+        nav.className = "utab__levels";
-    background: url(/images/7/76/Discord-brands.png) no-repeat;
+        nav.setAttribute("role", "tablist");
-    background-size: contain;
+        nav.setAttribute("aria-label", `Níveis de ${label}`);
-    background-position: center;
-    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
-    position: absolute;
-    top: 4px;
-    left: 6px;
-    width: 18px;
-    height: 18px;
-}
-#n-Discord a:hover {
+        const display = document.createElement("div");
-    text-decoration: none;
+        display.className = "utab__display";
-    background-color: #7885ff;
-    border-color: #6c77f0;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
-}
-/*******************************************************************************
+        const imageWrap = document.createElement("div");
- * TABLES - GENERAL
+        imageWrap.className = "utab__image";
- *******************************************************************************/
-table {
-    background-color: var(--table-bg);
-    border-color: var(--table-border);
-}
-table th {
+        const stats = document.createElement("div");
-    background-color: var(--table-header) !important;
+        stats.className = "utab__stats";
-    color: var(--text-primary) !important;
-    border-color: var(--table-border) !important;
-}
-table td {
+        display.appendChild(imageWrap);
-    background-color: var(--table-bg) !important;
+        display.appendChild(stats);
-    color: var(--text-primary) !important;
-    border-color: var(--table-border) !important;
-}
-table tr:hover td {
+        const buttons = levels.map((level, index) => {
-    background-color: var(--table-hover) !important;
+            const button = document.createElement("button");
-}
+            button.type = "button";
+            button.className = "utab__levelBtn";
+            button.textContent = `Nv ${level.level}`;
+            button.setAttribute("role", "tab");
+            button.setAttribute("aria-selected", "false");
+            button.setAttribute("tabindex", "-1");
+            button.addEventListener("click", () => activateLevel(index, true));
+            button.addEventListener("keydown", (event) => handleArrowNavigation(event, buttons, activateLevel));
+            nav.appendChild(button);
+            return button;
+        });
-/*******************************************************************************
+        section.prepend(display);
- * TABLE-ENHANCE
+        section.prepend(nav);
- *******************************************************************************/
-table.table-enhance {
-    background-color: var(--table-bg);
-    border: 1px solid var(--table-border);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-.table-enhance th,
+        let renderToken = 0;
-.table-enhance td {
-    border: 1px solid var(--table-border);
-    color: var(--text-primary);
-}
-.table-enhance th {
+        function activateLevel(index, shouldFocus) {
-    background-color: var(--table-header);
+            if (!levels.length) {
-    color: var(--text-primary);
+                return;
-}
+            }
-.table-enhance tr:nth-child(even) td {
+            const safeIndex = Math.max(0, Math.min(index, levels.length - 1));
-    background-color: var(--table-stripe);
+            const current = levels[safeIndex];
-}
+            const token = ++renderToken;
-.table-enhance tr:hover td {
+            buttons.forEach((button, buttonIndex) => {
-    background-color: var(--table-hover);
+                const isActive = buttonIndex === safeIndex;
-}
+                button.classList.toggle("is-active", isActive);
+                button.setAttribute("aria-selected", isActive ? "true" : "false");
+                button.setAttribute("tabindex", isActive ? "0" : "-1");
+            });
-.table-enhance-vertical td:first-child {
+            if (current.imageHtml) {
-    color: var(--link-color);
+                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");
+            }
-/*******************************************************************************
+            const levelNumber = Number(current.level);
- * WIKITABLES
+            const cost = upgradeCosts.find((item) => item.level === levelNumber);
- *******************************************************************************/
+            const costHtml = cost
-table.wikitable,
+                ? `
-table.wikitablec,
+                    <div class="utab__stat utab__stat--cost">
-table.wikitablew,
+                        <div class="utab__statTitle">Custo do upgrade</div>
-table.wikitablenb,
+                        <ul class="utab__statList">
-table.wikitablewhite,
+                            <li class="utab__costRow">
-table.wikitablecenter,
+                                <span class="utab__costBerry">
-table.wikitablew-tr,
+                                    <span class="utab__costText">${cost.berries} berries</span>
-table.prettytable {
+                                </span>
-    background-color: var(--table-bg) !important;
+                            </li>
-    border: 1px solid var(--table-border) !important;
+                            ${cost.gems ? `
-}
+                                <li class="utab__costRow">
+                                    <span class="utab__costGems">
+                                        <span class="utab__costText">${cost.gems} gemas</span>
+                                    </span>
+                                </li>
+                            ` : ""}
+                            <li class="utab__costRow">
+                                <span class="utab__costPoints">
+                                    <span class="utab__costText">${cost.points} pontos</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </div>
+                `
+                : "";
+            const statsBodyHtml = current.statsHtml
+                ? (hasStatWrapper(current.statsHtml)
+                    ? current.statsHtml
+                    : `
+                        <div class="utab__stat utab__stat--desc">
+                            <div class="utab__statTitle">Informações</div>
+                            ${current.statsHtml}
+                        </div>
+                    `)
+                : "";
-table.wikitable th,
+            stats.innerHTML = `${statsBodyHtml}${costHtml}`;
-table.wikitablec th,
+            triggerFade(display);
-table.wikitablew th,
-table.wikitablenb th,
-table.wikitablewhite th,
-table.wikitablecenter th,
-table.wikitablew-tr th,
-table.prettytable th {
-    background-color: var(--table-header) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--table-border) !important;
-}
-table.wikitable td,
+            const shouldParse =
-table.wikitablec td,
+                (current.imageHtml && hasWikitext(current.imageHtml)) ||
-table.wikitablew td,
+                (current.statsHtml && hasWikitext(current.statsHtml));
-table.wikitablenb td,
-table.wikitablewhite td,
-table.wikitablecenter td,
-table.wikitablew-tr td,
-table.prettytable td {
-    background-color: var(--table-bg) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--table-border) !important;
-}
-table.wikitable tr:hover td,
+            if (shouldParse) {
-table.wikitablew tr:hover td,
+                Promise.all([
-table.wikitablew-tr tr:hover td {
+                    parseWikitextCached(current.imageHtml, "parsedImageHtml", current),
-    background-color: var(--table-hover) !important;
+                    parseWikitextCached(current.statsHtml, "parsedStatsHtml", current)
-}
+                ]).then(([parsedImage, parsedStats]) => {
+                    if (renderToken !== token) {
+                        return;
+                    }
+                    if (parsedImage && parsedImage !== current.imageHtml) {
+                        imageWrap.innerHTML = parsedImage;
+                        imageWrap.classList.remove("is-empty");
+                        display.classList.remove("is-image-empty");
+                    }
+                    if (parsedStats && parsedStats !== current.statsHtml) {
+                        const parsedBodyHtml = hasStatWrapper(parsedStats)
+                            ? parsedStats
+                            : `
+                                <div class="utab__stat utab__stat--desc">
+                                    <div class="utab__statTitle">Informações</div>
+                                    ${parsedStats}
+                                </div>
+                            `;
+                        stats.innerHTML = `${parsedBodyHtml}${costHtml}`;
+                    }
+                });
+            }
-/*******************************************************************************
+            if (shouldFocus) {
- * JQUERY TABLESORTER
+                buttons[safeIndex].focus();
- *******************************************************************************/
+            }
-.jquery-tablesorter {
+        }
-    background-color: var(--table-bg) !important;
-    border-color: var(--table-border) !important;
-}
-.jquery-tablesorter tr td {
+        activateLevel(0, false);
-    background-color: var(--table-bg) !important;
+     }
-    color: var(--text-primary) !important;
-}
-.jquery-tablesorter tr th {
-    background-color: var(--table-header) !important;
-    color: var(--text-primary) !important;
-}
-#mw-content-text .mw-parser-output .jquery-tablesorter {
-    background-color: var(--table-bg) !important;
-    color: var(--text-primary) !important;
-    border-color: var(--table-border) !important;
-}
-/*******************************************************************************
- * CARDS
- *******************************************************************************/
-.card {
-    background-color: var(--content-bg);
-    border: 1px solid var(--border-color);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-.card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
-}
-.card-title {
-    background: var(--accent-gradient);
-    color: #fff;
-}
-/*******************************************************************************
- * HOMEPAGE
- *******************************************************************************/
-.initialPage--table {
-    background: transparent !important;
-}
-.initialPage--table > tbody > tr > th,
-.initialPage--table > tbody > tr > td {
-    background: transparent !important;
-}
-.initialPage--title th {
-    background-color: transparent !important;
-    color: var(--text-primary) !important;
-}
-.initialPage--menuTitle {
-    background: var(--accent-gradient);
-    color: #fff;
-}
-.initialPage--menuContainer,
-.initialPage--sideMenuContainer {
-    background: transparent;
-}
-/*******************************************************************************
- * SOCIAL MEDIA LINKS
- *******************************************************************************/
-.initialPage--socialMedia {
-    border-top: 2px solid var(--border-light);
-}
-.initialPage--socialMediaLink {
-    color: var(--text-secondary) !important;
-}
-.initialPage--socialMediaLink:visited {
-    color: var(--text-secondary) !important;
-}
-.socialMedia--svg svg {
-    fill: var(--text-secondary);
-}
-/* Discord */
-.initialPage--socialMedia.discord > .initialPage--socialMediaLink:hover {
-    color: #5865f2 !important;
-}
-.initialPage--socialMedia.discord:before {
-    background: #5865f2;
-}
-.initialPage--socialMedia.discord > .initialPage--socialMediaLink:hover > .socialMedia--svg svg {
-    fill: #5865f2 !important;
-}
-/* Instagram */
-.initialPage--socialMedia.instagram > .initialPage--socialMediaLink:hover {
-    color: #f09433 !important;
-}
-.initialPage--socialMedia.instagram:before {
-    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
-}
-/* Facebook */
-.initialPage--socialMedia.facebook > .initialPage--socialMediaLink:hover {
-    color: #4267B2 !important;
-}
-.initialPage--socialMedia.facebook:before {
-    background: #4267B2;
-}
-/*******************************************************************************
- * BADGES & SECTION TITLES
- *******************************************************************************/
-.badge {
-    background: var(--accent-gradient);
-    color: #fff;
-    box-shadow: rgba(69, 156, 202, 0.3) 0px 0px 0px 3px;
-}
-.section-title {
-    background: var(--accent-gradient);
-    color: #fff;
-}
-/*******************************************************************************
- * FILTERS (CHARACTERS PAGE)
- *******************************************************************************/
-.filter {
-    background-color: var(--content-bg);
-    border: 2px solid var(--border-light);
-}
-.filter--title {
-    background: var(--accent-gradient);
-    border-right: 2px solid var(--border-light);
-    color: #fff;
-}
-.filter--input {
-    background-color: var(--input-bg);
-    border: 2px solid var(--border-light);
-    color: var(--text-primary);
-}
-.filter--input::placeholder {
-    color: var(--text-muted);
-}
-.filter--searchButton {
-    background: var(--accent-gradient);
-    border: 2px solid var(--border-light);
-}
-.filter--icon img {
-    filter: grayscale(0.5) brightness(0.9);
-}
-.filter--icon.active img {
-    filter: grayscale(0) brightness(1);
-    box-shadow: 0 0 12px rgba(69, 156, 202, 0.5);
-}
-/*******************************************************************************
- * CHARACTER CARDS
- *******************************************************************************/
-#characters-container > div > a > img {
-    filter: grayscale(0.2) brightness(0.95);
-    border: 2px solid var(--border-color);
-    transition: all 0.25s ease;
-}
-#characters-container > div:hover > a > img {
-    filter: grayscale(0) brightness(1);
-    border-color: var(--accent-primary);
-    box-shadow: 0 0 20px rgba(69, 156, 202, 0.4);
-    transform: scale(1.05);
-}
-/*******************************************************************************
- * CHARACTER PAGE
- *******************************************************************************/
-.characterInfo--name {
-    color: var(--text-primary) !important;
-}
-.characterInfo--contentContainer {
-    background-color: var(--content-bg);
-}
-.stats--container {
-    background-color: var(--content-bg);
-}
-.bar-filled {
-    background: var(--accent-primary);
-}
-.bar-notFilled {
-    background: var(--transparent-blue);
-}
-/*******************************************************************************
- * SKILLS TABS
- *******************************************************************************/
-.tabsContainer table {
-    background: transparent;
-}
-.tabsContainer table > tbody > tr > td {
-    border-bottom: 2px solid var(--border-color);
-}
-.tab-skill {
-    background-color: var(--content-bg);
-    border: 2px solid transparent;
-    transition: all 0.25s ease;
-}
-.tab-skill.active {
-    border-color: var(--accent-primary);
-    background-color: var(--surface-bg);
-}
-.tab-skill:hover {
-    background-color: var(--surface-bg);
-}
-.skillInfo--name {
-    color: var(--text-primary) !important;
-}
-.skillInfo--description {
-    color: var(--text-secondary);
-}
-.skillInfo > div > .skillInfo--infoContainer b {
-    color: var(--link-color) !important;
-}
-.skillInfo--attributesContainer > h1 {
-    color: var(--text-muted) !important;
-}
-/* Scrollbar for skills */
-.skillInfo--description::-webkit-scrollbar,
-.tabSkill--container::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-.skillInfo--description::-webkit-scrollbar-track,
-.tabSkill--container::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-track);
-    border-radius: 10px;
-}
-.skillInfo--description::-webkit-scrollbar-thumb,
-.tabSkill--container::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-     border-radius: 10px;
-}
-.skillInfo--description::-webkit-scrollbar-thumb:hover,
-.tabSkill--container::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-hover);
-}
-/*******************************************************************************
- * ATTRIBUTE CARDS
- *******************************************************************************/
-.attribute--cardsContainer {
-    background: var(--surface-bg);
-    border: 2px solid var(--border-color);
-}
-.cardAttribute--value {
-    color: var(--text-primary) !important;
-}
-/*******************************************************************************
- * SKINS CONTAINER
- *******************************************************************************/
-.skins--container {
-    background-color: var(--content-bg);
-}
-.skins--container::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-.skins--container::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-track);
-    border-radius: 10px;
-}
-.skins--container::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-    border-radius: 10px;
-}
-/*******************************************************************************
- * CALCULATOR XP
- *******************************************************************************/
-.calcXp--container {
-    background-color: var(--content-bg);
-    border: 2px solid var(--border-light);
-}
-.calcXp--resultTitle {
-    color: var(--text-secondary) !important;
-}
-.calcXp--formItem input {
-    background-color: var(--input-bg);
-    border: 2px solid var(--border-light);
-    color: var(--text-primary);
-}
-.calcXp--formItem span {
-    color: var(--link-color);
-}
-#calculate-btn {
-    background: var(--accent-gradient);
-    color: #fff;
-    border: none;
-    box-shadow: 0 4px 12px rgba(69, 156, 202, 0.3);
-}
-#calculate-btn:hover {
-    box-shadow: 0 6px 16px rgba(69, 156, 202, 0.4);
-    transform: translateY(-2px);
-    background: linear-gradient(135deg, #3d8ab8 0%, #4a76b5 100%);
-}
-/*******************************************************************************
- * ITEM INFOBOX
- *******************************************************************************/
-.iteminfobox {
-    background: var(--content-bg);
-    border: 1px solid var(--border-color);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-.iteminfobox b {
-    color: var(--link-color);
-}
-/*******************************************************************************
- * TOOLTIPS
- *******************************************************************************/
-.tooltipster-default {
-    background-color: var(--content-bg) !important;
-    color: var(--text-primary) !important;
-    border: 1px solid var(--border-color);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-}
-.tip2 {
-    background-color: var(--content-bg);
-    border: 1px solid var(--border-color);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-    color: var(--text-primary);
-}
-/*******************************************************************************
- * TRANSCRIPTIONS / DIALOGS
- *******************************************************************************/
-.transcrições {
-    background-color: var(--surface-bg);
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    color: var(--text-primary);
-}
-.transcrições::before {
-    background-color: var(--surface-bg);
-}
-.transcrições b,
-.transcrições strong {
-    color: var(--text-primary) !important;
-}
-.me {
-    color: var(--text-primary);
-}
-/*******************************************************************************
- * TABBER COMPONENT
- *******************************************************************************/
-.mw-tabber-container {
-    background-color: var(--content-bg);
-    border: 1px solid var(--border-color);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-}
-.mw-tabber-tabs {
-    background-color: var(--surface-bg);
-    border-bottom: 2px solid var(--border-color);
-}
-.mw-tabber-tab {
+     function initWidgets() {
-    background-color: var(--surface-bg);
+        document.querySelectorAll(".utab").forEach((widget) => {
-    border-right: 1px solid var(--border-color);
+            widget.querySelectorAll(".utab__section").forEach(buildLevelUI);
-     color: var(--text-secondary);
+        });
-}
-.mw-tabber-tab:hover {
-    background-color: var(--content-bg);
-    color: var(--link-hover);
-}
-.mw-tabber-tab.active {
-    background-color: var(--content-bg);
-    color: var(--link-color);
-    border-bottom: 3px solid var(--accent-primary);
-}
-.mw-tabber-content {
-    background-color: var(--content-bg);
-}
-/*******************************************************************************
- * PRESET ABAS
- *******************************************************************************/
-.tabela-abas {
-    background: transparent;
-}
-.mostrar-aba {
-    background-color: transparent;
-}
-.mostrar-aba:hover::after {
-    background-color: var(--text-muted);
-}
-.mostrar-aba.ativa::after {
-    background-color: var(--accent-primary);
-}
-.sec-aba-cem {
-    color: var(--text-primary);
-}
-.aba {
-    background-color: var(--content-bg);
-}
-/*******************************************************************************
- * WANTED PAGE
- *******************************************************************************/
-#selectbox-wanted {
-    background-color: var(--input-bg);
-    border: 2px solid var(--border-light);
-    color: var(--text-primary);
-}
-.wantedPortrait--title {
-    color: var(--text-primary);
-}
-/*******************************************************************************
- * GLOBAL EVENT WIDGET
- *******************************************************************************/
-.global-event-widget {
-    background-color: var(--content-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    overflow: hidden;
-}
-#global-event-time {
-    background: linear-gradient(to right, rgba(20, 22, 27, 0.9), transparent);
-    color: var(--text-primary);
-}
-/*******************************************************************************
- * CATEGORIES
- *******************************************************************************/
-#mw-normal-catlinks {
-    background-color: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    padding: 0.5em 1em;
-    border-radius: 4px;
-}
-#mw-normal-catlinks ul a,
-#mw-normal-catlinks a {
-    color: var(--link-color) !important;
-}
-/*******************************************************************************
- * TABLE OF CONTENTS
- *******************************************************************************/
-#toc {
-    background-color: var(--surface-bg);
-    border: 1px solid var(--border-color);
-}
-#toc h2 {
-    color: var(--text-primary);
-}
-#toc ul li a {
-    color: var(--link-color) !important;
-}
-#toc .toctogglelabel,
-span.toctogglespan {
-    display: none !important;
-}
-/*******************************************************************************
- * IMAGE THUMBNAILS
- *******************************************************************************/
-.thumb {
-    background-color: var(--surface-bg);
-    border: 1px solid var(--border-color);
-}
-.thumbinner {
-    background-color: var(--surface-bg);
-    border: 1px solid var(--border-color);
-}
-.thumbcaption {
-    color: var(--text-secondary) !important;
-}
-.mw-parser-output .center .thumbcaption,
-.mw-parser-output .tright .thumbcaption {
-    color: var(--text-secondary) !important;
-}
-.magnify a {
-    display: none;
-}
-/*******************************************************************************
- * EDITOR & UPLOAD
- *******************************************************************************/
-.wikiEditor-ui-toolbar {
-    background-color: var(--surface-bg);
-    border-color: var(--border-color);
-}
-.wikiEditor-ui-toolbar .tabs span.tab a {
-    color: var(--text-primary) !important;
-}
-.wikiEditor-ui-toolbar .group .tool-select .label {
-    color: var(--text-primary) !important;
-}
-.wikiEditor-ui-toolbar .group .tool-select .options .option {
-    color: var(--text-primary) !important;
-    background-color: var(--content-bg);
-}
-.wikiEditor-ui-toolbar .group .tool-select .options .option:hover {
-    background-color: var(--surface-bg);
-}
-.wikiEditor-ui-toolbar .booklet > .index {
-    color: var(--text-primary);
-    background-color: var(--surface-bg);
-}
-.codeEditor-status-message {
-    color: var(--text-primary) !important;
-    background-color: var(--surface-bg);
-    border-color: var(--border-color);
-}
-#msupload-div a {
-    color: var(--link-color) !important;
-}
-#msupload-bottom a {
-    color: var(--text-primary) !important;
-}
-#msupload-list .file {
-    background: var(--surface-bg);
-    border-top: 1px solid var(--border-color);
-    color: var(--text-primary) !important;
-}
-/*******************************************************************************
- * MISC ELEMENTS
- *******************************************************************************/
-.mw-destfile-warning {
-    background-color: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-primary);
-}
-.mw-logline-protect {
-    color: var(--text-primary) !important;
-}
-div.mw-number-text {
-    color: var(--text-muted) !important;
-}
-div.mw-number-text h3 {
-    color: var(--text-secondary) !important;
-}
-hr {
-    border-color: var(--border-color);
-}
-ul {
-    list-style-image: none;
-}
-.mw-parser-output small li,
-.mw-parser-output tr i,
-.mw-parser-output tr big {
-    color: var(--text-primary) !important;
-}
-#contentSub,
-#contentSub2 {
-    margin: 0 !important;
-    padding: 0 !important;
-    display: none;
-}
-#footer-info-lastmod {
-    display: none !important;
-}
-/*******************************************************************************
- * SCALE UP HOVER EFFECT
- *******************************************************************************/
-.scaleUp-hover {
-    transition: all 0.25s ease;
-}
-.scaleUp-hover:hover {
-    transform: scale(1.08);
-    filter: brightness(1.1);
-}
-/*******************************************************************************
- * GLOBAL SCROLLBAR
- *******************************************************************************/
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-::-webkit-scrollbar-track {
-    background-color: var(--scrollbar-track);
-}
-::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-    border-radius: 5px;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scrollbar-hover);
-}
-/* Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-}
-/*******************************************************************************
- * SELECTION HIGHLIGHT
- *******************************************************************************/
-::selection {
-    background-color: rgba(69, 156, 202, 0.4);
-    color: var(--text-primary);
-}
-::-moz-selection {
-    background-color: rgba(69, 156, 202, 0.4);
-    color: var(--text-primary);
-}
-/*******************************************************************************
- * RESPONSIVE ADJUSTMENTS
- *******************************************************************************/
-@media screen and (max-width: 1024px) {
-    .initialPage--sideMenuContainer .card {
-        background-color: var(--content-bg);
      }
-}
-@media screen and (max-width: 768px) {
+    if (document.readyState === "loading") {
-    .mw-tabber-tab {
+        document.addEventListener("DOMContentLoaded", initWidgets);
-        background-color: var(--surface-bg);
+     } else {
-        border-bottom: 1px solid var(--border-color);
+         initWidgets();
-     }
-    .mw-tabber-tab.active {
-         border-bottom: 3px solid var(--accent-primary);
      }
-}
+</script>
+{/literal}
-/*******************************************************************************
- * VIDEO RESPONSIVO
- *******************************************************************************/
-.video-responsivo {
-    background: var(--page-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    overflow: hidden;
-}
-.pagevideo {
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    background-color: var(--page-bg);
-}
-/*******************************************************************************
- * UTILITY OVERRIDES (ensure dark theme)
- *******************************************************************************/
-.oo-ui-popupWidget-head > .oo-ui-iconElement-noIcon + .oo-ui-labelElement-label {
-    color: var(--text-primary);
-}
-#ca-delete a,
-#ca-move a,
-#ca-unprotect a {
-    background-color: var(--surface-bg) !important;
-    border-color: var(--border-color) !important;
-    color: var(--link-color) !important;
-}