Элемент CSS Grid сосредоточен на рабочем столе, но не на мобильном

Question

У меня проблема с элементом CSS Grid на моей веб-странице. На рабочем столе это выглядит так, как должно, но когда я открываю страницу на своем смартфоне в chrome, элемент содержимого .scores не центрируется по вертикали. Границы существуют только для лучшей визуализации. Смотрите изображение https://drive.google.com/file/d/1eyEb5WPm0rwsKXL6n0M5V263MzTr9A0k/view?usp=sharing или смотрите на странице в реальном времени здесь https://tomas -kahanek.eu / hra /

Пытался эмулировать его на рабочем столе, но безуспешно, так что, я думаю, это связано с мобильным браузером. Сейчас у меня нет медиазапросов.

.score-board {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 45% auto 45%;
  grid-template-areas: "user separator computer" "ulabel separator clabel";
  background-color: $digital-green;
  color: $digital-black;
  box-shadow: 0 0 10px -1px black inset;
  padding: 20px 0;
  font-size: 1.3rem;
  border-radius: 5px;
  margin-bottom: 15px;
}

.scores {
  font-size: 7rem;
  font-family: $digital;
  line-height: 7rem;
  border: 1px solid black;
  align-self: center;
}

.user-score-wrapper {
  grid-area: user;
}

.computer-score-wrapper {
  grid-area: computer;
}

#user-label {
  grid-area: ulabel;
  font-family: $digital;
}

#comp-label {
  grid-area: clabel;
  font-family: $digital;
}

.separator {
  grid-area: separator;
  font-size: 4rem;
  font-family: $digital;
  align-self: center;
}

<section class="score-board">
  <div class="user-score-wrapper">
    <div id="user-score" class="scores">0</div>
    <div id="user-label">HUMAN</div>
  </div>
  <div class="separator">:</div>
  <div class="computer-score-wrapper">
    <div id="computer-score" class="scores">0</div>
    <div id="comp-label">COMPUTER</div>
  </div>
</section>

Хотелось бы знать, если это какая-то ошибка, или я что-то упустил. Спасибо за вашу помощь.