#cook-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#cook-inner {
  display: flex;
  flex-direction: row-reverse; /* reverses the horizontal order */
  gap: 20px;
}

#cook-inner {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

#recipe-img {
  max-height: 20vh;
  object-fit: contain;
}

@media only screen and (max-width: 750px) {
  #recipe-img {
    height: 50vw;
  }
}

#ingredients-box {
  position: absolute;
  bottom: 40px;
  right: 40px;
  background-color: #fff597;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
}

#ingredients-box h3 {
  font-size: 2.5vw;
  text-align: center;
  margin-bottom: 25px;
}

#ingredient-list {
  width: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 25px;
}

@media only screen and (max-width: 750px) {
  #ingredients-box {
    position: static;
  }
  #ingredients-box h3 {
    font-size: 6vw;
  }
  #ingredient-list {
    width: 10px;
  }
}

/* before revision (dining table)
#drop-area {
  width: 30vw;
  height: 200px;
  border: 2px dashed #aaa;
  padding: 20px;
  background-color: #fff7e6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  font-size: 2vw;
  transition: 0.3s;
} */

#drop-area {
  width: 30vw;
  height: 250px;
  background: #fff7e6 url(../assets/wooden_texture.jpg) center center / cover no-repeat;
  border-radius: 5px;
  box-shadow:
    0 0 10px rgb(98, 87, 63),     /* soft outer shadow */
    inset 0 1px 0 #ffffff80,           /* top light edge */
    inset 0 -2px 4px #00000080;/* inner shadow bottom */
  padding: 0 50px 0 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  font-size: 2.5vw;
  transition: 0.3s;
}

#drop-area.hovered {
  box-shadow:
    0 6px 15px rgba(255, 200, 100, 0.8),
    inset 0 1px 0 #ffffff80,
    inset 0 -2px 4px rgba(255, 200, 100, 0.8),
    0 0 10px rgba(255, 200, 100, 0.8); /* warm glow on hover */
}

@media only screen and (max-width: 750px) {
  #drop-area {
    height: 30vw;
    width: 85vw;
    font-size: 5vw;
  }
}

.dropped-item {
  background-color: #ffe;
  border: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border-radius: 8px;
  font-weight: bold;
}

#ingredient-list li:active {
  transform: scale(1.1);
  transition: transform 0.2s ease;
  cursor: grabbing;
}

@keyframes popIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}

.dropped-item {
  animation: popIn 0.3s ease;
  transition: transform 0.3s ease;
}

@keyframes fadeInStep {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#step-instruction {
  animation: fadeInStep 0.5s ease;
}

#done-message {
  animation: fadeInStep 0.6s ease;
}

#done-message-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 250px;
  z-index: 100; /* on top of the chara */
}

#done-message-box p {
  font-size: 2vw;
}

.btn-style-play-again {
  color: #b85d39;
  background-color: #fff597;
  border-radius: 5px;
  transition: 0.5s;
  font-size: 2vw;
  border: 0;
}

.btn-style-play-again:hover {
  box-shadow: inset 2px 2px 4px #b85d39, inset -2px -2px 4px #b85d39;
}

@media only screen and (max-width: 750px) {
  #done-message-box p {
    font-size: 5vw;
  }
  .btn-style-play-again {
    font-size: 5vw;
  }
}

#game-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

#timer {
  font-size: 30px;
  text-shadow: 3px 0 #fff597,
              -3px 0 #fff597,
              0 2px #fff597,
              0 -2px #fff597;
}

/* confetti */
.emoji {
  position: fixed;
  font-size: 2rem;
  /* animation: fall 0.5s cubic-bezier(.53,-0.19,.88,.95) forwards; */
  pointer-events: none;
  z-index: 999;
  animation: emojiSpread 1.6s ease-out forwards;
}

@keyframes emojiSpread {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: 
      rotate(var(--spin))
      translateX(calc(var(--distance) * cos(var(--angle))))
      translateY(calc(-1 * var(--distance) * sin(var(--angle))));
    opacity: 0;
  }
}

.drop-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.drop-container {
  position: relative;
  display: inline-block;
}

.character-wrapper {
  position: absolute;
  width: fit-content;
}

#game-character {
  position: absolute;
  top: -110px;    /* Naik ke atas drop area */
  left: -10px;   /* Geser ke kiri dari ujung drop area */
  width: 100px;
  z-index: 10;
}

#character-shadow {
  position: absolute;
  bottom: -22px;
  left: 15px;
  width: 48px;
  height: 12px;
  background:#dd7739;
  border-radius: 50%;
  z-index: 1;
  filter: blur(2px);
}

@keyframes charaJumping {
  0%   { transform: translateY(0) scaleY(1); }
  10%  { transform: translateY(0) scaleY(0.9); }   /* squash before jump */
  30%  { transform: translateY(-10px) scaleY(1.05); } /* peak of jump */
  50%  { transform: translateY(-20px) scaleY(1); }
  70%  { transform: translateY(-10px) scaleY(1.05); }
  90%  { transform: translateY(0) scaleY(0.95); }   /* squash on landing */
  100% { transform: translateY(0) scaleY(1); }
}

@keyframes shadowJumping {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  10%      { transform: scaleX(1.2); opacity: 0.95; }
  30%      { transform: scaleX(0.8); opacity: 0.6; }
  50%      { transform: scaleX(0.6); opacity: 0.4; }
  70%      { transform: scaleX(0.8); opacity: 0.6; }
  90%      { transform: scaleX(1.1); opacity: 0.9; }
}

@keyframes panicShake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  30%  { transform: translateX(10px); }
  45%  { transform: translateX(-8px); }
  60%  { transform: translateX(8px); }
  75%  { transform: translateX(-5px); }
  90%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}