@font-face{font-family:'harbour';src:url('lib/Roboto-Light.ttf')}

body{
    margin: 0;
    font-family: "harbour";
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    }
    
    #full-area {
      position: absolute;
      width: 100%;
      height: 100vh;
      user-select: none;
      background-size: cover;
      overflow: hidden;
      background: white;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      touch-action: none;
      }

      #full-area:focus {
        outline: none !important;
      }

      #game-area {
        width: 615px;
        height: 615px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        display: none;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        background: url('./media/background.webp');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }

      #game{
        width: 615px;
        height: 615px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #heartss{
        width: 615px;
        height: 635px;
        position: relative;
        z-index: 1000;
        display: none;
      }


      iframe{
        position: absolute;
        width: 615px;
        height: 615px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;

    }

    #can{
      position: absolute;
      top: 87%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 150px;
      height: auto;
      cursor: grab;
    }

    #pieces {
      position: absolute;
      width: 122px; /* Ensures enough space for two columns of 40px width */
      height: 108px; /* Total height of the container */
      left: 50%;
      top: 85%;
      transform: translate(-50%,-50%);
      display: flex;
      flex-wrap: wrap; /* Allows the content to wrap to the next row */
      justify-content: space-between; /* Ensures space between columns */
      align-content: space-between; /* Distributes rows evenly across the container */
      padding: 0; /* No extra inner spacing */
      border-radius: 100%;
      z-index: 9;
    }
    
    #pieces img {
      width: 25px; /* Fixed width */
      height: 25px; /* Fixed height */
      margin: 0; /* Reset margins */
      cursor: pointer;
    }
    
    .dropZone{
      width: 160px;
      height: auto;
      opacity: 0.5;
    }

    .notdropZone{
      width: 38px; /* Fixed width */
      height: 38px; /* Fixed height */
    }

    #paper1{
      position: absolute; /* Keep elements in their original position */
      transform: translateX(22.5px) translateY(48px);
    }

    #paper2{
      position: absolute; /* Keep elements in their original position */
      transform: translateX(75.4px) translateY(53.5px);
    }

    #paper3{
      position: absolute; /* Keep elements in their original position */
      transform: translateX(51.5px) translateY(45.5px);
    }

    #paper4{
      position: absolute; /* Keep elements in their original position */
      transform: translateX(18px) translateY(75px);
    }

    #paper5{
      position: absolute; /* Keep elements in their original position */
      transform: translateX(50px) translateY(80px);
    }

    #paper6{
      position: absolute; /* Keep elements in their original position */
      transform: translateX(75px) translateY(68px);
    }

    #drop-places{
      position: absolute;
      width: 446px;
      height: 410px;
      left: 12.2%;
      top: 0%;
    }

    #Apaper1{
      position: absolute;
      top: 14.5%;
      left: 9.5%;
      opacity: 0;
      width: 130px;
      height: auto;
      z-index: 1;
    }

    #Apaper2{
      position: absolute;
      top: 13%;
      left: 21.7%;
      opacity: 0;
      width: 280px;
      height: auto;
      z-index: 2;
    }

    #Apaper3{
      position: absolute;
      top: 51.1%;
      left: 29.65%;
      width: 154px;
      height: auto;
      opacity: 0;
      z-index: 3;
    }

    #Apaper4{
      position: absolute;
      top: 28.9%;
      left: 40.8%;
      opacity: 0;
      width: 114px;
      height: auto;
      z-index: 4;
    }

    #Apaper5{
      position: absolute;
      top: 14.1%;
      left: 64.1%;
      opacity: 0;
      width: 136px;
      height: auto;
      z-index: 5;
    }

    #Apaper6{
      position: absolute;
      top: 43%;
      left: 65.3%;
      opacity: 0;
      width: 130px;
      height: auto;
      z-index: 6;
    }
    
    #drop-places .dropZone {
      transition: transform 0.3s ease;
  }
  
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 40px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  --c:no-repeat linear-gradient(#046D8B 0 0);
  background:
    var(--c) 0 0,
    var(--c) 100% 0,
    var(--c) 100% 100%,
    var(--c) 0 100%;
  animation: 
    l10-1 2s infinite linear,
    l10-2 2s infinite linear;
}
.loader::after {
  margin: 25%;
  transform: scale(-1);
}
@keyframes l10-1 {
  0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
  12.5%{background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
  25%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
  37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
  45%,
  55%  {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
  62.5%{background-size: 0    4px,4px 100%,100% 4px,4px 100%}
  75%  {background-size: 0    4px,4px 0   ,100% 4px,4px 100%}
  87.5%{background-size: 0    4px,4px 0   ,0    4px,4px 100%}
  100% {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
}

@keyframes l10-2 {
  0%,49.9%{background-position: 0 0   ,100% 0   ,100% 100%,0 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%,0 0   }
}