#player-list {
  height: calc(var(--player-size) + 7vmin);
  margin: 1vmin auto 1vmin auto;
  padding: 0vmin 1vmin 0vmin 1vmin;

  overflow: hidden;
}

.player-button {
  width: var(--player-size);
  height: var(--player-size);

  margin: 1vmin 2vmin 1vmin 0vmin;
  padding: 0;

  font-size: var(--player-font-size);

  border-radius: 100%;
  transition: var(--transitions);
  transform: translateX(0);

  overflow: hidden;

  &:not(#player-add):not(.last-player) {
    animation: player-animation var(--transitions) ease;
    animation-fill-mode: forwards;
  }

  &.marked {
    box-shadow: 0 0 .4vmin .4vmin var(--selection-color);
  }
}

@keyframes player-animation {
  from {
    margin-right: calc(0vmin - var(--player-size));
  }
  to {
    margin-right: 1vmin;
  }
}

#player-add {
  font-size: 4vmin;
}

.hidden-input {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  font-size: var(--player-font-size);

  text-align: center;
  border: none;

  color: white;
  background-color: transparent;


  outline: none;
  &:focus {
    outline: none;
  }
}

.hide-button {
  animation: hide-button var(--transitions) linear;
  animation-fill-mode: forwards;
}

@keyframes hide-button {
  from {
    margin-right: 0;
    opacity: 1;
  }
  to {
    margin-right: -11vmin;
    opacity: 0;
    visibility: hidden;
  }
}


.point-display {
  font: 3vmin Arial;
  color: white;
  margin: 0 auto 0 auto;
}