.moves {
  font-size: 1.4rem;
  font-family: "Fira Mono";
  text-align: left;
  background-color: var(--color-bg-input);
}

.moves__turn {
  text-align: center;
}

.move {
  padding: 3px;
}

.move__id {
  display: inline-block;
  width: 4rem;
  text-align: right;
  margin-right: 2rem;
  color: var(--color-text);
}

.move__ply {
  display: inline-block;
  width: 7rem;
  color: var(--color-btn);
}

.move__ply--current {
  color: var(--color-text);
  background-color: var(--color-highlight);
}

.move__ply:hover {
  text-decoration: underline;
  cursor: pointer;
}

@media (orientation: portrait) {
  .moves {
    text-align: left;
  }
  .move {
    display: inline-block;
  }
  .move__id,
  .move__ply {
    display: inline;
    margin-right: 0.6rem;
    width: auto;
  }
}