Widget:WeeklyBosses

<style>

   .weekly-bosses {
       font-family: "Segoe UI", Arial, sans-serif;
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       justify-content: center;
       padding: 16px 0;
   }

   .weekly-bosses__btn {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       padding: 16px 20px;
       min-width: 120px;
       border: 1px solid #e67e22;
       border-radius: 12px;
       color: #e67e22;
       font-weight: 600;
       font-size: 14px;
       text-decoration: none;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .weekly-bosses__btn:hover {
       border-color: #f39c12;
       color: #f39c12;
       transform: translateY(-2px);
   }

   .weekly-bosses__btn:focus-visible {
       outline: 2px solid #e67e22;
       outline-offset: 2px;
   }

   .weekly-bosses__icon {
       width: 48px;
       height: 48px;
       object-fit: contain;
       image-rendering: pixelated;
       image-rendering: -moz-crisp-edges;
       image-rendering: crisp-edges;
   }

   .weekly-bosses__icon:empty,
   .weekly-bosses__icon[src=""] {
       display: none;
   }

   @media (max-width: 600px) {
       .weekly-bosses {
           flex-direction: column;
       }

       .weekly-bosses__btn {
           width: 100%;
       }
   }

</style>

<script>

   (function () {
       const root = document.getElementById("weekly-bosses-root");
       if (!root) return;

       let bosses = [];
       const configEl = document.getElementById("weekly-bosses-config");
       if (configEl && configEl.textContent) {
           try {
               bosses = JSON.parse(configEl.textContent);
           } catch (e) { }
       }

       bosses = bosses.filter(function (b) {
           return b && b.name;
       });

       bosses.forEach(function (boss) {
           const link = boss.link || "/wiki/" + boss.name.replace(/\s+/g, "_");
           const a = document.createElement("a");
           a.className = "weekly-bosses__btn";
           a.href = link;
           a.setAttribute("title", boss.name);

           if (boss.background) {
               const bg = boss.background.trim();
               a.style.background = bg.startsWith("url(") || bg.startsWith("#") || bg.startsWith("rgb") ? bg : "url(" + bg + ")";
           } else {
               a.style.background = "#2a3544";
           }

           if (boss.icon) {
               const img = document.createElement("img");
               img.className = "weekly-bosses__icon";
               img.src = boss.icon;
               img.alt = boss.name;
               a.appendChild(img);
           }

           const span = document.createElement("span");
           span.textContent = boss.name;
           a.appendChild(span);

           root.appendChild(a);
       });
   })();

</script>