main.css

.container {
  width:300px;
  margin:0 auto;
  font-family: Arial, Helvetica, sans-serif;

}

.title {

}

.playerCount {
  line-height: 10px;
  font-weight:bold;
}

.playerCount span {
  font-weight:normal;
}

#grid {
width: 320px;
display: block;
background-color: purple;
}

.grid-cell {
  width: 80px;
  height: 80px;
  background-color:green;
  position: relative;
  float: left;
}

.grid-cell-dot, .grid-cell-counter{
  border-radius: 50%;
  position: absolute;
}

.grid-cell-dot {
  width: 25px;
  height: 25px;
  background-color: pink;
  left: 27.5px;
  top: 27.5px;
  z-index: 1;
}

.grid-cell-counter {
  width: 50px;
  height: 50px;
  left: 15px;
  top: 15px;
  z-index: 2;
}

.grid-cell-dot-empty {
  z-index: 3;
}

.grid-cell-counter-active {
  transition: transform 0.2s ease-in-out;  

}

.grid-cell-counter-active:hover {
  transform: scale(1.1, 1.1);
}

.grid-cell-counter-chosen {
border:3px solid #ffffff;
}

.grid-cell-counter-red {
  background-color: red;
}

.grid-cell-counter-blue {
  background-color: blue;
}