Widget:Teste

<style>

   .island-grid {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       padding: 12px 0;
       justify-content: center;
   }

   .island-card {
       background: #eeeded;
       box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
       border-radius: 8px;
       text-align: center;
       padding: 12px 10px;
       width: 120px;
       min-width: 120px;
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 4px;
       transition: transform 0.15s, box-shadow 0.15s;
       color: inherit;
       cursor: pointer;
   }

   .island-card:hover {
       transform: translateY(-2px);
       box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
   }

   .island-card:visited {
       color: inherit;
   }

   .island-card .island-img img {
       width: 100px;
       height: 100px;
       object-fit: contain;
       pointer-events: none;
   }

   .island-card .island-name {
       font-size: 0.9em;
       font-weight: bold;
       color: #000;
       pointer-events: none;
       line-height: 1.2;
       word-break: break-word;
   }

   .island-card .island-chests {
       display: flex;
       align-items: flex-end;
       justify-content: center;
       gap: 8px;
       pointer-events: none;
   }

   .island-card .island-chest-group {
       position: relative;
       display: inline-flex;
       flex-direction: column;
       align-items: center;
   }

   .island-card .island-chest-group img {
       width: 32px;
       height: 32px;
       object-fit: contain;
       display: block;
   }

   /* Estilo da quantidade (igual itemdata.css) */
   .island-card .island-chest-count {
       position: absolute;
       bottom: -10px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 12px;
       font-weight: bold;
       color: #fff;
       background: rgba(0, 0, 0, 0.75);
       padding: 1px 4px;
       border-radius: 4px;
       line-height: 1;
       white-space: nowrap;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
       z-index: 10;
   }

   @media (max-width: 600px) {
       .island-card {
           width: 100px;
           min-width: 100px;
           padding: 10px 8px;
       }

       .island-card .island-img img {
           width: 80px;
           height: 80px;
       }

       .island-card .island-name {
           font-size: 0.85em;
       }

       .island-card .island-chest-group img {
           width: 28px;
           height: 28px;
       }

       .island-card .island-chest-count {
           font-size: 11px;
           bottom: -8px;
       }
   }

</style> <script>

   (function () {
       function initClickable() {
           document.querySelectorAll('.island-card[data-href]').forEach(function (el) {
               if (el._icClick) return;
               el._icClick = true;
               el.addEventListener('click', function () {
                   var href = el.getAttribute('data-href');
                   if (href) window.location.href = href;
               });
               el.addEventListener('keydown', function (e) {
                   if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault();
                       var href = el.getAttribute('data-href');
                       if (href) window.location.href = href;
                   }
               });
           });
       }
       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', initClickable);
       } else {
           initClickable();
       }
   })();

</script>