/* 徽章整体容器 */
.syymw-badge {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 400;
  font-family: "微软雅黑", sans-serif;
  color: white;
  z-index: 3;
  box-shadow: 0 6px 12px rgba(0,0,0,0.6),
              0 0 15px var(--badge-glow, rgba(255,255,255,0.5));
  animation: syymw-breathe 2.5s infinite ease-in-out,
             syymw-glow 2.5s infinite ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  isolation: isolate;   /* ✅ 防止背景层丢失（关键 for iOS/Android） */
  background: var(--badge-color, #000); /* ✅ fallback，保证即使 .syymw-bg 丢失也有颜色 */
   overflow: hidden;
}

/* 评论区头像强制60 */
.comment-list .syymw-avatar-wrap img.avatar-img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover; /* 保持比例，防止拉伸 */
}

/* 徽章背景层 */
.syymw-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  background: var(--badge-color, rgba(0,0,0,1));
}


.syymw-user {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 头像 85px 时，缩进去 5px */
.syymw-avatar-wrap img[width="85"] + a .syymw-user {
  transform: translate(-5px, -5px);
}

.syymw-badge {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;

}

/* tooltip 样式 */
.syymw-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 10;

  /* ✅ 关键 */
  white-space: normal;     /* 允许正常换行 */
  word-break: break-word;  /* 长词断开 */
  min-width: 120px;        /* 给它一个最小宽度，避免竖排 */
  max-width: 200px;        /* 控制最大宽度 */
  line-height: 1.4;
  text-align: center;      /* 文字居中（可选） */
}

/* 小三角 */
.syymw-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.8) transparent transparent transparent;
}

/* 悬停时显示 */
.syymw-user:hover .syymw-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}


/* 个人中心徽章模块（独立卡片） */
.syymw-badge-preview-wrap {
  position: relative;        /* 让徽章定位生效 */
  background: #f0f0f0;       /* 背景色板 */
  padding: 20px;             /* 内边距 */
  border-radius: 10px;       /* 圆角 */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); /* 阴影 */
  margin-bottom: 1.5rem;     /* 和下面内容拉开间距 */
  box-sizing: border-box;
  overflow: visible;          /* 关键：避免丝带被裁掉 */
}

/* 黑夜模式 */
[data-bs-theme="dark"] .syymw-badge-preview-wrap {
  background: #242424;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* 默认丝带样式 */
/* 丝带容器 */
.syymw-badge-preview-wrap .ribbon {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;       /* 防止丝带挡住下面内容 */
  z-index: 10;
}

/* 丝带条带 */
.syymw-badge-preview-wrap .ribbon span {
  position: absolute;         /* 脱离文档流，不会撑大容器 */
  display: block;
  width: 200px;
  padding: 10px 0;
  background: #ff6b6b;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  transform: rotate(45deg);
  top: 30px;
  right: -60px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* 手机端隐藏丝带 */
@media (max-width: 768px) {
  .syymw-badge-preview-wrap .ribbon {
    display: none;
  }
  .syymw-badge-name {
  top: 20px !important;
  }
}

/* 黑夜模式下的徽章条带 */
[data-bs-theme="dark"] .syymw-badge-preview-wrap .ribbon span {
  background: #e74c3c;
}


/* 下拉选择框和保存按钮*/

/* 表单整体 */
.syymw-badge-form {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ 水平居中所有子元素 */
  gap: 16px; /* ✅ 下拉框和按钮之间的间距 */
  margin-top: 20px;
}

/* 下拉框外层 */
.syymw-badge-select-wrap {
  width: 100%;
  max-width: 300px; /* ✅ 控制宽度 */
  text-align: center;
}

/* 下拉框本体 */
.syymw-badge-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 14px;
  text-align: center; /* ✅ 让选项文字居中 */
}

/* 按钮外层 */
.syymw-badge-button-wrap {
  text-align: center;
  width: 100%;
}

/* 按钮样式 */
.syymw-badge-button {
  background-color: #484848;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.syymw-badge-button:hover {
  background-color: #acacac;
  transform: translateY(-1px);
}


/* 检测用户徽章禁止按钮 */
.syymw-disabled-btn {
  background-color: #ccc !important;
  border-color: #ccc !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* 响应式适配 */
@media (max-width: 480px) {
  .syymw-badge-select {
    width: 100%;
  }
}

/* 黑夜模式 */
[data-bs-theme="dark"] .syymw-badge-select {
  border: 1px solid #686868;
  background-color: #404040;
}


/* 个人中心徽章展示区 */
.syymw-badge-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;  /* ✅ 关键：统一从顶部对齐 */

  margin: 40px 0;
}

/* 单个徽章容器 */
.syymw-badge-item {
  margin: 12px ;  /* 相当于 gap */
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 中心对齐 */
  justify-content: flex-start;
  text-align: center;
  margin-bottom: 70px;
}

/* ===========================
   徽章本体（圆形展示）
   =========================== */
.syymw-badge-show {
  position: relative;
  width: 50px;              /* 徽章大小 */
  height: 50px;
  border-radius: 50%;       /* 圆形裁剪 */
  overflow: hidden;         /* 内部 shine 效果不会溢出 */
  background: var(--badge-color, #666);  /* 使用变量设置徽章颜色 */
  box-shadow: 0 6px 12px rgba(0,0,0,0.6), /* 下方投影 */
              0 0 15px var(--badge-glow, rgba(255,255,255,0.5)); /* 光晕 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;           /* 居中 */
  font-size: 20px;          /* 内部文字大小 */
  font-weight: 400;
  font-family: "微软雅黑", sans-serif;
  color: #fff;
  isolation: isolate;       /* ios防止伪元素溢出 */
  z-index: 0;               /* 确保徽章显示在上层 */
}

/* 扫光效果 */
.syymw-shine {
  position: absolute;
  top: 0;
  left: -50%;       /* 缩小起点 */
  width: 150%;      /* 不要 200%，避免超出 */
  height: 100%;
  background: linear-gradient(
    120deg, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.6) 50%, 
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: syymw-shine 2s infinite;
  pointer-events: none;
  z-index: 1;
}


@keyframes syymw-shine {
  0% { left: -150%; }
  100% { left: 150%; }
}


/* ✅ 手机上每行 3 个 */
@media (max-width: 480px) {
  .syymw-badge-item {
    margin: 15px auto;
  }
}


/* 名称 */
.syymw-name {
  margin-top: 6px;
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
}


.syymw-preview-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
/* 把 tooltip 放到徽章内定位 */
.syymw-preview-wrap .syymw-badge {
  position: relative; /* 关键：tooltip 基于徽章定位 */
}


.syymw-preview-tooltip {
  position: absolute;
  bottom: calc(100% + 13px);
  left:50%;
  transform: translateX(-50%) translateY(-5px) ;
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  pointer-events: none;
}
.syymw-preview-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}

.syymw-preview-wrap:hover .syymw-preview-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
  visibility: visible;
}

/* 徽章文字 */
.syymw-text {
  position: relative;
  z-index: 2;
}

/* =====================
   中间文字
===================== */
.syymw-badge-show .syymw-text {
  position: relative;
  z-index: 2; /* 保证文字在扫光上层 */
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}
/* 状态标记（✔ 或 ★） */
.syymw-flag-star {
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  background: linear-gradient(
    90deg,
    #ffcc00,
    #ff6b6b,
    #48dbfb,
    #ffcc00
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: star-glow 3s linear infinite;
}

@keyframes star-glow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.syymw-flag-check {
  font-size: 14px;
  color: green;
  font-weight: bold;
}

/* 提示文字（独立样式，不影响主题 p.small.text-muted） */
.syymw-badge-note {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin: 15px 0;
}

/* 上方文字 */
.syymw-top-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
  text-align: center;
}



.syymw-badge-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0 15px 0;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 4s ease infinite;
}

  /* 使用预览徽章不同徽章的文字渐变色 */
.syymw-badge-name {
  top: 46px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  position: relative;

   /* 使用 3 色渐变 */
  background: linear-gradient(
    90deg,
    var(--badge-text-color),
    var(--badge-accent-color),
    var(--badge-glow-color)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: badge-glow 3s linear infinite; /* ✅ 改成 badge-glow */
}

@keyframes badge-glow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}



@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* 呼吸缩放动画 */
@keyframes syymw-breathe {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}




/* 默认光晕 */
@keyframes syymw-glow {
  0%   { box-shadow: 0 0 6px var(--badge-glow, rgba(255,255,255,0.4)), 
                  0 0 12px var(--badge-glow, rgba(255,255,255,0.2)); }
  50%  { box-shadow: 0 0 15px var(--badge-glow, rgba(255,255,255,0.9)), 
                  0 0 25px var(--badge-glow, rgba(255,255,255,0.6)); }
  100% { box-shadow: 0 0 6px var(--badge-glow, rgba(255,255,255,0.4)), 
                  0 0 12px var(--badge-glow, rgba(255,255,255,0.2)); }
}

/* 夜间模式 */
[data-bs-theme="dark"] .syymw-badge {
  animation: syymw-breathe 2.5s infinite ease-in-out,
             syymw-glowDark 2.5s infinite ease-in-out;
}
@keyframes syymw-glowDark {
  0%   { box-shadow: 0 0 8px var(--badge-glow, 0.5),
                  0 0 16px var(--badge-glow, 0.25); }
  50%  { box-shadow: 0 0 18px var(--badge-glow, 0.9),
                  0 0 30px var(--badge-glow, 0.6); }
  100% { box-shadow: 0 0 8px var(--badge-glow, 0.5),
                  0 0 16px var(--badge-glow, 0.25); }
}




.syymw-badge-item .syymw-ring {
  position: absolute;
  top: 30px;
  left: 50%;
  width: calc(100% + 20px);   /* 外扩 10px */
  height: calc(100% + 20px);
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  border: 2px solid var(--badge-ring, var(--badge-color));
  box-shadow:
    0 0 10px var(--badge-ring, var(--badge-color)),
    0 0 20px var(--badge-ring, var(--badge-color)),
    0 0 30px rgba(0,0,0,0.2);
  animation: syymw-ring-breathe 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0; /* 保证在徽章下方 */
}




.syymw-avatar-wrap .syymw-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 12px);   /* 等价于 inset:-8px 的外扩效果 */
  height: calc(100% + 12px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--badge-ring, var(--badge-color));
  pointer-events: none;
  box-sizing: border-box;
  box-shadow:
    0 0 10px var(--badge-ring, var(--badge-color)),
    0 0 20px var(--badge-ring, var(--badge-color)),
    0 0 30px rgba(0,0,0,0.2);
  animation: syymw-ring-breathe 3s ease-in-out infinite;
  z-index: 0; /* 保证在徽章下面一层 */
}

/* =============== 1. 无特效 =============== */
.syymw-ring.effect-none { animation: none; }

/* =============== 2. 呼吸 =============== */
.syymw-ring.effect-pulse { animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* =============== 3. 旋转 =============== */
.syymw-ring.effect-spin { animation: spin 3s linear infinite; }
@keyframes spin {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* =============== 4. 光晕闪烁 =============== */
.syymw-ring.effect-glow { animation: glow 2s ease-in-out infinite; }
@keyframes glow {
  0%,100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 5px var(--badge-ring); }
  50%     { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 20px var(--badge-ring); }
}

/* =============== 5. 波纹扩散 =============== */
.syymw-ring.effect-wave { animation: wave 2.5s infinite; }
@keyframes wave {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

/* =============== 6. 闪烁 =============== */
.syymw-ring.effect-flicker { animation: flicker 1s infinite; }
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  20%, 24%, 55% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* =============== 7. 跳动 =============== */
.syymw-ring.effect-bounce { animation: bounce 1.5s infinite; }
@keyframes bounce {
  0%,100% { transform: translate(-50%, -50%) scale(0.7); }
  50%     { transform: translate(-50%, -50%) scale(1.1); }
}

/* =============== 8. 螺旋旋转 =============== */
.syymw-ring.effect-spiral { animation: spiral 4s linear infinite; }
@keyframes spiral {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.7); }
  50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.7); }
}

/* =============== 9. 水波纹循环 =============== */
.syymw-ring.effect-ripple { animation: ripple 2s infinite; }
@keyframes ripple {
  0%   { box-shadow: 0 0 0 0 var(--badge-ring); opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
  100% { box-shadow: 0 0 0 10px transparent; opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

/* =============== 10. 星光闪烁 =============== */
.syymw-ring.effect-twinkle { animation: twinkle 1.5s infinite; }
@keyframes twinkle {
  0%,100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.2; }
  50%     { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* =============== 11. 流光环绕 =============== */
.syymw-ring.effect-flow { 
  background: conic-gradient(from 0deg, var(--badge-ring), transparent 70%);
  animation: flow 3s linear infinite;
}
@keyframes flow {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* =============== 12. 抖动 =============== */
.syymw-ring.effect-shake { animation: shake 0.8s infinite; }
@keyframes shake {
  0%,100% { transform: translate(-50%, -50%) translateX(0) scale(1); }
  25%     { transform: translate(-50%, -50%) translateX(-2px) scale(1); }
  75%     { transform: translate(-50%, -50%) translateX(2px) scale(1); }
}

/* =============== 13. 缩放循环 =============== */
.syymw-ring.effect-zoom { animation: zoom 2s infinite; }
@keyframes zoom {
  0%,100% { transform: translate(-50%, -50%) scale(0.7); }
  50%     { transform: translate(-50%, -50%) scale(1.1); }
}

/* =============== 14. 旋转缩放 =============== */
.syymw-ring.effect-rotate-scale { animation: rotate-scale 3s infinite linear; }
@keyframes rotate-scale {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.7); }
  50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.7); }
}

/* =============== 15. 流星划过 =============== */
.syymw-ring.effect-meteor { animation: meteor 2s infinite; }
@keyframes meteor {
  0%   { transform: translate(-50%, -50%) scale(0.7); box-shadow: -20px -20px 10px var(--badge-ring); opacity: 0; }
  50%  { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 20px var(--badge-ring); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.7); box-shadow: 20px 20px 10px transparent; opacity: 0; }
}

/* =============== 16. 翻转闪烁 =============== */
.syymw-ring.effect-flip { animation: flip 2s infinite; }
@keyframes flip {
  0%   { transform: translate(-50%, -50%) rotateY(0) scale(1); }
  50%  { transform: translate(-50%, -50%) rotateY(180deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotateY(360deg) scale(1); }
}

/* =============== 17. 呼吸光扩散 =============== */
.syymw-ring.effect-breath-light { animation: breath-light 3s infinite; }
@keyframes breath-light {
  0%,100% { transform: translate(-50%, -50%) scale(0.7); box-shadow: 0 0 5px var(--badge-ring); }
  50%     { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 25px var(--badge-ring); }
}

/* =============== 18. 轨道旋转 =============== */
.syymw-ring.effect-orbit { animation: orbit 4s linear infinite; }
@keyframes orbit {
  /* 注意：orbit 原为 rotate + translateX + rotate，不含 scale，保持不变 */
  0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(5px) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(5px) rotate(-360deg); }
}

/* =============== 19. 激光扫射 =============== */
.syymw-ring.effect-laser { 
  background: linear-gradient(90deg, transparent, var(--badge-ring), transparent);
  animation: laser 2s linear infinite;
}
@keyframes laser {
  0%   { background-position: -100% 0; transform: translate(-50%, -50%) scale(1); }
  100% { background-position: 200% 0; transform: translate(-50%, -50%) scale(1); }
}

/* =============== 20. 霓虹灯闪烁 =============== */
.syymw-ring.effect-neon { animation: neon2 1.5s infinite alternate; }
@keyframes neon2 {
  0%   { transform: translate(-50%, -50%) scale(0.7); box-shadow: 0 0 5px var(--badge-ring), 0 0 10px var(--badge-ring); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 15px var(--badge-ring), 0 0 30px var(--badge-ring); opacity: 1; }
}

/* ===========================================
   徽章光圈特效合集（共23组 sy- 系列）
   所有光圈居中统一，视觉对齐一致。
=========================================== */

/* =============== 1. 炫彩脉冲 =============== */
.syymw-ring.effect-sy-pulse {
  border-color: #ff007a;
  box-shadow: 0 0 15px #ff007a, 0 0 35px #ff66b3;
  animation: syymw-sy-pulse 2s ease-in-out infinite;
}
@keyframes syymw-sy-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}

/* =============== 2. 星云流光 =============== */
.syymw-ring.effect-sy-nebula {
  border-color: #00ffff;
  box-shadow: 0 0 30px #00ffff, inset 0 0 60px #0088ff;
  animation: syymw-sy-nebula 4s linear infinite;
}
@keyframes syymw-sy-nebula {
  0%   { transform: translate(-50%, -50%) scale(1); filter: hue-rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1); filter: hue-rotate(360deg); }
}

/* =============== 3. 彩虹旋转 =============== */
.syymw-ring.effect-sy-rainbow {
  border: 3px solid transparent;
  background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
  animation: syymw-sy-rainbow 5s linear infinite;
}
@keyframes syymw-sy-rainbow {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* =============== 4. 蓝焰呼吸 =============== */
.syymw-ring.effect-sy-bluefire {
  border-color: #00bfff;
  box-shadow: 0 0 25px #00bfff, 0 0 60px #00e5ff;
  animation: syymw-sy-bluefire 3s ease-in-out infinite;
}
@keyframes syymw-sy-bluefire {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(0.7); opacity: 0.5; }
}

/* =============== 5. 紫电闪烁 =============== */
.syymw-ring.effect-sy-thunder {
  border-color: #a100ff;
  box-shadow: 0 0 25px #a100ff, 0 0 60px #e600ff;
  animation: syymw-sy-thunder 1.3s infinite;
}
@keyframes syymw-sy-thunder {
  0%, 90%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  93%           { transform: translate(-50%, -50%) scale(0.7); opacity: 0.2; }
}

/* =============== 6. 星尘微光 =============== */
.syymw-ring.effect-sy-stardust {
  border-color: #ffffff;
  box-shadow: 0 0 20px #ffffff;
  animation: syymw-sy-stardust 2.5s ease-in-out infinite;
}
@keyframes syymw-sy-stardust {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.8; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* =============== 7. 极光流转 =============== */
.syymw-ring.effect-sy-aurora {
  background: conic-gradient(cyan, magenta, blue, cyan);
  filter: blur(3px);
  animation: syymw-sy-aurora 6s linear infinite;
}
@keyframes syymw-sy-aurora {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* =============== 8. 烈焰燃烧 =============== */
.syymw-ring.effect-sy-fire {
  border-color: #ff4500;
  box-shadow: 0 0 40px #ff4500, 0 0 80px #ff8800;
  animation: syymw-sy-fire 1.5s ease-in-out infinite;
}
@keyframes syymw-sy-fire {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
}

/* =============== 9. 暮光幻彩 =============== */
.syymw-ring.effect-sy-twilight {
  border-color: #ff7b00;
  box-shadow: 0 0 40px #ff7b00, 0 0 60px #ffc300;
  animation: syymw-sy-twilight 4s linear infinite;
}
@keyframes syymw-sy-twilight {
  0%   { transform: translate(-50%, -50%) scale(1); filter: hue-rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1); filter: hue-rotate(360deg); }
}

/* =============== 10. 冰晶闪耀 =============== */
.syymw-ring.effect-sy-ice {
  border-color: #00e0ff;
  box-shadow: 0 0 20px #00e0ff, inset 0 0 50px #00aaff;
  animation: syymw-sy-ice 3s ease-in-out infinite;
}
@keyframes syymw-sy-ice {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(0.7); opacity: 0.5; }
}

/* =============== 11. 幻彩旋涡 =============== */
.syymw-ring.effect-sy-vortex {
  background: conic-gradient(#ff007a, #00ffff, #ff007a);
  filter: blur(2px);
  animation: syymw-sy-vortex 3s linear infinite;
}
@keyframes syymw-sy-vortex {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* =============== 12. 霓虹闪光 =============== */
.syymw-ring.effect-sy-neon {
  border-color: #00ffff;
  box-shadow: 0 0 25px #00ffff, 0 0 60px #00ccff;
  animation: syymw-sy-neon 1.5s infinite alternate;
}
@keyframes syymw-sy-neon {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.6; box-shadow: 0 0 10px #00ffff, 0 0 20px #00ccff; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; box-shadow: 0 0 25px #00ffff, 0 0 60px #00ccff; }
}

/* =============== 13. 梦境波纹 =============== */
.syymw-ring.effect-sy-dream {
  border-color: #cc99ff;
  box-shadow: 0 0 30px #cc99ff, inset 0 0 60px #9966ff;
  animation: syymw-sy-dream 4s ease-in-out infinite;
}
@keyframes syymw-sy-dream {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.5; }
}

/* =============== 14. 烟雾弥漫 =============== */
.syymw-ring.effect-sy-smoke {
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  filter: blur(5px);
  animation: syymw-sy-smoke 5s ease-in-out infinite;
}
@keyframes syymw-sy-smoke {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
}

/* =============== 15. 流光轨迹 =============== */
.syymw-ring.effect-sy-flow {
  background: conic-gradient(from 0deg, #ff00cc, #00ffff, #ff00cc);
  filter: blur(2px);
  animation: syymw-sy-flow 3s linear infinite;
}
@keyframes syymw-sy-flow {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* =============== 16. 闪烁星环 =============== */
.syymw-ring.effect-sy-star {
  border-color: #ffffff;
  box-shadow: 0 0 30px #ffffff, inset 0 0 60px #ffffff;
  animation: syymw-sy-star 1.8s ease-in-out infinite;
}
@keyframes syymw-sy-star {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(0.7); opacity: 0.3; }
}

/* =============== 17. 金辉环绕 =============== */
.syymw-ring.effect-sy-gold {
  border-color: gold;
  box-shadow: 0 0 40px gold, 0 0 80px #ffb400;
  animation: syymw-sy-gold 2.8s ease-in-out infinite;
}
@keyframes syymw-sy-gold {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
}

/* =============== 18. 流星环 =============== */
.syymw-ring.effect-sy-meteor {
  background: conic-gradient(from 0deg, transparent 270deg, white);
  animation: syymw-sy-meteor 1.2s linear infinite;
}
@keyframes syymw-sy-meteor {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* =============== 19. 翻转环 =============== */
.syymw-ring.effect-sy-flip {
  border-color: #00ffcc;
  box-shadow: 0 0 30px #00ffcc;
  animation: syymw-sy-flip 2s linear infinite;
}
@keyframes syymw-sy-flip {
  0%   { transform: translate(-50%, -50%) scale(1) rotateX(0deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotateX(360deg); }
}

/* =============== 20. 缩放呼吸 =============== */
.syymw-ring.effect-sy-zoom {
  border-color: #ff00ff;
  box-shadow: 0 0 25px #ff00ff, 0 0 60px #ff66ff;
  animation: syymw-sy-zoom 3s ease-in-out infinite;
}
@keyframes syymw-sy-zoom {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}

/* =============== 21. 星际流纹 =============== */
.syymw-ring.effect-sy-galaxy {
  background: conic-gradient(#00ccff, #ff00cc, #ffcc00, #00ccff);
  animation: syymw-sy-galaxy 6s linear infinite;
  filter: drop-shadow(0 0 6px #00ccff) drop-shadow(0 0 12px #00ccff);
}
@keyframes syymw-sy-galaxy {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* =============== 22. 霓虹爆闪 =============== */
.syymw-ring.effect-sy-neonx {
  border-color: #00ffff;
  box-shadow: 0 0 15px #00ffff, 0 0 50px #00ccff;
  animation: syymw-sy-neonx 1s infinite;
  filter: drop-shadow(0 0 6px #00ffff) drop-shadow(0 0 12px #00ccff);
}
@keyframes syymw-sy-neonx {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
}

/* =============== 23. 星尘微光（扩展） =============== */
.syymw-ring.effect-sy-stardustx {
  border-color: #ffffff;
  animation: syymw-sy-stardustx 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 12px #ffffff);
}
@keyframes syymw-sy-stardustx {
  0%, 100% {
    box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff;
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 40px #ffffff, 0 0 60px #ffffff;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* =============== 24. 光子轨迹 =============== */
.syymw-ring.effect-sy-photon {
  background: conic-gradient(from 0deg, #00ffff, #0088ff, #00ffff);
  animation: syymw-sy-photon 2s linear infinite;
  filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 16px #00aaff);
}
@keyframes syymw-sy-photon {
  from { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  to   { transform: translate(-50%, -50%) scale(1) rotate(360deg); }
}

/* =============== 25. 晶光幻彩 =============== */
.syymw-ring.effect-sy-crystal {
  background: conic-gradient(#ff0080, #ffcc00, #00ffff, #ff0080);
  animation: syymw-sy-crystal 4s linear infinite;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #fff);
  opacity: 0.9;
}
@keyframes syymw-sy-crystal {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: hue-rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); filter: hue-rotate(360deg); }
}

/* =============== 26. 幻彩呼吸 =============== */
.syymw-ring.effect-sy-iridescent {
  background: conic-gradient(red, orange, yellow, green, cyan, blue, violet, red);
  animation: syymw-sy-iridescent 3.5s ease-in-out infinite;
  filter: blur(2px) drop-shadow(0 0 6px #fff);
}
@keyframes syymw-sy-iridescent {
  0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 1; filter: hue-rotate(0deg); }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; filter: hue-rotate(180deg); }
}





/* ===== 徽章赠送规则样式 ===== */
#badge_rules_force {
  color: #333;
  background: #ebebeb;
  padding: 10px 16px;
  border-radius: 10px;
  max-width: 760px;
  margin: 16px auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  font-size: 14px;
  line-height: 1.6;
}


/* 单条规则布局 */
#badge_rules_force .badge-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed #f00;
}

/* 数字标识 */
#badge_rules_force .badge-rank {
  width: 44px;
  font-weight: 700;
  font-size: 18px;
  color: #f00;
  text-align: center;
  flex-shrink: 0;
}

/* 标题 */
#badge_rules_force .badge-desc h4 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #333;
}

/* 说明文字 */
#badge_rules_force .badge-desc p {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* 最后一条不要下边框 */
#badge_rules_force .badge-row:last-child {
  border-bottom: none;
}


/* 黑夜模式 */
[data-bs-theme="dark"] #badge_rules_force {
  color: #333;
  background: #252525;
}

[data-bs-theme="dark"] #badge_rules_force .badge-desc h4 {
  color: #e4e4e4;
}

[data-bs-theme="dark"] #badge_rules_force .badge-desc p {
  color: #989898;
}