feat: pause menu, accessibility improvements, main menu polish, roadmap update

src/components/PauseMenu.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n'
+
+const emit = defineEmits<{
+  resume: []
+  saveLoad: []
+  settings: []
+  quitToMenu: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="pause-overlay" @click.self="emit('resume')" @keydown.escape="emit('resume')">
+    <div class="pause-menu">
+      <h2 class="pause-title">{{ t('ui.paused') }}</h2>
+
+      <div class="pause-actions">
+        <button class="pause-btn primary" @click="emit('resume')">{{ t('ui.resume') }}</button>
+        <button class="pause-btn" @click="emit('saveLoad')">{{ t('ui.saveLoad') }}</button>
+        <button class="pause-btn" @click="emit('settings')">{{ t('ui.settings') }}</button>
+        <button class="pause-btn danger" @click="emit('quitToMenu')">{{ t('ui.quitToMenu') }}</button>
+      </div>
+
+      <div class="pause-hint">{{ t('ui.pauseHint') }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pause-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.pause-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.pause-title {
+  font-size: 32px;
+  font-weight: 400;
+  letter-spacing: 6px;
+  color: #ddd;
+}
+
+.pause-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 280px;
+}
+
+.pause-btn {
+  padding: 14px 32px;
+  font-size: 16px;
+  color: #ccc;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+  letter-spacing: 2px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pause-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+.pause-btn.primary {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.pause-btn.danger {
+  color: #e57373;
+  border-color: rgba(229, 115, 115, 0.2);
+  margin-top: 12px;
+}
+
+.pause-btn.danger:hover {
+  background: rgba(229, 115, 115, 0.1);
+}
+
+.pause-hint {
+  font-size: 12px;
+  color: #666;
+}
+</style>