button {
  outline: none;
}

body {
  height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  font-family: system-ui, sans-serif;
}

#game-ui {
  height: 100%;
  width: 100%;

  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "status status status"
    ". gameboard ."
    ". controls .";
}

#status,
#gameboard,
#controls {
  visibility: hidden;
}

#gameboard {
  grid-area: gameboard;

  display: grid;
  --cell-size: 100px;
  grid-template-rows: repeat(3, var(--cell-size));
  grid-template-columns: repeat(3, var(--cell-size));
  grid-template-areas:
    "1 2 3"
    "4 5 6"
    "7 8 9";
  gap: 2px;

  background-color: hsl(0, 0%, 0%);
}

.cell {
  padding: 16px;
  background-color: hsl(0, 0%, 100%);
  border: none;

  cursor: pointer;
}

.cell:disabled {
  cursor: default;
}

.cell.loading:disabled {
  cursor: wait;
}

.glyph {
  pointer-events: none;
}

.glyph.preview {
  opacity: 0;
}

.cell:hover .glyph.preview {
  opacity: 0.2;
}

.cell:disabled:hover .glyph.preview {
  opacity: 0;
}

.glyph.dimmed {
  filter: grayscale(100%) opacity(0.2);
}

@keyframes draw-stroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-circle {
  to {
    stroke-dashoffset: 0;
  }
}

.glyph.animate * {
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.glyph.animate line {
  animation-name: draw-stroke;
  animation-duration: 0.1s;
}

.glyph.animate .line1 {
  animation-delay: 0s;
}

.glyph.animate .line2 {
  animation-delay: 0.1s;
}

.glyph.animate circle {
  animation-name: draw-circle;
  animation-duration: 0.2s;

  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

#status {
  grid-area: status;
  align-self: end;
  margin-bottom: 4rem;
}

#message {
  font-size: 4rem;
  text-align: center;
  margin: 0;
}

#controls {
  grid-area: controls;
  align-self: start;
  margin-top: 32px;

  display: flex;
  justify-content: center;
}

.button {
  --accent-color: hsl(0, 0%, 0%);
  --text-invert: hsl(0, 0%, 100%);

  font-size: 24px;
  font-weight: 300;
  line-height: 1;

  color: var(--accent-color);
  background-color: hsl(0, 0%, 100%);
  border: 2px solid var(--accent-color);

  padding: 8px;
  cursor: pointer;
}

.button:hover {
  color: var(--text-invert);
  background-color: var(--accent-color);
  border-color: transparent;
}

#reset-button {
  --accent-color: hsl(0, 80%, 50%);

  width: 100%;
}