Usuário:Ttuzu

<script>

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

 const hearts = [
   { x: 280, y: 210, title: "Cura", desc: "Cura escondida: Quebre a caixa para obter uma cura.", icon: "/images/d/d9/Heart.png" },
   { x: 312, y: 196, title: "Cura", desc: "Pegue o coração para se curar", icon: "/images/d/d9/Heart.png" },
   { x: 245, y: 358, title: "Cura", desc: "Após o chefe, o jogador com menos vida receberá uma cura automática.", icon: "/images/d/d9/Heart.png" },
 ];

 const puzzleButton = {
   x: 244,
   y: 217,
   title: "Desafio Puzzle",
   desc: `<iframe width="400" height="260" src="https://www.youtube.com/embed/10rhyP32vdw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>`,
   icon: "/images/d/de/Engrenagem.png"
 };

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

 function createIconWithPopup({ x, y, icon, title, desc }, className) {
   const iconEl = document.createElement("img");
   iconEl.src = icon;
   iconEl.className = className;
   iconEl.alt = title;
   iconEl.title = title;
   iconEl.style.left = `${(x / 811) * 100}%`;
   iconEl.style.top = `${(y / 554) * 100}%`;

   const popup = document.createElement("div");
   popup.className = "popup";
   popup.innerHTML = `${title}
${desc}`;
   popup.style.left = `calc(${(x / 811) * 100}% + 30px)`;
   popup.style.top = `calc(${(y / 554) * 100}% - 10px)`;

   iconEl.addEventListener("click", (e) => {
     e.stopPropagation();
     popup.style.display = popup.style.display === "block" ? "none" : "block";
     iconEl.classList.add("clicked");
     setTimeout(() => iconEl.classList.remove("clicked"), 300);
   });

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

 skulls.forEach(skull => createIconWithPopup(skull, "skull-icon"));
 hearts.forEach(heart => createIconWithPopup(heart, "heart-icon"));
 createIconWithPopup(puzzleButton, "puzzle-button");

 document.addEventListener("click", () => {
   document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
 });

 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape") {
     document.querySelectorAll(".popup").forEach(p => p.style.display = "none");
   }
 });

</script>

<style>

 .map-container {
   position: relative;
   width: 100%;
   max-width: 811px;
   aspect-ratio: 811 / 554;
   background: url('/images/5/55/SabaodyMap.png') no-repeat center center;
   background-size: cover;
 }

 .skull-icon,
 .heart-icon,
 .puzzle-button {
   position: absolute;
   width: 26px;
   height: 26px;
   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%;
 }

 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(-5px); }
   to   { opacity: 1; transform: translateY(0); }
 }

 .clicked {
   animation: bounce 0.3s ease-in-out;
 }

 @keyframes bounce {
   0%   { transform: scale(1); }
   50%  { transform: scale(1.4); }
   100% { transform: scale(1); }
 }

</style>