.game-hud {
  grid-template-columns: auto minmax(120px, 1fr) auto auto auto;
  gap: clamp(10px, 2.4vw, 26px);
}

.score-stat {
  min-width: 86px;
}

.score-stat strong,
#final-score {
  color: var(--yellow);
}

.result-grid {
  grid-template-columns: repeat(2, 1fr);
}

.result-grid strong {
  font-size: clamp(15px, 3.5vw, 21px);
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .game-hud {
    grid-template-columns: auto minmax(70px, 1fr) auto auto auto;
    gap: 7px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .hud-stat {
    min-width: 42px;
  }

  .score-stat {
    min-width: 58px;
  }
}

@media (max-width: 430px) {
  .game-hud {
    grid-template-columns: auto minmax(42px, 1fr) auto auto auto;
    gap: 5px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .score-stat {
    min-width: 54px;
  }

  .score-stat strong {
    font-size: 12px;
  }

  .result-grid {
    gap: 5px;
  }

  .result-grid article {
    padding: 12px 4px;
  }
}