.creature, .show-life {
  height: 28px;
  width: 28px;
  background-size: 28px;
  background-position: center;
  background-repeat: no-repeat;
}

.creature {
  position: absolute;
  margin-top: -5px;
  margin-left: -5px;
}

.show-life {
  display: inline-block;
  background-image: url(../images/pacman-freeze.gif);
}

.creature.pacman {
  background-image: url(../images/pacman.gif);
}

.creature.pacman[direction="right"] {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.creature.pacman[direction="up"] {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.creature.pacman[direction="down"] {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.creature.ghost-normal.ghost1 {
  background-image: url(../images/ghost1-right.gif);
}

.creature.ghost-normal.ghost2 {
  background-image: url(../images/ghost2-right.gif);
}

.creature.ghost-normal.ghost3 {
  background-image: url(../images/ghost3-right.gif);
}

.creature.ghost-normal.ghost4 {
  background-image: url(../images/ghost4-right.gif);
}

.creature.ghost-normal.ghost1[direction="up"] {
  background-image: url(../images/ghost1-up.gif);
}

.creature.ghost-normal.ghost2[direction="up"] {
  background-image: url(../images/ghost2-up.gif);
}

.creature.ghost-normal.ghost3[direction="up"] {
  background-image: url(../images/ghost3-up.gif);
}

.creature.ghost-normal.ghost4[direction="up"] {
  background-image: url(../images/ghost4-up.gif);
}

.creature.ghost-normal.ghost1[direction="down"] {
  background-image: url(../images/ghost1-down.gif);
}

.creature.ghost-normal.ghost2[direction="down"] {
  background-image: url(../images/ghost2-down.gif);
}

.creature.ghost-normal.ghost3[direction="down"] {
  background-image: url(../images/ghost3-down.gif);
}

.creature.ghost-normal.ghost4[direction="down"] {
  background-image: url(../images/ghost4-down.gif);
}

.creature.ghost-normal[direction="left"] {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.creature.ghost-blue {
  background-image: url(../images/ghost-blue.gif);
}

.creature.ghost-blue.ghost-flash {
  background-image: url(../images/ghost-white.gif);
}

.creature.ghost-eyes {
  background-image: url(../images/ghost-eyes.png);
}