PWA fixed

added systemd service howto traefik nginix set_real_ip_from improved readme visuals fixed on mobile labels removed updated readme fixed visuals overlay for the hotkey disable screen lock clean up git precommit hooks clean up clean up update check for update feature added build-time information fixed date clean up added hook script fix fix fix hooks fixed webhook setup players stay in run all timers mode mqtt mqtt allways connected mqtt messages work capturing mqtt in edit player mqtt in Setup updated readme state of the mqtt Global Pass turn offline mode docs: update documentation to reflect current codebase and MQTT features - Update README.md with global MQTT commands - Enhance architecture.md with comprehensive data model and MQTT state - Update development.md with project structure and workflow - Remove redundant script listings - Fix formatting and organization rebase
2025-05-08 15:36:17 +02:00
parent d741efa62d
commit ca3ba141a7
51 changed files with 7140 additions and 2 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,40 @@
+# 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)
+docker
+systemd
+
+# 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,146 @@
+# docker labels
+labels
+# 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,172 @@
-# 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. It focuses on the current participant and their immediate successor, ensuring everyone stays engaged and aware of who's next.
+
+## Table of Contents
+
+1.  [Core Concept](#core-concept)
+2.  [Target Audience](#target-audience)
+3.  [Key Features at a Glance](#key-features-at-a-glance)
+4.  [Getting Started (User Guide)](#getting-started-user-guide)
+5.  [Remote Control Options](#remote-control-options)
+6.  [Development, Deployment, and Architecture](#development-deployment-and-architecture)
+
+## 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, perfect for board games, RPGs, 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.
+
+## Key Features at a Glance
+
+*   **Dynamic Player Display:** Clear focus on Current & Next player (Normal Mode) or a list of active timers (All Timers Mode).
+*   **Individual Timers:** Customizable (MM:SS), supports negative time, auto-skips players at max negative time.
+*   **Two Game Modes:**
+    *   **Normal Mode:** Only the current player's timer runs.
+    *   **All Timers Mode:** All active players' timers run simultaneously.
+*   **Flexible Player Setup:** Add, edit, delete, and reorder up to 99 players. Use camera for avatars or defaults.
+*   **Intuitive Controls:** Swipe up to pass turns, tap to pause/resume.
+*   **Customizable Triggers:**
+    *   **Keyboard Hotkeys:** Assign unique keys for player turns and global actions (Stop/Pause All, Run All Timers). *This will allow the connected Bluetooth HID device to act like a remote buttons. See [HID Smart Buttons](docs/remote-control.md#hid-smart-buttons)*
+    *   **MQTT Remote Triggers:** Assign unique characters for remote activation of player turns and global actions via an MQTT broker. *This will allow the players use their own smartphone to remote control their timers. See [Android Shortcut Setup](docs/remote-control.md#android-shortcut-setup)*
+*   **PWA Ready:** Installable on desktop and mobile, offline capable, with update notifications and screen wake lock.
+*   **Audio & Visual Cues:** Ticking sounds, alerts, light/dark themes, and clear timer states.
+*   **Persistent Settings:** Your setup and game state are saved locally.
+
+## Getting Started (User Guide)
+
+This guide walks you through setting up and using Nexus Timer.
+
+### 1. Installation (PWA)
+
+Nexus Timer is a Progressive Web App (PWA), meaning you can install it on your device for a native-like experience.
+*   **Mobile:** Open Nexus Timer in a compatible browser (e.g., Chrome on Android, Safari on iOS). Look for an "Add to Home Screen" or "Install App" option in the browser menu.
+*   **Desktop:** In browsers like Chrome or Edge, look for an install icon in the address bar or an "Install App" option in the browser menu.
+
+### 2. Initial Setup (First Use)
+
+When you first open Nexus Timer (or after a full reset), it starts with two predefined players to get you going quickly.
+*   If you have at least two players defined (either predefined or previously saved), the app will **automatically start in Normal Mode**.
+*   If no players are defined, you'll be taken to the **Setup Screen**.
+
+### 3. The Setup Screen
+
+This is where you configure your game:
+
+*   **Players Section:**
+    *   **View Players:** Shows the current number of players (e.g., "Players (3)").
+    *   **Add Player:** Click to add a new player (up to 99). You can set their:
+        *   **Name**
+        *   **Avatar:** Use your device camera or a default icon.
+        *   **Remaining Time:** Set their starting timer (MM:SS). This can also be negative (e.g., -02:30).
+        *   **"Pass Turn / My Pause" Hotkey:** Click the display area (shows "-") and press a single keyboard key. This key will be used by this player to pass their turn (Normal Mode) or pause their own timer (All Timers Mode).
+        *   **"Pass Turn / My Pause" MQTT Character:** Click the display area (shows "-") and enter a single character. This character, when received via MQTT, will trigger the same action as the player's hotkey. (See [Remote Control Options](#remote-control-options)).
+    *   **Edit Player:** Click the pencil icon next to a player to modify their details.
+    *   **Delete Player:** Click the trash icon to remove a player.
+    *   **Reorder Players:** Use the up/down arrow icons to change player turn order.
+    *   **Shuffle/Reverse Order:** Buttons to quickly randomize or reverse the player list.
+*   **MQTT Broker (for Remote Control):**
+    *   **URL:** Enter the WebSocket URL of your MQTT broker (e.g., `ws://your-broker-ip:9001`).
+    *   **Connect/Disconnect:** Toggle the connection to your broker. The status (Connected, Disconnected, Error) will be displayed.
+*   **Global Triggers (Hotkeys & MQTT):**
+    *   Assign a unique keyboard **Hotkey** and/or a unique **MQTT Character** for:
+        *   **Global "Stop/Pause All":** Pauses the current player's timer (Normal Mode) or all running timers (All Timers Mode). If all are paused in All Timers Mode, this resumes them.
+        *   **Global "Run All Timers":** Switches from Normal Mode to All Timers Mode and starts all active player timers.
+        *   **Global "Pass Turn":** Passes the turn to the next player (works in both modes).
+    *   Click the display area (shows "-") next to "Hotkey" or "MQTT" to set the trigger.
+
+*   **Other Settings:**
+    *   **Dark Mode:** Toggle between light and dark themes.
+    *   **Mute Audio:** Turn all app sounds on or off.
+*   **Action Buttons:**
+    *   **Save & Close:** Saves your current setup and starts the game (if at least 2 players are configured), taking you to the Game View.
+    *   **Reset Player Timers:** Resets all current players' timers back to their initially set values and pauses the game. Player list and other settings remain.
+    *   **Reset Entire App Data:** Clears *all* data (players, settings, timer states) and resets the app to its default state (with 2 predefined players).
+
+### 4. Game View: Playing the Game
+
+#### Normal Mode (Default)
+
+*   **Display:** Shows the **Current Player** (top half) and **Next Player** (bottom half).
+*   **Timer:** Only the Current Player's timer runs.
+    *   Timers count down. If they reach 00:00, they continue into **negative time** (e.g., -00:01, -00:02...).
+    *   If a player reaches the maximum negative time (default -59:59), they are **skipped** automatically until their timer is edited or reset. Skipped players are visually distinct.
+*   **Passing the Turn:**
+    1.  **Swipe Up** on the Next Player's area (bottom half).
+    2.  Or, the Current Player presses their assigned "Pass Turn / My Pause" **Hotkey** or sends their **MQTT Character**.
+    *   *Behavior:* The current player's timer pauses, the next non-skipped player becomes "Current," and their timer starts.
+    *   *Sound:* A 3-second ticking sound alerts players when a new turn starts.
+*   **Pausing/Resuming the Current Player's Timer (without passing):**
+    1.  **Tap** on the Current Player's area (top half).
+    2.  Or, use the "Global Stop/Pause All" **Hotkey** or **MQTT Character**.
+    *   *Behavior:* If the current player's timer was paused when the turn was passed to them, it will remain paused. They need to tap their area or use a global resume trigger to start it.
+*   **Switching to All Timers Mode:** Click the "Run All Timers" button in the header.
+
+#### All Timers Mode
+
+*   **Display:** Shows a list of all non-skipped players with their timers.
+*   **Timers:** All active (non-skipped) players' timers run simultaneously.
+    *   A continuous ticking sound plays while any timer is active in this mode.
+*   **Entering this Mode:**
+    *   Click "Run All Timers" in the Game View header (when in Normal Mode).
+    *   Or, use the "Global Run All Timers" **Hotkey** or **MQTT Character**.
+    *   All non-skipped players' timers will start.
+*   **Pausing/Resuming Individual Timers:**
+    *   **Tap** on a player in the list to pause/resume their specific timer.
+    *   A player can press their own "Pass Turn / My Pause" **Hotkey** or send their **MQTT Character** to pause their *own* timer.
+*   **Visuals:**
+    *   Players with running timers are clearly indicated (e.g., green/red border, pulsing background).
+    *   Players with paused timers are visually distinct (e.g., dimmer, yellowish border) but remain in the list.
+*   **Global Pause/Resume:**
+    *   The "Global Stop/Pause All" **Hotkey** or **MQTT Character** will:
+        *   Pause all currently running timers if any are active.
+        *   Resume all previously running (and still active, non-skipped) timers if all were paused.
+*   **Reverting to Normal Mode:**
+    *   Click "Back to Normal Mode" in the Game View header.
+    *   Automatically reverts if all player timers in this mode are paused (and at least one non-skipped player exists).
+    *   All timers will be paused when switching back to Normal Mode. The player who was "Current" before switching to All Timers mode (or the first player if starting fresh) will be the new Current Player.
+
+### 5. Info Screen
+
+*   Accessible via the "Info" icon (ℹ️) in the Game View header.
+*   Displays "About" information, key features, and the app's build time.
+*   Includes a "Check for Update" button to manually trigger a PWA update check.
+*   Provides a link to the source code.
+
+## Remote Control Options
+
+Nexus Timer supports remote control via physical HID buttons or MQTT messages.
+For detailed setup instructions, please see the [Remote Control Options Guide](docs/remote-control.md).
+
+## Development, Deployment, and Architecture
+
+### Technology Stack
+
+Nexus Timer is built using modern web technologies:
+
+- **Framework:** Vue.js 3 with Composition API
+- **State Management:** Vuex 4
+- **Routing:** Vue Router 4
+- **Styling:** Tailwind CSS with Typography plugin
+- **Build Tool:** Vite
+- **Real-time Communication:** MQTT (via mqtt.js)
+
+### Build and Development
+
+The project uses Vite as its build tool, providing fast hot module replacement (HMR) during development.
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+```
+
+For Developer Setup, see [Developer Setup Guide](docs/development.md).
+
+For Deployment Setup, see [Deployment Setup Guide](docs/deployment.md).
+
+For Architecture Docs, see [Architecture](docs/architecture.md).
--- a/docker/traefik.labels
+++ b/docker/traefik.labels
@@ -0,0 +1,8 @@
+traefik.enable=true
+traefik.docker.network=traefik
+traefik.http.routers.virt-nexus-timer.rule=Host("nexus-timer.virtonline.eu")
+traefik.http.routers.virt-nexus-timer.service=virt-nexus-timer
+traefik.http.routers.virt-nexus-timer.tls=true
+traefik.http.routers.virt-nexus-timer.tls.certResolver=default
+traefik.http.routers.virt-nexus-timer.entrypoints=web-secure
+traefik.http.services.virt-nexus-timer.loadbalancer.server.port=80
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -0,0 +1,124 @@
+## Data Model
+
+The application maintains a comprehensive data model for managing game state:
+
+```typescript
+interface Player {
+  id: string;                    // Unique identifier for the player
+  name: string;                  // Player's name
+  avatar: string | null;         // Player's avatar (can be null for default)
+  initialTimerSec: number;       // Initial timer value in seconds
+  currentTimerSec: number;       // Current timer value in seconds
+  hotkey: string | null;         // Keyboard hotkey for player control
+  mqttChar: string | null;       // MQTT character for player control
+  isSkipped: boolean;           // Whether the player is skipped
+  isTimerRunning: boolean;       // Whether the player's timer is running
+  isCurrent: boolean;           // Whether this is the current player
+  isNext: boolean;              // Whether this is the next player
+}
+
+interface GameState {
+  players: Player[];            // Array of all players
+  currentPlayerIndex: number;   // Index of the current player
+  gameMode: 'normal' | 'all-timers'; // Current game mode
+  gameRunning: boolean;         // Whether the game is currently running
+  isMuted: boolean;            // Whether audio is muted
+  theme: 'light' | 'dark';      // Current theme
+  mqttBrokerUrl: string;        // MQTT broker connection URL
+  mqttConnectDesired: boolean;  // Whether MQTT connection is desired
+  mqttConnected: boolean;       // Current MQTT connection status
+  mqttReconnectAttempts: number; // Number of reconnection attempts
+  mqttError: string | null;     // Current MQTT error state
+  
+  // Global Hotkey Controls
+  globalHotkeyStopPause: string | null; // Hotkey for global stop/pause
+  globalHotkeyRunAll: string | null;    // Hotkey for run all timers
+  globalHotkeyPassTurn: string | null;  // Hotkey for global pass turn
+  
+  // Global MQTT Controls
+  globalMqttStopPause: string | null;   // MQTT character for global stop/pause
+  globalMqttRunAll: string | null;      // MQTT character for run all timers
+  globalMqttPassTurn: string | null;    // MQTT character for global pass turn
+}
+```
+
+## Build-time Information & Service Worker Versioning
+
+The application incorporates build-time information and a mechanism for service worker updates:
+
+1. **Version Management**
+   - Build timestamp
+   - Git commit hash
+   - Environment variables
+
+2. **Service Worker**
+   - Automatic updates
+   - Cache management
+   - Offline-first approach
+   - Update notifications
+
+3. **Build Process**
+   - Environment-specific configurations
+   - Asset optimization
+   - Code splitting
+   - Tree-shaking
+
+This architecture ensures a maintainable, scalable, and performant application that meets the requirements of a multi-player timer system with remote control capabilities.
+*   **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.
+
+## 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.
+*   **MQTT.js** for MQTT communication
+*   **Web Audio API:** For audio feedback (ticking sounds, alerts).
+*   **Browser API:** For capturing Players' photo.
+*   **Screen Wake Lock API:** For preventing of the screen lock in a PWA.
+*   **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:**  Vith Vite (Vue.js)
+*   **Tailwind CSS:** Utility-first CSS framework for rapid UI development.
+
+## Data Model (Conceptual for Setup)
+```json
+{
+  "players": [
+    {
+      "id": "1", "name": "Alice", "avatar": "image_data_or_default",
+      "initialTimerSec": 3600, "currentTimerSec": 3600,
+      "hotkey": "a", "mqttChar": "x", "isSkipped": false
+    }
+  ],
+  "globalHotkeyStopPause": "s",
+  "globalMqttStopPause": "p",
+  "globalHotkeyRunAll": "r",
+  "globalMqttRunAll": "t",
+  "globalHotkeyPassTurn": "n",
+  "globalMqttPassTurn": "m",
+  "mqttBrokerUrl": "ws://localhost:9001",
+  "mqttConnectDesired": true,
+  "currentPlayerIndex": 0,
+  "gameMode": "normal",
+  "isMuted": false,
+  "theme": "light"
+}
+```
+
+## Build-time Information & Service Worker Versioning
+The application incorporates build-time information and a mechanism for service worker updates:
+
+1.  **Build Timestamp:**
+    *   The build date and time are automatically injected into the application during the Vite build process.
+    *   This is configured in `vite.config.js` using Vite's `define` feature, making `import.meta.env.VITE_APP_BUILD_TIME` available in the Vue components.
+    *   The timestamp (formatted for the `sk-SK` locale) is displayed on the "About" screen (`src/views/InfoView.vue`).
+
+2.  **Service Worker Cache Versioning:**
+    *   The `CACHE_VERSION` constant within the service worker (`src/sw.js`) is also dynamically generated during the Vite build.
+    *   `vite.config.js` uses the `define` feature to replace a placeholder (`__APP_CACHE_VERSION__`) in `src/sw.js` with a unique version string. This string typically incorporates the application's version from `package.json` and a build timestamp (`Date.now()`) to ensure uniqueness.
+    *   The `src/sw.js` file is configured as a separate Rollup entry point in `vite.config.js` so that Vite processes it and performs this replacement, outputting the final `service-worker.js` to the `dist` directory root.
+    *   When a new version of the app is deployed with a changed `service-worker.js` (due to this new `CACHE_VERSION`), the browser detects the difference. The updated service worker installs, and upon activation, it clears out old caches associated with previous versions. This mechanism is key to how the PWA updates and provides users with the latest assets. The "Check for Update" feature on the "About" screen manually triggers the browser to check for a new `service-worker.js` file.
--- a/docs/deployment.md
+++ b/docs/deployment.md
@@ -0,0 +1,169 @@
+# Deployment Guide: Nexus Timer
+
+This guide outlines the steps to deploy and manage the Nexus Timer application on a server using Docker, Traefik (as a reverse proxy), and systemd, with an optional automated deployment via Gitea webhooks.
+
+## Table of Contents
+1.  [Initial Server Setup](#initial-server-setup)
+2.  [Exposing the App Behind Traefik](#exposing-the-app-behind-traefik-reverse-proxy)
+3.  [Automating Updates with Webhooks (Gitea)](#automating-updates-with-webhooks-gitea)
+4.  [Manual Updates (Fallback)](#manual-updates-fallback)
+5.  [Troubleshooting & Logs](#troubleshooting--logs)
+
+## Initial Server Setup
+
+### On the Server
+Navigate to your preferred service directory on the server (e.g., `/virt`).
+```bash
+cd /virt
+```
+Clone the repository (only the latest commit for faster cloning).
+```bash
+git clone --depth 1 https://gitea.virtonline.eu/2HoursProject/nexus-timer.git
+cd nexus-timer
+```
+If you will run the container on the Docker network `traefik` (or any other pre-existing network), find its IP subnet to allow Nginx inside the container to correctly identify the real client IP.
+```bash
+docker network inspect traefik --format '{{(index .IPAM.Config 0).Subnet}}'
+```
+You'll get an output like `172.22.0.0/16`.
+
+Set this subnet in the `nginx.conf` file within your cloned repository before building the image. For example:
+```bash
+set_real_ip_from 172.22.0.0/16;
+```
+Build the Docker image for the application.
+```bash
+docker build -t virt-nexus-timer .
+```
+## Exposing the App Behind Traefik (Reverse Proxy)
+This setup assumes you have Traefik running and configured to watch for Docker labels.
+
+### Review the provided docker labels and systemd service file
+
+The `docker/traefik.labels` file contains Docker labels that Traefik uses for routing and HTTPS. Review and adjust them if necessary.
+Copy the example label file to its destination (one level up, to be read by systemd).
+```bash
+cp docker/traefik.labels labels
+```
+View the example systemd service definition to understand how the Docker container will be managed.
+```bash
+cat systemd/virt-nexus-timer.service
+```
+### Create the systemd service  
+Use `systemctl edit` to create or overwrite the service file. This is the recommended way to manage custom systemd units.
+```bash
+sudo systemctl edit --force --full virt-nexus-timer.service
+```
+The editor will open. Paste the content from your `systemd/virt-nexus-timer.service` file into the editor, then save and exit (e.g., Ctrl+X, then Y, then Enter in nano).
+
+Enable the service to start on system boot and start it immediately.
+```bash
+sudo systemctl enable --now virt-nexus-timer.service
+```
+Check the service status to ensure it's running correctly.
+```bash
+systemctl status virt-nexus-timer.service
+```
+Look for "active (running)".
+
+### Test the web application
+Verify that the application is accessible via HTTPS through Traefik:
+```bash
+curl https://nexus-timer.virtonline.eu
+```
+Or open it in your browser:
+[https://nexus-timer.virtonline.eu](https://nexus-timer.virtonline.eu)
+
+## Automating Updates with Webhooks (Gitea)
+Instead of manually pulling, building, and restarting on the server, you can automate this process using a webhook. Gitea will notify a webhook service running on your server, which will then execute a deployment script.
+
+Install the `webhook` service
+```bash
+sudo install webhook
+```
+Allow your Gitea instance to reach the webhook service on your server (e.g., `10.0.0.1:9000`). Ensure Gitea's `ALLOWED_HOST_LIST` in its `app.ini` includes this IP.
+### The Redeployment Script
+The `webhook` service will execute the script `hooks/redeploy.sh`. If webhook runs as a non-root user (recommended), that user will need passwordless sudo permission to restart the `virt-nexus-timer.service`.
+You can grant this by editing the sudoers file:
+```bash
+sudo visudo
+```
+ and adding a line like:
+```bash
+webhooksvc ALL=(ALL) NOPASSWD: /usr/bin/systemctl restart virt-nexus-timer.service
+```
+Replace `webhooksvc` with the actual user webhook runs as. If webhook runs as root, this is not necessary but less secure overall.
+### Configure the `webhook` Service
+Create or edit the main webhook configuration file, typically at `/etc/webhook.conf`. Add the JSON object from `hooks/webhook.conf` to the array in the file (or create the file if it's new).  
+**Note:** Replace `YOUR_VERY_STRONG_SECRET_TOKEN_HERE_REPLACE_ME` with a strong, unique secret.
+### Set Up webhook as a Systemd Service
+Use `systemctl edit` to create or overwrite the service file. This is the recommended way to manage custom systemd units.
+```bash
+sudo systemctl edit --force --full webhook.service
+```
+The editor will open. Paste the content from your `systemd/webhook.service` file into the editor, then save and exit (e.g., Ctrl+X, then Y, then Enter in nano).
+
+Enable, and start the webhook service:
+```bash
+sudo systemctl enable --now webhook.service
+sudo systemctl status webhook.service
+```
+### Configure Webhook in Gitea
+1. Navigate to your Gitea repository: `https://gitea.virtonline.eu/2HoursProject/nexus-timer`
+2. Go to `Settings -> Webhooks`.
+3. Click Add Webhook and choose `Gitea`.
+4. **Target URL**: `http://10.0.0.1:9000/hooks/redeploy-nexus-timer`  
+*(The redeploy-nexus-timer part must match the id in your /etc/webhook.conf)*
+5. **HTTP Method**: POST
+6. **POST Content Type**: application/json
+7. **Secret**: Enter the exact same strong secret token you used in `/etc/webhook.conf` (e.g., `YOUR_VERY_STRONG_SECRET_TOKEN_HERE_REPLACE_ME`).
+8. **Trigger On**:
+Select `Push Events`.
+You can further refine this to specific branches if your `webhook.conf` doesn't already filter by branch (though redundant filtering is fine).
+9. Ensure `Enable this webhook` is checked.
+10. Click `Add Webhook`.
+### Test the Webhook
+* In Gitea, on the Webhooks settings page for the webhook you just created, click `Test Delivery`.
+* Check the Gitea UI for the response. It should show a `200 OK` and include the output from your `redeploy.sh` script.
+* Push a small change to your `main` (or configured) branch to trigger a real deployment.
+### Firewall Considerations
+If your server has a firewall (e.g., `ufw`), ensure that port `9000` (or whichever port you configured for `webhook`) is allowed for incoming connections from your Gitea server's IP address or network.
+
+Example for `ufw` allowing any connection to `10.0.0.1:9000` (restrict source IP if possible):
+```bash
+sudo ufw allow to 10.0.0.1 port 9000 proto tcp comment 'Gitea Webhook'
+```
+If Gitea is external, use its specific source IP instead of 'any' for better security.
+```bash 
+sudo ufw allow from <GITEA_SERVER_IP> to 10.0.0.1 port 9000 proto tcp comment 'Gitea Webhook'
+```
+Reload `ufw` if changes are made:
+```bash
+sudo ufw reload
+```
+
+## Manual Updates (Fallback)
+Navigate to the application directory on your server.
+```bash
+cd /virt/nexus-timer
+```
+Pull the latest changes from the repository, rebuild the Docker image, and restart the systemd service.
+```bash
+git pull && docker build -t virt-nexus-timer . && sudo systemctl restart virt-nexus-timer.service
+```
+The previously installed Progressive Web App (PWA) should update automatically upon next launch or offer an upgrade prompt.
+
+## Troubleshooting & Logs
+View real-time logs for the application service:
+```bash
+journalctl -fu virt-nexus-timer.service
+```
+View real-time logs for the `webhook` service:
+```bash
+journalctl -fu webhook.service
+```
+Check the custom log file for the redeployment script (if configured):
+```bash
+tail -f /var/log/webhook-redeploy-nexus-timer.log
+```
+Check Gitea's webhook delivery logs for request/response details and errors.
--- a/docs/development.md
+++ b/docs/development.md
@@ -0,0 +1,71 @@
+# Table of Contents
+1. [Developer Setup Guide](#developer-setup-guide)
+2. [Modify the app](#modify-the-app)
+3. [Test the PWA locally](#test-the-pwa-locally)
+4. [Commit & Push](#commit--push)
+
+## Developer Setup Guide
+
+### Project Structure
+
+The project follows a Vue.js 3 architecture with the following key directories:
+
+```
+src/
+├── assets/          # Static assets
+├── components/      # Reusable Vue components
+├── services/        # Business logic and API services
+├── store/           # Vuex 4 state management
+├── utils/           # Utility functions
+├── views/           # Page-level components
+├── router/          # Vue Router configuration
+└── App.vue          # Main application component
+```
+
+## Prerequisites
+
+- Node.js (LTS version recommended)
+- npm (comes with Node.js)
+
+## Installation
+
+```bash
+npm install
+```
+
+## Development Server
+
+```bash
+npm run dev
+```
+
+This will start the development server with hot module replacement. The application is built using Vite, which provides:
+
+- Fast cold start
+- Instant HMR
+- Optimized build process
+- Modern ES module support
+
+## Development Workflow
+
+1. **State Management**: Use Vuex 4 for state management. All state should be handled through the store in `src/store/`.
+2. **Components**: Create reusable components in `src/components/`. Use Vue 3 Composition API for component logic.
+3. **Routing**: Define routes in `src/router/index.js` using Vue Router 4.
+4. **Styling**: Use Tailwind CSS for styling. Additional styles can be added in `src/assets/styles/`.
+5. **Services**: Place business logic and external API calls in `src/services/`.
+6. **Utils**: Common utility functions should be placed in `src/utils/`.
+
+### Modify the app
+Make code changes...
+
+### Test the PWA locally
+Open it in your browser:
+[http://localhost:8080/](http://localhost:8080/)
+
+### Commit & Push
+Stage changes, commit and push
+```bash
+git add .
+git commit -m 'My cool feature'
+git push
+```
--- a/docs/remote-control.md
+++ b/docs/remote-control.md
@@ -0,0 +1,78 @@
+# Remote Control Options
+
+## Table of Contents
+1. [HID Smart Buttons](#hid-smart-buttons)
+2. [MQTT Remote Control](#mqtt-remote-control)
+    - [Mosquitto Installation Guide](#mosquitto-installation-guide)
+    - [Android Shortcut Setup](#android-shortcut-setup)
+    - [Nexus Timer Setup](#nexus-timer-setup)
+
+## HID Smart Buttons
+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.
+    *   **Player 3's Button:** Single Click: Emulates a key press (e.g., 'c'). Configure as Player 3's "Pass Turn / My Pause" hotkey.
+    *   **If Player 3 is Game Admin:**
+        *   **Player 3's Button:** Long Press: Emulates a key press (e.g., 's'). Configure as the "Global Stop/Pause All" hotkey in the app.
+        *   **Player 3's Button:** Double Click: Emulates a key press (e.g., 'x'). Configure as the "Global Run All Timers" hotkey in the app.
+
+## MQTT Remote Control
+Players can use their smartphones to send commands to Nexus Timer via MQTT. This requires an MQTT broker (like Mosquitto) on the same network.
+
+### Mosquitto Installation Guide
+
+**On Android (using Termux):**
+
+1. **Install Termux** from the Play Store and run.
+2. **Update packages and install Mosquitto in Termux:**
+    ```bash
+    pkg update && pkg upgrade
+    pkg install mosquitto
+    ```
+3. **Configure the MQTT Broker:**
+    ```bash
+    nano ~/.termux/etc/mosquitto/mosquitto.conf
+    ```
+    Add the following configuration, then save and exit:
+    ```
+    listener 1883 0.0.0.0
+    protocol mqtt
+
+    listener 8080 0.0.0.0
+    protocol websockets
+
+    allow_anonymous true
+    ```
+4. **Run Mosquitto with the configuration:**
+    ```bash
+    mosquitto -c ~/.termux/etc/mosquitto/mosquitto.conf
+    ```
+
+*   **MQTT Broker:** Needs to be accessible on the local network and configured with a WebSocket listener (e.g., `ws://<broker_ip>:<ws_port>`). Nexus Timer defaults to `ws://localhost:9001`.
+
+### Android Shortcut Setup
+*   Install the "HTTP Shortcuts" app from the Play Store.
+*   Create a new shortcut.
+*   **Shortcut Type:** Choose "Execute Script" or a type that allows MQTT publishing (some versions might have direct MQTT support, or you can use Termux with `mosquitto_pub` called by the script).
+*   **If HTTP Shortcuts has direct MQTT publish action:**
+    *   Configure Broker URL (e.g., `tcp://<BROKER_IP>:<TCP_PORT>`).
+    *   Set Topic to: `game`
+    *   Set Payload to: The single character (e.g., `a`).
+    *   Set QoS, Retain as needed (usually 0 and false are fine).
+*   **If using scripting with `mosquitto_pub` (via Termux):**
+    *   Install Termux and `mosquitto-clients` package (`pkg install mosquitto`).
+    *   In HTTP Shortcuts, create a shortcut that executes a script.
+    *   The script would be something like: `mosquitto_pub -h <BROKER_IP> -p <TCP_PORT> -t game -m "X"`
+        *   Replace `<BROKER_IP>` with your Mosquitto broker's IP.
+        *   Replace `<TCP_PORT>` with Mosquitto's TCP port (e.g., 1883). Note: `mosquitto_pub` uses TCP, while the PWA uses WebSockets to connect to the *same* broker.
+        *   `-t game`: The topic Nexus Timer listens on.
+        *   `-m "X"`: The single character message (e.g., "a", "b", "s"). This "X" should match the MQTT char configured in Nexus Timer for the desired action.
+*   **Customize Shortcut:** Give the shortcut a name (e.g., "Pass My Turn") and an icon on the Android home screen.
+
+### Nexus Timer Setup
+*   Enter the MQTT Broker URL in the Setup screen and connect.
+*   Assign unique single characters as **MQTT Triggers** for each player's "Pass Turn / My Pause" action.
+*   Assign unique single characters as **MQTT Triggers** for "Global Stop/Pause All" and "Global Run All Timers".
--- a/hooks/redeploy.sh
+++ b/hooks/redeploy.sh
@@ -0,0 +1,44 @@
+#!/bin/bash
+
+set -eo pipefail # Exit on error, treat unset variables as an error, and propagate pipeline errors
+
+APP_DIR="/virt/nexus-timer"
+IMAGE_NAME="virt-nexus-timer"
+SERVICE_NAME="virt-nexus-timer.service"
+LOG_FILE="/var/log/webhook-redeploy-nexus-timer.log" # Optional: for script-specific logging
+
+# Redirect stdout and stderr to a log file and also to the console (for webhook response)
+exec > >(tee -a "$LOG_FILE") 2>&1
+
+echo "----------------------------------------------------"
+echo "Webhook redeploy-nexus-timer triggered at $(date)"
+echo "Branch/Ref: $1"
+echo "Repository: $2"
+echo "----------------------------------------------------"
+
+# Ensure script is run from the app directory
+cd "$APP_DIR" || { echo "ERROR: Failed to cd to $APP_DIR. Exiting."; exit 1; }
+
+# Optional: Check if the trigger is for the correct branch (e.g., main or master)
+# TARGET_BRANCH="refs/heads/main" # Adjust to your primary branch name
+# if [ "$1" != "$TARGET_BRANCH" ]; then
+#   echo "Webhook triggered for branch $1, but only deploying $TARGET_BRANCH. Exiting."
+#   exit 0 # Exit successfully to not show an error in Gitea for non-target branches
+# fi
+
+echo "Pulling latest changes from Git (main branch)..."
+# Ensure you are on the correct branch first or specify it in the pull
+# git checkout main # Uncomment if your repo might be on other branches
+git pull --rebase origin main || { echo "ERROR: git pull failed. Exiting."; exit 1; } # Adjust 'main' if needed
+
+echo "Building Docker image $IMAGE_NAME..."
+docker build -t "$IMAGE_NAME" . || { echo "ERROR: docker build failed. Exiting."; exit 1; }
+
+echo "Restarting systemd service $SERVICE_NAME..."
+# This command might require sudo privileges. See note below.
+sudo systemctl restart "$SERVICE_NAME" || { echo "ERROR: systemctl restart failed. Exiting."; exit 1; }
+
+echo "Deployment finished successfully at $(date)."
+echo "----------------------------------------------------"
+
+exit 0
--- a/hooks/webhook.conf
+++ b/hooks/webhook.conf
@@ -0,0 +1,38 @@
+[
+  {
+    "id": "redeploy-nexus-timer",
+    "execute-command": "/virt/nexus-timer/hooks/redeploy.sh",
+    "command-working-directory": "/virt/nexus-timer",
+    "pass-arguments-to-command": [
+      { "source": "payload", "name": "ref" },
+      { "source": "payload", "name": "repository.full_name" }
+    ],
+    "trigger-rule": {
+      "and": [
+        {
+          "match": {
+            "type": "payload-hmac-sha256",
+            "secret": "YOUR_VERY_STRONG_SECRET_TOKEN_HERE_REPLACE_ME",
+            "parameter": {
+              "source": "header",
+              "name": "X-Gitea-Signature"
+            }
+          }
+        },
+        {
+          "match": {
+            "type": "value",
+            "value": "refs/heads/main",
+            "parameter": {
+              "source": "payload",
+              "name": "ref"
+            }
+          }
+        }
+      ]
+    },
+    "include-command-output-in-response": true,
+    "include-command-output-in-response-on-error": true,
+    "response-message": "Webhook processed."
+  }
+]
--- 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,47 @@
+# Existing log format often uses $remote_addr by default
+# log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+#                 '$status $body_bytes_sent "$http_referer" '
+#                 '"$http_user_agent" "$http_x_forwarded_for"';
+
+# Add these lines within the http {} block, OR server {} block
+# (http block is generally preferred for these directives)
+# Make sure they are *before* the access_log directive if possible.
+
+# --- Real IP Configuration ---
+# Replace with the ACTUAL IP range(s) of your Traefik Docker network(s)
+set_real_ip_from 172.22.0.0/16;  # Example: Trust IPs from this subnet
+# You can add multiple set_real_ip_from lines if needed
+# set_real_ip_from 192.168.1.0/24; # Example if Traefik was also on another network
+
+# Which header contains the real client IP?
+# X-Forwarded-For handles multiple proxies better. X-Real-IP is simpler if only Traefik.
+real_ip_header X-Real-IP;
+
+# If using X-Forwarded-For, tell Nginx how to process it.
+# 'on' means find the *last* IP address that is NOT from a trusted proxy.
+# This is usually correct when behind one or more trusted proxies.
+real_ip_recursive off;
+# --- End Real IP Configuration ---
+
+
+server {
+    listen 80;
+    listen [::]:80;
+    server_name localhost;
+
+    # Use the 'realip' processed $remote_addr in logs
+    # Ensure your access_log format uses $remote_addr (like 'combined' or 'main')
+    access_log /var/log/nginx/access.log combined; # Or your preferred format using $remote_addr
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+
+# It's common practice to put realip config in the http block
+# If your default.conf is included inside an existing http block in nginx.conf,
+# placing the realip directives *outside* the server block but *inside* http is standard.
+# If this file IS your entire http block, place them just before the server block.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+    "name": "nexus-timer",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "mqtt": "^5.13.0",
+        "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,55 @@
+{
+  "name": "Nexus Timer - Multiplayer Turn Timer",
+  "short_name": "NexusTimer",
+  "description": "Dynamic multiplayer timer for games, workshops, or sequential turns. Focuses on current & next player.",
+  "start_url": "/",
+  "scope": "/", 
+  "display": "standalone",
+  "display_override": ["window-controls-overlay"], 
+  "background_color": "#1f2937", 
+  "theme_color": "#3b82f6",
+  "orientation": "portrait",
+  "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/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,333 @@
+<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';
+import { MqttService } from './services/MqttService';
+
+const store = useStore();
+const router = useRouter();
+const theme = computed(() => store.getters.theme);
+
+const handleMqttMessage = (char) => { // This is the general command handler
+  console.log(`App.vue: Processing MQTT char (as command): '${char}'`);
+  const currentRouteName = router.currentRoute.value.name;
+
+  // Global MQTT Stop/Pause All
+  if (char === store.getters.globalMqttStopPause && store.getters.globalMqttStopPause) {
+    if (currentRouteName === 'Game') {
+      store.dispatch('globalStopPauseAll');
+      console.log("MQTT Command: Global Stop/Pause All triggered");
+    }
+    return;
+  }
+
+  // Global MQTT Run All Timers
+  if (char === store.getters.globalMqttRunAll && store.getters.globalMqttRunAll) {
+    if (currentRouteName === 'Game' && store.getters.gameMode === 'normal') {
+      store.dispatch('switchToAllTimersMode');
+      console.log("MQTT Command: Global Run All Timers triggered");
+    }
+    return;
+  }
+
+  // Global MQTT Pass Turn
+  if (char === store.getters.globalMqttPassTurn && store.getters.globalMqttPassTurn) {
+    if (currentRouteName === 'Game' && store.getters.gameMode === 'normal') {
+      // Similar logic to player-specific pass turn, but not tied to current player's MQTT char
+      const currentPlayer = store.getters.currentPlayer;
+      if (currentPlayer && !currentPlayer.isSkipped) { // Ensure there's a current player to pass from
+          AudioService.cancelPassTurnSound(); 
+          const wasRunning = currentPlayer.isTimerRunning;
+          store.dispatch('passTurn').then(() => {
+            const newCurrentPlayer = store.getters.currentPlayer;
+            if (wasRunning && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
+               AudioService.playPassTurnAlert(); 
+            }
+          });
+          console.log("MQTT Command: Global Pass Turn triggered");
+      }
+    }
+    return;
+  }
+  
+  // Player specific MQTT Pass Turn / My Pause
+  if (currentRouteName === 'Game') {
+    const gameModeInStore = store.getters.gameMode;
+    const currentPlayerInStore = store.getters.currentPlayer;
+
+    if (gameModeInStore === 'normal' && currentPlayerInStore && char === currentPlayerInStore.mqttChar) {
+      const wasRunning = currentPlayerInStore.isTimerRunning;
+          store.dispatch('passTurn').then(() => {
+            const newCurrentPlayer = store.getters.currentPlayer;
+            if (wasRunning && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
+               AudioService.playPassTurnAlert(); 
+            }
+          });
+      console.log(`MQTT Command: Player ${currentPlayerInStore.name} Pass Turn triggered`);
+    return;
+  }
+  
+    if (gameModeInStore === 'allTimers') {
+      // Find player by mqttChar. Ensure players array exists.
+      const playerToToggle = store.state.players?.find(p => p.mqttChar === char && !p.isSkipped);
+      if (playerToToggle) {
+        const playerIndex = store.state.players.indexOf(playerToToggle);
+        store.dispatch('togglePlayerTimerAllTimersMode', playerIndex);
+        console.log(`MQTT Command: Player ${playerToToggle.name} Timer Toggle triggered`);
+      }
+    }
+  }
+};
+
+// --- 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();
+
+  // Auto-connect MQTT only if URL is stored AND user desires connection
+  const storedBrokerUrl = store.getters.mqttBrokerUrl;
+    const connectDesired = store.getters.mqttConnectDesired; // Get the flag
+
+    if (storedBrokerUrl && 
+        connectDesired && // Check the flag
+        MqttService.connectionStatus.value !== 'connected' && 
+        MqttService.connectionStatus.value !== 'connecting') {
+      console.log("App.vue: Auto-connecting to stored MQTT broker (user desired):", storedBrokerUrl);
+      MqttService.connect(storedBrokerUrl);
+    } else if (storedBrokerUrl && !connectDesired) {
+      console.log("App.vue: MQTT Broker URL is stored, but user previously disconnected. Not auto-connecting.");
+    }
+  }).catch(error => {
+    console.error("App.vue: Error during store.dispatch('loadState'):", error);
+  });
+
+  document.addEventListener('keydown', handleGlobalKeyDown);
+  MqttService.setGeneralMessageHandler(handleMqttMessage); // Set handler regardless of initial connection
+
+  const resumeAudio = () => { AudioService.resumeContext(); /* ... remove listeners ... */ };
+  document.body.addEventListener('click', resumeAudio, { once: true });
+  document.body.addEventListener('touchstart', resumeAudio, { once: true });
+  MqttService.setGeneralMessageHandler(handleMqttMessage);
+});
+
+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 (keyPressed === store.getters.globalHotkeyPassTurn && store.getters.globalHotkeyPassTurn) {
+    event.preventDefault();
+    if (currentRouteName === 'Game' && store.getters.gameMode === 'normal') {
+      const currentPlayer = store.getters.currentPlayer;
+       if (currentPlayer && !currentPlayer.isSkipped) {
+          AudioService.cancelPassTurnSound(); 
+          const wasRunning = currentPlayer.isTimerRunning;
+          store.dispatch('passTurn').then(() => {
+            const newCurrentPlayer = store.getters.currentPlayer;
+            if (wasRunning && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
+               AudioService.playPassTurnAlert(); 
+            }
+          });
+          console.log("Hotkey: Global Pass Turn triggered");
+      }
+    }
+    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,54 @@
+@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 */
+}
+
+/* Safe area insets for mobile devices (status bar, home indicator) */
+.safe-area-padding {
+  padding-top: env(safe-area-inset-top);
+  /* padding-bottom: env(safe-area-inset-bottom); */
+}
+
+.safe-area-height {
+  height: calc(100dvh - env(safe-area-inset-top));
+  min-height: 0;
+}
+
+/* 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/HotkeyCaptureOverlay.vue
+++ b/src/components/HotkeyCaptureOverlay.vue
@@ -0,0 +1,79 @@
+<template>
+    <div 
+      v-if="visible" 
+      class="fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center z-[100]"
+      @click.self="cancel" 
+      @keydown.esc="cancel"
+      tabindex="0" 
+      ref="overlay"
+    >
+      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl text-center">
+        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">
+          Press a Key
+        </h3>
+        <p class="text-gray-600 dark:text-gray-300 mb-6">
+          Waiting for a single key press to assign as the hotkey.
+          <br>
+          (Esc to cancel)
+        </p>
+        <div class="animate-pulse text-blue-500 dark:text-blue-400 text-xl">
+          Listening...
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, watch, nextTick, onUnmounted } from 'vue';
+  
+  const props = defineProps({
+    visible: Boolean,
+  });
+  const emit = defineEmits(['captured', 'cancel']);
+  
+  const overlay = ref(null);
+  
+  const handleKeyPress = (event) => {
+    if (!props.visible) return;
+  
+    event.preventDefault();
+    event.stopPropagation(); // Prevent further propagation if overlay is active
+  
+    let key = event.key;
+    if (event.code === 'Space') {
+        key = ' '; 
+    } else if (key.length > 1 && key !== ' ') { // Ignore modifiers, Enter, Tab etc.
+        if (key === 'Escape') { // Handle Escape specifically for cancellation
+            cancel();
+        }
+        return; 
+    }
+    key = key.toLowerCase();
+    emit('captured', key);
+  };
+  
+  const cancel = () => {
+    emit('cancel');
+  };
+  
+  watch(() => props.visible, async (newValue) => {
+    if (newValue) {
+      await nextTick(); // Ensure overlay is in DOM
+      overlay.value?.focus(); // Focus the overlay to capture keydown events directly
+      document.addEventListener('keydown', handleKeyPress, { capture: true }); // Use capture phase
+    } else {
+      document.removeEventListener('keydown', handleKeyPress, { capture: true });
+    }
+  });
+  
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handleKeyPress, { capture: true });
+  });
+  </script>
+  
+  <style scoped>
+  /* Ensure overlay is above other modals if any (PlayerForm uses z-50) */
+  .z-\[100\] { 
+    z-index: 100;
+  }
+  </style>
--- a/src/components/MqttCharCaptureOverlay.vue
+++ b/src/components/MqttCharCaptureOverlay.vue
@@ -0,0 +1,65 @@
+<template>
+    <div 
+      v-if="visible" 
+      class="fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center z-[100]"
+      @click.self="handleCancel" 
+      @keydown.esc="handleCancel"
+      tabindex="0" 
+      ref="overlay"
+    >
+      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl text-center">
+        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">
+          Send MQTT Signal
+        </h3>
+        <p class="text-gray-600 dark:text-gray-300 mb-6">
+          Send a single character message to the MQTT topic '{{ MqttService.MQTT_TOPIC_GAME }}'.
+          <br>
+          (Press Esc on keyboard or click backdrop to cancel)
+        </p>
+        <div class="animate-pulse text-purple-500 dark:text-purple-400 text-xl">
+          Listening for MQTT...
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, watch, nextTick, onUnmounted } from 'vue';
+  import { MqttService } from '../services/MqttService'; // To display topic name
+  
+  const props = defineProps({
+    visible: Boolean,
+  });
+  const emit = defineEmits(['cancel']); // Only emits 'cancel', 'captured' will be handled by parent via service
+  
+  const overlay = ref(null);
+  
+  // No direct key press handling here for MQTT capture, parent will manage via MqttService
+  const handleCancel = () => {
+    emit('cancel');
+  };
+  
+  watch(() => props.visible, async (newValue) => {
+    if (newValue) {
+      await nextTick();
+      overlay.value?.focus(); // Focus for Esc key to cancel
+       // Add specific keyboard listener just for Esc on this overlay
+      document.addEventListener('keydown', escKeyHandler);
+    } else {
+      document.removeEventListener('keydown', escKeyHandler);
+    }
+  });
+  
+  // Specific Esc handler for this overlay
+  const escKeyHandler = (event) => {
+      if (props.visible && event.key === 'Escape') {
+          event.preventDefault();
+          event.stopPropagation();
+          handleCancel();
+      }
+  };
+  
+  onUnmounted(() => {
+    document.removeEventListener('keydown', escKeyHandler);
+  });
+  </script>
--- a/src/components/PlayerDisplay.vue
+++ b/src/components/PlayerDisplay.vue
@@ -0,0 +1,145 @@
+<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-4 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>
+  </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 < 768) { // Mobile
+            size = Math.min(availableHeight * 0.7, screenWidth * 0.6, 230); 
+        } else if (screenWidth < 1024) { // Tablet
+             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,327 @@
+<template>
+  <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex justify-center items-center p-4" @click.self="closeModal">
+    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md">
+      <h2 class="text-2xl font-semibold mb-4">{{ isEditing ? 'Edit Player' : 'Add New Player' }}</h2>
+      <form @submit.prevent="submitForm">
+        <div class="mb-4">
+          <label for="playerName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
+          <input type="text" id="playerName" v-model="editablePlayer.name" required class="input-base mt-1">
+        </div>
+        <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>
+        <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>
+
+                <div class="mb-4">
+            <p class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">"Pass Turn / My Pause" Trigger:</p>
+            <div class="flex items-center justify-between space-x-4">
+                <div class="flex items-center">
+                    <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">Hotkey:</span>
+                    <button 
+                        type="button"
+                        @click="startCapturePlayerHotkey"
+                        class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-center"
+                    >
+                        <span>{{ editablePlayer.hotkey ? editablePlayer.hotkey.toUpperCase() : '-' }}</span>
+                    </button>
+                    <button v-if="editablePlayer.hotkey" type="button" @click="clearPlayerHotkey" class="playerform-clear-btn">Clear</button>
+                    <span v-else class="playerform-clear-btn-placeholder"></span>
+                </div>
+                <div class="flex items-center">
+                    <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">MQTT:</span>
+                     <button 
+                        type="button"
+                        @click="startCapturePlayerMqttChar"
+                        class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-center"
+                    >
+                        <span>{{ editablePlayer.mqttChar ? editablePlayer.mqttChar.toUpperCase() : '-' }}</span>
+                    </button>
+                    <button v-if="editablePlayer.mqttChar" type="button" @click="clearPlayerMqttChar" class="playerform-clear-btn">Clear</button>
+                    <span v-else class="playerform-clear-btn-placeholder"></span>
+                </div>
+            </div>
+        </div>
+
+        <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>
+
+    <HotkeyCaptureOverlay 
+      :visible="isCapturingPlayerHotkey"
+      @captured="handlePlayerHotkeyCaptured"
+      @cancel="cancelCapturePlayerHotkey"
+    />
+    <MqttCharCaptureOverlay
+      :visible="isCapturingPlayerMqttChar"
+      @cancel="cancelCapturePlayerMqttChar" 
+    />
+  </div>
+</template>
+<style scoped>
+.playerform-clear-btn {
+    @apply text-xs text-blue-500 hover:underline ml-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-600;
+    min-width: 40px; /* Adjust to match "Clear" button width */
+    display: inline-block;
+    text-align: center;
+}
+.playerform-clear-btn-placeholder {
+    @apply ml-2 px-2 py-1;
+    min-width: 40px; /* Match width */
+    display: inline-block;
+    visibility: hidden;
+}
+</style>
+<script setup>
+import { ref, reactive, watch, onMounted, onUnmounted, computed } from 'vue';
+import { useStore } from 'vuex';
+import { CameraService } from '../services/CameraService';
+import { formatTime, parseTime } from '../utils/timeFormatter';
+import DefaultAvatarIcon from './DefaultAvatarIcon.vue';
+import HotkeyCaptureOverlay from './HotkeyCaptureOverlay.vue';
+import MqttCharCaptureOverlay from './MqttCharCaptureOverlay.vue';
+import { AudioService } from '../services/AudioService';
+import { MqttService } from '../services/MqttService';
+
+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: '', mqttChar: ''
+});
+const currentTimeFormatted = ref('60:00');
+const currentTimeFormatError = ref('');
+const cameraError = ref('');
+const maxNegativeSeconds = computed(() => store.getters.maxNegativeTimeReached);
+
+const isCapturingPlayerHotkey = ref(false);
+const isCapturingPlayerMqttChar = ref(false);
+
+const startCapturePlayerHotkey = () => { isCapturingPlayerHotkey.value = true; };
+const cancelCapturePlayerHotkey = () => { isCapturingPlayerHotkey.value = false; };
+const clearPlayerHotkey = () => { editablePlayer.hotkey = ''; };
+
+const startCapturePlayerMqttChar = () => {
+  if (MqttService.connectionStatus.value !== 'connected') {
+    alert('MQTT broker is not connected. Please connect in Setup first.');
+    return;
+  }
+  isCapturingPlayerMqttChar.value = true;
+  MqttService.startMqttCharCapture(handlePlayerMqttCharCaptured);
+};
+const cancelCapturePlayerMqttChar = () => {
+  isCapturingPlayerMqttChar.value = false;
+  MqttService.stopMqttCharCapture();
+};
+const clearPlayerMqttChar = () => { editablePlayer.mqttChar = ''; };
+
+const checkGlobalConflict = (charKey) => {
+    if (store.state.globalHotkeyStopPause === charKey) return `"${charKey.toUpperCase()}" is Global Stop/Pause Hotkey.`;
+    if (store.state.globalHotkeyRunAll === charKey) return `"${charKey.toUpperCase()}" is Global Run All Hotkey.`;
+    if (store.state.globalMqttStopPause === charKey) return `"${charKey.toUpperCase()}" is Global Stop/Pause MQTT.`;
+    if (store.state.globalMqttRunAll === charKey) return `"${charKey.toUpperCase()}" is Global Run All MQTT.`;
+    if (store.state.globalHotkeyPassTurn === charKey) return `"${charKey.toUpperCase()}" is Global Pass Turn Hotkey.`; // Check new global
+    if (store.state.globalMqttPassTurn === charKey) return `"${charKey.toUpperCase()}" is Global Pass Turn MQTT.`; // Check new global
+    return null;
+};
+
+const handlePlayerHotkeyCaptured = (key) => {
+  isCapturingPlayerHotkey.value = false;
+  if (key.length !== 1) return;
+  const globalConflictMsg = checkGlobalConflict(key);
+  if (globalConflictMsg) { alert(globalConflictMsg); return; }
+  const otherPlayerHotkeyConflict = store.state.players.find(p => p.id !== editablePlayer.id && p.hotkey === key);
+  if (otherPlayerHotkeyConflict) { alert(`Hotkey "${key.toUpperCase()}" is already used by player "${otherPlayerHotkeyConflict.name}".`); return; }
+  editablePlayer.hotkey = key;
+};
+
+const handlePlayerMqttCharCaptured = (charKey) => {
+  isCapturingPlayerMqttChar.value = false;
+  if (charKey.length !== 1) return;
+  const globalConflictMsg = checkGlobalConflict(charKey);
+  if (globalConflictMsg) { alert(globalConflictMsg); return; }
+  const otherPlayerMqttConflict = store.state.players.find(p => p.id !== editablePlayer.id && p.mqttChar === charKey);
+  if (otherPlayerMqttConflict) { alert(`MQTT Char "${charKey.toUpperCase()}" is already used by player "${otherPlayerMqttConflict.name}".`); return; }
+  editablePlayer.mqttChar = charKey;
+};
+
+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 || '';
+    editablePlayer.mqttChar = props.player.mqttChar || '';
+    currentTimeFormatted.value = formatTime(props.player.currentTimerSec);
+  } else {
+    editablePlayer.avatar = DEFAULT_AVATAR_MARKER;
+    editablePlayer.initialTimerSec = 3600;
+    editablePlayer.currentTimerSec = 3600;
+    currentTimeFormatted.value = formatTime(editablePlayer.currentTimerSec);
+  }
+});
+
+onUnmounted(() => {
+    if (isCapturingPlayerMqttChar.value) {
+        MqttService.stopMqttCharCapture();
+    }
+});
+
+watch(currentTimeFormatted, (newTime) => {
+  validateCurrentTimeFormat();
+  if (!currentTimeFormatError.value) {
+      editablePlayer.currentTimerSec = parseTime(newTime);
+      if (!isEditing.value) {
+        editablePlayer.initialTimerSec = editablePlayer.currentTimerSec;
+      }
+  }
+});
+const 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 = '';
+        }
+    }
+};
+const capturePhoto = async () => {
+  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.';
+  }
+};
+const useDefaultAvatar = () => { editablePlayer.avatar = DEFAULT_AVATAR_MARKER; };
+const 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();
+};
+const closeModal = () => { emit('close'); };
+
+// Fill in full definitions from previous version if needed
+onMounted.value = () => {
+  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 || '';
+    editablePlayer.mqttChar = props.player.mqttChar || '';
+    currentTimeFormatted.value = formatTime(props.player.currentTimerSec);
+  } else {
+    editablePlayer.avatar = DEFAULT_AVATAR_MARKER;
+    editablePlayer.initialTimerSec = 3600;
+    editablePlayer.currentTimerSec = 3600;
+    currentTimeFormatted.value = formatTime(editablePlayer.currentTimerSec);
+  }
+};
+onUnmounted.value = () => {
+    if (isCapturingPlayerMqttChar.value) {
+        MqttService.stopMqttCharCapture();
+    }
+};
+watch(currentTimeFormatted, (newTime) => {
+  validateCurrentTimeFormat();
+  if (!currentTimeFormatError.value) {
+      editablePlayer.currentTimerSec = parseTime(newTime);
+      if (!isEditing.value) {
+        editablePlayer.initialTimerSec = editablePlayer.currentTimerSec;
+      }
+  }
+});
+validateCurrentTimeFormat.value = () => {
+    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 = '';
+        }
+    }
+};
+capturePhoto.value = async () => {
+  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.';
+  }
+};
+useDefaultAvatar.value = () => { editablePlayer.avatar = DEFAULT_AVATAR_MARKER; };
+submitForm.value = () => {
+  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();
+};
+closeModal.value = () => { emit('close'); };
+</script>
--- a/src/components/PlayerListItem.vue
+++ b/src/components/PlayerListItem.vue
@@ -0,0 +1,80 @@
+<template>
+  <div 
+    :class="['player-list-item flex items-center justify-between p-3 my-2 rounded-lg shadow cursor-pointer transition-all duration-200 ease-in-out', 
+            itemStateClasses,
+            { 'opacity-50 filter grayscale contrast-75': player.isSkipped }, 
+            { 'opacity-75': !player.isTimerRunning && !player.isSkipped }
+            ]"
+    @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"
+        :class="player.isSkipped ? 'border-gray-400 dark:border-gray-600' : 
+                 player.isTimerRunning ? 'border-green-400 dark:border-green-500' : 
+                 'border-yellow-400 dark:border-yellow-500'"
+      />
+      <DefaultAvatarIcon
+        v-else
+        class="w-12 h-12 rounded-full object-cover mr-3 border-2 p-1"
+        :class="player.isSkipped ? 'text-gray-400 bg-gray-200 border-gray-400 dark:text-gray-600 dark:bg-gray-700 dark:border-gray-600' : 
+                 player.isTimerRunning ? 'text-green-600 bg-green-100 border-green-400 dark:text-green-300 dark:bg-green-800 dark:border-green-500' :
+                 'text-yellow-600 bg-yellow-50 border-yellow-400 dark:text-yellow-300 dark:bg-yellow-800 dark:border-yellow-500'"
+      />
+      <div>
+        <h3 class="text-lg font-medium" :class="{'text-gray-500 dark:text-gray-400': !player.isTimerRunning && !player.isSkipped}">
+          {{ player.name }}
+        </h3>
+        <p v-if="player.isSkipped" class="text-xs text-red-500 dark:text-red-400">SKIPPED</p>
+        <p v-else-if="!player.isTimerRunning" class="text-xs text-yellow-600 dark:text-yellow-400">Paused</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"
+        :class="{'opacity-80': !player.isTimerRunning && !player.isSkipped}"
+      />
+    </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 = () => {
+  // Allow tapping only if not skipped, to pause/resume their timer
+  if (!props.player.isSkipped) {
+    emit('tapped');
+  }
+};
+
+const itemStateClasses = 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-400 dark:border-red-600 animate-pulsePositive' // Pulsate background if running positive
+      : 'bg-green-50 dark:bg-green-900/70 border border-green-400 dark:border-green-600 animate-pulsePositive';
+  }
+  // Paused state
+  return 'bg-yellow-50 dark:bg-yellow-900/50 border border-yellow-300 dark:border-yellow-700 hover:bg-yellow-100 dark:hover:bg-yellow-900/70';
+});
+</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/MqttService.js
+++ b/src/services/MqttService.js
@@ -0,0 +1,164 @@
+// src/services/MqttService.js
+import mqtt from 'mqtt';
+import { ref } from 'vue';
+
+const client = ref(null);
+const connectionStatus = ref('disconnected');
+const error = ref(null);
+const receivedMessages = ref([]); // For debugging
+const MQTT_TOPIC_GAME = 'game';
+
+let generalMessageHandlerCallback = null; // For App.vue to handle game commands
+
+// --- MQTT Character Capture State ---
+const isCapturingMqttChar = ref(false);
+const mqttCharCaptureCallback = ref(null); // Function to call when a char is captured
+
+const startMqttCharCapture = (onCapturedCallback) => {
+  console.log("MQTT Service: Starting character capture mode.");
+  isCapturingMqttChar.value = true;
+  mqttCharCaptureCallback.value = onCapturedCallback;
+};
+
+const stopMqttCharCapture = () => {
+  console.log("MQTT Service: Stopping character capture mode.");
+  isCapturingMqttChar.value = false;
+  mqttCharCaptureCallback.value = null;
+};
+// --- End MQTT Character Capture State ---
+
+const connect = async (brokerUrl = 'ws://localhost:9001') => {
+  // ... (existing connect logic)
+  if (client.value && client.value.connected) { return; }
+  if (connectionStatus.value === 'connecting') { return; }
+  console.log(`MQTT: Attempting to connect to ${brokerUrl}...`);
+  connectionStatus.value = 'connecting';
+  error.value = null;
+  let fullBrokerUrl = brokerUrl;
+    if (!brokerUrl.startsWith('ws://') && !brokerUrl.startsWith('wss://')) {
+        if (brokerUrl.includes(':1883')) {
+            fullBrokerUrl = `ws://${brokerUrl}`;
+        } else if (!brokerUrl.includes(':')) {
+            fullBrokerUrl = `ws://${brokerUrl}:9001`;
+        } else {
+             fullBrokerUrl = `ws://${brokerUrl}`;
+        }
+    }
+
+  try {
+    const connectFn = typeof mqtt === 'function' ? mqtt : (mqtt.connect || (mqtt.default && mqtt.default.connect));
+    if (typeof connectFn !== 'function') {
+      throw new Error("MQTT connect function not found.");
+    }
+    client.value = connectFn(fullBrokerUrl, {
+        reconnectPeriod: 5000,
+        connectTimeout: 10000,
+    });
+
+    client.value.on('connect', () => {
+      console.log('MQTT: Connected!');
+      connectionStatus.value = 'connected';
+      error.value = null;
+      client.value.subscribe(MQTT_TOPIC_GAME, (err) => {
+        if (!err) { console.log(`MQTT: Subscribed to "${MQTT_TOPIC_GAME}"`); }
+        else { 
+          console.error('MQTT: Subscr. error:', err); 
+          connectionStatus.value = 'error'; error.value = 'Subscription failed.';
+        }
+      });
+    });
+
+    client.value.on('message', (topic, message) => {
+      const msgString = message.toString();
+      const char = msgString.charAt(0).toLowerCase(); // Process as lowercase single char
+      console.log(`MQTT: Received on "${topic}": '${msgString}' -> processed char: '${char}'`);
+      receivedMessages.value.push({ topic, message: msgString, time: new Date() });
+
+      if (topic === MQTT_TOPIC_GAME && char.length === 1) {
+        if (isCapturingMqttChar.value && mqttCharCaptureCallback.value) {
+          console.log(`MQTT Service: Captured char '${char}' for registration.`);
+          mqttCharCaptureCallback.value(char); // Pass char to the specific capture handler
+          stopMqttCharCapture(); // Stop capture mode after one char
+        } else if (generalMessageHandlerCallback) {
+          // Normal message processing if not in capture mode
+          generalMessageHandlerCallback(char);
+        }
+      }
+    });
+
+    client.value.on('error', (err) => { /* ... existing error handling ... */ 
+        console.error('MQTT: Connection error:', err);
+        connectionStatus.value = 'error';
+        error.value = err.message || 'Connection error';
+    });
+    client.value.on('reconnect', () => { /* ... existing reconnect handling ... */ 
+        console.log('MQTT: Reconnecting...');
+        connectionStatus.value = 'connecting';
+    });
+    client.value.on('offline', () => { /* ... existing offline handling ... */ 
+        console.log('MQTT: Client offline.');
+    });
+    client.value.on('close', () => { /* ... existing close handling ... */ 
+        console.log('MQTT: Connection closed.');
+        if (connectionStatus.value !== 'error' && connectionStatus.value !== 'connecting') { 
+            connectionStatus.value = 'disconnected';
+        }
+    });
+
+  } catch (err) { /* ... existing catch ... */ 
+    console.error('MQTT: Setup error during connect call:', err);
+    connectionStatus.value = 'error';
+    error.value = err.message || 'Setup failed.';
+    if(client.value && typeof client.value.end === 'function') client.value.end(true);
+    client.value = null;
+  }
+};
+
+const disconnect = () => {
+  if (client.value) {
+    console.log('MQTT: Disconnecting/Stopping connection attempt...');
+    // Set status immediately to give user feedback, 'close' event will confirm
+    // but if it was 'connecting', it might not emit 'close' if it never truly connected.
+    const wasConnecting = connectionStatus.value === 'connecting';
+    
+    client.value.end(true, () => { // true forces close and stops reconnect attempts
+      console.log('MQTT: client.end() callback executed.');
+      // The 'close' event listener on the client should handle final cleanup
+      // like setting client.value = null and connectionStatus.value = 'disconnected'.
+      // If it was just 'connecting' and never connected, 'close' might not fire reliably.
+      if (wasConnecting && connectionStatus.value !== 'disconnected') {
+          connectionStatus.value = 'disconnected';
+          client.value = null; // Ensure cleanup if 'close' doesn't fire from 'connecting' state
+      }
+    });
+    // If it was 'connecting', we might want to immediately reflect disconnected state
+    // as 'end(true)' stops further attempts.
+    if (wasConnecting) {
+        connectionStatus.value = 'disconnected'; 
+        // Note: client.value will be fully nulled on the 'close' event or after end() callback.
+    }
+
+  } else {
+    console.log('MQTT: No active client to disconnect.');
+    connectionStatus.value = 'disconnected'; // Ensure status is correct
+  }
+};
+
+const setGeneralMessageHandler = (handler) => { // Renamed for clarity
+  generalMessageHandlerCallback = handler;
+};
+
+export const MqttService = {
+  connect,
+  disconnect,
+  setGeneralMessageHandler, // Use this for App.vue game commands
+  connectionStatus,
+  error,
+  receivedMessages,
+  MQTT_TOPIC_GAME,
+  getClient: () => client.value,
+  // New methods for capture mode
+  startMqttCharCapture,
+  stopMqttCharCapture,
+  isCapturingMqttChar // Expose reactive state if needed elsewhere, though not directly used by components
+};
--- 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/services/WakeLockService.js
+++ b/src/services/WakeLockService.js
@@ -0,0 +1,65 @@
+let wakeLock = null;
+let wakeLockActive = false;
+
+const requestWakeLock = async () => {
+  if ('wakeLock' in navigator && !wakeLockActive) {
+    try {
+      wakeLock = await navigator.wakeLock.request('screen');
+      wakeLockActive = true;
+      console.log('Screen Wake Lock activated.');
+
+      wakeLock.addEventListener('release', () => {
+        console.log('Screen Wake Lock was released.');
+        wakeLockActive = false;
+        wakeLock = null; // Clear the reference
+        // Optionally, re-request if it was released unexpectedly and should be active
+        // For now, we'll let it be re-requested manually by the app logic
+      });
+    } catch (err) {
+      console.error(`Failed to acquire Screen Wake Lock: ${err.name}, ${err.message}`);
+      wakeLock = null;
+      wakeLockActive = false;
+    }
+  } else {
+    console.warn('Screen Wake Lock API not supported or already active.');
+  }
+};
+
+const releaseWakeLock = async () => {
+  if (wakeLock && wakeLockActive) {
+    try {
+      await wakeLock.release();
+      // The 'release' event listener on wakeLock itself will set wakeLockActive = false and wakeLock = null
+    } catch (err) {
+      console.error(`Failed to release Screen Wake Lock: ${err.name}, ${err.message}`);
+      // Even if release fails, mark as inactive to allow re-request
+      wakeLock = null;
+      wakeLockActive = false;
+    }
+  } else {
+    // console.log('No active Screen Wake Lock to release or already released.');
+  }
+};
+
+// Handle visibility changes to re-acquire lock if necessary
+const handleVisibilityChange = () => {
+  if (wakeLock !== null && document.visibilityState === 'visible') {
+    // If we had a wake lock and the page became visible again,
+    // it might have been released by the browser. Try to re-acquire.
+    // This behavior is usually handled automatically by the browser with the 'release' event
+    // but can be a fallback. For now, we rely on manual re-request.
+    // console.log('Page visible, checking wake lock status.');
+  } else if (document.visibilityState === 'hidden' && wakeLockActive) {
+      // The browser usually releases the wake lock when tab is hidden.
+      // Our 'release' event listener should handle this.
+  }
+};
+
+document.addEventListener('visibilitychange', handleVisibilityChange);
+// document.addEventListener('fullscreenchange', handleVisibilityChange); // Also useful for fullscreen
+
+export const WakeLockService = {
+  request: requestWakeLock,
+  release: releaseWakeLock,
+  isActive: () => wakeLockActive,
+};
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,531 @@
+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,
+  globalHotkeyPassTurn: null,
+  globalMqttStopPause: null,
+  globalMqttRunAll: null,
+  globalMqttPassTurn: null,
+  mqttBrokerUrl: 'ws://localhost:9001',
+  mqttConnectDesired: false,
+  currentPlayerIndex: 0,
+  gameMode: 'normal',
+  isMuted: false,
+  theme: 'dark',
+  gameRunning: false,
+};
+
+// Helper function to create a new player object
+const createPlayerObject = (playerData = {}) => ({
+  id: playerData.id || Date.now().toString() + Math.random(),
+  name: playerData.name || `Player ${store.state.players.length + 1}`, // Access store carefully here or pass length
+  avatar: playerData.avatar === undefined ? DEFAULT_AVATAR_MARKER : playerData.avatar,
+  initialTimerSec: playerData.initialTimerSec || 3600,
+  currentTimerSec: playerData.currentTimerSec || playerData.initialTimerSec || 3600,
+  hotkey: playerData.hotkey || null,
+  mqttChar: playerData.mqttChar || null, // New
+  isSkipped: playerData.isSkipped || false,
+  isTimerRunning: playerData.isTimerRunning || false,
+});
+
+export default createStore({
+  state: () => {
+    const persistedState = StorageService.getState();
+    if (persistedState) {
+      let playersToUse = persistedState.players;
+      if (!playersToUse || (playersToUse.length === 0 && !persistedState.hasOwnProperty('players'))) {
+        playersToUse = JSON.parse(JSON.stringify(predefinedPlayers.map(p => createPlayerObject(p))));
+      } else if (persistedState.hasOwnProperty('players') && playersToUse.length === 0) {
+        playersToUse = [];
+      }
+
+      playersToUse = playersToUse.map(p_persisted => {
+        const p_base = predefinedPlayers.find(p_def => p_def.id === p_persisted.id) || {};
+        return createPlayerObject({ ...p_base, ...p_persisted, isTimerRunning: false });
+      });
+      
+      return {
+        ...initialState, // Start with all initial state defaults
+        ...persistedState, // Override with persisted values
+        players: playersToUse, // Specifically set processed players
+        globalHotkeyPassTurn: persistedState.globalHotkeyPassTurn || initialState.globalHotkeyPassTurn,
+        globalMqttPassTurn: persistedState.globalMqttPassTurn || initialState.globalMqttPassTurn,
+        globalHotkeyStopPause: persistedState.globalHotkeyStopPause || initialState.globalHotkeyStopPause,
+        globalMqttStopPause: persistedState.globalMqttStopPause || initialState.globalMqttStopPause,
+        globalHotkeyRunAll: persistedState.globalHotkeyRunAll || initialState.globalHotkeyRunAll,
+        globalMqttRunAll: persistedState.globalMqttRunAll || initialState.globalMqttRunAll,
+        mqttBrokerUrl: persistedState.mqttBrokerUrl || initialState.mqttBrokerUrl,
+        mqttConnectDesired: persistedState.hasOwnProperty('mqttConnectDesired') ? persistedState.mqttConnectDesired : initialState.mqttConnectDesired,
+        gameRunning: false, // Always start non-running
+        currentPlayerIndex: persistedState.currentPlayerIndex !== undefined && persistedState.currentPlayerIndex < playersToUse.length ? persistedState.currentPlayerIndex : 0,
+      };
+    }
+    // If no persisted state, deep copy initialState which includes new MQTT fields
+    const newInitialState = JSON.parse(JSON.stringify(initialState));
+    newInitialState.players = newInitialState.players.map(p => createPlayerObject(p));
+    return newInitialState;
+  },
+  mutations: {
+    ADD_PLAYER(state, playerConfig) {
+      if (state.players.length < 99) {
+        const newPlayer = createPlayerObject({
+            name: playerConfig.name,
+            avatar: playerConfig.avatar,
+            initialTimerSec: playerConfig.initialTimerSec,
+            currentTimerSec: playerConfig.currentTimerSec, // Set from form
+            hotkey: playerConfig.hotkey,
+            mqttChar: playerConfig.mqttChar // From form
+        });
+        state.players.push(newPlayer);
+      } else {
+        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 };
+      }
+    },
+    SET_MQTT_BROKER_URL(state, url) {
+      state.mqttBrokerUrl = url;
+      state.mqttConnectDesired = true; 
+    },
+    SET_MQTT_CONNECT_DESIRED(state, desired) {
+      state.mqttConnectDesired = desired;
+    },
+    SET_GLOBAL_HOTKEY_STOP_PAUSE(state, key) {
+      state.globalHotkeyStopPause = key;
+    },
+    SET_GLOBAL_HOTKEY_RUN_ALL(state, key) {
+      state.globalHotkeyRunAll = key;
+    },
+    SET_GLOBAL_HOTKEY_PASS_TURN(state, key) {
+      state.globalHotkeyPassTurn = key;
+    },
+    SET_GLOBAL_MQTT_PASS_TURN(state, char) { 
+      state.globalMqttPassTurn = char;
+    },
+    SET_GLOBAL_MQTT_STOP_PAUSE(state, char) {
+      state.globalMqttStopPause = char;
+    },
+    SET_GLOBAL_MQTT_RUN_ALL(state, char) {
+      state.globalMqttRunAll = char;
+    },
+    SET_PLAYERS(state, playersData) { // Used by fullResetApp and potentially reorder
+      state.players = playersData.map(p => createPlayerObject(p));
+    },
+    SET_THEME(state, theme) { state.theme = theme; },
+    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_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 => ({ // Persist mqttChar for players
+            id: p.id, name: p.name, avatar: p.avatar, 
+            initialTimerSec: p.initialTimerSec, currentTimerSec: p.currentTimerSec,
+            hotkey: p.hotkey, mqttChar: p.mqttChar, // Save mqttChar
+            isSkipped: p.isSkipped,
+        })),
+        globalHotkeyPassTurn: state.globalHotkeyPassTurn,
+        globalMqttPassTurn: state.globalMqttPassTurn,
+        globalHotkeyStopPause: state.globalHotkeyStopPause,
+        globalHotkeyRunAll: state.globalHotkeyRunAll,
+        globalMqttStopPause: state.globalMqttStopPause, 
+        globalMqttRunAll: state.globalMqttRunAll,       
+        mqttBrokerUrl: state.mqttBrokerUrl,             
+        mqttConnectDesired: state.mqttConnectDesired,
+        currentPlayerIndex: state.currentPlayerIndex,
+        gameMode: state.gameMode,
+        isMuted: state.isMuted,
+        theme: state.theme,
+      });
+    },
+    addPlayer({ commit, dispatch }, player) {
+      commit('ADD_PLAYER', player);
+      dispatch('saveState');
+    },
+    setMqttBrokerUrl({ commit, dispatch }, url) {
+      commit('SET_MQTT_BROKER_URL', url);
+      dispatch('saveState');
+    },
+    setMqttConnectDesired({ commit, dispatch }, desired) {
+      commit('SET_MQTT_CONNECT_DESIRED', desired);
+      dispatch('saveState');
+    },
+    setGlobalMqttStopPause({ commit, dispatch }, char) {
+      commit('SET_GLOBAL_MQTT_STOP_PAUSE', char);
+      dispatch('saveState');
+    },
+    setGlobalMqttRunAll({ commit, dispatch }, char) {
+      commit('SET_GLOBAL_MQTT_RUN_ALL', char);
+      dispatch('saveState');
+    },
+    setGlobalHotkeyPassTurn({ commit, dispatch }, key) {
+        commit('SET_GLOBAL_HOTKEY_PASS_TURN', key);
+        dispatch('saveState');
+    },
+    setGlobalMqttPassTurn({ commit, dispatch }, char) {
+        commit('SET_GLOBAL_MQTT_PASS_TURN', char);
+        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 }) {
+        commit('RESET_ALL_TIMERS');
+        dispatch('saveState');
+    },
+    setGlobalHotkeyStopPause({ commit, dispatch }, key) {
+      commit('SET_GLOBAL_HOTKEY_STOP_PAUSE', key);
+      dispatch('saveState');
+    },
+    setGlobalHotkeyRunAll({ commit, dispatch }, key) {
+        commit('SET_GLOBAL_HOTKEY_RUN_ALL', key);
+        dispatch('saveState');
+    },
+    fullResetApp({ commit, dispatch, state: currentGlobalState }) {
+        StorageService.clearState();
+        const freshInitialState = JSON.parse(JSON.stringify(initialState));
+        freshInitialState.players = freshInitialState.players.map(p => createPlayerObject(p));
+
+        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_MQTT_BROKER_URL', freshInitialState.mqttBrokerUrl);
+        commit('SET_MQTT_CONNECT_DESIRED', freshInitialState.mqttConnectDesired);
+        commit('SET_GLOBAL_HOTKEY_STOP_PAUSE', freshInitialState.globalHotkeyStopPause);
+        commit('SET_GLOBAL_MQTT_STOP_PAUSE', freshInitialState.globalMqttStopPause);
+        commit('SET_GLOBAL_HOTKEY_RUN_ALL', freshInitialState.globalHotkeyRunAll);
+        commit('SET_GLOBAL_MQTT_RUN_ALL', freshInitialState.globalMqttRunAll);
+        commit('SET_GLOBAL_HOTKEY_PASS_TURN', freshInitialState.globalHotkeyPassTurn);
+        commit('SET_GLOBAL_MQTT_PASS_TURN', freshInitialState.globalMqttPassTurn);
+        
+        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,
+    mqttBrokerUrl: state => state.mqttBrokerUrl,
+    mqttConnectDesired: state => state.mqttConnectDesired,
+    globalHotkeyStopPause: state => state.globalHotkeyStopPause,
+    globalMqttStopPause: state => state.globalMqttStopPause,
+    globalHotkeyRunAll: state => state.globalHotkeyRunAll,
+    globalMqttRunAll: state => state.globalMqttRunAll,
+    globalHotkeyPassTurn: state => state.globalHotkeyPassTurn,
+    globalMqttPassTurn: state => state.globalMqttPassTurn,    
+    totalPlayers: state => state.players.length,
+    gameRunning: state => state.gameRunning,
+    maxNegativeTimeReached: () => MAX_NEGATIVE_SECONDS,
+  }
+});
--- a/src/sw.js
+++ b/src/sw.js
@@ -0,0 +1,166 @@
+const CACHE_VERSION = typeof __APP_CACHE_VERSION__ !== 'undefined' 
+    ? __APP_CACHE_VERSION__ 
+    : 'nexus-timer-cache-fallback-dev-vManual';
+
+const APP_SHELL_URLS = [
+  // Precache the root (index.html) explicitly for better offline fallback
+  '/', 
+  '/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',
+];
+
+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);
+      })
+      .then(() => {
+        console.log(`[SW ${CACHE_VERSION}] Skip waiting on install.`);
+        return 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(() => {
+      console.log(`[SW ${CACHE_VERSION}] Clients claimed.`);
+      return self.clients.claim();
+    })
+  );
+});
+
+self.addEventListener('fetch', event => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  if (request.method !== 'GET' || !url.protocol.startsWith('http')) {
+    return;
+  }
+
+  // Strategy 1: Network First, then Cache for Navigation/HTML requests
+  if (request.mode === 'navigate' || request.destination === 'document' || url.pathname === '/') {
+    // console.log(`[SW ${CACHE_VERSION}] NetworkFirst for navigation/document: ${request.url}`);
+    event.respondWith(
+      fetch(request)
+        .then(networkResponse => {
+          // If successful, cache the response and return it
+          if (networkResponse.ok) {
+            const responseToCache = networkResponse.clone();
+            caches.open(CACHE_VERSION).then(cache => {
+              // For navigations, it's often best to cache the specific URL requested
+              // as well as potentially updating the '/' cache if this is the root.
+              cache.put(request, responseToCache);
+              if (url.pathname === '/') { // Also update root cache if it's the index
+                  const rootResponseClone = networkResponse.clone(); // Need another clone
+                  cache.put('/', rootResponseClone);
+              }
+            });
+          }
+          return networkResponse;
+        })
+        .catch(async () => {
+          // Network failed. Try to serve from cache.
+          // console.warn(`[SW ${CACHE_VERSION}] Network fetch failed for ${request.url}. Attempting cache.`);
+          
+          // 1. Try matching the specific request first (e.g. /info, /game)
+          const cachedResponse = await caches.match(request);
+          if (cachedResponse) {
+            // console.log(`[SW ${CACHE_VERSION}] Serving from cache (specific request): ${request.url}`);
+            return cachedResponse;
+          }
+
+          // 2. If specific request not found, try serving the app shell ('/')
+          // This is crucial for SPAs to work offline.
+          const appShellResponse = await caches.match('/');
+          if (appShellResponse) {
+            // console.log(`[SW ${CACHE_VERSION}] Serving app shell ('/') from cache for: ${request.url}`);
+            return appShellResponse;
+          }
+
+          // 3. If even the app shell is not in cache (shouldn't happen if install was successful)
+          console.error(`[SW ${CACHE_VERSION}] CRITICAL: Network and cache miss for navigation AND app shell ('/') for: ${request.url}`);
+          // Return a very basic offline message, but ideally this state is avoided.
+          return new Response(
+            `<h1>Offline</h1><p>The application is currently offline and the requested page could not be loaded from the cache. Please check your connection.</p>`, 
+            { headers: { 'Content-Type': 'text/html' } }
+          );
+        })
+    );
+    return;
+  }
+
+  // Strategy 2: Stale-While-Revalidate for assets (CSS, JS, images, fonts, workers)
+  if (request.destination === 'style' ||
+      request.destination === 'script' ||
+      request.destination === 'worker' ||
+      request.destination === 'image' ||
+      request.destination === 'font') {
+    // console.log(`[SW ${CACHE_VERSION}] StaleWhileRevalidate for asset: ${request.url}`);
+    event.respondWith(
+      caches.open(CACHE_VERSION).then(cache => {
+        return cache.match(request).then(cachedResponse => {
+          const fetchPromise = fetch(request).then(networkResponse => {
+            if (networkResponse.ok) {
+              const responseToCache = networkResponse.clone();
+              cache.put(request, responseToCache);
+            }
+            return networkResponse;
+          }).catch(err => {
+            // If fetch fails, and we served from cache, it's fine.
+            // If cache also missed, this error will propagate.
+            // console.warn(`[SW ${CACHE_VERSION}] SWR: Network fetch error for ${request.url}`, err);
+            throw err;
+          });
+          return cachedResponse || fetchPromise;
+        }).catch(() => {
+            // Fallback to network if cache.match fails
+            // console.warn(`[SW ${CACHE_VERSION}] SWR: Cache match error for ${request.url}, trying network directly.`);
+            return fetch(request);
+        });
+      })
+    );
+    return;
+  }
+
+  // Strategy 3: Cache First for other types of requests (e.g., manifest.json if not in APP_SHELL_URLS)
+  // console.log(`[SW ${CACHE_VERSION}] CacheFirst for: ${request.url}`);
+  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;
+        });
+      })
+  );
+});
+
+self.addEventListener('message', event => {
+  if (event.data && event.data.action === 'skipWaiting') {
+    console.log(`[SW ${CACHE_VERSION}] Received skipWaiting message, activating new SW.`);
+    self.skipWaiting();
+  }
+});
--- 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,263 @@
+<template>
+  <div class="flex flex-col h-screen overflow-hidden" :class="{'dark': theme === 'dark'}">
+    <!-- Header Bar -->
+    <header class="p-3 bg-gray-100 dark:bg-gray-800 shadow-md flex justify-between items-center shrink-0">
+      <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 class="flex-grow overflow-hidden flex flex-col" ref="gameArea">
+      <!-- Normal Mode -->
+      <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 Mode</h2>
+        </div>
+        <div class="flex-grow overflow-y-auto space-y-2">
+          <!-- Use playersToListInAllTimersMode -->
+          <PlayerListItem 
+            v-for="(player) in playersToListInAllTimersMode" 
+            :key="player.id" 
+            :player="player"
+            @tapped="() => handlePlayerTapAllTimers(indexInFullList(player.id))"
+          />
+          <p v-if="playersToListInAllTimersMode.length === 0 && players.length > 0 && anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
+            All players are skipped or an issue occurred.
+          </p>
+           <p v-if="playersToListInAllTimersMode.length === 0 && players.length > 0 && !anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
+            All players are skipped.
+          </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';
+import { WakeLockService } from '../services/WakeLockService';
+
+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;
+
+// Shows all non-skipped players when in 'allTimers' mode.
+const playersToListInAllTimersMode = computed(() => {
+  if (gameMode.value === 'allTimers' && players.value) {
+    return players.value.filter(p => !p.isSkipped);
+  }
+  return [];
+});
+
+// This computed is still used for audio logic and auto-revert
+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, onUnmounted, watchers, navigation, and other methods remain the same)
+onMounted(async () => {
+  if (!players.value || players.value.length < 2) {
+    router.push({ name: 'Setup' });
+    return;
+  }
+  
+  timerInterval = setInterval(() => {
+    store.dispatch('tick');
+  }, 1000);
+
+  if (gameRunning.value) {
+    await WakeLockService.request();
+  }
+});
+
+onUnmounted(async () => {
+  clearInterval(timerInterval);
+  AudioService.stopContinuousTick();
+  AudioService.cancelPassTurnSound();
+  await WakeLockService.release();
+});
+
+watch(gameRunning, async (isRunning) => {
+  if (isRunning) {
+    await WakeLockService.request();
+  } else {
+    if (!WakeLockService.isActive()) return; 
+    setTimeout(async () => {
+        if (!store.getters.gameRunning && WakeLockService.isActive()) {
+            await WakeLockService.release();
+        }
+    }, 3000);
+  }
+});
+
+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 = async () => {
+  await WakeLockService.release();
+  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 = async () => {
+  await WakeLockService.release();
+  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'); };
+
+// Auto-revert logic
+watch(anyTimerRunningInAllMode, (anyRunning) => {
+    // Only revert if we are IN allTimers mode and NO timers are running
+    if (gameMode.value === 'allTimers' && !anyRunning && players.value && players.value.length > 0) {
+        const nonSkippedPlayersExist = players.value.some(p => !p.isSkipped);
+        if (nonSkippedPlayersExist) {
+            setTimeout(() => {
+                // Double check condition before switching, state might change rapidly
+                if(gameMode.value === 'allTimers' && !store.getters.players.some(p => p.isTimerRunning && !p.isSkipped)){
+                    console.log("All timers paused in AllTimersMode, reverting to Normal Mode.");
+                    store.dispatch('switchToNormalMode');
+                }
+            }, 250); // A small delay to prevent flickering if a timer is immediately restarted
+        } else { 
+            // All players are skipped, so stay in all timers mode but paused.
+            console.log("All players skipped in AllTimersMode, staying paused.");
+            AudioService.stopContinuousTick();
+        }
+    }
+});
+</script>
--- a/src/views/InfoView.vue
+++ b/src/views/InfoView.vue
@@ -0,0 +1,127 @@
+<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-2 text-center">
+      <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-1">About Nexus Timer</h1>
+      <div class="flex items-center justify-center space-x-2 text-xs text-gray-500 dark:text-gray-400 mb-4">
+        <span>Build: <span class="font-mono">{{ buildTime }}</span></span>
+        <button 
+            v-if="canCheckForUpdate"
+            @click="checkForUpdates" 
+            class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-300 underline text-xs"
+            :disabled="checkingForUpdate"
+        >
+          {{ checkingForUpdate ? 'Checking...' : 'Check for Update' }}
+        </button>
+      </div>
+      <p v-if="updateStatusMessage" class="text-sm mt-1" :class="updateError ? 'text-red-500' : 'text-green-500'">
+        {{ updateStatusMessage }}
+      </p>
+    </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 (max 99 players).</li>
+        <li>Photo avatars using device camera or defaults.</li>
+        <li>Configurable hotkeys for passing turns and global actions.</li>
+        <li>**MQTT integration for remote control using unique characters per action.**</li> 
+        <li>Audio feedback for timer events.</li>
+        <li>Light/Dark theme options.</li>
+        <li>Persistent storage of game state.</li>
+        <li>Screen Wake Lock to keep screen on during active gameplay.</li>
+        <li>PWA installability with update checks.</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 { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+const router = useRouter();
+const store = useStore();
+
+const buildTime = ref('N/A'); 
+
+onMounted(() => {
+  buildTime.value = import.meta.env.VITE_APP_BUILD_TIME || 'Unknown Build Time';
+});
+
+const canCheckForUpdate = ref('serviceWorker' in navigator);
+const checkingForUpdate = ref(false);
+const updateStatusMessage = ref('');
+const updateError = ref(false);
+
+const checkForUpdates = async () => {
+  if (!('serviceWorker' in navigator)) {
+    updateStatusMessage.value = 'Service Worker API not supported.';
+    updateError.value = true;
+    return;
+  }
+  checkingForUpdate.value = true;
+  updateStatusMessage.value = 'Checking for updates...';
+  updateError.value = false;
+  try {
+    const registration = await navigator.serviceWorker.getRegistration();
+    if (!registration) {
+      updateStatusMessage.value = 'No active service worker. Try reloading.';
+      updateError.value = true;
+      checkingForUpdate.value = false;
+      return;
+    }
+    await registration.update();
+    setTimeout(() => {
+        const newWorker = registration.waiting;
+        if (newWorker) {
+            updateStatusMessage.value = 'New version downloaded! Refresh prompt may appear.';
+            updateError.value = false;
+        } else if (registration.active && registration.installing) {
+            updateStatusMessage.value = 'New version installing...';
+            updateError.value = false;
+        } else {
+            updateStatusMessage.value = 'You are on the latest version.';
+            updateError.value = false;
+        }
+        checkingForUpdate.value = false;
+    }, 2000);
+  } catch (error) {
+    console.error('Error checking for PWA updates:', error);
+    updateStatusMessage.value = 'Error checking updates. See console.';
+    updateError.value = true;
+    checkingForUpdate.value = false;
+  }
+};
+
+const goBack = () => {
+  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,417 @@
+<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 (no changes) -->
+    <section class="w-full max-w-3xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
+      <!-- ... Player list ... -->
+      <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">
+             <img 
+              v-if="player.avatar"
+              :src="player.avatar" 
+              alt="Player Avatar" 
+              class="w-10 h-10 rounded-full object-cover mr-3"
+            />
+            <DefaultAvatarIcon v-else class="w-10 h-10 rounded-full object-cover mr-3 text-gray-400 bg-gray-200 p-0.5"/>
+            <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 mr-1">
+                HK: {{ player.hotkey.toUpperCase() }}
+            </span>
+            <span v-if="player.mqttChar" class="text-xs px-1.5 py-0.5 bg-purple-100 dark:bg-purple-700 text-purple-700 dark:text-purple-200 rounded">
+                MQTT: {{ player.mqttChar.toUpperCase() }}
+            </span>
+          </div>
+          <div class="space-x-1 flex items-center flex-shrink-0">
+            <button @click="movePlayerUp(index)" :disabled="index === 0" class="btn-icon"><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"><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. Add at least 2.</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>
+
+    <section class="w-full max-w-3xl bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
+      <!-- MQTT Broker URL -->
+      <div class="mb-6">
+        <label for="mqttBrokerUrl" class="block text-sm font-medium text-gray-700 dark:text-gray-300">MQTT Broker URL</label>
+        <div class="mt-1 flex rounded-md shadow-sm">
+            <input type="text" id="mqttBrokerUrl" v-model="localMqttBrokerUrl" placeholder="ws://broker.example.com:9001" class="input-base flex-1 rounded-none rounded-l-md" :disabled="mqttConnectionStatus === 'connected' || mqttConnectionStatus === 'connecting'">
+            <button @click="toggleMqttConnection" 
+                    :class="['btn inline-flex items-center px-4 rounded-l-none rounded-r-md border border-l-0 text-white', 
+                             mqttConnectionStatus === 'connected' ? 'bg-red-500 hover:bg-red-600 border-red-600' : 
+                             mqttConnectionStatus === 'connecting' ? 'bg-yellow-500 hover:bg-yellow-600 border-yellow-600 !text-black' : 
+                             'btn-primary border-blue-500']"
+            >
+              {{ mqttConnectionStatus === 'connected' ? 'Disconnect' : (mqttConnectionStatus === 'connecting' ? 'Stop' : 'Connect') }}
+            </button>
+        </div>
+        <p v-if="mqttError" class="text-xs text-red-500 mt-1">{{ mqttError }}</p>
+        <p v-else-if="mqttConnectionStatus === 'connected'" class="text-xs text-green-500 mt-1">Connected to {{ store.getters.mqttBrokerUrl }}. Subscribed to '{{ MqttService.MQTT_TOPIC_GAME }}'.</p>
+        <p v-else-if="mqttConnectionStatus === 'connecting'" class="text-xs text-yellow-600 mt-1">Connecting to {{ localMqttBrokerUrl }}... (Click "Stop" to cancel)</p>
+        <p v-else-if="mqttConnectionStatus === 'disconnected'" class="text-xs text-gray-500 mt-1">Not connected.</p>
+      </div>
+
+      <!-- Global Triggers -->
+      <div>
+        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Global "Toggle Current/Pause All" Trigger:</p>
+        <div class="flex items-center justify-between space-x-4 mb-3">
+            <div class="flex items-center">
+                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">Hotkey:</span>
+                <button type="button" @click="startCaptureGlobalHotkey('stopPause')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
+                    <span>{{ globalHotkeyStopPauseDisplay || '-' }}</span>
+                </button>
+                <button v-if="globalHotkeyStopPause" type="button" @click="clearGlobalHotkey('stopPause')" class="trigger-clear-btn">Clear</button>
+                <span v-else class="trigger-clear-btn-placeholder"></span>
+            </div>
+            <div class="flex items-center">
+                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">MQTT:</span>
+                <button type="button" @click="startCaptureGlobalMqttChar('stopPause')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
+                    <span>{{ globalMqttStopPauseDisplay || '-' }}</span>
+                </button>
+                <button v-if="globalMqttStopPause" type="button" @click="clearGlobalMqttChar('stopPause')" class="trigger-clear-btn">Clear</button>
+                <span v-else class="trigger-clear-btn-placeholder"></span>
+            </div>
+        </div>
+      </div>
+      <div>
+        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Global "Run All Timers" Trigger:</p>
+        <div class="flex items-center justify-between space-x-4 mb-3">
+            <div class="flex items-center">
+                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">Hotkey:</span>
+                <button type="button" @click="startCaptureGlobalHotkey('runAll')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
+                    <span>{{ globalHotkeyRunAllDisplay || '-' }}</span>
+                </button>
+                <button v-if="globalHotkeyRunAll" type="button" @click="clearGlobalHotkey('runAll')" class="trigger-clear-btn">Clear</button>
+                <span v-else class="trigger-clear-btn-placeholder"></span>
+            </div>
+            <div class="flex items-center">
+                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">MQTT:</span>
+                <button type="button" @click="startCaptureGlobalMqttChar('runAll')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
+                     <span>{{ globalMqttRunAllDisplay || '-' }}</span>
+                </button>
+                <button v-if="globalMqttRunAll" type="button" @click="clearGlobalMqttChar('runAll')" class="trigger-clear-btn">Clear</button>
+                <span v-else class="trigger-clear-btn-placeholder"></span>
+            </div>
+        </div>
+      </div>
+      <div>
+        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Global "Pass Turn" Trigger:</p>
+        <div class="flex items-center justify-between space-x-4 mb-6">
+            <div class="flex items-center">
+                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">Hotkey:</span>
+                <button type="button" @click="startCaptureGlobalHotkey('passTurn')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
+                    <span>{{ globalHotkeyPassTurnDisplay || '-' }}</span>
+                </button>
+                <button v-if="globalHotkeyPassTurn" type="button" @click="clearGlobalHotkey('passTurn')" class="trigger-clear-btn">Clear</button>
+                <span v-else class="trigger-clear-btn-placeholder"></span>
+            </div>
+            <div class="flex items-center">
+                <span class="text-sm mr-2 text-gray-600 dark:text-gray-400">MQTT:</span>
+                <button type="button" @click="startCaptureGlobalMqttChar('passTurn')" class="input-base w-12 h-8 font-mono text-lg p-0 cursor-pointer flex items-center justify-center">
+                     <span>{{ globalMqttPassTurnDisplay || '-' }}</span>
+                </button>
+                <button v-if="globalMqttPassTurn" type="button" @click="clearGlobalMqttChar('passTurn')" class="trigger-clear-btn">Clear</button>
+                <span v-else class="trigger-clear-btn-placeholder"></span>
+            </div>
+        </div>
+      </div>
+      
+      <div class="flex items-center justify-between mb-4 mt-6">
+        <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>
+    
+    <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>
+    <PlayerForm v-if="showPlayerModal" :player="editingPlayer" @close="closePlayerModal" @save="savePlayer"/>
+
+    <HotkeyCaptureOverlay 
+      :visible="isCapturingGlobalHotkey"
+      @captured="handleGlobalHotkeyCaptured"
+      @cancel="cancelCaptureGlobalHotkey"
+    />
+    <MqttCharCaptureOverlay
+      :visible="isCapturingGlobalMqttChar"
+      @cancel="cancelCaptureGlobalMqttChar" 
+    />
+  </div>
+</template>
+
+<style scoped>
+.trigger-clear-btn {
+    @apply text-xs text-blue-500 hover:underline ml-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-600;
+    min-width: 40px; /* Adjust this width to match the "Clear" button's typical width */
+    display: inline-block; /* Important for width and centering if text-align used */
+    text-align: center; /* Center the "Clear" text if button width is larger */
+}
+.trigger-clear-btn-placeholder {
+    @apply ml-2 px-2 py-1; /* Match horizontal spacing and padding */
+    min-width: 40px; /* Match the width of the actual clear button */
+    display: inline-block; /* To take up space */
+    visibility: hidden; /* Makes it take space but not be visible */
+}
+</style>
+
+<script setup>
+import { ref, computed, watch, onUnmounted } 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';
+import HotkeyCaptureOverlay from '../components/HotkeyCaptureOverlay.vue';
+import MqttCharCaptureOverlay from '../components/MqttCharCaptureOverlay.vue';
+import { MqttService } from '../services/MqttService';
+
+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 localMqttBrokerUrl = ref(store.getters.mqttBrokerUrl);
+watch(() => store.getters.mqttBrokerUrl, (newUrl) => { localMqttBrokerUrl.value = newUrl; });
+const mqttConnectionStatus = MqttService.connectionStatus;
+const mqttError = MqttService.error;
+
+const globalHotkeyStopPause = computed(() => store.getters.globalHotkeyStopPause);
+const globalHotkeyStopPauseDisplay = computed(() => globalHotkeyStopPause.value ? globalHotkeyStopPause.value.toUpperCase() : '');
+const globalMqttStopPause = computed(() => store.getters.globalMqttStopPause);
+const globalMqttStopPauseDisplay = computed(() => globalMqttStopPause.value ? globalMqttStopPause.value.toUpperCase() : '');
+
+const globalHotkeyRunAll = computed(() => store.getters.globalHotkeyRunAll);
+const globalHotkeyRunAllDisplay = computed(() => globalHotkeyRunAll.value ? globalHotkeyRunAll.value.toUpperCase() : '');
+const globalMqttRunAll = computed(() => store.getters.globalMqttRunAll);
+const globalMqttRunAllDisplay = computed(() => globalMqttRunAll.value ? globalMqttRunAll.value.toUpperCase() : '');
+
+const globalHotkeyPassTurn = computed(() => store.getters.globalHotkeyPassTurn);
+const globalHotkeyPassTurnDisplay = computed(() => globalHotkeyPassTurn.value ? globalHotkeyPassTurn.value.toUpperCase() : '');
+const globalMqttPassTurn = computed(() => store.getters.globalMqttPassTurn);
+const globalMqttPassTurnDisplay = computed(() => globalMqttPassTurn.value ? globalMqttPassTurn.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,
+      mqttChar: playerData.mqttChar
+    });
+  }
+  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 isCapturingGlobalHotkey = ref(false);
+const isCapturingGlobalMqttChar = ref(false);
+const currentGlobalActionType = ref(null); // 'stopPause', 'runAll', or 'passTurn'
+
+
+const startCaptureGlobalHotkey = (actionType) => {
+  currentGlobalActionType.value = actionType;
+  isCapturingGlobalHotkey.value = true;
+};
+const cancelCaptureGlobalHotkey = () => {
+  isCapturingGlobalHotkey.value = false;
+  currentGlobalActionType.value = null;
+};
+const clearGlobalHotkey = (actionType) => {
+  if (actionType === 'stopPause') store.dispatch('setGlobalHotkeyStopPause', null);
+  else if (actionType === 'runAll') store.dispatch('setGlobalHotkeyRunAll', null);
+  else if (actionType === 'passTurn') store.dispatch('setGlobalHotkeyPassTurn', null);
+};
+const handleGlobalHotkeyCaptured = (key) => {
+  isCapturingGlobalHotkey.value = false;
+  const actionType = currentGlobalActionType.value;
+  if (!actionType || key.length !== 1) { currentGlobalActionType.value = null; return; }
+  let conflictMessage = '';
+  if (store.state.players.some(p => p.hotkey === key)) { 
+    conflictMessage = `Hotkey "${key.toUpperCase()}" is already used by a player.`;
+  } 
+  else if (actionType === 'stopPause') {
+    if (store.state.globalHotkeyRunAll === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Run All Timers Hotkey.`;
+    if (store.state.globalHotkeyPassTurn === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Pass Turn Hotkey.`;
+  } else if (actionType === 'runAll') {
+    if (store.state.globalHotkeyStopPause === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Stop/Pause Hotkey.`;
+    if (store.state.globalHotkeyPassTurn === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Pass Turn Hotkey.`;
+  } else if (actionType === 'passTurn') {
+    if (store.state.globalHotkeyStopPause === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Stop/Pause Hotkey.`;
+    if (store.state.globalHotkeyRunAll === key) conflictMessage = `Hotkey "${key.toUpperCase()}" is Global Run All Hotkey.`;
+  }
+  if (conflictMessage) { alert(conflictMessage); currentGlobalActionType.value = null; return; }
+  if (actionType === 'stopPause') store.dispatch('setGlobalHotkeyStopPause', key);
+  else if (actionType === 'runAll') store.dispatch('setGlobalHotkeyRunAll', key);
+  else if (actionType === 'passTurn') store.dispatch('setGlobalHotkeyPassTurn', key);
+  currentGlobalActionType.value = null;
+};
+
+const startCaptureGlobalMqttChar = (actionType) => {
+  if (MqttService.connectionStatus.value !== 'connected') {
+    alert('MQTT broker is not connected. Please connect first.');
+    return;
+  }
+  currentGlobalActionType.value = actionType;
+  isCapturingGlobalMqttChar.value = true;
+  MqttService.startMqttCharCapture(handleGlobalMqttCharCapturedDirect); 
+};
+const cancelCaptureGlobalMqttChar = () => {
+  isCapturingGlobalMqttChar.value = false;
+  currentGlobalActionType.value = null;
+  MqttService.stopMqttCharCapture();
+};
+const clearGlobalMqttChar = (actionType) => {
+  if (actionType === 'stopPause') store.dispatch('setGlobalMqttStopPause', null);
+  else if (actionType === 'runAll') store.dispatch('setGlobalMqttRunAll', null);
+  else if (actionType === 'passTurn') store.dispatch('setGlobalMqttPassTurn', null);
+};
+const handleGlobalMqttCharCapturedDirect = (charKey) => { 
+  isCapturingGlobalMqttChar.value = false;
+  const actionType = currentGlobalActionType.value;
+  if (!actionType || charKey.length !== 1) { currentGlobalActionType.value = null; return; }
+  let conflictMessage = '';
+  if (store.state.players.some(p => p.mqttChar === charKey)) {
+    conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is already used by a player.`;
+  }
+  else if (actionType === 'stopPause') {
+    if (store.state.globalMqttRunAll === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Run All Timers MQTT Char.`;
+    if (store.state.globalMqttPassTurn === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Pass Turn MQTT Char.`;
+  } else if (actionType === 'runAll') {
+    if (store.state.globalMqttStopPause === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Stop/Pause MQTT Char.`;
+    if (store.state.globalMqttPassTurn === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Pass Turn MQTT Char.`;
+  } else if (actionType === 'passTurn') {
+    if (store.state.globalMqttStopPause === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Stop/Pause MQTT Char.`;
+    if (store.state.globalMqttRunAll === charKey) conflictMessage = `MQTT Char "${charKey.toUpperCase()}" is Global Run All Timers MQTT Char.`;
+  }
+  if (conflictMessage) { alert(conflictMessage); currentGlobalActionType.value = null; return; }
+  if (actionType === 'stopPause') store.dispatch('setGlobalMqttStopPause', charKey);
+  else if (actionType === 'runAll') store.dispatch('setGlobalMqttRunAll', charKey);
+  else if (actionType === 'passTurn') store.dispatch('setGlobalMqttPassTurn', charKey);
+  currentGlobalActionType.value = null;
+};
+
+const toggleMqttConnection = async () => {
+    if (MqttService.connectionStatus.value === 'connected' || MqttService.connectionStatus.value === 'connecting') {
+        MqttService.disconnect();
+        await store.dispatch('setMqttConnectDesired', false); 
+    } else {
+        if (!localMqttBrokerUrl.value.trim()) { alert("Please enter MQTT Broker URL (e.g., ws://host:port)."); return; }
+        try {
+            const url = new URL(localMqttBrokerUrl.value);
+            if(!url.protocol.startsWith('ws')) { throw new Error("URL must start with ws:// or wss://"); }
+        } catch (e) { alert(`Invalid MQTT Broker URL: ${e.message}. Please use format ws://host:port or wss://host:port.`); return; }
+        await store.dispatch('setMqttBrokerUrl', localMqttBrokerUrl.value);
+        MqttService.connect(localMqttBrokerUrl.value);
+    }
+};
+onUnmounted(() => { 
+    if (MqttService.isCapturingMqttChar.value) { MqttService.stopMqttCharCapture(); }
+});
+
+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/systemd/virt-nexus-timer.service
+++ b/systemd/virt-nexus-timer.service
@@ -0,0 +1,28 @@
+[Unit]
+Description=nexus-timer (virt-nexus-timer)
+Requires=docker.service
+After=network.target docker.service
+DefaultDependencies=no
+
+[Service]
+Type=simple
+Environment="HOME=/root"
+ExecStartPre=-/usr/bin/env sh -c '/usr/bin/env docker stop -t 3 virt-nexus-timer 2>/dev/null || true'
+ExecStartPre=-/usr/bin/env sh -c '/usr/bin/env docker rm virt-nexus-timer 2>/dev/null || true'
+
+ExecStart=/usr/bin/env docker run \
+                        --rm \
+                        --name=virt-nexus-timer \
+                        --network=traefik \
+                        --label-file /virt/nexus-timer/labels \
+                              virt-nexus-timer
+
+ExecStop=-/usr/bin/env sh -c '/usr/bin/env docker stop -t 3 virt-nexus-timer 2>/dev/null || true'
+ExecStop=-/usr/bin/env sh -c '/usr/bin/env docker rm virt-nexus-timer 2>/dev/null || true'
+
+Restart=always
+RestartSec=30
+SyslogIdentifier=virt-nexus-timer
+
+[Install]
+WantedBy=multi-user.target
--- a/systemd/webhook.service
+++ b/systemd/webhook.service
@@ -0,0 +1,35 @@
+[Unit]
+Description=Small server for creating HTTP endpoints (hooks)
+Documentation=https://github.com/adnanh/webhook/
+After=network-online.target
+Wants=network-online.target
+ConditionPathExists=/etc/webhook.conf
+
+
+[Service]
+Type=simple
+
+# Clear any existing ExecStart from a base unit file, if any
+ExecStart=
+# Path to webhook, IP, port, path to hooks config, verbose logging, hot-reloading config
+ExecStart=/usr/bin/webhook -ip 10.0.0.1 -port 9000 -verbose -nopanic -hooks /etc/webhook.conf
+
+# --- Security & User (Recommended) ---
+# 1. Create a dedicated user:
+#    sudo useradd --system --no-create-home --shell /bin/false webhooksvc
+# 2. Ensure this user can read /etc/webhook.conf and execute redeploy.sh
+#    sudo chown webhooksvc:webhooksvc /etc/webhook.conf && sudo chmod 640 /etc/webhook.conf
+#    Also grant sudo rights for systemctl restart as mentioned in Step 3.1.
+# Uncomment and use if you created the 'webhooksvc' user:
+# User=webhooksvc
+# Group=webhooksvc
+# If running as root (less secure), leave User/Group commented.
+
+Restart=on-failure
+RestartSec=5s
+TimeoutStopSec=30s
+StandardOutput=journal
+StandardError=journal
+
+[Install]
+WantedBy=multi-user.target
--- 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,53 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import fs from 'fs';
+import { resolve } from 'path';
+
+const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+const appVersion = packageJson.version;
+
+// Get current date (this will be the server's local time where the build runs)
+const now = new Date();
+
+// Options for date formatting, targeting CET/CEST
+const dateTimeFormatOptionsCEST = {
+  year: 'numeric', month: '2-digit', day: '2-digit',
+  hour: '2-digit', minute: '2-digit', second: '2-digit',
+  hour12: false, // Use 24-hour format
+  timeZone: 'Europe/Bratislava' // Or 'Europe/Prague', 'Europe/Berlin', etc. (any major CET/CEST city)
+  // This will automatically handle Daylight Saving Time (CEST vs CET)
+};
+
+// Generate build time string using a specific time zone that observes CET/CEST
+const appBuildTime = now.toLocaleString('sk-SK', dateTimeFormatOptionsCEST) + " CEST/CET"; // Add timezone indicator for clarity
+
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 8080
+  },
+  define: {
+    'import.meta.env.VITE_APP_BUILD_TIME': JSON.stringify(appBuildTime),
+    '__APP_CACHE_VERSION__': JSON.stringify(`nexus-timer-cache-v${appVersion}-${Date.now()}`)
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        sw: resolve(__dirname, 'src/sw.js')
+      },
+      output: {
+        entryFileNames: assetInfo => {
+          if (assetInfo.name === 'sw') {
+            return 'service-worker.js';
+          }
+          return 'assets/[name]-[hash].js';
+        },
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
+      }
+    },
+    emptyOutDir: true, 
+  }
+});