body {
  text-align: center;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

.board {
  position: relative;
  margin: 50px 0;
  display: inline-block;
}

.row {
  white-space: nowrap;
}

.square {
  display: inline-block;
  background-color: pink;
  border: none;
  vertical-align: middle;
  box-sizing: border-box;
}

.square.entered {
  background-color: rgb(255, 106, 0);
}

.square.abandoned {
  background-color: rgb(237 147 162);
}

.square.top-on {
  border-top: 5px solid rgb(125, 0, 0);
}

.square.right-on {
  border-right: 5px solid rgb(183, 0, 0);
}

.square.bottom-on {
  border-bottom: 5px solid rgb(183, 0, 0);
}

.square.left-on {
  border-left: 5px solid rgb(125, 0, 0);
}

.row:first-child .square {
  border-top-width: 10px;
}

.row:last-child .square {
  border-bottom-width: 10px;
}

.square:first-child {
  border-left-width: 10px;
}

.square:last-child {
  border-right-width: 10px;
}

.cursor {
  display: block;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
}

.sharing-link-box {
  margin: 1em;
}

.sharing-link-box label {
  display: block;
  margin: 1em;
}

.sharing-link-box a {
  display: block;
  margin: 0.5em;
  color: blue;
}

.reload-box {
  margin: 2em;
}

.button {
  color: #111;
  font-size: 1em;
  border: 1px solid #bbb;
  background: #e6e6e6 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQCAYAAABvWArbAAAANUlEQVQ4je3LMQoAIBADwb38/6t5wFXaWAiCtUiaYZvF9hBACOFbuntVVe11B0CSjjeE8BwThQIJ8dhEl0YAAAAASUVORK5CYII) 50% 50% repeat-x;
  font-weight: normal;
  border-radius: 4px;
  padding: 0.4em 1em;
  cursor: pointer;
  text-decoration: none;
}

.button:not(:disabled):hover {
  border-color: #999;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGQCAYAAABvWArbAAAANklEQVQ4jWN48uTJfyYGBgaGUWKUGCWGLfHt2zcoi5GREYNgYmJCZiG42IiB98woMUqMEtgIAMdjCdyg+eEBAAAAAElFTkSuQmCC);
  color: #000;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #333;
      color: #fff;
  }
  .sharing-link-box a {
    color: rgb(128, 128, 249);
  }
  .cursor {
    background-color: rgb(76, 76, 255);
  }
  .square {
    background-color: rgb(255, 124, 146);
  }
  .square.abandoned {
    background-color: rgb(208, 62, 86);
  }
}