/* ==== from css/pixel-avatars.css ==== */
/**
 * Pixel avatars - 完整 10 個頭像（基礎 4 + 高等級 6 全部獨立像素稿）
 */

/* ===== 基礎尺寸與定位 ===== */
.pixel-avatar {
  --pa-scale: 1;
  --pa-width: 8px;
  --pa-height: 10px;
  width: var(--pa-width);
  height: var(--pa-height);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--pa-scale));
  transform-origin: center center;
  image-rendering: pixelated;
  background: transparent;
}

.member-header .user-avatar .pixel-avatar,
#userAvatar .pixel-avatar { --pa-scale: 4; }

.avatar-card .avatar-display .pixel-avatar,
.avatar-display .pixel-avatar { --pa-scale: 7.9; }

.pixel-avatar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
}

/* ===== 1. 像素小兵 soldier ===== */
.pixel-soldier::before {
  box-shadow:
    2px 0 0 #4b5563,3px 0 0 #4b5563,4px 0 0 #4b5563,5px 0 0 #4b5563,
    1px 1px 0 #4b5563,2px 1px 0 #94a3b8,3px 1px 0 #94a3b8,4px 1px 0 #94a3b8,5px 1px 0 #94a3b8,6px 1px 0 #4b5563,
    1px 2px 0 #94a3b8,2px 2px 0 #f5d0c5,3px 2px 0 #f5d0c5,4px 2px 0 #f5d0c5,5px 2px 0 #f5d0c5,6px 2px 0 #94a3b8,
    1px 3px 0 #94a3b8,2px 3px 0 #f5d0c5,3px 3px 0 #111827,4px 3px 0 #f5d0c5,5px 3px 0 #111827,6px 3px 0 #94a3b8,
    2px 4px 0 #2563eb,3px 4px 0 #1d4ed8,4px 4px 0 #2563eb,5px 4px 0 #1d4ed8,
    1px 5px 0 #2563eb,2px 5px 0 #2563eb,3px 5px 0 #facc15,4px 5px 0 #facc15,5px 5px 0 #2563eb,6px 5px 0 #2563eb,
    2px 6px 0 #1d4ed8,3px 6px 0 #2563eb,4px 6px 0 #2563eb,5px 6px 0 #1d4ed8,
    2px 7px 0 #1f2937,3px 7px 0 #374151,4px 7px 0 #1f2937,5px 7px 0 #374151,
    2px 8px 0 #111827,3px 8px 0 #111827,4px 8px 0 #111827,5px 8px 0 #111827;
}

/* ===== 2. 像素學徒 apprentice ===== */
.pixel-apprentice::before {
  box-shadow:
    3px 0 0 #db2777,4px 0 0 #db2777,
    2px 1px 0 #db2777,3px 1px 0 #f472b6,4px 1px 0 #f472b6,5px 1px 0 #db2777,
    2px 2px 0 #f5d0c5,3px 2px 0 #f5d0c5,4px 2px 0 #f5d0c5,5px 2px 0 #f5d0c5,
    2px 3px 0 #f5d0c5,3px 3px 0 #7c3aed,4px 3px 0 #f5d0c5,5px 3px 0 #7c3aed,
    2px 4px 0 #8b5cf6,3px 4px 0 #a78bfa,4px 4px 0 #8b5cf6,5px 4px 0 #a78bfa,
    1px 5px 0 #8b5cf6,2px 5px 0 #8b5cf6,3px 5px 0 #facc15,4px 5px 0 #facc15,5px 5px 0 #8b5cf6,6px 5px 0 #8b5cf6,
    2px 6px 0 #8b5cf6,3px 6px 0 #a78bfa,4px 6px 0 #8b5cf6,5px 6px 0 #a78bfa,
    3px 7px 0 #8b5cf6,4px 7px 0 #8b5cf6;
}

/* ===== 3. 代碼戰士 coder ===== */
.pixel-coder::before {
  box-shadow:
    2px 0 0 #0f766e,3px 0 0 #0f766e,4px 0 0 #0f766e,5px 0 0 #0f766e,
    1px 1px 0 #0f766e,2px 1px 0 #2dd4bf,3px 1px 0 #14b8a6,4px 1px 0 #14b8a6,5px 1px 0 #2dd4bf,6px 1px 0 #0f766e,
    1px 2px 0 #0f766e,2px 2px 0 #67e8f9,3px 2px 0 #22d3ee,4px 2px 0 #22d3ee,5px 2px 0 #67e8f9,6px 2px 0 #0f766e,
    1px 3px 0 #0f766e,2px 3px 0 #67e8f9,3px 3px 0 #0f766e,4px 3px 0 #0f766e,5px 3px 0 #67e8f9,6px 3px 0 #0f766e,
    2px 4px 0 #0f766e,3px 4px 0 #14b8a6,4px 4px 0 #14b8a6,5px 4px 0 #0f766e,
    1px 5px 0 #0f766e,2px 5px 0 #0f766e,3px 5px 0 #22d3ee,4px 5px 0 #22d3ee,5px 5px 0 #0f766e,6px 5px 0 #0f766e,
    2px 6px 0 #0f766e,3px 6px 0 #14b8a6,4px 6px 0 #14b8a6,5px 6px 0 #0f766e,
    2px 7px 0 #115e59,3px 7px 0 #0f766e,4px 7px 0 #0f766e,5px 7px 0 #115e59,
    2px 8px 0 #0b3b36,3px 8px 0 #0b3b36,4px 8px 0 #0b3b36,5px 8px 0 #0b3b36;
}

/* ===== 4. 像素妖精 fairy ===== */
.pixel-fairy::before {
  box-shadow:
    0px 2px 0 #e9d5ff,1px 3px 0 #d8b4fe,0px 4px 0 #e9d5ff,
    7px 2px 0 #e9d5ff,6px 3px 0 #d8b4fe,7px 4px 0 #e9d5ff,
    2px 0 0 #9333ea,3px 0 0 #9333ea,4px 0 0 #9333ea,5px 0 0 #9333ea,
    1px 1px 0 #9333ea,2px 1px 0 #c084fc,3px 1px 0 #c084fc,4px 1px 0 #c084fc,5px 1px 0 #c084fc,6px 1px 0 #9333ea,
    2px 2px 0 #fef3c7,3px 2px 0 #fef3c7,4px 2px 0 #fef3c7,5px 2px 0 #fef3c7,
    1px 3px 0 #fef3c7,2px 3px 0 #7c3aed,3px 3px 0 #fef3c7,4px 3px 0 #fef3c7,5px 3px 0 #7c3aed,6px 3px 0 #fef3c7,
    2px 4px 0 #fef3c7,3px 4px 0 #fef3c7,4px 4px 0 #fef3c7,5px 4px 0 #fef3c7,
    1px 5px 0 #9333ea,2px 5px 0 #c084fc,3px 5px 0 #9333ea,4px 5px 0 #9333ea,5px 5px 0 #c084fc,6px 5px 0 #9333ea,
    1px 6px 0 #9333ea,2px 6px 0 #f5d0c5,3px 6px 0 #f5d0c5,4px 6px 0 #f5d0c5,5px 6px 0 #f5d0c5,6px 6px 0 #9333ea,
    2px 7px 0 #9333ea,3px 7px 0 #9333ea,4px 7px 0 #9333ea,5px 7px 0 #9333ea,
    3px 8px 0 #fef3c7,4px 8px 0 #fef3c7;
}

/* ===== 5. 像素武士 samurai ===== */
.pixel-samurai::before {
  box-shadow:
    /* 頭盔＋角（紅色武士盔）*/
    1px 0 0 #dc2626,3px 0 0 #dc2626,5px 0 0 #dc2626,7px 0 0 #dc2626,
    0px 1px 0 #991b1b,1px 1px 0 #dc2626,2px 1px 0 #f87171,3px 1px 0 #991b1b,4px 1px 0 #991b1b,5px 1px 0 #dc2626,6px 1px 0 #f87171,7px 1px 0 #991b1b,
    0px 2px 0 #991b1b,1px 2px 0 #f87171,2px 2px 0 #fca5a5,3px 2px 0 #991b1b,4px 2px 0 #991b1b,5px 2px 0 #f87171,6px 2px 0 #fca5a5,7px 2px 0 #991b1b,
    0px 3px 0 #991b1b,1px 3px 0 #f87171,2px 3px 0 #fca5a5,3px 3px 0 #f87171,4px 3px 0 #991b1b,5px 3px 0 #f87171,6px 3px 0 #fca5a5,7px 3px 0 #991b1b,
    1px 4px 0 #991b1b,2px 4px 0 #dc2626,3px 4px 0 #f87171,4px 4px 0 #991b1b,5px 4px 0 #f87171,6px 4px 0 #dc2626,
    0px 5px 0 #7f1d1d,1px 5px 0 #dc2626,2px 5px 0 #991b1b,3px 5px 0 #fca5a5,4px 5px 0 #991b1b,5px 5px 0 #dc2626,6px 5px 0 #991b1b,7px 5px 0 #7f1d1d,
    1px 6px 0 #991b1b,2px 6px 0 #facc15,3px 6px 0 #991b1b,4px 6px 0 #991b1b,5px 6px 0 #facc15,6px 6px 0 #991b1b,
    1px 7px 0 #7f1d1d,2px 7px 0 #991b1b,3px 7px 0 #991b1b,4px 7px 0 #7f1d1d,5px 7px 0 #991b1b,6px 7px 0 #7f1d1d,
    2px 8px 0 #7f1d1d,3px 8px 0 #7f1d1d,4px 8px 0 #7f1d1d,5px 8px 0 #7f1d1d;
}

/* ===== 6. 霓虹少女 neon ===== */
.pixel-neon::before {
  box-shadow:
    /* 亮粉髮＋耳機燈 */
    0px 0 0 #f0abfc,3px 0 0 #f0abfc,4px 0 0 #f0abfc,7px 0 0 #f0abfc,
    0px 1px 0 #d946ef,1px 1px 0 #f0abfc,2px 1px 0 #d946ef,3px 1px 0 #f9a8d4,4px 1px 0 #f9a8d4,5px 1px 0 #d946ef,6px 1px 0 #f0abfc,7px 1px 0 #d946ef,
    1px 2px 0 #d946ef,2px 2px 0 #f0abfc,3px 2px 0 #f0abfc,4px 2px 0 #f0abfc,5px 2px 0 #f0abfc,6px 2px 0 #d946ef,
    1px 3px 0 #d946ef,2px 3px 0 #fde68a,3px 3px 0 #fde68a,4px 3px 0 #d946ef,5px 3px 0 #fde68a,6px 3px 0 #d946ef,
    1px 4px 0 #f9a8d4,2px 4px 0 #fde68a,3px 4px 0 #fde68a,4px 4px 0 #fde68a,5px 4px 0 #fde68a,6px 4px 0 #f9a8d4,
    1px 5px 0 #d946ef,2px 5px 0 #f472b6,3px 5px 0 #f0abfc,4px 5px 0 #f472b6,5px 5px 0 #f0abfc,6px 5px 0 #d946ef,
    1px 6px 0 #a21caf,2px 6px 0 #d946ef,3px 6px 0 #f472b6,4px 6px 0 #f0abfc,5px 6px 0 #d946ef,6px 6px 0 #a21caf,
    0px 7px 0 #a21caf,1px 7px 0 #d946ef,2px 7px 0 #f472b6,3px 7px 0 #f9a8d4,4px 7px 0 #f472b6,5px 7px 0 #d946ef,6px 7px 0 #a21caf,
    2px 8px 0 #a21caf,3px 8px 0 #d946ef,4px 8px 0 #a21caf,5px 8px 0 #a21caf;
}

/* ===== 7. 數據領主 lord ===== */
.pixel-lord::before {
  box-shadow:
    0px 0 0 #fbbf24,1px 0 0 #fbbf24,2px 0 0 #fbbf24,3px 0 0 #f59e0b,4px 0 0 #fbbf24,5px 0 0 #f59e0b,6px 0 0 #fbbf24,7px 0 0 #fbbf24,
    1px 1px 0 #fbbf24,2px 1px 0 #f59e0b,3px 1px 0 #fbbf24,4px 1px 0 #fbbf24,5px 1px 0 #f59e0b,6px 1px 0 #fbbf24,
    1px 2px 0 #7c3aed,2px 2px 0 #fde68a,3px 2px 0 #7c3aed,4px 2px 0 #7c3aed,5px 2px 0 #fde68a,6px 2px 0 #7c3aed,
    1px 3px 0 #7c3aed,2px 3px 0 #fde68a,3px 3px 0 #7c3aed,4px 3px 0 #7c3aed,5px 3px 0 #fde68a,6px 3px 0 #7c3aed,
    1px 4px 0 #a78bfa,2px 4px 0 #fde68a,3px 4px 0 #fde68a,4px 4px 0 #fde68a,5px 4px 0 #fde68a,6px 4px 0 #a78bfa,
    0px 5px 0 #6d28d9,1px 5px 0 #7c3aed,2px 5px 0 #fbbf24,3px 5px 0 #f59e0b,4px 5px 0 #fbbf24,5px 5px 0 #7c3aed,6px 5px 0 #6d28d9,7px 5px 0 #6d28d9,
    0px 6px 0 #5b21b6,1px 6px 0 #6d28d9,2px 6px 0 #7c3aed,3px 6px 0 #fbbf24,4px 6px 0 #7c3aed,5px 6px 0 #6d28d9,6px 6px 0 #5b21b6,
    0px 7px 0 #4c1d95,1px 7px 0 #5b21b6,2px 7px 0 #6d28d9,3px 7px 0 #6d28d9,4px 7px 0 #5b21b6,5px 7px 0 #4c1d95,
    2px 8px 0 #4c1d95,3px 8px 0 #5b21b6,4px 8px 0 #4c1d95,5px 8px 0 #4c1d95;
}

/* ===== 論壇像素小人頭像 ===== */
/* 用於論壇帖子列表和詳情頁中的小尺寸頭像 */
.forum-avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.forum-avatar-wrap .pixel-svg-avatar {
  width: 28px !important;
  height: 35px !important;
}

.forum-avatar-wrap .pixel-svg-avatar svg {
  width: 100% !important;
  height: 100% !important;
}

/* 稀有度光環效果 */
.forum-avatar-wrap.legendary::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  z-index: -1;
  animation: legendary-pulse 2s ease-in-out infinite;
}

.forum-avatar-wrap.epic::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a855f7, #7c3aed, #6d28d9);
  z-index: -1;
  animation: epic-pulse 2s ease-in-out infinite;
}

.forum-avatar-wrap.rare::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
  z-index: -1;
}

@keyframes legendary-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes epic-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
} 0 0 #fbbf24,7px 0 0 #fbbf24,
    1px 1px 0 #fbbf24,2px 1px 0 #f59e0b,3px 1px 0 #fbbf24,4px 1px 0 #fbbf24,5px 1px 0 #f59e0b,6px 1px 0 #fbbf24,
    1px 2px 0 #7c3aed,2px 2px 0 #a78bfa,3px 2px 0 #7c3aed,4px 2px 0 #7c3aed,5px 2px 0 #a78bfa,6px 2px 0 #7c3aed,
    1px 3px 0 #7c3aed,2px 3px 0 #fde68a,3px 3px 0 #7c3aed,4px 3px 0 #7c3aed,5px 3px 0 #fde68a,6px 3px 0 #7c3aed,
    1px 4px 0 #a78bfa,2px 4px 0 #fde68a,3px 4px 0 #fde68a,4px 4px 0 #fde68a,5px 4px 0 #fde68a,6px 4px 0 #a78bfa,
    0px 5px 0 #6d28d9,1px 5px 0 #7c3aed,2px 5px 0 #6d28d9,3px 5px 0 #fbbf24,4px 5px 0 #6d28d9,5px 5px 0 #7c3aed,6px 5px 0 #6d28d9,7px 5px 0 #6d28d9,
    0px 6px 0 #5b21b6,1px 6px 0 #6d28d9,2px 6px 0 #7c3aed,3px 6px 0 #fbbf24,4px 6px 0 #7c3aed,5px 6px 0 #6d28d9,6px 6px 0 #5b21b6,
    0px 7px 0 #4c1d95,1px 7px 0 #5b21b6,2px 7px 0 #6d28d9,3px 7px 0 #6d28d9,4px 7px 0 #5b21b6,5px 7px 0 #4c1d95,
    2px 8px 0 #4c1d95,3px 8px 0 #5b21b6,4px 8px 0 #4c1d95,5px 8px 0 #4c1d95;
}

/* ===== 論壇像素小人頭像 ===== */
/* 用於論壇帖子列表和詳情頁中的小尺寸頭像 */
.forum-avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.forum-avatar-wrap .pixel-svg-avatar {
  width: 28px !important;
  height: 35px !important;
}

.forum-avatar-wrap .pixel-svg-avatar svg {
  width: 100% !important;
  height: 100% !important;
}

/* 稀有度光環效果 */
.forum-avatar-wrap.legendary::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  z-index: -1;
  animation: legendary-pulse 2s ease-in-out infinite;
}

.forum-avatar-wrap.epic::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a855f7, #7c3aed, #6d28d9);
  z-index: -1;
  animation: epic-pulse 2s ease-in-out infinite;
}

.forum-avatar-wrap.rare::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
  z-index: -1;
}

@keyframes legendary-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes epic-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ===== 8. 虛擬偶像 idol ===== */
.pixel-idol::before {
  box-shadow:
    0px 0 0 #f472b6,1px 0 0 #f9a8d4,2px 0 0 #f472b6,0px 1px 0 #f9a8d4,1px 1px 0 #f472b6,2px 1px 0 #f9a8d4,
    5px 0 0 #f472b6,6px 0 0 #f9a8d4,7px 0 0 #f472b6,5px 1px 0 #f9a8d4,6px 1px 0 #f472b6,7px 1px 0 #f9a8d4,
    2px 2px 0 #db2777,3px 2px 0 #db2777,4px 2px 0 #db2777,5px 2px 0 #db2777,
    1px 3px 0 #db2777,2px 3px 0 #f472b6,3px 3px 0 #f9a8d4,4px 3px 0 #f9a8d4,5px 3px 0 #f472b6,6px 3px 0 #db2777,
    1px 4px 0 #f9a8d4,2px 4px 0 #fde68a,3px 4px 0 #fde68a,4px 4px 0 #fde68a,5px 4px 0 #fde68a,6px 4px 0 #f9a8d4,
    1px 5px 0 #db2777,2px 5px 0 #f472b6,3px 5px 0 #f9a8d4,4px 5px 0 #f9a8d4,5px 5px 0 #f472b6,6px 5px 0 #db2777,
    0px 6px 0 #9d174d,1px 6px 0 #db2777,2px 6px 0 #f472b6,3px 6px 0 #fbbf24,4px 6px 0 #fbbf24,5px 6px 0 #f472b6,6px 6px 0 #9d174d,
    1px 7px 0 #9d174d,2px 7px 0 #db2777,3px 7px 0 #f472b6,4px 7px 0 #f472b6,5px 7px 0 #db2777,6px 7px 0 #9d174d,
    2px 8px 0 #9d174d,3px 8px 0 #9d174d,4px 8px 0 #9d174d,5px 8px 0 #9d174d;
}

/* ===== 10. 像素女神 goddess ===== */
.pixel-goddess::before {
  box-shadow:
    0px 0 0 #fef3c7,1px 0 0 #fef3c7,2px 0 0 #fef3c7,3px 0 0 #fef08a,4px 0 0 #fef3c7,5px 0 0 #fef08a,6px 0 0 #fef3c7,7px 0 0 #fef3c7,
    1px 1px 0 #fef3c7,2px 1px 0 #fef08a,3px 1px 0 #fef3c7,4px 1px 0 #fef3c7,5px 1px 0 #fef08a,6px 1px 0 #fef3c7,
    1px 2px 0 #fef08a,2px 2px 0 #fde68a,3px 2px 0 #fef08a,4px 2px 0 #fef08a,5px 2px 0 #fde68a,6px 2px 0 #fef08a,
    1px 3px 0 #d946ef,2px 3px 0 #fde68a,3px 3px 0 #fef08a,4px 3px 0 #fef08a,5px 3px 0 #fde68a,6px 3px 0 #d946ef,
    1px 4px 0 #f472b6,2px 4px 0 #fde68a,3px 4px 0 #fde68a,4px 4px 0 #fde68a,5px 4px 0 #fde68a,6px 4px 0 #f472b6,
    1px 5px 0 #d946ef,2px 5px 0 #f472b6,3px 5px 0 #f9a8d4,4px 5px 0 #f9a8d4,5px 5px 0 #f472b6,6px 5px 0 #d946ef,
    0px 6px 0 #a21caf,1px 6px 0 #d946ef,2px 6px 0 #f472b6,3px 6px 0 #fbbf24,4px 6px 0 #fbbf24,5px 6px 0 #f472b6,6px 6px 0 #d946ef,7px 6px 0 #a21caf,
    0px 7px 0 #9d174d,1px 7px 0 #a21caf,2px 7px 0 #d946ef,3px 7px 0 #f472b6,4px 7px 0 #f472b6,5px 7px 0 #d946ef,6px 7px 0 #9d174d,
    2px 8px 0 #9d174d,3px 8px 0 #a21caf,4px 8px 0 #9d174d,5px 8px 0 #9d174d;
}

/* ===== 9. 8-bit 傳說 legend ===== */
.pixel-legend::before {
  box-shadow:
    0px 0 0 #fbbf24,1px 0 0 #fbbf24,2px 0 0 #fbbf24,3px 0 0 #f59e0b,4px 0 0 #fbbf24,5px 0 0 #f59e0b,6px 0 0 #fbbf24,7px 0 0 #fbbf24,
    1px 1px 0 #fbbf24,2px 1px 0 #f59e0b,3px 1px 0 #fbbf24,4px 1px 0 #fbbf24,5px 1px 0 #f59e0b,6px 1px 0 #fbbf24,
    1px 2px 0 #7c3aed,2px 2px 0 #fde68a,3px 2px 0 #7c3aed,4px 2px 0 #7c3aed,5px 2px 0 #fde68a,6px 2px 0 #7c3aed,
    1px 3px 0 #7c3aed,2px 3px 0 #fde68a,3px 3px 0 #7c3aed,4px 3px 0 #7c3aed,5px 3px 0 #fde68a,6px 3px 0 #7c3aed,
    1px 4px 0 #a78bfa,2px 4px 0 #fde68a,3px 4px 0 #fde68a,4px 4px 0 #fde68a,5px 4px 0 #fde68a,6px 4px 0 #a78bfa,
    0px 5px 0 #6d28d9,1px 5px 0 #7c3aed,2px 5px 0 #fbbf24,3px 5px 0 #f59e0b,4px 5px 0 #fbbf24,5px 5px 0 #7c3aed,6px 5px 0 #6d28d9,7px 5px 0 #6d28d9,
    0px 6px 0 #5b21b6,1px 6px 0 #6d28d9,2px 6px 0 #7c3aed,3px 6px 0 #fbbf24,4px 6px 0 #7c3aed,5px 6px 0 #6d28d9,6px 6px 0 #5b21b6,
    0px 7px 0 #4c1d95,1px 7px 0 #5b21b6,2px 7px 0 #6d28d9,3px 7px 0 #6d28d9,4px 7px 0 #5b21b6,5px 7px 0 #4c1d95,
    2px 8px 0 #4c1d95,3px 8px 0 #5b21b6,4px 8px 0 #4c1d95,5px 8px 0 #4c1d95;
}

/* ===== 論壇像素小人頭像 ===== */
/* 用於論壇帖子列表和詳情頁中的小尺寸頭像 */
.forum-avatar-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.forum-avatar-wrap .pixel-svg-avatar {
  width: 28px !important;
  height: 35px !important;
}

.forum-avatar-wrap .pixel-svg-avatar svg {
  width: 100% !important;
  height: 100% !important;
}

/* 稀有度光環效果 */
.forum-avatar-wrap.legendary::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  z-index: -1;
  animation: legendary-pulse 2s ease-in-out infinite;
}

.forum-avatar-wrap.epic::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a855f7, #7c3aed, #6d28d9);
  z-index: -1;
  animation: epic-pulse 2s ease-in-out infinite;
}

.forum-avatar-wrap.rare::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8);
  z-index: -1;
}

@keyframes legendary-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

@keyframes epic-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ==== from css/cyber20-avatars.css ==== */
/* cyber20 PNG avatars - simplified after unified frame system cleanup */

/* Base */
.cyber20-png {
  display: block;
  image-rendering: pixelated;
  border-radius: 0;
  vertical-align: middle;
  transition: filter .2s ease, transform .15s ease;
  width: 36px;
  height: 40px;
}

.cyber20-png.girl-char {
  width: 32px;
  height: 36px;
}

/* Size contexts */
.avatar-artboard .cyber20-png {
  width: 72px;
  height: 80px;
}

.avatar-artboard .cyber20-png.girl-char {
  width: 64px;
  height: 72px;
}

.profile-avatar-bg .cyber20-png {
  width: 96px;
  height: 106px;
}

.profile-avatar-bg .cyber20-png.girl-char {
  width: 88px;
  height: 98px;
}

#userAvatar .cyber20-png,
.header-avatar-micro .cyber20-png {
  width: 36px;
  height: 40px;
}

#userAvatar .cyber20-png.girl-char,
.header-avatar-micro .cyber20-png.girl-char {
  width: 32px;
  height: 36px;
}

.avatar-size-forum .cyber20-png {
  width: 32px;
  height: 36px;
}

.avatar-size-forum .cyber20-png.girl-char {
  width: 28px;
  height: 32px;
}

/* Hover */
.cyber20-png:hover {
  transform: scale(1.08);
}


/* ==== from css/avatar-frames.css ==== */
#userAvatar .avatar-artboard,
.avatar-card .avatar-artboard,
.profile-avatar-bg .avatar-artboard{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#userAvatar .avatar-artboard .cyber20-png,
.avatar-card .avatar-artboard .cyber20-png,
.profile-avatar-bg .avatar-artboard .cyber20-png{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin:0 auto!important;
  transform:none!important;
}

/* Layout overrides for new frame system */
.avatar-tier-cards{gap:24px 22px!important}
.avatar-card{
  width:148px!important;
  min-height:238px!important;
  padding:18px 12px 14px!important;
  overflow:visible!important;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.avatar-card .avatar-display.avatar-frame-system{
  width:136px!important;
  height:136px!important;
  margin:0 auto 12px!important;
  border:none!important;
  background:transparent!important;
  flex-shrink:0;
}
.avatar-card .avatar-meta-row{width:100%;margin-top:6px!important}
.avatar-card .avatar-name{margin-top:6px;min-height:2.6em;display:block;line-height:1.25}
.avatar-card .avatar-status-text{margin-top:6px;min-height:2.2em;line-height:1.35}
.avatar-size-selector{width:136px;height:136px;margin:0 auto 12px}
.avatar-size-selector .avatar-shell{width:100px;height:100px}
.avatar-size-selector .af-crown{width:56px;height:28px;top:-6px;left:50%;transform:translateX(-50%)}
.avatar-size-selector .af-nodes span{width:10px;height:10px;margin:-5px}
.avatar-size-selector.legendary .af-rays{inset:-6%;opacity:.70}
.avatar-size-selector.legendary .af-frame .af-outer-metal{box-shadow:0 0 12px rgba(251,191,36,.32),0 0 20px rgba(245,158,11,.12),inset 0 0 12px rgba(255,245,200,.08)}
.avatar-size-selector.legendary .avatar-shell{box-shadow:0 0 0 3px rgba(251,191,36,.10),0 0 14px rgba(251,191,36,.22),inset 0 0 12px rgba(255,245,200,.10)}
.avatar-size-selector.epic .af-frame .af-outer-metal{box-shadow:0 0 14px rgba(168,85,247,.24),0 0 22px rgba(236,72,153,.08)}
.avatar-size-selector .cyber20-png{filter:brightness(1.12) saturate(1.06)}
.avatar-size-selector.legendary .cyber20-png{filter:brightness(1.18) saturate(1.10) drop-shadow(0 0 9px rgba(251,191,36,.36))}
.avatar-size-selector.epic .cyber20-png{filter:brightness(1.15) saturate(1.08) drop-shadow(0 0 7px rgba(168,85,247,.28))}
.avatar-size-selector.rare .cyber20-png{filter:brightness(1.13) drop-shadow(0 0 6px rgba(56,189,248,.24))}
.avatar-size-selector.uncommon .cyber20-png{filter:brightness(1.10) drop-shadow(0 0 4px rgba(52,211,153,.18))}
.avatar-size-selector.common .cyber20-png{filter:brightness(1.08)}

/* Header micro layout */
#userAvatar,
#userAvatar .avatar-display.avatar-frame-system.avatar-size-header{
  width:38px!important;
  height:38px!important;
}
.avatar-size-header{width:38px;height:38px}
.avatar-size-header .avatar-shell{width:30px;height:30px}
.avatar-size-header .af-crown{width:16px;height:8px;top:-2px;left:50%;transform:translateX(-50%)}
.avatar-size-header .avatar-shell::before{inset:5px}
.avatar-size-header .cyber20-png{filter:brightness(1.08)!important}
.avatar-size-header.legendary .cyber20-png{filter:brightness(1.14)!important}
.avatar-size-header .af-frame .af-inner-ring{inset:6px}
.avatar-size-header .af-frame .af-outer-metal{inset:2px}
.avatar-size-header.legendary .af-frame .af-outer-metal{box-shadow:0 0 8px rgba(251,191,36,.30)!important}
.avatar-size-header.epic .af-frame .af-outer-metal{box-shadow:0 0 7px rgba(168,85,247,.24)!important}
.avatar-size-header.rare .af-frame .af-outer-metal{box-shadow:0 0 6px rgba(56,189,248,.22)!important}
.avatar-size-header.uncommon .af-frame .af-outer-metal{box-shadow:0 0 5px rgba(52,211,153,.18)!important}



.avatar-frame-system{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  isolation:isolate;
  overflow:visible;
}
.avatar-frame-system .af-rays,
.avatar-frame-system .af-crown,
.avatar-frame-system .af-frame,
.avatar-frame-system .af-nodes,
.avatar-frame-system .avatar-shell{
  position:absolute;
}
.avatar-frame-system .af-rays,
.avatar-frame-system .af-frame,
.avatar-frame-system .af-nodes,
.avatar-frame-system .avatar-shell{inset:0}
.avatar-frame-system .avatar-shell{
  margin:auto;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:5;
}
.avatar-frame-system .avatar-bg{
  position:absolute;
  inset:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 34%, rgba(255,255,255,.08), rgba(255,255,255,.02) 38%, rgba(8,12,22,.94) 72%);
}
.avatar-frame-system .avatar-artboard{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.avatar-frame-system .af-crown{display:none}
.avatar-frame-system .af-nodes span{
  position:absolute;
  left:50%;top:50%;
  transform-origin:center;
  border-radius:4px;
}
.avatar-frame-system .af-frame .af-outer-metal,
.avatar-frame-system .af-frame .af-inner-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
}

/* Sizes */
.avatar-size-selector{width:128px;height:128px;margin:0 auto 10px}
.avatar-size-selector .avatar-shell{width:94px;height:94px}
.avatar-size-selector .af-crown{width:58px;height:30px;top:-8px;left:50%;transform:translateX(-50%)}
.avatar-size-selector .af-nodes span{width:10px;height:10px;margin:-5px}
.avatar-size-header{width:42px;height:42px}
.avatar-size-header .avatar-shell{width:34px;height:34px}
.avatar-size-header .af-crown{width:20px;height:10px;top:-3px;left:50%;transform:translateX(-50%)}
.avatar-size-header .af-nodes span{display:none}
.profile-avatar-bg .avatar-frame-system{width:152px;height:152px;margin:0 auto}
.profile-avatar-bg .avatar-frame-system .avatar-shell{width:108px;height:108px}
.profile-avatar-bg .avatar-frame-system .af-crown{width:82px;height:42px;top:-18px;left:50%;transform:translateX(-50%)}
.profile-avatar-bg .avatar-frame-system .af-nodes span{width:14px;height:14px;margin:-7px}

/* Base shell */
.avatar-frame-system .avatar-shell{
  background:
    radial-gradient(circle at 50% 34%, rgba(255,250,220,.10), rgba(255,255,255,.03) 34%, rgba(16,20,32,.98) 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border:2px solid rgba(255,255,255,.2);
  box-shadow:inset 0 0 14px rgba(255,255,255,.06);
}
.avatar-frame-system .avatar-shell::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
}
.avatar-frame-system .af-frame .af-outer-metal{
  border:2px solid rgba(255,255,255,.18);
}
.avatar-frame-system .af-frame .af-inner-ring{
  inset:10px;
  border:1px solid rgba(255,255,255,.16);
}

/* COMMON — data frame */
.avatar-frame-system.common .avatar-shell{border-color:rgba(148,163,184,.52);box-shadow:0 0 16px rgba(148,163,184,.16), inset 0 0 12px rgba(148,163,184,.08)}
.avatar-frame-system.common .af-frame .af-outer-metal{border-color:rgba(148,163,184,.38);box-shadow:0 0 8px rgba(148,163,184,.12)}
.avatar-frame-system.common .af-frame .af-outer-metal::before{
  content:"";position:absolute;inset:-6px;border-radius:18px;
  border:1px solid rgba(148,163,184,.22);
  clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%);
}
.avatar-frame-system.common .af-frame .af-inner-ring{border-style:dashed;border-color:rgba(148,163,184,.22)}
.avatar-frame-system.common .af-nodes span{display:none}

/* UNCOMMON — chip pulse */
.avatar-frame-system.uncommon .avatar-shell{border-color:rgba(52,211,153,.72);box-shadow:0 0 18px rgba(52,211,153,.20), inset 0 0 12px rgba(52,211,153,.08)}
.avatar-frame-system.uncommon .af-frame .af-outer-metal{border-color:rgba(52,211,153,.54);box-shadow:0 0 12px rgba(52,211,153,.20)}
.avatar-frame-system.uncommon .af-frame .af-inner-ring{border-color:rgba(167,243,208,.36)}
.avatar-frame-system.uncommon .af-frame::before,
.avatar-frame-system.uncommon .af-frame::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(52,211,153,.42);border-radius:50%;animation:af-pulse 2.3s ease-in-out infinite}
.avatar-frame-system.uncommon .af-frame::before{width:100%;height:100%}
.avatar-frame-system.uncommon .af-frame::after{width:112%;height:112%;opacity:.55;animation-delay:.35s}
.avatar-frame-system.uncommon .af-nodes span{background:linear-gradient(180deg,rgba(167,243,208,.30),rgba(52,211,153,.12));border:1px solid rgba(167,243,208,.70);box-shadow:0 0 10px rgba(52,211,153,.28)}
.avatar-size-selector.avatar-frame-system.uncommon .af-nodes span:nth-child(1){transform:translateY(-54px)}
.avatar-size-selector.avatar-frame-system.uncommon .af-nodes span:nth-child(2){transform:translateX(54px)}
.avatar-size-selector.avatar-frame-system.uncommon .af-nodes span:nth-child(3){transform:translateY(54px)}
.avatar-size-selector.avatar-frame-system.uncommon .af-nodes span:nth-child(4){transform:translateX(-54px)}
.avatar-size-header.avatar-frame-system.uncommon .af-nodes span:nth-child(1){transform:translateY(-24px)}
.avatar-size-header.avatar-frame-system.uncommon .af-nodes span:nth-child(2){transform:translateX(24px)}
.avatar-size-header.avatar-frame-system.uncommon .af-nodes span:nth-child(3){transform:translateY(24px)}
.avatar-size-header.avatar-frame-system.uncommon .af-nodes span:nth-child(4){transform:translateX(-24px)}
.profile-avatar-bg .avatar-frame-system.uncommon .af-nodes span:nth-child(1){transform:translateY(-68px)}
.profile-avatar-bg .avatar-frame-system.uncommon .af-nodes span:nth-child(2){transform:translateX(68px)}
.profile-avatar-bg .avatar-frame-system.uncommon .af-nodes span:nth-child(3){transform:translateY(68px)}
.profile-avatar-bg .avatar-frame-system.uncommon .af-nodes span:nth-child(4){transform:translateX(-68px)}

/* RARE — prism frame */
.avatar-frame-system.rare .avatar-shell{border-color:rgba(56,189,248,.82);box-shadow:0 0 22px rgba(56,189,248,.28), inset 0 0 14px rgba(56,189,248,.10)}
.avatar-frame-system.rare .af-frame .af-outer-metal{border:2px solid rgba(56,189,248,.72);box-shadow:0 0 18px rgba(56,189,248,.24), inset 0 0 8px rgba(191,219,254,.08)}
.avatar-frame-system.rare .af-frame .af-outer-metal::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(125,211,252,.62);animation:af-spin 6s linear infinite}
.avatar-frame-system.rare .af-frame .af-inner-ring{border-color:rgba(191,219,254,.54)}
.avatar-frame-system.rare .af-nodes span{background:linear-gradient(180deg,rgba(224,242,254,.30),rgba(56,189,248,.12));border:1px solid rgba(191,219,254,.82);box-shadow:0 0 12px rgba(56,189,248,.28);transform:rotate(45deg)}
.avatar-size-selector.avatar-frame-system.rare .af-nodes span:nth-child(1){margin-left:-6px;margin-top:-6px;top:16px;left:50%}
.avatar-size-selector.avatar-frame-system.rare .af-nodes span:nth-child(2){margin-left:-6px;margin-top:-6px;top:50%;right:16px;left:auto}
.avatar-size-selector.avatar-frame-system.rare .af-nodes span:nth-child(3){margin-left:-6px;margin-top:-6px;bottom:16px;top:auto;left:50%}
.avatar-size-selector.avatar-frame-system.rare .af-nodes span:nth-child(4){margin-left:-6px;margin-top:-6px;top:50%;left:16px}
.avatar-size-header.avatar-frame-system.rare .af-nodes span:nth-child(1){top:8px;left:50%}
.avatar-size-header.avatar-frame-system.rare .af-nodes span:nth-child(2){top:50%;right:8px;left:auto}
.avatar-size-header.avatar-frame-system.rare .af-nodes span:nth-child(3){bottom:8px;top:auto;left:50%}
.avatar-size-header.avatar-frame-system.rare .af-nodes span:nth-child(4){top:50%;left:8px}
.profile-avatar-bg .avatar-frame-system.rare .af-nodes span:nth-child(1){top:20px;left:50%}
.profile-avatar-bg .avatar-frame-system.rare .af-nodes span:nth-child(2){top:50%;right:20px;left:auto}
.profile-avatar-bg .avatar-frame-system.rare .af-nodes span:nth-child(3){bottom:20px;top:auto;left:50%}
.profile-avatar-bg .avatar-frame-system.rare .af-nodes span:nth-child(4){top:50%;left:20px}

/* EPIC — neon sanctum */
.avatar-frame-system.epic .avatar-shell{border-color:rgba(216,180,254,.92);box-shadow:0 0 26px rgba(168,85,247,.34), inset 0 0 16px rgba(168,85,247,.12)}
.avatar-frame-system.epic .af-frame .af-outer-metal{border:2px solid rgba(168,85,247,.88);box-shadow:0 0 22px rgba(168,85,247,.34), 0 0 46px rgba(236,72,153,.14)}
.avatar-frame-system.epic .af-frame .af-outer-metal::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(236,72,153,0) 0deg 20deg, rgba(216,180,254,.95) 20deg 26deg, rgba(236,72,153,.45) 26deg 34deg, rgba(236,72,153,0) 34deg 80deg, rgba(216,180,254,.95) 80deg 86deg, rgba(236,72,153,.45) 86deg 94deg, rgba(236,72,153,0) 94deg 140deg, rgba(216,180,254,.95) 140deg 146deg, rgba(236,72,153,.45) 146deg 154deg, rgba(236,72,153,0) 154deg 200deg, rgba(216,180,254,.95) 200deg 206deg, rgba(236,72,153,.45) 206deg 214deg, rgba(236,72,153,0) 214deg 260deg, rgba(216,180,254,.95) 260deg 266deg, rgba(236,72,153,.45) 266deg 274deg, rgba(236,72,153,0) 274deg 320deg, rgba(216,180,254,.95) 320deg 326deg, rgba(236,72,153,.45) 326deg 334deg, rgba(236,72,153,0) 334deg 360deg);
  mask:radial-gradient(circle, transparent 0 78%, #000 88% 100%);
  -webkit-mask:radial-gradient(circle, transparent 0 78%, #000 88% 100%);
  animation:af-spin-rev 5.5s linear infinite}
.avatar-frame-system.epic .af-frame .af-inner-ring{border-color:rgba(243,232,255,.58)}
.avatar-frame-system.epic .af-frame .af-inner-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(244,114,182,.66);animation:af-spin 3.6s linear infinite}
.avatar-frame-system.epic .af-nodes span{background:linear-gradient(180deg,rgba(250,232,255,.32),rgba(236,72,153,.16));border:1px solid rgba(233,213,255,.88);box-shadow:0 0 14px rgba(168,85,247,.34);transform:rotate(45deg)}
.avatar-size-selector.avatar-frame-system.epic .af-nodes span:nth-child(1){transform:translateY(-56px) rotate(45deg)}
.avatar-size-selector.avatar-frame-system.epic .af-nodes span:nth-child(2){transform:translateX(56px) rotate(45deg)}
.avatar-size-selector.avatar-frame-system.epic .af-nodes span:nth-child(3){transform:translateY(56px) rotate(45deg)}
.avatar-size-selector.avatar-frame-system.epic .af-nodes span:nth-child(4){transform:translateX(-56px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.epic .af-nodes span:nth-child(1){transform:translateY(-24px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.epic .af-nodes span:nth-child(2){transform:translateX(24px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.epic .af-nodes span:nth-child(3){transform:translateY(24px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.epic .af-nodes span:nth-child(4){transform:translateX(-24px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.epic .af-nodes span:nth-child(1){transform:translateY(-70px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.epic .af-nodes span:nth-child(2){transform:translateX(70px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.epic .af-nodes span:nth-child(3){transform:translateY(70px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.epic .af-nodes span:nth-child(4){transform:translateX(-70px) rotate(45deg)}

/* LEGENDARY — crown relic */
.avatar-frame-system.legendary .af-crown{display:block;z-index:8;filter:drop-shadow(0 0 10px rgba(251,191,36,.55))}
.avatar-frame-system.legendary .af-crown-base,
.avatar-frame-system.legendary .af-crown-crest,
.avatar-frame-system.legendary .af-crown-wing-l,
.avatar-frame-system.legendary .af-crown-wing-r,
.avatar-frame-system.legendary .af-crown-gem{position:absolute}
.avatar-frame-system.legendary .af-crown-base{left:10%;right:10%;bottom:3%;height:24%;border-radius:999px;background:linear-gradient(180deg,#fff1bf,#fbbf24 56%,#b45309)}
.avatar-frame-system.legendary .af-crown-crest{inset:14% 10% 18%;background:linear-gradient(180deg,#fff7d6 0%,#fbbf24 45%,#d97706 100%);clip-path:polygon(0 100%, 8% 42%, 20% 66%, 35% 0, 50% 52%, 65% 0, 80% 66%, 92% 42%, 100% 100%)}
.avatar-frame-system.legendary .af-crown-wing-l,.avatar-frame-system.legendary .af-crown-wing-r{top:36%;width:15%;height:34%;background:linear-gradient(180deg,#ffefb0,#f59e0b 70%,#b45309);clip-path:polygon(0 50%,100% 0,100% 100%)}
.avatar-frame-system.legendary .af-crown-wing-l{left:0;transform:scaleX(-1)}
.avatar-frame-system.legendary .af-crown-wing-r{right:0}
.avatar-frame-system.legendary .af-crown-gem{top:28%;left:50%;transform:translateX(-50%);width:14%;height:28%;border-radius:50%;background:radial-gradient(circle at 35% 35%, #fff, #fff5b8 35%, #f59e0b 72%, #92400e 100%);box-shadow:0 0 10px rgba(255,244,180,.95),0 0 20px rgba(251,191,36,.72)}
.avatar-frame-system.legendary .af-rays{z-index:1;border-radius:50%;inset:-12%;background:repeating-conic-gradient(from 0deg, rgba(255,238,160,0) 0deg 9deg, rgba(255,214,80,.85) 9deg 13deg, rgba(255,245,190,.98) 13deg 14deg, rgba(255,214,80,.28) 14deg 17deg, rgba(255,238,160,0) 17deg 45deg);mask:radial-gradient(circle, transparent 0 53%, #000 66% 100%);-webkit-mask:radial-gradient(circle, transparent 0 53%, #000 66% 100%);animation:af-spin 12s linear infinite;opacity:.96}
.avatar-frame-system.legendary .avatar-shell{border-color:rgba(255,240,185,.96);box-shadow:0 0 0 4px rgba(251,191,36,.18),0 0 28px rgba(251,191,36,.45),inset 0 0 16px rgba(255,245,200,.14),inset 0 -8px 18px rgba(120,53,15,.20)}
.avatar-frame-system.legendary .af-frame .af-outer-metal{border:2px solid rgba(255,236,170,.95);box-shadow:0 0 20px rgba(251,191,36,.55),0 0 44px rgba(245,158,11,.24),inset 0 0 20px rgba(255,245,200,.14),inset 0 -6px 16px rgba(120,53,15,.22)}
.avatar-frame-system.legendary .af-frame .af-outer-metal::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 0deg, rgba(255,248,210,0) 0deg 18deg, rgba(255,236,170,.95) 18deg 22deg, rgba(251,191,36,.28) 22deg 28deg, rgba(255,248,210,0) 28deg 63deg, rgba(255,236,170,.95) 63deg 67deg, rgba(251,191,36,.28) 67deg 73deg, rgba(255,248,210,0) 73deg 108deg, rgba(255,236,170,.95) 108deg 112deg, rgba(251,191,36,.28) 112deg 118deg, rgba(255,248,210,0) 118deg 153deg, rgba(255,236,170,.95) 153deg 157deg, rgba(251,191,36,.28) 157deg 163deg, rgba(255,248,210,0) 163deg 198deg, rgba(255,236,170,.95) 198deg 202deg, rgba(251,191,36,.28) 202deg 208deg, rgba(255,248,210,0) 208deg 243deg, rgba(255,236,170,.95) 243deg 247deg, rgba(251,191,36,.28) 247deg 253deg, rgba(255,248,210,0) 253deg 288deg, rgba(255,236,170,.95) 288deg 292deg, rgba(251,191,36,.28) 292deg 298deg, rgba(255,248,210,0) 298deg 333deg, rgba(255,236,170,.95) 333deg 337deg, rgba(251,191,36,.28) 337deg 343deg, rgba(255,248,210,0) 343deg 360deg);mask:radial-gradient(circle, transparent 0 78%, #000 87% 100%);-webkit-mask:radial-gradient(circle, transparent 0 78%, #000 87% 100%);animation:af-spin-rev 7s linear infinite}
.avatar-frame-system.legendary .af-frame .af-inner-ring{inset:14px;border-color:rgba(255,240,185,.75);box-shadow:inset 0 0 14px rgba(255,240,185,.10),0 0 10px rgba(251,191,36,.16)}
.avatar-frame-system.legendary .af-frame .af-inner-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px dashed rgba(255,236,170,.75);opacity:.95;animation:af-spin 4.5s linear infinite}
.avatar-frame-system.legendary .af-frame .af-inner-ring::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(255,248,210,.35)}
.avatar-frame-system.legendary .af-nodes span{background:linear-gradient(180deg,rgba(255,250,220,.30),rgba(251,191,36,.10));border:2px solid rgba(255,236,170,.92);box-shadow:0 0 12px rgba(251,191,36,.35);transform:rotate(45deg)}
.avatar-size-selector.avatar-frame-system.legendary .af-nodes span:nth-child(1){transform:translateY(-60px) rotate(45deg)}
.avatar-size-selector.avatar-frame-system.legendary .af-nodes span:nth-child(2){transform:translateX(60px) rotate(45deg)}
.avatar-size-selector.avatar-frame-system.legendary .af-nodes span:nth-child(3){transform:translateY(60px) rotate(45deg)}
.avatar-size-selector.avatar-frame-system.legendary .af-nodes span:nth-child(4){transform:translateX(-60px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.legendary .af-nodes span:nth-child(1){transform:translateY(-24px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.legendary .af-nodes span:nth-child(2){transform:translateX(24px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.legendary .af-nodes span:nth-child(3){transform:translateY(24px) rotate(45deg)}
.avatar-size-header.avatar-frame-system.legendary .af-nodes span:nth-child(4){transform:translateX(-24px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.legendary .af-nodes span:nth-child(1){transform:translateY(-76px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.legendary .af-nodes span:nth-child(2){transform:translateX(76px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.legendary .af-nodes span:nth-child(3){transform:translateY(76px) rotate(45deg)}
.profile-avatar-bg .avatar-frame-system.legendary .af-nodes span:nth-child(4){transform:translateX(-76px) rotate(45deg)}

/* Header simplification */
.avatar-size-header .af-rays{display:none!important}
.avatar-size-header .af-frame .af-inner-ring::before,
.avatar-size-header .af-frame .af-inner-ring::after,
.avatar-size-header .af-frame .af-outer-metal::before{display:none!important}
.avatar-size-header.legendary .af-crown{display:block}
.avatar-size-header.common .af-crown,
.avatar-size-header.uncommon .af-crown,
.avatar-size-header.rare .af-crown,
.avatar-size-header.epic .af-crown{display:none}
.avatar-size-header .avatar-shell{box-shadow:none}
.avatar-size-header.common .af-frame .af-outer-metal{border-width:1px;box-shadow:0 0 4px rgba(148,163,184,.18)}
.avatar-size-header.uncommon .af-frame::before,
.avatar-size-header.uncommon .af-frame::after{display:none}
.avatar-size-header.uncommon .af-frame .af-outer-metal{border-width:1px;box-shadow:0 0 6px rgba(52,211,153,.24)}
.avatar-size-header.rare .af-frame .af-outer-metal{border-width:1px;box-shadow:0 0 8px rgba(56,189,248,.28)}
.avatar-size-header.epic .af-frame .af-outer-metal{border-width:1px;box-shadow:0 0 9px rgba(168,85,247,.30)}
.avatar-size-header.legendary .af-frame .af-outer-metal{border-width:1px;box-shadow:0 0 10px rgba(251,191,36,.35)}
.avatar-size-header.legendary .avatar-shell{box-shadow:0 0 0 2px rgba(251,191,36,.12),0 0 10px rgba(251,191,36,.24)}

/* Selector tuning */
.avatar-size-selector .avatar-shell{box-shadow:0 0 0 3px rgba(255,255,255,.04), inset 0 0 12px rgba(255,255,255,.05)}
.avatar-size-selector.legendary .af-rays{inset:-8%;opacity:.76}
.avatar-size-selector.legendary .af-frame .af-outer-metal{box-shadow:0 0 14px rgba(251,191,36,.38),0 0 26px rgba(245,158,11,.16),inset 0 0 14px rgba(255,245,200,.10)}
.avatar-size-selector.legendary .avatar-shell{box-shadow:0 0 0 3px rgba(251,191,36,.13),0 0 18px rgba(251,191,36,.28),inset 0 0 14px rgba(255,245,200,.12)}
.avatar-size-selector.epic .af-frame .af-outer-metal{box-shadow:0 0 16px rgba(168,85,247,.28),0 0 30px rgba(236,72,153,.10)}
.avatar-size-selector.rare .af-frame .af-outer-metal{box-shadow:0 0 12px rgba(56,189,248,.20)}
.avatar-size-selector .cyber20-png{filter:brightness(1.08) saturate(1.05)}
.avatar-size-selector.legendary .cyber20-png{filter:brightness(1.14) saturate(1.08) drop-shadow(0 0 10px rgba(251,191,36,.44))}
.avatar-size-selector.epic .cyber20-png{filter:brightness(1.12) saturate(1.07) drop-shadow(0 0 8px rgba(168,85,247,.34))}
.avatar-size-selector.rare .cyber20-png{filter:brightness(1.10) drop-shadow(0 0 7px rgba(56,189,248,.28))}
.avatar-size-selector.uncommon .cyber20-png{filter:brightness(1.08) drop-shadow(0 0 5px rgba(52,211,153,.22))}
.avatar-size-selector.common .cyber20-png{filter:brightness(1.06)}
.avatar-tier-cards{gap:18px 16px!important}
.avatar-card{padding-bottom:12px}
/* Selector visual polish */
.avatar-size-selector.common .af-frame .af-outer-metal{
  border-color:rgba(148,163,184,.34);
  box-shadow:0 0 8px rgba(148,163,184,.10);
}
.avatar-size-selector.common .af-frame .af-outer-metal::before{
  inset:-4px;
  border-radius:18px;
  clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%);
}
.avatar-size-selector.common .avatar-shell{
  box-shadow:0 0 0 2px rgba(148,163,184,.08), inset 0 0 10px rgba(148,163,184,.05);
}
.avatar-size-selector.uncommon .af-frame .af-outer-metal{
  border-color:rgba(52,211,153,.54);
  box-shadow:0 0 10px rgba(52,211,153,.14);
}
.avatar-size-selector.uncommon .af-frame::before,
.avatar-size-selector.uncommon .af-frame::after{
  border-color:rgba(52,211,153,.34);
}
.avatar-size-selector.uncommon .af-nodes span{
  border-radius:2px;
  transform:none!important;
}
.avatar-size-selector.rare .af-frame .af-outer-metal{
  border-color:rgba(56,189,248,.74);
  box-shadow:0 0 10px rgba(56,189,248,.18), inset 0 0 6px rgba(191,219,254,.06);
}
.avatar-size-selector.rare .af-frame .af-outer-metal::before{
  inset:-6px;
  border-color:rgba(125,211,252,.48);
  animation:af-spin 8s linear infinite;
}
.avatar-size-selector.rare .af-nodes span{
  width:12px;
  height:12px;
  border-radius:2px;
  box-shadow:0 0 8px rgba(56,189,248,.20);
}
.avatar-size-selector.epic .af-frame .af-outer-metal{
  border-color:rgba(168,85,247,.92);
  box-shadow:0 0 12px rgba(168,85,247,.22),0 0 20px rgba(236,72,153,.06);
}
.avatar-size-selector.epic .af-frame .af-outer-metal::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(196,181,253,.60);
  box-shadow:0 0 14px rgba(168,85,247,.18);
}
.avatar-size-selector.epic .af-frame .af-inner-ring{
  border-color:rgba(243,232,255,.68);
  box-shadow:0 0 10px rgba(244,114,182,.10);
}
.avatar-size-selector.epic .af-frame .af-inner-ring::before{
  border-color:rgba(244,114,182,.46);
  animation:af-spin-rev 5s linear infinite;
}
.avatar-size-selector.epic .af-nodes span{
  width:11px;
  height:11px;
  background:linear-gradient(180deg,rgba(250,232,255,.34),rgba(236,72,153,.14));
  box-shadow:0 0 10px rgba(168,85,247,.20);
}
.avatar-size-selector.legendary .af-crown{
  width:60px;
  height:30px;
  top:-8px;
}
.avatar-size-selector.legendary .af-rays{
  inset:-4%;
  opacity:.58;
}
.avatar-size-selector.legendary .af-frame .af-outer-metal{
  border-color:rgba(255,236,170,.96);
  box-shadow:0 0 10px rgba(251,191,36,.26),0 0 16px rgba(245,158,11,.08),inset 0 0 10px rgba(255,245,200,.06);
}
.avatar-size-selector.legendary .af-frame .af-inner-ring{
  border-color:rgba(255,240,185,.84);
}
.avatar-size-selector.legendary .af-frame .af-inner-ring::before{
  border-color:rgba(255,236,170,.58);
}
.avatar-size-selector.legendary .avatar-shell{
  box-shadow:0 0 0 3px rgba(251,191,36,.08),0 0 10px rgba(251,191,36,.16),inset 0 0 10px rgba(255,245,200,.08);
}
.avatar-size-selector.legendary .cyber20-png{
  filter:brightness(1.22) saturate(1.12) drop-shadow(0 0 8px rgba(251,191,36,.26));
}
.avatar-size-selector.epic .cyber20-png{
  filter:brightness(1.17) saturate(1.10) drop-shadow(0 0 6px rgba(168,85,247,.22));
}
.avatar-size-selector.rare .cyber20-png{
  filter:brightness(1.15) saturate(1.08) drop-shadow(0 0 5px rgba(56,189,248,.18));
}
.avatar-size-selector.uncommon .cyber20-png{
  filter:brightness(1.11) saturate(1.05) drop-shadow(0 0 4px rgba(52,211,153,.14));
}
.avatar-size-selector.common .cyber20-png{
  filter:brightness(1.09) saturate(1.02);
}
@keyframes af-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes af-spin-rev{from{transform:rotate(360deg)}to{transform:rotate(0deg)}} @keyframes af-pulse{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}

/* Forum size unified avatar frame */
.avatar-size-forum{
  width:44px;
  height:44px;
  display:inline-flex;
  vertical-align:middle;
  margin-right:8px;
}
.avatar-size-forum .avatar-shell{width:32px;height:32px}
.avatar-size-forum .af-crown{width:18px;height:9px;top:-3px;left:50%;transform:translateX(-50%)}
.avatar-size-forum .af-nodes span{width:5px;height:5px;margin:-2.5px}
.avatar-size-forum .af-rays{inset:-6%;opacity:.52}
.avatar-size-forum .af-frame .af-outer-metal{border-width:1px}
.avatar-size-forum .af-frame .af-inner-ring{inset:6px}
.avatar-size-forum .cyber20-png{filter:brightness(1.10) saturate(1.06)}
.avatar-size-forum.legendary .cyber20-png{filter:brightness(1.16) saturate(1.10) drop-shadow(0 0 6px rgba(251,191,36,.24))}
.avatar-size-forum.epic .cyber20-png{filter:brightness(1.14) saturate(1.08) drop-shadow(0 0 5px rgba(168,85,247,.20))}
.avatar-size-forum.rare .cyber20-png{filter:brightness(1.12) saturate(1.06) drop-shadow(0 0 4px rgba(56,189,248,.18))}
.avatar-size-forum.uncommon .cyber20-png{filter:brightness(1.09) drop-shadow(0 0 3px rgba(52,211,153,.14))}
.avatar-size-forum.common .cyber20-png{filter:brightness(1.08)}

/* Header follows selector style language */
.header-avatar-micro.common .ham-ring-outer{
  border-color:rgba(148,163,184,.40);
  box-shadow:0 0 5px rgba(148,163,184,.14);
  border-radius:10px;
}
.header-avatar-micro.common .ham-ring-inner{
  inset:3px;
  border-color:rgba(226,232,240,.16);
  border-radius:8px;
}
.header-avatar-micro.common .ham-shell{
  inset:6px;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.34);
}
.header-avatar-micro.uncommon .ham-ring-outer{
  border-color:rgba(52,211,153,.72);
  box-shadow:0 0 7px rgba(52,211,153,.26);
}
.header-avatar-micro.uncommon .ham-ring-inner{
  inset:3px;
  border-color:rgba(167,243,208,.26);
}
.header-avatar-micro.uncommon .ham-shell{
  inset:6px;
  border:1px solid rgba(52,211,153,.44);
}
.header-avatar-micro.uncommon::before,
.header-avatar-micro.uncommon::after{
  content:"";
  position:absolute;
  width:4px;height:4px;border-radius:1px;
  background:rgba(167,243,208,.75);
  box-shadow:0 0 6px rgba(52,211,153,.32);
}
.header-avatar-micro.uncommon::before{left:3px;top:50%;transform:translateY(-50%)}
.header-avatar-micro.uncommon::after{right:3px;top:50%;transform:translateY(-50%)}
.header-avatar-micro.rare .ham-ring-outer{
  border-color:rgba(56,189,248,.88);
  box-shadow:0 0 8px rgba(56,189,248,.30);
}
.header-avatar-micro.rare .ham-ring-inner{
  inset:3px;
  border-color:rgba(125,211,252,.28);
}
.header-avatar-micro.rare .ham-shell{
  inset:6px;
  border:1px solid rgba(56,189,248,.54);
}
.header-avatar-micro.rare::before,
.header-avatar-micro.rare::after,
.header-avatar-micro.rare .ham-shell::before,
.header-avatar-micro.rare .ham-shell::after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  border:1px solid rgba(191,219,254,.72);
  background:rgba(56,189,248,.10);
  transform:rotate(45deg);
  box-shadow:0 0 5px rgba(56,189,248,.22);
}
.header-avatar-micro.rare::before{top:2px;left:50%;margin-left:-2.5px}
.header-avatar-micro.rare::after{bottom:2px;left:50%;margin-left:-2.5px}
.header-avatar-micro.rare .ham-shell::before{left:-1px;top:50%;margin-top:-2.5px}
.header-avatar-micro.rare .ham-shell::after{right:-1px;top:50%;margin-top:-2.5px}
.header-avatar-micro.epic .ham-ring-outer{
  border-color:rgba(168,85,247,.92);
  box-shadow:0 0 9px rgba(168,85,247,.34),0 0 16px rgba(236,72,153,.14);
}
.header-avatar-micro.epic .ham-ring-inner{
  inset:2px;
  border:2px solid rgba(196,181,253,.56);
}
.header-avatar-micro.epic .ham-shell{
  inset:7px;
  border:1px solid rgba(216,180,254,.66);
  box-shadow:0 0 6px rgba(168,85,247,.16);
}
.header-avatar-micro.legendary .ham-ring-outer{
  border-color:rgba(251,191,36,.98);
  box-shadow:0 0 10px rgba(251,191,36,.40),0 0 18px rgba(245,158,11,.16);
}
.header-avatar-micro.legendary .ham-ring-inner{
  inset:2px;
  border-color:rgba(255,240,185,.52);
}
.header-avatar-micro.legendary .ham-shell{
  inset:7px;
  border:1px solid rgba(255,240,185,.78);
  box-shadow:0 0 8px rgba(251,191,36,.22);
}
.header-avatar-micro.legendary .ham-crown{display:block}

/* Header micro frame system */
#userAvatar{border-radius:0!important;overflow:visible!important}
.member-header .user-avatar{overflow:visible!important}
.member-header .user-avatar::before,
.member-header .user-avatar::after{display:none!important}
.header-avatar-micro{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.header-avatar-micro .ham-ring,.header-avatar-micro .ham-shell,.header-avatar-micro .ham-crown{position:absolute}
.header-avatar-micro .ham-ring{border-radius:50%;pointer-events:none;transition:box-shadow .2s ease,border-color .2s ease}
.header-avatar-micro .ham-ring-outer{inset:0;border:1px solid rgba(255,255,255,.24)}
.header-avatar-micro .ham-ring-inner{inset:4px;border:1px solid rgba(255,255,255,.14)}
.header-avatar-micro .ham-shell{inset:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 34%, rgba(255,255,255,.10), rgba(255,255,255,.03) 42%, rgba(8,12,22,.95) 74%)}
.header-avatar-micro .ham-artboard{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
@keyframes ham-neon-common{0%,100%{box-shadow:0 0 5px rgba(96,165,250,.28),0 0 10px rgba(59,130,246,.10)}50%{box-shadow:0 0 8px rgba(96,165,250,.42),0 0 14px rgba(59,130,246,.18)}}
@keyframes ham-neon-uncommon{0%,100%{box-shadow:0 0 7px rgba(45,212,191,.30),0 0 12px rgba(16,185,129,.12)}50%{box-shadow:0 0 10px rgba(45,212,191,.48),0 0 16px rgba(16,185,129,.20)}}
@keyframes ham-neon-rare{0%,100%{box-shadow:0 0 8px rgba(56,189,248,.34),0 0 14px rgba(59,130,246,.14)}50%{box-shadow:0 0 12px rgba(56,189,248,.56),0 0 18px rgba(59,130,246,.24)}}
@keyframes ham-neon-epic{0%,100%{box-shadow:0 0 9px rgba(192,132,252,.42),0 0 16px rgba(236,72,153,.16)}50%{box-shadow:0 0 14px rgba(192,132,252,.68),0 0 22px rgba(236,72,153,.26)}}
@keyframes ham-neon-legendary{0%,100%{box-shadow:0 0 10px rgba(251,191,36,.48),0 0 18px rgba(245,158,11,.18)}50%{box-shadow:0 0 16px rgba(251,191,36,.76),0 0 26px rgba(245,158,11,.30)}}
@keyframes ham-neon-avatar{0%,100%{filter:brightness(1.10) saturate(1.08)}50%{filter:brightness(1.22) saturate(1.14)}}
.header-avatar-micro .ham-artboard .cyber20-png{position:relative!important;left:auto!important;top:auto!important;transform:none!important;margin:0 auto!important;filter:brightness(1.10) saturate(1.08);animation:ham-neon-avatar 2.2s ease-in-out infinite}
.header-avatar-micro .ham-shell{inset:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 34%, rgba(255,255,255,.10), rgba(255,255,255,.03) 42%, rgba(8,12,22,.95) 74%)}
.header-avatar-micro.common .ham-ring-outer{border-color:rgba(96,165,250,.70);box-shadow:0 0 5px rgba(96,165,250,.28),0 0 10px rgba(59,130,246,.10);animation:ham-neon-common 2.6s ease-in-out infinite}
.header-avatar-micro.common .ham-ring-inner{border-color:rgba(147,197,253,.28)}
.header-avatar-micro.common .ham-shell{border:1px solid rgba(96,165,250,.46)}
.header-avatar-micro.uncommon .ham-ring-outer{border-color:rgba(45,212,191,.82);box-shadow:0 0 7px rgba(45,212,191,.30),0 0 12px rgba(16,185,129,.12);animation:ham-neon-uncommon 2.2s ease-in-out infinite}
.header-avatar-micro.uncommon .ham-ring-inner{border-color:rgba(153,246,228,.30)}
.header-avatar-micro.uncommon .ham-shell{border:1px solid rgba(45,212,191,.54)}
.header-avatar-micro.rare .ham-ring-outer{border-color:rgba(56,189,248,.92);box-shadow:0 0 8px rgba(56,189,248,.34),0 0 14px rgba(59,130,246,.14);animation:ham-neon-rare 2s ease-in-out infinite}
.header-avatar-micro.rare .ham-ring-inner{border-color:rgba(125,211,252,.36)}
.header-avatar-micro.rare .ham-shell{border:1px solid rgba(56,189,248,.66)}
.header-avatar-micro.epic .ham-ring-outer{border-color:rgba(192,132,252,.96);box-shadow:0 0 9px rgba(192,132,252,.42),0 0 16px rgba(236,72,153,.16);animation:ham-neon-epic 1.8s ease-in-out infinite}
.header-avatar-micro.epic .ham-ring-inner{border-color:rgba(244,114,182,.44)}
.header-avatar-micro.epic .ham-shell{border:1px solid rgba(216,180,254,.76);box-shadow:0 0 6px rgba(168,85,247,.18)}
.header-avatar-micro.legendary .ham-ring-outer{border-color:rgba(251,191,36,.98);box-shadow:0 0 10px rgba(251,191,36,.48),0 0 18px rgba(245,158,11,.18);animation:ham-neon-legendary 1.6s ease-in-out infinite}
.header-avatar-micro.legendary .ham-ring-inner{border-color:rgba(255,240,185,.58)}
.header-avatar-micro.legendary .ham-shell{border:1px solid rgba(255,240,185,.82);box-shadow:0 0 8px rgba(251,191,36,.26),0 0 14px rgba(245,158,11,.10)}
.header-avatar-micro.legendary .ham-crown{display:none;top:-3px;left:50%;transform:translateX(-50%);width:18px;height:9px;filter:drop-shadow(0 0 8px rgba(251,191,36,.88))}
.header-avatar-micro.legendary .ham-crown-gem{top:1px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#fff7c2;box-shadow:0 0 8px rgba(255,244,180,.98)}
.header-avatar-micro.legendary .ham-artboard .cyber20-png{filter:brightness(1.20) saturate(1.12);animation:ham-neon-avatar 1.8s ease-in-out infinite}
[WARN]2026/03/31 10:37:57 otel_setup_sdk.go:133: [armsGoAgent] Load Aliyun Golang Agent Init Start
[WARN]2026/03/31 10:37:57 otel_setup_sdk.go:136: [armsGoAgent] Load Aliyun Golang Agent version: 1.8.12-rapt_6f77d20 report to region: cn-hongkong
[WARN]2026/03/31 10:37:57 otel_setup_sdk.go:182: [armsGoAgent] Load Aliyun Golang Agent Init End
[WARN]2026/03/31 13:43:53 otel_setup_sdk.go:133: [armsGoAgent] Load Aliyun Golang Agent Init Start
[WARN]2026/03/31 13:43:53 otel_setup_sdk.go:136: [armsGoAgent] Load Aliyun Golang Agent version: 1.8.12-rapt_6f77d20 report to region: cn-hongkong
[WARN]2026/03/31 13:43:53 otel_setup_sdk.go:182: [armsGoAgent] Load Aliyun Golang Agent Init End
[ERROR]2026/03/31 13:57:23 client.go:166: [armsGoAgent] [client] Send span to remote , err is http://arms-dc-hk-internal.aliyuncs.com/api/v1/arms/otel/c38dtz91cg@9e131d9f3a79b3e/c38dtz91cg@4870342a94e5d50Post "http://arms-dc-hk-internal.aliyuncs.com/api/v1/arms/otel/c38dtz91cg@9e131d9f3a79b3e/c38dtz91cg@4870342a94e5d50": dial tcp: lookup arms-dc-hk-internal.aliyuncs.com on [::1]:53: read udp [::1]:46505->[::1]:53: read: connection refused
[ERROR]2026/03/31 13:57:23 exporter.go:75: [armsGoAgent] export span to arms error, err is Post "http://arms-dc-hk-internal.aliyuncs.com/api/v1/arms/otel/c38dtz91cg@9e131d9f3a79b3e/c38dtz91cg@4870342a94e5d50": dial tcp: lookup arms-dc-hk-internal.aliyuncs.com on [::1]:53: read udp [::1]:46505->[::1]:53: read: connection refused
[ERROR]2026/03/31 13:57:23 otel_setup_sdk.go:315: [armsGoAgent] otel err is traces export: Post "http://arms-dc-hk-internal.aliyuncs.com/api/v1/arms/otel/c38dtz91cg@9e131d9f3a79b3e/c38dtz91cg@4870342a94e5d50": dial tcp: lookup arms-dc-hk-internal.aliyuncs.com on [::1]:53: read udp [::1]:46505->[::1]:53: read: connection refused


/* ==== from css/badge-effects.css ==== */
/* ===================================================================
   徽章牆特效系統 v6.0 - 完整賽博朋克版
   包含：霓虹邊框、掃描線、故障效果、六邊形網格、角落裝飾、數據流動
   稀有度越高，光效越猛！
   =================================================================== */

/* ===== 六邊形網格背景（底層）===== */
.badge-wall-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); 
    gap: 20px;
    position: relative;
}

/* 六邊形網格疊加層 */
.badge-wall-grid::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: 
        radial-gradient(circle at 20% 30%, rgba(var(--grid-glow, 0, 212, 255), 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(var(--grid-glow, 168, 85, 247), 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ===== 基礎卡殼 ===== */
.badge-sf {
    background: rgba(10, 15, 30, 0.85); 
    border: 2px solid var(--border-subtle); 
    border-radius: 8px;
    padding: 0; 
    text-align: center; 
    cursor: pointer; 
    position: relative; 
    overflow: visible;
    transition: all 0.3s ease;
    z-index: 1;
}

/* ===== 特效①：霓虹邊框 ===== */
.badge-sf::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    background: linear-gradient(90deg, 
        var(--neon-start) 0%, 
        var(--neon-mid) 50%, 
        var(--neon-end) 100%);
    z-index: -2;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
}

.badge-sf::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: inherit;
    z-index: -1;
}

.badge-sf.earned::before {
    opacity: 0.8;
    animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { opacity: 0.6; filter: blur(6px); }
    50% { opacity: 1; filter: blur(10px); }
}

/* 稀有度霓虹顏色 */
.badge-sf.legendary {
    --neon-start: #ff6b9d;
    --neon-mid: #a855f7;
    --neon-end: #ffd700;
    --neon-color: #ff6b9d;
    --neon-rgb: 255, 107, 157;
    --grid-glow: 255, 107, 157;
}

.badge-sf.epic {
    --neon-start: #a855f7;
    --neon-mid: #7b2fff;
    --neon-end: #a855f7;
    --neon-color: #a855f7;
    --neon-rgb: 168, 85, 247;
    --grid-glow: 168, 85, 247;
}

.badge-sf.rare {
    --neon-start: #00d4ff;
    --neon-mid: #00ff9d;
    --neon-end: #00d4ff;
    --neon-color: #00d4ff;
    --neon-rgb: 0, 212, 255;
    --grid-glow: 0, 212, 255;
}

.badge-sf.uncommon {
    --neon-start: #00ff9d;
    --neon-mid: #00d4ff;
    --neon-end: #00ff9d;
    --neon-color: #00ff9d;
    --neon-rgb: 0, 255, 157;
    --grid-glow: 0, 255, 157;
}

.badge-sf.common {
    --neon-start: #94a3b8;
    --neon-mid: #cbd5e1;
    --neon-end: #94a3b8;
    --neon-color: #94a3b8;
    --neon-rgb: 148, 163, 184;
    --grid-glow: 148, 163, 184;
}

/* ===== 特效②：掃描線 ===== */
.badge-sf-scanline {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.badge-sf.earned .badge-sf-scanline {
    opacity: 1;
}

/* 水平掃描線 */
.badge-sf-scanline::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 80%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(var(--neon-rgb), 0.03) 45%,
        rgba(var(--neon-rgb), 0.08) 50%,
        rgba(var(--neon-rgb), 0.03) 55%,
        transparent 100%
    );
    animation: scanMove 3s linear infinite;
}

@keyframes scanMove {
    0% { top: -80%; }
    100% { top: 100%; }
}

/* 柵格線 */
.badge-sf-scanline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(var(--neon-rgb), 0.02) 3px,
            rgba(var(--neon-rgb), 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(var(--neon-rgb), 0.02) 3px,
            rgba(var(--neon-rgb), 0.02) 4px
        );
}

/* 稀有度掃描線強度 */
.badge-sf.earned.legendary .badge-sf-scanline::before { animation-duration: 1.5s; opacity: 0.15; }
.badge-sf.earned.epic .badge-sf-scanline::before { animation-duration: 2s; opacity: 0.12; }
.badge-sf.earned.rare .badge-sf-scanline::before { animation-duration: 2.5s; opacity: 0.1; }
.badge-sf.earned.uncommon .badge-sf-scanline::before { animation-duration: 3s; opacity: 0.08; }
.badge-sf.earned.common .badge-sf-scanline::before { animation-duration: 4s; opacity: 0.05; }

/* ===== 特效③：故障效果（Glitch）===== */
.badge-sf:hover {
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-2px, 1px); filter: hue-rotate(10deg); }
    20% { transform: translate(2px, -1px); filter: hue-rotate(-10deg); }
    30% { transform: translate(-1px, 2px); }
    40% { transform: translate(1px, -2px); filter: hue-rotate(5deg); }
    50% { transform: translate(-2px, 1px); filter: hue-rotate(-5deg); }
    60% { transform: translate(2px, 1px); }
    70% { transform: translate(-1px, -2px); filter: hue-rotate(3deg); }
    80% { transform: translate(1px, 2px); filter: hue-rotate(-3deg); }
    90% { transform: translate(-2px, -1px); }
}

/* 稀有度故障強度 */
.badge-sf.earned.legendary:hover {    animation: glitchLegendary 0.2s ease-in-out;
}

.badge-sf.earned.epic:hover {
    animation: glitchEpic 0.25s ease-in-out;
}

.badge-sf.earned.rare:hover {
    animation: glitchRare 0.3s ease-in-out;
}

@keyframes glitchLegendary {
    0%, 100% { transform: translate(0) skewX(0deg); filter: hue-rotate(0deg) brightness(1); }
    10% { transform: translate(-3px, 2px) skewX(-2deg); filter: hue-rotate(15deg) brightness(1.3); }
    20% { transform: translate(3px, -2px) skewX(2deg); filter: hue-rotate(-15deg) brightness(0.9); }
    30% { transform: translate(-2px, 3px) skewX(-1deg); filter: hue-rotate(10deg); }
    40% { transform: translate(2px, -3px) skewX(1deg); filter: hue-rotate(-10deg) brightness(1.2); }
    50% { transform: translate(-3px, 1px) skewX(-2deg); filter: hue-rotate(8deg); }
    60% { transform: translate(3px, 2px) skewX(2deg); filter: hue-rotate(-8deg); }
    70% { transform: translate(-1px, -3px) skewX(-1deg); filter: hue-rotate(5deg); }
    80% { transform: translate(1px, 3px) skewX(1deg); filter: hue-rotate(-5deg); }
    90% { transform: translate(-2px, -2px) skewX(0deg); filter: hue-rotate(0deg); }
}

@keyframes glitchEpic {
    0%, 100% { transform: translate(0) skewX(0deg); filter: hue-rotate(0deg); }
    15% { transform: translate(-2px, 1px) skewX(-1deg); filter: hue-rotate(10deg); }
    30% { transform: translate(2px, -1px) skewX(1deg); filter: hue-rotate(-10deg); }
    45% { transform: translate(-1px, 2px) skewX(0deg); }
    60% { transform: translate(1px, -2px) skewX(-1deg); filter: hue-rotate(5deg); }
    75% { transform: translate(-2px, 1px) skewX(1deg); filter: hue-rotate(-5deg); }
    90% { transform: translate(0, 0) skewX(0deg); }
}

@keyframes glitchRare {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(1px, -1px); }
    60% { transform: translate(-1px, -1px); }
    80% { transform: translate(1px, 1px); }
}

/* ===== 特效⑤：角落裝飾 ===== */
.badge-sf-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    opacity: 0;
}

.badge-sf.earned .badge-sf-corner {
    opacity: 1;
}

/* 四個角落 */
.badge-sf-corner-tl { top: 4px; left: 4px; border-top: 2px solid var(--neon-color); border-left: 2px solid var(--neon-color); }
.badge-sf-corner-tr { top: 4px; right: 4px; border-top: 2px solid var(--neon-color); border-right: 2px solid var(--neon-color); }
.badge-sf-corner-bl { bottom: 4px; left: 4px; border-bottom: 2px solid var(--neon-color); border-left: 2px solid var(--neon-color); }
.badge-sf-corner-br { bottom: 4px; right: 4px; border-bottom: 2px solid var(--neon-color); border-right: 2px solid var(--neon-color); }

/* 角落發光 */
.badge-sf.earned.legendary .badge-sf-corner { box-shadow: 0 0 8px var(--neon-color); }
.badge-sf.earned.epic .badge-sf-corner { box-shadow: 0 0 6px var(--neon-color); }
.badge-sf.earned.rare .badge-sf-corner { box-shadow: 0 0 5px var(--neon-color); }
.badge-sf.earned.uncommon .badge-sf-corner { box-shadow: 0 0 4px var(--neon-color); }
.badge-sf.earned.common .badge-sf-corner { box-shadow: 0 0 3px var(--neon-color); }

/* ===== 特效⑥：數據流動 ===== */
.badge-sf-dataflow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    border-radius: 0 0 8px 8px;
}

.badge-sf.earned .badge-sf-dataflow {
    opacity: 1;
}

.badge-sf-dataflow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--neon-color) 50%, 
        transparent 100%);
    animation: dataFlow 2s linear infinite;
}

@keyframes dataFlow {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* 稀有度數據流動速度 */
.badge-sf.earned.legendary .badge-sf-dataflow::before { animation-duration: 1s; }
.badge-sf.earned.epic .badge-sf-dataflow::before { animation-duration: 1.5s; }
.badge-sf.earned.rare .badge-sf-dataflow::before { animation-duration: 2s; }
.badge-sf.earned.uncommon .badge-sf-dataflow::before { animation-duration: 2.5s; }
.badge-sf.earned.common .badge-sf-dataflow::before { animation-duration: 3s; }

/* ===== 未點亮狀態 ===== */
.badge-sf:not(.earned) {
    opacity: 0.35;
    filter: brightness(0.4) saturate(0.3) grayscale(0.6);
}

.badge-sf:not(.earned):hover {
    opacity: 0.6;
    filter: brightness(0.6) saturate(0.4) grayscale(0.3);
    transform: translateY(-2px);
}

/* ===== 已點亮狀態增強 ===== */
.badge-sf.earned {
    filter: brightness(1.1) saturate(1.2);
    animation: badgeEntrance 0.5s ease-out forwards;
}

@keyframes badgeEntrance {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 稀有度邊框 */
.badge-sf.legendary { border-color: rgba(255, 107, 157, 0.6); }
.badge-sf.epic { border-color: rgba(168, 85, 247, 0.55); }
.badge-sf.rare { border-color: rgba(0, 212, 255, 0.5); }
.badge-sf.uncommon { border-color: rgba(0, 255, 157, 0.45); }
.badge-sf.common { border-color: rgba(148, 163, 184, 0.4); }

/* ===== 點擊特效 ===== */
.badge-sf.clicked {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.badge-sf.earned:hover {
    transform: translateY(-4px);
    filter: brightness(1.2) saturate(1.3);
}

/* ===== Hover 發光增強 ===== */
.badge-sf.legendary.earned:hover {
    box-shadow: 0 0 30px rgba(255, 107, 157, 0.6), 0 8px 30px rgba(0,0,0,0.4);
}

.badge-sf.epic.earned:hover {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.55), 0 8px 30px rgba(0,0,0,0.4);
}

.badge-sf.rare.earned:hover {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5), 0 8px 30px rgba(0,0,0,0.4);
}

.badge-sf.uncommon.earned:hover {
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.4), 0 8px 30px rgba(0,0,0,0.4);
}

.badge-sf.common.earned:hover {
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.3), 0 8px 30px rgba(0,0,0,0.4);
}

/* ===== 光環背景 ===== */
.badge-sf-halo { 
    position: absolute; 
    top: 12px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    background: radial-gradient(circle, rgba(var(--neon-rgb), 0.5) 0%, transparent 70%); 
    opacity: 0.4; 
    z-index: -1; 
    filter: blur(10px);
}

.badge-sf.earned .badge-sf-halo { 
    opacity: 0.6;
    animation: haloGlow 2s ease-in-out infinite;
}

@keyframes haloGlow {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}

/* 稀有度光環強度 */
.badge-sf.legendary.earned .badge-sf-halo { animation-duration: 1.5s; }
.badge-sf.epic.earned .badge-sf-halo { animation-duration: 1.8s; }
.badge-sf.rare.earned .badge-sf-halo { animation-duration: 2s; }
.badge-sf.uncommon.earned .badge-sf-halo { animation-duration: 2.5s; }
.badge-sf.common.earned .badge-sf-halo { animation-duration: 3s; }

/* ===== 獎牌框 - 保持比例 ===== */
.badge-sf-medal-wrap { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 16px 12px 10px; 
    z-index: 2; 
}

.badge-sf-medal { 
    position: relative; 
    width: auto; 
    height: 56px; 
    min-width: 50px;
    max-width: 90px;
    background: transparent; 
    border: none; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.badge-sf.earned .badge-sf-medal { 
    filter: drop-shadow(0 0 8px rgba(var(--neon-rgb), 0.5));
}

.badge-sf.earned.legendary .badge-sf-medal { filter: drop-shadow(0 0 12px rgba(255, 107, 157, 0.7)); }
.badge-sf.earned.epic .badge-sf-medal { filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.6)); }
.badge-sf.earned.rare .badge-sf-medal { filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)); }

/* ===== 圖標 - 保持比例 ===== */
.badge-sf-icon { 
    font-size: 1.6rem; 
    display: block;
    width: auto;
    height: auto;
    max-width: 70px;
    max-height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(var(--neon-rgb), 0.5));
}

.badge-sf.earned .badge-sf-icon { 
    filter: drop-shadow(0 0 8px rgba(var(--neon-rgb), 0.8));
}

.badge-sf:hover .badge-sf-icon { 
    transform: scale(1.05); 
    filter: drop-shadow(0 0 12px rgba(var(--neon-rgb), 1));
}

/* ===== 粒子軌道（稀有以上）===== */
.badge-sf-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.badge-sf-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(var(--neon-rgb), 0.4);
}

.badge-sf-orbit-particle {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-color);
    transform: translateX(-50%);
    box-shadow: 0 0 8px var(--neon-color);
}

.badge-sf.earned.rare .badge-sf-orbit,
.badge-sf.earned.epic .badge-sf-orbit,
.badge-sf.earned.legendary .badge-sf-orbit {
    animation: orbitSpin 3s linear infinite;
}

/* 稀有度軌道速度 */
.badge-sf.earned.legendary .badge-sf-orbit { animation-duration: 2s; }
.badge-sf.earned.epic .badge-sf-orbit { animation-duration: 2.5s; }
.badge-sf.earned.rare .badge-sf-orbit { animation-duration: 3s; }

@keyframes orbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== 底部元信息 ===== */
.badge-sf-meta { 
    padding: 8px 10px 12px; 
    z-index: 2; 
    position: relative; 
}

/* ===== 徽章名字 - 霓虹發光特效 ===== */
.badge-sf-name { 
    color: #e0e0e0; 
    font-weight: 700; 
    font-size: 0.85rem; 
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(var(--neon-rgb), 0.3);
}

.badge-sf.earned .badge-sf-name {
    color: #fff;
    animation: nameGlow 2s ease-in-out infinite;
}

@keyframes nameGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.8), 0 0 15px rgba(var(--neon-rgb), 0.4); }
    50% { text-shadow: 0 0 12px rgba(var(--neon-rgb), 1), 0 0 25px rgba(var(--neon-rgb), 0.6); }
}

/* 稀有度名字漸變效果 */
.badge-sf.earned.legendary .badge-sf-name {
    background: linear-gradient(90deg, #ff6b9d, #ffd700, #a855f7, #ff6b9d);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: legendaryShine 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 107, 157, 0.8));
}

@keyframes legendaryShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.badge-sf.earned.epic .badge-sf-name {
    background: linear-gradient(90deg, #a855f7, #7b2fff, #a855f7);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: epicShine 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.8));
}

@keyframes epicShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.badge-sf.earned.rare .badge-sf-name {
    background: linear-gradient(90deg, #00d4ff, #00ff9d, #00d4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.7));
}

.badge-sf.earned.uncommon .badge-sf-name {
    color: #00ff9d;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.8), 0 0 15px rgba(0, 255, 157, 0.4);
}

.badge-sf.earned.common .badge-sf-name {
    color: #c0c0c0;
    text-shadow: 0 0 5px rgba(148, 163, 184, 0.5);
}

/* ===== 稀有度標籤 ===== */
.badge-sf-rarity { 
    font-size: 0.65rem; 
    font-weight: 700; 
    padding: 2px 7px; 
    border-radius: 4px; 
    background: rgba(var(--neon-rgb), 0.15); 
    color: var(--neon-color); 
    border: 1px solid rgba(var(--neon-rgb), 0.3); 
    display: inline-block; 
    margin-bottom: 4px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

.badge-sf.earned .badge-sf-rarity {
    background: rgba(var(--neon-rgb), 0.25);
    box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.4);
}

/* 稀有度標籤動畫 */
.badge-sf.legendary.earned .badge-sf-rarity { animation: rarityPulse 1.5s ease-in-out infinite; }
.badge-sf.epic.earned .badge-sf-rarity { animation: rarityPulse 2s ease-in-out infinite; }

@keyframes rarityPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(var(--neon-rgb), 0.3); }
    50% { box-shadow: 0 0 12px rgba(var(--neon-rgb), 0.6); }
}

/* ===== 日期和狀態 ===== */
.badge-sf-date { color: var(--text-muted); font-size: 0.68rem; }
.badge-sf-status { font-size: 0.68rem; margin-top: 3px; }
.badge-sf-check { position: absolute; top: 6px; right: 6px; color: var(--success); font-size: 0.85rem; }

/* ===== 狀態 ===== */
.badge-sf.locked { opacity: 0.35; filter: grayscale(0.6); }
.badge-sf.locked:hover { opacity: 0.6; filter: grayscale(0.3); }

.badge-sf.pending { 
    border-color: rgba(255, 190, 0, 0.4); 
    background: rgba(255, 190, 0, 0.05); 
}

.badge-sf.pending .badge-sf-medal { border-color: rgba(255, 190, 0, 0.5); }
.badge-sf.pending .badge-sf-name { color: #ffcc00; }

/* ===== 響應式 ===== */
@media (max-width: 768px) {
    .badge-wall-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 14px;
    }
    
    .badge-sf-medal { width: 46px; height: 46px; }
    .badge-sf-icon { font-size: 1.4rem; }
    .badge-sf-name { font-size: 0.78rem; }
    .badge-sf-corner { width: 10px; height: 10px; }
    
    /* 移動端簡化動畫以保持流暢 */
    .badge-sf.earned.legendary .badge-sf-scanline::before,
    .badge-sf.earned.epic .badge-sf-scanline::before {
        animation-duration: 4s;
    }
    
    .badge-sf.earned.legendary .badge-sf-dataflow::before,
    .badge-sf.earned.epic .badge-sf-dataflow::before {
        animation-duration: 2s;
    }
}