fix: 时间显示/3D线置顶强调/子标签页重构

1. fix(HeroSection): period 为 {zh,en} 对象却直接渲染导致显示 [object Object]，
   改为字符串 '2022'
2. feat(timeline): 3D滚球(最终形态)线移到最前并 featured 强调(渐变背景+★+实心3D徽章)，
   其后用分隔标记提示「早期并行演进：2D线」
3. refactor(MobileGame): 团队+排行榜/迭代记录/实验 改为平级子标签页(SubTabs)，
   默认显示团队+排行榜；新增 SubTabs.vue 通用子标签组件
   headless 验证：默认页(团队+排行榜) -> 迭代记录(时间线) -> 实验(视频) -> 切回 全通过，
   中英文子标签页文案正常

src/modules/mobile-game/components/SubTabs.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  tabs: { type: Array, required: true }, // [{ id, label: {zh,en} }]
+  modelValue: { type: String, required: true }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const { locale } = useI18n({ useScope: 'global' })
+const L = (obj) => (locale.value === 'zh-CN' ? obj.zh : obj.en)
+</script>
+
+<template>
+  <div class="subtabs">
+    <button
+      v-for="t in tabs"
+      :key="t.id"
+      type="button"
+      class="subtabs__btn"
+      :class="{ 'is-active': modelValue === t.id }"
+      @click="emit('update:modelValue', t.id)"
+    >
+      {{ L(t.label) }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.subtabs {
+  display: flex;
+  gap: var(--space-xs);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: var(--space-lg);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.subtabs::-webkit-scrollbar {
+  display: none;
+}
+.subtabs__btn {
+  position: relative;
+  padding: var(--space-sm) var(--space-md);
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  transition: color var(--transition);
+}
+.subtabs__btn:hover {
+  color: var(--text-primary);
+}
+.subtabs__btn.is-active {
+  color: var(--accent);
+}
+.subtabs__btn.is-active::after {
+  content: '';
+  position: absolute;
+  left: var(--space-md);
+  right: var(--space-md);
+  bottom: -1px;
+  height: 2px;
+  background: var(--accent);
+  border-radius: 2px;
+}
+</style>