initial

update working reset vue.js used without footer docker default mode
2025-05-06 20:19:38 +02:00
parent d741efa62d
commit 0bf368ea7a
40 changed files with 5117 additions and 2 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,38 @@
+# Git files
+.git
+.gitignore
+
+# Node modules - these are installed within the Docker build context
+node_modules
+
+# Docker specific files (if any, other than Dockerfile itself)
+# .dockerignore (to avoid including itself if context changes)
+
+# Local development environment files
+.env
+.env*.local
+
+# Logs and temporary files
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+pnpm-debug.log*
+
+# OS-specific files
+.DS_Store
+Thumbs.db
+
+# IDE configuration
+.idea/
+.vscode/
+*.sublime-workspace
+*.sublime-project
+
+# Build output (if you ever build locally before Docker)
+dist/
+# If your build output is different, change the line above
+
+# Coverage reports
+coverage/
+.nyc_output/
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,144 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarnclean
+
+# dotenv environment variables file
+.env
+.env*.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# parcel-bundler cache files
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build output
+.nuxt
+dist
+
+# Svelte Sapper build output
+__sapper__
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# Vite local development server cache
+.vite
+
+# Vite build output directory
+/dist
+# If your build output is different, change the line above to /your-build-output-dir
+
+# Mac OS system files
+.DS_Store
+Thumbs.db
+
+# IDE specific
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sublime-workspace
+*.sublime-project
+
+# Editor directories and files
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
--- a/17
+++ b/17
@@ -0,0 +1,17 @@
+# Stage 1: Build the Vue.js application
+FROM node:24-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:stable-alpine
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN find /usr/share/nginx/html -mindepth 1 -delete
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
--- a/README.md
+++ b/README.md
@@ -1,3 +1,139 @@
-# OrreryTimer
+# Nexus Timer 🕰️✨

-OrreryTimer is a dynamic multi-player timer designed for games, workshops, or any activity where turns pass sequentially in a circular fashion. It provides a clear visual focus on the current participant, their immediate predecessor and successor, and the direction of play, ensuring everyone stays engaged and aware of the flow.
+Nexus Timer is a dynamic multi-player timer designed for games, workshops, or any activity where turns pass sequentially in a circular fashion. It provides a clear visual focus on the current participant and their immediate successor, ensuring everyone stays engaged and aware of who is next. This document serves as a detailed specification for a Progressive Web App (PWA) prototype aimed at game enthusiasts.
+
+## Core Concept
+
+Nexus Timer visualizes players in a circular sequence. The **Current Player** is prominently displayed in the top half of the screen, and the **Next Player** is in the bottom half. This clear visual pairing indicates the flow of turns, making it perfect for board games, role-playing games, timed presentations, or any scenario needing structured turn management with individual countdowns.
+
+## Target Audience
+
+Game enthusiasts who play turn-based games (board games, tabletop RPGs, card games) and need a visually clear and customizable timer solution.
+
+## Tech Stack
+
+*   **HTML5:**  For structuring the user interface.
+*   **CSS3:** For styling and visual presentation, including animations.  Consider a CSS framework like Tailwind CSS for rapid prototyping.
+*   **JavaScript:** For application logic, timer functionality, and event handling.
+*   **Web Audio API:** For audio feedback (ticking sounds, alerts).
+*   **Browser API:** For capturing Players' photo.
+*   **Local Storage/IndexedDB:** For persistent storage of player data, timer states, and settings.
+*   **Service Worker:**  Essential for PWA functionality (offline access, push notifications - potential future feature).
+*   **Manifest File:**  Defines the PWA's metadata (name, icons, theme color).
+*   **Web Framework:**  Use Vue.js
+*   **(Optional) Tailwind CSS:** Utility-first CSS framework for rapid UI development.
+
+## Hardware Recommendations (Optional Enhancement)
+
+For an enhanced tactile experience, Nexus Timer supports Smart Buttons based on Bluetooth-connected microcontroller (e.g., XIAO nRF52840) implementing HID (Human Interface Device) protocol.
+
+*   **Buttons:** Connect 3 physical buttons, potentially extended (e.g., via 1.5m wires) for easy player access.
+*   **Configuration:**
+    *   **Player 1's Button:** Single Click: Emulates a key press (e.g., 'a'). Configure this as Player 1's "Pass Turn / My Pause" hotkey in the app.
+    *   **Player 2's Button:** Single Click: Emulates a key press (e.g., 'b'). Configure as Player 2's "Pass Turn / My Pause" hotkey.
+    *   If Player 3 is Game Admin:
+    *   **Player 3's Button:** Single Click: Emulates a key press (e.g., 'c'). Configure as Player 3's "Pass Turn / My Pause" hotkey.  
+    *   **Player 3's Button:** Double Click: Emulates a key press (e.g., 'x'). Configure as the "Global Run All Timers" hotkey in the app.
+    *   **Player 3's Button:** Long Press: Emulates a key press (e.g., 's'). Configure as the "Global Stop/Pause All" hotkey in the app.
+
+## Key Features
+
+*   **Circular Player Display:**
+    1.  **Normal Mode (Default):** Central focus on the **Current Player** (top) and **Next Player** (bottom).
+    2.  **All Timers Running Mode:** List of players with running timers.
+*   **Individual Player Timers:**
+    *   Customizable countdown timer (MM:SS) for each player.
+    *   Timers continue into **negative time** (e.g., -MM:SS) up to a limit (e.g., -59:59).
+    *   Players reaching max negative time are **skipped** until reset or timer edit.
+    *   Visual feedback: Pulsating effect for active timers (background for positive, text for negative). Skipped players are visually distinct (e.g., greyed out).
+*   **Two Game Modes:**
+    1.  **Normal Mode (Default):**
+        *   Only the **Current Player's** timer runs.
+        *   Pass the turn via **Swipe Up** on the Next Player's area or the Current Player's "Pass Turn / My Pause" hotkey.
+        *   3-seconds ticking sound when the timer starts to alert players about the "Pass Turn".
+        *   Tap Current Player's area or use "Global Stop/Pause All" hotkey to pause/resume their timer without passing the turn.
+        *   To pass the turn: **Swipe Up** on the Next Player's area or have the Current Player press their "Pass Turn / My Pause" hotkey. The current timer pauses, the next player becomes Current, and their timer starts.
+        *   If the current player's timer is paused, and then the turn is passed (via swipe up or hotkey), the next player should become the current player, but their timer should not automatically start. It should remain paused.
+    2.  **All Timers Running Mode:**
+        *   All active player timers run simultaneously.
+        *   Enter by clicking "All Timers Mode" (starts all timers).
+        *   Continuous ticking sound when active.
+        *   Initially, all players are shown in a list with their photo, name and timer value.
+        *   Tapping on a player in the list pauses its timer. Any player can use their "Pass Turn / My Pause" hotkey to pause their *own* timer.
+        *   Only players with a running timer are shown in the list.
+        *   If all players pause their timers, automatically reverts to Normal Mode.
+        *   Main button: "Stop All Timers" (pauses all, returns to Normal Mode) or "Start All Timers" (resumes all in this mode). Can also be triggered by "Global Stop/Pause All" hotkey.
+*   **Player Management:**
+    *   Add, edit, and delete players (2-7 players).
+    *   Use device camera (access via browser API) or default avatars for the player's picture.
+    *   Set initial timer values per player (Default: 60:00).
+    *   Assign unique "Pass Turn / My Pause" hotkeys (single keypresses). E.g.: Use the Player's 1 "single click" action to insert the key.
+    *   Assign the "Global Stop/Pause All" hotkey (single keypresses). E.g.: Use the Player's 3 "long press" action to insert the key.
+    *   Assign the "Run All Timers" hotkey (single keypresses). E.g.: Use the Player's 3 "double click" action to insert the key.
+    *   Re-order players (drag-and-drop planned), reverse, shuffle.
+*   **Intuitive Controls:**
+    *   **Swipe Up:** (On the Next Player's area). Primary gesture for passing turns (Normal Mode).
+    *   **On-Screen Taps:** (On the Current Player's area). For pausing/resuming timers contextually.
+*   **Audio Feedback:**
+    *   Continuous ticking in "All Timers Running Mode" when active.
+    *   Brief 3-second tick when a timer starts in Normal Mode. Cancel the sound when the timer pauses.
+    *   Global mute option.
+*   **Visuals:**
+    *   Designed for mobile phone screens (portrait orientation).
+    *   Light/Dark theme options.
+*   **Persistence:** Player setups, timer states, and settings are saved locally using browser Local Storage.
+*   **Global Reset:** "Reset Game" button restores all timers to initial values and resets game state.
+
+## UI/UX Considerations (For AI Generation)
+
+*   **Minimalist Design:** Focus on clarity and ease of use. Avoid clutter.
+*   **Large, Clear Timers:**  Timers should be easily readable at a glance.
+*   **Color Coding:** Use color to indicate timer state (e.g., green for running, red for negative time, grey for skipped).
+*   **Responsive Layout:**  The UI should adapt to different (mobile phone) screen sizes.
+*   **Touch-Friendly:**  Buttons and interactive elements should be large enough for easy tapping.
+
+## Data Model (For AI Generation)
+
+```json
+{
+  "players": [
+    {
+      "id": "1",
+      "name": "Player 1",
+      "avatar": null,
+      "initialTimerSec": 3600,
+      "currentTimerSec": 3600,
+      "hotkey": "a",
+      "isSkipped": false
+    },
+    {
+      "id": "2",
+      "name": "Player 2",
+      "avatar": null,
+      "initialTimerSec": 3600,
+      "currentTimerSec": 3600,
+      "hotkey": "b",
+      "isSkipped": false
+    }
+  ],
+  "globalHotkeyStopPause": "s",
+  "globalHotkeyRunAll": "x",
+  "currentPlayerIndex": 0,
+  "gameMode": "normal", // "normal" or "allTimers"
+  "isMuted": false,
+  "theme": "dark"
+}
+```
+## Building for the production
+Build the docker image:
+```bash
+docker build -t nexus-timer .
+```
+Run the app in the container:
+```bash
+docker run --rm -p 8080:80 nexus-timer
+```
+Test the web app:
+```bash
+curl http://localhost:8080/
+```
--- a/assets/favicon-16x16.png
+++ b/assets/favicon-16x16.png
--- a/assets/favicon-32x32.png
+++ b/assets/favicon-32x32.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico"> <!-- Will be served from public/favicon.ico -> dist/favicon.ico -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Nexus Timer</title>
+    <link rel="manifest" href="/manifest.json"> <!-- Will be served from public/manifest.json -> dist/manifest.json -->
+    <meta name="theme-color" content="#000000">
+    <link rel="apple-touch-icon" href="/icons/icon-192x192.png"> <!-- Will be served from public/icons/ -> dist/icons/ -->
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+          // service-worker.js from public dir will be copied to dist root
+          navigator.serviceWorker.register('/service-worker.js') 
+            .then(registration => {
+              console.log('ServiceWorker registration successful with scope: ', registration.scope);
+            })
+            .catch(error => {
+              console.log('ServiceWorker registration failed: ', error);
+            });
+        });
+      }
+    </script>
+  </body>
+</html>
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,12 @@
+server {
+    listen 80;
+    listen [::]:80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+    "name": "nexus-timer",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.4",
+        "vuex": "^4.0.2"
+    },
+    "devDependencies": {
+        "@tailwindcss/typography": "^0.5.16",
+        "@vitejs/plugin-vue": "^4.2.3",
+        "autoprefixer": "^10.4.14",
+        "postcss": "^8.4.27",
+        "tailwindcss": "^3.3.3",
+        "vite": "^4.4.5"
+    }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/icon-192x192.png
+++ b/public/icons/icon-192x192.png
--- a/public/icons/icon-512x512.png
+++ b/public/icons/icon-512x512.png
--- a/public/icons/maskable-icon-192x192.png
+++ b/public/icons/maskable-icon-192x192.png
--- a/public/icons/maskable-icon-512x512.png
+++ b/public/icons/maskable-icon-512x512.png
--- a/public/icons/shortcut-info-96x96.png
+++ b/public/icons/shortcut-info-96x96.png
--- a/public/icons/shortcut-setup-96x96.png
+++ b/public/icons/shortcut-setup-96x96.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,57 @@
+{
+  "name": "Nexus Timer - Multiplayer Turn Timer",
+  "short_name": "NexusTimer",
+  "description": "Dynamic multiplayer timer for games, workshops, or sequential turns. Focuses on current & next player.", // Add a description
+  "start_url": "/",
+  "scope": "/", 
+  "display": "standalone",
+  "display_override": ["window-controls-overlay"], 
+  "background_color": "#1f2937", 
+  "theme_color": "#3b82f6",
+  "orientation": "portrait",
+  "version": "0.0.1",
+  "version_name": "0.0.1",
+  "lang": "en-US",
+  "icons": [
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any" 
+    },
+    {
+      "src": "/icons/maskable-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable" 
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/maskable-icon-512x512.png", 
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+   "shortcuts": [ 
+    {
+      "name": "Game Setup",
+      "short_name": "Setup",
+      "description": "Configure players and settings",
+      "url": "/?utm_source=homescreen", 
+      "icons": [{ "src": "/icons/shortcut-setup-96x96.png", "sizes": "96x96" }] 
+    },
+    {
+      "name": "About Nexus Timer",
+      "short_name": "About",
+      "description": "Information about the app",
+      "url": "/info?utm_source=homescreen",
+      "icons": [{ "src": "/icons/shortcut-info-96x96.png", "sizes": "96x96" }] 
+    }
+  ]
+}
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -0,0 +1,154 @@
+const CACHE_VERSION = 'nexus-timer-cache-v3.3';
+const APP_SHELL_URLS = [
+  // '/', // Let NetworkFirst handle '/'
+  '/manifest.json',
+  '/favicon.ico',
+  '/icons/icon-192x192.png',
+  '/icons/icon-512x512.png',
+  '/icons/maskable-icon-192x192.png',
+  '/icons/maskable-icon-512x512.png',
+  '/icons/shortcut-setup-96x96.png',
+  '/icons/shortcut-info-96x96.png',
+  // Add Vite output paths? Usually hard due to hashing. Rely on dynamic caching.
+];
+
+self.addEventListener('install', event => {
+  console.log(`[SW ${CACHE_VERSION}] Install`);
+  event.waitUntil(
+    caches.open(CACHE_VERSION)
+      .then(cache => {
+        console.log(`[SW ${CACHE_VERSION}] Caching app shell essentials`);
+        return cache.addAll(APP_SHELL_URLS); // Cache core static assets
+      })
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', event => {
+  console.log(`[SW ${CACHE_VERSION}] Activate`);
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheName !== CACHE_VERSION) {
+            console.log(`[SW ${CACHE_VERSION}] Deleting old cache: ${cacheName}`);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', event => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Ignore non-GET requests & non-http protocols
+  if (request.method !== 'GET' || !url.protocol.startsWith('http')) {
+    return;
+  }
+
+  // --- Strategy 1: Network First for HTML ---
+  if (request.mode === 'navigate' || (request.destination === 'document' || url.pathname === '/')) {
+    event.respondWith(
+      fetch(request)
+        .then(response => {
+          // If fetch is successful, cache it and return it
+          if (response.ok) {
+             const responseClone = response.clone();
+             caches.open(CACHE_VERSION).then(cache => cache.put(request, responseClone));
+          }
+          return response;
+        })
+        .catch(async () => {
+          // If fetch fails, try cache
+          const cachedResponse = await caches.match(request);
+          if (cachedResponse) {
+              return cachedResponse;
+          }
+          // If specific request not in cache, try root '/' as SPA fallback
+          const rootCache = await caches.match('/');
+          if (rootCache) {
+             return rootCache;
+          }
+          // Optional: return a proper offline fallback page if available
+          // return caches.match('/offline.html');
+          // Or just let the browser show its offline error
+          return new Response('Network error and no cache found.', { status: 404, statusText: 'Not Found' });
+        })
+    );
+    return;
+  }
+
+  // --- Strategy 2: Stale-While-Revalidate for assets ---
+  if (request.destination === 'style' ||
+      request.destination === 'script' ||
+      request.destination === 'worker' ||
+      request.destination === 'image' ||
+      request.destination === 'font') {
+    event.respondWith(
+      caches.open(CACHE_VERSION).then(cache => { // Open cache first
+        return cache.match(request).then(cachedResponse => {
+          // Fetch in parallel (don't wait for it here)
+          const fetchPromise = fetch(request).then(networkResponse => {
+            // Check if fetch was successful
+            if (networkResponse.ok) {
+              // Clone before caching
+              const responseToCache = networkResponse.clone();
+              // Update the cache with the network response
+              cache.put(request, responseToCache);
+            } else {
+              console.warn(`[SW ${CACHE_VERSION}] Fetch for ${request.url} failed with status ${networkResponse.status}`);
+            }
+            // Return the original network response for the fetch promise resolution
+            // This isn't directly used for the *initial* response unless cache misses.
+            return networkResponse;
+          }).catch(err => {
+            console.warn(`[SW ${CACHE_VERSION}] Fetch error for ${request.url}:`, err);
+            // If fetch fails, we just rely on the cache if it existed.
+            // Re-throw error so if cache also missed, browser knows resource failed.
+            throw err;
+          });
+
+          // Return the cached response immediately if available.
+          // If not cached, this strategy requires waiting for the fetch.
+          // The common implementation returns cache THEN fetches, but if cache misses,
+          // the user waits for the network. Let's return fetchPromise if no cache.
+          return cachedResponse || fetchPromise;
+
+        }).catch(err => {
+            // Error during cache match or subsequent fetch
+            console.error(`[SW ${CACHE_VERSION}] Error handling fetch for ${request.url}:`, err);
+            // Fallback to network just in case cache interaction failed? Or let browser handle.
+            // Let's try network as a last resort if cache fails.
+            return fetch(request);
+        });
+      })
+    );
+    return;
+  }
+
+  // --- Strategy 3: Cache First for others ---
+  // (e.g., manifest, potentially icons not pre-cached)
+  event.respondWith(
+    caches.match(request)
+      .then(response => {
+        return response || fetch(request).then(networkResponse => {
+            if(networkResponse.ok) {
+                const responseClone = networkResponse.clone();
+                caches.open(CACHE_VERSION).then(cache => cache.put(request, responseClone));
+            }
+            return networkResponse;
+        });
+      })
+  );
+});
+
+// Listener for skipWaiting message
+self.addEventListener('message', event => {
+  if (event.data && event.data.action === 'skipWaiting') {
+    console.log('[SW] Received skipWaiting message, activating new SW.');
+    self.skipWaiting();
+  }
+});
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,227 @@
+<template>
+  <div :class="[theme, 'min-h-screen flex flex-col no-select']">
+    <!-- Optional: Update Notification UI -->
+    <div v-if="showUpdateBar" class="bg-blue-600 text-white p-3 text-center text-sm shadow-md">
+      A new version is available!
+      <button @click="refreshApp" class="ml-4 font-semibold underline hover:text-blue-200">REFRESH</button>
+      <button @click="showUpdateBar = false" class="ml-4 font-semibold absolute right-3 top-1/2 transform -translate-y-1/2 p-1">✕</button>
+    </div>
+
+    <!-- Optional: Install Button (place somewhere appropriate, e.g., header or settings) -->
+    <!-- Example: Adding to App.vue for demo, ideally place in SetupView or a menu -->
+    <button v-if="showInstallButton" @click="promptInstall" class="fixed bottom-4 right-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded shadow-lg z-50">
+      Install App
+    </button>
+
+    <router-view class="flex-grow" />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, watch, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { AudioService } from './services/AudioService';
+
+const store = useStore();
+const router = useRouter();
+const theme = computed(() => store.getters.theme);
+
+// --- PWA Install Prompt Logic ---
+const deferredPrompt = ref(null);
+const showInstallButton = ref(false);
+
+window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt.value = e;
+  // Update UI to notify the user they can add to home screen
+  showInstallButton.value = true;
+  console.log('`beforeinstallprompt` event was fired.');
+});
+
+const promptInstall = async () => {
+  if (!deferredPrompt.value) {
+    alert('Install prompt not available.');
+    return;
+  }
+  showInstallButton.value = false; // Hide the button once prompt is shown
+  // Show the prompt
+  deferredPrompt.value.prompt();
+  // Wait for the user to respond to the prompt
+  const { outcome } = await deferredPrompt.value.userChoice;
+  console.log(`User response to the install prompt: ${outcome}`);
+  // We've used the prompt, and can't use it again, throw it away
+  deferredPrompt.value = null;
+};
+
+window.addEventListener('appinstalled', () => {
+  // Hide the install button if the app is installed
+  showInstallButton.value = false;
+  deferredPrompt.value = null;
+  console.log('Nexus Timer was installed.');
+  // Optionally: Send analytics event
+});
+// --- End PWA Install Prompt Logic ---
+
+// --- PWA Update Logic ---
+const showUpdateBar = ref(false);
+let newWorker;
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.ready.then(registration => {
+    if (registration.waiting) {
+      console.log("SW Update: Found waiting worker on load");
+      newWorker = registration.waiting;
+      showUpdateBar.value = true;
+      return;
+    }
+    registration.addEventListener('updatefound', () => {
+      console.log("SW Update: New worker found, installing...");
+      newWorker = registration.installing;
+      newWorker.addEventListener('statechange', () => {
+        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+           console.log("SW Update: New worker installed and ready");
+           showUpdateBar.value = true; // Show refresh bar
+        }
+      });
+    });
+  });
+
+  // Detect controller change and refresh the page.
+  // Can happen if skipWaiting() is used and the page wasn't manually refreshed.
+  let refreshing;
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    if (refreshing) return;
+    console.log("SW Update: Controller changed, refreshing page.");
+    refreshing = true;
+    window.location.reload();
+  });
+}
+
+const refreshApp = () => {
+  showUpdateBar.value = false;
+  if (newWorker) {
+    console.log("SW Update: Sending skipWaiting message");
+    newWorker.postMessage({ action: 'skipWaiting' });
+    // Page should reload via 'controllerchange' listener above
+  } else {
+     console.warn("SW Update: Refresh called but no new worker found.");
+     window.location.reload(); // Fallback reload
+  }
+};
+// --- End PWA Update Logic ---
+
+
+onMounted(() => {
+  store.dispatch('loadState').then(() => {
+    // Sync with OS theme preference on initial load if no theme is saved yet
+    // Note: Store initializer already loads saved theme if it exists.
+    // This logic should perhaps check if the loaded theme matches OS pref
+    // or only apply OS pref if no theme was loaded from storage.
+    // Simplified: Apply loaded theme regardless for now.
+    applyTheme();
+
+    // Example: Sync with OS theme only if no theme saved (requires store modification)
+    // syncWithOsThemeIfNeeded();
+
+  }).catch(error => {
+    console.error("App.vue: Error during store.dispatch('loadState'):", error);
+  });
+
+  document.addEventListener('keydown', handleGlobalKeyDown);
+
+  const resumeAudio = () => { AudioService.resumeContext(); /* ... remove listeners ... */ };
+  document.body.addEventListener('click', resumeAudio, { once: true });
+  document.body.addEventListener('touchstart', resumeAudio, { once: true });
+});
+
+watch(theme, () => {
+  applyTheme();
+});
+
+watch(() => store.state.isMuted, (newMutedState) => {
+  AudioService.setMuted(newMutedState);
+});
+
+
+const applyTheme = () => {
+  if (store.getters.theme === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+};
+
+// Optional: Function to sync with OS theme
+// const syncWithOsThemeIfNeeded = () => {
+//   // Requires modification to store state/initializer to know if theme was explicitly set/saved
+//   const themeWasLoaded = store.getters.theme !== initialState.theme; // Example check needed
+//   if (!themeWasLoaded && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+//      console.log("Syncing with OS dark theme preference.");
+//      store.dispatch('toggleTheme'); // Assumes toggle sets it correctly
+//   }
+// }
+
+// handleGlobalKeyDown (remains the same as previous version)
+const handleGlobalKeyDown = (event) => {
+  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;
+
+  if (keyPressed === store.getters.globalHotkeyStopPause && store.getters.globalHotkeyStopPause) {
+    event.preventDefault();
+    if (currentRouteName === 'Game') {
+        store.dispatch('globalStopPauseAll');
+    }
+    return;
+  }
+
+  if (keyPressed === store.getters.globalHotkeyRunAll && store.getters.globalHotkeyRunAll) {
+    event.preventDefault();
+    if (currentRouteName === 'Game' && store.getters.gameMode === 'normal') {
+        store.dispatch('switchToAllTimersMode');
+    }
+    return;
+  }
+
+  if (currentRouteName === 'Game') {
+      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();
+            }
+        });
+      } 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>
--- a/src/assets/default-avatar.png
+++ b/src/assets/default-avatar.png
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -0,0 +1,43 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased select-none;
+  overscroll-behavior-y: contain; /* Prevents pull-to-refresh on mobile */
+}
+
+/* Basic button styling */
+.btn {
+  @apply px-4 py-2 rounded font-semibold focus:outline-none focus:ring-2 focus:ring-opacity-50;
+}
+.btn-primary {
+  @apply bg-blue-500 hover:bg-blue-600 text-white focus:ring-blue-400;
+}
+.btn-secondary {
+  @apply bg-gray-500 hover:bg-gray-600 text-white focus:ring-gray-400;
+}
+.btn-danger {
+  @apply bg-red-500 hover:bg-red-600 text-white focus:ring-red-400;
+}
+.btn-warning {
+  @apply bg-yellow-500 hover:bg-yellow-600 text-black focus:ring-yellow-400;
+}
+.btn-icon {
+    @apply p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700;
+}
+
+/* Input styling */
+.input-base {
+    @apply mt-1 block w-full px-3 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
+}
+
+/* For preventing text selection during swipes/taps */
+.no-select {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+}
--- a/src/components/DefaultAvatarIcon.vue
+++ 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>
--- a/src/components/PlayerDisplay.vue
+++ b/src/components/PlayerDisplay.vue
@@ -0,0 +1,146 @@
+<template>
+  <div 
+    :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,
+               'bg-red-100 dark:bg-red-900': player.isTimerRunning && player.currentTimerSec < 0 && !isNextPlayerArea,
+             }]"
+    @click="handleTap"
+    v-touch:swipe.up="handleSwipeUp"
+  >
+    <!-- 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-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-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, ref, onMounted, onUnmounted } from 'vue';
+import TimerDisplay from './TimerDisplay.vue';
+import DefaultAvatarIcon from './DefaultAvatarIcon.vue'; 
+
+const vTouch = {
+  mounted: (el, binding) => {
+    if (binding.arg === 'swipe' && binding.modifiers.up) {
+      let touchstartX = 0;
+      let touchstartY = 0;
+      let touchendX = 0;
+      let touchendY = 0;
+      const swipeThreshold = 50; 
+
+      el.addEventListener('touchstart', function(event) {
+          touchstartX = event.changedTouches[0].screenX;
+          touchstartY = event.changedTouches[0].screenY;
+      }, { passive: true });
+
+      el.addEventListener('touchend', function(event) {
+          touchendX = event.changedTouches[0].screenX;
+          touchendY = event.changedTouches[0].screenY;
+          handleGesture();
+      }, { passive: true }); 
+
+      function handleGesture() {
+          const deltaY = touchstartY - touchendY;
+          const deltaX = Math.abs(touchendX - touchstartX);
+          
+          if (deltaY > swipeThreshold && deltaY > deltaX) {
+             if (typeof binding.value === 'function') {
+                binding.value();
+             }
+          }
+      }
+    }
+  }
+};
+
+
+const props = defineProps({
+  player: {
+    type: Object,
+    required: true
+  },
+  isCurrentPlayerArea: Boolean,
+  isNextPlayerArea: Boolean,
+  areaClass: String,
+});
+
+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');
+  }
+};
+
+const handleSwipeUp = () => {
+  if (props.isNextPlayerArea && !props.player.isSkipped) {
+    emit('swiped-up');
+  }
+};
+</script>
--- a/src/components/PlayerForm.vue
+++ b/src/components/PlayerForm.vue
@@ -0,0 +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">
+        <!-- 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>
+           <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>
+  </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 {
+        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)}.`;
+        }
+        else {
+            currentTimeFormatError.value = '';
+        }
+    }
+}
+
+
+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 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; 
+  }
+  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;
+    }
+    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 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;
+  }
+
+  if (!isEditing.value) {
+    playerPayload.initialTimerSec = playerPayload.currentTimerSec;
+  }
+
+  emit('save', playerPayload);
+  closeModal();
+}
+
+function closeModal() {
+  emit('close');
+}
+</script>
--- a/src/components/PlayerListItem.vue
+++ b/src/components/PlayerListItem.vue
@@ -0,0 +1,70 @@
+<template>
+  <div 
+    :class="['player-list-item flex items-center justify-between p-3 my-2 rounded-lg shadow cursor-pointer', 
+            itemBgClass,
+            { 'opacity-60': player.isSkipped, 
+              'animate-pulsePositive': player.isTimerRunning && player.currentTimerSec >=0,
+            }]"
+    @click="handleTap"
+  >
+    <div class="flex items-center">
+      <img 
+        v-if="player.avatar"
+        :src="player.avatar" 
+        alt="Player Avatar" 
+        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>
+      </div>
+    </div>
+    <div class="flex flex-col items-end">
+      <TimerDisplay 
+        :seconds="player.currentTimerSec" 
+        :is-negative="player.currentTimerSec < 0"
+        :is-pulsating="player.isTimerRunning"
+        class="text-2xl"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import TimerDisplay from './TimerDisplay.vue';
+import DefaultAvatarIcon from './DefaultAvatarIcon.vue';
+
+const props = defineProps({
+  player: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(['tapped']);
+
+const handleTap = () => {
+  if (!props.player.isSkipped) {
+    emit('tapped');
+  }
+};
+
+const itemBgClass = computed(() => {
+  if (props.player.isSkipped) {
+    return 'bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700';
+  }
+  if (props.player.isTimerRunning) {
+    return props.player.currentTimerSec < 0 
+      ? 'bg-red-100 dark:bg-red-900/80 border border-red-300 dark:border-red-700' 
+      : 'bg-green-50 dark:bg-green-800/70 border border-green-200 dark:border-green-700';
+  }
+  return 'bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600';
+});
+</script>
--- a/src/components/TimerDisplay.vue
+++ b/src/components/TimerDisplay.vue
@@ -0,0 +1,27 @@
+<template>
+  <span :class="timerClasses">
+    {{ formattedTime }}
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { formatTime } from '../utils/timeFormatter';
+
+const props = defineProps({
+  seconds: {
+    type: Number,
+    required: true
+  },
+  isPulsating: Boolean, // For active timer
+  isNegative: Boolean, // For negative time text color
+});
+
+const formattedTime = computed(() => formatTime(props.seconds));
+
+const timerClasses = computed(() => ({
+  'font-mono text-5xl md:text-7xl lg:text-8xl font-bold': true,
+  'text-red-500 dark:text-red-400': props.isNegative,
+  'animate-pulseNegative': props.isNegative && props.isPulsating, // Pulsate text if negative and active
+}));
+</script>
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,26 @@
+// src/main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router' // router will be initialized here
+import store from './store'   // store will be initialized here
+import './assets/tailwind.css'
+
+const app = createApp(App)
+
+// Dispatch loadState immediately after store is created and before app is mounted
+// and before router is fully used by the app.
+store.dispatch('loadState').then(() => {
+  // Now that the state is loaded (or attempted to be loaded),
+  // we can safely use the router and mount the app.
+  app.use(router)
+  app.use(store) // Using store here is fine, it's already created.
+  app.mount('#app')
+}).catch(error => {
+  console.error("Failed to load initial state for the store:", error);
+  // Fallback: Mount the app even if state loading fails, guards should handle it.
+  // Or display an error message to the user.
+  // For now, let's still try to mount.
+  app.use(router)
+  app.use(store)
+  app.mount('#app')
+});
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,59 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import SetupView from '../views/SetupView.vue';
+import GameView from '../views/GameView.vue';
+import InfoView from '../views/InfoView.vue';
+import store from '../store';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Setup',
+    component: SetupView,
+    beforeEnter: (to, from, next) => {
+      // Check if we are navigating FROM the Game view.
+      // If so, the user explicitly clicked the Setup button, so allow it.
+      if (from.name === 'Game') {
+        console.log('Router Guard: Allowing navigation from Game to Setup.');
+        next(); // Allow navigation to Setup
+        return; // Stop further processing of this guard
+      }
+
+      // Original logic for initial load or other navigations TO Setup:
+      if (store.state.players && store.state.players.length >= 2) {
+        // If 2 or more players exist (and not coming from Game), redirect to Game.
+        console.log('Router Guard: Players found, redirecting to Game (not coming from Game).');
+        next({ name: 'Game', replace: true });
+      } else {
+        // Otherwise (fewer than 2 players), allow navigation to the Setup view.
+        console.log('Router Guard: Not enough players, proceeding to Setup.');
+        next();
+      }
+    }
+  },
+  {
+    path: '/game',
+    name: 'Game',
+    component: GameView,
+    beforeEnter: (to, from, next) => {
+      // Keep this guard: prevent direct access to /game without enough players
+      if (!store.state.players || store.state.players.length < 2) {
+        console.log('Router Guard: Attempted to access Game without enough players, redirecting to Setup.');
+        next({ name: 'Setup' });
+      } else {
+        next();
+      }
+    }
+  },
+  {
+    path: '/info',
+    name: 'Info',
+    component: InfoView
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+});
+
+export default router;
--- a/src/services/AudioService.js
+++ b/src/services/AudioService.js
@@ -0,0 +1,133 @@
+let audioContext;
+let tickSoundBuffer; // For short tick
+let passTurnSoundBuffer; // For 3s pass turn alert
+let isMutedGlobally = false;
+let continuousTickInterval = null; // For setInterval based continuous ticking
+let passTurnSoundTimeout = null;
+
+function getAudioContext() {
+  if (!audioContext && (window.AudioContext || window.webkitAudioContext)) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  }
+  return audioContext;
+}
+
+function createBeepBuffer(frequency = 440, duration = 0.1, type = 'sine') {
+  const ctx = getAudioContext();
+  if (!ctx) return null;
+  const sampleRate = ctx.sampleRate;
+  const numFrames = duration * sampleRate;
+  const buffer = ctx.createBuffer(1, numFrames, sampleRate);
+  const data = buffer.getChannelData(0);
+  const gain = 0.1; // Reduce gain to make beeps softer
+
+  for (let i = 0; i < numFrames; i++) {
+    // Simple fade out
+    const currentGain = gain * (1 - (i / numFrames)); 
+    if (type === 'square') {
+        data[i] = (Math.sin(2 * Math.PI * frequency * (i / sampleRate)) >= 0 ? 1 : -1) * currentGain;
+    } else { // sine
+        data[i] = Math.sin(2 * Math.PI * frequency * (i / sampleRate)) * currentGain;
+    }
+  }
+  return buffer;
+}
+
+async function initSounds() {
+  const ctx = getAudioContext();
+  if (!ctx) return;
+  // Tick sound (shorter, slightly different pitch)
+  if (!tickSoundBuffer) {
+    // Using a square wave for a more 'digital' tick, short duration
+    tickSoundBuffer = createBeepBuffer(1000, 0.03, 'square'); 
+  }
+  // Pass turn alert sound (3 beeps)
+  if (!passTurnSoundBuffer) {
+    passTurnSoundBuffer = createBeepBuffer(660, 0.08, 'sine'); 
+  }
+}
+initSounds();
+
+function playSoundBuffer(buffer) {
+  if (isMutedGlobally || !buffer || !audioContext || audioContext.state === 'suspended') return;
+  const source = audioContext.createBufferSource();
+  source.buffer = buffer;
+  source.connect(audioContext.destination);
+  source.start();
+}
+
+export const AudioService = {
+  setMuted(muted) {
+    isMutedGlobally = muted;
+    if (muted) {
+      this.stopContinuousTick();
+      this.cancelPassTurnSound();
+    }
+  },
+  
+  // This is the single, short tick sound for "All Timers Running" mode.
+  _playSingleTick() { 
+    playSoundBuffer(tickSoundBuffer);
+  },
+
+  playPassTurnAlert() {
+    if (isMutedGlobally || !audioContext || audioContext.state === 'suspended') return;
+    this.cancelPassTurnSound(); 
+    
+    let count = 0;
+    const playAndSchedule = () => {
+      if (count < 3 && !isMutedGlobally && audioContext.state !== 'suspended') {
+        playSoundBuffer(passTurnSoundBuffer);
+        count++;
+        passTurnSoundTimeout = setTimeout(playAndSchedule, 1000); // Beep every second for 3s
+      } else {
+        passTurnSoundTimeout = null;
+      }
+    };
+    playAndSchedule();
+  },
+
+  cancelPassTurnSound() {
+    if (passTurnSoundTimeout) {
+      clearTimeout(passTurnSoundTimeout);
+      passTurnSoundTimeout = null;
+    }
+  },
+
+  startContinuousTick() {
+    this.stopContinuousTick(); // Clear any existing interval
+    if (isMutedGlobally || !audioContext || audioContext.state === 'suspended') return;
+
+    // Play immediately once, then set interval
+    this._playSingleTick(); 
+    continuousTickInterval = setInterval(() => {
+      if (!isMutedGlobally && audioContext.state !== 'suspended') {
+        this._playSingleTick();
+      } else {
+        this.stopContinuousTick(); // Stop if muted or context suspended during interval
+      }
+    }, 1000); // Tick every second
+  },
+
+  stopContinuousTick() {
+    if (continuousTickInterval) {
+      clearInterval(continuousTickInterval);
+      continuousTickInterval = null;
+    }
+    // Ensure no rogue oscillators are playing.
+    // If an oscillator was ever used directly and not disconnected, it could persist.
+    // The current implementation relies on BufferSource which stops automatically.
+  },
+
+  resumeContext() {
+    const ctx = getAudioContext();
+    if (ctx && ctx.state === 'suspended') {
+      ctx.resume().then(() => {
+        console.log("AudioContext resumed successfully.");
+        initSounds(); // Re-initialize sounds if context was suspended for long
+      }).catch(e => console.error("Error resuming AudioContext:", e));
+    } else if (ctx && !tickSoundBuffer) { // If context was fine but sounds not loaded
+        initSounds();
+    }
+  }
+};
--- a/src/services/CameraService.js
+++ b/src/services/CameraService.js
@@ -0,0 +1,69 @@
+export const CameraService = {
+    async getPhoto() {
+      return new Promise(async (resolve, reject) => {
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+          reject(new Error('Camera API not available.'));
+          return;
+        }
+  
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
+          
+          // Create a modal or an overlay to show the video stream and a capture button
+          const videoElement = document.createElement('video');
+          videoElement.srcObject = stream;
+          videoElement.setAttribute('playsinline', ''); // Required for iOS
+          videoElement.style.cssText = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 70vh; z-index: 1001; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);";
+          
+          const captureButton = document.createElement('button');
+          captureButton.textContent = 'Capture';
+          captureButton.style.cssText = "position: fixed; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 1002; padding: 12px 24px; background-color: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;";
+  
+          const closeButton = document.createElement('button');
+          closeButton.textContent = 'Cancel';
+          closeButton.style.cssText = "position: fixed; top: 10px; right: 10px; z-index: 1002; padding: 8px 12px; background-color: #ef4444; color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer;";
+  
+  
+          const overlay = document.createElement('div');
+          overlay.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1000;";
+          
+          document.body.appendChild(overlay);
+          document.body.appendChild(videoElement);
+          document.body.appendChild(captureButton);
+          document.body.appendChild(closeButton);
+  
+          videoElement.onloadedmetadata = () => {
+            videoElement.play();
+          };
+  
+          const cleanup = () => {
+            stream.getTracks().forEach(track => track.stop());
+            document.body.removeChild(videoElement);
+            document.body.removeChild(captureButton);
+            document.body.removeChild(closeButton);
+            document.body.removeChild(overlay);
+          };
+  
+          captureButton.onclick = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = videoElement.videoWidth;
+            canvas.height = videoElement.videoHeight;
+            const context = canvas.getContext('2d');
+            context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+            const dataUrl = canvas.toDataURL('image/png');
+            cleanup();
+            resolve(dataUrl);
+          };
+  
+          closeButton.onclick = () => {
+            cleanup();
+            reject(new Error('User cancelled photo capture.'));
+          };
+  
+        } catch (err) {
+          console.error("Error accessing camera: ", err);
+          reject(err);
+        }
+      });
+    }
+  };
--- a/src/services/StorageService.js
+++ b/src/services/StorageService.js
@@ -0,0 +1,23 @@
+const STORAGE_KEY = 'nexusTimerState';
+
+export const StorageService = {
+  getState() {
+    const savedState = localStorage.getItem(STORAGE_KEY);
+    if (savedState) {
+      try {
+        return JSON.parse(savedState);
+      } catch (e) {
+        console.error("Error parsing saved state from localStorage", e);
+        localStorage.removeItem(STORAGE_KEY); // Clear corrupted data
+        return null;
+      }
+    }
+    return null;
+  },
+  saveState(state) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  },
+  clearState() {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+};
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,460 @@
+import { createStore } from 'vuex';
+import { StorageService } from '../services/StorageService';
+import { parseTime, formatTime } from '../utils/timeFormatter';
+
+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: DEFAULT_AVATAR_MARKER, // Or a specific avatar path if you have one
+    initialTimerSec: 60 * 60, // 60:00
+    currentTimerSec: 60 * 60,
+    hotkey: '1', // Hotkey '1'
+    isSkipped: false,
+    isTimerRunning: false,
+  },
+  {
+    id: 'predefined-2', // Unique ID for predefined player 2
+    name: 'Player 2',
+    avatar: DEFAULT_AVATAR_MARKER, // Or a specific avatar path
+    initialTimerSec: 60 * 60, // 60:00
+    currentTimerSec: 60 * 60,
+    hotkey: '2', // Hotkey '2'
+    isSkipped: false,
+    isTimerRunning: false,
+  }
+];
+
+const initialState = {
+  players: JSON.parse(JSON.stringify(predefinedPlayers)), // Start with predefined players (deep copy)
+  globalHotkeyStopPause: null,
+  globalHotkeyRunAll: null,
+  currentPlayerIndex: 0,
+  gameMode: 'normal',
+  isMuted: false,
+  theme: 'dark',
+  gameRunning: false,
+};
+
+export default createStore({
+  state: () => { // This function already loads from storage ONCE during store creation
+    const persistedState = StorageService.getState();
+    if (persistedState) {
+      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 = [];
+      }
+
+      playersToUse = playersToUse.map(p => ({
+        ...p,
+        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,
+        hotkey: p.hotkey || null,
+      }));
+      
+      return {
+        ...initialState,
+        ...persistedState,
+        players: playersToUse,
+        gameRunning: false,
+        currentPlayerIndex: persistedState.currentPlayerIndex !== undefined && persistedState.currentPlayerIndex < playersToUse.length ? persistedState.currentPlayerIndex : 0,
+      };
+    }
+    return JSON.parse(JSON.stringify(initialState));
+  },
+  mutations: {
+    SET_PLAYERS(state, players) {
+      state.players = players.map(p => ({
+        ...p,
+        id: p.id || Date.now().toString() + Math.random(),
+        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,
+        isTimerRunning: p.isTimerRunning || false, // Retain running state if explicitly set
+        hotkey: p.hotkey || null,
+      }));
+    },
+    ADD_PLAYER(state, player) {
+      const newPlayer = {
+        id: Date.now().toString() + Math.random(), // More robust unique ID
+        name: player.name || `Player ${state.players.length + 1}`,
+        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 < 99) { 
+        state.players.push(newPlayer);
+      } else {
+        console.warn("Maximum player limit (99) reached."); 
+        alert("Maximum player limit (99) reached."); 
+      }
+    },
+    UPDATE_PLAYER(state, updatedPlayer) {
+      const index = state.players.findIndex(p => p.id === updatedPlayer.id);
+      if (index !== -1) {
+        state.players[index] = { ...state.players[index], ...updatedPlayer };
+      }
+    },
+    DELETE_PLAYER(state, playerId) {
+      state.players = state.players.filter(p => p.id !== playerId);
+      if (state.currentPlayerIndex >= state.players.length && state.players.length > 0) {
+        state.currentPlayerIndex = state.players.length - 1;
+      } else if (state.players.length === 0) {
+        state.currentPlayerIndex = 0;
+      }
+    },
+    REORDER_PLAYERS(state, players) {
+        state.players = players;
+    },
+    SHUFFLE_PLAYERS(state) {
+        for (let i = state.players.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [state.players[i], state.players[j]] = [state.players[j], state.players[i]];
+        }
+    },
+    REVERSE_PLAYERS(state) {
+        state.players.reverse();
+    },
+    SET_CURRENT_PLAYER_INDEX(state, index) {
+      state.currentPlayerIndex = index;
+    },
+    SET_GAME_MODE(state, mode) {
+      state.gameMode = mode;
+    },
+    SET_IS_MUTED(state, muted) {
+      state.isMuted = muted;
+    },
+    TOGGLE_THEME(state) {
+      state.theme = state.theme === 'light' ? 'dark' : 'light';
+    },
+    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) {
+        player.currentTimerSec--;
+        if (player.currentTimerSec < MAX_NEGATIVE_SECONDS) {
+          player.currentTimerSec = MAX_NEGATIVE_SECONDS;
+          player.isSkipped = true; // Auto-skip if max negative time reached
+          player.isTimerRunning = false;
+        }
+      }
+    },
+    RESET_PLAYER_TIMER(state, playerIndex) {
+        if (state.players[playerIndex]) {
+            state.players[playerIndex].currentTimerSec = state.players[playerIndex].initialTimerSec;
+            state.players[playerIndex].isSkipped = false;
+            state.players[playerIndex].isTimerRunning = false;
+        }
+    },
+    RESET_ALL_TIMERS(state) {
+      // When resetting, decide if you want to go back to *only* predefined players
+      // or reset existing players' timers. The current spec "restores all timers to initial values"
+      // implies resetting existing players. If it meant reverting to the initial player set,
+      // this logic would need to change to:
+      // state.players = JSON.parse(JSON.stringify(predefinedPlayers));
+      // For now, sticking to resetting current players' timers:
+      state.players.forEach(player => {
+        player.currentTimerSec = player.initialTimerSec;
+        player.isSkipped = false;
+        player.isTimerRunning = false;
+      });
+      state.currentPlayerIndex = 0;
+      state.gameMode = 'normal';
+      state.gameRunning = false;
+    },
+    START_PLAYER_TIMER(state, playerIndex) {
+        if(state.players[playerIndex] && !state.players[playerIndex].isSkipped) {
+            state.players[playerIndex].isTimerRunning = true;
+            state.gameRunning = true;
+        }
+    },
+    PAUSE_PLAYER_TIMER(state, playerIndex) {
+        if(state.players[playerIndex]) {
+            state.players[playerIndex].isTimerRunning = false;
+        }
+        if (!state.players.some(p => p.isTimerRunning)) {
+            state.gameRunning = false;
+        }
+    },
+    PAUSE_ALL_TIMERS(state) {
+        state.players.forEach(p => p.isTimerRunning = false);
+        state.gameRunning = false;
+    },
+    SET_GAME_RUNNING(state, isRunning) {
+        state.gameRunning = isRunning;
+    },
+  },
+  actions: {
+    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 => ({ 
+            id: p.id,
+            name: p.name,
+            avatar: p.avatar, 
+            initialTimerSec: p.initialTimerSec,
+            currentTimerSec: p.currentTimerSec,
+            hotkey: p.hotkey,
+            isSkipped: p.isSkipped,
+        })),
+        globalHotkeyStopPause: state.globalHotkeyStopPause,
+        globalHotkeyRunAll: state.globalHotkeyRunAll,
+        currentPlayerIndex: state.currentPlayerIndex,
+        gameMode: state.gameMode,
+        isMuted: state.isMuted,
+        theme: state.theme,
+      });
+    },
+    addPlayer({ commit, dispatch }, player) {
+      commit('ADD_PLAYER', player);
+      dispatch('saveState');
+    },
+    updatePlayer({ commit, dispatch }, player) {
+      commit('UPDATE_PLAYER', player);
+      dispatch('saveState');
+    },
+    deletePlayer({ commit, dispatch }, playerId) {
+      commit('DELETE_PLAYER', playerId);
+      dispatch('saveState');
+    },
+    reorderPlayers({commit, dispatch}, players) {
+      commit('REORDER_PLAYERS', players);
+      dispatch('saveState');
+    },
+    shufflePlayers({commit, dispatch}) {
+        commit('SHUFFLE_PLAYERS');
+        dispatch('saveState');
+    },
+    reversePlayers({commit, dispatch}) {
+        commit('REVERSE_PLAYERS');
+        dispatch('saveState');
+    },
+    toggleTheme({ commit, dispatch }) {
+      commit('TOGGLE_THEME');
+      dispatch('saveState');
+    },
+    setGlobalHotkey({ commit, dispatch }, key) {
+      commit('SET_GLOBAL_HOTKEY_STOP_PAUSE', key);
+      dispatch('saveState');
+    },
+    setMuted({ commit, dispatch }, muted) {
+      commit('SET_IS_MUTED', muted);
+      dispatch('saveState');
+    },
+    resetGame({ commit, dispatch }) { // This is for resetting timers during a game session
+        commit('RESET_ALL_TIMERS');
+        dispatch('saveState');
+    },
+    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) {
+          commit('DECREMENT_TIMER', { playerIndex: state.currentPlayerIndex });
+        }
+      } else if (state.gameMode === 'allTimers') {
+        state.players.forEach((player, index) => {
+          if (player.isTimerRunning) {
+            commit('DECREMENT_TIMER', { playerIndex: index });
+          }
+        });
+      }
+    },
+    passTurn({ commit, state, dispatch }) {
+        const numPlayers = state.players.length;
+        if (numPlayers === 0) return;
+
+        const currentIdx = state.currentPlayerIndex;
+        const currentPlayerTimerWasRunning = state.players[currentIdx]?.isTimerRunning;
+
+        commit('PAUSE_PLAYER_TIMER', currentIdx);
+
+        let nextPlayerIndex = (currentIdx + 1) % numPlayers;
+        let skippedCount = 0;
+        while(state.players[nextPlayerIndex]?.isSkipped && skippedCount < numPlayers) {
+            nextPlayerIndex = (nextPlayerIndex + 1) % numPlayers;
+            skippedCount++;
+        }
+
+        if (skippedCount === numPlayers) {
+            commit('PAUSE_ALL_TIMERS');
+            dispatch('saveState');
+            return;
+        }
+        
+        commit('SET_CURRENT_PLAYER_INDEX', nextPlayerIndex);
+
+        if (currentPlayerTimerWasRunning && !state.players[nextPlayerIndex].isSkipped) {
+            commit('START_PLAYER_TIMER', nextPlayerIndex);
+        } else {
+            if (state.players[nextPlayerIndex] && !state.players[nextPlayerIndex].isSkipped) {
+                 commit('PAUSE_PLAYER_TIMER', nextPlayerIndex);
+            }
+        }
+        
+        dispatch('saveState');
+    },
+    toggleCurrentPlayerTimerNormalMode({ commit, state, dispatch }) {
+        const player = state.players[state.currentPlayerIndex];
+        if (!player) return;
+
+        if (player.isTimerRunning) {
+            commit('PAUSE_PLAYER_TIMER', state.currentPlayerIndex);
+        } else if (!player.isSkipped) {
+            commit('START_PLAYER_TIMER', state.currentPlayerIndex);
+        }
+        dispatch('saveState');
+    },
+    togglePlayerTimerAllTimersMode({ commit, state, dispatch }, playerIndex) {
+        const player = state.players[playerIndex];
+        if (!player) return;
+
+        if (player.isTimerRunning) {
+            commit('PAUSE_PLAYER_TIMER', playerIndex);
+        } else if (!player.isSkipped) {
+            commit('START_PLAYER_TIMER', playerIndex);
+        }
+        
+        const anyTimerRunning = state.players.some(p => p.isTimerRunning && !p.isSkipped);
+        if (!anyTimerRunning && state.players.length > 0 && state.gameMode === 'allTimers') {
+            // This auto-revert logic is now in GameView.vue watcher for better control over timing
+        }
+        dispatch('saveState');
+    },
+    globalStopPauseAll({ commit, state, dispatch }) {
+        if (state.gameMode === 'normal') {
+            dispatch('toggleCurrentPlayerTimerNormalMode');
+        } else { 
+            const anyTimerRunning = state.players.some(p => p.isTimerRunning && !p.isSkipped);
+            if (anyTimerRunning) { 
+                commit('PAUSE_ALL_TIMERS');
+            } else { 
+                state.players.forEach((player, index) => {
+                    if (!player.isSkipped) {
+                        commit('START_PLAYER_TIMER', index);
+                    }
+                });
+            }
+        }
+        dispatch('saveState');
+    },
+    switchToAllTimersMode({ commit, state, dispatch }) {
+        commit('SET_GAME_MODE', 'allTimers');
+        let anyStarted = false;
+        state.players.forEach((player, index) => {
+            if (!player.isSkipped) {
+                commit('START_PLAYER_TIMER', index);
+                anyStarted = true;
+            }
+        });
+        if(anyStarted) commit('SET_GAME_RUNNING', true);
+        else commit('SET_GAME_RUNNING', false);
+        dispatch('saveState');
+    },
+    switchToNormalMode({commit, state, dispatch}) {
+        commit('PAUSE_ALL_TIMERS');
+        commit('SET_GAME_MODE', 'normal');
+        // Determine current player for normal mode, respecting skips
+        let currentIdx = state.currentPlayerIndex;
+        let skippedCount = 0;
+        while(state.players[currentIdx]?.isSkipped && skippedCount < state.players.length) {
+            currentIdx = (currentIdx + 1) % state.players.length;
+            skippedCount++;
+        }
+        if (skippedCount < state.players.length) {
+             commit('SET_CURRENT_PLAYER_INDEX', currentIdx);
+             // Timer for this player should remain paused as per PAUSE_ALL_TIMERS
+        } else {
+            // All players skipped, game is effectively paused.
+            commit('SET_GAME_RUNNING', false);
+        }
+        dispatch('saveState');
+    }
+  },
+  getters: {
+    players: state => state.players,
+    currentPlayer: state => state.players[state.currentPlayerIndex],
+    nextPlayer: state => {
+      if (!state.players || state.players.length < 1) return null;
+      let nextIndex = (state.currentPlayerIndex + 1) % state.players.length;
+      let count = 0;
+      while(state.players[nextIndex]?.isSkipped && count < state.players.length) {
+        nextIndex = (nextIndex + 1) % state.players.length;
+        count++;
+      }
+      return state.players[nextIndex];
+    },
+    getPlayerById: (state) => (id) => state.players.find(p => p.id === id),
+    gameMode: state => state.gameMode,
+    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,
+  }
+});
--- a/src/utils/timeFormatter.js
+++ b/src/utils/timeFormatter.js
@@ -0,0 +1,32 @@
+export function formatTime(totalSeconds) {
+    const isNegative = totalSeconds < 0;
+    if (isNegative) {
+      totalSeconds = -totalSeconds;
+    }
+  
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+  
+    const paddedMinutes = String(minutes).padStart(2, '0');
+    const paddedSeconds = String(seconds).padStart(2, '0');
+  
+    return `${isNegative ? '-' : ''}${paddedMinutes}:${paddedSeconds}`;
+  }
+  
+  export function parseTime(timeString) { // MM:SS or -MM:SS
+    if (!timeString || typeof timeString !== 'string') return 0;
+    const isNegative = timeString.startsWith('-');
+    if (isNegative) {
+      timeString = timeString.substring(1);
+    }
+    const parts = timeString.split(':');
+    if (parts.length !== 2) return 0;
+    
+    const minutes = parseInt(parts[0], 10);
+    const seconds = parseInt(parts[1], 10);
+  
+    if (isNaN(minutes) || isNaN(seconds)) return 0;
+    
+    let totalSeconds = (minutes * 60) + seconds;
+    return isNegative ? -totalSeconds : totalSeconds;
+  }
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="flex flex-col h-screen overflow-hidden" :class="{'dark': theme === 'dark'}">
+    <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>
+          Setup
+        </button>
+        <button v-if="gameMode === 'normal'" @click="switchToAllTimersMode" class="btn btn-warning text-sm">
+          Run All Timers
+        </button>
+        <button v-if="gameMode === 'allTimers'" @click="switchToNormalMode" class="btn btn-warning text-sm">
+          Back to Normal Mode
+        </button>
+      </div>
+      
+      <div class="flex items-center space-x-2">
+        <button @click="navigateToInfo" class="btn-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </button>
+        <button @click="toggleMute" class="btn-icon">
+          <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 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 
+          :player="nextPlayer" 
+          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">
+        <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">
+          <PlayerListItem 
+            v-for="(player) in playersInAllTimersView" 
+            :key="player.id" 
+            :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">
+            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">
+            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">
+            No players to display.
+          </p>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import PlayerDisplay from '../components/PlayerDisplay.vue';
+import PlayerListItem from '../components/PlayerListItem.vue';
+import { AudioService } from '../services/AudioService';
+
+const store = useStore();
+const router = useRouter();
+
+const theme = computed(() => store.getters.theme);
+const players = computed(() => store.getters.players);
+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);
+
+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 || players.value.length < 2) {
+    router.push({ name: 'Setup' });
+    return;
+  }
+  
+  timerInterval = setInterval(() => {
+    store.dispatch('tick');
+  }, 1000);
+});
+
+onUnmounted(() => {
+  clearInterval(timerInterval);
+  AudioService.stopContinuousTick();
+  AudioService.cancelPassTurnSound();
+});
+
+watch(gameMode, (newMode) => {
+  AudioService.stopContinuousTick(); 
+  AudioService.cancelPassTurnSound();
+
+  if (newMode === 'allTimers') {
+    if (anyTimerRunningInAllMode.value) {
+      AudioService.startContinuousTick(); 
+    }
+  } else { 
+    if (currentPlayer.value && currentPlayer.value.isTimerRunning) {
+        AudioService.playPassTurnAlert();
+    }
+  }
+});
+
+watch(anyTimerRunningInAllMode, (isRunning) => {
+    if (gameMode.value === 'allTimers') { 
+        if (isRunning) {
+            AudioService.startContinuousTick();
+        } else {
+            AudioService.stopContinuousTick();
+        }
+    }
+});
+
+watch(currentPlayer, (newPlayer, oldPlayer) => {
+    if (gameMode.value === 'normal' && newPlayer && newPlayer.isTimerRunning && oldPlayer && newPlayer.id !== oldPlayer.id) {
+        AudioService.playPassTurnAlert();
+    }
+}, { deep: true }); 
+
+watch(() => currentPlayer.value?.isTimerRunning, (isRunning, wasRunning) => {
+    if (gameMode.value === 'normal' && currentPlayer.value) {
+        if (isRunning === true && wasRunning === false) {
+            AudioService.playPassTurnAlert();
+        } else if (isRunning === false && wasRunning === true) {
+            AudioService.cancelPassTurnSound();
+        }
+    }
+});
+
+
+const navigateToSetup = () => {
+  const isAnyTimerActive = store.getters.gameRunning; 
+  if (isAnyTimerActive) {
+    if (window.confirm('Game is active. Going to Setup will pause all timers. Continue?')) {
+      store.commit('PAUSE_ALL_TIMERS');
+      router.push({ name: 'Setup' });
+    }
+  } else {
+    router.push({ name: 'Setup' });
+  }
+};
+
+const navigateToInfo = () => {
+  if (store.getters.gameRunning) {
+      store.commit('PAUSE_ALL_TIMERS');
+  }
+  router.push({ name: 'Info' });
+};
+
+const toggleMute = () => {
+  store.dispatch('setMuted', !isMuted.value);
+};
+
+const handleCurrentPlayerTap = () => {
+  store.dispatch('toggleCurrentPlayerTimerNormalMode');
+};
+
+const handlePassTurn = () => {
+  if(currentPlayer.value && !currentPlayer.value.isSkipped) {
+      AudioService.cancelPassTurnSound(); 
+      const wasRunning = currentPlayer.value.isTimerRunning; 
+      store.dispatch('passTurn').then(() => {
+        const newCurrentPlayer = store.getters.currentPlayer;
+        if (wasRunning && gameMode.value === 'normal' && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
+           AudioService.playPassTurnAlert(); 
+        }
+      });
+  }
+};
+
+const handlePlayerTapAllTimers = (playerIndex) => {
+  store.dispatch('togglePlayerTimerAllTimersMode', playerIndex);
+};
+
+const switchToAllTimersMode = () => {
+  store.dispatch('switchToAllTimersMode');
+};
+
+const switchToNormalMode = () => {
+  store.dispatch('switchToNormalMode');
+};
+
+watch(anyTimerRunningInAllMode, (anyRunning) => {
+    if (gameMode.value === 'allTimers' && !anyRunning && players.value && players.value.length > 0) {
+        const nonSkippedPlayersExist = players.value.some(p => !p.isSkipped);
+        if (nonSkippedPlayersExist) {
+            setTimeout(() => {
+                if(gameMode.value === 'allTimers' && !store.getters.players.some(p => p.isTimerRunning && !p.isSkipped)){
+                    store.dispatch('switchToNormalMode');
+                }
+            }, 200); 
+        } else {
+            AudioService.stopContinuousTick();
+        }
+    }
+});
+</script>
--- a/src/views/InfoView.vue
+++ b/src/views/InfoView.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex-grow flex flex-col p-4 md:p-6 lg:p-8 items-center dark:bg-gray-800 text-gray-700 dark:text-gray-200">
+    <header class="w-full max-w-2xl mb-6 text-center">
+      <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">About Nexus Timer</h1>
+    </header>
+
+    <main class="w-full max-w-2xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md prose dark:prose-invert">
+      <p>
+        Nexus Timer is a dynamic multi-player timer designed for games, workshops, or any activity where turns pass sequentially in a circular fashion. 
+        It provides a clear visual focus on the current participant and their immediate successor, ensuring everyone stays engaged and aware of who is next.
+      </p>
+      
+      <h2 class="text-xl font-semibold mt-6 mb-2">Key Features:</h2>
+      <ul>
+        <li>Circular player display focusing on Current and Next player.</li>
+        <li>Individual customizable countdown timers (MM:SS) per player.</li>
+        <li>Timers can go into negative time.</li>
+        <li>Two game modes: Normal (one timer runs) and All Timers Running.</li>
+        <li>Player management: Add, edit, delete, reorder players.</li>
+        <li>Photo avatars using device camera or defaults.</li>
+          <li>Configurable hotkeys for passing turns and global pause/resume.</li>
+        <li>Audio feedback for timer events.</li>
+        <li>Light/Dark theme options.</li>
+        <li>Persistent storage of game state.</li>
+      </ul>
+
+      <h2 class="text-xl font-semibold mt-6 mb-2">Source Code</h2>
+      <p>
+          The source code for Nexus Timer is available:
+          <a href="https://gitea.virtonline.eu/2HoursProject/nexus-timer.git" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">
+            https://gitea.virtonline.eu/2HoursProject/nexus-timer.git
+        </a>
+      </p>
+    </main>
+
+    <footer class="mt-8 w-full max-w-2xl text-center">
+      <button @click="goBack" class="btn btn-primary">
+        Back to Game
+      </button>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+const router = useRouter();
+const store = useStore(); // Get store instance
+
+const goBack = () => {
+  // Check if there are players to decide between game and setup
+  if (store.getters.players && store.getters.players.length >= 2) {
+    router.push({ name: 'Game' });
+  } else {
+    router.push({ name: 'Setup' });
+  }
+};
+</script>
--- a/src/views/SetupView.vue
+++ b/src/views/SetupView.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="flex-grow flex flex-col p-4 md:p-6 lg:p-8 items-center dark:bg-gray-800">
+    <header class="w-full max-w-3xl mb-6 text-center">
+      <h1 class="text-4xl font-bold text-blue-600 dark:text-blue-400">Nexus Timer Setup</h1>
+    </header>
+
+    <!-- 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 }})</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>
+      </div>
+      <p v-if="players.length < 2" class="text-sm text-yellow-600 dark:text-yellow-400 mb-3">At least 2 players are required to start.</p>
+      
+      <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">
+             <!-- *** 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.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-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>
+            <button @click="confirmDeletePlayer(player.id)" class="btn-icon text-red-500 hover:text-red-600">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-else class="text-center text-gray-500 dark:text-gray-400 py-4">
+        No players added yet. Add at least 2 to start.
+      </div>
+      <div v-if="players.length > 1" class="flex space-x-2 mt-4">
+        <button @click="shufflePlayers" class="btn btn-secondary text-sm">Shuffle Order</button>
+        <button @click="reversePlayers" class="btn btn-secondary text-sm">Reverse Order</button>
+      </div>
+    </section>
+
+    <!-- Game Settings -->
+    <section class="w-full max-w-3xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
+      <!-- ... 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('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'">
+          {{ theme === 'dark' ? 'On' : 'Off' }}
+        </button>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Mute Audio</span>
+        <button @click="toggleMute" class="px-3 py-1.5 rounded-md text-sm font-medium" :class="isMuted ? 'bg-red-500 text-white' : 'bg-gray-200 text-gray-800'">
+          {{ isMuted ? 'Muted' : 'Unmuted' }}
+        </button>
+      </div>
+    </section>
+    
+    <!-- Actions -->
+    <section class="w-full max-w-3xl mt-4 space-y-3">
+      <button @click="saveAndClose" class="w-full btn btn-primary btn-lg text-xl py-3" :disabled="players.length < 2 && players.length !==0">
+        Save & Close
+      </button>
+      <button @click="resetPlayerTimersConfirm" class="w-full btn btn-warning py-2">
+        Reset Player Timers
+      </button>
+      <button @click="fullResetAppConfirm" class="w-full btn btn-danger py-2">
+        Reset Entire App Data
+      </button>
+    </section>
+
+    <!-- Player Form Modal -->
+    <PlayerForm 
+      v-if="showPlayerModal" 
+      :player="editingPlayer"
+      @close="closePlayerModal"
+      @save="savePlayer"
+    />
+  </div>
+</template>
+
+<script setup>
+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();
+
+const players = computed(() => store.getters.players);
+const theme = computed(() => store.getters.theme);
+const isMuted = computed(() => store.getters.isMuted);
+
+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 < 99) { 
+    editingPlayer.value = null;
+    showPlayerModal.value = true;
+  } else {
+     alert("Maximum player limit (99) reached."); 
+  }
+};
+
+const openEditPlayerModal = (player) => {
+  editingPlayer.value = player;
+  showPlayerModal.value = true;
+};
+
+const closePlayerModal = () => {
+  showPlayerModal.value = false;
+  editingPlayer.value = null;
+};
+
+const savePlayer = (playerData) => {
+  if (playerData.id) {
+    store.dispatch('updatePlayer', playerData);
+  } else {
+    store.dispatch('addPlayer', {
+      name: playerData.name,
+      avatar: playerData.avatar,
+      initialTimerSec: playerData.initialTimerSec,
+      currentTimerSec: playerData.currentTimerSec,
+      hotkey: playerData.hotkey
+    });
+  }
+  closePlayerModal();
+};
+
+const confirmDeletePlayer = (playerId) => {
+  if (window.confirm('Are you sure you want to delete this player?')) {
+    store.dispatch('deletePlayer', playerId);
+  }
+};
+
+const shufflePlayers = () => {
+    store.dispatch('shufflePlayers');
+};
+
+const reversePlayers = () => {
+    store.dispatch('reversePlayers');
+};
+
+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 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 = () => {
+  store.dispatch('toggleTheme');
+};
+
+const toggleMute = () => {
+  store.dispatch('setMuted', !isMuted.value);
+};
+
+const saveAndClose = () => {
+  store.dispatch('saveState');
+  if (players.value.length >= 2) {
+    if (store.state.currentPlayerIndex >= players.value.length || store.state.currentPlayerIndex < 0) {
+        store.commit('SET_CURRENT_PLAYER_INDEX', 0);
+    }
+    store.commit('PAUSE_ALL_TIMERS'); 
+    store.commit('SET_GAME_MODE', 'normal');
+    router.push({ name: 'Game' });
+  } else if (players.value.length === 0) {
+    alert('Add at least 2 players to start a game.');
+  } else {
+     alert('At least 2 players are required to start a game.');
+  }
+};
+
+const resetPlayerTimersConfirm = () => {
+    if (window.confirm('Are you sure you want to reset all current players\' timers to their initial values? This will not delete players.')) {
+        store.dispatch('resetGame');
+    }
+};
+
+const fullResetAppConfirm = () => {
+    if (window.confirm('Are you sure you want to reset all app data? This includes all players, settings, and timer states. The app will revert to its default state with 2 predefined players.')) {
+        store.dispatch('fullResetApp');
+    }
+};
+</script>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+      "./index.html",
+      "./src/**/*.{vue,js,ts,jsx,tsx}",
+    ],
+    darkMode: 'class', // or 'media' or 'class'
+    theme: {
+      extend: {
+        animation: {
+          pulsePositive: 'pulsePositive 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+          pulseNegative: 'pulseNegative 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        },
+        keyframes: {
+          pulsePositive: {
+            '0%, 100%': { opacity: '1' },
+            '50%': { opacity: '.7' },
+          },
+          pulseNegative: { // For text, maybe a color change or slight scale
+            '0%, 100%': { opacity: '1', transform: 'scale(1)' },
+            '50%': { opacity: '.8', transform: 'scale(1.02)' },
+          }
+        }
+      },
+    },
+    plugins: [
+      require('@tailwindcss/typography'), // Add this line
+    ],
+  }
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 8080
+  }
+})