CSS网格元素位于桌面上，而不位于移动设备上

Question

我的网页上的CSS Grid元素有问题。在桌面上，它看起来应该是应该的，但是当我在Chrome的smarthphone上打开页面时，.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>

想知道这是否是某种错误，或者我错过了什么。谢谢您的帮助。