{# index.twig #}
{% extends "src/layouts/main.twig" %}
{% set headTitle = "Tool Master Template - Home" %}
{% block page %}
	{% include "src/components/header-block/index.twig" with {title: "Τίτλος Παιχνιδιού", subtitle: "Lorem Ipsum Dolor Sit Amet", centered: true
} %}
<section>
		<div class="dnd-game-map-wrapper">
      <div class="game-wrapper">
  <div class="intro">
    <div class="intro-contents">
      <div class="intro-text">
        <p class="intro-text-small">
          Τα περισσότερα από τα μνημεία αυτά σώζονται έως τις μέρες μας.
          Μας μιλούν για τις κατοικίες των ανθρώπων, τους ιερούς τους
          χώρους, την ανάγκη τους για προστασία από εισβολείς,
          τον τρόπο που διαχειρίστηκαν το περιβάλλον τους. Τα μνημεία
          αποτελούν τις απτές μαρτυρίες του παρελθόντος της Μεσσηνίας.
        </p>
        <p class="intro-text-normal">
          Σε ποιές θέσεις όμως βρίσκονται;
        </p>
        <p class="intro-text-light">
          Σύρε τα μνημεία στα αντίστοιχα τοπωνύμια του χάρτη.
        </p>
      </div>
      <div class="intro-image">
        <img src="/games/dnd-map/images/dnd-map-intro.png" alt="Εισαγωγική εικόνα παιχνιδιού αντιστοίχισης σημείων σε χάρτη" />
      </div>
      <button class="hit-play">Παίξε τώρα</button>
    </div>
  </div>

  <div class="gameplay">
    <div class="gameplay-contents">
      <div class="order-titles">
      </div>

      <div class="drag-and-drop">
        <div class="draggable-elements">
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/samarina.jpg"
              id="picture01"
              alt="Αγία Σαμαρίνα"
            />
            <div class="enlarge">
              <span> Αγία Σαμαρίνα </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/kastania.jpg"
              id="picture02"
              alt="Άγιος Πέτρος Καστάνιας"
            />
            <div class="enlarge">
              <span> Άγιος Πέτρος Καστάνιας </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/anaktoro_nestoros.jpg"
              id="picture03"
              alt="Ανάκτορο Νέστορος"
            />
            <div class="enlarge">
              <span> Ανάκτορο Νέστορος </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/andromonastiro.jpg"
              id="picture04"
              alt="Ανδρομονάστηρο"
            />
            <div class="enlarge">
              <span> Ανδρομονάστηρο </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/thouria.jpg"
              id="picture05"
              alt="Ασκληπιείο Θουρίας"
            />
            <div class="enlarge">
              <span> Ασκληπιείο Θουρίας </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/voidokoilia.jpeg"
              id="picture06"
              alt="Θολωτός Τάφος Βοϊδοκοιλιάς"
            />
            <div class="enlarge">
              <span> Θολωτός Τάφος Βοϊδοκοιλιάς </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/akovitika.jpg"
              id="picture07"
              alt="Ιερό Ποσειδώνα"
            />
            <div class="enlarge">
              <span> Ιερό Ποσειδώνα </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/iklaina.jpg"
              id="picture08"
              alt="Ίκλαινα"
            />
            <div class="enlarge">
              <span> Ίκλαινα </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/kardamyli.jpg"
              id="picture09"
              alt="Οχυρό συγκρότημα Τρουπάκηδων - Μούρτζινων"
            />
            <div class="enlarge">
              <span> Οχυρό συγκρότημα Τρουπάκηδων - Μούρτζινων </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/kastro_kalamatas.jpg"
              id="picture10"
              alt="Κάστρο Καλαμάτας"
            />
            <div class="enlarge">
              <span> Κάστρο Καλαμάτας </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/kastro_koronis.jpg"
              id="picture11"
              alt="Κάστρο Κορώνης"
            />
            <div class="enlarge">
              <span> Κάστρο Κορώνης </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/kastro_methonis.jpg"
              id="picture12"
              alt="Κάστρο Μεθώνης"
            />
            <div class="enlarge">
              <span> Κάστρο Μεθώνης</span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/mila.jpg"
              id="picture13"
              alt="Κάστρο Μίλα"
            />
            <div class="enlarge">
              <span> Κάστρο Μίλα </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/malthi.jpg"
              id="picture14"
              alt="Μάλθη"
            />
            <div class="enlarge">
              <span> Μάλθη </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/metamorfosi_sotiros.jpg"
              id="picture15"
              alt="Μεταμόρφωση Σωτήρος"
            />
            <div class="enlarge">
              <span> Μεταμόρφωση Σωτήρος </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/niokastro.jpg"
              id="picture16"
              alt="Νιόκαστρο"
            />
            <div class="enlarge">
              <span> Νιόκαστρο </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/nihoria.jpg"
              id="picture17"
              alt="Νιχώρια"
            />
            <div class="enlarge">
              <span> Νιχώρια </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/palaiokastro.jpg"
              id="picture18"
              alt="Παλαιόκαστρο"
              style="object-position: center top;"
            />
            <div class="enlarge">
              <span> Παλαιόκαστρο </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/petalidi.jpg"
              id="picture19"
              alt="Πεταλίδι"
            />
            <div class="enlarge">
              <span> Ρωμαϊκά βαλανεία </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
          <div class="coin">
            <img
              class="draggable"
              draggable="true"
              src="/games/dnd-map/images/peristeria.jpg"
              id="picture20"
              alt="Θολωτοί Τάφοι Περιστεριάς"
            />
            <div class="enlarge">
              <span> Θολωτοί Τάφοι Περιστεριάς </span>
            </div>
            <div class="completed">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="48.247"
                height="48.247"
                viewBox="0 0 48.247 48.247"
              >
                <g
                  id="Group_415"
                  data-name="Group 415"
                  transform="translate(-3878.395 -734.189)"
                >
                  <circle
                    id="Ellipse_138"
                    data-name="Ellipse 138"
                    cx="24.124"
                    cy="24.124"
                    r="24.124"
                    transform="translate(3878.395 734.189)"
                    fill="#222"
                  />
                  <path
                    id="Path_1460"
                    data-name="Path 1460"
                    d="M3916.826,750.673,3898.8,768.7l-9.417-9.417"
                    fill="none"
                    stroke="#abc8bd"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </div>
          </div>
        </div>

        <div class="droppable-elements">
          <div class="map-picture">
            <img src="/games/dnd-map/images/map.png" alt="Χάρτης της Μεσσηνίας" />
          </div>
          <span class="map-title">Μεσσηνία</span>
          <span class="map-subtitle1">ΚΥΠΑΡΙΣΣΙΑΚΟΣ <br> ΚΟΛΠΟΣ</span>
          <span class="map-subtitle2">ΜΕΣΣΗΝΙΑΚΟΣ <br> ΚΟΛΠΟΣ</span>
          <div class="droppable droppable01" data-draggable-id="picture12">
            <span class="area-title">Μεθώνη</span>
          </div>
          <div class="droppable droppable02" data-draggable-id="picture11">
            <span class="area-title">Κορώνη</span>
          </div>
          <div class="droppable droppable03" data-draggable-id="picture06">
            <span class="area-title">Βοϊδοκοιλιά</span>
          </div>
          <div class="droppable droppable04" data-draggable-id="picture18">
            <span class="area-title">Παλαιόκαστρο </span>
          </div>
          <div class="droppable droppable05" data-draggable-id="picture17">
            <span class="area-title">Ριζόμυλος</span>
          </div>
          <div class="droppable droppable06" data-draggable-id="picture03">
            <span class="area-title">Άνω Εγκλιανός</span>
          </div>
          <div class="droppable droppable07" data-draggable-id="picture15">
            <span class="area-title">Χριστιάνοι</span>
          </div>
          <div class="droppable droppable08" data-draggable-id="picture20">
            <span class="area-title">Περιστεριά</span>
          </div>
          <div class="droppable droppable09" data-draggable-id="picture14">
            <span class="area-title">Κόκλας</span>
          </div>
          <div class="droppable droppable10" data-draggable-id="picture13">
            <span class="area-title">Μίλα</span>
          </div>
          <div class="droppable droppable11" data-draggable-id="picture05">
            <span class="area-title">Άνθεια</span>
          </div>
          <div class="droppable droppable12" data-draggable-id="picture07">
            <span class="area-title">Ακοβίτικα</span>
          </div>
          <div class="droppable droppable14" data-draggable-id="picture04">
            <span class="area-title">Πετράλωνα</span>
          </div>
          <div class="droppable droppable15" data-draggable-id="picture01">
            <span class="area-title">Ελληνοεκκλησία</span>
          </div>
          <div class="droppable droppable16" data-draggable-id="picture10">
            <span class="area-title">Καλαμάτα</span>
          </div>
          <div class="droppable droppable17" data-draggable-id="picture19">
            <span class="area-title">Πεταλίδι</span>
          </div>
          <div class="droppable droppable18" data-draggable-id="picture02">
            <span class="area-title">Καστάνια</span>
          </div>
          <div class="droppable droppable19" data-draggable-id="picture16">
            <span class="area-title">Πύλος</span>
          </div>
          <div class="droppable droppable20" data-draggable-id="picture09">
            <span class="area-title">Καρδαμύλη</span>
          </div>
          <div class="droppable droppable21" data-draggable-id="picture08">
            <span class="area-title">Ίκλαινα</span>
          </div>
        </div>
        <div class="map-container">
        </div>

      </div>

      <button id="myBtn"></button>

      <div id="myModal" class="modal">
        <div class="modal-content">
          <div class="message-content-wrapper" id="modal-message">
            Message content (js controlled)
          </div>
          <button class="close">
            <span class="button-text">Button Text (js controlled)</span>
          </button>
        </div>
      </div>

      <button id="my2ndBtn"></button>

      <div id="my2ndModal" class="modal">
        <div class="modal-content">
          <div class="message-content-wrapper" id="modal-message">
            <img src="/games/dnd-map/images/congrats-face.png" aria-hidden="true" />
            <div class="message-title congrats">
              <div class="message-main-title">Συγχαρητήρια!</div>
              <div class="message-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div>
          </div>
          <a class="close go-back" href="https://www.efamess.gr/paichnidia/">
            <span class="button-text">Παίξε ένα άλλο παιχνίδι</span>
          </a>
        </div>
      </div>

      <div id="pictureModal" class="picture-modal">
        <div class="picture-modal-content">
          <!-- img src js controlled -->
          <img class="picture-modal-img" src="/games/dnd-map/images/picture01.png" />
          <div class="close-picture-modal">
            <svg
              width="60px"
              height="60px"
              viewBox="0 0 25 25"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M9.5 15.5L12.5 12.5M12.5 12.5L15.5 9.5M12.5 12.5L9.5 9.5M12.5 12.5L15.5 15.5M20.5 12.5C20.5 16.9183 16.9183 20.5 12.5 20.5C8.08172 20.5 4.5 16.9183 4.5 12.5C4.5 8.08172 8.08172 4.5 12.5 4.5C16.9183 4.5 20.5 8.08172 20.5 12.5Z"
                stroke="#fff"
                stroke-width="1.2"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

		</div>
</section>

		<script src="/games/dnd-map/js/main.js"></script>
{% endblock %}
