Remove 'your favorite badge' label, bigger + more particles (12 total)

- Removed all 'Your favorite badge' text labels from Trophy Case
- Increased particle count from 8 to 12
- Made particles bigger (3-6px, was 2-4px) with stronger glow
- Added more color variety (pink, gold, purple, cyan)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: amyleesterling

src/components/UserProfilePanel.vue

@@ -838,7 +838,7 @@ const emit = defineEmits({hide: null, 'open-settings': null});
               <div class="nge-trophy-ring nge-trophy-ring--3"></div>
               <div class="nge-trophy-ring nge-trophy-ring--4"></div>
               <div class="nge-trophy-ring nge-trophy-ring--5"></div>
-              <span v-for="i in 8" :key="i" class="nge-trophy-orbit-dot" :style="{ '--j': i }"></span>
+              <span v-for="i in 12" :key="i" class="nge-trophy-orbit-dot" :style="{ '--j': i }"></span>
               <div class="nge-trophy-aura"></div>
             </div>
             <img
@@ -853,7 +853,6 @@ const emit = defineEmits({hide: null, 'open-settings': null});
               <div class="nge-trophy-featured-threshold">
                 Won on <strong>{{ formatDate(selectedSpecialBadge.awarded_at) }}</strong>
               </div>
-              <div v-if="favoriteBadgeSlug === (selectedSpecialBadge.badge?.slug || `special-${selectedSpecialBadge.id}`)" class="nge-trophy-featured-fav-label">⭐ Your favorite badge</div>
             </div>
             <button
               class="nge-trophy-featured-star"
@@ -869,7 +868,7 @@ const emit = defineEmits({hide: null, 'open-settings': null});
               <div class="nge-trophy-ring nge-trophy-ring--3"></div>
               <div class="nge-trophy-ring nge-trophy-ring--4"></div>
               <div class="nge-trophy-ring nge-trophy-ring--5"></div>
-              <span v-for="i in 8" :key="i" class="nge-trophy-orbit-dot" :style="{ '--j': i }"></span>
+              <span v-for="i in 12" :key="i" class="nge-trophy-orbit-dot" :style="{ '--j': i }"></span>
               <div class="nge-trophy-aura"></div>
             </div>
             <img
@@ -884,7 +883,6 @@ const emit = defineEmits({hide: null, 'open-settings': null});
               <div class="nge-trophy-featured-threshold">
                 Won on <strong>{{ formatDate(favoriteSpecialBadge.awarded_at) }}</strong>
               </div>
-              <div class="nge-trophy-featured-fav-label">⭐ Your favorite badge</div>
             </div>
             <button
               class="nge-trophy-featured-star nge-trophy-featured-star--active"
@@ -899,7 +897,7 @@ const emit = defineEmits({hide: null, 'open-settings': null});
               <div class="nge-trophy-ring nge-trophy-ring--3"></div>
               <div class="nge-trophy-ring nge-trophy-ring--4"></div>
               <div class="nge-trophy-ring nge-trophy-ring--5"></div>
-              <span v-for="i in 8" :key="i" class="nge-trophy-orbit-dot" :style="{ '--j': i }"></span>
+              <span v-for="i in 12" :key="i" class="nge-trophy-orbit-dot" :style="{ '--j': i }"></span>
               <div class="nge-trophy-aura"></div>
             </div>
             <img
@@ -914,7 +912,6 @@ const emit = defineEmits({hide: null, 'open-settings': null});
               <div class="nge-trophy-featured-threshold">
                 Unlocked at <strong>{{ featuredBadge.threshold.toLocaleString() }}</strong> {{ thresholdLabel(featuredBadge) }}
               </div>
-              <div v-if="favoriteBadgeSlug === featuredBadge.slug" class="nge-trophy-featured-fav-label">⭐ Your favorite badge</div>
             </div>
             <button
               class="nge-trophy-featured-star"
@@ -2237,47 +2234,68 @@ const emit = defineEmits({hide: null, 'open-settings': null});
 /* Orbital dots */
 .nge-trophy-orbit-dot {
   position: absolute;
-  width: 4px; height: 4px;
+  width: 6px; height: 6px;
   border-radius: 50%;
-  background: rgba(0, 220, 255, 0.7);
-  box-shadow: 0 0 6px rgba(0, 220, 255, 0.4), 0 0 14px rgba(0, 220, 255, 0.2);
+  background: rgba(0, 220, 255, 0.8);
+  box-shadow: 0 0 8px rgba(0, 220, 255, 0.5), 0 0 18px rgba(0, 220, 255, 0.2);
   top: 50%; left: 50%;
   will-change: transform;
   animation: nge-trophy-orbit 40s linear infinite;
-  animation-delay: calc(var(--j) * -12s);
+  animation-delay: calc(var(--j) * -3.3s);
 }
 .nge-trophy-orbit-dot:nth-child(odd) {
-  width: 3px; height: 3px;
-  background: rgba(206, 180, 255, 0.6);
-  box-shadow: 0 0 5px rgba(206, 180, 255, 0.3);
+  width: 4px; height: 4px;
+  background: rgba(206, 180, 255, 0.7);
+  box-shadow: 0 0 7px rgba(206, 180, 255, 0.4);
   animation-duration: 55s;
   animation-direction: reverse;
 }
 .nge-trophy-orbit-dot:nth-child(3n) {
-  width: 3px; height: 3px;
-  background: rgba(0, 255, 180, 0.5);
-  box-shadow: 0 0 5px rgba(0, 255, 180, 0.3);
+  width: 5px; height: 5px;
+  background: rgba(0, 255, 180, 0.6);
+  box-shadow: 0 0 7px rgba(0, 255, 180, 0.4);
   animation-duration: 48s;
 }
 /* Outer orbit particles */
-.nge-trophy-orbit-dot:nth-child(n+6) {
+.nge-trophy-orbit-dot:nth-child(n+7) {
   animation-name: nge-trophy-orbit-outer;
   animation-duration: 65s;
-  width: 2px; height: 2px;
-  opacity: 0.6;
+  width: 4px; height: 4px;
+  opacity: 0.8;
 }
-.nge-trophy-orbit-dot:nth-child(7) {
-  background: rgba(255, 200, 100, 0.5);
-  box-shadow: 0 0 4px rgba(255, 200, 100, 0.3);
+.nge-trophy-orbit-dot:nth-child(8) {
+  width: 5px; height: 5px;
+  background: rgba(255, 200, 100, 0.6);
+  box-shadow: 0 0 6px rgba(255, 200, 100, 0.4);
   animation-duration: 58s;
   animation-direction: reverse;
 }
-.nge-trophy-orbit-dot:nth-child(8) {
-  width: 2.5px; height: 2.5px;
-  background: rgba(100, 180, 255, 0.6);
-  box-shadow: 0 0 5px rgba(100, 180, 255, 0.3);
+.nge-trophy-orbit-dot:nth-child(9) {
+  width: 4px; height: 4px;
+  background: rgba(100, 180, 255, 0.7);
+  box-shadow: 0 0 7px rgba(100, 180, 255, 0.4);
   animation-duration: 72s;
 }
+.nge-trophy-orbit-dot:nth-child(10) {
+  width: 3px; height: 3px;
+  background: rgba(255, 150, 200, 0.6);
+  box-shadow: 0 0 6px rgba(255, 150, 200, 0.3);
+  animation-duration: 50s;
+  animation-direction: reverse;
+}
+.nge-trophy-orbit-dot:nth-child(11) {
+  width: 5px; height: 5px;
+  background: rgba(0, 220, 255, 0.5);
+  box-shadow: 0 0 8px rgba(0, 220, 255, 0.3);
+  animation-duration: 80s;
+}
+.nge-trophy-orbit-dot:nth-child(12) {
+  width: 3.5px; height: 3.5px;
+  background: rgba(206, 147, 216, 0.6);
+  box-shadow: 0 0 6px rgba(206, 147, 216, 0.4);
+  animation-duration: 62s;
+  animation-direction: reverse;
+}
 @keyframes nge-trophy-orbit {
   from { transform: rotate(calc(var(--j) * 45deg))       translateX(175px) rotate(calc(var(--j) * -45deg)); }
   to   { transform: rotate(calc(var(--j) * 45deg + 360deg)) translateX(175px) rotate(calc(var(--j) * -45deg - 360deg)); }