.ship {
  width: 20px; /* Needs width for draggable to work */
  height: 20px;
  overflow: display;
  margin-bottom: 10px;
}

.ship-vertical .ship-block {
  display: block;
}

.ship-block:first-child {
  cursor: move;
}

.ship .inner {
  width: 300px;
}

.row .tile, .ship-block, .ai-board .row .tile.hasPiece:not(.hit)  {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  background: #20b2aa;
}


.row .tile.hasPiece, .ship-block {
  background: #555;
}

.row .tile.hasPiece.hit {
  background: #0f0;
}

.row .tile.hasPiece.sunk {
  background: #f00;
}

.row .tile.shot {
  background: #999;
}