.controls {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .controls {
    display: grid;
    grid-template-areas:
      ". up ."
      "left down right";
    grid-template-rows: min-content min-content;
    grid-template-columns: min-content min-content min-content;

    margin: 0 auto;
    margin-top: 128px;

    user-select: none;
    touch-action: none;

    & button {
      width: 256px;
      height: 256px;
      font-size: 4rem;
    }
    & #up {
      grid-area: up;
    }
    & #down {
      grid-area: down;
    }
    & #left {
      grid-area: left;
    }
    & #right {
      grid-area: right;
    }
  }
}

.overlay-parent {
  height: 100%;
  position: relative;
}

.overlay {
  &.hidden {
    display: none;
  }

  background-color: black;
  opacity: 0.8;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

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

  font-family: monospace;
  color: lightgray;

  & .overlay-title {
    font-size: 4rem;
  }

  & .overlay-subtitle {
    font-size: 2rem;
  }
}