fix(成就): 圆环百分比在移动端撑出 + 卡片边框加粗

- 圆环改用默认插槽渲染百分比，字号跟断点走（naive 自带指示器字号固定，76px 圆环放不下）
- 卡片边框 1px → 2px
- 置灰从整张卡挪到内容上，未获得的卡片不再把稀有度边框一起洗成灰

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/oj/achievement/components/AchievementCard.vue

@@ -55,10 +55,15 @@ const unlockDate = computed(() => {
 <template>
   <n-card
     size="small"
-    :class="{ locked: !achievement.unlocked, rare: isRare }"
-    :style="{ borderColor: RARITY_COLOR[achievement.rarity] }"
+    :class="{ rare: isRare }"
+    :style="{
+      borderColor: RARITY_COLOR[achievement.rarity],
+      // 1px 的描边在卡片背景上几乎看不出稀有度，加粗一档
+      borderWidth: '2px',
+    }"
   >
-    <n-thing>
+    <!-- 置灰只作用在内容上：套在整张卡上会把稀有度边框也一并洗成灰色 -->
+    <n-thing :class="{ locked: !achievement.unlocked }">
       <template #avatar>
         <AchievementIcon :icon="achievement.icon" :size="32" />
       </template>