/* Magische vierkanten netjes monospaced en regels behouden */
.magisch-vierkant {
  font-family: monospace;
  /* vaste-breedte letters  */
  white-space: pre-wrap;
  /* \n én spaties blijven zichtbaar */
  margin: 0.5rem 0;
  /* klein beetje ruimte erboven/onder */
}

/*  Guust Flater styles */

/* --- BOOM-effect (bij getal 7) --- */

/*  Guust Flater styles - BOOM */
.boom-effect {
  font-size: 3rem;
  font-weight: bold;
  color: red;
  text-shadow: 2px 2px black;
  transform: scale(0.5) rotate(-5deg);
  opacity: 0;
  transition: all 0.5s ease-out;
  text-align: center;
  margin-top: 10px;
  font-family: "Comic Sans MS", "Impact", sans-serif;
}

.toon-boom {
  opacity: 1;
  transform: scale(1.5) rotate(3deg);
  animation: schok 0.6s ease-in-out;
}

@keyframes schok {
  0% {
    transform: scale(0.8) rotate(-3deg);
  }
  25% {
    transform: scale(1.5) rotate(2deg);
  }
  50% {
    transform: scale(1.2) rotate(-2deg);
  }
  75% {
    transform: scale(1.4) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/*  Visueel effect - PRAAAATZ! */
@keyframes praatz {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-6deg);
  }
  20% {
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
  }
  50% {
    transform: scale(1.1) rotate(-3deg);
  }
  80% {
    transform: scale(1) rotate(1deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(-2deg);
  }
}
@keyframes crash {
  0% {
    transform: scale(0.4) rotate(-10deg);
    opacity: 0;
  }
  30% {
    transform: scale(1.5) rotate(8deg);
    opacity: 1;
  }
  60% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    transform: scale(0.8) rotate(0deg);
    opacity: 0;
  }
}

.toon-crash {
  display: block;
  animation: crash 2.8s ease-out forwards;
  color: green;
  text-shadow: 3px 3px black;
  font-family: "Impact", "Arial Black", sans-serif;
}

.visueel-effect {
  display: none;
  font-size: 3em;
  font-weight: bold;
  color: orange;
  text-align: center;
  margin: 1em 0;
  font-family: "Comic Sans MS", "Impact", sans-serif;
}

.toon-effect {
  display: block;
  animation: praatz 3.5s ease-out forwards;
}

.visueel-effect.crash {
  color: green;
  text-shadow: 3px 3px black;
  font-family: "Impact", "Arial Black", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 3.2em;
}
.visueel-effect.crash::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.5) 0%, transparent 80%);
  border-radius: 50%;
  z-index: -1;
}