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;
       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;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .weekly-bosses__btn a {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 8px;
       color: inherit;
       text-decoration: none;
   }

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

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

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

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

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

</style>

   <a href="{$link}">
       {if $icon}<img src="/wiki/Special:FilePath/{$icon}" alt="{$name}" />{/if}
       {$name}
   </a>

<script>

   (function () {
       document.querySelectorAll(".weekly-bosses__btn[data-background]").forEach(function (el) {
           el.style.background = el.getAttribute("data-background") || "#2a3544";
       });
   })();

</script>