refactor: unify panel UI to gold design system, add backdrop blur to all overlays

src/components/AchievementPanel.vue

@@ -41,7 +41,7 @@ const emit = defineEmits<{
         </div>
       </div>
 
-      <button class="ach-close" @click="emit('close')">{{ t('ui.close') }}</button>
+      <button class="ach-close" @click="emit('close')">{{ t('ui.back') }}</button>
     </div>
   </div>
 </template>
@@ -50,7 +50,9 @@ const emit = defineEmits<{
 .ach-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.88);
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,9 +60,9 @@ const emit = defineEmits<{
 }
 
 .ach-panel {
-  background: #1a1a2e;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 10px;
+  background: rgba(12, 12, 18, 0.85);
+  border: none;
+  border-radius: 12px;
   padding: 36px 40px;
   min-width: 420px;
   max-width: 520px;
@@ -73,7 +75,7 @@ const emit = defineEmits<{
   text-align: center;
   font-size: 22px;
   font-weight: 400;
-  color: #ddd;
+  color: #c9a84c;
   letter-spacing: 3px;
   margin-bottom: 24px;
 }
@@ -131,7 +133,7 @@ const emit = defineEmits<{
 
 .ach-title-text {
   font-size: 14px;
-  color: #eee;
+  color: #c9a84c;
 }
 
 .ach-desc-text {
@@ -156,4 +158,9 @@ const emit = defineEmits<{
   background: rgba(255, 255, 255, 0.1);
   color: #ccc;
 }
+
+.ach-close:focus-visible {
+  outline: 2px solid #c9a84c;
+  outline-offset: 2px;
+}
 </style>