/* ===== QUIZ BADGE (DEFAULT / LEVEL 1) STYLES ===== */

.quiz-badge-container {
  position: relative;
  display: inline-block;
}

.quiz-badge-circle {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #8b5cf6 100%);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0px 0px 9px rgba(168, 85, 247, 1), inset 0 1px 8px rgba(255, 255, 255, 0.2);
  overflow: visible;
}

.quiz-badge-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
  font-family: 'Nunito', sans-serif;
}

.quiz-badge-score-indicator {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 9px rgba(139, 92, 246, 0.5);
  z-index: 3;
}

.quiz-badge-percent-symbol {
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-family: 'Nunito', sans-serif;
}

.quiz-badge-banner {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  letter-spacing: 2px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 24px;
  box-sizing: border-box;
  --r: .7em;
  padding-inline: calc(var(--r) + .5em);
  line-height: 1.2;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
  background: linear-gradient(135deg, rgb(106 62 193), rgb(50 29 115));
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  bottom: -8px;
  height: 18px;
}

.quiz-badge-banner-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 182, 193, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
  width: 100%;
}

.quiz-badge-shine {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}


/* ===== CIRCLE BADGE LEVEL 1 STYLES ===== */

.circle-badge-level-1-container {
  position: relative;
  display: inline-block;
}

.circle-badge-level-1-circle {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #8b5cf6 100%);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0px 0px 9px rgba(168, 85, 247, 1), inset 0 1px 8px rgba(255, 255, 255, 0.2);
  overflow: visible;
}

.circle-badge-level-1-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
  font-family: 'Nunito', sans-serif;
}

.circle-badge-level-1-score-indicator {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 9px rgba(139, 92, 246, 0.5);
  z-index: 3;
}

.circle-badge-level-1-percent-symbol {
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-family: 'Nunito', sans-serif;
}

.circle-badge-level-1-banner {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  letter-spacing: 2px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 24px;
  box-sizing: border-box;
  --r: .7em;
  padding-inline: calc(var(--r) + .5em);
  line-height: 1.2;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
  background: linear-gradient(135deg, rgb(106 62 193), rgb(50 29 115));
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  bottom: -8px;
  height: 18px;
}

.circle-badge-level-1-banner-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 182, 193, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
  width: 100%;
}

.circle-badge-level-1-shine {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}


/* ===== CIRCLE BADGE LEVEL 2 STYLES ===== */

.circle-badge-level-2-container {
  position: relative;
  display: inline-block;
}

.circle-badge-level-2-star {
  position: absolute;
  color: #fbbf24;
  font-size: 12px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

.circle-badge-level-2-star:nth-child(1) {
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
}

.circle-badge-level-2-star:nth-child(2) {
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}

.circle-badge-level-2-circle {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #fb7185 100%);
  box-shadow: 0px 0px 12px rgba(236, 72, 153, 1), inset 0 1px 8px rgba(255, 255, 255, 0.3);
  border: 4px solid transparent;
  border-radius: 50%;
  overflow: visible;
}

.circle-badge-level-2-circle::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #fb7185 100%);
  border-radius: 50%;
  z-index: -1;
}

.circle-badge-level-2-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
  font-family: 'Nunito', sans-serif;
}

.circle-badge-level-2-score-indicator {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
  box-shadow: 0 3px 9px rgba(236, 72, 153, 0.6);
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.circle-badge-level-2-percent-symbol {
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-family: 'Nunito', sans-serif;
}

.circle-badge-level-2-banner {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  letter-spacing: 2px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 24px;
  box-sizing: border-box;
  --s: 1.2em;
  --d: .5em;
  --c: .6em;
  padding: var(--d) calc(var(--s) + .6em) 0;
  line-height: 1.2;
  background:
    conic-gradient(from  45deg at left  var(--s) top var(--d),
     #0008 12.5%,#0000 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(from -45deg at right var(--s) top var(--d),
     #0004 62.5%,#0000 0 87.5%,#0008 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 0,calc(var(--s) + var(--d)) 0,calc(var(--s) + var(--d)) var(--d),calc(100% - var(--s) - var(--d)) var(--d),calc(100% - var(--s) - var(--d)) 0,100% 0, calc(100% - var(--c)) calc(50% - var(--d)/2),100% calc(100% - var(--d)),calc(100% - var(--s)) calc(100% - var(--d)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--d)),0 calc(100% - var(--d)),var(--c) calc(50% - var(--d)/2));
  background-color: rgb(111 35 96);
  width: fit-content;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.circle-badge-level-2-banner-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 182, 193, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
  width: 100%;
}

.circle-badge-level-2-shine {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}


/* ===== CIRCLE BADGE LEVEL 3 STYLES ===== */

.circle-badge-level-3-container {
  position: relative;
  display: inline-block;
}

.circle-badge-level-3-heart {
  position: absolute;
  color: #ff69b4;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.9);
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.circle-badge-level-3-heart:nth-child(1) {
  top: -12px;
  left: 8px;
}

.circle-badge-level-3-heart:nth-child(2) {
  top: -12px;
  right: 8px;
}

.circle-badge-level-3-heart:nth-child(3) {
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.circle-badge-level-3-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  pointer-events: none;
  opacity: 1;
}

.circle-badge-level-3-sparkle:nth-child(4) {
  top: 10px;
  left: -5px;
}

.circle-badge-level-3-sparkle:nth-child(5) {
  top: 10px;
  right: -5px;
}

.circle-badge-level-3-sparkle:nth-child(6) {
  bottom: 25px;
  left: 2px;
}

.circle-badge-level-3-sparkle:nth-child(7) {
  bottom: 25px;
  right: 2px;
}

.circle-badge-level-3-circle {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #db2777 0%, #ec4899 50%, #f9a8d4 100%);
  box-shadow: 0px 0px 15px rgba(219, 39, 119, 1.2), inset 0 1px 10px rgba(255, 255, 255, 0.4);
  border: 5px solid #db2777;
  border-radius: 50%;
  overflow: visible;
}

.circle-badge-level-3-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 1;
  font-family: 'Nunito', sans-serif;
}

.circle-badge-level-3-score-indicator {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
  box-shadow: 0 3px 12px rgba(219, 39, 119, 0.7);
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.circle-badge-level-3-percent-symbol {
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-family: 'Nunito', sans-serif;
}

.circle-badge-level-3-banner {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  letter-spacing: 2px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 24px;
  box-sizing: border-box;
  --s: 1.2em;
  --d: .5em;
  --c: .6em;
  padding: var(--d) calc(var(--s) + .6em) 0;
  line-height: 1.2;
  background:
    conic-gradient(from  45deg at left  var(--s) top var(--d),
     #0008 12.5%,#0000 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(from -45deg at right var(--s) top var(--d),
     #0004 62.5%,#0000 0 87.5%,#0008 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 0,calc(var(--s) + var(--d)) 0,calc(var(--s) + var(--d)) var(--d),calc(100% - var(--s) - var(--d)) var(--d),calc(100% - var(--s) - var(--d)) 0,100% 0, calc(100% - var(--c)) calc(50% - var(--d)/2),100% calc(100% - var(--d)),calc(100% - var(--s)) calc(100% - var(--d)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--d)),0 calc(100% - var(--d)),var(--c) calc(50% - var(--d)/2));
  background-color: rgb(45, 10, 30);
  width: fit-content;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.circle-badge-level-3-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(219, 39, 119, 0.4) 0%,
    rgba(236, 72, 153, 0.3) 50%,
    rgba(249, 168, 212, 0.2) 100%);
  clip-path: polygon(0 0,calc(var(--s) + var(--d)) 0,calc(var(--s) + var(--d)) var(--d),calc(100% - var(--s) - var(--d)) var(--d),calc(100% - var(--s) - var(--d)) 0,100% 0, calc(100% - var(--c)) calc(50% - var(--d)/2),100% calc(100% - var(--d)),calc(100% - var(--s)) calc(100% - var(--d)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--d)),0 calc(100% - var(--d)),var(--c) calc(50% - var(--d)/2));
  pointer-events: none;
}

.circle-badge-level-3-banner-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 182, 193, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1;
  width: 100%;
}

.circle-badge-level-3-shine {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}


/* ===== GOLD BADGE STYLES (FIRST 100) ===== */

.gold-badge-container {
  position: relative;
  display: inline-block;
}

.gold-badge {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0px 0px 9px rgba(251, 191, 36, 1),
              inset 0 1px 8px rgba(255, 255, 255, 0.2),
              0 0 0 3px rgba(251, 191, 36, 0.3);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.gold-badge-text-top {
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  line-height: 1;
  margin-bottom: 1px;
}

.gold-badge-number {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  font-family: 'Nunito', sans-serif;
}

.gold-badge-shine {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.gold-badge-banner {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  --s: 0.7em;
  --d: .4em;
  --c: .4em;
  padding: 1px calc(var(--s) + .6em) var(--d);
  line-height: 1.4;
  background:
    conic-gradient(at left  var(--s) bottom var(--d),
     #0000 25%,#0008 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
    conic-gradient(at right var(--s) bottom var(--d),
     #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
  background-color: rgba(217, 119, 6, 0.95);
  width: fit-content;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.4);
  z-index: 2;
  backdrop-filter: blur(6px);
}

.gold-badge-banner-text {
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  text-align: center;
  font-family: 'Nunito', sans-serif;
}


/* ===== BADGE CAGE STYLES (PURPLE LOCK) ===== */

.badge-cage-container {
  position: relative;
  display: inline-block;
}

.badge-cage {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #8e67ff 0%, #a78bfa 50%, #b794f6 100%);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0px 0px 9px rgba(142, 103, 255, 1),
              inset 0 1px 8px rgba(255, 255, 255, 0.2),
              0 0 0 3px rgba(142, 103, 255, 0.3);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Heart background SVG - fixed size */
.badge-cage > svg {
  position: absolute;
  width: 42px !important;
  height: 42px !important;
  opacity: 0.3;
}

.badge-cage-wavy-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  z-index: 0;
}

.badge-cage-wavy-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(255, 255, 255, 0.08) 6px,
    rgba(255, 255, 255, 0.08) 12px
  );
  border-radius: 50%;
}

.badge-cage-wavy-bg::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.06) 10px,
    rgba(255, 255, 255, 0.06) 20px
  );
  border-radius: 50%;
}

.badge-cage-shine {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

svg.badge-cage-lock-icon {
  position: absolute;
  width: 20px !important;
  height: 20px !important;
  z-index: 5;
  filter: drop-shadow(0 2px 6px rgba(142, 103, 255, 0.6));
  opacity: 1;
}

.badge-cage-lock-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.badge-cage-key-bubble {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8e67ff 0%, #a78bfa 50%, #b794f6 100%);
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(142, 103, 255, 0.6);
  z-index: 10;
}

.badge-cage-key-bubble svg {
  width: 14px !important;
  height: 14px !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}