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

body{
    margin: 0;
    font-family:'Press Start 2P', cursive;
    user-select: none;
    font-family:'harbour', cursive;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    }
    
    #full-area {
        width: 100%;
        height: 100vh;
        user-select: none;
        background-size: cover;
        overflow: hidden;
        background-color: white;
        animation: gradient 10s ease infinite; 
        background-size: cover;
        background-repeat: no-repeat;
        scale: 1;
      }


      #full-area #game-area {
        position: absolute;
        width: 1024px;
        height: 600px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        border-radius: 0px;
        overflow: hidden;
        display: none;
        background: url('./media/bg.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        
      }
      
      iframe{
        position: absolute;
        width: 1024px;
        height: 600px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;

    }
#recipes {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 98px;
  margin-left: 70px;
  z-index: 5;
}

.recipe {
  height: 140px;
  position: relative;
  display: block;
}

.recipe-container {
  position: relative;
  width: 100px;
  height: 180px;
  margin-top: 10px;
  animation: floatRecipe 3s ease-in-out infinite;

}

#finger{
  width: auto;
  height: 100px;
  margin-left: 180px;
  margin-top: 30px;
  animation: floatRecipe 3s ease-in-out infinite;

}

@keyframes floatRecipe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.recipe-list {
  position: absolute;
  top: 18px;
  left: 19px;
  width: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 13px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.recipe-item {
  display: flex;
  align-items: center;
}

.recipe-item img {
  width: 90%;
  height: auto;
  object-fit: contain;
}

.mini-ingredient {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.checkmark-overlay {
  position: absolute;
  top: 35px;
  right: 0px;
  width: 100px;
  height: 100px;
  z-index: 10;
  animation: popIn 0.4s ease;
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}



#bottle {
  position: absolute;
  top: 89%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 130px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  z-index: 3;
}

#ingredientsFall{
  position: absolute;
  height: 600px;
  width: 550px;
  left: 295px;
}

#bottleImg{
  position: absolute;
  width: 78px;
  height: 130px;
  z-index: 2;
}

#bottle-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.ingredient {
  width: 100%;
  height: 52px;
  /* transform: scaleY(0); */
  transform-origin: bottom;
  transition: transform 0.4s ease, background-color 0.3s ease;
  z-index: 9999;
}

#explosion {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}

.explosion-piece {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background-color: red;
  opacity: 1;
  z-index: 15;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}


#line1 {
  top: 61px;
  position: absolute;
  background: url('./media/Earth\ Jarred.png');
  background-repeat: no-repeat;
  background-size: contain;
}

#line2 {
  top: 76px;
  position: absolute;
  background: url('./media/Earth\ Jarred.png');
  background-repeat: no-repeat;
  background-size: contain;
}

#line3 {
  top: 91px;
  position: absolute;
  background: url('./media/Earth\ Jarred.png');
  background-repeat: no-repeat;
  background-size: contain;
}

#line4 {
  top: 106px;
  position: absolute;
  background: url('./media/Earth\ Jarred.png');
  background-repeat: no-repeat;
  background-size: contain;
}


@keyframes wobble {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.falling-ingredient {
  animation: wobble 1.2s infinite ease-in-out;
  z-index: 9999;
  will-change: transform;
}

#time-container {
  position: absolute;
  width: 180px;
  height: 28px;
  top: 30%;
  left: 74%;
  z-index: 2;
  clip-path: polygon(0% 0%, 92% -6%, 93% 90%, 1% 100%);
  display: flex;
  justify-content: left;
  align-items: center;
  color: black;
  font-weight: bold;
  letter-spacing: 3px;
  margin-top: -1.8px;
  font-size: 20px;
  gap: 10px;
  z-index: 99;
}

#clock-icon {
  width: 25px;
  height: 25px;
  image-rendering: pixelated;
}

#timer {
  font-size: 20px;
  font-weight: bold;
  color: #2d2e44;
  transition: color 0.3s ease;
}

/* Red + heartbeat effect */
.timer-danger {
  color: red !important;
  animation: heartbeat 1s infinite;
}

#trash{
  position: absolute;
  width:100px;
  height: 150px;
  top: 76%;
  left: 83%;
  cursor: pointer;
}

#trash img{
  background-color: white;
  border: 2px solid black;
  padding: 5px;
  width: 60%;
  margin-top: 40px;
  padding-top: 7px;
  cursor: pointer;
}

#portal {
  position: absolute;
  width: 240px;
  height: 480px;
  top: 20%;
  left: 7%;
  cursor: pointer;
  clip-path: polygon(
    2% 6%,
    57% 5%,
    83% 20%,
    83% 20%,
    97% 100%,
    0% 100%,
    2% 6%,
    94% 60%
  );
  background: radial-gradient(circle at center, rgba(255, 255, 180, 0.3), rgba(255, 240, 100, 0.05), transparent);
  animation: portalInnerGlow 3s ease-in-out infinite;
  border-radius: 30px;
  box-shadow: none;
  background: url('./media/shine.gif');
}


@keyframes heartbeat {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.15); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

#congrats-popup {
  position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1024px;
      height: 600px;
      z-index: 9999;
      display: none;
      text-align: center;
}

    
    #CongratsText {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0); /* Start with scale 0 */
      width: 680px;
      height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.661);
      border: 4px solid #7949C4;
      color: #7949C4 !important;
      font-weight: bolder;
      letter-spacing: 10px;
      font-size: 70px;
      animation: poping 1.5s ease forwards; /* Apply the poping animation */
      cursor: pointer;
    }


    #losePopup {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1024px;
      height: 600px;
      z-index: 9999;
      display: none;
      text-align: center;
    }
    
    #loseText {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0); /* Start with scale 0 */
      width: 680px;
      height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.661);
      border: 4px solid #7949C4;
      color: #7949C4 !important;
      font-weight: bolder;
      letter-spacing: 10px;
      font-size: 80px;
      animation: poping 1.5s ease forwards; /* Apply the poping animation */
      cursor: pointer;
    }

    a{
      color: #7949C4;
    }
    
    #smoke {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 1s ease;
      width: 1024px;
      z-index: 2;
    }
    
    @keyframes poping {
      0% {
        transform: translate(-50%, -50%) scale(0); /* Start small */
      }
      100% {
        transform: translate(-50%, -50%) scale(1); /* Grow to normal size */
      }
    }


@keyframes rise {
  0% {
    bottom: -20px;
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px); /* Adjusted for smaller translation */
  }
  100% {
    bottom: 120px; /* Matches the height of #background-wrap */
    transform: translateX(-10px); /* Keep within the bounds */
  }
}


                      /*End Game*/


                      .preload {
                        width: 100vw;
                        height: 100vh;
                        background: white;
                        position: fixed;
                      }
                      
                      .preload__bottle {
                        position: absolute;
                        transform: translate(-50%, -50%);
                        left: 50%;
                        top: 50%;
                        width: 240px;
                        height: 200px;
                        border-radius: 40% 40% 50% 50% / 60% 60% 30% 30%;
                        background: #48A299;
                      }
                      
                      .preload__bottle h2 {
                        color: #fff;
                        font-size: var(--titleSize);
                        position: absolute;
                        top: 115px;
                        left: 85px;
                      }
                      
                      .preload__bottle::before {
                        content: '';
                        background: #48A299;
                        position: absolute;
                        width: 170px;
                        height: 50px;
                        left: calc(50% - 85px);
                        border-radius: 0;
                        margin-top: 10px;
                      }
                      
                      .preload__bottle::after {
                        content: '';
                        top: 0;
                        width: 200px;
                        left: calc(50% - 100px);
                        height: 20px;
                        background: #5CBBA8;
                        border-radius: 7% / 50%;
                        position: absolute;
                        z-index: 5;
                      }
                      
                      .preload__bottle_bubbles {
                        width: 30px;
                        height: 30px;
                        position: absolute;
                        top: 110px;
                        right: 50px;
                        opacity: 0;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.6);
                        border: 0.5px solid rgb(170, 168, 168);
                        animation: 3.5s flyaway ease infinite;
                      }
                      
                      .preload__bottle_bubbles.a {
                        right: 50px;
                        animation-duration: 2.5s;
                        animation-delay: 3.3s;
                      }
                      
                      .preload__bottle_bubbles.b {
                        width: 25px;
                        height: 25px;
                        right: 150px;
                        animation-duration: 3s;
                        animation-delay: 3.5s;
                      }
                      
                      .preload__bottle_bubbles.c {
                        width: 20px;
                        height: 20px;
                        right: 120px;
                        animation-duration: 2s;
                        animation-delay: 4s;
                      }
                      
                      .preload__bottle_bubbles::after {
                        content: '';
                        position: absolute;
                        width: 35%;
                        height: 25%;
                        background: rgba(255, 255, 255, 0.7);
                        border-radius: 50%;
                        top: 17%;
                        left: 15%;
                        transform: rotate(-45deg);
                      }
                      
                      .preload__bottle_zhizha {
                        width: inherit;
                        height: inherit;
                        background: #552f4e;
                        border-radius: 50% 50% 40% 40% / 25% 25% 60% 60%;
                        transform: scaleY(0.5) scaleX(0.93);
                        transform-origin: 50% 89%;
                        animation: 3s fillBottle linear;
                      }
                      
                      .preload__bottle_zhizha::after {
                        content: '';
                        width: 230px;
                        height: 100px;
                        border-radius: 70% 70% 50% 50% / 80% 80% 100% 100%;
                        background: #2d2e44;
                        left: calc(50% - 115px);
                        position: absolute;
                        margin-top: 3px;
                        animation: 3s waves infinite ease;
                      }
                      
                      .typing {
                        width: 3em;
                        overflow: hidden;
                        display: inline-block;
                        vertical-align: bottom;
                        animation: type 1s steps(5, end) infinite;
                      }
                      
                      @keyframes fillBottle {
                        0% {
                          transform: scaleY(0.1) scaleX(0.8);
                        }
                        50% {
                          transform: scaleY(0.5) scaleX(0.93);
                        }
                        100% {
                          transform: scaleY(0.5) scaleX(0.93);
                        }
                      }
                      
                      @keyframes flyaway {
                        0% {
                          transform: translateY(0px) scale(1);
                        }
                        10% {
                          opacity: 1;
                        }
                        50%, 100% {
                          transform: scale(1.5) translateY(-150px);
                          opacity: 0;
                        }
                      }
                      
                      @keyframes waves {
                        0%, 100% {
                          transform: scaleY(1.2);
                        }
                        50% {
                          transform: scaleY(1);
                        }
                      }
                      
                      @keyframes type {
                        0%, 100% {
                          width: 0;
                        }
                        50% {
                          width: 22px;
                        }
                      }
      
      /*preload end*/

#bottle {
  touch-action: none;
}