/* ========= PRACTICE MASCOT ========= */

#practiceMascotArea {
  display: none;

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

  gap: 14px;

  margin: 20px auto;

  width: fit-content;

  animation: mascotAreaPop 0.25s ease;
}

#practiceMascotArea.show {
  display: flex;
}

.practice-mascot {
  width: 100px;

  animation: mascotFloat 2.5s ease-in-out infinite;
}

.practice-bubble {
  max-width: 240px;

  background: white;
  color: #0f172a;

  padding: 14px 18px;

  border-radius: 18px;

  font-weight: bold;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  opacity: 0;

  transform: translateY(10px);

  transition: all 0.3s ease;
}

.practice-bubble.show {
  opacity: 1;
  transform: translateY(0);
}

.practice-bubble::after {
  content: "";

  position: absolute;

  right: -10px;
  top: 50%;

  transform: translateY(-50%);

  border-width: 10px 0 10px 10px;
  border-style: solid;

  border-color:
    transparent
    transparent
    transparent
    white;
}

@keyframes mascotFloat {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes mascotAreaPop {

  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

#practiceMascotAreaFix {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.practice-mascot {
  width: 110px;
  animation: mascotFloat 2.5s ease-in-out infinite;
}