/* Layout calibration: keep the hero's top gap in line with the header's logo padding. */
.top + main {
  padding-top: 16px;
}

.game-title {
  align-items: center;
}

.game-score {
  color: var(--yellow);
  min-width: 150px;
  text-align: right;
  white-space: nowrap;
}

.game-score small {
  display: block;
  color: var(--muted);
  font: 10px 'DM Sans';
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.game-score strong {
  font: 38px/1 'Jersey 10';
}

.game-score span {
  color: var(--muted);
  font: 15px 'Pixelify Sans';
}

@media (max-width: 800px) {
  .top + main {
    padding-top: 16px;
  }

  .game-title {
    align-items: flex-start;
  }

  .game-score {
    margin-top: 18px;
    text-align: left;
  }
}