body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #f5fdfb;
  color: #1f2d2a;
}

/* Players */
#players {
  margin-top: 10px;
}

.player {
  margin: 0 10px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #eee;
}

.player.active {
  background: #7ed6c1;
}

/* Board */
#board {
  display: grid;
  grid-template-columns: repeat(9, 42px);
  justify-content: center;
  margin: 25px auto;
  background: #d9a74a;
  padding: 10px;
  border-radius: 6px;
}

.cell {
  width: 42px;
  height: 42px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell::before,
.cell::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
}

.cell::before {
  width: 100%;
  height: 1px;
}

.cell::after {
  width: 1px;
  height: 100%;
}

/* Stones */
.stone {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  animation: pop 0.2s ease;
}

.black {
  background: black;
}

.white {
  background: white;
  border: 1px solid #ccc;
}

/* Preview */
.preview {
  opacity: 0.4;
}

/* Button */
button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #1f2d2a;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background: #7ed6c1;
  color: #1f2d2a;
}

/* Overlay */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s ease;

  background: rgba(0, 0, 0, 0.5);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999; /* VERY IMPORTANT */
}

/* hide */
.hidden {
  display: none;
}

/* popup box */
.overlay-box {
  background: white;
  padding: 25px 30px;
  border-radius: 10px;
  text-align: center;

  z-index: 10000;
}

/* button fix */
.overlay-box button {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

/* Animation */
@keyframes pop {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}