body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  margin: 0
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

.board {
  background-size: cover;
  flex-direction: column;
  height: 375px;
  margin: 10px auto;
  max-height: 600px;
  max-width: 600px;
  position: relative;
  width: 375px
}

.board, .board-row, .cell {
  display: flex
}

.cell {
  align-items: center;
  justify-content: center;
  position: relative
}

.cell:after, .cell:before {
  background: #000;
  content: "";
  position: absolute
}

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

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

.cell.top:before {
  top: 50%
}

.cell.bottom:before {
  bottom: 50%
}

.cell.left:after {
  left: 50%
}

.cell.right:after {
  right: 50%
}

.piece {
  align-items: center;
  border-radius: 50%;
  display: flex;
  font-size: 11px;
  height: 70%;
  justify-content: center;
  position: relative;
  width: 70%;
  z-index: 10
}

.piece.black {
  background: #000;
  color: #fff
}

.piece.white {
  background: #fff;
  color: #000
}

.last {
  border: 1px solid red;
  height: 80%;
  width: 80%;
  z-index: 100
}

.last, .loading {
  position: absolute
}

.loading {
  align-items: center;
  background: #0000001a;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999
}

.loading-text {
  color: red;
  font-size: 16px
}

.App {
  text-align: center
}

.App-logo {
  height: 40vmin;
  pointer-events: none
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin 20s linear infinite
  }
}

.App-header {
  align-items: center;
  background-color: #282c34;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: calc(10px + 2vmin);
  justify-content: center;
  min-height: 100vh
}

.App-link {
  color: #61dafb
}

@keyframes App-logo-spin {
  0% {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(1turn)
  }
}

.button {
  margin: 0 10px
}

.setting {
  flex-direction: column;
  margin: 10px 0
}

.setting, .setting-row {
  align-items: center;
  display: flex;
  justify-content: center
}

.setting-row {
  flex-direction: row;
  margin-bottom: 5px
}

.setting-item {
  margin: 0 10px
}

.status {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px
}

.status-item {
  margin: 0 10px
}

/*# sourceMappingURL=main.24ac5095.css.map*/