@import url("../../root/root.css");

.score {
  display: inline-block;
  font-size: 3.6rem;
  font-weight: bold;
  transform: translate(-50%, -50%) scale(1.2); 
  transition: transform 0.3s ease, color 0.3s ease;
}

.score.increase {
  animation: scoreIncrease 0.8s ease-out;
}

.card {
  position: relative; 
}

.increase-by {
    font-family: var(--font-main);
  position: absolute;
  font-size: 5rem;
  font-weight: bold;
  padding: 0.6rem 1.2rem;
  background-color: var(--duck-white);
  color: var(--duck-white);
  border-radius: 1.8rem;
  transform: translate(-50%, -50%) scale(1.2); 
  opacity: 0;
  animation: showIncrease 2s forwards;
  left: 50%;
  top: 40%;
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.3);
  z-index: 99999;
}

@keyframes showIncrease {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}


/* TABLET SIZE 480 -1023 */
/* ---------------------------------------------------------------------------- */
@media (min-width: 480px) and (max-width: 1023px) {

.score {
  font-size: 3rem;
}
}
  
/* MOBILE SIZE 479 */
/* ---------------------------------------------------------------------------- */
@media (max-width: 479px) {
.score {
  font-size: 2.5rem;
}
}