Widget:WeeklyBosses

<style>

   .weekly-bosses {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       justify-content: center;
       padding: 16px 0;
   }

   .weekly-bosses__btn {
       display: flex;
       flex-direction: column;
       position: relative;
       border: 2px solid #2a4a6a;
       padding: 0;
       text-align: center;
       color: #F5A00F;
       font-weight: bold;
       font-size: 14px;
       border-radius: 10px;
       background: linear-gradient(120deg, rgba(18, 34, 45, 1) 0%, rgba(22, 40, 55, 1) 25%, rgba(26, 46, 65, 1) 50%, rgba(30, 52, 74, 1) 75%, rgba(34, 58, 84, 1) 100%);
       cursor: pointer;
       transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
       width: 200px;
       height: 185px;
       min-height: 185px;
       overflow: hidden;
       flex-shrink: 0;
       box-sizing: border-box;
       isolation: isolate;
       backface-visibility: hidden;
   }

   .weekly-bosses__btn::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       border-radius: 8px;
       background: rgba(0, 0, 0, 0.38);
       pointer-events: none;
       z-index: 0;
   }

   .weekly-bosses__btn a {
       display: block;
       color: inherit;
       text-decoration: none;
       padding: 0;
   }

   .weekly-bosses__btn:hover {
       box-shadow: 0 2px 8px rgba(42, 74, 106, 0.45);
       color: #F5A00F;
       transform: translateY(-2px);
       border-color: #3a5a7a;
   }

   .weekly-bosses__btn:focus-within {
       outline: 2px solid #2a4a6a;
       outline-offset: 2px;
   }

   .weekly-bosses__btn-img {
       position: relative;
       z-index: 1;
       overflow: hidden;
       display: flex;
       justify-content: center;
       align-items: center;
       flex: 1 1 0;
       min-height: 0;
   }

   .weekly-bosses__btn-img img {
       max-width: 100%;
       max-height: 100%;
       width: auto;
       height: auto;
       display: block;
       object-fit: contain;
       image-rendering: pixelated;
       image-rendering: -moz-crisp-edges;
       image-rendering: crisp-edges;
       filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
   }

   .weekly-bosses__btn-label {
       position: relative;
       z-index: 1;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(10, 20, 32, 0.9);
       padding: 5px 12px;
       text-align: center;
       margin-top: auto;
       border-radius: 0 0 8px 8px;
       line-height: 1.2;
       height: 2.35em;
       min-height: 2.35em;
       font-size: 17px;
       text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6),
           0 2px 2px rgba(0, 0, 0, 0.5),
           0 3px 4px rgba(0, 0, 0, 0.4),
           0 4px 8px rgba(0, 0, 0, 0.25);
   }

   .weekly-bosses__btn table {
       margin: 0 auto;
   }

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

       .weekly-bosses__btn {
           width: 100%;
           max-width: 300px;
           height: 185px;
           min-height: 185px;
       }
   }

</style>

<script>

   (function () {
       function applyBackgrounds() {
           document.querySelectorAll(".weekly-bosses__btn[data-bgimg]").forEach(function (el) {
               var filename = el.getAttribute("data-bgimg");
               if (!filename) return;
               var url;
               if (typeof mw !== "undefined" && mw.util && mw.util.getUrl) {
                   url = mw.util.getUrl("Especial:FilePath/" + filename);
               } else {
                   url = "/index.php?title=Especial:FilePath/" + encodeURIComponent(filename);
               }
               el.style.backgroundImage = "url(" + url + ")";
               el.style.backgroundSize = "cover";
               el.style.backgroundPosition = "center";
               el.style.backgroundRepeat = "no-repeat";
           });
       }
       function initClickable() {
           document.querySelectorAll(".weekly-bosses__btn[data-href], .weekly-bosses__btn[data-link]").forEach(function (el) {
               if (el._wbClick) return;
               el._wbClick = true;
               el.setAttribute("role", "link");
               el.setAttribute("tabindex", "0");
               el.style.cursor = "pointer";
               el.addEventListener("click", function (e) {
                   e.preventDefault();
                   var url = el.getAttribute("data-href");
                   if (!url && el.getAttribute("data-link")) {
                       url = (typeof mw !== "undefined" && mw.util && mw.util.getUrl) ? mw.util.getUrl(el.getAttribute("data-link")) : ("/index.php?title=" + encodeURIComponent(el.getAttribute("data-link")));
                   }
                   if (url) window.location.href = url;
               });
               el.addEventListener("keydown", function (e) {
                   if (e.key === "Enter" || e.key === " ") {
                       e.preventDefault();
                       el.click();
                   }
               });
           });
       }
       function run() {
           applyBackgrounds();
           initClickable();
       }
       if (document.readyState === "loading") {
           document.addEventListener("DOMContentLoaded", run);
       } else {
           run();
       }
   })();

</script>