/* =========================
   ACHIEVEMENT FULLSCREEN
   ========================= */

.achievement-full {
  position: fixed;
  inset: 0;

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

  background: radial-gradient(circle at center, rgba(0,0,0,0.7), rgba(0,0,0,0.95));

  opacity: 0;
  transform: scale(0.85);
  transition: all 0.4s ease;

  z-index: 9999;
  pointer-events: none;
}

.achievement-full.show {
  opacity: 1;
  transform: scale(1);
}


/* =========================
   BADGE IMAGE (200px)
   ========================= */

.badge-img {
  width: clamp(160px, 25vw, 200px);
  height: auto;

  margin-bottom: 15px;

  animation: badgePop 0.6s ease, badgeFloat 3s ease-in-out infinite;

  filter: drop-shadow(0 0 30px rgba(0,255,200,0.7));
}


/* =========================
   TEXT
   ========================= */

.badge-title {
  font-family: "Zen Dots", sans-serif;
  font-size: 26px;
  color: #00ffc8;

  text-align: center;
  margin-bottom: 8px;

  text-shadow: 0 0 15px rgba(0,255,200,0.7);
}

.badge-desc {
  font-size: 15px;
  color: #ddd;

  text-align: center;
  max-width: 320px;

  opacity: 0.85;
}


/* =========================
   LEVEL UP TEXT
   ========================= */

.level-up {
  position: absolute;
  top: 20%;

  font-size: 42px;
  font-family: "Zen Dots", sans-serif;
  color: #ffd700;

  opacity: 0;
  transform: scale(0.5);

  text-shadow: 0 0 25px rgba(255,215,0,0.9);

  animation: levelUpAnim 1s ease forwards;
}


/* =========================
   PARTICLES
   ========================= */

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;

  pointer-events: none;

  animation: particleFly 1s linear forwards;
}


/* =========================
   GLOW BACKGROUND
   ========================= */

.achievement-full::before {
  content: "";
  position: absolute;

  width: 400px;
  height: 400px;

  background: radial-gradient(circle, rgba(0,255,200,0.15) 0%, transparent 70%);
  filter: blur(40px);

  z-index: -1;
}


/* =========================
   ANIMATIONS
   ========================= */

@keyframes badgePop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes levelUpAnim {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes particleFly {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(0.5);
  }
}

.achievement-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;

  display: flex;
  align-items: center;
  gap: 12px;

  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0, 255, 200, 0.2);
  border-radius: 12px;

  padding: 10px 14px;

  box-shadow: 0 0 20px rgba(0, 255, 200, 0.15);

  transform: translateY(20px);
  opacity: 0;

  transition: all 0.25s ease;

  z-index: 9999;
}

.achievement-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.toast-content {
  display: flex;
  flex-direction: column;
}

.toast-title {
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
}

.toast-desc {
  font-size: 12px;
  color: #ccc;
}

/* =========================
   MOBILE ADJUSTMENTS
   ========================= */

@media (max-width: 600px) {
  .badge-title {
    font-size: 22px;
  }

  .level-up {
    font-size: 32px;
  }

  .badge-desc {
    font-size: 14px;
  }
}