feat: UI polish, chapter select improvements, save system enhancements, roadmap update

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import GamePlayer from '@/components/GamePlayer.vue'
 import ChoicePanel from '@/components/ChoicePanel.vue'
 import QTEOverlay from '@/components/QTEOverlay.vue'
@@ -97,6 +97,37 @@ watch(() => store.currentScene?.id, async (newId) => {
   canSkip.value = await isSceneWatched(newId)
 })
 
+function onGlobalKeydown(e: KeyboardEvent) {
+  const key = e.key
+  if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowRight' ||
+      key === 'Enter' || key === ' ' || key === 'Tab' || key === 'w' || key === 'a' || key === 's' || key === 'd') {
+    store.setInputMode('keyboard')
+  }
+  if (key === 'Escape') {
+    if (showChapterSelect.value) {
+      showChapterSelect.value = false
+    } else if (showMenu.value) {
+      showMenu.value = false
+    }
+  }
+}
+
+function onGlobalMouseMove() {
+  store.setInputMode('mouse')
+}
+
+const keyboardKeys = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', 'Tab', ' ', 'w', 'a', 's', 'd']
+
+onMounted(() => {
+  document.addEventListener('keydown', onGlobalKeydown)
+  document.addEventListener('mousemove', onGlobalMouseMove)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onGlobalKeydown)
+  document.removeEventListener('mousemove', onGlobalMouseMove)
+})
+
 init()
 </script>