refactor: move quality/skip/speed controls to bottom bar, sync visibility with top bar

src/App.vue

@@ -17,6 +17,9 @@ import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
 import { useFullscreen } from '@/composables/useFullscreen'
 import { useI18n, initStoryLocales } from '@/composables/useI18n'
+import { getVideoMode } from '@engine/core/VideoManager'
+
+const isLocalMode = getVideoMode() === 'local'
 
 const store = useGameStore()
 const { t, currentLang } = useI18n()
@@ -333,16 +336,19 @@ init()
           <div v-if="showPromptToast" class="prompt-toast">{{ promptToast }}</div>
         </Transition>
         <div v-if="started && !store.gameEnded" class="top-bar" :class="{ hidden: !showTopBar }">
-          <PlaybackBar
-            :can-skip="canSkip"
-            :current-speed="currentSpeed"
-            @skip="handleSkip"
-            @speed-change="handleSpeedChange"
-          />
           <button class="top-btn" @click="toggleFullscreen" :title="t('ui.fullscreen')">⛶</button>
           <button class="top-btn" @click="showPauseMenu = true" :title="t('ui.menu')">≡</button>
         </div>
       </div>
+      <PlaybackBar
+        v-if="started && !store.gameEnded"
+        :can-skip="canSkip"
+        :current-speed="currentSpeed"
+        :visible="showTopBar"
+        :show-quality="!isLocalMode"
+        @skip="handleSkip"
+        @speed-change="handleSpeedChange"
+      />
       <MainMenu
         v-if="!started || store.gameEnded"
         :show-resume="!store.gameEnded && hasAutoSave"