Button text won't be displayed properly in browsers other than Firefox

Question

So I'm studying javascript and I had to do Pokemon-themed app. My goal was to create a Pokeball shaped button and it looked actually pretty decent, but then I deploy it and my friends start notifying me that the button looks awful. I tested it on Chrome, Edge and Brave and it looks bad in all of them, Firefox being the only exception.

So this is my CSS code (I'm using styled components):

const PokeButton = styled.button`
  border-radius: 100%;
  border: 3px solid black;
  
  width: 3rem;
  height: 3rem;
  padding-inline: 0 0;
  
  outline: 2px solid black;
  border: 2px solid white;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000,
  0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000,
  -2px -2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000;
  -webkit-text-fill-color: white;
  
  background: linear-gradient(180deg, rgb(239, 21, 21) 50%, white 50%);
  
  &:hover {
    transition: .5s;
    transform: rotate(15deg);
    width: 3.6rem;
    height: 3.6rem;
  }

  &:active {
    transition: .2s;
    transform: rotate(-45deg);
    width: 2.6rem;
    height: 2.6rem;
    padding-inline: 0 1rem;
  }
  
  transition: .2s;

  margin-left: 1rem;
  overflow: hidden;

  cursor: pointer;
`;

And here is my HTML for the Button:

<PokeButton type="submit" >―⬤—</PokeButton>

The problem I have is that on Firefox, the overflow is hidden properly, but in the rest of browsers, the first em-dash and the circle are in the upper half of the ball -and not centered- while the second dash is in the lower half (except on hover, where it looks the way it should). On Firefox, they're all in the middle and the circle is centered.

What can I do to fix this?