.top {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  flex-direction: column;
}

.game-container {
  visibility: hidden;
}

.board {
  position: relative;
  background: #2e7d32;
  border: 1px solid #252526;
  display: grid;
  grid-template-columns: repeat(8, 75px);
  grid-template-rows: repeat(8, 75px);
}

.cell {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.score-bars {
  margin-top: 10px;
  display: flex;
}

.score-bar {
  display: flex; /* make it a flex container */
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */
  box-shadow: 2px 2px 4px #222;
  height: 4vmin;
  transition: width 0.4s ease;
  font-weight: bold;
  font-size: 3vmin;
}

.score-bar > span {
  /*line-height: 5vmin;*/
  font-size: 80%;
}

.black-bar {
  background-color: black;
}

.white-bar {
  background-color: white;
  color: black;
}

.star-dot {
  position: absolute;
  width: 2%;
  height: 2%;
  background: black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

.disc {
  position: relative;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  transition: width 200ms 0s linear;
}

.disc.black {
  background-color: black;
}

.disc.white {
  background-color: white;
}

.disc.flipped {
  width: 0;
}

.last-move {
  width: 20%; /* small square inside the disc */
  height: 20%;
  background-color: teal; /* highlight color */
  position: absolute; /* center it inside the disc */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.can-click {
  cursor: pointer;
}

.valid-move {
  border: 5px solid black;
  opacity: 20%;
  width: 60%;
  height: 60%;
}

.will-flip {
  opacity: 50%;
}