feat: Добавил попап зачем монеты

frontend/src/components/ui/CoinChip.vue

@@ -2,14 +2,15 @@
 import AppIcon from '@/components/ui/AppIcon.vue'
 
 defineProps<{ amount: number }>()
+defineEmits<{ click: [] }>()
 </script>
 
 <template>
-  <div class="coin-chip">
+  <button class="coin-chip" type="button" @click="$emit('click')">
     <AppIcon class="coin-icon" icon="coin" :size="16" />
     <span class="coin-amount">{{ amount }}</span>
     <span class="coin-label">монет</span>
-  </div>
+  </button>
 </template>
 
 <style scoped>
@@ -17,16 +18,23 @@ defineProps<{ amount: number }>()
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  background: var(--gradient-coin-chip);
+  background: var(--color-primary-a10);
   border: 1px solid var(--color-coin-chip-border);
   border-radius: 20px;
   padding: 5px 12px;
-  cursor: default;
-  transition: all 0.2s;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
   white-space: nowrap;
 }
 .coin-chip:hover {
-  background: var(--gradient-coin-chip-hover);
+  background: var(--color-primary-a18);
+  border-color: var(--color-primary-a50);
+}
+.coin-chip:focus-visible {
+  outline: 2px solid var(--color-primary-a45);
+  outline-offset: 2px;
 }
 .coin-icon { color: var(--color-coin-chip-text); }
 .coin-amount { font-weight: 800; font-size: 14px; color: var(--color-coin-chip-text); }