#reactionBar{
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 10px;

  width: 100%;

  margin-top: 18px;

  position: relative;
}

/* ❌ Auf Mobile verstecken */
@media (max-width: 768px){

  #reactionBar{
    display: none;
  }
}

#reactionBar button{

  all: unset;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 55px;
  height: 55px;

  font-size: 28px;
  line-height: 1;

  border-radius: 50%;

  background: white;

  border: 2px solid black;

  cursor: pointer;

  box-sizing: border-box;

  flex-shrink: 0;

  transition: transform 0.15s ease;
}

#reactionBar button:hover{
  transform: scale(1.1);
}

.flyingReaction{
  position: fixed;
  left: 50%;
  bottom: 180px;

  transform: translateX(-50%);

  font-size: 42px;
  pointer-events: none;
  z-index: 10000;

  animation: flyReaction 2.5s ease-out forwards;
}

@keyframes flyReaction{

  0%{
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(0)
      scale(0.5);
  }

  10%{
    opacity: 1;
  }

  100%{
    opacity: 0;

    transform:
      translateX(calc(-50% + (-200px + 400px * var(--randX))))
      translateY(calc(-500px * var(--randY)))
      rotate(25deg)
      scale(1.8);
  }
}

.rocketReaction{

  position: fixed;

  left: calc(-100px + 200px * var(--rocketStart));

  bottom: -80px;

  font-size: 60px;

  animation: rocketFly var(--rocketSpeed) linear forwards !important;
}

@keyframes rocketFly{

  0%{
    transform: translate(0,0);
    opacity: 1;
  }

  100%{
    transform: translate(
      calc(100vw + 300px),
      calc(-100vh - 300px)
    );

    opacity: 1;
  }
}

.spinReaction{
  animation: spinFly 2.5s linear forwards !important;
}

@keyframes spinFly{

  0%{
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0)
      rotate(0deg)
      scale(0.5);
  }

  100%{
    opacity: 1;

    transform:
      translateX(calc(-50% + (-200px + 400px * var(--randX))))
      translateY(calc(-500px * var(--randY)))
      rotate(1440deg)
      scale(1.8);
  }
}


.simpleReaction{
  animation: simpleFly 2.2s ease-out forwards !important;
}

@keyframes simpleFly{

  0%{
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(0.7);
  }

  100%{
    opacity: 0;

    transform:
      translateX(calc(-50% + (-180px + 360px * var(--randX))))
      translateY(calc(-450px * var(--randY)))
      scale(1.4);
  }
}

.eyeRollReaction{
  animation: eyeRollFly 2.5s linear forwards !important;
}

@keyframes eyeRollFly{

  0%{
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0)
      scale(0.8);
  }

  100%{
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(-600px)
      scale(1.4);
  }
}