chore: battle result UI, demo locales, and scene updates

src/components/BattleResult.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { BattleResultDef } from '@engine/types'
 import { useGameStore } from '@/stores/gameStore'
 import { useI18n } from '@/composables/useI18n'
 
 defineProps<{
-  result: BattleResultDef
+  result: { title: string; titleKey?: string; stats: { label: string; labelKey?: string; variable: string; max?: number }[] }
 }>()
 
 const emit = defineEmits<{
@@ -25,7 +24,12 @@ function statValue(variable: string): number {
       <h2 class="result-title">{{ t(result.titleKey || result.title) }}</h2>
 
       <div class="result-stats">
-        <div class="result-stat" v-for="s in result.stats" :key="s.variable">
+        <div
+          v-for="(s, index) in result.stats"
+          :key="s.variable"
+          class="result-stat"
+          :style="{ animationDelay: (200 + index * 80) + 'ms' }"
+        >
           <span class="rstat-label">{{ t(s.labelKey || s.label) }}</span>
           <span class="rstat-value">
             {{ statValue(s.variable) }}
@@ -48,6 +52,12 @@ function statValue(variable: string): number {
   align-items: center;
   justify-content: center;
   z-index: 200;
+  animation: overlayFadeIn 0.3s ease-out;
+}
+
+@keyframes overlayFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 .battle-result-panel {
@@ -60,6 +70,12 @@ function statValue(variable: string): number {
   display: flex;
   flex-direction: column;
   align-items: center;
+  animation: panelEnter 0.35s ease-out;
+}
+
+@keyframes panelEnter {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
 }
 
 .result-title {
@@ -68,6 +84,8 @@ function statValue(variable: string): number {
   color: #ffc107;
   letter-spacing: 4px;
   margin-bottom: 28px;
+  opacity: 0;
+  animation: statFadeIn 0.3s ease-out 100ms forwards;
 }
 
 .result-stats {
@@ -83,6 +101,13 @@ function statValue(variable: string): number {
   padding: 10px 16px;
   background: rgba(255, 255, 255, 0.04);
   border-radius: 4px;
+  opacity: 0;
+  animation: statFadeIn 0.3s ease-out forwards;
+}
+
+@keyframes statFadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .rstat-label {
@@ -106,6 +131,9 @@ function statValue(variable: string): number {
   cursor: pointer;
   letter-spacing: 2px;
   transition: background 0.15s;
+  opacity: 0;
+  animation: statFadeIn 0.3s ease-out forwards;
+  animation-delay: 600ms;
 }
 
 .result-continue:hover {