/* Shared Medal Styles */
/* Used in medal summary and medal animations */

/* Base medal styling */
.medal-base {
  border-radius: 50%;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 2.5px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2.5px rgba(0, 0, 0, 0.3);
}

.medal-base::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.2),
    0 0 7.5px rgba(255, 255, 255, 0.5);
  background: linear-gradient(45deg, 
    transparent 40%,
    rgba(255, 255, 255, 0.2) 45%, 
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.2) 55%,
    transparent 60%);
}

/* Medal colors */
.medal-gold {
  background: radial-gradient(ellipse at top,
      #ffd700,
      #ffed4e,
      #b8860b,
      #cd7f32,
      #ffd700);
  background-size: 100% 200%;
}

.medal-silver {
  background: radial-gradient(ellipse at top,
      #f8f8ff,
      #e6e6fa,
      #808080,
      #a9a9a9,
      #f0f0f0);
  background-size: 100% 200%;
}

.medal-bronze {
  background: radial-gradient(ellipse at top,
      #cd7f32,
      #d2691e,
      #803f11,
      #a0522d,
      #daa520);
  background-size: 100% 200%;
}

/* Full-size medals (for medal summary) */
.medal {
  width: 60px;
  height: 60px;
  z-index: 2;
}

.medal::before {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

/* Small animated medals */
.medal-animation {
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transform: scale(0);
  position: absolute;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

.medal-animation::before {
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    inset 0 0 5px rgba(0, 0, 0, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.2),
    0 0 3px rgba(255, 255, 255, 0.5);
}

/* Medal animation keyframes */
@keyframes medalAppear {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0);
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  15% {
    opacity: 1;
    transform: scale(1.4) translateY(0);
    filter: brightness(1.8) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
  }
  30% {
    opacity: 1;
    transform: scale(1.2) translateY(0);
    filter: brightness(1.5) drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));
  }
  50% {
    opacity: 1;
    transform: scale(1) translateY(-10px);
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
  }
  70% {
    opacity: 0.8;
    transform: scale(0.9) translateY(-40px);
    filter: brightness(1.1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-80px);
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
}

@keyframes medalPulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(255, 255, 255, 0.6),
      0 0 40px rgba(255, 255, 255, 0.3);
  }
}

/* Medal type specific glow colors */
@keyframes medalPulseGold {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3),
      0 0 25px rgba(255, 215, 0, 0.8),
      0 0 50px rgba(255, 215, 0, 0.4);
  }
}

@keyframes medalPulseSilver {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3),
      0 0 25px rgba(192, 192, 192, 0.8),
      0 0 50px rgba(192, 192, 192, 0.4);
  }
}

@keyframes medalPulseBronze {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.3),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3),
      0 0 25px rgba(205, 127, 50, 0.8),
      0 0 50px rgba(205, 127, 50, 0.4);
  }
}

.medal-animation.animate {
  animation: medalAppear 1.5s ease-out forwards;
}

.medal-animation.animate.medal-gold {
  animation: medalAppear 1.5s ease-out forwards, medalPulseGold 0.3s ease-in-out 3;
}

.medal-animation.animate.medal-silver {
  animation: medalAppear 1.5s ease-out forwards, medalPulseSilver 0.3s ease-in-out 3;
}

.medal-animation.animate.medal-bronze {
  animation: medalAppear 1.5s ease-out forwards, medalPulseBronze 0.3s ease-in-out 3;
}