body {
  margin: 0;
  background: #222;
  font-family: sans-serif;
  user-select: none;
  overflow: hidden;
}

#game {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  background: #222;
  overflow: hidden;
}

#udder,
#udder-anim {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 435px;
  height: auto;
  pointer-events: none;
  z-index: 1;
}

.teat-zone {
  position: absolute;
  bottom: 260px;
  width: 65px;
  height: 200px;
  z-index: 2;
  cursor: grab;
}

.teat-zone[data-id="1"] { left: 140px; }
.teat-zone[data-id="2"] { left: 245px; }
.teat-zone[data-id="3"] { left: 310px; }
.teat-zone[data-id="4"] { left: 435px; }

#hand {
  position: absolute;
  z-index: 4;
  width: 120px;
  pointer-events: none;
}

#bucket {
  position: absolute;
  bottom: 10px;
  left: 200px;
  width: 200px;
  height: 80px;
  background: #ccc;
  border: 2px solid #333;
  z-index: 0;
}

#milk-fill {
  width: 100%;
  height: 0;
  background: white;
  position: absolute;
  bottom: 0;
}