/* Áreas de drop fixas */
.drop-middle {
  position: absolute;
  width: 5%;
  height: 9.3%;
  border: 2px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8%;
  z-index: 5;
  transform: translate(50%, -50%) scale(0.8);
}

/* Cores dos quadrados */
#middle-tamandua {
  background-color: rgba(46, 204, 64, 0.7); /* Verde */
  border: 2px solid #218C28;
  box-shadow: 0 0 5px rgba(33, 140, 40, 0.5);
}


#middle-macaco {
  background-color: rgba(255, 255, 255, 0.85); /* Branco */
  border: 2px solid #aaa;
  box-shadow: 0 0 5px rgba(150, 150, 150, 0.5);
}


#middle-onca {
  background-color: rgba(0, 116, 217, 0.7); /* Azul */
  border: 2px solid #00509E;
  box-shadow: 0 0 5px rgba(0, 80, 158, 0.5);
}

#drop-middle-tamandua {
  background-color: rgba(46, 204, 64, 1); /* Verde forte */
}

#drop-middle-macaco {
  background-color: rgba(255, 255, 255, 1); /* Branco mais opaco */
}

#drop-middle-onca {
  background-color: rgba(0, 116, 217, 1); /* Azul forte */
}


/* Animais */
.animal-middle {
  position: relative;
  width: 77%;
  height: 77%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  cursor: grab;
  user-select: none;
  z-index: 10;
  font-size: 130%;
}

.animal-middle:active {
  cursor: grabbing;
}

/* Destinos */
.destino-middle {
  position: absolute;
  width: 6%;
  height: 12%;
  border: 3px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8%;
  z-index: 5;
}

#destino-middle-tamandua {
  background-color: rgba(46, 204, 64, 1); /* Verde mais leve */
}

#destino-middle-macaco {
  background-color: rgba(255, 255, 255, 1); /* Branco suave */
}

#destino-middle-onca {
  background-color: rgba(0, 116, 217, 1); /* Azul mais suave */
}