canvas {
    touch-action: none; /* Dokunma hareketlerinin sayfayı kaydırmasını engeller */
  }

  span {
      pointer-events: none;
  }

  body, img, p, span {
      -webkit-user-select: none;    /* Seçimi engelle (Safari, iOS) */
      -moz-user-select: none;       /* Seçimi engelle (Firefox) */
      -ms-user-select: none;        /* Seçimi engelle (Internet Explorer) */
      user-select: none;            /* Seçimi engelle (Diğer tarayıcılar) */
      
      -webkit-touch-callout: none;  /* Uzun basma menüsünü devre dışı bırak */
  }
  
  .level-container {
    /* background-color: rebeccapurple; */
    position: absolute;
    left: 50%;
    top: 5vh;
    /* top: -2%; */
    width: 30vw;
    height: 5vh;
    display: flex;
    /* flex-direction: column; */
    /* align-items: center; */
    /* transform: translateX(-30%) translateY(-50%); */
    transform: translateX(-30%);
  }
  
  .level-indicator {
    /* background-color: black; */
    /* opacity: 0.6; */
    position: absolute;
    top: 0vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 28vw;
    height: 1vw;
    /* margin-bottom: 10px; */
    transform: translateX(-18%) translateY(50%);
  }
  
  .map-info {
    /* background-color: red; */
    position: relative;
    width: 3vw;
    height: 3vw;
    /* top: 50%; */
    text-align: center;
  }

  .map-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
  }
  
  .map-name-text, .map-name-text-next {
    position: absolute;
    width: 5vw;
    height: 5vw;
    font-size: 0.75vw;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    text-shadow:
      0.05vw 0.05vw 0px #1b2460,
      -0.05vw 0.05vw 0px #1b2460,
      0.05vw -0.05vw 0px #1b2460,
      -0.05vw -0.05vw 0px #1b2460;
  }

  .map-name-text {
    color: #a2d656;
  }

  .map-name-text-next {
    color: #f5f5f5;
  }

  /* .level-icon img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 5px;
  } */
  
  .level-text {
    /* background-color: black; */
    position: absolute;
    /* top: -1vh; */
    font-size: 1vw;
    font-weight: bold;
    text-align: center;
    top: -80%;

    color: #fefefe;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* transform: translateX(6%); */

  text-shadow:
    0.05vw 0.05vw 0px #1b2460,
    -0.05vw 0.05vw 0px #1b2460,
    0.05vw -0.05vw 0px #1b2460,
    -0.05vw -0.05vw 0px #1b2460;
  }
  
  .circle-container {
    /* background-color: red; */
    /* opacity: 0.6; */
    position: absolute;
    top: 0vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20vw; /* Yuvarlakların toplam yayıldığı alan */
    height: 1vw;
    /* transform: translateX(-50%) translateY(-50%); */
    transform: translateX(-5%) translateY(50%);
  }
  
  .circle {
    position: relative;
    top: 1vw;
    width: 1vw;
    height: 1vw;
    /* border-radius: 50%; */
    /* background-color: black; */
    background-image: url('./sprites/main_menu/level_progres_empty.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    /* transform: translateY(25%); */
  }
  
  /* .circle.filled {
    background-color: limegreen;
  }
  
  .circle.empty {
    background-color: black;
  } */

  @media (max-width: 768px) and (pointer: coarse) {
    .level-container {
      /* background-color: black; */
      position: absolute;
      left: 50%;
      /* top: 10.5vh; */
      top: 16vh;
      width: 50vw;
      height: 8vh;
      /* display: none; */
    }

    .level-indicator {
      top: -0.5vh;
      width: 46vw;
      height: 2vw;
    }

    .map-info {
      width: 6vw;
      height: 6vw;
    }

    .circle-container {
      width: 32vw;
      height: 2vw;
    }

    .circle {
      width: 2vw;
      height: 2vw;
    }

    .level-text {
      font-size: 2vw;
    }

    .map-name-text, .map-name-text-next {
      /* background-color: black; */
      font-size: 1.5vw;
      /* left: 25%; */
      width: 15vw;
    }
  }