* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;          
}


htlm, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-image: url('bg.gif');
  background-repeat: repeat;
  overflow: hidden;
}

.playfield {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.playfield button {
  border: 1px solid #111;
  box-shadow: inset 1px 1px #888, inset -1px -1px #888;
  background: #444;
  color: #CCC;
  margin: 10px;
}

.node, .control {
  user-select: none;

  position: absolute;
  display: inline-block;

  width: 1.5em;
  height: 1.5em;
  top: -0.75em;
  left: -0.75em;

  line-height: 1.5;
  text-align: center;

  color: #CCC;
  border: 1px solid 0;
  border-radius: 1em;
  box-shadow:
    inset 1px 1px #888,
    inset 1px -1px #888,
    inset -1px 1px #888,
    inset -1px -1px #888;
  background: #444;
}

.control {
  width: 0.5em;
  height: 0.5em;
  top: -0.25em;
  left: -0.25em;
}

.control.from {
  opacity: 0.25;
}

.control.to {
  opacity: 1;
}

.ship {
  position: absolute;
  width: 1em;
  height: 1em;
  top: -0.5em;
  left: -0.5em;
  border-radius: 1em;
  background: red;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
}