/* ==========================================================================
   BINGO GO 学 · 徽章勋章样式（渐变圆盘 + 光泽动画 + 稀有度光环）
   配合 static/js/badge_icons.js 使用
   ========================================================================== */

.b-medal {
  --g1: #5B8DEF;
  --g2: #3D5AFE;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  isolation: isolate;
}
.b-medal-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.42), rgba(255,255,255,0) 46%), linear-gradient(140deg, var(--g1), var(--g2));
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.18), inset 0 2px 3px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.12);
  z-index: 0;
}
/* 内圈描边 */
.b-medal-disc::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.38);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.b-medal-ico {
  position: relative;
  width: 52%;
  height: 52%;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
/* 光泽扫过 */
.b-medal-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.b-medal-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  width: 45%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: rotate(18deg);
  animation: b-shine 3.4s ease-in-out infinite;
}
@keyframes b-shine {
  0%, 55% { left: -80%; }
  100% { left: 130%; }
}

/* —— 稀有度光环 —— */
.b-medal.rarity-rare { box-shadow: 0 0 0 2px rgba(74,125,240,.28), 0 4px 12px rgba(74,125,240,.22); }
.b-medal.rarity-epic { box-shadow: 0 0 0 2px rgba(156,39,176,.32), 0 4px 14px rgba(156,39,176,.28); }
.b-medal.rarity-legendary { box-shadow: 0 0 0 2px rgba(245,166,35,.45), 0 4px 16px rgba(245,166,35,.4); }

/* 传说/史诗：呼吸光晕 */
.b-medal.rarity-epic .b-medal-disc,
.b-medal.rarity-legendary .b-medal-disc { animation: b-glow 2.6s ease-in-out infinite; }
@keyframes b-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

/* 已获得徽章的轻柔悬浮（用于挂件/网格） */
.b-medal.float {
  animation: b-float 3s ease-in-out infinite;
}
@keyframes b-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 获得瞬间的弹跳 */
.b-medal.pop {
  animation: b-pop .55s cubic-bezier(.18,1.6,.4,1) both;
}
@keyframes b-pop {
  0% { transform: scale(0) rotate(-18deg); opacity: 0; }
  60% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 兜底 */
.b-medal-fallback { background: #ccc; }