Widget:Teste

 <script>
   const skulls = [
     {
       x: 410, y: 220,
       title: "White Skull",
       desc: "Boss: White Skull
Área sombria, cuidado com os ataques surpresa!"
     },
     {
       x: 650, y: 125,
       title: "Red Fang",
       desc: "Boss: Red Fang
Possui resistência a fogo. Traga ataques de gelo!"
     },
     {
       x: 250, y: 410,
       title: "Void Wraith",
       desc: "Boss: Void Wraith
Evite ataques diretos. Usa magia de sombras."
     },
     {
       x: 248, y: 320,
       title: "Night Howler",
       desc: "Boss: Night Howler
Ataca com velocidade e confusão. Use proteção contra atordoamento!"
     }
   ];

   const hearts = [
     { x: 280, y: 210, desc: "Cura escondida: Quebre a caixa para obter uma cura." },
     { x: 312, y: 196 },
     { x: 245, y: 358, desc: "Após o chefe, o jogador com menos vida receberá uma cura automática." }
   ];

   const puzzleButton = {
     x: 244,
     y: 217,
     videoUrl: "https://www.youtube.com/embed/10rhyP32vdw"
   };

   const map = document.getElementById("map");

   // Adiciona as caveiras
   skulls.forEach((skull, index) => {
     const icon = document.createElement("img");
     icon.src = "/images/d/dc/Whiteskull.png";
     icon.className = "skull-icon";
     icon.style.left = skull.x + "px";
     icon.style.top = skull.y + "px";
     icon.dataset.index = index;

     const popup = document.createElement("div");
     popup.className = "popup";
     popup.innerHTML = `${skull.title}
${skull.desc}`;
     popup.style.left = (skull.x + 30) + "px";
     popup.style.top = (skull.y - 10) + "px";

     icon.addEventListener("click", () => {
       popup.style.display = popup.style.display === "block" ? "none" : "block";
     });

     document.addEventListener("click", (e) => {
       if (!icon.contains(e.target) && !popup.contains(e.target)) {
         popup.style.display = "none";
       }
     });

     map.appendChild(icon);
     map.appendChild(popup);
   });

   // Adiciona os corações
   hearts.forEach((heart, index) => {
     const icon = document.createElement("img");
     const desc = heart.desc || "Pegue o coração para se curar";
     icon.src = "/images/d/d9/Heart.png";
     icon.className = "heart-icon";
     icon.style.left = heart.x + "px";
     icon.style.top = heart.y + "px";
     icon.dataset.index = index;

     const popup = document.createElement("div");
     popup.className = "popup";
     popup.innerHTML = `Cura
${desc}`;
     popup.style.left = (heart.x + 30) + "px";
     popup.style.top = (heart.y - 10) + "px";

     icon.addEventListener("click", () => {
       popup.style.display = popup.style.display === "block" ? "none" : "block";
     });

     document.addEventListener("click", (e) => {
       if (!icon.contains(e.target) && !popup.contains(e.target)) {
         popup.style.display = "none";
       }
     });

     map.appendChild(icon);
     map.appendChild(popup);
   });

   // Ícone do Puzzle
   const button = document.createElement("img");
   button.className = "puzzle-button";
   button.src = "/images/d/de/Engrenagem.png";
   button.alt = "Puzzle";
   button.style.left = puzzleButton.x + "px";
   button.style.top = puzzleButton.y + "px";

   const popup = document.createElement("div");
   popup.className = "popup";
   popup.style.left = (puzzleButton.x + 60) + "px";
   popup.style.top = (puzzleButton.y - 10) + "px";
   popup.innerHTML = `
     Desafio Puzzle

     <iframe width="400" height="260" 
       src="${puzzleButton.videoUrl}" 
       frameborder="0" 
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
       allowfullscreen>
     </iframe>
   `;

   button.addEventListener("click", () => {
     popup.style.display = popup.style.display === "block" ? "none" : "block";
   });

   document.addEventListener("click", (e) => {
     if (!button.contains(e.target) && !popup.contains(e.target)) {
       popup.style.display = "none";
     }
   });

   map.appendChild(button);
   map.appendChild(popup);

// CSS

   document.head.insertAdjacentHTML('beforeend', `
 <style>
   .map-container {
     position: relative;
     width: 811px;
     height: 554px;
     background: url('/images/5/55/SabaodyMap.png') no-repeat center center;
     background-size: cover;
   }

   .skull-icon {
     position: absolute;
     width: 24px;
     height: 24px;
     cursor: pointer;
     transition: transform 0.2s, filter 0.2s;
   }

   .heart-icon {
     position: absolute;
     width: 26px;
     height: 26px;
     padding: 1px;
     cursor: pointer;
     transition: transform 0.2s, filter 0.2s;
   }

   .skull-icon:hover,
   .heart-icon:hover,
   .puzzle-button:hover {
     transform: scale(1.3);
     filter: brightness(1.5);
   }

   .popup {
     position: absolute;
     background: #1e1e1e;
     color: #fff;
     padding: 10px 14px;
     border-radius: 8px;
     border: 1px solid #444;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
     display: none;
     z-index: 10;
     max-width: 500px;
     font-size: 14px;
     animation: fadeIn 0.3s ease-out;
   }

   .popup iframe {
     border-radius: 6px;
     margin-top: 6px;
     max-width: 100%;
   }

   .puzzle-button {
     position: absolute;
     cursor: pointer;
     z-index: 999;
     width: 28px;
     height: 28px;
     transition: transform 0.2s, filter 0.2s;
   }

   @keyframes fadeIn {
     from { opacity: 0; transform: translateY(-5px); }
     to { opacity: 1; transform: translateY(0); }
   }
 </style>
 `);

</script>