/* Keep the game total on its own row so it never overlaps the sixth ball. */
.lotto-game {
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: .45rem .7rem;
}

.lotto-game-sum {
  grid-column: 2;
  text-align: left;
}

.lotto-balls {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-width: 0;
}

.lotto-ball {
  width: 100%;
  min-width: 0;
  font-size: clamp(.78rem, 2vw, 1rem);
}

@media (max-width: 600px) {
  .lotto-game {
    grid-template-columns: 1fr;
  }

  .lotto-game-label,
  .lotto-game-sum {
    grid-column: 1;
  }

  .lotto-balls {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}