@font-face {
  font-family: "Promisupria";
  src: url("../fonts/PromisupriaSans-CondMedium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* Sprechblasen-Styling für zentrale Spielfigur */
.speech-bubble {
  position: absolute;
  padding: 30px 35px 20px 35px;
  background: #fffbe6;
  border: solid 3px #000;
  border-radius: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 1.15em;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  font-family: "Promisupria", Arial, sans-serif;
}

.speech-bubble.visible {
  opacity: 1;
}

/* Standardposition: über dem Charakter */
.character-2 .speech-bubble {
  transform: translate(-50%, -100%);
}

/* Individuelle Anpassungen je Charakter (Beispielwerte, ggf. anpassen) */
.speech-bubble.bear {
  left: 50%;
  top: 48%;
  width: 300px;
}

.speech-bubble.fox {
  left: 22%;
  top: 25%;
  width: 300px;
}

.speech-bubble.badger {
  left: 84%;
  top: 35px;
  width: 288px;
}

.speech-bubble.deer {
  left: 50%;
  top: 25px;
  width: 300px;
}

.speech-bubble.jay {
  left: 23%;
  top: 25px;
  width: 300px;
}

.speech-bubble.hedgehog {
  left: 79%;
  top: 30%;
  width: 300px;
}

.speech-bubble::after {
  width: 50px;
  height: 60px;
  background-image: url(../img/tail-side.png);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  left: 45%;
  bottom: -55px;
  transform: translateX(-50%);
}
.speech-bubble.jay::after,
.speech-bubble.fox::after {
  transform: scaleX(-1);
}
.speech-bubble.bear::after,
.speech-bubble.deer::after {
  background-image: url(../img/tail-center.png);
  transform: none;
}

#result .speech-bubble {
  width: 300px;
  left: 32%;
  bottom: 95%;
}