From e9d202f5da661200df45889f9771be6967844ed4 Mon Sep 17 00:00:00 2001
From: cpu <cpu@virtonline.eu>
Date: Thu, 8 May 2025 01:25:54 +0200
Subject: [PATCH] without footer

---
 assets/default-avatar.svg            |   4 -
 public/service-worker.js             |   2 +-
 src/App.vue                          | 103 ++++---
 src/components/DefaultAvatarIcon.vue |   9 +
 src/components/PlayerDisplay.vue     |  92 +++++--
 src/components/PlayerForm.vue        | 384 +++++++++++++++------------
 src/components/PlayerListItem.vue    |  14 +-
 src/store/index.js                   | 146 +++++-----
 src/views/GameView.vue               |  52 ++--
 src/views/SetupView.vue              | 172 +++++++++---
 10 files changed, 606 insertions(+), 372 deletions(-)
 delete mode 100644 assets/default-avatar.svg
 create mode 100644 src/components/DefaultAvatarIcon.vue

diff --git a/assets/default-avatar.svg b/assets/default-avatar.svg
deleted file mode 100644
index e5c534b..0000000
--- a/assets/default-avatar.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="7" r="4" stroke="#000000" stroke-width="2"/>
-<path d="M4 21C4 17.134 7.58172 14 12 14C16.4183 14 20 17.134 20 21" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
-</svg>
diff --git a/public/service-worker.js b/public/service-worker.js
index 5b36e80..18a7ab9 100644
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'nexus-timer-cache-v1';
+const CACHE_NAME = 'nexus-timer-cache-v2';
 const urlsToCache = [
   '/',
   '/index.html',
diff --git a/src/App.vue b/src/App.vue
index 3661d3a..b99dd01 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,39 @@
-// src/App.vue
 <template>
   <div :class="[theme, 'min-h-screen flex flex-col no-select']">
-    <router-view />
+    <router-view class="flex-grow" />
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, watch } from 'vue'; // Added onUnmounted
+import { computed, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router'; // Import useRouter
 import { AudioService } from './services/AudioService';
 
 const store = useStore();
+const router = useRouter(); // Get router instance
+
 const theme = computed(() => store.getters.theme);
 
 onMounted(() => {
-  // store.dispatch('loadState'); // <-- REMOVE THIS LINE
-  applyTheme();
+  store.dispatch('loadState').then(() => {
+    // console.log("App.vue: Store has finished loading state.");
+    applyTheme();
+  }).catch(error => {
+    console.error("App.vue: Error during store.dispatch('loadState'):", error);
+  });
+  
   document.addEventListener('keydown', handleGlobalKeyDown);
 
   const resumeAudio = () => {
     AudioService.resumeContext();
-    // document.body.removeEventListener('click', resumeAudio); // These are fine with {once: true}
-    // document.body.removeEventListener('touchstart', resumeAudio);
+    document.body.removeEventListener('click', resumeAudio);
+    document.body.removeEventListener('touchstart', resumeAudio);
   };
   document.body.addEventListener('click', resumeAudio, { once: true });
   document.body.addEventListener('touchstart', resumeAudio, { once: true });
 });
 
-// Add onUnmounted to clean up the global event listener
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleGlobalKeyDown);
-});
-
-
 watch(theme, () => {
   applyTheme();
 });
@@ -41,7 +42,6 @@ watch(() => store.state.isMuted, (newMutedState) => {
   AudioService.setMuted(newMutedState);
 });
 
-
 const applyTheme = () => {
   if (store.getters.theme === 'dark') {
     document.documentElement.classList.add('dark');
@@ -51,48 +51,67 @@ const applyTheme = () => {
 };
 
 const handleGlobalKeyDown = (event) => {
-  if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.isContentEditable) {
+  // Prevent hotkeys from firing if an input, textarea, or contenteditable element is focused.
+  const targetElement = event.target;
+  if (targetElement.tagName === 'INPUT' || 
+      targetElement.tagName === 'TEXTAREA' || 
+      targetElement.isContentEditable) {
     return;
   }
 
   const keyPressed = event.key.toLowerCase();
-  
+  const currentRouteName = router.currentRoute.value.name; // Use router instance
+
+  // Global Stop/Pause All Hotkey
   if (keyPressed === store.getters.globalHotkeyStopPause && store.getters.globalHotkeyStopPause) {
     event.preventDefault();
-    store.dispatch('globalStopPauseAll');
-    return;
-  }
-
-  const currentPlayerFromStore = store.getters.currentPlayer; // Renamed to avoid conflict
-  const gameMode = store.getters.gameMode;
-
-  if (gameMode === 'normal' && currentPlayerFromStore && keyPressed === currentPlayerFromStore.hotkey) {
-    event.preventDefault();
-    const wasRunning = currentPlayerFromStore.isTimerRunning;
-    store.dispatch('passTurn').then(() => {
-        const newCurrentPlayer = store.getters.currentPlayer; // Get updated player
-        if (wasRunning && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
-            AudioService.playPassTurnAlert();
-        }
-    });
-    return;
-  }
-  
-  if (gameMode === 'allTimers') {
-    const playerToToggle = store.state.players.find(p => p.hotkey === keyPressed && !p.isSkipped);
-    if (playerToToggle) {
-      event.preventDefault();
-      const playerIndex = store.state.players.indexOf(playerToToggle);
-      store.dispatch('togglePlayerTimerAllTimersMode', playerIndex);
+    if (currentRouteName === 'Game') { // Only active on GameView
+        store.dispatch('globalStopPauseAll');
     }
+    return; // Important to return after handling
+  }
+
+  // New Global "Run All Timers" Hotkey
+  if (keyPressed === store.getters.globalHotkeyRunAll && store.getters.globalHotkeyRunAll) {
+    event.preventDefault();
+    if (currentRouteName === 'Game' && store.getters.gameMode === 'normal') { // Only on GameView & in normal mode
+        store.dispatch('switchToAllTimersMode');
+    }
+    return; // Important to return after handling
+  }
+
+  // Player specific "Pass Turn / My Pause" hotkeys
+  if (currentRouteName === 'Game') { // Only active on GameView
+      const currentPlayerInStore = store.getters.currentPlayer;
+      const gameModeInStore = store.getters.gameMode;
+
+      if (gameModeInStore === 'normal' && currentPlayerInStore && keyPressed === currentPlayerInStore.hotkey) {
+        event.preventDefault();
+        const wasRunning = currentPlayerInStore.isTimerRunning;
+        store.dispatch('passTurn').then(() => {
+            const newCurrentPlayer = store.getters.currentPlayer;
+            if (wasRunning && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
+                AudioService.playPassTurnAlert();
+            }
+        });
+        // No return here, as this is the last check in this block
+      } else if (gameModeInStore === 'allTimers') {
+        const playerToToggle = store.state.players.find(p => p.hotkey === keyPressed && !p.isSkipped);
+        if (playerToToggle) {
+          event.preventDefault();
+          const playerIndex = store.state.players.indexOf(playerToToggle);
+          store.dispatch('togglePlayerTimerAllTimersMode', playerIndex);
+        }
+      }
   }
 };
-
 </script>
 
 <style>
 html, body, #app {
   height: 100%;
+  margin: 0;
+  padding: 0;
   overscroll-behavior: none;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/DefaultAvatarIcon.vue b/src/components/DefaultAvatarIcon.vue
new file mode 100644
index 0000000..a67623e
--- /dev/null
+++ b/src/components/DefaultAvatarIcon.vue
@@ -0,0 +1,9 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
+    </svg>
+  </template>
+  
+  <script setup>
+  // No script needed for a simple SVG icon component
+  </script>
\ No newline at end of file
diff --git a/src/components/PlayerDisplay.vue b/src/components/PlayerDisplay.vue
index 7b813bb..ea49b63 100644
--- a/src/components/PlayerDisplay.vue
+++ b/src/components/PlayerDisplay.vue
@@ -1,6 +1,6 @@
 <template>
   <div 
-    :class="['player-area p-4 flex flex-col items-center justify-center text-center relative h-1/2 no-select', 
+    :class="['player-area p-2 md:p-4 flex flex-col items-center justify-center text-center relative no-select', 
              areaClass, 
              { 'opacity-50': player.isSkipped, 
                'bg-green-100 dark:bg-green-800 animate-pulsePositive': player.isTimerRunning && player.currentTimerSec >=0 && !isNextPlayerArea,
@@ -9,31 +9,48 @@
     @click="handleTap"
     v-touch:swipe.up="handleSwipeUp"
   >
-    <img 
-      :src="player.avatar || defaultAvatar" 
-      alt="Player Avatar" 
-      class="rounded-full object-cover mb-4 border-4 shadow-lg"
-      style="width: 60vmin; height: 60vmin; max-width: 280px; max-height: 280px;" 
-      :class="player.isSkipped ? 'border-gray-500 filter grayscale' : 'border-blue-500 dark:border-blue-400'"
-    />
-    <h2 class="text-3xl md:text-4xl lg:text-5xl font-semibold mb-2 mt-2">{{ player.name }}</h2>
+    <!-- Avatar -->
+    <div 
+        class="mb-4 md:mb-4 relative"
+        :style="{ 
+            width: avatarSize.width, 
+            height: avatarSize.height,
+        }"
+    >
+        <img 
+          v-if="player.avatar"
+          :src="player.avatar" 
+          alt="Player Avatar" 
+          class="rounded-full object-cover border-2 md:border-4 shadow-lg w-full h-full"
+          :class="player.isSkipped ? 'border-gray-500 filter grayscale' : 'border-blue-500 dark:border-blue-400'"
+        />
+        <DefaultAvatarIcon 
+          v-else 
+          class="rounded-full object-cover border-2 md:border-4 shadow-lg text-gray-400 dark:text-gray-500 bg-gray-200 dark:bg-gray-700 p-1 md:p-2 w-full h-full"
+          :class="player.isSkipped ? 'border-gray-500 filter grayscale !text-gray-300 dark:!text-gray-600' : 'border-blue-500 dark:border-blue-400'"
+        />
+    </div>
+
+    <!-- Player Name -->
+    <h2 class="font-semibold mb-6 md:mb-6 text-5xl sm:text-2xl md:text-3xl lg:text-5xl">
+        {{ player.name }}
+    </h2>
     <TimerDisplay 
       :seconds="player.currentTimerSec" 
       :is-negative="player.currentTimerSec < 0"
       :is-pulsating="player.isTimerRunning"
-      class="text-6xl md:text-8xl lg:text-9xl xl:text-[10rem]"
+      class="text-4xl sm:text-5xl md:text-6xl lg:text-6xl xl:text-5xl"
     />
-    <p v-if="player.isSkipped" class="text-red-500 dark:text-red-400 mt-2 font-semibold text-lg">SKIPPED</p>
-    <p v-if="isNextPlayerArea && !player.isSkipped" class="mt-3 text-base text-gray-600 dark:text-gray-400">(Swipe up to pass turn)</p>
+    <p v-if="player.isSkipped" class="text-red-500 dark:text-red-400 mt-1 md:mt-2 font-semibold text-sm md:text-base lg:text-lg">SKIPPED</p>
+    <p v-if="isNextPlayerArea && !player.isSkipped" class="mt-1 md:mt-2 text-xs md:text-sm text-gray-600 dark:text-gray-400">(Swipe up to pass turn)</p>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import TimerDisplay from './TimerDisplay.vue';
-import defaultAvatar from '../assets/default-avatar.png';
+import DefaultAvatarIcon from './DefaultAvatarIcon.vue'; 
 
-// Basic touch directive
 const vTouch = {
   mounted: (el, binding) => {
     if (binding.arg === 'swipe' && binding.modifiers.up) {
@@ -41,7 +58,7 @@ const vTouch = {
       let touchstartY = 0;
       let touchendX = 0;
       let touchendY = 0;
-      const swipeThreshold = 50; // Min pixels for swipe
+      const swipeThreshold = 50; 
 
       el.addEventListener('touchstart', function(event) {
           touchstartX = event.changedTouches[0].screenX;
@@ -68,6 +85,7 @@ const vTouch = {
   }
 };
 
+
 const props = defineProps({
   player: {
     type: Object,
@@ -80,6 +98,40 @@ const props = defineProps({
 
 const emit = defineEmits(['tapped', 'swiped-up']);
 
+const avatarSize = ref({ width: '120px', height: '120px' }); 
+
+const calculateAvatarSize = () => {
+    const screenWidth = window.innerWidth;
+    const screenHeight = window.innerHeight;
+    const isNormalModeContext = document.querySelector('.player-area')?.parentElement?.classList.contains('flex-col');
+
+    if (isNormalModeContext) { 
+        const availableHeight = screenHeight / 2; 
+        let size = Math.min(availableHeight * 0.5, screenWidth * 0.4, 175); 
+
+        if (screenWidth < 960) {
+            size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 250); 
+        } else if (screenWidth < 1024) {
+             size = Math.min(availableHeight * 0.55, screenWidth * 0.45, 180);
+        }
+        size = Math.max(size, 100); 
+
+        avatarSize.value = { width: `${size}px`, height: `${size}px` };
+    } else {
+        avatarSize.value = { width: '120px', height: '120px' };
+    }
+};
+
+
+onMounted(() => {
+    calculateAvatarSize();
+    window.addEventListener('resize', calculateAvatarSize);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', calculateAvatarSize);
+});
+
 const handleTap = () => {
   if (props.isCurrentPlayerArea && !props.player.isSkipped) {
     emit('tapped');
@@ -91,10 +143,4 @@ const handleSwipeUp = () => {
     emit('swiped-up');
   }
 };
-</script>
-
-<style scoped>
-.player-area {
-  transition: background-color 0.3s ease, opacity 0.3s ease;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/PlayerForm.vue b/src/components/PlayerForm.vue
index 6dd656e..bdd5453 100644
--- a/src/components/PlayerForm.vue
+++ b/src/components/PlayerForm.vue
@@ -1,177 +1,231 @@
 <template>
-    <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex justify-center items-center p-4" @click.self="closeModal">
-      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md">
-        <h2 class="text-2xl font-semibold mb-4">{{ isEditing ? 'Edit Player' : 'Add New Player' }}</h2>
-        <form @submit.prevent="submitForm">
-          <div class="mb-4">
-            <label for="playerName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
-            <input type="text" id="playerName" v-model="editablePlayer.name" required class="input-base">
+  <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex justify-center items-center p-4" @click.self="closeModal">
+    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md">
+      <h2 class="text-2xl font-semibold mb-4">{{ isEditing ? 'Edit Player' : 'Add New Player' }}</h2>
+      <form @submit.prevent="submitForm">
+        <!-- Name -->
+        <div class="mb-4">
+          <label for="playerName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
+          <input type="text" id="playerName" v-model="editablePlayer.name" required class="input-base mt-1">
+        </div>
+
+        <!-- Remaining Time -->
+        <div class="mb-4">
+          <label for="remainingTime" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Remaining Time (MM:SS or -MM:SS)</label>
+          <input type="text" id="remainingTime" v-model="currentTimeFormatted" @blur="validateCurrentTimeFormat" placeholder="e.g., 55:30 or -02:15" required class="input-base mt-1">
+           <p v-if="currentTimeFormatError" class="text-red-500 text-xs mt-1">{{ currentTimeFormatError }}</p>
+        </div>
+        
+        <!-- Avatar -->
+        <div class="mb-4">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Avatar</label>
+          <div class="mt-1 flex items-center">
+            <img 
+              v-if="editablePlayer.avatar"
+              :src="editablePlayer.avatar" 
+              alt="Avatar" 
+              class="w-16 h-16 rounded-full object-cover mr-4 border"
+            />
+            <DefaultAvatarIcon 
+              v-else
+              class="w-16 h-16 rounded-full object-cover mr-4 border text-gray-400 bg-gray-200 p-1"
+            />
+            <button type="button" @click="capturePhoto" class="btn btn-secondary text-sm mr-2">Take Photo</button>
+            <button type="button" @click="useDefaultAvatar" class="btn btn-secondary text-sm">Default</button>
           </div>
-  
-          <div class="mb-4">
-            <label for="initialTime" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Initial Timer (MM:SS)</label>
-            <input type="text" id="initialTime" v-model="initialTimeFormatted" @blur="validateTimeFormat" placeholder="e.g., 60:00" required class="input-base">
-             <p v-if="timeFormatError" class="text-red-500 text-xs mt-1">{{ timeFormatError }}</p>
-          </div>
-          
-          <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Avatar</label>
-            <div class="mt-1 flex items-center">
-              <img :src="editablePlayer.avatar || defaultAvatar" alt="Avatar" class="w-16 h-16 rounded-full object-cover mr-4 border">
-              <button type="button" @click="capturePhoto" class="btn btn-secondary text-sm mr-2">Take Photo</button>
-              <button type="button" @click="useDefaultAvatar" class="btn btn-secondary text-sm">Default</button>
-            </div>
-             <p v-if="cameraError" class="text-red-500 text-xs mt-1">{{ cameraError }}</p>
-          </div>
-  
-          <div class="mb-4">
-            <label for="playerHotkey" class="block text-sm font-medium text-gray-700 dark:text-gray-300">"Pass Turn / My Pause" Hotkey</label>
-            <input 
-              type="text" 
-              id="playerHotkey" 
-              v-model="editablePlayer.hotkey" 
-              @keydown.prevent="captureHotkey($event, 'player')" 
-              placeholder="Press a key" 
-              class="input-base"
-              readonly
-            >
-            <button type="button" @click="clearHotkey('player')" class="text-xs text-blue-500 hover:underline mt-1">Clear Hotkey</button>
-          </div>
-  
-          <div class="flex justify-end space-x-3">
-            <button type="button" @click="closeModal" class="btn btn-secondary">Cancel</button>
-            <button type="submit" class="btn btn-primary" :disabled="!!timeFormatError">{{ isEditing ? 'Save Changes' : 'Add Player' }}</button>
-          </div>
-        </form>
-      </div>
+           <p v-if="cameraError" class="text-red-500 text-xs mt-1">{{ cameraError }}</p>
+        </div>
+
+        <!-- "Pass Turn / My Pause" Hotkey -->
+        <div class="flex items-center justify-between mb-6"> <!-- Added flex container and margin -->
+           <label for="playerHotkey" class="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap mr-3"> 
+             "Pass Turn / My Pause" Hotkey:
+           </label>
+           <div class="flex items-center"> <!-- Group input and clear button -->
+              <input 
+                type="text" 
+                id="playerHotkey" 
+                :value="editablePlayer.hotkey ? editablePlayer.hotkey.toUpperCase() : ''"
+                @keydown.prevent="captureHotkey($event, 'player')" 
+                placeholder="-" 
+                class="input-base w-12 h-8 text-center font-mono text-lg p-0" 
+                readonly 
+                maxlength="1"
+              >
+              <button 
+                type="button" 
+                @click="clearHotkey('player')" 
+                class="text-xs text-blue-500 hover:underline ml-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-600" 
+               >
+                 Clear
+              </button>
+           </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex justify-end space-x-3 mt-6">
+          <button type="button" @click="closeModal" class="btn btn-secondary">Cancel</button>
+          <button type="submit" class="btn btn-primary" :disabled="!!currentTimeFormatError">{{ isEditing ? 'Save Changes' : 'Add Player' }}</button>
+        </div>
+      </form>
     </div>
-  </template>
-  
-  <script setup>
-  // **** FIX: Add 'computed' to the import statement ****
-  import { ref, reactive, watch, onMounted, computed } from 'vue'; 
-  import { useStore } from 'vuex';
-  import { CameraService } from '../services/CameraService';
-  import { formatTime, parseTime } from '../utils/timeFormatter';
-  import defaultAvatarPath from '../assets/default-avatar.png';
-  import { AudioService } from '../services/AudioService'; // Added import for AudioService
-  
-  const props = defineProps({
-    player: Object, // Player object for editing, null for adding
-  });
-  const emit = defineEmits(['close', 'save']);
-  
-  const store = useStore();
-  const defaultAvatar = defaultAvatarPath;
-  
-  const isEditing = computed(() => !!props.player); // This line was causing the error
-  const editablePlayer = reactive({
-    id: null,
-    name: '',
-    avatar: defaultAvatar,
-    initialTimerSec: 3600, // 60:00
-    hotkey: '',
-  });
-  
-  const initialTimeFormatted = ref('60:00');
-  const timeFormatError = ref('');
-  const cameraError = ref('');
-  
-  onMounted(() => {
-    if (isEditing.value && props.player) {
-      editablePlayer.id = props.player.id;
-      editablePlayer.name = props.player.name;
-      editablePlayer.avatar = props.player.avatar || defaultAvatar;
-      editablePlayer.initialTimerSec = props.player.initialTimerSec;
-      editablePlayer.hotkey = props.player.hotkey || '';
-      initialTimeFormatted.value = formatTime(props.player.initialTimerSec);
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch, onMounted, computed } from 'vue'; 
+import { useStore } from 'vuex';
+import { CameraService } from '../services/CameraService';
+import { formatTime, parseTime } from '../utils/timeFormatter';
+import DefaultAvatarIcon from './DefaultAvatarIcon.vue';
+import { AudioService } from '../services/AudioService';
+
+const props = defineProps({
+  player: Object, 
+});
+const emit = defineEmits(['close', 'save']);
+
+const store = useStore();
+const DEFAULT_AVATAR_MARKER = null;
+
+const isEditing = computed(() => !!props.player);
+const editablePlayer = reactive({
+  id: null,
+  name: '',
+  avatar: DEFAULT_AVATAR_MARKER,
+  initialTimerSec: 3600,
+  currentTimerSec: 3600,
+  hotkey: '',
+});
+
+const currentTimeFormatted = ref('60:00');
+const currentTimeFormatError = ref('');
+const cameraError = ref('');
+
+const maxNegativeSeconds = computed(() => store.getters.maxNegativeTimeReached);
+
+
+onMounted(() => {
+  if (isEditing.value && props.player) {
+    editablePlayer.id = props.player.id;
+    editablePlayer.name = props.player.name;
+    editablePlayer.avatar = props.player.avatar;
+    editablePlayer.initialTimerSec = props.player.initialTimerSec;
+    editablePlayer.currentTimerSec = props.player.currentTimerSec;
+    editablePlayer.hotkey = props.player.hotkey || '';
+    currentTimeFormatted.value = formatTime(props.player.currentTimerSec);
+  } else {
+    editablePlayer.avatar = DEFAULT_AVATAR_MARKER;
+    editablePlayer.initialTimerSec = 3600;
+    editablePlayer.currentTimerSec = 3600;
+    currentTimeFormatted.value = formatTime(editablePlayer.currentTimerSec);
+  }
+});
+
+watch(currentTimeFormatted, (newTime) => {
+  validateCurrentTimeFormat();
+  if (!currentTimeFormatError.value) {
+      editablePlayer.currentTimerSec = parseTime(newTime);
+      if (!isEditing.value) {
+        editablePlayer.initialTimerSec = editablePlayer.currentTimerSec;
+      }
+  }
+});
+
+function validateCurrentTimeFormat() {
+    const time = currentTimeFormatted.value;
+    const isNegativeInput = time.startsWith('-');
+    if (!/^-?(?:[0-9]+:[0-5]\d)$/.test(time)) { 
+        currentTimeFormatError.value = 'Invalid format. Use MM:SS or -MM:SS (e.g., 05:30, -02:15).';
     } else {
-      initialTimeFormatted.value = formatTime(editablePlayer.initialTimerSec);
-    }
-  });
-  
-  watch(initialTimeFormatted, (newTime) => {
-    validateTimeFormat();
-    if (!timeFormatError.value) {
-        editablePlayer.initialTimerSec = parseTime(newTime);
-    }
-  });
-  
-  function validateTimeFormat() {
-      const time = initialTimeFormatted.value;
-      if (!/^(?:[0-5]?\d:[0-5]\d)$/.test(time) && !/^(?:[0-9]+:[0-5]\d)$/.test(time)) { // Allow more than 59 minutes for setup
-          timeFormatError.value = 'Invalid time format. Use MM:SS (e.g., 05:30 or 70:00).';
-      } else {
-          const parsed = parseTime(time);
-          if (parsed < 1) { // Minimum 1 second
-               timeFormatError.value = 'Timer must be at least 00:01.';
-          } else {
-              timeFormatError.value = '';
-          }
-      }
-  }
-  
-  
-  async function capturePhoto() {
-    cameraError.value = '';
-    try {
-      AudioService.resumeContext(); // Ensure audio context is active for camera sounds if any
-      const photoDataUrl = await CameraService.getPhoto();
-      editablePlayer.avatar = photoDataUrl;
-    } catch (error) {
-      console.error('Failed to capture photo:', error);
-      cameraError.value = error.message || 'Could not capture photo.';
-    }
-  }
-  
-  function useDefaultAvatar() {
-    editablePlayer.avatar = defaultAvatar;
-  }
-  
-  function captureHotkey(event, type) {
-    event.preventDefault();
-    const key = event.key.toLowerCase();
-    // Avoid modifier keys alone, allow combinations if needed, but spec says single keypresses
-    if (key && !['control', 'alt', 'shift', 'meta'].includes(key)) {
-      if (type === 'player') {
-        // Check if hotkey is already used by another player or global hotkey
-        const existingPlayerHotkey = store.state.players.some(p => p.hotkey === key && p.id !== editablePlayer.id);
-        const globalHotkeyInUse = store.state.globalHotkeyStopPause === key;
-        if (existingPlayerHotkey) {
-          alert(`Hotkey "${key.toUpperCase()}" is already assigned to another player.`);
-          return;
+        const parsedSeconds = parseTime(time);
+        if (isNegativeInput && parsedSeconds > 0) {
+            currentTimeFormatError.value = 'Negative time should parse to negative seconds.';
+        } else if (parsedSeconds < maxNegativeSeconds.value) {
+            currentTimeFormatError.value = `Time cannot be less than ${formatTime(maxNegativeSeconds.value)}.`;
         }
-        if (globalHotkeyInUse) {
-          alert(`Hotkey "${key.toUpperCase()}" is already assigned as the Global Stop/Pause hotkey.`);
-          return;
+        else {
+            currentTimeFormatError.value = '';
         }
-        editablePlayer.hotkey = key;
-      }
     }
+}
+
+
+async function capturePhoto() {
+  cameraError.value = '';
+  try {
+    AudioService.resumeContext(); 
+    const photoDataUrl = await CameraService.getPhoto();
+    editablePlayer.avatar = photoDataUrl;
+  } catch (error) {
+    console.error('Failed to capture photo:', error);
+    cameraError.value = error.message || 'Could not capture photo.';
   }
-  
-  function clearHotkey(type) {
-      if (type === 'player') {
-          editablePlayer.hotkey = '';
-      }
+}
+
+function useDefaultAvatar() {
+  editablePlayer.avatar = DEFAULT_AVATAR_MARKER;
+}
+
+function captureHotkey(event, type) {
+  event.preventDefault();
+  let key = event.key;
+  if (event.code === 'Space') {
+      key = ' ';
+  } else if (key.length > 1 && key !== ' ') {
+      return; 
   }
-  
-  function submitForm() {
-    validateTimeFormat();
-    if (timeFormatError.value) return;
-  
-    const playerPayload = { ...editablePlayer };
-    // Ensure currentTimerSec is also updated if initialTimerSec changes and it's a new player or reset is implied
-    if (!isEditing.value || (props.player && playerPayload.initialTimerSec !== props.player.initialTimerSec)) {
-      playerPayload.currentTimerSec = playerPayload.initialTimerSec;
+  key = key.toLowerCase();
+
+  if (type === 'player') {
+    const existingPlayerHotkey = store.state.players.some(p => p.hotkey === key && p.id !== editablePlayer.id);
+    const globalHotkeyInUseStopPause = store.state.globalHotkeyStopPause === key;
+    const globalHotkeyInUseRunAll = store.state.globalHotkeyRunAll === key;
+    
+    if (existingPlayerHotkey) {
+      alert(`Hotkey "${key.toUpperCase()}" is already assigned to another player.`);
+      return;
     }
-  
-  
-    emit('save', playerPayload);
-    closeModal();
+    if (globalHotkeyInUseStopPause) {
+      alert(`Hotkey "${key.toUpperCase()}" is already assigned as the Global Stop/Pause hotkey.`);
+      return;
+    }
+    if (globalHotkeyInUseRunAll) {
+      alert(`Hotkey "${key.toUpperCase()}" is already assigned as the Global Run All Timers hotkey.`);
+      return;
+    }
+    editablePlayer.hotkey = key;
   }
-  
-  function closeModal() {
-    emit('close');
+}
+
+
+function clearHotkey(type) {
+    if (type === 'player') {
+        editablePlayer.hotkey = '';
+    }
+}
+
+function submitForm() {
+  validateCurrentTimeFormat();
+  if (currentTimeFormatError.value) return;
+
+  const playerPayload = { ...editablePlayer };
+
+  if (playerPayload.currentTimerSec <= maxNegativeSeconds.value) {
+    playerPayload.isSkipped = true;
+  } else if (playerPayload.isSkipped && playerPayload.currentTimerSec > maxNegativeSeconds.value) {
+    playerPayload.isSkipped = false;
   }
-  </script>
\ No newline at end of file
+
+  if (!isEditing.value) {
+    playerPayload.initialTimerSec = playerPayload.currentTimerSec;
+  }
+
+  emit('save', playerPayload);
+  closeModal();
+}
+
+function closeModal() {
+  emit('close');
+}
+</script>
\ No newline at end of file
diff --git a/src/components/PlayerListItem.vue b/src/components/PlayerListItem.vue
index 14bdaa2..de4b31b 100644
--- a/src/components/PlayerListItem.vue
+++ b/src/components/PlayerListItem.vue
@@ -9,11 +9,17 @@
   >
     <div class="flex items-center">
       <img 
-        :src="player.avatar || defaultAvatar" 
+        v-if="player.avatar"
+        :src="player.avatar" 
         alt="Player Avatar" 
-        class="w-12 h-12 rounded-full object-cover mr-3 border-2"
+        class="w-12 h-12 rounded-full object-cover mr-3 border-2 flex-shrink-0"
         :class="player.isSkipped ? 'border-gray-500 filter grayscale' : 'border-blue-400 dark:border-blue-300'"
       />
+      <DefaultAvatarIcon
+        v-else
+        class="w-12 h-12 rounded-full object-cover mr-3 border-2 text-gray-400 dark:text-gray-500 bg-gray-200 dark:bg-gray-700 p-1 flex-shrink-0" 
+        :class="player.isSkipped ? 'border-gray-500 filter grayscale !text-gray-300 dark:!text-gray-600' : 'border-blue-400 dark:border-blue-300'"
+      />
       <div>
         <h3 class="text-lg font-medium">{{ player.name }}</h3>
         <p v-if="player.isSkipped" class="text-xs text-red-500 dark:text-red-400">SKIPPED</p>
@@ -26,16 +32,14 @@
         :is-pulsating="player.isTimerRunning"
         class="text-2xl"
       />
-      <!-- Removed the "Running"/"Paused" text span -->
     </div>
   </div>
 </template>
 
 <script setup>
-// ... (script remains the same)
 import { computed } from 'vue';
 import TimerDisplay from './TimerDisplay.vue';
-import defaultAvatar from '../assets/default-avatar.png';
+import DefaultAvatarIcon from './DefaultAvatarIcon.vue';
 
 const props = defineProps({
   player: {
diff --git a/src/store/index.js b/src/store/index.js
index 078a69b..603f019 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,16 +1,16 @@
 import { createStore } from 'vuex';
 import { StorageService } from '../services/StorageService';
 import { parseTime, formatTime } from '../utils/timeFormatter';
-import defaultAvatar from '../assets/default-avatar.png';
 
 const MAX_NEGATIVE_SECONDS = -(59 * 60 + 59); // -59:59
+const DEFAULT_AVATAR_MARKER = null; // Ensure this is defined
 
 // Define predefined players
 const predefinedPlayers = [
   {
     id: 'predefined-1', // Unique ID for predefined player 1
     name: 'Player 1',
-    avatar: defaultAvatar, // Or a specific avatar path if you have one
+    avatar: DEFAULT_AVATAR_MARKER, // Or a specific avatar path if you have one
     initialTimerSec: 60 * 60, // 60:00
     currentTimerSec: 60 * 60,
     hotkey: '1', // Hotkey '1'
@@ -20,7 +20,7 @@ const predefinedPlayers = [
   {
     id: 'predefined-2', // Unique ID for predefined player 2
     name: 'Player 2',
-    avatar: defaultAvatar, // Or a specific avatar path
+    avatar: DEFAULT_AVATAR_MARKER, // Or a specific avatar path
     initialTimerSec: 60 * 60, // 60:00
     currentTimerSec: 60 * 60,
     hotkey: '2', // Hotkey '2'
@@ -32,6 +32,7 @@ const predefinedPlayers = [
 const initialState = {
   players: JSON.parse(JSON.stringify(predefinedPlayers)), // Start with predefined players (deep copy)
   globalHotkeyStopPause: null,
+  globalHotkeyRunAll: null,
   currentPlayerIndex: 0,
   gameMode: 'normal',
   isMuted: false,
@@ -40,45 +41,36 @@ const initialState = {
 };
 
 export default createStore({
-  state: () => {
+  state: () => { // This function already loads from storage ONCE during store creation
     const persistedState = StorageService.getState();
     if (persistedState) {
-      let playersToUse = persistedState.players || JSON.parse(JSON.stringify(predefinedPlayers)); // Use persisted or default
+      let playersToUse = persistedState.players;
+
+      if (!playersToUse || (playersToUse.length === 0 && !persistedState.hasOwnProperty('players'))) {
+        playersToUse = JSON.parse(JSON.stringify(predefinedPlayers));
+      } else if (persistedState.hasOwnProperty('players') && playersToUse.length === 0) {
+        playersToUse = [];
+      }
 
-      // Ensure avatar defaults and correct timer parsing if missing or in old format
       playersToUse = playersToUse.map(p => ({
         ...p,
-        id: p.id || Date.now().toString() + Math.random(), // Ensure ID if missing
-        avatar: p.avatar || defaultAvatar,
+        id: p.id || Date.now().toString() + Math.random(),
+        avatar: p.avatar === undefined ? DEFAULT_AVATAR_MARKER : p.avatar,
         initialTimerSec: typeof p.initialTimerSec === 'number' ? p.initialTimerSec : parseTime(p.initialTimer || "60:00"),
         currentTimerSec: typeof p.currentTimerSec === 'number' ? p.currentTimerSec : (typeof p.initialTimerSec === 'number' ? p.initialTimerSec : parseTime(p.currentTimer || p.initialTimer || "60:00")),
         isSkipped: p.isSkipped || false,
-        isTimerRunning: false, // Reset running state on load
-        hotkey: p.hotkey || null, // Ensure hotkey exists
+        isTimerRunning: false,
+        hotkey: p.hotkey || null,
       }));
       
-      // If persisted state had no players, but we want predefined, use them.
-      // This logic could be refined: if the user explicitly deleted all players,
-      // we might not want to re-add predefined ones.
-      // For now, if persisted players array is empty, we'll use predefined ones.
-      if (persistedState.players && persistedState.players.length === 0) {
-        // User might have deleted all players, respect that if a 'players' key exists and is empty.
-        // If they want a clean slate without predefined, they delete them from UI.
-        // If 'players' key itself is missing from persistedState, then use predefined.
-      } else if (!persistedState.players) {
-        playersToUse = JSON.parse(JSON.stringify(predefinedPlayers));
-      }
-
-
       return {
-        ...initialState, // Base defaults
-        ...persistedState, // Persisted values override defaults
-        players: playersToUse, // Specifically use the processed players
-        gameRunning: false, // Always start with game not running
-        currentPlayerIndex: persistedState.currentPlayerIndex !== undefined ? persistedState.currentPlayerIndex : 0, // Ensure valid index
+        ...initialState,
+        ...persistedState,
+        players: playersToUse,
+        gameRunning: false,
+        currentPlayerIndex: persistedState.currentPlayerIndex !== undefined && persistedState.currentPlayerIndex < playersToUse.length ? persistedState.currentPlayerIndex : 0,
       };
     }
-    // If no persisted state, return a deep copy of the initial state (which includes predefined players)
     return JSON.parse(JSON.stringify(initialState));
   },
   mutations: {
@@ -86,7 +78,7 @@ export default createStore({
       state.players = players.map(p => ({
         ...p,
         id: p.id || Date.now().toString() + Math.random(),
-        avatar: p.avatar || defaultAvatar,
+        avatar: p.avatar || DEFAULT_AVATAR_MARKER,
         initialTimerSec: typeof p.initialTimerSec === 'number' ? p.initialTimerSec : parseTime(p.initialTimer || "60:00"),
         currentTimerSec: typeof p.currentTimerSec === 'number' ? p.currentTimerSec : (typeof p.initialTimerSec === 'number' ? p.initialTimerSec : parseTime(p.currentTimer || p.initialTimer || "60:00")),
         isSkipped: p.isSkipped || false,
@@ -98,15 +90,18 @@ export default createStore({
       const newPlayer = {
         id: Date.now().toString() + Math.random(), // More robust unique ID
         name: player.name || `Player ${state.players.length + 1}`,
-        avatar: player.avatar || defaultAvatar,
+        avatar: player.avatar || DEFAULT_AVATAR_MARKER,
         initialTimerSec: player.initialTimerSec || 3600,
         currentTimerSec: player.initialTimerSec || 3600,
         hotkey: player.hotkey || null,
         isSkipped: false,
         isTimerRunning: false,
       };
-      if (state.players.length < 7) {
+      if (state.players.length < 99) { 
         state.players.push(newPlayer);
+      } else {
+        console.warn("Maximum player limit (99) reached."); 
+        alert("Maximum player limit (99) reached."); 
       }
     },
     UPDATE_PLAYER(state, updatedPlayer) {
@@ -150,6 +145,12 @@ export default createStore({
     SET_GLOBAL_HOTKEY_STOP_PAUSE(state, key) {
       state.globalHotkeyStopPause = key;
     },
+    SET_GLOBAL_HOTKEY_RUN_ALL(state, key) {
+      state.globalHotkeyRunAll = key;
+    },
+    SET_THEME(state, theme) {
+      state.theme = theme;
+    },
     DECREMENT_TIMER(state, { playerIndex }) {
       const player = state.players[playerIndex];
       if (player && player.isTimerRunning && !player.isSkipped) {
@@ -184,8 +185,6 @@ export default createStore({
       state.gameMode = 'normal';
       state.gameRunning = false;
     },
-    // ... other mutations, actions, getters remain the same
-    // Make sure PAUSE_ALL_TIMERS, START_PLAYER_TIMER, PAUSE_PLAYER_TIMER update gameRunning
     START_PLAYER_TIMER(state, playerIndex) {
         if(state.players[playerIndex] && !state.players[playerIndex].isSkipped) {
             state.players[playerIndex].isTimerRunning = true;
@@ -209,31 +208,41 @@ export default createStore({
     },
   },
   actions: {
-    loadState({ commit }) {
-      // This action is effectively handled by the state initializer function now.
-      // We can keep it for explicitness or if we add more complex loading logic later.
-      // For now, the state initializer is doing the heavy lifting.
-      // If there are other things to initialize that aren't covered by state(), do them here.
+    loadState({ commit, state }) {
+      // The state initializer already did the main loading from localStorage.
+      // This action can be used for any *additional* setup after initial hydration
+      // or to re-apply certain defaults if needed.
+      // For now, it's mainly a confirmation that persisted state is used.
+
+      // Example: ensure theme is applied if it was loaded
+      // This is already handled by App.vue's watcher, but could be centralized.
+      // if (state.theme === 'dark') {
+      //   document.documentElement.classList.add('dark');
+      // } else {
+      //   document.documentElement.classList.remove('dark');
+      // }
+      console.log("Store state loaded/initialized.");
+      // It's good practice for actions to return a Promise if they are async
+      // or if other parts of the app expect to chain .then()
+      return Promise.resolve(); // Resolve immediately
     },
     saveState({ state }) {
       StorageService.saveState({
-        players: state.players.map(p => ({ // Save a clean version of players
+        players: state.players.map(p => ({ 
             id: p.id,
             name: p.name,
-            avatar: p.avatar === defaultAvatar ? null : p.avatar, // Don't save default avatar string if it's the default
+            avatar: p.avatar, 
             initialTimerSec: p.initialTimerSec,
-            // currentTimerSec: p.currentTimerSec, // Don't save currentTimerSec to always start fresh? Or save it. Spec: "timer states ... are saved"
             currentTimerSec: p.currentTimerSec,
             hotkey: p.hotkey,
             isSkipped: p.isSkipped,
-            // isTimerRunning is transient, should not be saved as running
         })),
         globalHotkeyStopPause: state.globalHotkeyStopPause,
+        globalHotkeyRunAll: state.globalHotkeyRunAll,
         currentPlayerIndex: state.currentPlayerIndex,
         gameMode: state.gameMode,
         isMuted: state.isMuted,
         theme: state.theme,
-        // gameRunning is transient, should not be saved as true
       });
     },
     addPlayer({ commit, dispatch }, player) {
@@ -249,8 +258,8 @@ export default createStore({
       dispatch('saveState');
     },
     reorderPlayers({commit, dispatch}, players) {
-        commit('REORDER_PLAYERS', players);
-        dispatch('saveState');
+      commit('REORDER_PLAYERS', players);
+      dispatch('saveState');
     },
     shufflePlayers({commit, dispatch}) {
         commit('SHUFFLE_PLAYERS');
@@ -276,25 +285,31 @@ export default createStore({
         commit('RESET_ALL_TIMERS');
         dispatch('saveState');
     },
-    // This action is for the full reset from SetupView
-    fullResetApp({ commit, dispatch }) {
-        StorageService.clearState();
-        // Re-initialize state to default, which includes predefined players
-        // This is tricky because the store is already created.
-        // Easiest is to rely on a page reload after clearing storage,
-        // or manually reset each piece of state to initialState.
-        commit('SET_PLAYERS', JSON.parse(JSON.stringify(predefinedPlayers)));
-        commit('SET_CURRENT_PLAYER_INDEX', initialState.currentPlayerIndex);
-        commit('SET_GAME_MODE', initialState.gameMode);
-        commit('SET_IS_MUTED', initialState.isMuted);
-        commit('SET_GLOBAL_HOTKEY_STOP_PAUSE', initialState.globalHotkeyStopPause);
-        // Manually set theme if it needs to be reset from initialState too
-        if (store.state.theme !== initialState.theme) {
-             commit('TOGGLE_THEME'); // This assumes toggle flips it, adjust if direct set is better
-        }
-        commit('SET_GAME_RUNNING', false);
-        dispatch('saveState'); // Save this fresh state
-    },
+    setGlobalHotkeyStopPause({ commit, dispatch }, key) { // <-- New action
+      commit('SET_GLOBAL_HOTKEY_STOP_PAUSE', key);
+      dispatch('saveState');
+  },
+  setGlobalHotkeyRunAll({ commit, dispatch }, key) { // <-- New action
+      commit('SET_GLOBAL_HOTKEY_RUN_ALL', key);
+      dispatch('saveState');
+  },
+  fullResetApp({ commit, dispatch, state: currentGlobalState }) {
+      StorageService.clearState();
+      const freshInitialState = JSON.parse(JSON.stringify(initialState));
+
+      commit('SET_PLAYERS', freshInitialState.players);
+      commit('SET_CURRENT_PLAYER_INDEX', freshInitialState.currentPlayerIndex);
+      commit('SET_GAME_MODE', freshInitialState.gameMode);
+      commit('SET_IS_MUTED', freshInitialState.isMuted);
+      commit('SET_GLOBAL_HOTKEY_STOP_PAUSE', freshInitialState.globalHotkeyStopPause);
+      commit('SET_GLOBAL_HOTKEY_RUN_ALL', freshInitialState.globalHotkeyRunAll);
+      
+      if (currentGlobalState.theme !== freshInitialState.theme) {
+           commit('SET_THEME', freshInitialState.theme);
+      }
+      commit('SET_GAME_RUNNING', false);
+      dispatch('saveState');
+  },
     tick({ commit, state }) {
       if (state.gameMode === 'normal') {
         if (state.players[state.currentPlayerIndex]?.isTimerRunning) {
@@ -437,6 +452,7 @@ export default createStore({
     isMuted: state => state.isMuted,
     theme: state => state.theme,
     globalHotkeyStopPause: state => state.globalHotkeyStopPause,
+    globalHotkeyRunAll: state => state.globalHotkeyRunAll,
     totalPlayers: state => state.players.length,
     gameRunning: state => state.gameRunning,
     maxNegativeTimeReached: () => MAX_NEGATIVE_SECONDS,
diff --git a/src/views/GameView.vue b/src/views/GameView.vue
index b6b6bbb..bf76d63 100644
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col h-screen overflow-hidden" :class="{'dark': theme === 'dark'}">
-    <!-- Header Bar -->
     <header class="p-3 bg-gray-100 dark:bg-gray-800 shadow-md flex justify-between items-center shrink-0">
+      <!-- ... header content ... -->
       <div class="flex items-center space-x-2">
         <button @click="navigateToSetup" class="btn btn-secondary text-sm">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
@@ -22,21 +22,22 @@
           </svg>
         </button>
         <button @click="toggleMute" class="btn-icon">
-          <!-- Mute/Unmute SVG -->
           <svg v-if="!isMuted" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg>
           <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15zm9.949-9.949a1 1 0 00-1.414 0L12 7.05l-2.085-2.085a1 1 0 00-1.414 1.414L10.586 8.5l-2.085 2.085a1 1 0 001.414 1.414L12 9.914l2.085 2.085a1 1 0 001.414-1.414L13.414 8.5l2.085-2.085a1 1 0 000-1.414z" /></svg>
         </button>
       </div>
     </header>
 
-    <main class="flex-grow overflow-y-auto" ref="gameArea">
-      <!-- Normal Mode -->
+    <!-- Main content area should allow its children to use its full height -->
+    <main class="flex-grow overflow-hidden flex flex-col" ref="gameArea">
+      <!-- Normal Mode: This div itself needs to take full height of 'main' -->
       <div v-if="gameMode === 'normal' && currentPlayer && nextPlayer" class="h-full flex flex-col">
         <PlayerDisplay 
           :player="currentPlayer" 
           is-current-player-area 
           area-class="bg-gray-100 dark:bg-gray-800"
           @tapped="handleCurrentPlayerTap"
+          class="flex-1 min-h-0"
         />
         <div class="shrink-0 h-1 bg-blue-500"></div>
         <PlayerDisplay 
@@ -44,13 +45,13 @@
           is-next-player-area 
           area-class="bg-gray-200 dark:bg-gray-700"
           @swiped-up="handlePassTurn"
+          class="flex-1 min-h-0"
         />
       </div>
 
       <!-- All Timers Running Mode -->
       <div v-if="gameMode === 'allTimers'" class="p-4 h-full flex flex-col">
-        <!-- Removed the "Pause All / Resume All" button from here -->
-        <div class="mb-4 flex justify-start items-center"> <!-- Changed justify-between to justify-start -->
+        <div class="mb-4 flex justify-start items-center">
             <h2 class="text-2xl font-semibold">All Timers Running</h2>
         </div>
         <div class="flex-grow overflow-y-auto space-y-2">
@@ -60,10 +61,10 @@
             :player="player"
             @tapped="() => handlePlayerTapAllTimers(indexInFullList(player.id))"
           />
-          <p v-if="playersInAllTimersView.length === 0 && players.length > 0 && anyTimerCouldRun()" class="text-center text-gray-500 dark:text-gray-400 py-6">
+          <p v-if="playersInAllTimersView.length === 0 && players.length > 0 && anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
             All active timers paused.
           </p>
-           <p v-if="playersInAllTimersView.length === 0 && players.length > 0 && !anyTimerCouldRun()" class="text-center text-gray-500 dark:text-gray-400 py-6">
+           <p v-if="playersInAllTimersView.length === 0 && players.length > 0 && !anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
             No players eligible to run. (All skipped or issue)
           </p>
            <p v-if="players.length === 0" class="text-center text-gray-500 dark:text-gray-400 py-6">
@@ -72,10 +73,6 @@
         </div>
       </div>
     </main>
-
-    <footer class="p-3 bg-gray-100 dark:bg-gray-800 shadow-inner shrink-0 text-center">
-        <span class="text-xs text-gray-500 dark:text-gray-400">Nexus Timer</span>
-     </footer>
   </div>
 </template>
 
@@ -96,32 +93,36 @@ const currentPlayer = computed(() => store.getters.currentPlayer);
 const nextPlayer = computed(() => store.getters.nextPlayer);
 const gameMode = computed(() => store.getters.gameMode);
 const isMuted = computed(() => store.getters.isMuted);
-const gameRunning = computed(() => store.getters.gameRunning);
+// const gameRunning = computed(() => store.getters.gameRunning);
 
 let timerInterval = null;
 
 const playersInAllTimersView = computed(() => {
   if (gameMode.value === 'allTimers') {
+    if (!players.value) return [];
     return players.value.filter(p => p.isTimerRunning && !p.isSkipped);
   }
   return [];
 });
 
 const anyTimerRunningInAllMode = computed(() => {
+    if (!players.value) return false;
     return players.value.some(p => p.isTimerRunning && !p.isSkipped);
 });
 
 const anyTimerCouldRun = computed(() => {
+    if (!players.value) return false;
     return players.value.some(p => !p.isSkipped);
 });
 
 
 const indexInFullList = (playerId) => {
+    if (!players.value) return -1;
     return players.value.findIndex(p => p.id === playerId);
 }
 
 onMounted(() => {
-  if (players.value.length < 2) {
+  if (!players.value || players.value.length < 2) {
     router.push({ name: 'Setup' });
     return;
   }
@@ -137,26 +138,23 @@ onUnmounted(() => {
   AudioService.cancelPassTurnSound();
 });
 
-// Watch gameMode for audio changes
 watch(gameMode, (newMode) => {
-  // Always stop any ongoing sounds when mode changes
   AudioService.stopContinuousTick(); 
   AudioService.cancelPassTurnSound();
 
   if (newMode === 'allTimers') {
-    if (anyTimerRunningInAllMode.value) { // If timers are already running when switching TO this mode
+    if (anyTimerRunningInAllMode.value) {
       AudioService.startContinuousTick(); 
     }
-  } else { // normal mode
+  } else { 
     if (currentPlayer.value && currentPlayer.value.isTimerRunning) {
         AudioService.playPassTurnAlert();
     }
   }
 });
 
-// Watch specific timer states for audio in AllTimers mode (for ticking)
 watch(anyTimerRunningInAllMode, (isRunning) => {
-    if (gameMode.value === 'allTimers') { // Only act if in allTimers mode
+    if (gameMode.value === 'allTimers') { 
         if (isRunning) {
             AudioService.startContinuousTick();
         } else {
@@ -165,14 +163,12 @@ watch(anyTimerRunningInAllMode, (isRunning) => {
     }
 });
 
-// Watch current player for pass turn alert in Normal mode
 watch(currentPlayer, (newPlayer, oldPlayer) => {
     if (gameMode.value === 'normal' && newPlayer && newPlayer.isTimerRunning && oldPlayer && newPlayer.id !== oldPlayer.id) {
         AudioService.playPassTurnAlert();
     }
 }, { deep: true }); 
 
-// Watch current player's timer running state for audio in Normal mode (manual tap)
 watch(() => currentPlayer.value?.isTimerRunning, (isRunning, wasRunning) => {
     if (gameMode.value === 'normal' && currentPlayer.value) {
         if (isRunning === true && wasRunning === false) {
@@ -216,7 +212,8 @@ const handlePassTurn = () => {
       AudioService.cancelPassTurnSound(); 
       const wasRunning = currentPlayer.value.isTimerRunning; 
       store.dispatch('passTurn').then(() => {
-        if (wasRunning && gameMode.value === 'normal' && currentPlayer.value && currentPlayer.value.isTimerRunning) {
+        const newCurrentPlayer = store.getters.currentPlayer;
+        if (wasRunning && gameMode.value === 'normal' && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
            AudioService.playPassTurnAlert(); 
         }
       });
@@ -227,20 +224,16 @@ const handlePlayerTapAllTimers = (playerIndex) => {
   store.dispatch('togglePlayerTimerAllTimersMode', playerIndex);
 };
 
-// handleStopStartAllTimers button was removed from the template for AllTimersMode
-
 const switchToAllTimersMode = () => {
   store.dispatch('switchToAllTimersMode');
 };
 
 const switchToNormalMode = () => {
-  store.dispatch('switchToNormalMode'); // This action already pauses all timers
-  // Audio for normal mode (if current player starts) is handled by watchers
+  store.dispatch('switchToNormalMode');
 };
 
-// Watcher for auto-reverting from All Timers mode
 watch(anyTimerRunningInAllMode, (anyRunning) => {
-    if (gameMode.value === 'allTimers' && !anyRunning && players.value.length > 0) {
+    if (gameMode.value === 'allTimers' && !anyRunning && players.value && players.value.length > 0) {
         const nonSkippedPlayersExist = players.value.some(p => !p.isSkipped);
         if (nonSkippedPlayersExist) {
             setTimeout(() => {
@@ -253,5 +246,4 @@ watch(anyTimerRunningInAllMode, (anyRunning) => {
         }
     }
 });
-
 </script>
\ No newline at end of file
diff --git a/src/views/SetupView.vue b/src/views/SetupView.vue
index 2d27b0d..e130124 100644
--- a/src/views/SetupView.vue
+++ b/src/views/SetupView.vue
@@ -7,8 +7,8 @@
     <!-- Player Management -->
     <section class="w-full max-w-3xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
       <div class="flex justify-between items-center mb-4">
-        <h2 class="text-2xl font-semibold">Players ({{ players.length }}/7)</h2>
-        <button @click="openAddPlayerModal" class="btn btn-primary" :disabled="players.length >= 7">
+        <h2 class="text-2xl font-semibold">Players ({{ players.length }})</h2> 
+        <button @click="openAddPlayerModal" class="btn btn-primary" :disabled="players.length >= 99"> 
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg>
           Add Player
         </button>
@@ -17,14 +17,35 @@
       
       <div v-if="players.length > 0" class="space-y-3 mb-4">
         <div v-for="(player, index) in players" :key="player.id" class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-600 rounded shadow-sm">
-          <div class="flex items-center flex-wrap"> <!-- Added flex-wrap for smaller screens -->
-            <img :src="player.avatar" alt="Avatar" class="w-10 h-10 rounded-full object-cover mr-3">
+          <div class="flex items-center flex-wrap">
+             <!-- *** START AVATAR LOGIC *** -->
+             <img 
+              v-if="player.avatar"
+              :src="player.avatar" 
+              alt="Player Avatar" 
+              class="w-10 h-10 rounded-full object-cover mr-3 flex-shrink-0" 
+            />
+            <DefaultAvatarIcon 
+              v-else
+              class="w-10 h-10 rounded-full object-cover mr-3 text-gray-400 bg-gray-200 dark:bg-gray-700 p-0.5 flex-shrink-0" 
+            />
+             <!-- *** END AVATAR LOGIC *** -->
             <span class="font-medium mr-2">{{ player.name }}</span>
-            <span class="mr-2 text-xs text-gray-500 dark:text-gray-400">({{ formatTime(player.initialTimerSec) }})</span>
-            <!-- Changed HK to Hotkey -->
+            <span class="mr-2 text-xs text-gray-500 dark:text-gray-400">({{ formatTime(player.currentTimerSec) }})</span>
             <span v-if="player.hotkey" class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-700 text-blue-700 dark:text-blue-200 rounded">Hotkey: {{ player.hotkey.toUpperCase() }}</span>
           </div>
-          <div class="space-x-2 flex-shrink-0"> <!-- Added flex-shrink-0 -->
+          <div class="space-x-1 flex items-center flex-shrink-0">
+            <!-- Action buttons -->
+             <button @click="movePlayerUp(index)" :disabled="index === 0" class="btn-icon text-gray-600 dark:text-gray-300 hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
+              </svg>
+            </button>
+            <button @click="movePlayerDown(index)" :disabled="index === players.length - 1" class="btn-icon text-gray-600 dark:text-gray-300 hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
             <button @click="openEditPlayerModal(player)" class="btn-icon text-yellow-500 hover:text-yellow-600">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg>
             </button>
@@ -45,20 +66,48 @@
 
     <!-- Game Settings -->
     <section class="w-full max-w-3xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
-      <h2 class="text-2xl font-semibold mb-4">Game Settings</h2>
-      <div class="mb-4">
-        <label for="globalHotkey" class="block text-sm font-medium text-gray-700 dark:text-gray-300">"Global Stop/Pause All" Hotkey</label>
-        <input 
-            type="text" 
-            id="globalHotkey" 
-            :value="globalHotkeyDisplay"
-            @keydown.prevent="captureGlobalHotkey" 
-            placeholder="Press a key" 
-            class="input-base w-full sm:w-1/2"
-            readonly
+      <!-- ... Global hotkey inputs ... -->
+      <div class="flex items-center justify-between mb-3">
+        <label for="globalHotkeyStopPause" class="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap mr-3">
+          Global "Stop/Pause All" Hotkey:
+        </label>
+        <div class="flex items-center">
+          <input 
+              type="text" 
+              id="globalHotkeyStopPause" 
+              :value="globalHotkeyStopPauseDisplay"
+              @keydown.prevent="captureGlobalHotkey($event, 'stopPause')" 
+              placeholder="-" 
+              class="input-base w-12 h-8 text-center font-mono text-lg p-0"
+              readonly
+              maxlength="1"
           >
-        <button type="button" @click="clearGlobalHotkey" class="text-xs text-blue-500 hover:underline mt-1 ml-2">Clear Hotkey</button>
+          <button type="button" @click="clearGlobalHotkey('stopPause')" class="text-xs text-blue-500 hover:underline ml-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+            Clear
+          </button>
+        </div>
       </div>
+      <div class="flex items-center justify-between mb-6">
+        <label for="globalHotkeyRunAll" class="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap mr-3">
+          Global "Run All Timers" Hotkey:
+        </label>
+        <div class="flex items-center">
+          <input 
+              type="text" 
+              id="globalHotkeyRunAll" 
+              :value="globalHotkeyRunAllDisplay"
+              @keydown.prevent="captureGlobalHotkey($event, 'runAll')" 
+              placeholder="-" 
+              class="input-base w-12 h-8 text-center font-mono text-lg p-0"
+              readonly
+              maxlength="1"
+          >
+          <button type="button" @click="clearGlobalHotkey('runAll')" class="text-xs text-blue-500 hover:underline ml-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+            Clear
+          </button>
+        </div>
+      </div>
+      <!-- ... Dark Mode / Mute ... -->
       <div class="flex items-center justify-between mb-4">
         <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Dark Mode</span>
         <button @click="toggleTheme" class="px-3 py-1.5 rounded-md text-sm font-medium" :class="theme === 'dark' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'">
@@ -86,6 +135,7 @@
       </button>
     </section>
 
+    <!-- Player Form Modal -->
     <PlayerForm 
       v-if="showPlayerModal" 
       :player="editingPlayer"
@@ -96,12 +146,12 @@
 </template>
 
 <script setup>
-// ... (script setup remains the same)
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import PlayerForm from '../components/PlayerForm.vue';
 import { formatTime } from '../utils/timeFormatter';
+import DefaultAvatarIcon from '../components/DefaultAvatarIcon.vue';
 
 const store = useStore();
 const router = useRouter();
@@ -109,16 +159,22 @@ const router = useRouter();
 const players = computed(() => store.getters.players);
 const theme = computed(() => store.getters.theme);
 const isMuted = computed(() => store.getters.isMuted);
-const globalHotkey = computed(() => store.getters.globalHotkeyStopPause);
-const globalHotkeyDisplay = computed(() => globalHotkey.value ? globalHotkey.value.toUpperCase() : '');
+
+const globalHotkeyStopPause = computed(() => store.getters.globalHotkeyStopPause);
+const globalHotkeyStopPauseDisplay = computed(() => globalHotkeyStopPause.value ? globalHotkeyStopPause.value.toUpperCase() : '');
+
+const globalHotkeyRunAll = computed(() => store.getters.globalHotkeyRunAll);
+const globalHotkeyRunAllDisplay = computed(() => globalHotkeyRunAll.value ? globalHotkeyRunAll.value.toUpperCase() : '');
 
 const showPlayerModal = ref(false);
 const editingPlayer = ref(null);
 
 const openAddPlayerModal = () => {
-  if (players.value.length < 7) {
+  if (players.value.length < 99) { 
     editingPlayer.value = null;
     showPlayerModal.value = true;
+  } else {
+     alert("Maximum player limit (99) reached."); 
   }
 };
 
@@ -140,6 +196,7 @@ const savePlayer = (playerData) => {
       name: playerData.name,
       avatar: playerData.avatar,
       initialTimerSec: playerData.initialTimerSec,
+      currentTimerSec: playerData.currentTimerSec,
       hotkey: playerData.hotkey
     });
   }
@@ -160,21 +217,63 @@ const reversePlayers = () => {
     store.dispatch('reversePlayers');
 };
 
-const captureGlobalHotkey = (event) => {
-  event.preventDefault();
-  const key = event.key.toLowerCase();
-  if (key && !['control', 'alt', 'shift', 'meta'].includes(key)) {
-    const existingPlayerHotkey = store.state.players.some(p => p.hotkey === key);
-    if (existingPlayerHotkey) {
-        alert(`Hotkey "${key.toUpperCase()}" is already assigned to a player.`);
-        return;
-    }
-    store.dispatch('setGlobalHotkey', key);
+const movePlayerUp = (index) => {
+  if (index > 0) {
+    const newPlayersOrder = [...players.value];
+    const temp = newPlayersOrder[index];
+    newPlayersOrder[index] = newPlayersOrder[index - 1];
+    newPlayersOrder[index - 1] = temp;
+    store.dispatch('reorderPlayers', newPlayersOrder);
   }
 };
 
-const clearGlobalHotkey = () => {
-    store.dispatch('setGlobalHotkey', null);
+const movePlayerDown = (index) => {
+  if (index < players.value.length - 1) {
+    const newPlayersOrder = [...players.value];
+    const temp = newPlayersOrder[index];
+    newPlayersOrder[index] = newPlayersOrder[index + 1];
+    newPlayersOrder[index + 1] = temp;
+    store.dispatch('reorderPlayers', newPlayersOrder);
+  }
+};
+
+const captureGlobalHotkey = (event, type) => {
+  event.preventDefault();
+  let key = event.key;
+  if (event.code === 'Space') {
+      key = ' '; 
+  } else if (key.length > 1 && key !== ' ') {
+      return; 
+  }
+  key = key.toLowerCase();
+
+  const isPlayerHotkey = store.state.players.some(p => p.hotkey === key);
+  if (isPlayerHotkey) {
+    alert(`Hotkey "${key.toUpperCase()}" is already assigned to a player.`);
+    return;
+  }
+
+  if (type === 'stopPause') {
+    if (store.state.globalHotkeyRunAll === key) {
+      alert(`Hotkey "${key.toUpperCase()}" is already assigned to Global "Run All Timers".`);
+      return;
+    }
+    store.dispatch('setGlobalHotkeyStopPause', key);
+  } else if (type === 'runAll') {
+    if (store.state.globalHotkeyStopPause === key) {
+      alert(`Hotkey "${key.toUpperCase()}" is already assigned to Global "Stop/Pause All".`);
+      return;
+    }
+    store.dispatch('setGlobalHotkeyRunAll', key);
+  }
+};
+
+const clearGlobalHotkey = (type) => {
+    if (type === 'stopPause') {
+        store.dispatch('setGlobalHotkeyStopPause', null);
+    } else if (type === 'runAll') {
+        store.dispatch('setGlobalHotkeyRunAll', null);
+    }
 };
 
 const toggleTheme = () => {
@@ -188,10 +287,9 @@ const toggleMute = () => {
 const saveAndClose = () => {
   store.dispatch('saveState');
   if (players.value.length >= 2) {
-    if (store.state.currentPlayerIndex >= players.value.length || store.state.currentPlayerIndex < 0) { // Ensure valid index
+    if (store.state.currentPlayerIndex >= players.value.length || store.state.currentPlayerIndex < 0) {
         store.commit('SET_CURRENT_PLAYER_INDEX', 0);
     }
-    // When saving and closing from setup, always start in normal mode, paused.
     store.commit('PAUSE_ALL_TIMERS'); 
     store.commit('SET_GAME_MODE', 'normal');
     router.push({ name: 'Game' });